:root {
  --A: #ef5a1c;       /* Team 1: lava orange */
  --A-dark: #a8360a;
  --B: #1d86e8;       /* Team 2: ice blue */
  --B-dark: #0f4f99;
  --gold: #ffc531;
  --gold-dark: #b8860b;
  --silver: #dfe7ef;
  --ink: #14110f;
  --paper: #fffaf2;
  --grass: #2f8f3a;
  --font: "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--ink); color: var(--paper);
  font-family: var(--font); overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}
input { -webkit-user-select: text; user-select: text; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.tA { color: var(--A); font-weight: 800; }
.tB { color: var(--B); font-weight: 800; }

/* ---------- Setup screen ---------- */
#setup {
  min-height: 100%; padding: 18px 24px calc(18px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at top, #3a2416 0%, var(--ink) 60%);
  overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: manipulation;
}
.setup-head { display: flex; align-items: center; gap: 18px; }
.setup-logo { height: 92px; }
.setup-sub { font-size: 22px; font-weight: 700; opacity: .8; }
.setup-grid { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr; gap: 16px; margin-top: 12px; }
.panel { background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px 18px; }
.panel h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: .5px; }
.teams-panel { grid-column: 1 / 3; }
.start-panel { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 12px; }
.add-row { display: flex; gap: 10px; }
.add-row input {
  flex: 1; font-size: 24px; padding: 12px 16px; border-radius: 12px; border: 2px solid #555;
  background: #fff; color: #111; font-family: inherit;
}
.btn {
  font-size: 20px; font-weight: 700; padding: 12px 18px; border-radius: 12px; border: 0;
  background: #3b3530; color: var(--paper);
}
.btn:active { transform: scale(.97); }
.btn.big { font-size: 22px; background: #5a3d8a; }
.btn.go { font-size: 30px; padding: 18px; background: linear-gradient(#ff7a2e, #d9480f); box-shadow: 0 4px 0 #8a2c06; }
.btn.round { width: 64px; height: 64px; font-size: 34px; padding: 0; border-radius: 50%; }
.setup-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.hint { font-size: 17px; opacity: .85; margin: 10px 0; }
.hint.warn { color: #ffb38a; min-height: 1.2em; opacity: 1; }
.len-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.len-show { font-size: 34px; font-weight: 800; min-width: 120px; text-align: center; }
.cols { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr .8fr; gap: 12px; }
.col { background: rgba(0,0,0,.25); border-radius: 14px; padding: 8px 10px; min-height: 200px; }
.col h3 { margin: 2px 0 8px; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.colA { box-shadow: inset 0 0 0 3px var(--A); }
.colB { box-shadow: inset 0 0 0 3px var(--B); }
.colAway { opacity: .75; }
.count { opacity: .7; font-size: 17px; }
.team-name-input {
  width: 100%; font-size: 20px; font-weight: 800; font-family: inherit; color: var(--paper);
  background: transparent; border: 0; border-bottom: 2px dashed rgba(255,255,255,.35); padding: 2px 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 22px; font-weight: 700; padding: 10px 14px; border-radius: 999px; border: 0;
  background: #4a433d; color: #fff; position: relative;
}
.chip.A { background: var(--A); }
.chip.B { background: var(--B); }
.chip.away { background: #2c2825; color: #aaa; }
.chip .x { display: none; margin-left: 8px; background: #000a; border-radius: 50%; padding: 0 8px; }
.editing .chip .x { display: inline-block; }
.editing .chip { outline: 3px dashed #ffffff88; outline-offset: 2px; }
.setup-foot { margin-top: 14px; font-size: 15px; opacity: .6; text-align: center; }

/* ---------- Game board ---------- */
#game { position: fixed; inset: 0; overflow: hidden; background: var(--ink); touch-action: none; }
#stage {
  position: absolute; left: 0; top: 0; width: 1376px; transform-origin: 0 0;
  overflow: hidden; background: #1c3b22;
}
#field { position: absolute; inset: 0; width: 100%; height: 100%; }
#board { position: absolute; inset: 0; }

/* Top scoreboard */
#topbar {
  position: absolute; left: 0; right: 0; top: 0; height: 112px; display: flex; align-items: stretch;
  background: linear-gradient(#26201b, #15110e); border-bottom: 4px solid #000; z-index: 5;
}
.team-panel { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; gap: 14px; }
#panelA { background: linear-gradient(90deg, var(--A-dark), var(--A)); }
#panelB { background: linear-gradient(90deg, var(--B), var(--B-dark)); }
.tp-name { font-size: 40px; font-weight: 900; text-shadow: 0 3px 0 #0006; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-score {
  font-size: 84px; font-weight: 900; line-height: 1; min-width: 120px; text-align: center;
  background: #0008; border-radius: 16px; padding: 4px 14px; font-variant-numeric: tabular-nums;
}
.tp-score.bump { animation: bump .5s ease-out; }
@keyframes bump { 30% { transform: scale(1.25); color: var(--gold); } }
.centre-panel { width: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #0c0a08; }
.clock {
  font-size: 76px; font-weight: 900; line-height: 1; color: #fff; background: none; border: 0; padding: 0 12px;
  font-variant-numeric: tabular-nums; letter-spacing: 2px;
}
.clock.paused { color: #ffd76a; }
.clock.low { color: #ff5b4a; }
.clock.final { animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.up-next {
  font-size: 20px; font-weight: 900; border: 0; border-radius: 999px; padding: 3px 16px; color: #fff;
  background: #444; letter-spacing: 1px; white-space: nowrap;
}
.up-next.A { background: var(--A); }
.up-next.B { background: var(--B); }

/* Desks and chairs */
.zone-head {
  position: absolute; font-size: 22px; font-weight: 900; text-align: center; color: #fff;
  text-shadow: 0 2px 0 #0008; letter-spacing: 1px; pointer-events: none;
  background: #000000a0; border-radius: 999px; padding: 4px 0; margin: 0 6px;
}
.desk {
  position: absolute; border-radius: 12px; display: flex; align-items: center;
  background: url(art/desk.svg) center / 100% 100% no-repeat;
}
.chair {
  position: absolute; border-radius: 22px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; padding-bottom: 10px;
}
.chair .chair-art { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.chair .chair-label {
  position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-weight: 900; letter-spacing: 2px;
  color: #fff; text-shadow: 0 2px 0 #000a; pointer-events: none;
}
.chair.legend .chair-label { color: var(--gold); }
.chair.drop-ok, .desk.drop-ok { outline: 6px solid #fff; outline-offset: 2px; }
.chair .open { font-size: 24px; font-weight: 800; color: #ffffffd0; position: relative; letter-spacing: 3px; pointer-events: none; background: #000a; border-radius: 999px; padding: 4px 18px; }

.tok {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 14px; color: #fff; font-weight: 900; white-space: nowrap;
  text-shadow: 0 2px 0 #0007; box-shadow: 0 4px 0 #0006; touch-action: none;
}
.tok.A { background: var(--A); }
.tok.B { background: var(--B); }
.tok.gone { opacity: .25; box-shadow: none; }
.tok.out { background: #3a3a3a; text-decoration: line-through; opacity: .55; }
.tok.dragging { opacity: .3; }
.tok .due { width: 1em; height: 1em; flex: none; background: url(art/ball.webp) center / contain no-repeat; font-size: .8em; }
.tok .card { position: absolute; top: -8px; right: -6px; width: 20px; height: 28px; border-radius: 3px; background: #ffd400; border: 2px solid #0008; }
.tok .card.red { background: #e01e1e; }
.tok.swap-ok { outline: 6px solid #fff; }
.chair.legend .tok { box-shadow: 0 0 0 4px var(--gold), 0 6px 0 #0006; }

#ghost { position: absolute; z-index: 20; pointer-events: none; transform: translate(-50%, -50%) scale(1.12); opacity: .95; }

/* Bottom referee toolbar */
#toolbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; justify-content: center;
  gap: 10px; background: #0d0b09e6; border-top: 3px solid #000; z-index: 5; padding: 0 12px;
}
.tb { font-size: 20px; font-weight: 800; padding: 9px 16px; border-radius: 12px; border: 0; background: #322c27; color: #f3eee8; }
.tb:active { background: #4b433b; }
.tb:disabled { opacity: .35; }
.tb-play { background: #2b7a32; min-width: 130px; }
.tb-play.pause { background: #8a6d12; }
.ver { position: absolute; right: 10px; bottom: 4px; font-size: 12px; opacity: .45; }

/* Tap menu */
#menu {
  position: absolute; z-index: 30; background: #1b1714; border: 3px solid #fff; border-radius: 18px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; width: 300px; box-shadow: 0 12px 40px #000c;
}
#menu .m-title { font-size: 28px; font-weight: 900; text-align: center; padding: 4px 0 6px; }
#menu button { font-size: 24px; font-weight: 800; padding: 14px; border-radius: 12px; border: 0; background: #3a332d; color: #fff; text-align: left; }
#menu button.m-yellow { background: #9a7c00; }
#menu button.m-red { background: #a01818; }
#menu button.m-turn { background: #24652b; }
#menu button.m-block { background: #4b2a7a; }
#menu button.A { background: var(--A); }
#menu button.B { background: var(--B); }
#menu button.m-cancel { background: #2a2622; text-align: center; font-size: 20px; }

/* Overlays: time up, results */
#overlay {
  position: absolute; inset: 0; z-index: 40; background: radial-gradient(ellipse at center, #2a1a0ef2, #0b0806f8);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center;
}
.ov-big { font-size: 170px; font-weight: 900; line-height: 1; color: #ff5b4a; text-shadow: 0 8px 0 #000; animation: pulse 1s 3; }
.ov-title { font-size: 92px; font-weight: 900; line-height: 1; text-shadow: 0 6px 0 #000; }
.ov-title.A { color: var(--A); }
.ov-title.B { color: var(--B); }
.ov-title.tie { color: var(--gold); }
.ov-scores { display: flex; gap: 40px; font-size: 56px; font-weight: 900; }
.ov-scores .A { color: var(--A); }
.ov-scores .B { color: var(--B); }
.ov-sub { font-size: 34px; font-weight: 800; color: var(--gold); letter-spacing: 2px; }
.tickets { display: flex; gap: 26px; }
.ticket {
  width: 380px; height: 164px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: url(art/golden-ticket.webp) center / 100% 100% no-repeat; color: #4a2e00; padding: 30px 30px 6px;
  animation: ticketIn .7s cubic-bezier(.2,1.6,.4,1) backwards;
}
.ticket .t-name { font-size: 48px; font-weight: 900; }
.ticket .t-team { font-size: 22px; font-weight: 800; }
@keyframes ticketIn { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
.ov-buttons { display: flex; gap: 14px; margin-top: 10px; }
.ov-buttons .btn { font-size: 24px; }
.none-msg { font-size: 30px; opacity: .8; }

#toast {
  position: absolute; z-index: 50; left: 50%; bottom: 84px; transform: translateX(-50%); white-space: nowrap;
  background: #000d; color: #fff; font-size: 30px; font-weight: 800; padding: 14px 28px; border-radius: 16px; border: 3px solid #fff;
}

#portraitHint { display: none; }
@media (orientation: portrait) {
  #portraitHint {
    display: block; position: fixed; left: 0; right: 0; bottom: 30px; text-align: center; font-size: 28px; font-weight: 800; color: #ffd76a;
  }
}

/* ---------- Season stats ---------- */
#stats {
  min-height: 100%; padding: 18px 24px calc(18px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at top, #2a1d3a 0%, var(--ink) 60%);
  overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: manipulation;
}
#stats .panel { margin-top: 14px; }
.stats-btn { margin-left: auto; background: #5a3d8a; font-size: 22px; }
.stats-actions { margin-left: auto; display: flex; gap: 10px; }
.btn.go.small { font-size: 22px; padding: 12px 20px; }
.hint-inline { font-size: 16px; font-weight: 600; opacity: .65; margin-left: 10px; }
.leaders { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
.leader {
  border-radius: 16px; padding: 12px 16px; background: linear-gradient(135deg, #4b2a7a, #2a1840);
  border: 2px solid #fdb92766; min-height: 104px;
}
.leader .l-label { font-size: 16px; font-weight: 800; letter-spacing: 1px; color: #fdb927; text-transform: uppercase; }
.leader .l-name { font-size: 24px; font-weight: 900; line-height: 1.15; margin-top: 4px; }
.leader .l-val { font-size: 18px; font-weight: 700; opacity: .85; }
.table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 22px; font-variant-numeric: tabular-nums; }
.stats-table th {
  font-size: 16px; font-weight: 800; letter-spacing: .5px; text-align: center; padding: 10px 6px; color: #d9cfe6;
  border-bottom: 3px solid #fdb927; white-space: nowrap; cursor: pointer;
}
.stats-table th.sorted { color: #fdb927; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; padding-left: 12px; }
.stats-table td { text-align: center; padding: 11px 6px; border-bottom: 1px solid #ffffff14; }
.stats-table tbody tr:nth-child(odd) { background: #ffffff08; }
.stats-table td.name { font-weight: 900; font-size: 24px; color: #fff; }
.stats-table td.lead { color: #fdb927; font-weight: 900; }
.stats-table td.dim { opacity: .4; }
.stats-table .rank { display: inline-block; width: 34px; opacity: .55; font-size: 18px; }
.game-list { display: flex; flex-direction: column; gap: 8px; }
.game-row { display: flex; align-items: center; gap: 14px; font-size: 20px; background: #ffffff0a; border-radius: 12px; padding: 10px 14px; }
.game-row .g-date { width: 150px; opacity: .75; font-weight: 700; }
.game-row .g-score { flex: 1; font-weight: 800; }
.game-row .g-del { font-size: 16px; padding: 8px 12px; background: #5a2420; }
.empty { font-size: 20px; opacity: .7; padding: 10px 4px; }

.profile-back { position: fixed; inset: 0; background: #000b; display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.profile-card {
  width: min(980px, 100%); max-height: 92vh; overflow-y: auto; border-radius: 22px; padding: 22px 26px;
  background: linear-gradient(160deg, #3d2266, #1a1024 55%); border: 3px solid #fdb927; box-shadow: 0 20px 60px #000;
}
.p-head { display: flex; align-items: center; gap: 16px; }
.p-name { font-size: 56px; font-weight: 900; line-height: 1; }
.p-sub { font-size: 20px; font-weight: 700; opacity: .75; margin-top: 4px; }
.p-head .btn { margin-left: auto; }
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 18px 0; }
.tile { background: #00000055; border-radius: 14px; padding: 10px; text-align: center; }
.tile .t-val { font-size: 38px; font-weight: 900; color: #fdb927; line-height: 1.1; }
.tile .t-lab { font-size: 14px; font-weight: 800; letter-spacing: .5px; opacity: .8; text-transform: uppercase; }
.log { width: 100%; border-collapse: collapse; font-size: 19px; }
.log th { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; opacity: .7; text-align: left; padding: 6px; border-bottom: 2px solid #ffffff33; }
.log td { padding: 8px 6px; border-bottom: 1px solid #ffffff14; }
.log .W { color: #6ee07a; font-weight: 900; } .log .L { color: #ff8a7a; font-weight: 900; } .log .T { color: #fdb927; font-weight: 900; }