:root {
  /* ===== Mobile-game arcade palette — night stadium, turf-green PLAY, gold rewards ===== */
  /* 夜空底 */
  --ink:       #060a14;
  --ink-2:     #0c1224;
  --card:      linear-gradient(180deg, #161f3a 0%, #0e1530 100%);
  --card-line: rgba(130, 160, 255, 0.16);

  /* 主行動色：草皮綠（PLAY／確認／正向） */
  --play:      #22c55e;
  --play-hi:   #4ade80;
  --play-lo:   #15803d;
  --play-edge: #116b33;          /* 按鈕硬底邊 */
  --play-glow: rgba(34, 197, 94, 0.4);

  /* 獎勵金 */
  --gold:      #f6c344;
  --gold-hi:   #ffe08a;
  --gold-lo:   #c48f1c;
  --gold-edge: #93690f;
  --gold-glow: rgba(246, 195, 68, 0.4);

  /* 隊伍色（沿用，微調亮度） */
  --red:  #ff4d63;  --red-hi:  #ff8296;  --red-edge:  #b31f36;  --red-glow:  rgba(255,77,99,.42);
  --blue: #4d86ff;  --blue-hi: #86adff;  --blue-edge: #1d4fc4;  --blue-glow: rgba(77,134,255,.45);
  --red-team: #ff4d63; --blue-team: #4d86ff;  /* 相容別名，JS/舊規則有引用 */

  --live:  #ff2d4b;
  --text:  #f7f5ee;
  --muted: #a8b3c7;
  --faint: #8a96ad;              /* WCAG AA 驗證過，勿調暗 */
  --line:  rgba(246, 195, 68, 0.20);
  --line-cool: rgba(120, 150, 210, 0.20);
  --glass: rgba(255, 255, 255, 0.055);

  /* 形狀：手遊圓潤 */
  --r-card: 20px;
  --r-ctl:  14px;
  --r-pill: 999px;

  /* 深度 */
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255,255,255,0.04) inset;
  --shadow-pop:  0 24px 60px rgba(0, 0, 0, 0.65);

  --font-display: "Saira Condensed", "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-ui:      "Saira", "Helvetica Neue", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
}

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

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "PingFang TC", Roboto, sans-serif;
  color: var(--text);
  user-select: none;
  touch-action: none;
}

.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

/* One-shot screen entrance: fade + 8px lift when a screen is toggled visible.
   #game only fades — a transform there would briefly re-anchor its fixed HUD
   children and skew a mid-animation getBoundingClientRect() cache. */
@media (prefers-reduced-motion: no-preference) {
  #lobby:not(.hidden), #room:not(.hidden) { animation: screenIn .3s ease-out; }
  #game:not(.hidden) { animation: screenFade .3s ease-out; }
}
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes screenFade { from { opacity: 0; } }

/* ============================================================
   ===== Lobby — mobile-game arcade ===========================
   "Night-stadium concert": deep-blue sky, turf-green glow from
   below, gold rewards. Chunky pressable buttons, glassy indigo
   cards with real depth. Portrait = one column of cards in
   priority order; landscape = two-pane (hero/live left, play
   column right).
   ============================================================ */
#lobby {
  display: flex; justify-content: center;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: 16px 14px 26px;
  background:
    radial-gradient(120% 60% at 50% 108%, rgba(34, 197, 94, 0.22), transparent 60%),
    radial-gradient(900px 540px at 50% -14%, #17224b 0%, transparent 64%),
    linear-gradient(180deg, #0a1128 0%, var(--ink) 70%, #04070f 100%);
}

/* Faint pitch grid + soft team-color light beams (viewport-fixed backdrop). */
.stadium-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 82%);
}
.stadium-bg .beam {
  position: absolute; top: -22%; height: 85%; width: 48vw;
  border-radius: 50%; filter: blur(80px); opacity: 0.32;
}
.stadium-bg .beam-red  { left: -16vw;  background: radial-gradient(closest-side, var(--red-glow), transparent 72%); }
.stadium-bg .beam-blue { right: -16vw; background: radial-gradient(closest-side, var(--blue-glow), transparent 72%); }
.stadium-bg .pitch-arc { display: none; }
.pitch-bg { display: none; }

/* The adaptive stage. Portrait: one column of cards, priority order =
   topbar → hero → live → motd → PLAY → predict → player → settings →
   daily → rooms → standings → foot. The two .lobby-col wrappers dissolve
   (display: contents) so every card becomes a flex item of the stage;
   explicit `order` keeps that priority even though the DOM groups the
   cards by landscape column (rooms/standings live in col-a for balance).
   In landscape the cols are flex containers themselves — the same order
   values are monotonic within each column, so they match DOM order there. */
.lobby-stage {
  position: relative; z-index: 1; margin: auto; flex: 0 0 auto;
  width: min(94vw, 440px);
  display: flex; flex-direction: column; gap: 14px;
}
.lobby-col { display: contents; }
.lobby-topbar { order: 0; }
.hero { order: 1; }
.live-view { order: 2; }
.motd { order: 3; }
.play-zone { order: 4; }
#wc-predict { order: 5; }
.player-card { order: 6; }
.settings-card { order: 7; }
#daily-card { order: 8; }
.roomlist-wrap { order: 9; }
#stats-panel { order: 10; }
.lobby-foot { order: 11; }

/* ---- Top bar: language capsule + account ---- */
.lobby-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* Portrait: one compact line — language capsule shrinks left, auth hugs right,
   the sign-in helper note is landscape-only. */
@media (max-width: 640px) and (max-aspect-ratio: 13/10) {
  .lobby-topbar { flex-wrap: nowrap; }
  .lang-select { flex: none; padding: 2px; }
  .lang-select button { min-width: 34px; min-height: 32px; padding: 4px 7px; font-size: 12px; letter-spacing: 0.5px; }
  .auth-box { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  #g-btn { min-height: 32px; }
}

/* ---- Cards: indigo glass with depth (shared vocabulary, all screens) ---- */
.panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-card);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
/* Card titles: Saira Condensed 700, uppercase, tracked (Stage 2+ reuse). */
.card-title {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
}
/* Section title leading a form card: tighten the first label under it */
.card-title + .field-label { margin-top: 8px; }

/* ---- Hero (no card chrome — it floats on the stadium glow) ---- */
.hero { text-align: center; padding: 2px 4px 0; }
.hero-top { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
/* LIVE + season share one capsule: red pulsing dot + red LIVE on the left,
   the season/stage text (#season-tag, rewritten by renderWc()) to its right. */
.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 2px;
  color: var(--live); padding: 4px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06); border: 1px solid var(--card-line);
}
.live-badge .dot-live { background: var(--live); box-shadow: 0 0 8px var(--live); }
.live-badge .season-tag { padding: 0; border: 0; background: none; font-size: inherit; }
.season-tag, .year-badge {
  font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 1.5px;
  color: var(--muted); padding: 4px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06); border: 1px solid var(--card-line);
}
.year-badge { display: none; } /* "2026" duplicated the season tag — one badge fewer */
.presence {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #8fe0a6;
  font-family: var(--font-ui); font-weight: 600; letter-spacing: .3px;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: rgba(54, 216, 112, 0.10); border: 1px solid rgba(54, 216, 112, 0.25);
}
.presence b { color: #c8f5d6; font-weight: 700; }

.title-lockup { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hero-bun { width: 54px; height: 54px; }
.brand-kicker { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 4px; color: var(--faint); text-transform: uppercase; }
.lobby-stage h1 {
  margin: 3px 0 0; font-size: clamp(32px, 9.5vw, 46px); font-weight: 800; letter-spacing: 2px; line-height: 0.98; color: #fff;
  text-shadow: 0 4px 22px rgba(34, 197, 94, 0.25);
}
.title-latin {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 3.6vw, 16px); letter-spacing: 6px;
  color: var(--muted); margin-top: 4px;
}
/* In English the h1 already says "World Cup Soccer" — the latin sub-line would
   repeat it verbatim, so it only shows for non-EN locales. */
html[lang="en"] .title-latin { display: none; }
/* the one chromatic flourish: a split red|blue kickoff tick */
.title-lockup::after {
  content: ""; width: 52px; height: 3px; margin-top: 9px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red) 0 50%, var(--blue) 50% 100%);
}
.tagline { margin: 10px 0 0; font-size: 13px; color: var(--muted); letter-spacing: 0.3px; line-height: 1.5; }
/* Portrait phones: the hero eats a quarter of the first screen — compress it
   (~25%) so the LIVE card and play zone surface sooner. Landscape untouched.
   (Must sit AFTER the base hero rules — same specificity, source order wins.) */
