/* SongTimelineGame — mobile-first, dark. Desktop is the same layout centered (max-width on <main>). */

:root {
  --bg: #0d0f16;
  --panel: #171a24;
  --panel-2: #212636;
  --ink: #f4f5f9;
  --muted: #98a0b3;
  --line: rgba(255, 255, 255, 0.09);
  /* Teams have no names — a team IS its colour. These are the defaults (blue
     vs red); app.js overwrites all six vars from the setup screen's colour
     picks (TEAM_COLORS), so every team-* selector below follows the choice. */
  --a1: #1d4ed8; --a2: #38bdf8; --a-glow: #14224a;
  --b1: #b91c1c; --b2: #f87171; --b-glow: #3a1414;
  --good: #34d399;
  --bad: #f87171;
  --accent: #a78bfa;
  --radius: 16px;
  /* Acting-team theme: neutral purple by default, overridden by body.team-A/B.
     The whole screen (background glow, primary buttons, player, pill) follows
     these, so a phone hand-over is obvious at a glance. */
  --t1: #7c3aed;
  --t2: #a855f7;
  --glow: #1c2133;
}
body.team-A { --t1: var(--a1); --t2: var(--a2); --glow: var(--a-glow); }
body.team-B { --t1: var(--b1); --t2: var(--b2); --glow: var(--b-glow); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* During play every screen is designed to fit the viewport — no page scrolling.
   Setup (playlist search results) and the fatal screen (no data-phase) still scroll. */
body[data-phase]:not([data-phase='setup']) { overflow: hidden; }

/* The hidden attribute must always win, even over elements styled display:flex
   (without this, the scoreboard overlay and top bar can never be hidden). */
[hidden] { display: none !important; }

body {
  background: radial-gradient(1200px 800px at 50% -10%, var(--glow), var(--bg)) fixed;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}

/* main fills the space under the topbar; the game board flexes to exactly fit
   it (no page scroll), while setup and other screens scroll within main. */
main {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 10px 14px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
main > section { flex: 0 0 auto; }

/* ---------- Header ---------- */
/* Everything ambient lives here: team chips (cards·tokens, acting team lit),
   the mystery-song play/pause, and the scoreboard button. */
#topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 55px; /* tallest content (play button) — bar must never change height, the board below must not move */
  background: rgba(13, 15, 22, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 800; letter-spacing: 0.02em; flex: 1; }

.topbar-chips { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
/* A team chip carries no name — its coloured border IS the team. Contents:
   the card count sitting on a mini playing card, the token count on a coin. */
.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  font: inherit;
  white-space: nowrap;
  min-width: 0;
  cursor: default;
}
.chip.team-A { border-color: var(--a2); }
.chip.team-B { border-color: var(--b2); }
.chip.on { background: linear-gradient(135deg, var(--t1), var(--t2)); }
.n-card, .n-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}
.n-card {
  min-width: 16px;
  padding: 0 3px;
  border-radius: 4px;
  background: linear-gradient(160deg, #fdfdff, #c9d1e2);
  color: #1b2130;
  box-shadow: inset 0 0 0 1px rgba(15, 20, 35, 0.35);
}
.n-coin {
  min-width: 21px;
  padding: 0 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #eab308 70%, #b45309);
  color: #422006;
  box-shadow: inset 0 0 0 1px rgba(120, 70, 0, 0.5);
}

/* Reveal: each team that placed gets its verdict pulsed on its chip border
   (replaces the old ✓/✗ chips in the reveal row); tapping the chip overturns.
   Both animate when a challenge ran. The static border + ✓/✗ mark keep the
   verdict readable if animations are off (prefers-reduced-motion). */
.chip .vmark { font-weight: 900; font-size: 0.85rem; line-height: 1; }
.chip.verdict-good, .chip.verdict-bad { cursor: pointer; }
.chip.verdict-good { border-color: var(--good); animation: pulse-good 1.2s ease-in-out infinite; }
.chip.verdict-bad { border-color: var(--bad); animation: pulse-bad 1.2s ease-in-out infinite; }
.chip.verdict-good .vmark { color: var(--good); }
.chip.verdict-bad .vmark { color: var(--bad); }
.chip.on .vmark { color: #fff; }
@keyframes pulse-good {
  0%, 100% { border-color: var(--good); box-shadow: 0 0 3px color-mix(in srgb, var(--good) 50%, transparent); }
  50% { border-color: var(--good); box-shadow: 0 0 15px var(--good); }
}
@keyframes pulse-bad {
  0%, 100% { border-color: var(--bad); box-shadow: 0 0 3px color-mix(in srgb, var(--bad) 50%, transparent); }
  50% { border-color: var(--bad); box-shadow: 0 0 15px var(--bad); }
}
@media (prefers-reduced-motion: reduce) {
  .chip.verdict-good, .chip.verdict-bad, #btn-embed-toggle.playing { animation: none; }
}

.pbar { display: flex; align-items: center; gap: 6px; }
#btn-embed-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--t1), var(--t2));
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
#btn-embed-toggle:disabled { opacity: 0.45; cursor: default; }
#btn-embed-toggle:active:not(:disabled) { transform: scale(0.94); }
/* Neon pulse in the acting team's colour while the song is audibly playing. */
#btn-embed-toggle.playing { animation: neon 1.5s ease-in-out infinite; }
@keyframes neon {
  0%, 100% {
    box-shadow: 0 0 4px var(--t2), 0 0 11px color-mix(in srgb, var(--t2) 75%, transparent),
      0 3px 10px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 7px var(--t2), 0 0 22px var(--t2), 0 3px 10px rgba(0, 0, 0, 0.35);
  }
}
.ptime { color: var(--muted); font-size: 0.72rem; font-weight: 700; white-space: nowrap; min-width: 4ch; }

.chip-btn {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* ---------- Generic ---------- */
.hero { text-align: center; padding: 36px 0 8px; }
.hero h1 { font-size: 2.3rem; margin: 0 0 8px; }
.hero h2 { font-size: 1.7rem; margin: 0 0 8px; }
.hero p { color: var(--muted); margin: 0; }
.hero-emoji { font-size: 3.4rem; line-height: 1; margin-bottom: 8px; }

.lede { color: var(--muted); text-align: center; margin: 10px 0 14px; }
.hint { color: var(--muted); font-size: 0.8rem; text-align: center; line-height: 1.5; }
.hint-inline { color: var(--muted); font-size: 0.8em; }
code { background: var(--panel-2); border-radius: 6px; padding: 1px 6px; font-size: 0.9em; }

.btn {
  display: block;
  width: 100%;
  min-height: 50px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 18px;
  margin: 10px 0;
}
.btn.primary { background: linear-gradient(135deg, var(--t1), var(--t2)); border: none; color: #fff; }
.btn.big { min-height: 64px; font-size: 1.3rem; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.danger { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.35); color: var(--bad); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* Inline team swatch — stands in for a team name everywhere text did. The
   white ring keeps it readable on team-gradient primary buttons. */
.tdot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  vertical-align: -1px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.tdot.team-A { background: linear-gradient(135deg, var(--a1), var(--a2)); }
.tdot.team-B { background: linear-gradient(135deg, var(--b1), var(--b2)); }
.tdot.big { width: 20px; height: 20px; vertical-align: -4px; }

/* ---------- Setup form ---------- */
/* Teams vs Solo: picked before anything else, so it sits above the Play button. */
.mode-seg {
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 4px 0 14px;
}
.mode-seg button {
  flex: 1;
  padding: 12px 10px;
  background: var(--panel-2);
  color: var(--muted);
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.mode-seg button.on { background: linear-gradient(135deg, var(--t1), var(--t2)); color: #fff; }

form label { display: block; margin: 12px 0; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
form input {
  width: 100%;
  margin-top: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 12px;
  padding: 13px;
  font-size: 1rem;
}
form input:focus { outline: 2px solid var(--accent); border-color: transparent; }
details.settings { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 14px 0; }
details.settings summary { cursor: pointer; font-weight: 700; }
details.settings .hint { text-align: left; }

/* Team colour pickers: one row of swatches per team; the other team's pick is
   disabled so the two teams can never look the same. */
.color-pick { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.color-pick .cp-label { color: var(--muted); font-size: 0.9rem; font-weight: 600; flex: 0 0 4.2em; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
}
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
.swatch:disabled { opacity: 0.25; cursor: default; }

.loader-row { display: flex; gap: 8px; margin: 10px 0; }
.loader-row input { flex: 1; margin-top: 0; min-width: 0; }
.loader-row .btn { width: auto; flex: 0 0 auto; margin: 0; min-height: 0; padding: 0 20px; }
#playlist-status { min-height: 1.2em; }
#playlist-status.ok { color: var(--good); }
#playlist-status.err { color: var(--bad); }

.result {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 6px 0;
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
}
.result small { color: var(--muted); display: block; margin-top: 2px; }

/* ---------- Timeline strip ---------- */
.tl-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 4px;
  margin: 12px 0;
}
.tl {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 8px;
  scrollbar-width: thin;
}

.tl-card {
  flex: 0 0 auto;
  width: 94px;
  background: linear-gradient(160deg, var(--panel-2), #141722);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.tl-card .tl-year { font-weight: 900; font-size: 1.35rem; }
.tl-card .tl-titles { width: 100%; min-width: 0; }
.tl-card .tl-title {
  color: var(--muted);
  font-size: 0.68rem;
  margin-top: 4px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-card.team-A .tl-year { color: var(--a2); }
.tl-card.team-B .tl-year { color: var(--b2); }

.slot {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.slot.selected { border: 2px solid var(--good); background: rgba(52, 211, 153, 0.18); color: var(--good); }
.slot.blocked { border: 2px solid var(--bad); color: var(--bad); }
.slot.marked { border: 2px solid #fff; background: rgba(255, 255, 255, 0.16); color: #fff; }
.slot:disabled { cursor: default; }

/* ---------- Game board ----------
   One layout per screen class:
   - base (phone portrait): only the timeline being played into, VERTICAL
     (cards wide and flat, slots are full-width pills), action stage at the
     bottom. Tap a + once to select, tap it again to lock.
   - phone landscape: same, but the timeline is a horizontal strip of narrow
     cards.
   - big screens (≥900px wide and ≥560px tall): the "table" — Team B's row wide
     across the top, Team A's across the bottom, both always visible; only the
     middle stage changes. The acting team's row border glows. */
#screen-board {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trow {
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--panel);
  padding: 4px;
  min-height: 0;
  display: flex;
}
.trow.team-A.acting { border-color: var(--a2); box-shadow: 0 0 16px color-mix(in srgb, var(--a2) 30%, transparent); }
.trow.team-B.acting { border-color: var(--b2); box-shadow: 0 0 16px color-mix(in srgb, var(--b2) 30%, transparent); }
#stage {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
#stage .btn, #reveal-box .btn { margin: 0; }
#reveal-box { display: flex; flex-direction: column; gap: 8px; }
#reveal-box .answer, #reveal-box .verdict-row { margin: 0; }

/* Phones: show only the timeline in play; on the reveal, none at all. */
.trow:not(.focus) { display: none; }
.trow.focus { flex: 1; }
body[data-phase='reveal'] .trow { display: none; }

/* Vertical timeline (phone portrait base) */
#screen-board .tl {
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 6px;
  padding: 6px;
}
/* Center the cards inside the border when they fit, without breaking scroll
   (justify-content:center would clip the start once content overflows). */
#screen-board .tl > :first-child { margin-top: auto; }
#screen-board .tl > :last-child { margin-bottom: auto; }
#screen-board .tl-card {
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 7px 12px;
}
#screen-board .tl-card .tl-year { font-size: 1.1rem; flex: 0 0 3.1em; }
#screen-board .tl-card .tl-title { font-size: 0.7rem; margin: 0; line-height: 1.35; }
#screen-board .slot {
  width: auto;
  align-self: stretch;
  height: 34px;
  border-radius: 10px;
  font-size: 1.05rem;
}

/* ---------- Big song card (starter + reveal) ---------- */
.big-card {
  background: linear-gradient(160deg, #242a3d, var(--panel));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 16px;
  text-align: center;
  margin: 14px 0;
}
.big-year { font-size: 4.2rem; font-weight: 900; line-height: 1; }
.big-song { color: var(--muted); margin-top: 12px; font-size: 1.05rem; line-height: 1.4; }
.big-song b { color: var(--ink); }

/* ---------- Spotify embed ---------- */
/* The embed iframe stays collapsed to zero height at all times (never
   display:none — that could unload it); play/pause is the topbar .pbar button,
   driven through Spotify's iFrame API. Only `.fallback` (API script
   unreachable) and `.stuck` (scripted playback blocked) expand it, with an
   opaque cover clipped open at the bottom-right corner where the embed's own
   play button lives, as a last resort. */
#player {
  --hole-w: 150px; /* generous: the embed's play button roams this corner */
  --hole-h: 96px;
  margin: 0;
}
.shroud {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  height: 0; /* collapsed — audio keeps playing */
}
.shroud iframe { width: 100%; height: 152px; border: 0; display: block; }
#player.fallback .shroud,
#player.stuck .shroud { height: 152px; margin: 8px 0; }

.cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #242a3d, #171a24);
}

/* Corner cut-out modes: clip the cover into an L-shape so the embed's own
   play button is reachable (clip-path also opens hit-testing in the hole). */
#player.fallback .cover,
#player.stuck .cover {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--hole-h)),
    calc(100% - var(--hole-w)) calc(100% - var(--hole-h)),
    calc(100% - var(--hole-w)) 100%,
    0 100%
  );
}
.hole-cue {
  /* dashed outline around the exposed corner as a "tap here" cue */
  display: none;
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: calc(var(--hole-w) - 14px);
  height: calc(var(--hole-h) - 14px);
  border: 2px dashed rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  pointer-events: none;
}
#player.fallback .hole-cue,
#player.stuck .hole-cue { display: block; }

/* ---------- Reveal ---------- */
.answer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(160deg, #242a3d, var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 12px 0;
}
.ans-year { font-size: 2.4rem; font-weight: 900; line-height: 1; flex: 0 0 auto; }
.ans-song { color: var(--muted); font-size: 0.95rem; line-height: 1.35; min-width: 0; }
.ans-song b { color: var(--ink); }

/* One row: only the bonus-token picker — verdicts pulse on the topbar chips. */
.verdict-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.coin { font-size: 1.05rem; }

.seg { display: flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); flex: 0 0 auto; }
.seg button {
  padding: 9px 14px;
  background: transparent;
  color: var(--muted);
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seg button.on { background: var(--accent); color: #17092b; }

/* ---------- Overview overlay ---------- */
#overview {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.overview-panel {
  background: var(--panel);
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 520px;
  max-height: 88dvh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px 24px;
}
.overview-head { display: flex; justify-content: space-between; align-items: center; }
.overview-head h2 { margin: 0; font-size: 1.25rem; }
.ov-team { margin: 14px 0; }
.ov-team-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ov-team-head .stats { color: var(--muted); font-size: 0.82rem; }

/* ---------- How to play (interactive tutorial overlay) ----------
   Same fixed/backdrop pattern as #overview. Base (phone): bottom sheet, one
   .howto-step visible at a time, Back/Next + dots to move between them. */
#howto {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(4px);
  z-index: 55;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.howto-panel {
  background: var(--panel);
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 520px;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px 20px;
}
.howto-body { flex: 1; min-height: 0; overflow-y: auto; }
.howto-step { display: none; text-align: center; padding: 6px 4px 10px; }
.howto-step.active { display: block; }
.howto-visual { display: flex; align-items: center; justify-content: center; min-height: 90px; margin-bottom: 8px; }
.howto-visual .hero-emoji { font-size: 3rem; margin: 0; }
.howto-visual .tl-wrap { width: 100%; margin: 0; }
.howto-step h3 { margin: 8px 0 6px; font-size: 1.1rem; }
.howto-step p { color: var(--muted); margin: 0; line-height: 1.5; font-size: 0.92rem; }
.howto-nav { flex: 0 0 auto; padding-top: 10px; }
.howto-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 10px; }
.howto-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--line);
  cursor: pointer;
}
.howto-dots button.on { background: var(--accent); }
.howto-nav-btns { display: flex; justify-content: space-between; gap: 10px; }
.howto-nav-btns .btn { margin: 0; flex: 1; }
.howto-nav-btns .btn:only-child { flex: 0 0 auto; margin: 0 auto; }

/* ---------- Game over ----------
   Each team gets its own board: a scrollable recap of every card they won,
   linking out to Spotify. A card is "filled" solid when that team also named
   the title & artist for it (the bonus token); otherwise it's an outline —
   correct on the year, but the bonus wasn't claimed. Songs nobody placed
   correctly are tucked behind the "nobody cracked" toggle. Sized to always
   fit the viewport (no page scroll) — the boards/lists scroll internally. */
#screen-gameOver { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
#screen-gameOver .hero { padding: 10px 0 0; flex: 0 0 auto; }
#screen-gameOver .btn-row { flex: 0 0 auto; }

.win-boards { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.win-boards.solo { max-width: 420px; width: 100%; margin: 0 auto; }

.win-panel {
  flex: 1;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.win-panel.team-A { border-color: color-mix(in srgb, var(--a2) 45%, var(--line)); }
.win-panel.team-B { border-color: color-mix(in srgb, var(--b2) 45%, var(--line)); }
.win-panel.winner.team-A { border-color: var(--a2); box-shadow: 0 0 18px color-mix(in srgb, var(--a2) 35%, transparent); }
.win-panel.winner.team-B { border-color: var(--b2); box-shadow: 0 0 18px color-mix(in srgb, var(--b2) 35%, transparent); }

.win-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex: 0 0 auto; }
.win-panel-name { font-weight: 800; }
.win-panel-stats { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }

.win-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
}
/* Center a short list in the available space without breaking scroll once it
   overflows (plain justify-content:center would clip the start on overflow). */
.win-list > :first-child { margin-top: auto; }
.win-list > :last-child { margin-bottom: auto; }

.win-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: inherit;
  text-decoration: none;
  flex: 0 0 auto;
}
.win-card .wc-year { font-weight: 900; font-size: 0.92rem; flex: 0 0 2.8em; }
.win-card .wc-titles { min-width: 0; display: flex; flex-direction: column; gap: 0; flex: 1; }
.win-card .wc-title {
  font-size: 0.74rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-card .wc-artist {
  font-size: 0.66rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-card .wc-badge { flex: 0 0 auto; width: 1.1em; text-align: center; font-size: 0.85rem; }
.win-card:active { transform: scale(0.98); }

/* Hollow cards still hint at their team; filled ones (below) go solid. */
.win-card.team-A { border-color: color-mix(in srgb, var(--a2) 30%, var(--line)); }
.win-card.team-B { border-color: color-mix(in srgb, var(--b2) 30%, var(--line)); }

/* Filled = that team also named the title & artist for this card. */
.win-card.team-A.filled {
  border-color: var(--a2);
  background: linear-gradient(120deg, color-mix(in srgb, var(--a1) 55%, transparent), color-mix(in srgb, var(--a2) 35%, transparent));
}
.win-card.team-B.filled {
  border-color: var(--b2);
  background: linear-gradient(120deg, color-mix(in srgb, var(--b1) 55%, transparent), color-mix(in srgb, var(--b2) 35%, transparent));
}
.win-card.filled .wc-artist { color: rgba(255, 255, 255, 0.85); }
.win-card.filled .wc-badge { color: #fff; }
.win-card.missed { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.win-card.missed .wc-badge { color: var(--bad); }

.win-missed { flex: 0 0 auto; }
.win-missed-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.win-missed-toggle .wm-chevron { transition: transform 0.2s ease; }
.win-missed-toggle.open .wm-chevron { transform: rotate(180deg); }
.win-missed-list {
  max-height: 26dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  scrollbar-width: thin;
}

/* Solo has one board — no side-by-side ambiguity, so the overview panel
   (also single-team there) gets the same centred, capped width. */
body.solo #overview-body { max-width: 420px; margin: 0 auto; }

/* Desktop / tablet: same layout, just more room for the timeline cards. */
@media (min-width: 700px) {
  main { max-width: 760px; }
  .overview-panel { max-width: 760px; }
  .hero { padding-top: 56px; }
  /* Win screen: boards side by side like the table layout below. */
  .win-boards:not(.solo) { flex-direction: row; }
  .win-boards:not(.solo) .win-panel { min-height: 0; }
}

/* Big screens (PC / TV) AND tablets held in portrait (an iPad or similar is
   plenty big enough for the table layout even though it's narrower than a
   PC/TV window — phones never reach the 600px width leg of this test, so
   this can't misfire on a tall phone). */
@media (min-width: 900px) and (min-height: 560px), (min-width: 600px) and (min-height: 800px) {
  main { max-width: 1320px; }
  #screen-board { gap: 14px; }
  #screen-board .trow { display: flex; flex: 0 0 auto; align-items: stretch; }
  #trow-B { order: 0; }
  #stage { order: 1; flex: 1; min-height: 0; align-items: center; justify-content: center; gap: 12px; }
  #trow-A { order: 2; }
  #stage > .btn, #stage > .btn-row, #reveal-box { width: min(100%, 480px); }
  #screen-board .tl {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 10px;
    min-height: 128px;
  }
  #screen-board .tl > :first-child { margin-top: 0; margin-left: auto; }
  #screen-board .tl > :last-child { margin-bottom: 0; margin-right: auto; }
  #screen-board .tl-card {
    width: 104px;
    flex: 0 0 auto;
    flex-direction: column;
    text-align: center;
    gap: 0;
    padding: 10px 8px;
  }
  #screen-board .tl-card .tl-year { font-size: 1.4rem; flex: 0 0 auto; }
  #screen-board .tl-card .tl-title { font-size: 0.68rem; margin-top: 4px; }
  #screen-board .slot { width: 46px; height: 46px; border-radius: 50%; align-self: center; font-size: 1.35rem; }

  /* How to play: a centered floating dialog instead of a mobile bottom sheet. */
  #howto { align-items: center; }
  .howto-panel { max-width: 620px; max-height: 80dvh; border-radius: 20px; }
}

/* Phone in landscape: short viewport — compact everything vertical so the
   timeline + one action button fit without scrolling, and use the notch-safe
   full width. */
@media (orientation: landscape) and (max-height: 520px) {
  main {
    max-width: none;
    padding: 6px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left));
  }
  #topbar {
    padding: 4px max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left));
  }
  .hero { padding: 10px 0 4px; }
  .hero h1 { font-size: 1.8rem; margin-bottom: 4px; }
  .hero h2 { font-size: 1.4rem; }
  .hero-emoji { font-size: 2.2rem; margin-bottom: 4px; }
  .btn { min-height: 42px; margin: 8px 0; padding: 8px 18px; font-size: 0.95rem; }
  .btn.big { min-height: 50px; font-size: 1.15rem; }
  .tl-wrap { margin: 8px 0; }
  .big-card { padding: 12px 16px; margin: 8px 0; }
  .big-year { font-size: 2.6rem; }
  .big-song { margin-top: 6px; font-size: 0.95rem; }
  .answer { padding: 10px 16px; margin: 8px 0; }
  .ans-year { font-size: 2rem; }
  .verdict-row { margin: 8px 0; }

  /* Board: horizontal strip of narrow cards — more of them on screen. Cards
     stretch to the full row height, so titles get room to wrap. */
  #screen-board { gap: 8px; }
  #screen-board .tl {
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    padding: 6px 8px;
  }
  #screen-board .tl > :first-child { margin-top: 0; margin-left: auto; }
  #screen-board .tl > :last-child { margin-bottom: 0; margin-right: auto; }
  #screen-board .tl-card {
    width: 78px;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0;
    padding: 6px;
  }
  #screen-board .tl-card .tl-year { font-size: 1rem; flex: 0 0 auto; }
  #screen-board .tl-card .tl-title {
    font-size: 0.6rem;
    margin-top: 3px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #screen-board .slot { width: 38px; height: 38px; border-radius: 50%; align-self: center; font-size: 1.1rem; }
  #stage { gap: 6px; }

  /* Winner screen must fit 412px-high viewports with no scroll: boards go
     side by side (little vertical room to stack them) and everything shrinks. */
  #screen-gameOver { gap: 5px; }
  #screen-gameOver .hero { padding: 2px 0; }
  #screen-gameOver .hero-emoji { font-size: 1.8rem; margin-bottom: 0; }
  #screen-gameOver .hero h2 { font-size: 1.25rem; margin-bottom: 2px; }
  #screen-gameOver .hero p { font-size: 0.8rem; }
  .win-boards { flex-direction: row; gap: 6px; }
  .win-panel { padding: 6px 8px; }
  .win-panel-head { margin-bottom: 4px; }
  .win-panel-stats { font-size: 0.7rem; }
  .win-card { padding: 4px 8px; gap: 6px; }
  .win-card .wc-year { font-size: 0.8rem; flex-basis: 2.4em; }
  .win-card .wc-title { font-size: 0.66rem; }
  .win-card .wc-artist { font-size: 0.6rem; }
  .win-missed-toggle { padding: 6px 12px; font-size: 0.75rem; }
  .win-missed-list { max-height: 18dvh; }
  #screen-gameOver .btn { min-height: 40px; margin: 5px 0; }

  /* How to play: shrink so a step fits a ~412px-tall viewport without the
     panel itself needing to scroll (the body still can, just in case). */
  .howto-panel { max-height: 94dvh; padding: 10px 14px 14px; }
  .howto-visual { min-height: 60px; margin-bottom: 4px; }
  .howto-visual .hero-emoji { font-size: 2rem; }
  .howto-step h3 { margin: 4px 0; font-size: 1rem; }
  .howto-step p { font-size: 0.82rem; }
  .howto-nav { padding-top: 6px; }
  .howto-dots { margin-bottom: 6px; }
}