/* ===========================================================
   SLIME WK 2026 — retro slime soccer
   Styling: pixel/retro vibe, oranje accent, responsive.
   =========================================================== */

:root {
  --bg:        #0a0a16;
  --panel:     #12122a;
  --panel2:    #1b1b3a;
  --ink:       #f4f4ff;
  --muted:     #9a9ad0;
  --oranje:    #ff7a18;
  --oranje2:   #ffae3b;
  --groen:     #1f8f3a;
  --line:      #2c2c55;
  --good:      #34d17a;
  --bad:       #ff5470;
  --ui:      'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;
  --padb:    0px;   /* bottom space reserved for touch controls (tablets); 0 on desktop */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;          /* no pull-to-refresh / rubber-band bounce */
  -webkit-touch-callout: none;        /* no long-press loupe / "save image" callout on iOS */
}
/* but keep the code/name inputs fully usable (typing, paste, the caret) */
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* ---- Stage / canvas ---- */
#stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* WC2026 stadium atmosphere fills the letterbox edges: orange glow up top,
     green pitch glow at the bottom, deep stadium-blue in the middle */
  background:
    radial-gradient(135% 95% at 50% -18%, rgba(255,122,24,.22), transparent 56%),
    radial-gradient(120% 80% at 50% 118%, rgba(31,143,58,.20), transparent 60%),
    radial-gradient(90% 70% at 50% 42%, #16203f 0%, #0b1024 52%, #06060f 100%);
}
#game {
  width:  min(100vw, calc((100vh - var(--padb)) * 1160 / 600));
  height: min(calc(100vh - var(--padb)), calc(100vw * 600 / 1160));
  /* dvh excludes the mobile-browser toolbar, so the pitch fits the *visible* area
     and the touch buttons sit at its edge (as in the installed app) instead of
     riding up over the field. Falls back to the vh pair above where dvh is unsupported. */
  width:  min(100vw, calc((100dvh - var(--padb)) * 1160 / 600));
  height: min(calc(100dvh - var(--padb)), calc(100vw * 600 / 1160));
  background: #0b1b2b;
  box-shadow: 0 0 0 3px #000, 0 0 40px rgba(255,122,24,.25), 0 18px 60px rgba(0,0,0,.6);
  border-radius: 4px;
}
/* Desktop play view: not fullscreen — a centred ~half-screen pitch with the
   "Slime World Cup '26" title above it and Pause/Quit buttons below. (body.deskgame
   is toggled on by JS only on desktop while a match is on screen.) */
.stage-title { display: none; font-size: clamp(20px, 3.4vh, 34px); letter-spacing: 1px; line-height: 1; text-align: center; }
.stage-title .accent { font-size: .56em; margin-top: 4px; letter-spacing: 2px; }
#stageControls { display: none; gap: 14px; }
body.deskgame #stage { flex-direction: column; gap: 14px; justify-content: center; }
body.deskgame .stage-title { display: block; }
body.deskgame #stageControls { display: flex; }
body.deskgame #game {
  width:  min(50vw, calc(58vh * 1160 / 600));
  height: min(58vh, calc(50vw * 600 / 1160));
}
body.deskgame #quitBtn { display: none; }   /* the floating ☰ is replaced by the Pause button */

/* ---- Generic overlay (menus) ---- */
.overlay {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 16px;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  text-align: center;
  z-index: 20;
  background: rgba(6,6,16,.82);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;       /* scrolling a long list (teams/rules/scores) won't bounce the page */
}
.overlay.show { display: flex; }
/* menu: lighter scrim toward the bottom so the slimes idling on the pitch show through */
#menuScreen { background: linear-gradient(180deg, rgba(6,6,16,.92) 0%, rgba(6,6,16,.6) 52%, rgba(6,6,16,.2) 100%); backdrop-filter: none; }
/* auto-margin spacers: centreert verticaal maar laat scrollen als de inhoud te hoog is
   (voorkomt afkappen bovenaan op korte/landscape mobiele schermen) */
.overlay::before, .overlay::after { content: ''; margin-block: auto; }