@media (max-width: 640px) and (max-aspect-ratio: 13/10) {
  .hero { padding-top: 0; }
  .hero-top { margin-bottom: 6px; gap: 6px; }
  .live-badge, .season-tag, .year-badge, .presence { padding: 3px 9px; font-size: 11px; }
  .hero-bun { width: 48px; height: 48px; }
  .brand-kicker { letter-spacing: 3px; }
  .lobby-stage h1 { font-size: clamp(28px, 8.5vw, 40px); }
  .title-latin { font-size: clamp(11px, 3.2vw, 14px); letter-spacing: 4px; margin-top: 3px; }
  .title-lockup::after { margin-top: 7px; }
  .tagline { margin: 6px 0 0; font-size: 12px; }
}

/* ---- LIVE spectate card: featured-match framing, glowing LIVE edge ---- */
.live-view {
  position: relative; cursor: pointer;
  border: 2px solid rgba(255, 45, 75, 0.45); border-radius: var(--r-card);
  overflow: hidden; background: #0c2a18;
  box-shadow: var(--shadow-card), 0 0 26px rgba(255, 45, 75, 0.14);
}
.live-view:hover { border-color: rgba(255, 45, 75, 0.7); }
.live-view:active { transform: scale(0.99); }
#lv-canvas { display: block; width: 100%; aspect-ratio: 164 / 100; }
.lv-bar {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  background: linear-gradient(rgba(5, 8, 16, 0.78), rgba(5, 8, 16, 0));
  font-size: 11px; font-weight: 700; letter-spacing: 1px; pointer-events: none;
}
.lv-live { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--live); text-transform: uppercase; font-size: 10px; text-shadow: 0 0 10px rgba(255, 45, 75, 0.7); }
.lv-live .dot-live { background: var(--live); box-shadow: 0 0 8px var(--live); }
.lv-title { flex: 1; min-width: 0; color: var(--muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-mid { display: inline-flex; align-items: center; gap: 7px; flex: none; margin-left: auto; white-space: nowrap; }
.lv-flag { border-radius: 2px; display: block; }
.lv-score { font-size: 18px; color: var(--text); }
.lv-hint {
  position: absolute; right: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(5, 8, 16, 0.66); color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: 1px; pointer-events: none;
}

/* ---- Match of the day: rivalry card — tap a side to play it ---- */
.motd {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--shadow-card);
}
.motd-cap, .motd-hint {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  color: var(--faint); text-transform: uppercase;
}
.motd-hint { color: var(--gold-hi); }
.motd-row { display: inline-flex; align-items: center; gap: 9px; }
.motd-vs { font-family: var(--font-display); font-size: 15px; font-weight: 800; font-style: italic; letter-spacing: 1px; color: var(--muted); }
.motd-side {
  padding: 5px; border-radius: 8px; cursor: pointer; line-height: 0;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-line);
  transition: border-color .15s, transform .1s;
}
.motd-side img { border-radius: 3px; display: block; }
.motd-side:hover { border-color: var(--gold); }
.motd-side:active { transform: scale(0.94); }

/* ---- Lobby labels / layout helpers ---- */
.field-label { display: block; text-align: left; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: var(--faint); margin: 14px 0 6px 2px; text-transform: uppercase; }
.panel > .field-label:first-child { margin-top: 2px; }
.divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--faint); font-family: var(--font-ui); font-size: 12px; letter-spacing: 1px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.play-row { display: flex; gap: 10px; flex-wrap: wrap; }
.play-row > .btn { flex: 1 1 140px; margin-top: 0; }
.play-row .room-row { flex: 1 1 170px; }
.room-row { display: flex; gap: 8px; }
.room-row input { flex: 1; min-width: 0; text-align: center; letter-spacing: 4px; font-weight: 800; font-family: var(--font-display); font-size: 19px; }
.room-row .btn { width: auto; padding: 12px 18px; font-size: 16px; margin-top: 0; flex: none; }
.status { min-height: 18px; margin: 12px 0 0; font-size: 13px; color: var(--text); letter-spacing: 0.3px; font-family: var(--font-ui); }
.hint { margin: 4px 0 0; font-size: 11px; color: var(--faint); line-height: 1.6; }

.lobby-foot { text-align: center; }
.brand-foot {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px;
  font-size: 11px; letter-spacing: 1px; color: var(--faint);
  text-decoration: none; border-top: 1px solid rgba(255, 255, 255, 0.06); width: 100%; justify-content: center;
  transition: color .2s;
}
.brand-foot:hover { color: var(--text); }

/* World Cup season countdown chip */
.wc-cd { color: var(--gold-hi); border-color: rgba(246, 195, 68, 0.4); background: rgba(246, 195, 68, 0.08); }

/* ---- Champion prediction card (World Cup final week) ---- */
.wcp-title { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--gold-hi); }
.wcp-sub { margin: 10px 0 2px; font-size: 12px; color: var(--faint); letter-spacing: 0.5px; }
.wcp-cands { display: flex; gap: 8px; margin-top: 10px; }
.wcp-cand {
  flex: 1; min-height: 64px; padding: 9px 4px 7px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: rgba(4, 8, 18, 0.5); border: 1px solid var(--card-line); border-radius: var(--r-ctl);
  color: var(--text); font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.wcp-cand img { border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.wcp-cand:hover { border-color: var(--gold); }
.wcp-cand:active { transform: scale(0.95); }
.wcp-cand.active { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi), 0 0 14px var(--gold-glow); }
.wcp-mine, .wcp-result {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--text);
}
.wcp-mine img, .wcp-result img { border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.wcp-bars { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.wcp-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.wcp-bar-row img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.wcp-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(4, 8, 18, 0.6); overflow: hidden; }
.wcp-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-hi), var(--gold-lo)); box-shadow: 0 0 8px var(--gold-glow); }
.wcp-pct { width: 38px; text-align: right; font-family: var(--font-display); font-weight: 800; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.wcp-total { margin-top: 6px; font-size: 11px; color: var(--faint); }
.wcp-sync { margin-top: 8px; font-size: 11px; color: var(--gold-hi); }
.wcp-closed { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 1px; }
.wcp-actions { display: flex; gap: 8px; margin-top: 12px; }
.wcp-actions .btn { margin-top: 0; flex: 1; font-size: 15px; letter-spacing: 1px; padding: 10px; min-height: 44px; }
.wc-predict.wcp-win { border-color: rgba(246, 195, 68, 0.55); box-shadow: 0 0 24px var(--gold-glow), var(--shadow-card); }
.wc-predict.wcp-win .wcp-result { color: var(--gold-hi); }

/* ============================================================
   ===== Shared primitives (GLOBAL — one system, all screens) ==
   ============================================================ */

/* ---- Inputs: dark inset wells, turf-green focus ---- */
input {
  width: 100%; padding: 12px 14px; min-height: 48px;
  border-radius: var(--r-ctl); border: 1px solid var(--card-line);
  background: rgba(4, 8, 18, 0.55); color: var(--text); font-size: 16px;
  font-family: var(--font-ui); outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: border-color .2s, box-shadow .2s;
}
input:focus { border-color: var(--play); box-shadow: 0 0 0 3px var(--play-glow), inset 0 2px 6px rgba(0, 0, 0, 0.4); }
input::placeholder { color: var(--faint); }

/* ---- Buttons: chunky 3D, pressable (hard bottom edge + press-down) ---- */
.btn {
  width: 100%; padding: 14px; margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-ctl); font-family: var(--font-display); font-size: 19px; font-weight: 800;
  cursor: pointer; letter-spacing: 2px; min-height: 48px;
  transition: transform .08s ease, box-shadow .08s ease, filter .2s;
}
.btn:hover:not(:active):not(:disabled) { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; filter: saturate(0.4) brightness(0.75); }
.btn-primary {
  position: relative; overflow: hidden; color: #fff;
  text-shadow: 0 1px 2px rgba(10, 40, 20, 0.5);
  background: linear-gradient(180deg, var(--play-hi) 0%, var(--play) 58%, var(--play-lo) 100%);
  box-shadow: 0 5px 0 var(--play-edge), 0 12px 24px var(--play-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--play-edge), 0 4px 10px var(--play-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg); animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 65% { left: -60%; } 85%, 100% { left: 130%; } }
