/* RIDE OR DIE — phone first, dark spec-card look. Safe areas, no horizontal scroll, tap targets ≥ 44 px. */
:root {
  --bg: #0a0c10; --panel: #11141b; --panel2: #171b24; --line: #262c38; --ink: #eef2f7; --muted: #8e98ab; --dim: #5f687a;
  --hot: #ff3d2e; --hot2: #ff7a1a; --gold: #ffc53d; --win: #22c55e; --close: #eab308; --lost: #ef4444;
  --display: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --gut: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.4 var(--sans); max-width: 100%; }
html { overflow-x: hidden; }
body { overflow-x: clip; } /* clip, not hidden: hidden on body would break the sticky action bar */
body { min-height: 100vh; min-height: 100dvh; overscroll-behavior-y: none; }
button, a, input, [role=button] { touch-action: manipulation; }
button { font: inherit; color: inherit; }
a { color: var(--gold); }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

#app { min-height: 100vh; min-height: 100dvh; padding: calc(var(--st) + 6px) calc(var(--sr) + var(--gut)) calc(var(--sb) + 28px) calc(var(--sl) + var(--gut)); max-width: 1180px; margin: 0 auto; }
.narrow { max-width: 620px; margin-left: auto; margin-right: auto; }
.boot { height: 70vh; display: grid; place-items: center; }

/* ---------- brand + top bar ---------- */
.brand { font-family: var(--display); font-weight: 800; font-style: italic; letter-spacing: .02em; font-size: 22px; line-height: 1; white-space: nowrap; }
.brand i { color: var(--hot); font-style: italic; }
.top { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.top .brand { flex: 1; display: flex; align-items: center; gap: .24em; min-height: 44px; text-decoration: none; color: var(--ink); }
.top .day { font-family: var(--display); font-weight: 700; color: var(--muted); font-size: 15px; letter-spacing: .04em; }
.iconbtn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; font-size: 18px; cursor: pointer; flex: none; }
.iconbtn:active { transform: scale(.94); }