.title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 8vw, 78px);
  line-height: .92;
  letter-spacing: -1.5px;
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(255,122,24,.28), 0 8px 26px rgba(0,0,0,.55);
}
.title .accent {
  display:block; font-size:.6em; letter-spacing:3px; margin-top:6px; font-weight:900;
  background:linear-gradient(95deg,#3b86ff 0%, #e4002b 52%, #00a64a 100%);   /* United 2026 tricolor */
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#3b86ff;
  text-shadow:none; filter:drop-shadow(0 2px 12px rgba(43,111,255,.40));
}
.title.small-title { font-size: clamp(20px, 4.6vw, 36px); letter-spacing: 1px; line-height: 1.1; }
.subtitle { color: var(--muted); font-size: clamp(12px, 1.8vw, 15px); margin: 2px 0 6px; line-height:1.6; font-weight: 500; }
/* menu header: icon above the wordmark (portrait + large screens); beside it on landscape phones */
.menu-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.menu-logo {
  display: block; margin: 0; width: auto; max-width: 86vw;
  height: clamp(52px, 11vh, 96px);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 34px rgba(255,122,24,.16);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Buttons ---- */
.btn {
  font-family: var(--ui);
  font-weight: 700;
  font-size: clamp(12px, 1.7vw, 15px);
  letter-spacing: .2px;
  color: #2a1400;
  background: linear-gradient(180deg, #ffc869, var(--oranje));
  border: none;
  border-bottom: 3px solid #b4540a;
  border-radius: 11px;
  padding: 12px 20px;
  min-width: 230px;
  cursor: pointer;
  transition: transform .06s, filter .12s, box-shadow .12s;
  box-shadow: 0 4px 14px rgba(255,122,24,.16);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.btn.secondary {
  color: var(--ink);
  background: linear-gradient(180deg, #23234a, var(--panel));
  border-bottom-color: #000;
  box-shadow: none;
}
.btn.hero {
  font-size: clamp(15px, 2.1vw, 19px);
  padding: 15px 22px;
  background: linear-gradient(180deg, #ffd585, #ff7a18);
  border-bottom-color: #9c4708;
  box-shadow: 0 6px 22px rgba(255,122,24,.38);
}
.btn.small { min-width: 0; padding: 9px 14px; font-size: clamp(11px,1.5vw,13px); }
.btn:disabled { opacity:.45; filter:grayscale(.4); cursor:not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* distinct button colours (dialogs/menus) — colour + emoji help non-readers */
.btn.green  { background: linear-gradient(180deg,#3fc06a,#1f8f3a); color:#fff; border-bottom-color:#0c5a22; }
.btn.blue   { background: linear-gradient(180deg,#4f97ff,#1f5fe0); color:#fff; border-bottom-color:#0a3aa0; }
.btn.danger { background: linear-gradient(180deg,#ff7a6b,#d83a2c); color:#fff; border-bottom-color:#9e241a; }
/* pause/end/rematch dialogs: stacked buttons + clear gap under the title */
.dlg-btns { flex-direction: column; gap: 12px; width: 100%; max-width: 360px; margin: 18px auto 0; }
.dlg-btns .btn { width: 100%; }

/* ---- Menu layout ---- */
.menu-card {
  background: rgba(18,18,42,.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 11px; align-items: center;
  max-width: 560px; width: 100%;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
/* retro corner team labels (like the original start screen) */
.team-tag {
  position: fixed; top: max(14px, env(safe-area-inset-top));
  font-family: var(--display); font-weight: 800; font-size: clamp(10px,1.6vw,14px);
  letter-spacing: 2px; z-index: 21; pointer-events: none; text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.team-tag.left  { left: max(16px, env(safe-area-inset-left));  color: var(--oranje2); }
.team-tag.right { right: max(16px, env(safe-area-inset-right)); color: #7cc0ee; }
/* mode buttons + match-length pills */
.mode-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
.btn.mode { min-width: 0; flex: 1 1 40%; padding: 12px 10px; }
.btn.mode.wc2026 { background: linear-gradient(110deg,#2b6fff 0%,#2b6fff 46%,#e4002b 74%,#00a64a 100%); color:#fff; border-bottom-color:#0a3aa0; text-shadow:0 1px 3px rgba(0,0,0,.4); box-shadow:0 4px 16px rgba(43,111,255,.30); }
.btn.mode.wc-blue  { background: linear-gradient(180deg,#4f97ff,#1f5fe0); color:#fff; border-bottom-color:#0a3aa0; box-shadow:0 4px 14px rgba(31,95,224,.26); }
.btn.mode.wc-green { background: linear-gradient(180deg,#3fc06a,#1f8f3a); color:#fff; border-bottom-color:#0c5a22; box-shadow:0 4px 14px rgba(31,143,58,.24); }
.grp-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--oranje2); font-weight: 800; width: 100%; text-align: left; margin: 4px 0 -2px; }
.grp-label span { color: var(--muted); font-weight: 600; letter-spacing: .5px; text-transform: none; }
.len-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.len-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
/* shared match-setup card (Friendly / 2P / World Cup): tight label↔pills inside each
   section, and an equal, roomier gap *under* every section — so the space under
   "Computer level" matches the space under "Match format" before the button. */
.setup-card { gap: 17px; }
.setup-grp { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.setup-grp .grp-label { margin: 0; }
.setup-go { margin-top: 0; width: 100%; }
/* online: short explainer of the format + the two modes */
.online-help { font-size: clamp(10px, 1.5vw, 12px); color: var(--muted); line-height: 1.75; text-align: left; padding: 2px 2px 0; }
.online-count { font-size: clamp(11px, 1.6vw, 13px); color: var(--good); font-weight: 700; text-align: center; min-height: 16px; }
.online-help b { color: var(--ink); font-weight: 700; }
.pill {
  font-family: var(--ui); font-weight: 700; font-size: clamp(11px,1.5vw,13px); color: var(--ink);
  background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; transition: transform .06s, border-color .12s;
}
.pill:hover { border-color: var(--oranje2); }
.pill:active { transform: translateY(1px); }
.pill.active { background: linear-gradient(180deg,#ffd585,#ff7a18); color: #2a1400; border-color: #b4540a; font-weight: 800; }
.pill.mode { min-width: 58px; }
.pill-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }

/* ---- Team select grid ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 8px;
  width: 100%; max-width: 680px;
  max-height: 56vh; overflow-y: auto;
  padding: 6px;
}
.team {
  cursor: pointer;
  background: var(--panel2);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .08s, border-color .12s, box-shadow .12s;
}
.team:hover { transform: translateY(-3px); border-color: var(--oranje2); }
.team.sel { border-color: var(--oranje); box-shadow: 0 0 0 2px var(--oranje), 0 0 18px rgba(255,122,24,.5); }
/* online: show which country the opponent already took */
.team.opppick { border-color: #37d6d0; box-shadow: 0 0 0 2px #37d6d0, 0 0 16px rgba(55,214,208,.45); position: relative; }
.team.opppick::after { content: 'OPP'; position: absolute; top: 2px; right: 4px; font-size: 9px; font-weight: 800; color: #37d6d0; letter-spacing: 1px; }
.mc-flag.tiny { display:inline-block; width:18px; height:12px; border-radius:2px; vertical-align:middle; margin-right:5px; }
/* (no pre-selected highlight — only .sel marks an actual pick) */
.team .flag {
  width: 46px; height: 31px; border-radius: 3px;
  border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.team .code { font-size: 12px; font-weight: 800; color: var(--oranje2); letter-spacing: .5px; }

.pick-label { font-size: clamp(9px,1.8vw,13px); color: var(--ink); }
.pick-label b { color: var(--oranje2); }

/* Desktop (mouse): the menu icon buttons + country cards were tiny — scale them up */
@media (pointer: fine){
  .icon-row .btn.small { padding: 11px 20px; font-size: 20px; }
  .team-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; max-width: 760px; }   /* 24 teams -> a clean 6x4 */
  .team .flag { width: 68px; height: 45px; }
  .team .code { font-size: 15px; }
  .pick-label { font-size: 16px; }
}
/* Large tablets: bigger country cards too (phones in landscape stay compact) */
@media (pointer: coarse) and (min-width: 1000px){
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 11px; max-width: 840px; }
  .team .flag { width: 62px; height: 41px; }
  .team .code { font-size: 14px; }
}

/* ---- How-to-play / rules ---- */
.rules-box {
  background: var(--panel2); border: 2px solid var(--line); border-radius: 10px;
  padding: 16px 18px; width: 100%; max-width: 560px; text-align: left;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 70vh; overflow-y: auto;
}
.rules-sec { display: flex; flex-direction: column; gap: 3px; }
.rules-h { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--oranje2); }
.rules-t { font-size: clamp(12px,1.6vw,14px); line-height: 1.65; color: var(--muted); }
.rules-t b { color: var(--ink); font-weight: 700; }

/* ---- Online panel ---- */
.online-box {
  background: var(--panel2);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 18px; width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 12px;
}
.code-display {
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(20px, 6vw, 40px);
  color: var(--oranje);
  letter-spacing: 6px;
  background: #06060f;
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 14px;
  word-break: break-all;
}
.code-input {
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(16px, 4vw, 26px);
  text-align: center; letter-spacing: 6px; text-transform: uppercase;
  background: #06060f; color: var(--oranje2);
  border: 2px solid var(--line); border-radius: 8px;
  padding: 12px; width: 100%;
}
.status { font-size: 9px; color: var(--muted); min-height: 14px; line-height: 1.6; }
.status.ok { color: var(--good); }
.status.err { color: var(--bad); }
.status.waiting { color: var(--oranje2); animation: waitpulse 1.1s ease-in-out infinite; }
@keyframes waitpulse { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

/* ---- Online matchup confirm (you vs opponent, colour-coded) ---- */
.matchup { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.mc { background: var(--panel2); border: 2px solid var(--line); border-radius: 12px; padding: 12px 16px; min-width: 130px; }
.mc.you { border-color: var(--good); box-shadow: 0 0 0 1px var(--good), 0 0 18px rgba(52,209,122,.3); }
.mc.opp { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad), 0 0 18px rgba(255,84,112,.3); }
.mc-tag { font-size: 10px; font-weight: 800; letter-spacing: 2px; margin-bottom: 8px; }
.mc.you .mc-tag { color: var(--good); }
.mc.opp .mc-tag { color: var(--bad); }
.mc-flag { width: 84px; height: 56px; border-radius: 6px; border: 2px solid #000; margin: 0 auto 8px; }
.mc-name { font-weight: 700; color: var(--ink); font-size: 14px; }
.mc-vs { font-family: var(--display); font-weight: 900; color: var(--muted); font-size: 22px; }

/* ---- Settings toggles ---- */
.toggles { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }
.toggle {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel2); border: 2px solid var(--line);
  border-radius: 8px; padding: 10px 14px; font-size: 10px; cursor: pointer;
}
.toggle .val { color: var(--oranje2); }

/* ---- HUD hint during play ---- */
#playHint {
  position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--muted); z-index: 8; text-align:center;
  background: rgba(0,0,0,.45); padding: 6px 12px; border-radius: 20px;
  pointer-events: none; line-height: 1.7;
}
#playHint b { color: var(--ink); }
/* pre-match controls reminder on the setup screen (desktop only) */
.keys-hint {
  max-width: 460px; margin: 2px auto 0; padding: 8px 14px;
  font-size: clamp(11px,1.5vw,13px); line-height: 1.7; color: var(--muted);
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px;
}
.keys-hint b { color: var(--oranje2); font-weight: 800; }

/* ---- Touch controls (corner overlay; player 1 spans both corners, 2P splits the screen) ---- */
#touch { position: fixed; inset: 0; z-index: 12; display: none; pointer-events: none; }
#touch.show { display: block; }
.pad {
  position: absolute; bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px));   /* lift clear of the iOS home-indicator swipe strip */
  pointer-events: none; display: flex; gap: 18px;       /* tight pair; hit-testing is coordinate-based */
}
#padMove1 { left: max(56px, env(safe-area-inset-left)); }
#padAct1  { right: max(56px, env(safe-area-inset-right)); }
#pad2     { right: max(56px, env(safe-area-inset-right)); }
/* 2 players: player 1 fully on the left (move + actions), player 2 fully on the right */
body.m2p #padAct1 { left: max(56px, env(safe-area-inset-left)); right: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 84px); }
.tbtn {
  width: 62px; height: 35px; border-radius: 10px;       /* ~20% smaller corner pads */
  background: linear-gradient(180deg, rgba(255,172,72,.12), rgba(255,122,24,.05));   /* ~90% transparent fill */
  border: 1.5px solid rgba(255,198,112,.85);            /* border stays clearly visible */
  box-shadow: 0 2px 8px rgba(0,0,0,.30);
  color: #fff; font-size: 18px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.75);   /* glyph clearly visible */
  display: flex; align-items: center; justify-content: center;
  touch-action: none; pointer-events: none;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: filter .06s ease, transform .06s ease, background .08s ease;
}
.tbtn.pressed { background: linear-gradient(180deg, rgba(255,170,60,.55), rgba(255,122,24,.4)); filter: brightness(1.2); transform: translateY(1px); }   /* fill in on touch */
.tbtn.jump  { background: linear-gradient(180deg, rgba(74,226,142,.13), rgba(52,209,122,.05)); border-color: rgba(96,236,162,.85); }
.tbtn.catch { background: linear-gradient(180deg, rgba(150,206,246,.13), rgba(124,192,238,.05)); border-color: rgba(155,208,248,.88); }
/* reserve a strip below the pitch on touch so the buttons sit under it (follow the ball clearly) */
@media (pointer: coarse){
  /* tiny reserved strip so the pitch fills more of the screen; the flat buttons
     overlap its bottom edge and read as a low HUD bar */
  :root { --padb: 52px; }   /* smaller reserved strip -> the pitch fills more width (toward the buttons) */
  #stage { align-items: flex-start; padding-top: max(4px, env(safe-area-inset-top)); }
}
/* a bit bigger on larger touch screens (tablets), still a tidy low overlay */
@media (pointer: coarse) and (min-width: 760px){
  :root { --padb: 64px; }
  .tbtn { width: 112px; height: 46px; font-size: 22px; border-radius: 12px; }
  body.m2p #padAct1 { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 88px); }
}

/* ---- Rotate device hint (zichtbaarheid via JS: alleen tijdens het spelen) ---- */
#rotate {
  position: fixed; inset: 0; z-index: 50; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--bg); text-align: center; padding: 30px;
}
#rotate.show { display: flex; }
#rotate .ph { font-size: 60px; animation: spin 2s infinite ease-in-out; }
@keyframes spin { 0%,40%{transform:rotate(0)} 60%,100%{transform:rotate(90deg)} }

/* ---- Compacte menu's op korte (landscape-mobiel) schermen ---- */
@media (max-height: 620px) {
  .overlay { gap: 8px; }
  .menu-head { flex-direction: row; gap: 14px; }   /* landscape phones: logo beside the title */
  .title { font-size: clamp(22px, 8vh, 40px); text-shadow: 0 2px 14px rgba(255,122,24,.3); }
  .title .accent { font-size: 1em; letter-spacing: 3px; }
  .title.small-title { font-size: clamp(18px, 5vh, 28px); }
  .subtitle { display: none; }
  .menu-card { padding: 12px; gap: 7px; border-width: 2px; }
  .setup-card { gap: 11px; }
  .setup-grp { gap: 4px; }
  .rules-box { padding: 9px 14px; gap: 5px; max-height: 82vh; }
  .rules-h { font-size: 9px; }
  .rules-t { font-size: 11px; line-height: 1.45; }
  .dlg-btns { margin-top: 10px; gap: 8px; }
  .btn { padding: 9px 16px; font-size: 11px; border-bottom-width: 3px; }
  .tag { display: none; }
  .team-grid { max-height: 62vh; }
}
/* Rules tab: keep it compact in ANY landscape that's short-ish (some phones report a
   landscape height just over 620, which slipped past the rule above). */
@media (orientation: landscape) and (max-height: 820px) {
  .rules-box { padding: 9px 14px; gap: 5px; max-height: 84vh; }
  .rules-h { font-size: 9px; }
  .rules-t { font-size: 11px; line-height: 1.45; }
}

/* ---- Leaderboard ---- */
#lbList { gap: 4px; font-size: 9px; }
.lb-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 6px; background: #06060f;
}
.lb-row.top { background: linear-gradient(90deg, rgba(255,122,24,.22), #06060f); }
.lb-row .rank { color: var(--oranje2); }
.lb-row .who  { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.lb-row .tcode{ color: var(--muted); font-size: 8px; }
.lb-row .sc   { color: var(--good); font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-row.you { box-shadow: 0 0 0 2px var(--oranje); background: linear-gradient(90deg, rgba(255,122,24,.34), rgba(255,122,24,.08)); }
.lb-you { font-size: clamp(11px,1.7vw,13px); font-weight: 800; color: var(--oranje2); text-align: center; padding: 8px; margin-bottom: 4px; background: rgba(255,122,24,.12); border: 1px solid var(--line); border-radius: 8px; }
.wk-score { font-size: 16px; font-weight: 800; color: var(--oranje2); margin: 8px 0 2px; }
/* World Cup result: score + save panel, shown above the bracket so it's reachable on mobile */
.wk-result { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 340px; margin: 0 auto; }
.wk-result .wk-score { margin: 0; }
.wk-result-team { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; color: var(--ink); }
.wk-result-team .flag { width: 30px; height: 20px; border-radius: 3px; border: 1px solid #000; display: inline-block; flex: 0 0 auto; }
.wk-save { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* ---- In-game opgeven/pauze-knop ---- */
#quitBtn {
  position: fixed; z-index: 14; display: none;
  top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(6,6,16,.55); color: var(--ink);
  border: 2px solid var(--line); font-size: 20px; cursor: pointer;
  align-items: center; justify-content: center; line-height: 1;
}
#quitBtn.show { display: flex; }
#quitBtn:active { background: rgba(255,122,24,.4); }

/* in-game mute button (mirrors the quit button, top-right) */
#muteBtn {
  position: fixed; z-index: 14; display: none;
  top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(6,6,16,.55); color: var(--ink);
  border: 2px solid var(--line); font-size: 20px; cursor: pointer;
  align-items: center; justify-content: center; line-height: 1;
}
#muteBtn.show { display: flex; }
#muteBtn:active { background: rgba(255,122,24,.4); }
/* in-game rules button — sits left of the mute button; opens the rules and pauses */
#rulesBtn {
  position: fixed; z-index: 14; display: none;
  top: max(10px, env(safe-area-inset-top)); right: max(62px, calc(env(safe-area-inset-right) + 52px));
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(6,6,16,.55); color: var(--ink);
  border: 2px solid var(--line); font-size: 20px; cursor: pointer;
  align-items: center; justify-content: center; line-height: 1;
}
#rulesBtn.show { display: flex; }
#rulesBtn:active { background: rgba(255,122,24,.4); }

/* ---- World Cup bracket ---- */
.bracket-wrap {
  width: 100%; max-width: min(96vw, 940px);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
}
.bracket { display: flex; gap: 12px; align-items: stretch; min-width: max-content; margin: 0 auto; }
.bk-col { display: flex; flex-direction: column; min-width: 150px; }
.bk-cell { flex: 1; display: flex; flex-direction: column; justify-content: center; }  /* centres each round on its two feeders */
.bk-head { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-align: center; font-weight: 700; margin-bottom: 4px; }
.bk-match { background: #06060f; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.bk-match.user { border-color: var(--oranje); }
.bk-match.now  { box-shadow: 0 0 0 2px var(--oranje), 0 0 16px rgba(255,122,24,.5); }
.bk-team { display: flex; align-items: center; gap: 6px; padding: 6px 9px; font-size: 12px; color: var(--muted); text-align: left; }
.bk-team + .bk-team { border-top: 1px solid var(--line); }
.bk-team .flag { width: 22px; height: 15px; border-radius: 3px; border: 1px solid #000; flex: 0 0 auto; }
.bk-team .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-team .sc { margin-left: auto; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.bk-team.win { color: var(--ink); font-weight: 700; }
.bk-team.win .sc { color: var(--oranje2); }
.bk-team.lose { opacity: .45; }
.bk-team.you .nm { color: var(--oranje2); font-weight: 800; }
.bk-tbd { color: #55557a; }
.wk-champ { font-size: 15px; color: var(--oranje2); font-weight: 800; margin-top: 8px; }
.wk-opts { display: flex; flex-direction: column; gap: 3px; align-items: center; margin: -2px 0 2px; }
.wk-opts:empty { display: none; }
.wk-opts .len-label { font-size: 9px; margin-top: 2px; }
.wk-opts .len-row { gap: 5px; }
.wk-opts .pill { padding: 5px 10px; font-size: 11px; }
/* collapsible tournament options (closed by default so the bracket is visible) */
.wk-opts-toggle {
  font-family: var(--ui); font-weight: 700; font-size: 11px; color: var(--ink);
  background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
}
.wk-opts-toggle:hover { border-color: var(--oranje2); }
.wk-opts-body { display: none; flex-direction: column; gap: 4px; align-items: center; margin-top: 4px; }
.wk-opts-body.open { display: flex; }
/* WC 2026 host-colours bar */
.wk-bar { height: 4px; width: min(300px, 72%); margin: 0 auto 7px; border-radius: 3px;
  background: linear-gradient(90deg,#e4002b 0 33%,#ffffff 33% 38%,#0b3d91 38% 71%,#ffffff 71% 76%,#00843d 76% 100%); }
/* World Cup mode gets a subtly themed (USA/Mexico/Canada) backdrop + hero button */
#wkScreen { background: radial-gradient(120% 90% at 50% 0%, rgba(11,61,145,.34) 0%, rgba(6,6,16,.9) 55%, rgba(0,132,61,.18) 100%); }
.btn.hero.wc2026 { background: linear-gradient(110deg,#2b6fff 0%,#2b6fff 46%,#e4002b 74%,#00a64a 100%); color:#fff; border-bottom-color:#0a3aa0; text-shadow:0 1px 3px rgba(0,0,0,.4); box-shadow:0 6px 22px rgba(43,111,255,.38); }
/* World Cup 2026 branding on the tournament screen */
.wk-host { font-weight: 800; letter-spacing: 1.5px; color: var(--oranje2); }
.wk-venue { color: var(--ink); font-weight: 600; }

.tag { font-size: 11px; color: var(--muted); letter-spacing: 3px; margin-top: 6px; font-family: var(--ui); font-weight: 600; text-transform: uppercase; }
.flash-orange { color: var(--oranje); }
a { color: var(--oranje2); }

/* subtle footer (year · version · credit) */
.foot { font-size: 10px; color: #6a6a95; letter-spacing: .4px; margin-top: 2px; }
.foot a { color: #8a8ac0; text-decoration: none; }
.foot a:hover { color: var(--oranje2); text-decoration: underline; }

/* volume slider row in Settings */
.toggle.vol { cursor: default; gap: 12px; }
.toggle.vol input[type=range] {
  -webkit-appearance: none; appearance: none; height: 6px; flex: 1; max-width: 230px;
  background: linear-gradient(90deg, var(--oranje), var(--oranje2)); border-radius: 999px; outline: none;
}
.toggle.vol input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--oranje); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.toggle.vol input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--oranje); cursor: pointer;
}

/* leaderboard date/time line */
.lb-row .when { display: block; font-size: 8px; color: var(--muted); margin-top: 2px; }