.btn-secondary {
  margin: 0; color: var(--text);
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.btn-secondary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Oversized main CTA (Quick Play) */
.btn-xl { padding: 18px 14px; font-size: 23px; letter-spacing: 3px; border-radius: 16px; min-height: 60px; }
/* Join-in-flight: the lobby play CTAs disable and grow a spinner the instant a
   join starts. The ring appears immediately but fades in over 100ms, so the
   usual sub-second (pre-connected) join reads as a soft pulse, not a flash.
   The global reduced-motion kill-switch freezes the spin to a static ring. */
.btn.loading { pointer-events: none; opacity: 0.8; }
.btn.loading:disabled { filter: none; cursor: progress; }
.btn.loading::before {
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: btnSpin .7s linear infinite, btnSpinIn .1s ease-out both;
}
@keyframes btnSpin { to { transform: rotate(1turn); } }
@keyframes btnSpinIn { from { opacity: 0; } }

/* ---- Segmented pickers: inset capsule track, green pressed-in choice ---- */
.seg {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(4, 8, 18, 0.6);
  border: 1px solid rgba(130, 160, 255, 0.10);
  border-radius: var(--r-pill);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55);
}
.seg button {
  flex: 1; min-height: 44px; padding: 8px 4px; border: none; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: transparent;
  color: var(--muted); font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 1px; cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s, transform .15s;
}
.seg button.active {
  background: linear-gradient(180deg, var(--play-hi), var(--play));
  color: #fff; text-shadow: 0 1px 2px rgba(10, 40, 20, 0.4);
  box-shadow: 0 2px 0 var(--play-edge), 0 6px 14px var(--play-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.seg button:active { transform: translateY(1px); }
.side-ico { flex: none; }
/* Team picker: red/blue choices wear their own team gradient when selected */
#side-select .side-red .side-ico { color: var(--red); }
#side-select .side-blue .side-ico { color: var(--blue); }
#side-select .side-red.active {
  background: linear-gradient(180deg, var(--red-hi), var(--red));
  color: #fff; box-shadow: 0 2px 0 var(--red-edge), 0 6px 14px var(--red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#side-select .side-blue.active {
  background: linear-gradient(180deg, var(--blue-hi), var(--blue));
  color: #fff; box-shadow: 0 2px 0 var(--blue-edge), 0 6px 14px var(--blue-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#side-select .side-red.active .side-ico, #side-select .side-blue.active .side-ico { color: currentColor; }

/* ---- Display numbers: condensed italic 800 (scores, timers, stats) ---- */
.stat-num, .lv-score, .sum-score, .dc-score, .rr-score, #game-time, .score-chip {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
}

/* ---- Lobby country picker ---- */
#country-name { color: var(--text); font-weight: 700; font-family: var(--font-ui); }
#flag-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
  padding: 7px; border-radius: var(--r-ctl); background: rgba(4, 8, 18, 0.5);
  border: 1px solid var(--card-line);
}
/* Collapsed by default: show only the first 12 (2 rows) — no inner scrollbar,
   so the page has a single scroll. "Show all" expands inline. */
#flag-grid.collapsed .flag-item:nth-child(n+13) { display: none; }
.flag-more {
  width: 100%; margin-top: 7px; padding: 10px; min-height: 40px; border-radius: var(--r-ctl);
  background: transparent; border: 1px solid var(--card-line); color: var(--muted);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 1px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.flag-more:hover { color: var(--text); border-color: rgba(130, 160, 255, 0.4); }
.flag-item {
  cursor: pointer; border-radius: 5px; padding: 2px; border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.flag-item img { width: 100%; height: auto; display: block; border-radius: 2px; }
.flag-item.active { border-color: var(--play-hi); transform: none; box-shadow: 0 0 8px var(--play-glow); }

/* Card entrance stagger (portrait + landscape) */
@media (prefers-reduced-motion: no-preference) {
  .hero, .panel, #stats-panel, .live-view, .motd { animation: fadeUp .32s ease-out both; }
  .panel { animation-delay: .05s; }
  #stats-panel { animation-delay: .1s; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== Landscape / desktop — two-pane stage. Left column = hero + live +
   featured match + open rooms + standings; right = play column up to the
   daily card (balanced heights). 640px min-width so landscape phones
   (667-844 wide) also get two panes instead of a mile-long stack. ===== */
@media (min-width: 640px) and (min-aspect-ratio: 13/10) {
  #lobby { padding: 18px 16px; }
  .lobby-stage {
    width: min(96vw, 1060px); margin: auto;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    grid-template-areas:
      "top  top"
      "cola colb"
      "foot foot";
    gap: 16px 22px; align-content: start;
  }
  .lobby-topbar { grid-area: top; }
  .lobby-col.col-a { grid-area: cola; display: flex; flex-direction: column; gap: 14px; align-self: start; }
  .lobby-col.col-b { grid-area: colb; display: flex; flex-direction: column; gap: 14px; align-self: start; }
  .lobby-foot { grid-area: foot; }
  .hero { text-align: left; padding: 6px 6px 0; }
  .hero-top { justify-content: flex-start; }
  .title-lockup { align-items: flex-start; }
  .lobby-stage h1 { font-size: clamp(42px, 5vw, 62px); }
  .title-latin { font-size: clamp(15px, 1.8vw, 21px); }
  .tagline { font-size: 15px; }
}

/* ===== Short landscape (rotated phones) — compact both panes so Quick Play
   and the join row stay on screen. The play column already leads with the
   CTA card, so no order tricks are needed. ===== */
@media (min-width: 640px) and (min-aspect-ratio: 13/10) and (max-height: 470px) {
  .lobby-stage { width: min(97vw, 900px); gap: 10px 14px; }
  .lobby-col.col-a, .lobby-col.col-b { gap: 10px; }
  .panel { padding: 12px 14px 12px; }
  .lobby-stage h1 { font-size: clamp(26px, 9vh, 36px); letter-spacing: 1px; }
  .title-latin { font-size: 12px; letter-spacing: 4px; margin-top: 3px; }
  .brand-kicker, .tagline, .year-badge, .hint { display: none; }
  .hero-bun { width: 40px; height: 40px; }
  .title-lockup::after { margin-top: 7px; }
  .hero-top { margin-bottom: 6px; }
  .field-label { margin: 10px 0 5px 2px; }
  .btn-xl { padding: 13px; font-size: 20px; min-height: 50px; }
  .brand-foot { margin-top: 8px; padding-top: 8px; }
}

/* ===== Short portrait phones — compact the stack ===== */
@media (max-height: 720px) and (max-aspect-ratio: 13/10) {
  .lobby-stage { gap: 11px; }
  .lobby-stage h1 { font-size: clamp(30px, 9.5vw, 40px); }
  .panel { padding: 14px 14px 13px; }
  .tagline { margin-top: 7px; font-size: 12px; }
  .field-label { margin-top: 10px; }
  .hint { display: none; }
}

/* ===== Portrait sticky CTA dock — the hero fills the first screen in portrait,
   so the play buttons would sit below the fold. Float a sticky Quick Play +
   Create Room pair at the bottom; JS hides the dock (.hidden) whenever the
   real in-panel Quick Play is on screen. ===== */
#mobile-cta { display: none; }
@media (max-width: 640px) and (max-aspect-ratio: 13/10) {
  #mobile-cta {
    display: flex; gap: 10px; position: fixed; z-index: 30;
    left: 16px; right: 16px;
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  #mobile-cta .btn { margin-top: 0; min-height: 54px; }
  #mobile-cta .btn-primary {
    flex: 1 1 62%; min-width: 0;
    box-shadow: 0 5px 0 var(--play-edge), 0 14px 34px rgba(0, 0, 0, 0.55), 0 10px 22px var(--play-glow);
  }
  #mobile-cta .btn-secondary {
    flex: 1 1 38%; min-width: 0; padding: 10px 8px;
    font-size: 15px; letter-spacing: 0.5px; line-height: 1.1;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  #lobby { padding-bottom: 100px; }
}

/* ===== Game ===== */
/* The pitch is a fixed 1.64 landscape ratio, so on wider phones there are side
   bars. Neutral dark stadium surround — clearly OUTSIDE the (gold-framed)
   pitch, so the letterbox never reads as an unstriped patch of grass. */
#game {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, #0d1626 0%, #080d18 58%, #04060c 100%);
}
#canvas-container {
  position: relative; z-index: 1; line-height: 0; overflow: hidden; border-radius: 8px;
  background: #0a2a18;
  box-shadow:
    0 0 70px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(246, 195, 68, 0.4),
    0 0 38px rgba(246, 195, 68, 0.16);
}
canvas { display: block; touch-action: none; }
#canvas-container { touch-action: none; }

/* Broadcast scoreboard — a floating dark-glass capsule with a gold line,
   centered via margin auto (NO transform: #hud-top is a direct child of #game
   and a resting transform would skew the cached canvas rect). */