/* ---------- the teaser (today's road forecast) ---------- */
.teaser { position: relative; overflow: hidden; border-radius: 18px; padding: 14px 16px; margin: 6px 0 14px; background:
  radial-gradient(120% 140% at 100% 0%, rgba(255, 61, 46, .28), transparent 55%), linear-gradient(135deg, #1a1f2b, #10131a); border: 1px solid var(--line); }
.teaser .k { font-family: var(--display); font-weight: 700; letter-spacing: .14em; font-size: 12px; color: var(--gold); text-transform: uppercase; }
.teaser .t { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.05; margin-top: 4px; }
.teaser .t .ic { margin-right: 6px; font-style: normal; }
.teaser .s { color: var(--muted); font-size: 13px; margin-top: 6px; }
.intro { color: #c9d0dc; font-size: 15px; margin: 0 0 14px; }
.intro b { color: var(--ink); }

/* ---------- hero lines ---------- */
.hero { margin: 8px 0 12px; }
.hero h1 { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.02; margin: 0; letter-spacing: .005em; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero p { color: #c9d0dc; margin: 8px 0 0; font-size: 15px; }
.kicker { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--hot); }

/* ---------- lineup: one pair of cards per car type ---------- */
.lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px 14px; }
.pair h3 { margin: 0 0 7px 2px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pair .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.card { --paint: #888; position: relative; display: flex; flex-direction: column; text-align: left; width: 100%; min-width: 0; padding: 8px 10px 10px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, #161a23 0%, #0f1218 100%); border: 1.5px solid var(--line); transition: transform .12s, border-color .15s, box-shadow .15s, opacity .2s; }
.card::before { content: ""; position: absolute; left: 8%; right: 8%; top: 6px; height: 64px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--paint) 45%, transparent), transparent); opacity: .55; pointer-events: none; }
.card .art { position: relative; margin: 0 -4px; }
.card .art svg { display: block; width: 100%; height: auto; aspect-ratio: 320 / 120; }
.card .nm { margin-top: 2px; line-height: 1.1; }
.card .mq { display: block; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.card .md { font-family: var(--display); font-weight: 800; font-size: 20px; }
.card .yr { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--dim); margin-left: 4px; }
.stats { margin: 7px 0 0; display: grid; gap: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.stats div { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.stats dt { color: var(--muted); margin: 0; }
.stats dd { margin: 0; font-weight: 650; white-space: nowrap; }
.pips { display: inline-flex; gap: 2px; vertical-align: middle; margin-right: 5px; }
.pips i { width: 4px; height: 9px; border-radius: 1.5px; background: #2a303c; }
.pips i.on { background: var(--ui, var(--paint)); box-shadow: 0 0 4px color-mix(in srgb, var(--ui, var(--paint)) 60%, transparent); }
.card .fl { margin: 7px 0 0; color: var(--muted); font-size: 11.5px; font-style: italic; line-height: 1.3; }
.card:hover { border-color: #3a4252; }
.card:active { transform: scale(.985); }
.card.sel { border-color: var(--ui, var(--paint)); box-shadow: 0 0 0 1px var(--ui, var(--paint)), 0 8px 30px color-mix(in srgb, var(--ui, var(--paint)) 30%, transparent); animation: pulse .35s ease-out; }
.card.sel::after { content: "✓ PICKED"; position: absolute; top: 8px; right: 8px; font: 800 11px/1 var(--display); letter-spacing: .1em; padding: 5px 7px; border-radius: 8px; background: var(--ui, var(--paint)); color: #0a0c10; }
.card.locked::after { content: "🔒 YOUR CAR"; }
.lineup.has-sel .card:not(.sel) { opacity: .62; }
.lineup.readonly .card { cursor: default; }
@keyframes pulse { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* ---------- sticky action bar ---------- */
.bar { position: sticky; bottom: 0; z-index: 5; margin: 14px calc(-1 * var(--gut)) 0; padding: 12px var(--gut) calc(12px + var(--sb)); background: linear-gradient(180deg, transparent, rgba(10, 12, 16, .92) 28%, #0a0c10); }
.bar.solid { background: #0a0c10; box-shadow: 0 -14px 18px #0a0c10; padding-top: 8px; }
.bar.fixed { position: fixed; left: 0; right: 0; margin: 0; padding-left: calc(var(--sl) + var(--gut)); padding-right: calc(var(--sr) + var(--gut)); }
.bar .inner { max-width: 620px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.bar .note { font-size: 13px; color: var(--muted); text-align: center; margin: 0 auto 8px; max-width: 620px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 18px; border-radius: 14px; border: 0; cursor: pointer;
  font: 800 18px/1.1 var(--display); letter-spacing: .03em; text-decoration: none; text-align: center; transition: transform .1s, opacity .2s, background .2s; }
.btn:active { transform: scale(.97); }
.btn.go { flex: 1; background: linear-gradient(135deg, var(--hot), var(--hot2)); color: #fff; box-shadow: 0 6px 24px rgba(255, 61, 46, .35); }
.btn.alt { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }
.btn.ghost { background: transparent; color: var(--muted); min-height: 44px; font-size: 15px; }
.btn[disabled] { opacity: .45; box-shadow: none; cursor: not-allowed; }
.btn.wide { width: 100%; }
.btn .mini { width: 64px; height: auto; margin: -6px 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row .btn { flex: 1 1 160px; }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 12px 0; }
.panel h2 { font-family: var(--display); font-weight: 800; font-size: 20px; margin: 0 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.link { display: flex; align-items: center; gap: 8px; background: #0c0f14; border: 1px dashed #343b49; border-radius: 12px; padding: 6px 6px 6px 12px; font-size: 14px; }
.link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c9d0dc; }
.link .btn { min-height: 44px; font-size: 15px; padding: 8px 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; font-size: 13px; color: var(--muted); }
.field input { min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: #0c0f14; color: var(--ink); font: 600 17px var(--sans); padding: 0 14px; }
.field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); }
.badge.gold { background: var(--gold); color: #1a1405; border-color: transparent; }
.badge.hot { background: var(--hot); color: #fff; border-color: transparent; }
.err { background: #2a1214; border: 1px solid #5a2328; color: #ffc9c9; border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 14px; }
.spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #5f687a; border-top-color: var(--gold); animation: spin 1s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- your duos (home) ---------- */
.duos { display: grid; gap: 8px; margin: 0 0 16px; }
.duo { text-align: left; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; min-height: 56px; text-decoration: none; color: var(--ink); cursor: pointer; }
.duo svg { width: 72px; flex: none; }
.duo .w { flex: 1; min-width: 0; }
.duo .w b { display: block; font-family: var(--display); font-size: 17px; }
.duo .w span { font-size: 13px; color: var(--muted); }
.duo .p { font: 800 22px var(--display); color: var(--gold); }
.duo .go { font-size: 20px; color: var(--muted); }
.together { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 16px; }
.together b { color: var(--gold); font-size: 20px; }

/* ---------- the reveal ---------- */
.reveal { position: relative; max-width: 620px; margin: 0 auto; min-height: calc(100dvh - var(--st) - var(--sb) - 90px); display: flex; flex-direction: column; justify-content: center; padding: 6px 0 0; }
.reveal::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(60% 45% at 50% 38%, rgba(255, 197, 61, .10), transparent 70%), radial-gradient(90% 60% at 50% 110%, rgba(255, 61, 46, .18), transparent 60%), var(--bg); }
.reveal .kicker { text-align: center; }
.reveal .line { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 8.6vw, 54px); line-height: 1; text-align: center; margin: 8px 0 4px; }
.reveal .sub { text-align: center; color: #c9d0dc; margin: 0 0 8px; }
.faceoff { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 4px; margin: 10px -6px 4px; }
.faceoff .side { text-align: center; min-width: 0; }
.faceoff .side svg { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.faceoff .side.l { animation: inl .7s cubic-bezier(.2, 1.2, .4, 1) both; }
.faceoff .side.r { animation: inr .7s cubic-bezier(.2, 1.2, .4, 1) .25s both; }
.faceoff .plus { font: 900 34px var(--display); color: var(--gold); padding-bottom: 42px; animation: pop .4s ease-out .7s both; }
.faceoff .who { font-size: 13px; color: var(--muted); font-weight: 600; }
.faceoff .md { font: 800 21px/1.05 var(--display); }
.faceoff .ty { font: 700 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.faceoff .glow { position: relative; }
.faceoff .glow::before { content: ""; position: absolute; left: 5%; right: 5%; top: 10%; bottom: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--paint) 55%, transparent), transparent); z-index: -1; }
/* the duo arrives in place (never off-screen, never see-through): players screenshot the reveal at any instant */
@keyframes inl { from { transform: scale(.93) translateY(10px); } to { transform: none; } }
@keyframes inr { from { transform: scale(.93) translateY(10px); } to { transform: none; } }
@keyframes pop { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mirror { text-align: center; margin: 4px 0; }
.road { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 14px 0 6px; }
.road .leg { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 2px; text-align: center; animation: flip .45s ease-out both; }
.road .leg .i { font-size: 26px; line-height: 1.1; }
.road .leg .n { font: 700 11px/1.1 var(--display); letter-spacing: .04em; color: #c9d0dc; margin-top: 3px; }
.road .leg .no { font: 700 10px var(--display); color: var(--dim); }
@keyframes flip { from { transform: translateY(8px); } to { transform: none; } }

/* ---------- leg calls ---------- */
.callhead { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px; }
.callhead .c { --paint: #888; border-radius: 14px; padding: 6px 10px 8px; background: var(--panel); border: 1.5px solid var(--line); text-align: center; }
.callhead .c svg { width: 100%; height: auto; }
.callhead .c b { display: block; font: 800 17px/1.1 var(--display); }
.callhead .c span { font-size: 12px; color: var(--muted); }
.callhead .c .cnt { display: inline-block; margin-top: 4px; font: 800 13px var(--display); letter-spacing: .06em; padding: 3px 8px; border-radius: 7px; background: #2a303c; color: var(--muted); }
.callhead .c .cnt.ok { background: var(--ui, var(--paint)); color: #0a0c10; }
.legs { display: grid; gap: 10px; }
.callrow { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.callrow .lh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.callrow .lh .i { font-size: 22px; }
.callrow .lh b { font: 800 18px var(--display); }
.callrow .lh span { font-size: 12px; color: var(--muted); margin-left: auto; text-align: right; }
.callrow .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt { --paint: #888; min-height: 58px; border-radius: 12px; border: 1.5px solid var(--line); background: #0d1016; padding: 6px 10px; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.opt b { font: 800 15px/1.1 var(--display); }
.opt span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.opt.on { background: var(--ui, var(--paint)); border-color: var(--ui, var(--paint)); color: #0a0c10; animation: pulse .25s ease-out; }
.opt.on span { color: rgba(10, 12, 16, .75); }
.rule { text-align: center; font-size: 14px; margin: 0 0 8px; color: var(--muted); }
.rule.ok { color: var(--win); }
.rule.bad { color: var(--gold); }

/* ---------- race ---------- */
.racewrap { position: fixed; inset: 0; background: #05070a; display: flex; flex-direction: column; z-index: 10; }
.racewrap canvas { display: block; width: 100%; flex: 1; min-height: 0; }
.racehud { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--st) + 8px) calc(var(--sr) + 12px) 0 calc(var(--sl) + 12px); display: flex; align-items: flex-start; gap: 10px; pointer-events: none; }
.racehud .lg { flex: 1; min-width: 0; }
.racehud .lg .k { font: 700 12px var(--display); letter-spacing: .14em; color: var(--gold); text-transform: uppercase; text-shadow: 0 1px 3px #000; }
.racehud .lg .t { font: 800 24px/1.05 var(--display); text-shadow: 0 2px 6px #000; }
.racehud .lg .d { font-size: 13px; color: #dfe5ee; text-shadow: 0 1px 3px #000; }
.racehud .skip { pointer-events: auto; }
.racebot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 calc(var(--sr) + 12px) calc(var(--sb) + 12px) calc(var(--sl) + 12px); pointer-events: none; }
.gap { text-align: center; font: 800 20px var(--display); text-shadow: 0 2px 6px #000; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.gap small { display: block; font: 600 12px var(--sans); color: #c9d0dc; }
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; max-width: 620px; margin: 0 auto; }
.strip .s { border-radius: 10px; padding: 5px 2px; text-align: center; background: rgba(17, 20, 27, .85); border: 1px solid var(--line); font: 700 11px/1.15 var(--display); color: var(--muted); }
.strip .s .i { font-size: 18px; display: block; }
.strip .s.now { border-color: var(--gold); color: var(--ink); box-shadow: 0 0 0 1px var(--gold); }
.strip .s.done { color: #c9d0dc; }
.strip .s .dt { display: block; font-size: 11px; }
.strip .s .dt.win { color: var(--win); } .strip .s .dt.close { color: var(--close); } .strip .s .dt.lost { color: var(--lost); }
.handoff { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font: 900 italic 42px var(--display); color: var(--gold); text-shadow: 0 3px 0 #000, 0 0 24px rgba(255, 197, 61, .6); opacity: 0; pointer-events: none; white-space: nowrap; }
.handoff.on { animation: hand 1s ease-out; }
/* the race at human speed (KC, 26 Sep): one card at a time over the road; the intro, each leg's title, then why */
.rcard { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: min(88vw, 520px); text-align: center; pointer-events: none;
  background: rgba(8, 10, 14, .8); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; opacity: 0; transition: opacity .25s; }
.rcard.on { opacity: 1; }
.rcard i { display: block; font: 700 12px var(--display); font-style: normal; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.rcard b { display: block; font: 900 30px/1.05 var(--display); margin: 4px 0; }
.rcard span { display: block; font: 600 17px/1.35 var(--sans); color: #eef2f7; }
.rcard small { display: block; margin-top: 10px; font: 700 12px var(--display); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.rcard.intro b { font-size: 26px; }
/* race eye: "Who gains this leg?" Us / Them under the leg's title; a tap during the title is the call (optional) */
.rcard .eye { margin-top: 10px; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; pointer-events: auto; }
.rcard .eye small { width: 100%; margin: 0 0 2px; }
.rcard .eye button { min-width: 88px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); font: 800 15px var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.rcard .eye button.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px var(--gold); opacity: 1; }
.rcard .eye button:disabled { opacity: .45; }
.eyeline { margin: 8px 0 0; color: #c9d0dc; } .eyeline b { color: var(--gold); }
.rcard.verdict { border-width: 2px; padding-top: 22px; }   /* room for the stamp: it sits on the corner, never on the words */
/* the leg's stamp on its verdict card: WON gold, LOST red, LEVEL grey, slapped on at an angle */
.rcard .stamp { position: absolute; right: -8px; top: -22px; font: 900 21px var(--display); font-style: normal; letter-spacing: .14em; padding: 3px 10px 2px; border: 3px solid currentColor; border-radius: 7px;
  color: #c9d0dc; background: rgba(8, 10, 14, .9); box-shadow: 0 3px 10px #000; transform: rotate(-11deg); animation: stampin .4s cubic-bezier(.2, 1.5, .4, 1) both; }
.rcard .stamp.won { color: var(--gold); } .rcard .stamp.lost { color: var(--lost); }
@keyframes stampin { 0% { opacity: 0; transform: rotate(-11deg) scale(2.6); } 55% { opacity: 1; transform: rotate(-11deg) scale(.9); } 100% { opacity: 1; transform: rotate(-11deg) scale(1); } }
/* the photo-finish: a FINISH stamp holds over the line, then the final gap lands big */
.finstamp { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-8deg); font: 900 italic 58px var(--display); letter-spacing: .1em; color: var(--gold); padding: 4px 22px 2px;
  border: 5px solid var(--gold); border-radius: 12px; background: rgba(8, 10, 14, .55); text-shadow: 0 3px 0 #000; box-shadow: 0 6px 24px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; white-space: nowrap; }
.finstamp.on { animation: finstamp .45s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes finstamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.8); } 55% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(.92); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }
.gap.land b { display: block; font: 900 44px/1 var(--display); color: var(--gold); animation: land .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.gap.land small { font-size: 14px; color: #eef2f7; }
@keyframes land { 0% { opacity: 0; transform: scale(2.2); } 60% { opacity: 1; transform: scale(.94); } 100% { transform: scale(1); } }
.rcard.verdict.win { border-color: var(--win); } .rcard.verdict.close { border-color: var(--close); } .rcard.verdict.lost { border-color: var(--lost); }
.racewrap.intro .racehud, .racewrap.intro .gap, .racewrap.count .gap { visibility: hidden; }
@media (orientation: portrait) { .rcard { top: 60%; } }   /* on a phone held upright the cars sit in the upper half: the words go under them */
.handoff.bad { color: var(--lost); text-shadow: 0 3px 0 #000, 0 0 24px rgba(239, 68, 68, .55); }
/* the start: 3, 2, 1 popped over the line, then GO with the first leg's title */
.handoff.count { top: 46%; font-size: 104px; color: #fff; text-shadow: 0 5px 0 #000, 0 0 34px rgba(255, 197, 61, .55); }
.handoff.count.on { animation: count .7s ease-out; }
.handoff.count.go.on { animation: count 1.2s ease-out; color: var(--gold); }
@keyframes count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); } }
.skipres { display: block; margin: 4px auto 0; min-height: 44px; min-width: 150px; pointer-events: auto; background: none; border: 0; color: #aab3c2; font: 600 13px var(--sans); text-decoration: underline; cursor: pointer; padding: 12px 14px; }
@keyframes hand { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- result ---------- */
.score { text-align: center; margin: 6px 0 4px; }
.score .big { font: 900 clamp(72px, 24vw, 120px)/.9 var(--display); letter-spacing: -.02em; background: linear-gradient(180deg, #fff, #ffd98a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score .big small { font-size: .42em; }
.score .of { font: 700 16px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.score .rank { font: 800 20px var(--display); margin-top: 6px; }
.headline { font-size: 17px; text-align: center; margin: 12px auto 4px; max-width: 520px; color: #e5eaf2; }
.badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.duoline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin: 8px 0; }
.duoline .s { text-align: center; min-width: 0; }
.duoline svg { width: 100%; height: auto; }
.duoline .s b { display: block; font: 800 16px/1.1 var(--display); }
.duoline .s span { font-size: 12px; color: var(--muted); }
.duoline .p { font: 900 24px var(--display); color: var(--gold); }
.bd { display: grid; gap: 8px; }
.bdrow { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.bdrow .m { font-size: 18px; line-height: 1.2; }
.bdrow .h { font: 800 16px var(--display); }
.bdrow .h span { font: 600 13px var(--sans); color: var(--muted); }
.bdrow .t { font: 800 16px var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.bdrow .t.win { color: var(--win); } .bdrow .t.close { color: var(--close); } .bdrow .t.lost { color: var(--lost); }
.bdrow .w { grid-column: 2 / 4; font-size: 13.5px; color: #c9d0dc; }
.perfect { display: flex; align-items: center; gap: 10px; }
.perfect svg { width: 80px; flex: none; }
.ranklist { display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.ranklist div { display: flex; justify-content: space-between; padding: 5px 10px; border-radius: 8px; background: #0d1016; font-size: 14px; }
.ranklist div.me { background: color-mix(in srgb, var(--gold) 22%, #0d1016); font-weight: 700; }
.quiz .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
.quiz .chip { --paint: #888; min-height: 52px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 12px; border: 1.5px solid var(--line); background: #0d1016; cursor: pointer; text-align: left; font: 700 14px/1.1 var(--display); }
.quiz .chip svg { width: 54px; flex: none; }
.quiz .chip.right { border-color: var(--win); } .quiz .chip.wrong { border-color: var(--lost); }

/* ---------- sheet + toast ---------- */
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-end; justify-content: center; }
.sheet .box { width: 100%; max-width: 620px; max-height: calc(100dvh - var(--st) - 20px); overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0;
  padding: 16px calc(var(--sr) + 18px) calc(var(--sb) + 18px) calc(var(--sl) + 18px); animation: up .25s ease-out; }
.sheet h2 { font: 800 24px var(--display); margin: 0 0 8px; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sheet td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sheet td:first-child { font-size: 20px; width: 34px; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast { position: fixed; left: 50%; bottom: calc(var(--sb) + 90px); transform: translateX(-50%) translateY(20px); background: var(--gold); color: #1a1405; font: 800 15px var(--display); letter-spacing: .02em; padding: 10px 16px; border-radius: 12px; opacity: 0; transition: .25s; pointer-events: none; z-index: 40; max-width: calc(100vw - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translateX(-50%); }

/* ---------- wider screens and landscape phones ---------- */
@media (min-width: 700px) {
  .hero h1 { font-size: 42px; }
  .teaser .t { font-size: 34px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  #app { padding-top: calc(var(--st) + 2px); }
  .top { min-height: 46px; }
  .hero h1 { font-size: 30px; }
  .teaser { padding: 10px 14px; }
  .teaser .t { font-size: 24px; }
  .reveal { min-height: 0; padding-top: 0; }
  .reveal .line { font-size: 34px; }
  .faceoff { max-width: 640px; margin-left: auto; margin-right: auto; }
  .faceoff .plus { padding-bottom: 30px; }
  .score .big { font-size: 84px; }
  .legs { grid-template-columns: 1fr 1fr; }
  .gap { font-size: 17px; margin-bottom: 4px; }
  .strip .s { padding: 3px 2px; }
  .strip .s .i { font-size: 15px; }
  .racehud .lg .t { font-size: 20px; }
}

/* ---------- Depth v2: conditions, handoffs, practice ---------- */
.cd { display: inline-block; font: 700 11px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 6px; background: #1d2330; color: #c9d0dc; font-style: normal; white-space: nowrap; }
.cd.wet { background: #16324d; color: #9fd3ff; }
.cd.wind { background: #3b3320; color: #ffdc8a; }
.cd.dry { background: #2a2618; color: #f3d98b; }
.road .leg .cd { margin-top: 4px; font-size: 10px; padding: 2px 4px; }
.condnote { margin: 6px 0 0; }
.callrow .lh { flex-wrap: wrap; }
.callrow .lh .cd { align-self: center; }
.hand { text-align: center; font: 800 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: -4px 0; opacity: .35; transition: .2s; }
.hand.on { color: var(--gold); opacity: 1; }
.hand.on::before, .hand.on::after { content: " ——— "; color: #5f4a14; }
.bdrow .h em.cd { margin-left: 4px; vertical-align: 1px; }
.bdrow .t small { font: 600 11px var(--sans); color: var(--muted); }
.bdrow.hrow { grid-template-columns: 26px 1fr auto; }
.badge.practice { background: #243a2a; color: #8ff0a8; border-color: #2f5d3a; }
.badge.stranger { background: #2b2140; color: #d9c2ff; border-color: #4a3a6b; }
.stranger-offer { margin: 4px 0 12px; }
.stranger-offer p { margin: 6px 0 0; }
.stranger-go { margin: 4px 0 12px; }
/* one-tap sends: WhatsApp and Telegram (colours darkened from the apps' own so white text stays readable) */
.sendrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0; }
.btn.app { min-height: 48px; font-size: 16px; color: #fff; gap: 8px; }
.btn.app svg { width: 20px; height: 20px; flex: none; }
.btn.wa { background: #15803d; }
.btn.tg { background: #1d6fa5; }
.practice-offer { border-color: #2f5d3a; background: linear-gradient(180deg, #121b15, var(--panel)); }
.practice-offer h2 { margin-top: 8px; }
.racewrap.practice .racehud .lg .badge { margin-bottom: 4px; }
.strip .s .c { font-size: 11px; margin-left: 2px; }
.duel { display: none; max-width: 620px; margin: 0 auto 10px; background: rgba(10, 12, 16, .72); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.duel .dh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.duel .dh b { font: 800 20px var(--display); flex: none; }
.duel .dh span { font-size: 12px; color: var(--muted); text-align: right; }
.duel .dr { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 3px 0; border-top: 1px solid #1e2430; }
.duel .dr span { color: var(--muted); font-size: 13px; }
.duel .dr b { font: 800 22px var(--display); font-variant-numeric: tabular-nums; }
.duel .dr i { font: 700 15px var(--display); font-style: normal; color: #ffc53d; opacity: .8; min-width: 64px; text-align: right; }
.duel .dr.dk { border-top: 0; padding-top: 0; }
.duel .dr.dk b { font-size: 13px; color: var(--ink); } .duel .dr.dk i { font-size: 12px; color: var(--muted); }
.duel .dr b.up { color: var(--win); } .duel .dr b.down { color: var(--lost); }
@media (orientation: portrait) { .duel { display: block; } .racehud .k .dec { display: none; } }

/* the reveal on a portrait phone: the two cars in echelon, each ~¾ of the screen wide (big enough to be the clip) */
@media (orientation: portrait) and (max-width: 620px) {
  .faceoff { display: block; position: relative; margin: 4px -10px 0; }
  .faceoff .side { width: 76%; }
  .faceoff .side.l { text-align: left; padding-left: 6px; }
  .faceoff .side.r { margin: -14px 0 0 auto; text-align: right; padding-right: 6px; }
  .faceoff .plus { position: absolute; left: calc(50% - 16px); top: calc(47% - 30px); padding: 0; font-size: 50px; z-index: 2; }
  .faceoff .md { font-size: 24px; }
}
/* the reveal on a landscape phone: cars left, road + next step right, all on one screen */
@media (orientation: landscape) and (max-height: 560px) {
  .reveal { max-width: 980px; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-areas: "head head" "face road"; column-gap: 20px; align-items: center; }
  .rv-head { grid-area: head; } .rv-face { grid-area: face; } .rv-road { grid-area: road; }
  .reveal .line { font-size: 30px; margin: 2px 0; }
  .reveal .sub { margin: 0 0 2px; }
  .road { margin: 6px 0 4px; gap: 4px; }
  .road .leg { padding: 5px 1px; }
  .road .leg .i { font-size: 20px; }
  .faceoff .plus { padding-bottom: 30px; }
  .lead { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
  .lead .hero { margin: 0; } .lead .teaser { margin: 0 0 10px; }
  .lead .hero h1 { font-size: 26px; } .lead .hero p { font-size: 14px; margin-top: 4px; }
  .bar { padding-top: 6px; padding-bottom: calc(6px + var(--sb)); }
  .bar .btn { min-height: 46px; font-size: 16px; padding: 8px 14px; }
  .bar .rule { margin-bottom: 4px; }
  .callhead { margin: 4px 0 8px; }
  .callhead .c { display: grid; grid-template-columns: 150px 1fr; align-items: center; text-align: left; gap: 0 10px; }
  .callhead .c svg, .callhead .c .carimg { grid-row: span 3; }
  .callhead .c br { display: none; }
  .callhead .c .cnt { justify-self: start; margin-top: 2px; }
  .racebot .gap { position: fixed; top: calc(var(--st) + 10px); right: calc(var(--sr) + 118px); margin: 0; text-align: right; }
}
/* ---------- rendered car pictures (showroom renders on a dark studio): they blend into the panels, never a hard box ---------- */
.carimg, img.mini { display: block; width: 100%; height: auto; aspect-ratio: 540 / 380; object-fit: cover; mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(72% 68% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(72% 68% at 50% 46%, #000 62%, transparent 100%); }
.card .art { margin: -6px -8px -4px; }
.card .art .carimg { aspect-ratio: 540 / 330; object-position: 50% 42%; }
.card::before { top: 18px; height: 90px; }
.btn img.mini { width: 58px; flex: none; margin: -8px 2px -8px -6px; }
.duo img.mini { width: 76px; flex: none; }
.faceoff .side .carimg { -webkit-mask-image: radial-gradient(70% 64% at 50% 48%, #000 60%, transparent 100%); mask-image: radial-gradient(70% 64% at 50% 48%, #000 60%, transparent 100%); }
.hero .glow .carimg { max-width: 460px; margin: 0 auto; }
.callhead .c .carimg { margin: -4px auto 0; }
.perfect .carimg { width: 130px; flex: none; }
.quiz .chip .carimg { width: 64px; flex: none; }
/* the reveal: the duo side by side (the pictures first, instantly, on every device), the road tiles on the same screen.
   Where 3D runs, its scene stays hidden until its first frame is fully rendered, then pictures and 3D swap in ONE frame
   (a cut: never both, never a see-through car). playtest/reveal-check-lib.mjs asserts this at 0/300/800/2000 ms. */
.rv-face { position: relative; --stage-h: min(52vw, 320px); }
.rv-face.want3d .faceoff { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0; margin: 4px 0 0; }
.rv-face.want3d .faceoff .side { width: auto; margin: 0; padding: 0; text-align: center; min-width: 0; }
.rv-face.want3d .faceoff .glow { height: var(--stage-h); display: flex; align-items: center; justify-content: center; }
.rv-face.want3d .faceoff .glow .carimg { width: 100%; max-height: 100%; object-fit: contain; }
.rv-face.want3d .faceoff .plus { position: static; padding: 0 2px 30px; font-size: 32px; }
.rv-face .gl3d { position: absolute; left: 0; right: 0; top: 0; height: var(--stage-h); z-index: 0; opacity: 0; visibility: hidden; pointer-events: none;
  /* soft canvas edges only (outer 4% / 12%); the framing keeps both cars inside the fully opaque middle (checked) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.rv-face .gl3d canvas { width: 100%; height: 100%; display: block; }
.rv-face.has3d .gl3d { opacity: 1; visibility: visible; }
.rv-face.has3d .faceoff .glow .carimg, .rv-face.has3d .faceoff .glow::before { visibility: hidden; }
.rv-face .faceoff { position: relative; z-index: 1; }
@media (orientation: landscape) and (max-height: 560px) { .rv-face { --stage-h: min(40vh, 170px); } }
.racewrap canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.racewrap .carlbl { position: absolute; left: 0; top: 0; font: 800 12px var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #fff; background: rgba(10,12,16,.62); padding: 3px 7px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.racewrap .carlbl.you { color: #111; background: rgba(255,197,61,.94); }   /* your duo's driving car; the rival's label stays dark */
.racewrap .ghostlbl { position: absolute; left: 0; top: 0; font: 800 12px var(--display); letter-spacing: .08em; color: var(--gold); background: rgba(10,12,16,.55); padding: 3px 7px; border-radius: 6px; pointer-events: none; white-space: nowrap; will-change: transform; }
.handoff small { display: block; font: 800 18px var(--display); color: #fff; letter-spacing: .06em; text-shadow: 0 2px 6px #000; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* DRIFT EDITION's way in from the home screen (a test, not ranked) */
/* the two games side by side at the top of the home and Drift screens (KC, 26 Sep): the duo and the Drift Edition */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 14px; }
.modes a { display: block; min-height: 52px; padding: 9px 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); color: var(--ink); text-decoration: none; text-align: center; }
.modes a b { display: block; font: 800 16px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.modes a b i { font-style: normal; font-size: 10px; letter-spacing: .1em; padding: 1px 5px; border-radius: 5px; background: #ff5a1f; color: #fff; vertical-align: 3px; margin-left: 2px; }
.modes a small { display: block; margin-top: 3px; font: 600 11.5px/1.25 var(--sans); color: var(--muted); }
.modes a.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.modes a.on b { color: var(--gold); }
.modes a.drift b { color: #ff5a1f; } .modes a.drift.on { border-color: #ff5a1f; box-shadow: 0 0 0 1px #ff5a1f inset; }