:root {
  /* App theme, mapped onto the Backseat OC tokens in tokens.css. */
  --bg: var(--bs-night);
  --panel: var(--bs-surface);
  --panel-2: var(--bs-surface-raised);
  --line: var(--bs-border);
  --text: var(--bs-text);
  --muted: var(--bs-text-muted);
  --amber: var(--bs-flag);
  --amber-dim: rgba(255, 199, 44, .45);
  --green: var(--bs-correct);
  --red: var(--bs-miss);
  --yellow: #F2D479; /* penalty flags and partial credit; the brand accent stays --bs-flag */
  --blue: var(--bs-scrimmage);
  --radius: var(--bs-radius-lg);
  --display: var(--bs-font-display);
  --body: var(--bs-font-body);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; font-synthesis: none; }
body { min-height: 100vh; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 16px 16px 64px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.display { font-family: var(--display); letter-spacing: .02em; text-transform: uppercase; }

/* ---------- Top bar ---------- */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; }
.brand span { color: var(--amber); }
.back { padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.back:hover { color: var(--text); }
.spacer { flex: 1; }

/* ---------- Game list ---------- */
.hero { margin: 8px 0 20px; }
.hero h1 { font-family: var(--display); font-size: 34px; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .03em; }
.hero p { margin: 0; color: var(--muted); }
.weeknav { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.weeknav button { width: 36px; height: 36px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 18px; }
.weeknav .label { font-family: var(--display); font-size: 20px; text-transform: uppercase; min-width: 120px; text-align: center; }
.group-title { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-size: 14px; margin: 20px 0 8px; }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.game-card { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 8px; transition: border-color .15s, transform .15s; }
.game-card:hover { border-color: var(--amber-dim); transform: translateY(-1px); }
.game-card .teams { display: grid; gap: 6px; }
.team-row { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.swatch { width: 10px; height: 22px; border-radius: 3px; flex: none; }
.status { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255,96,96,.7); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,96,96,.6); } 70% { box-shadow: 0 0 0 8px rgba(255,96,96,0); } 100% { box-shadow: 0 0 0 0 rgba(255,96,96,0); } }
.tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: var(--panel-2); color: var(--muted); }
.tag.live { background: rgba(255,96,96,.15); color: var(--red); }
.tag.replay { background: rgba(90,169,255,.14); color: var(--blue); }