#hud-top {
  position: fixed; top: max(8px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 10;
  width: fit-content; max-width: calc(100vw - 12px); margin: 0 auto;
  display: flex; align-items: stretch; justify-content: center; gap: 0;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(19, 27, 52, 0.9), rgba(7, 11, 24, 0.92));
  border: 1px solid rgba(246, 195, 68, 0.4);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 24px rgba(246, 195, 68, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  transition: opacity .3s;
}
.score-chip {
  display: flex; align-items: center; gap: 10px;
  font-size: 34px; font-variant-numeric: tabular-nums; line-height: 1;
  min-width: 84px; justify-content: center;
  padding: 8px 14px; border-radius: 12px;
  color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.score-chip.team-red {
  background: linear-gradient(160deg, var(--red) 0%, var(--red-edge) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -8px 14px rgba(0, 0, 0, 0.28), 0 0 16px var(--red-glow);
}
.score-chip.team-blue {
  background: linear-gradient(200deg, var(--blue) 0%, var(--blue-edge) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -8px 14px rgba(0, 0, 0, 0.28), 0 0 16px var(--blue-glow);
}
.team-red { color: var(--red-team); }
.team-blue { color: var(--blue-team); }
.score-chip.team-red, .score-chip.team-blue { color: #fff; }
.flag { width: 32px; height: 21px; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6); vertical-align: middle; }
.team-red .flag { outline: 2px solid rgba(255, 255, 255, 0.55); }
.team-blue .flag { outline: 2px solid rgba(255, 255, 255, 0.55); }
.hud-center { text-align: center; align-self: center; padding: 0 16px; min-width: 96px; }
#game-time {
  font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: 1px;
  color: var(--gold-hi); text-shadow: 0 2px 12px var(--gold-glow);
}
#room-tag { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; white-space: nowrap; }
#hud-brand {
  display: block; margin-top: 1px;
  font-size: 9px; color: var(--faint); opacity: 0.8;
  letter-spacing: 1px; text-decoration: none;
  pointer-events: auto; /* #hud-top is pointer-events: none */
}
#hud-brand:hover { color: var(--gold-hi); opacity: 1; }
/* Narrow portrait phones: slim the capsule so it clears the corner buttons */
@media (max-width: 480px) {
  .score-chip { font-size: 28px; min-width: 64px; padding: 7px 10px; gap: 7px; }
  .hud-center { padding: 0 10px; min-width: 80px; }
  #game-time { font-size: 25px; }
}

/* Mobile-game action keys — kick is the big primary thumb key, boost sits up
   and left on the thumb arc. Press state is the .pressed class written by
   wireButton() in client.js (touch + mouse), NOT :active. */
#controls {
  position: fixed; z-index: 12;
  right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 16px;
}
.ctrl-btn {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.4);
  transition: transform .07s, opacity .2s, box-shadow .07s;
  -webkit-user-select: none; user-select: none;
}
.ctrl-btn.pressed { transform: scale(0.9); }
#boost-btn {
  width: 72px; height: 72px; font-size: 15px;
  background: radial-gradient(circle at 35% 28%, var(--gold-hi), var(--gold) 52%, var(--gold-lo));
  box-shadow:
    0 0 0 4px rgba(246, 195, 68, 0.16),
    0 5px 0 var(--gold-edge),
    0 12px 26px var(--gold-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -6px 10px rgba(0, 0, 0, 0.26);
}
#boost-btn.pressed {
  transform: translateY(4px) scale(0.97);
  box-shadow:
    0 0 0 4px rgba(246, 195, 68, 0.3),
    0 1px 0 var(--gold-edge),
    0 0 30px var(--gold-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -4px 8px rgba(0, 0, 0, 0.26);
}
#boost-btn.cooling { opacity: 0.45; }
/* Boost rides higher on the thumb arc; the stamina capsule hugs its top edge */
#boost-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 34px; }
#stamina {
  width: 68px; height: 11px; border-radius: var(--r-pill);
  background: rgba(4, 8, 18, 0.72); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
}
#stamina-fill {
  height: 100%; width: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-hi), var(--gold-lo));
  box-shadow: 0 0 8px var(--gold-glow);
  transition: width .12s linear;
}
#stamina-fill.low { background: linear-gradient(90deg, #ff8a80, #e0453f); box-shadow: 0 0 8px rgba(224, 69, 63, 0.5); }

#key-guide {
  position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(34px, env(safe-area-inset-bottom)); z-index: 12;
  font-size: 12px; color: #dfe6f0; line-height: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 31, 58, 0.82), rgba(14, 21, 48, 0.85));
  padding: 8px 12px; border-radius: var(--r-ctl); border: 1px solid var(--card-line);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: none;
}
#key-guide kbd {
  display: inline-block; min-width: 16px; text-align: center;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px; padding: 1px 5px; margin: 0 1px; font-size: 11px; font-family: inherit;
}
body.desktop #key-guide { display: block; }
#kick-btn {
  width: 88px; height: 88px; font-size: 20px;
  background: radial-gradient(circle at 35% 28%, var(--play-hi), var(--play) 52%, var(--play-lo));
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 0 5px rgba(34, 197, 94, 0.18),
    0 6px 0 var(--play-edge),
    0 14px 30px var(--play-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -7px 12px rgba(0, 0, 0, 0.26);
}
#kick-btn.pressed {
  transform: translateY(5px) scale(0.97);
  box-shadow:
    0 0 0 5px rgba(34, 197, 94, 0.32),
    0 1px 0 var(--play-edge),
    0 0 34px var(--play-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -5px 10px rgba(0, 0, 0, 0.26);
}
#kick-btn.cooling { opacity: 0.55; }

/* Corner buttons — one frosted-glass round language for all five (leave/mute/
   invite/emote/ctrl), 44px touch targets, safe-area offsets. */
#btn-leave, #btn-mute, #btn-invite, #btn-emote, #btn-ctrl, #btn-fs {
  position: fixed; z-index: 13;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(130, 160, 255, 0.24);
  background: rgba(12, 18, 36, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--gold-hi); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .3s;
}
#btn-leave:active, #btn-mute:active, #btn-invite:active, #btn-emote:active, #btn-ctrl:active, #btn-fs:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#btn-leave {
  top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  color: var(--text);
}
#btn-mute { top: max(10px, env(safe-area-inset-top)); }
/* Fullscreen toggle rides under the leave button on the right edge. Hidden
   entirely by JS where the Fullscreen API is missing (iOS Safari). */
#btn-fs {
  top: calc(max(10px, env(safe-area-inset-top)) + 52px);
  right: max(12px, env(safe-area-inset-right));
}
#btn-fs .ico-off { display: none; }
#btn-fs.fs-on .ico-on { display: none; }
#btn-fs.fs-on .ico-off { display: block; }
#btn-mute .ico-off { display: none; }
#btn-mute.muted { color: var(--muted); }
#btn-mute.muted .ico-on { display: none; }
#btn-mute.muted .ico-off { display: block; }
#conn-status {
  position: fixed; bottom: 8px; left: 12px; z-index: 13;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--gold-hi); opacity: 0.95;
  pointer-events: none;
}
#conn-status:not(:empty) {
  padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(7, 11, 24, 0.78); border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* ===== Language selector — capsule track (lobby topbar) ===== */
.lang-select { display: inline-flex; gap: 3px; margin: 0; padding: 3px; border-radius: var(--r-pill);
  background: rgba(4, 8, 18, 0.6); border: 1px solid rgba(130, 160, 255, 0.10);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); }
.lang-select button {
  min-width: 44px; min-height: 40px; padding: 6px 10px; border-radius: var(--r-pill); cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  background: transparent; color: var(--muted); border: none;
  transition: all .15s;
}
.lang-select button.active {
  background: linear-gradient(180deg, var(--play-hi), var(--play));
  color: #fff; text-shadow: 0 1px 2px rgba(10, 40, 20, 0.4);
  box-shadow: 0 2px 0 var(--play-edge);
}

/* ===== Global standings card (lobby) ===== */
.stats-panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--r-card); padding: 18px 18px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.stats-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--muted);
  text-transform: uppercase; margin-bottom: 12px;
}
.stats-title::before { content: ""; width: 3px; height: 14px; border-radius: 1px; background: linear-gradient(180deg, var(--red), var(--blue)); }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #36d870; box-shadow: 0 0 8px #36d870; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } }
.stats-row { display: flex; gap: 8px; }
.stat { flex: 1; background: rgba(4, 8, 18, 0.5); border: 1px solid var(--card-line); border-radius: var(--r-ctl); padding: 11px 4px; }
.stat-num { font-size: 30px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.05; }
.stat-cap { font-family: var(--font-ui); font-size: 10px; color: var(--faint); letter-spacing: 1px; margin-top: 2px; text-transform: uppercase; }
.lb-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 2.5px; margin: 14px 0 6px; text-align: left; text-transform: uppercase; }
.panel > .lb-title:first-child { margin-top: 0; }
.lb { display: flex; flex-direction: column; gap: 5px; }
.lb-row { display: flex; align-items: center; gap: 8px; font-size: 13px; background: rgba(4, 8, 18, 0.4); border-radius: 8px; padding: 5px 9px; }
.lb-rank { width: 16px; color: var(--faint); font-weight: 800; font-size: 12px; font-family: var(--font-display); }
.lb-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.lb-name { flex: 1; text-align: left; color: var(--text); }
.lb-val { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--font-display); }

/* ===== Overlays (modals) — blur + darken, springy pop-in ===== */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-y: auto;
  background: radial-gradient(800px 600px at 50% 30%, #16345f55 0%, transparent 60%), rgba(3, 5, 11, 0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* margin:auto (not flex centering alone) so a card taller than a short landscape
   screen scrolls from its top instead of clipping both ends off-screen. */
.overlay > * { margin: auto; }
@media (prefers-reduced-motion: no-preference) {
  .overlay > * { animation: popIn .22s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@keyframes popIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
/* Portrait → landscape hint (mobile only). Highest z so it sits above the
   canvas; auto-hidden by JS on rotate/close. */
#rotate-hint { z-index: 120; }
.rotate-card {
  width: min(86vw, 320px); text-align: center;
  background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--r-card); padding: 26px 22px 20px;
  box-shadow: var(--shadow-pop);
}
.rotate-ico { color: var(--gold-hi); filter: drop-shadow(0 4px 14px var(--gold-glow)); animation: rotate-tip 2.4s ease-in-out infinite; }
@keyframes rotate-tip { 0%, 55%, 100% { transform: rotate(0); } 72%, 88% { transform: rotate(-90deg); } }
.rotate-text { color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: .5px; margin: 14px 0 18px; }
#rotate-close { min-height: 44px; }

.sum-card, .share-card {
  width: min(92vw, 360px); text-align: center;
  background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--r-card); padding: 24px 22px 20px;
  box-shadow: var(--shadow-pop);
}
/* Post-match verdict — .win/.lose class hook set by share.js renderSummary().
   Win: slow-spinning gold sunburst behind the mascot + glowing trophy/bun.
   Lose: static cool blue wash, gold title turned steel. Draw/spectate: neither. */
.sum-card { position: relative; overflow: hidden; }
.sum-card > * { position: relative; z-index: 1; }
.sum-card::before { z-index: 0; pointer-events: none; }
.sum-card.win { border-color: rgba(246, 195, 68, 0.45); box-shadow: var(--shadow-pop), 0 0 56px rgba(246, 195, 68, 0.16); }
.sum-card.win::before {
  content: ''; position: absolute; left: 50%; top: 118px; width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  background: repeating-conic-gradient(from 0deg, rgba(246, 195, 68, 0.15) 0deg 10deg, transparent 10deg 26deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .sum-card.win::before { animation: sumRays 28s linear infinite; }
}
@keyframes sumRays { to { transform: rotate(1turn); } }
.sum-card.win #sum-trophy { filter: drop-shadow(0 0 18px var(--gold-glow)) drop-shadow(0 6px 20px var(--gold-glow)); }
.sum-card.win .sum-score { font-size: 54px; }
.sum-card.lose { border-color: var(--line-cool); }
.sum-card.lose::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(130% 90% at 50% 0%, rgba(77, 134, 255, 0.12), transparent 62%);
}
.sum-card.lose .sum-title { background: linear-gradient(180deg, #e7edf8, var(--muted) 78%); -webkit-background-clip: text; background-clip: text; }
.sum-card.lose #sum-trophy { color: var(--muted); filter: none; }

#sum-trophy { color: var(--gold); line-height: 0; margin-bottom: 6px; filter: drop-shadow(0 4px 14px var(--gold-glow)); }
.sum-bun { width: 112px; height: 112px; object-fit: contain; }
.sum-title { font-size: 30px; font-weight: 800; letter-spacing: 2px; font-family: var(--font-display);
  background: linear-gradient(180deg,#fff,var(--gold-hi),var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sum-score { font-size: 46px; font-variant-numeric: tabular-nums; margin: 6px 0; }
.sum-score .s-red { color: var(--red-team); } .sum-score .s-blue { color: var(--blue-team); } .sum-score .s-sep { color: var(--faint); margin: 0 8px; }
.sum-mvp { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--muted); margin: 8px 0; }
.sum-mvp img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; }
.sum-mvp b { color: var(--gold-hi); }
.sum-streak { font-size: 14px; color: var(--gold-hi); font-weight: 700; min-height: 18px; margin-bottom: 6px; }
.sum-actions { display: flex; gap: 10px; margin-top: 8px; }
.sum-actions .btn { margin-top: 0; }
.sum-leave { margin-top: 8px; background: none; border: none; cursor: pointer; color: var(--faint); font-size: 13px; letter-spacing: 1px; text-decoration: underline; min-height: 40px; padding: 10px 16px; } /* link-styled but thumb-sized */
.sum-leave:hover { color: var(--muted); }

/* ===== Share modal ===== */
.share-title { font-size: 18px; font-weight: 800; letter-spacing: 1px; color: var(--gold-hi); margin-bottom: 14px; }
.replay-note { font-size: 12px; color: var(--muted); letter-spacing: 1px; margin: 8px 0 2px; line-height: 1.4; font-family: var(--font-ui); }
#share-preview { line-height: 0; margin-bottom: 12px; }
#share-preview img, #share-preview canvas, #share-preview video { width: 100%; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.share-link { font-size: 12px; color: var(--muted); background: rgba(4, 8, 18, 0.5); border: 1px solid var(--card-line); border-radius: var(--r-ctl); padding: 9px 10px; margin-bottom: 12px; word-break: break-all; }
.share-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.share-iab-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.4; text-align: center; font-family: var(--font-ui); }
.share-btns button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: var(--r-ctl); cursor: pointer;
  background: var(--card); border: 1px solid var(--card-line); color: var(--text); font-size: 11px; font-weight: 600; transition: all .15s;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.share-btns button:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.share-btns button svg { width: 22px; height: 22px; }
#share-close { margin-top: 0; }

/* ===== In-room country picker ===== */
/* Wrapping grid capped at ~2 rows — a slim styled vertical scrollbar instead
   of the ugly horizontal bar; touch scrolls naturally. */
.room-flags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 0; padding: 4px 2px;
  max-height: 78px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(246, 195, 68, 0.45) transparent; }
.room-flags::-webkit-scrollbar { width: 6px; }
.room-flags::-webkit-scrollbar-track { background: transparent; }
.room-flags::-webkit-scrollbar-thumb { background: rgba(246, 195, 68, 0.45); border-radius: 3px; }
.room-flags button { flex: none; width: 38px; height: 30px; border-radius: 6px; cursor: pointer; padding: 3px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12); }
.room-flags button img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }
.room-flags button.active { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi); }

/* ===== Wishing-pool wall ===== */
.fb-wall-title { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; margin: 16px 0 8px; text-align: left; }
.fb-list { max-height: 200px; overflow-y: auto; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.fb-item { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.45; padding: 7px 9px; border-radius: 10px; background: var(--glass); border: 1px solid var(--card-line); }
.fb-tag { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: var(--gold-hi); border: 1px solid rgba(246, 195, 68, 0.4); border-radius: 6px; padding: 1px 6px; }
.fb-tag.bug { color: #ff9b9b; border-color: rgba(255,110,110,0.4); }
.fb-item .fb-text { flex: 1; color: var(--text); word-break: break-word; }
.fb-when { flex: none; font-size: 11px; color: var(--faint); }
.fb-empty { font-size: 12px; color: var(--faint); }

/* ===== In-game invite / emote / control-scheme =====
   Visual language lives with the shared corner-button rule (see #btn-leave
   block); only the corner layout offsets are here. 44px buttons + 8px gap. */
#btn-invite, #btn-emote, #btn-ctrl { top: max(10px, env(safe-area-inset-top)); }
#btn-mute { left: max(12px, env(safe-area-inset-left)); }
#btn-invite { left: calc(max(12px, env(safe-area-inset-left)) + 52px); }
#btn-emote { left: calc(max(12px, env(safe-area-inset-left)) + 104px); }
#btn-ctrl { left: calc(max(12px, env(safe-area-inset-left)) + 156px); }
/* Narrow screens: a 4-icon row reaches the centered score chips — wrap the last
   two icons into a second row (2×2 block) and push the emote tray below it. */
@media (max-width: 760px) {
  #btn-emote { left: max(12px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 52px); }
  #btn-ctrl { left: calc(max(12px, env(safe-area-inset-left)) + 52px); top: calc(max(10px, env(safe-area-inset-top)) + 52px); }
  #emote-tray { top: calc(max(10px, env(safe-area-inset-top)) + 108px); }
}

/* ===== Match-mode HUD (.playing, set by client.js while phase === 'play') =====
   During live play the broadcast scoreboard collapses to a slim translucent
   capsule and the corner buttons shrink + dim, so the pitch stays readable on
   phones. Goal pauses / kickoff / waiting drop .playing and restore the full
   chrome. NOTE: #hud-top stays transform-free (cached canvas rect, see above)
   and pointer-events: none — the .peek class is written by a JS touch/hover
   listener since :hover can never fire on it. */
#game.playing #hud-top {
  padding: 2px 6px;
  background: rgba(9, 14, 27, 0.35);
  border-color: rgba(246, 195, 68, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  opacity: .55;
}
#game.playing #hud-top.peek { opacity: 1; }
#game.playing .score-chip { font-size: 19px; min-width: 44px; padding: 3px 8px; gap: 6px; border-radius: 9px; }
#game.playing .flag { width: 21px; height: 14px; }
#game.playing .hud-center { padding: 0 10px; min-width: 56px; }
#game.playing #game-time { font-size: 17px; }
#game.playing #room-tag, #game.playing #hud-brand { display: none; }
/* Corner buttons: 36px visual, but a transparent ::after ring keeps the touch
   target at the full 44px. Hover/press restores full opacity. */
#game.playing #btn-leave, #game.playing #btn-mute, #game.playing #btn-invite,
#game.playing #btn-emote, #game.playing #btn-ctrl, #game.playing #btn-fs {
  width: 36px; height: 36px; opacity: .5;
}
#game.playing #btn-leave::after, #game.playing #btn-mute::after, #game.playing #btn-invite::after,
#game.playing #btn-emote::after, #game.playing #btn-ctrl::after, #game.playing #btn-fs::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
}
#game.playing #btn-leave:hover, #game.playing #btn-mute:hover, #game.playing #btn-invite:hover,
#game.playing #btn-emote:hover, #game.playing #btn-ctrl:hover, #game.playing #btn-fs:hover,
#game.playing #btn-leave:active, #game.playing #btn-mute:active, #game.playing #btn-invite:active,
#game.playing #btn-emote:active, #game.playing #btn-ctrl:active, #game.playing #btn-fs:active {
  opacity: 1;
}