/* ---------- Scoreboard ---------- */
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #05080f; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; position: relative; overflow: hidden; }
.sb-team { display: flex; align-items: center; gap: 10px; }
.sb-team.home { justify-content: flex-end; }
.sb-abbr { white-space: nowrap; font-family: var(--display); font-size: 22px; font-weight: 600; }
.sb-score { font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--amber); min-width: 44px; text-align: center; text-shadow: 0 0 12px rgba(255,176,32,.35); }
.sb-mid { text-align: center; padding: 0 12px; }
.sb-clock { font-family: var(--display); font-size: 18px; color: var(--amber); }
.sb-mode { margin-top: 4px; }
/* Field view (gamecast strip) inside the scoreboard */
:root { --field: var(--bs-turf); --field-line: rgba(244,241,232,.25); --redzone: rgba(255,107,91,.14); --los-line: var(--bs-scrimmage); --fd-line: var(--bs-first-down); }
.fv { grid-column: 1 / -1; margin-top: 12px; display: grid; gap: 8px; }
.fv-svg { width: 100%; height: auto; display: block; border-radius: 8px; overflow: hidden; }
.fv-num { fill: rgba(255,255,255,.55); font-family: var(--display); font-weight: 600; text-anchor: middle; }
.fv-ez { fill: #fff; font-family: var(--display); font-weight: 700; text-anchor: middle; dominant-baseline: middle; letter-spacing: .1em; }
.fv-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fv-poss { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.fv-poss .swatch { height: 16px; width: 8px; }
.fv-dd { font-family: var(--display); font-size: 20px; text-transform: uppercase; letter-spacing: .02em; color: var(--amber); }
.fv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-left: auto; }
.fv-chip { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: var(--panel-2); color: var(--text); }
.fv-chip.red { background: rgba(255,96,96,.18); color: var(--red); }
.fv-chip.dim { color: var(--muted); border: 1px dashed var(--line); background: none; }
.fv-legend { display: flex; gap: 14px; }
.fv-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
@media (max-width: 520px) { .fv-meta { margin-left: 0; } .fv-dd { font-size: 18px; } }

.ball { display: inline-block; width: 14px; height: 9px; background: #a0612a; border-radius: 50%; border: 1px solid #5c3413; vertical-align: middle; }

/* ---------- Layout ---------- */
.layout { display: grid; gap: 14px; }
@media (min-width: 900px) { .layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.panel h3 { margin: 0 0 10px; font-family: var(--display); font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }

/* ---------- Situation ---------- */
.situation { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sit-dd { font-family: var(--display); font-size: 30px; font-weight: 600; text-transform: uppercase; }
.sit-meta { color: var(--muted); font-size: 14px; }
.expected { font-size: 12px; color: var(--muted); border: 1px dashed var(--line); padding: 2px 6px; border-radius: 6px; }

/* ---------- Guess pad ---------- */
.pad { display: grid; gap: 10px; }
.pad-row { display: grid; gap: 8px; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.opt { position: relative; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 8px 12px; display: grid; gap: 2px; justify-items: center; transition: background .12s, border-color .12s, transform .08s; }
.opt:active { transform: scale(.98); }
.opt:hover { border-color: #3a4b6d; }
.opt .name { font-family: var(--display); font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.opt.big .name { font-size: 30px; }
.opt.big { padding: 22px 8px 18px; }
.opt .pts { font-size: 13px; color: var(--amber); font-weight: 600; }
.opt .pct { font-size: 11px; color: var(--muted); }
.opt.sel { background: rgba(255,176,32,.12); border-color: var(--amber); }
.opt.sel .name { color: var(--amber); }
.pad-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 2px; }
.actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.lock { background: var(--amber); color: #1a1100; border-radius: 12px; padding: 16px; font-family: var(--display); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.lock:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
.lock small { display: block; font-family: var(--body); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.skip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; color: var(--muted); font-weight: 600; }
.skip:hover { color: var(--text); }

/* ---------- Locked / waiting ---------- */
.locked { display: grid; gap: 12px; }
.locked-guess { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel-2); border: 1px solid var(--amber-dim); border-radius: 12px; padding: 14px; }
.locked-guess .g { font-family: var(--display); font-size: 22px; text-transform: uppercase; }
.locked-guess .p { font-family: var(--display); font-size: 22px; color: var(--amber); }
.waiting { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 6px 2px; }
.dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 3px; animation: blink 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .2s; } .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.reveal { background: var(--green); color: #00210f; border-radius: 12px; padding: 18px; font-family: var(--display); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; animation: glow 1.4s ease-in-out infinite alternate; }
.reveal small { display: block; font-family: var(--body); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
@keyframes glow { from { box-shadow: 0 0 0 rgba(54,208,127,0); } to { box-shadow: 0 0 22px rgba(54,208,127,.35); } }
.linkbtn { color: var(--muted); text-decoration: underline; font-size: 13px; justify-self: start; }

/* ---------- Result card ---------- */
.result { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 6px; }
.result.fresh { animation: pop .35s ease-out; }
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.result .head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.result .verdict { font-family: var(--display); font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.result .gain { font-family: var(--display); font-size: 30px; font-weight: 700; }
.result.correct { border-color: rgba(54,208,127,.6); background: linear-gradient(180deg, rgba(54,208,127,.12), var(--panel)); }
.result.correct .verdict, .result.correct .gain { color: var(--green); }
.result.partial { border-color: rgba(255,209,102,.5); background: linear-gradient(180deg, rgba(255,209,102,.1), var(--panel)); }
.result.partial .verdict, .result.partial .gain { color: var(--yellow); }
.result.wrong .verdict { color: var(--red); }
.result .vs { font-size: 14px; }
.result .vs b { font-weight: 600; }
.result .ptext { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ---------- Stats + history ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat { background: var(--panel-2); border-radius: 10px; padding: 10px 8px; text-align: center; }
.stat .v { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--amber); }
.stat .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.history { display: grid; gap: 6px; max-height: 520px; overflow: auto; margin-top: 6px; }
.h-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 10px; border-radius: 10px; background: var(--panel-2); font-size: 13px; }
.h-item .when { color: var(--muted); font-size: 12px; }
.h-item .pts { grid-row: span 2; align-self: center; font-family: var(--display); font-size: 20px; }
.h-item.correct .pts { color: var(--green); }
.h-item.partial .pts { color: var(--yellow); }
.h-item.wrong .pts { color: var(--red); }
.h-item.muted .pts { color: var(--muted); }

/* ---------- Settings ---------- */
.settings { display: grid; gap: 10px; margin-top: 14px; }
.toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--amber); }
.danger { color: var(--red); font-size: 13px; text-decoration: underline; justify-self: start; }

/* ---------- Join ---------- */
.join { display: grid; gap: 8px; }
.join-opt { text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.join-opt:hover { border-color: var(--amber); }
.join-opt .dd { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.rules { font-size: 14px; color: var(--muted); line-height: 1.55; }
.rules b { color: var(--text); }

.loading, .error { padding: 40px 0; text-align: center; color: var(--muted); }
.error { color: var(--red); }
.feed { font-size: 12px; color: var(--muted); margin-top: 10px; display: flex; gap: 6px; align-items: center; }

@media (max-width: 520px) {
  .sit-dd { font-size: 26px; }
  .sb-score { font-size: 28px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Play events */
.ev-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.ev-row.compact { grid-column: 1 / -1; margin-top: 4px; }
.ev { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.ev-row.compact .ev { font-size: 11px; padding: 2px 6px; }
.ev.score { background: rgba(255,176,32,.16); border-color: var(--amber-dim); color: var(--amber); }
.ev.turnover { background: rgba(255,96,96,.15); border-color: rgba(255,96,96,.45); color: var(--red); }
.ev.flag { background: rgba(255,209,102,.16); border-color: rgba(255,209,102,.55); color: var(--yellow); }
.ev.flag::before { content: ''; display: inline-block; width: 8px; height: 10px; background: var(--yellow); margin-right: 6px; vertical-align: -1px; clip-path: polygon(0 0, 100% 15%, 0 55%); }
.ev.flag.muted-flag { opacity: .6; }
.ev.good { color: var(--green); }
.ev.bad { color: var(--red); }
.result.flagged, .h-item.flagged { box-shadow: inset 4px 0 0 var(--yellow); }
.result.passed .verdict { color: var(--text); font-size: 22px; }

/* TV sync */
.join-opt.primary { border-color: var(--amber); background: rgba(255,176,32,.08); }
.join-opt.primary .dd { color: var(--amber); }
.syncbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 8px 12px; border-radius: 10px; margin: -6px 0 14px; border: 1px solid var(--line); background: var(--panel); }
.syncbar .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.syncbar.ok .dot { background: var(--green); }
.syncbar.warn { border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.08); }
.syncbar.warn .dot { background: var(--yellow); }
.syncbar .linkbtn { margin-left: auto; }
.panel.sync { display: grid; gap: 12px; margin-bottom: 14px; border-color: var(--amber-dim); }
.panel.sync p { margin: 0; font-size: 15px; }
.sync-step { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); font-weight: 600; }
.snap-btn { background: var(--amber); color: #1a1100; border-radius: 16px; padding: 34px 16px; font-family: var(--display); font-size: 40px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.snap-btn:active { transform: scale(.98); }
.sync-cand { display: grid; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.sync-actions { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.sync-actions .skip { padding: 12px 8px; }

/* Halftime / new-half banner */
.brk-banner { font-size: 14px; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; background: rgba(90,169,255,.1); border: 1px solid rgba(90,169,255,.35); }
.brk-banner b { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--blue); }

/* Which snap a call is for + boldness meter */
.locked-guess { align-items: flex-start; }
.lg-main { display: grid; gap: 5px; min-width: 0; }
.for { font-size: 13px; color: var(--muted); }
.for b { color: var(--text); font-weight: 600; }
.risk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.risk b { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.risk .meter { display: inline-flex; gap: 2px; }
.risk .meter i { width: 7px; height: 12px; border-radius: 2px; background: var(--line); }
.risk.safe .meter i.on, .risk-chip.safe { --rc: var(--green); }
.risk.even .meter i.on, .risk-chip.even { --rc: #9fd36a; }
.risk.bold .meter i.on, .risk-chip.bold { --rc: var(--yellow); }
.risk.risky .meter i.on, .risk-chip.risky { --rc: #ff9a3c; }
.risk.long .meter i.on, .risk-chip.long { --rc: var(--red); }
.risk .meter i.on { background: var(--rc); }
.risk.safe b { color: var(--green); } .risk.even b { color: #9fd36a; } .risk.bold b { color: var(--yellow); }
.risk.risky b { color: #ff9a3c; } .risk.long b { color: var(--red); }
.pad > .risk { padding: 2px 2px 0; }
.risk-chip { justify-self: start; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; color: var(--rc); border: 1px solid var(--rc); }

/* Reveal timing */
.reveal.pending { background: var(--panel-2); color: var(--text); border: 1px solid var(--green); animation: none; }
.syncbar .hold { flex-basis: 100%; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; padding-left: 16px; }
.syncbar .hold b { color: var(--text); }
.nudge { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
.nudge:hover { border-color: var(--amber); }

/* League tabs + college filters */
.league-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); margin-top: 6px; }
.league-tabs button { padding: 8px 16px; border-radius: 9px; font-family: var(--display); font-size: 16px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.league-tabs button.on { background: var(--amber); color: #1a1100; }
.cfb-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 4px; }
.cfb-filter button { padding: 7px 12px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.cfb-filter button.on { border-color: var(--amber); color: var(--amber); }
.cfb-filter button:disabled { opacity: .4; cursor: default; }
.cfb-filter input { flex: 1; min-width: 160px; padding: 8px 12px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 14px; }
.rank { font-family: var(--display); font-size: 12px; color: var(--amber); margin-right: 2px; }

/* Guided play: stable controls, optional detail, comfortable touch targets. */
button, summary, .back, .lock, .linkbtn { min-height: 44px; }
button:disabled { cursor: not-allowed; }
a.lock, a.back { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
summary { cursor: pointer; display: list-item; align-content: center; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.practice-entry { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.practice-entry > div { flex: 1; min-width: 200px; }
.practice-entry p { margin-bottom: 0; }
.practice-wrap { max-width: 680px; }
.practice-heading { margin: 32px 0 20px; }
.practice-heading h1 { font-family: var(--display); font-size: clamp(30px, 6vw, 44px); margin-bottom: 8px; }
.practice-progress { display: flex; gap: 8px; margin-bottom: 20px; }
.practice-progress span { height: 4px; flex: 1; background: var(--line); border-radius: 4px; }
.practice-progress .on { background: var(--amber); }
.practice-panel { display: grid; gap: 16px; }
.practice-panel p { line-height: 1.6; margin: 0; }
.practice-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.practice-options .name { font-size: 19px; }
.practice-panel .result h2 { font-family: var(--display); font-size: 24px; }
.health-card { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 14px; font-size: 13px; }
.health-card p { color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
.health-card.offline, .health-card.stale, .health-card.timing { border-color: var(--yellow); }
.health-card.ready b, .health-card.waiting b, .health-card.break b { color: var(--green); }
.match-warning { padding: 10px; border: 1px solid var(--yellow); border-radius: 8px; line-height: 1.5; font-size: 13px; }
.grade-explanation { font-size: 14px; line-height: 1.5; }
.result-slot { margin-top: 14px; min-height: 120px; }
.result-slot .result { margin-bottom: 0; }
.secondary { margin-top: 14px; }
.secondary .panel { border: 0; padding: 14px 0 0; }
.secondary .rules { margin-top: 12px; }
.play-column { min-width: 0; }
.syncbar .hold { flex-wrap: wrap; }
.syncbar .nudge { min-width: 48px; }
@media (max-width: 600px) {
  .wrap { padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); }
  .game-wrap .scoreboard { padding: 8px 12px; margin-bottom: 10px; }
  .game-wrap .fv-svg { max-height: 90px; }
  .fv-legend, .fv-meta { display: none; }
  .syncbar { margin: 0 0 10px; padding: 8px 10px; }
  .syncbar .hold { padding-left: 0; }
  .health-card { align-items: flex-start; }
  .health-card .back { flex: none; padding: 8px; }
  .sync-actions { grid-template-columns: 1fr 1fr; }
  .sync-actions .lock { grid-column: 1 / -1; }
  .play-column > .panel { padding: 12px; }
  .actions { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 3; background: var(--panel); padding: 8px 0; border-radius: 12px; }
  .opt.big { padding: 14px 8px; }
  .opt .pct { display: none; }
  .pad > .risk, .locked-guess .risk { display: none; }
  .result-slot { min-height: 64px; }
  .practice-entry .lock { width: 100%; }
}
/* ---------- Backseat OC brand layer (backseat-oc-brand-kit/BRAND.md) ---------- */
/* Anton has one weight; Inter carries 400/600/700. */
.display, .brand, .hero h1, .weeknav .label, .group-title, .sb-abbr, .sb-score, .sb-clock, .fv-dd, .panel h3, .sit-dd,
.lock, .locked-guess .g, .locked-guess .p, .reveal, .result .verdict, .result .gain, .stat .v, .h-item .pts, .join-opt .dd,
.snap-btn, .brk-banner b, .league-tabs button, .rank, .practice-heading h1, .practice-panel .result h2, .prompt-title { font-weight: 400; }
a { color: var(--text); }
:focus-visible { outline: 3px solid var(--bs-chalk); outline-offset: 2px; }

/* Header: favicon mark + BACKSEAT OC wordmark, streak chip on the right */
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: var(--bs-text-title); letter-spacing: .01em; color: var(--text); text-decoration: none; min-height: 44px; }
.brand img { width: 36px; height: 36px; flex: none; }
.brand span { color: var(--bs-flag); }
.streak { font-size: 13px; font-weight: 700; color: var(--bs-flag); font-variant-numeric: tabular-nums; }
.streak.tick { animation: tick var(--bs-dur-reveal) var(--bs-ease); }
@keyframes tick { 40% { transform: scale(1.25); } }
.back { background: var(--bs-surface); border-color: var(--bs-border); }

/* Game list */
.hero h1 { font-size: var(--bs-text-hero); line-height: 1.05; letter-spacing: .01em; }
.hero p { color: var(--bs-text-secondary); }
.game-card:hover { border-color: var(--bs-text-muted); }
.tag.replay { background: var(--bs-turf); color: var(--bs-chalk); }
.league-tabs button.on { background: var(--bs-flag); color: var(--bs-text-on-flag); }
.group-title { font-family: var(--body); font-size: var(--bs-text-caption); font-weight: 700; letter-spacing: .14em; }

/* Game card: score row, field strip, situation */
.scoreboard { background: var(--bs-surface); border-color: var(--bs-border); border-radius: var(--bs-radius-lg); padding: 14px 16px; }
.sb-abbr, .sb-score { font-size: var(--bs-text-score); color: var(--text); text-shadow: none; font-variant-numeric: tabular-nums; }
.sb-clock { font-family: var(--body); font-size: var(--bs-text-caption); font-weight: 700; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fv-svg { border-radius: var(--bs-radius-sm); }
.fv-dd { color: var(--text); }
.fv-num { fill: rgba(244,241,232,.55); }
.fv-ez { fill: var(--bs-chalk); }

/* Prompt row */
.prompt { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.prompt-title { margin: 0; font-family: var(--display); font-size: var(--bs-text-hero); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.situation .sit-dd { font-size: var(--bs-text-title); }

/* Play grid */
.pad-row { gap: 10px; }
.opt { background: var(--bs-surface); border: 2px solid var(--bs-border); border-radius: var(--bs-radius-md); min-height: 64px; padding: 12px 10px;
  transition: background var(--bs-dur-fast) var(--bs-ease), border-color var(--bs-dur-fast) var(--bs-ease), color var(--bs-dur-fast) var(--bs-ease), transform var(--bs-dur-fast) var(--bs-ease); }
.opt:hover { border-color: var(--bs-text-muted); }
.opt .name { font-family: var(--body); font-size: var(--bs-text-body); font-weight: 700; text-transform: none; letter-spacing: 0; }
.opt.big .name { font-size: var(--bs-text-title); }
.opt.big { padding: 16px 10px; }
.opt .pts { font-size: var(--bs-text-caption); color: inherit; opacity: .8; font-weight: 600; font-variant-numeric: tabular-nums; }
.opt .pct { color: inherit; opacity: .7; }
.opt.sel, .opt[aria-pressed="true"] { background: var(--bs-flag); border-color: var(--bs-flag); color: var(--bs-text-on-flag); }
.opt.sel .name { color: inherit; }
.pad-label { font-size: var(--bs-text-caption); font-weight: 700; letter-spacing: .14em; }

/* CTA */
.lock { background: var(--bs-flag); color: var(--bs-text-on-flag); border-radius: var(--bs-radius-lg); min-height: 56px; font-size: var(--bs-text-title); letter-spacing: .04em;
  transition: transform var(--bs-dur-fast) var(--bs-ease), background var(--bs-dur-fast) var(--bs-ease); }
.lock:active:not(:disabled) { transform: scale(.97); }
.lock:disabled { background: var(--bs-surface-raised); color: var(--muted); }
.lock small { font-variant-numeric: tabular-nums; }
.skip { border-radius: var(--bs-radius-lg); }
.cta-locked { width: 100%; min-height: 56px; border-radius: var(--bs-radius-lg); background: var(--bs-chalk); color: var(--bs-text-on-flag);
  font-family: var(--display); font-size: 18px; text-transform: uppercase; letter-spacing: .04em; transition: transform var(--bs-dur-fast) var(--bs-ease); }
.cta-locked:active { transform: scale(.97); }

/* Locked call + reveal */
.locked-guess { background: var(--bs-surface-raised); border-color: var(--bs-border); }
.locked-guess .p { color: var(--bs-flag); font-variant-numeric: tabular-nums; }
.reveal { background: var(--bs-flag); color: var(--bs-text-on-flag); border-radius: var(--bs-radius-lg); animation: none; }
.reveal.pending { border-color: var(--bs-border); }
.dots span { background: var(--bs-chalk); }

/* Result reveal: flips in, then the call draws as a dashed route */
.result { background: var(--bs-surface); border-color: var(--bs-border); }
.result.fresh { animation: flip var(--bs-dur-reveal) var(--bs-ease); transform-origin: 50% 0; }
@keyframes flip { from { transform: perspective(600px) rotateX(-80deg); opacity: 0; } to { transform: none; opacity: 1; } }
.result .verdict, .result .gain { font-size: 28px; font-variant-numeric: tabular-nums; }
.result.correct { border-color: var(--bs-correct); background: var(--bs-surface); }
.result.correct .verdict, .result.correct .gain { color: var(--bs-correct); }
.result.partial { border-color: var(--bs-text-muted); background: var(--bs-surface); }
.result.partial .verdict, .result.partial .gain { color: var(--bs-chalk); }
.result.wrong { border-color: var(--bs-miss); }
.result.wrong .verdict, .result.wrong .gain { color: var(--bs-miss); }
.route { display: block; width: 120px; height: 28px; color: var(--muted); }
.result.correct .route { color: var(--bs-flag); }
.result.fresh .route { animation: draw var(--bs-dur-reveal) var(--bs-ease) both; animation-delay: 200ms; }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.stat .v { color: var(--text); font-variant-numeric: tabular-nums; }
.h-item.correct .pts { color: var(--bs-correct); }
.h-item.wrong .pts { color: var(--bs-miss); }

/* Sync + banners */
.snap-btn { background: var(--bs-flag); color: var(--bs-text-on-flag); border-radius: var(--bs-radius-xl); }
.sync-step { color: var(--muted); font-weight: 700; letter-spacing: .14em; }
.panel.sync { border-color: var(--bs-border); }
.join-opt.primary { border-color: var(--bs-flag); background: var(--bs-surface-raised); }
.join-opt.primary .dd { color: var(--text); }
.brk-banner { background: var(--bs-turf); border-color: var(--bs-border); }
.brk-banner b { color: var(--bs-chalk); }
.toggle input { accent-color: var(--bs-flag); }
.practice-progress .on { background: var(--bs-flag); }

/* Chalk Talk motif: X's and O's on Turf, for loading, empty and onboarding states only */
.chalk, .loading { background-color: var(--bs-turf); border-radius: var(--bs-radius-lg); color: var(--bs-chalk);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23F4F1E8' stroke-width='3' stroke-linecap='round' opacity='.13'%3E%3Cpath d='M14 14l16 16M30 14L14 30M74 74l16 16M90 74L74 90'/%3E%3Ccircle cx='92' cy='22' r='9'/%3E%3Ccircle cx='22' cy='92' r='9'/%3E%3C/svg%3E"); }
.loading { margin-top: 16px; }
.practice-entry.chalk { border-color: var(--bs-turf); }
.practice-entry.chalk .muted { color: var(--bs-text-secondary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .lock:active:not(:disabled), .cta-locked:active { transform: none; }
}