/* One-time iOS Add-to-Home-Screen tip — slim card, top center, below the
   corner-button row; only the card itself catches taps. */
#a2hs-tip {
  position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 56px);
  left: 0; right: 0; width: fit-content; max-width: min(92vw, 360px); margin: 0 auto;
  z-index: 30;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 8px 8px 14px;
  font-size: 13px; color: var(--text);
  background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--r-ctl);
  box-shadow: var(--shadow-pop);
}
#a2hs-tip > svg { flex: none; color: var(--gold-hi); }
/* Narrow screens wrap the corner buttons into a 2×2 block (see the 760px rule
   above) — drop the tip below it so it never sits on top of a button. */
@media (max-width: 760px) {
  #a2hs-tip { top: calc(max(10px, env(safe-area-inset-top)) + 108px); }
}
#a2hs-close {
  position: relative; flex: none; width: 32px; height: 32px; padding: 0; margin: -4px 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%; color: var(--muted); cursor: pointer;
}
/* 32px visual, 44px touch target */
#a2hs-close::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }

/* DOM joystick (stick / fixed schemes) — fixed-position elements, NOT canvas
   drawing, so the stick can sit in the letterbox bars beside the pitch. */
#stick-base, #stick-knob {
  position: fixed; left: 0; top: 0; z-index: 11; display: none; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
  will-change: transform; /* JS moves them via transform — keep on the compositor */
}
/* Glassy outer ring (base) + glowing turf-green core (knob). Size, position
   and opacity are written by JS every frame — visual skin only here. */
#stick-base {
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow: 0 0 22px rgba(34, 197, 94, 0.16), inset 0 0 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
#stick-knob {
  background: radial-gradient(circle at 35% 28%, var(--play-hi), var(--play) 58%, var(--play-lo));
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 18px var(--play-glow), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.25);
}
#emote-tray {
  position: fixed; z-index: 14; top: calc(max(10px, env(safe-area-inset-top)) + 52px);
  left: max(12px, env(safe-area-inset-left));
  display: flex; gap: 6px; padding: 8px; border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(22, 31, 58, 0.92), rgba(14, 21, 48, 0.94));
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#emote-tray button { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--gold-hi);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center; }
/* Explicit size — WebKit collapses viewBox-only SVGs in flex items to nothing */
#emote-tray button svg { width: 22px; height: 22px; }
#emote-tray button:active { transform: scale(0.9); box-shadow: 0 0 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* ===== Waiting room (round-based lobby) — "pre-match locker room":
   gold room-code capsule, VS face-off roster, host/personal setting cards,
   oversized Start CTA, chat drawer. Inherits the shared card/button/seg system. ===== */
#room {
  display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 18px 14px;
  background:
    radial-gradient(120% 55% at 50% 110%, rgba(34, 197, 94, 0.14), transparent 60%),
    radial-gradient(900px 540px at 50% -14%, #17224b 0%, transparent 64%),
    linear-gradient(180deg, #0a1128 0%, var(--ink) 70%, #04070f 100%);
}
.room-card {
  position: relative; z-index: 1; margin: auto; width: min(94vw, 440px);
  background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--r-card); padding: 18px 20px 22px;
  box-shadow: var(--shadow-card); text-align: center;
}
.room-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
/* Room code = big gold-edged capsule (the "match ticket" — invite btn copies it) */
.room-code {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1.5px solid rgba(246, 195, 68, 0.55);
  background: linear-gradient(180deg, rgba(246, 195, 68, 0.14), rgba(246, 195, 68, 0.03)), rgba(4, 8, 18, 0.5);
  box-shadow: 0 0 18px rgba(246, 195, 68, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
}
.room-code svg { flex: none; color: var(--gold-hi); }
.room-code b { color: var(--gold-hi); font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1; letter-spacing: 4px; font-weight: 800; text-shadow: 0 0 16px var(--gold-glow); }
.room-head-btns { display: flex; gap: 8px; flex: none; }
.rbtn { width: 44px; height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--card-line); background: rgba(4, 8, 18, 0.5); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.rbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.room-title { margin: 4px 0 2px; font-size: 26px; font-weight: 800; letter-spacing: 2px; color: #fff; }
.room-sub { margin: 0 0 16px; font-size: 12px; color: var(--faint); }
.room-result { position: relative; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-ctl); background: rgba(4, 8, 18, 0.5); border: 1px solid var(--card-line); }
.rr-share { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; box-shadow: none; }
.rr-share:active { transform: scale(0.93); box-shadow: none; }
.room-result .rr-score { font-size: 24px; font-variant-numeric: tabular-nums; }
.room-result .rr-score .s-red { color: var(--red); } .room-result .rr-score .s-blue { color: var(--blue); } .room-result .rr-score .s-sep { color: var(--faint); margin: 0 8px; }
.room-result .rr-cap { font-size: 11px; color: var(--faint); letter-spacing: 1px; margin-bottom: 2px; }
.room-result .rr-mvp { font-size: 12px; color: var(--muted); margin-top: 4px; display:flex; align-items:center; justify-content:center; gap:6px; }
.room-result .rr-mvp img { width: 20px; height: 13px; object-fit: cover; border-radius: 2px; }
.rr-clip { margin: 8px 0 2px; border-radius: 8px; overflow: hidden; }
.rr-clip video, .rr-clip img { display: block; width: 100%; }

/* ---- VS face-off: two team glass cards squaring up, gold VS badge between ---- */
.roster { position: relative; display: flex; gap: 14px; margin-bottom: 16px; }
/* Team-tinted glass panels: the red/blue identity should hit you before you
   read a single label. */
.roster-col { flex: 1; min-width: 0; border-radius: 16px; padding: 10px; }
.roster-col.rc-red {
  background: linear-gradient(180deg, rgba(255, 77, 99, 0.20), rgba(8, 10, 22, 0.55) 70%);
  border: 1px solid rgba(255, 77, 99, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 20px rgba(255, 77, 99, 0.10);
}
.roster-col.rc-blue {
  background: linear-gradient(180deg, rgba(77, 134, 255, 0.20), rgba(8, 10, 22, 0.55) 70%);
  border: 1px solid rgba(77, 134, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 20px rgba(77, 134, 255, 0.12);
}
.roster-vs {
  position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none;
  transform: translate(-50%, -50%) skewX(-8deg);
  padding: 6px 11px; border-radius: 11px;
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 19px; line-height: 1; letter-spacing: 1px;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  background: linear-gradient(115deg, rgba(255, 77, 99, 0.85) 0 42%, #141d38 42% 58%, rgba(77, 134, 255, 0.85) 58% 100%);
  border: 1px solid rgba(246, 195, 68, 0.6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 16px rgba(246, 195, 68, 0.18);
}
.rc-head { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-display); font-style: italic; font-size: 16px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.rc-head.team-red { color: var(--red); text-shadow: 0 0 14px var(--red-glow); }
.rc-head.team-blue { color: var(--blue); text-shadow: 0 0 14px var(--blue-glow); }
.rc-dot { width: 8px; height: 8px; border-radius: 50%; }
.team-red .rc-dot { background: var(--red); box-shadow: 0 0 8px var(--red); }
.team-blue .rc-dot { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.rc-list { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.rc-player { display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 13px; font-weight: 600; padding: 6px 9px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
/* CPU row = an open seat: dashed outline + a persistent "sit here" arrow that
   brightens to gold on hover/press (tap moves you into that exact slot). */
.rc-player.cpu { background: transparent; border: 1px dashed rgba(255,255,255,0.22); color: var(--faint); font-weight: 400; }
.rc-player.takeable { cursor: pointer; transition: all .15s; }
.rc-player.takeable .rc-take { color: var(--gold-hi); opacity: 0.55; margin-left: auto; flex: none; }
.rc-player.takeable:hover, .rc-player.takeable:active {
  border-color: var(--gold); border-style: solid; color: var(--gold-hi);
  background: rgba(246, 195, 68, 0.1); box-shadow: 0 0 12px rgba(246, 195, 68, 0.2);
}
.rc-player.takeable:hover .rc-take, .rc-player.takeable:active .rc-take { opacity: 1; }
.rc-player.me { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); }
.rc-player img { width: 20px; height: 13px; object-fit: cover; border-radius: 2px; flex: none; }
.rc-player img.rc-avatar { width: 22px; height: 22px; border-radius: 50%; }
.rc-player .rc-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-player .rc-host { color: var(--muted); flex: none; }

/* Start / Ready = THE visual focus of the locker room: oversized CTA */
#room-start, #room-ready { padding: 17px 14px; font-size: 22px; letter-spacing: 3px; border-radius: 16px; min-height: 60px; }
#room-start { display: flex; align-items: center; justify-content: center; gap: 8px; }
.room-wait { color: var(--muted); font-size: 13px; letter-spacing: 1px; margin-top: 10px; }

/* Ready / start feedback (the pulse is reused for share/quick-play highlights).
   Animates outline (not box-shadow) so the chunky 3D bottom edge stays put. */
@keyframes readyPulse {
  0%, 100% { outline: 0 solid rgba(74, 222, 128, 0.5); }
  60% { outline: 9px solid rgba(74, 222, 128, 0); }
}
#room .btn.attn, .sum-actions .btn.attn, #lobby .btn.attn { animation: readyPulse 1.7s ease-out infinite; }

/* Duel challenge landing banner (lobby) */
.duel-banner {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; padding: 10px 12px;
  border-radius: var(--r-ctl); text-align: left; line-height: 1.45;
  background: rgba(255, 77, 99, 0.10); border: 1px solid rgba(255, 77, 99, 0.35);
  color: var(--red-hi); font-size: 13px; font-weight: 600; font-family: var(--font-ui);
}
.duel-banner svg { flex: none; }
.duel-clip { margin: 4px 0 -2px; border-radius: var(--r-ctl); overflow: hidden; }
.duel-clip video, .duel-clip img { display: block; width: 100%; }
.rc-player.rdy { border: 1px solid rgba(54, 216, 112, 0.35); background: rgba(54, 216, 112, 0.08); }

/* ===== Stacked waiting room (phone portrait / narrow windows) — CTA first:
   roster → Start → actions; settings & cosmetics scroll below (they persist
   between rounds, the start button is what every round needs). ===== */
.room-card { display: flex; flex-direction: column; }
.room-title, .room-sub { display: none; } /* the header already shows the room code */
.room-head { order: -10; }
#room-result { order: -9; }
.roster { order: -8; }
#room-start, #room-ready { order: -7; margin-top: 0; }
#room-wait-note { order: -6; margin: 8px 0 0; }
#btn-switch { order: -5; margin-top: 10px; }
#room-share { order: -4; margin: 10px 0 14px; }

/* ===== Desktop / large tablets — two-pane: roster + settings + chat on the
   left, actions + cosmetics on the right (no scrolling, no zoom tricks). ===== */
@media (min-width: 920px) and (min-height: 561px) {
  .room-card {
    width: min(92vw, 840px);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    /* Every direct child MUST get an area (unplaced rows auto-flow on top).
       The tall roster spans every right-column action row THROUGH the tall
       #room-me row — its leftover height lands in the row #room-me already
       fills, so no empty gap ever opens between the action buttons. */
    grid-template-areas:
      "head     head"
      "roster   start"
      "roster   wait"
      "roster   switch"
      "roster   invite"
      "roster   me"
      "result   me"
      "settings me"
      "chat     chat";
    column-gap: 24px;
    align-content: start;
    padding: 20px 24px 24px;
  }
  .room-head { grid-area: head; }
  .roster { grid-area: roster; align-self: start; }
  #room-result { grid-area: result; align-self: start; }
  #room-settings { grid-area: settings; align-self: start; }
  #room-me { grid-area: me; align-self: start; margin-top: 10px; min-width: 0; overflow: hidden; }
  #room-start, #room-ready { grid-area: start; align-self: start; margin-top: 0; }
  #room-wait-note { grid-area: wait; margin: 8px 0 0; }
  #btn-switch { grid-area: switch; align-self: start; margin-top: 10px; }
  #room-share { grid-area: invite; align-self: start; margin: 10px 0 0; }
  .chat { grid-area: chat; margin-top: 14px; }
}
/* Desktop plays with WASD — the touch-scheme picker is noise there. */
body.desktop #room-ctrl { display: none; }

/* ===== Short landscape waiting room — two-pane card: roster/settings on the
   left, Start/Ready + chat on the right, so the primary action is never below
   the fold on a rotated phone. ===== */
@media (min-width: 640px) and (min-aspect-ratio: 13/10) and (max-height: 560px) {
  #room { padding: 10px; }
  .room-card {
    width: min(97vw, 880px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto; /* very short screens: bottom rows (preview) stay reachable */
    padding: 14px 18px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr);
    /* Every direct child MUST have an explicit area here — an unplaced row
       gets grid-auto-flowed on top of the named cells (buttons overlapping
       buttons on rotated phones).
       The tall roster spans the switch/invite rows THROUGH the tall #room-me
       rows, so the right-column buttons stack tight under Start instead of
       floating apart to match the roster's height. */
    grid-template-areas:
      "head     start"
      "result   wait"
      "roster   switch"
      "roster   invite"
      "roster   me"
      "settings me"
      "chat     me";
    column-gap: 18px;
  }
  .room-title, .room-sub { display: none; } /* header already shows the room code */
  .room-head { grid-area: head; margin-bottom: 8px; }
  #room-result { grid-area: result; align-self: start; }
  .roster { grid-area: roster; margin-bottom: 10px; align-self: start; }
  #room-settings { grid-area: settings; margin-bottom: 0; align-self: start; }
  #room-me { grid-area: me; align-self: start; margin-top: 10px; min-width: 0; overflow: hidden; }
  #room-preview-row .char-preview { width: 56px; height: 56px; } /* compact on short screens */
  #room-start, #room-ready { grid-area: start; align-self: start; margin-top: 0; }
  #room-wait-note { grid-area: wait; margin: 8px 0 0; align-self: start; }
  #room-share { grid-area: invite; align-self: start; margin: 10px 0 0; }
  #btn-switch { grid-area: switch; align-self: start; margin-top: 10px; }
  .chat {
    grid-area: chat; min-height: 0; margin-top: 8px; align-self: stretch;
    display: flex; flex-direction: column;
  }
  .chat-log { flex: 1; height: auto; min-height: 46px; }
}

/* ===== Lobby room browser (its own card in the play column) ===== */
.roomlist-wrap { text-align: left; }
.room-list { display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow-y: auto; }
.room-list .rl-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: var(--r-ctl); cursor: pointer;
  background: rgba(4, 8, 18, 0.45); border: 1px solid var(--card-line); transition: all .12s;
}
.room-list .rl-row:active { transform: scale(0.98); }
.room-list .rl-row:hover { border-color: rgba(130, 160, 255, 0.4); }
.rl-code { font-weight: 800; letter-spacing: 2px; color: var(--text); font-size: 15px; font-family: var(--font-display); }
.rl-meta { flex: 1; text-align: left; font-size: 11px; color: var(--faint); }
.rl-badge { font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 3px 8px; border-radius: var(--r-pill); text-transform: uppercase; }
.rl-badge.waiting { color: #36d870; background: rgba(54,216,112,0.14); box-shadow: 0 0 10px rgba(54, 216, 112, 0.15); }
.rl-badge.playing { color: var(--gold-hi); background: rgba(246, 195, 68, 0.14); box-shadow: 0 0 10px rgba(246, 195, 68, 0.15); }
.rl-players { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.room-list .rl-empty { text-align: center; color: var(--faint); font-size: 12px; padding: 10px; }

/* ===== Daily challenge / first-win card (lobby) — gold reward card ===== */
.daily-card {
  display: flex; align-items: center; gap: 8px; padding: 13px 15px;
  border-radius: var(--r-card); text-align: left;
  background: linear-gradient(180deg, rgba(246, 195, 68, 0.13), rgba(246, 195, 68, 0.03)), var(--card);
  border: 1px solid rgba(246, 195, 68, 0.35);
  box-shadow: var(--shadow-card), 0 0 18px rgba(246, 195, 68, 0.08);
  color: var(--gold-hi); font-size: 12.5px; font-weight: 600; font-family: var(--font-ui);
}
.daily-card svg { flex: none; }
.daily-card #daily-text { flex: 1; }
.daily-card.done { background: linear-gradient(180deg, rgba(54, 216, 112, 0.12), rgba(54, 216, 112, 0.03)), var(--card); border-color: rgba(54, 216, 112, 0.3); color: #8fe0a6; }
.daily-first { display: inline-flex; align-items: center; gap: 4px; color: #36d870; font-weight: 700; flex: none; }
.sum-daily { font-size: 13px; color: var(--gold-hi); min-height: 16px; margin-bottom: 4px; }
.sum-daily .sd-first { color: #36d870; font-weight: 700; margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; }

/* ===== Roster mute (local, per player) ===== */
.rc-mute {
  width: 30px; height: 30px; flex: none; padding: 0; margin-left: 6px;
  border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rc-name + .rc-mute { margin-left: auto; } /* no badge → still right-aligned */
.rc-mute.on { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.08); }

/* ===== Room chat — bottom drawer card (handle notch on top) ===== */
.chat {
  margin-top: 14px; padding: 9px 12px 12px;
  background: rgba(4, 8, 18, 0.38); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.chat::before { content: ""; display: block; flex: none; width: 44px; height: 4px; margin: 0 auto 9px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.chat-log {
  height: 110px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  text-align: left; font-size: 13px; padding: 8px 10px; border-radius: var(--r-ctl);
  background: rgba(4, 8, 18, 0.45); border: 1px solid var(--card-line); margin-bottom: 8px;
}
.chat-msg { line-height: 1.35; word-break: break-word; }
.chat-msg .cm-name { font-weight: 700; }
.chat-msg .cm-name.red { color: var(--red); }
.chat-msg .cm-name.blue { color: var(--blue); }
.chat-msg .cm-text { color: var(--text); }
.chat-msg.sys { color: var(--faint); font-style: italic; }
.chat-row { display: flex; gap: 8px; }
.chat-row input { flex: 1; padding: 10px 12px; font-size: 14px; min-height: 42px; }
.chat-row .rbtn { width: 44px; height: auto; border-radius: var(--r-ctl); }

/* ===== Room setting cards: host settings (#room-settings, .locked for guests)
   + personal locker (#room-me: control / preview / character / cap / flag) ===== */
.room-sec {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: var(--r-card);
  background: rgba(4, 8, 18, 0.38);
  border: 1px solid var(--card-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#room-me { margin-top: 10px; }
/* #room-ctrl: per-player control picker — lives in the personal card, never .locked */
.room-settings { margin-bottom: 0; }
.rs-row { display: flex; align-items: center; gap: 10px; }
.rs-row input { flex: 1; min-width: 0; }
.rs-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; color: var(--faint); text-transform: uppercase; width: 64px; text-align: left; flex: none; }
.seg-sm { flex: 1; gap: 3px; padding: 3px; }
.seg-sm button { padding: 6px 2px; font-size: 13px; min-height: 38px; }
/* Narrow portrait: side label squeezes the pills until labels wrap — stack instead */
@media (max-width: 480px) {
  .rs-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .rs-label { width: auto; }
  .rs-row .char-preview { align-self: center; }
  .seg-sm button { font-size: 12px; }
  /* Column direction: flex-basis 0 would collapse the strip to 0 height —
     size by content instead (max-height 78px + scroll still applies) */
  .rs-row .room-flags { flex: none; }
}
.room-settings.locked { opacity: 0.6; pointer-events: none; } /* non-host: read-only */
.roster-col .ready-tick { color: #36d870; flex: none; }
.rc-player .rc-ready { margin-left: auto; }

/* ===== Spectator (exhibition) mode ===== */
/* View-only: hide every control affordance; the leave/mute buttons stay. */
#game.spectating #controls,
#game.spectating #key-guide,
#game.spectating #btn-emote,
#game.spectating #btn-invite,
#game.spectating #btn-ctrl,
#game.spectating #stick-base,
#game.spectating #stick-knob { display: none !important; }

/* Watch (eye) button on open-room rows */
.rl-watch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; flex: none; margin-left: 2px;
  border: 1px solid var(--line-cool); border-radius: 8px;
  background: rgba(0, 0, 0, 0.25); color: var(--muted); cursor: pointer; padding: 0;
}
.rl-watch:hover { color: var(--text); border-color: var(--line); }

/* ===== Optional Google login (lobby topbar) ===== */
.auth-box { margin: 0; min-width: 0; }
/* Sign-in benefit copy is a title tooltip on #auth-signin (data-i18n-title) */
.auth-signin { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#g-btn { min-height: 40px; display: flex; justify-content: flex-end; color-scheme: light; }
.auth-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border: 1px solid var(--card-line); border-radius: var(--r-pill);
  background: var(--card); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.auth-avatar { border-radius: 50%; flex: none; object-fit: cover; background: rgba(255,255,255,0.1); }
.auth-meta { flex: 1; min-width: 0; }
.auth-name { font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-career { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; }
.auth-logout {
  flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-cool); border-radius: 50%;
  background: rgba(0,0,0,0.25); color: var(--muted); cursor: pointer; padding: 0;
}
.auth-logout:hover { color: var(--text); border-color: var(--line); }

/* ===== Duel challenge landing (full-screen takeover) ===== */
.duel-card {
  width: min(92vw, 420px);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-card);
  padding: 22px 22px 16px;
  text-align: center;
  box-shadow: var(--shadow-pop);
}
.dc-title {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--gold-hi);
}
.dc-media { margin: 14px 0 4px; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--card-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.dc-media video, .dc-media img { display: block; width: 100%; max-height: 46vh; object-fit: cover; }
.dc-scorerow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 2px; }
.dc-flag { border-radius: 3px; display: block; }
.dc-score { font-size: 44px; letter-spacing: 2px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.dc-claim { margin: 6px 0 14px; font-size: 13px; color: var(--muted); }
.duel-card .btn { width: 100%; }
.duel-card .sum-leave { margin-top: 10px; }

/* ===== Hero mascot ===== */
.hero-bun { margin-bottom: 2px; animation: bunBob 3.2s ease-in-out infinite; }
@keyframes bunBob { 50% { transform: translateY(-5px); } }

/* ===== Cosmetic cap picker ===== */
.cap-select { flex-wrap: wrap; }   /* narrow phones: wrap instead of squeezing below thumb size */
.cap-select button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; flex: 0 1 auto; }
.cap-select button.locked { opacity: 0.38; cursor: help; }
.cap-select button.locked:hover { opacity: 0.55; }
.sd-unlock { color: var(--gold-hi); font-weight: 700; }

/* ===== Feedback / wishing pool ===== */
.feedback-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin: 12px auto 0; padding: 10px 16px; min-height: 40px;
  background: transparent; border: 1px solid var(--line-cool); border-radius: var(--r-pill);
  color: var(--muted); font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; cursor: pointer;
}
.feedback-link:hover { color: var(--text); border-color: var(--line); }
.fb-sub { margin: 2px 0 12px; font-size: 12px; color: var(--muted); text-align: center; }
#feedback-modal .share-card { max-width: 400px; }
#fb-kind { margin-bottom: 12px; }
#fb-text {
  width: 100%; resize: vertical; min-height: 92px; margin-bottom: 12px; padding: 11px 12px;
  border-radius: var(--r-ctl); border: 1px solid var(--card-line);
  background: rgba(4, 8, 18, 0.55); color: var(--text); font-family: var(--font-ui); font-size: 14px;
}
#fb-text:focus { outline: none; border-color: var(--play); box-shadow: 0 0 0 3px var(--play-glow); }
.fb-thanks { margin-bottom: 12px; color: #8fe0a6; font-weight: 700; font-size: 14px; }

/* ===== Net ping readout (match HUD) ===== */
#net-ping {
  position: absolute; left: 10px; bottom: 10px; z-index: 6;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(7, 11, 24, 0.7); border: 1px solid var(--line-cool);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
#net-ping[data-band="good"] { color: #6be675; }
#net-ping[data-band="ok"]   { color: var(--gold-hi); }
#net-ping[data-band="bad"]  { color: var(--red-hi); }

/* ===== In-room character preview — circular spotlight frame ===== */
.char-preview-row { align-items: center; }
.char-preview {
  width: 76px; height: 76px; flex: none; border-radius: 50%;
  border: 1px solid rgba(130, 160, 255, 0.28);
  background: radial-gradient(circle at 50% 24%, rgba(34, 197, 94, 0.30), rgba(4, 8, 18, 0.75) 72%);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.18), inset 0 -10px 18px rgba(0, 0, 0, 0.45);
}

/* ===== Motion kill-switch: every animation/transition collapses to a single
   instant frame when the user asks for reduced motion. ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}