/* =====================================================================================
   Keystake: design tokens
   Graphite glass over the city, warm white type and one loud accent (acid lime) for focus,
   primary actions and money. Police red and blue stay for the pursuit, rarities keep their
   own colours. No uppercase text anywhere.
   ===================================================================================== */
:root {
  --bg: #0b0b0d;
  --bg-2: #141417;
  --glass: rgba(17, 17, 20, 0.8);
  --glass-strong: rgba(14, 14, 17, 0.94);
  --glass-soft: rgba(255, 255, 255, 0.045);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f3f1ec;
  --muted: #a3a097;
  --dim: #6f6c66;
  --accent: #c8f43c;
  --accent-hi: #dcff6a;
  --accent-ink: #12160a;
  --accent-soft: rgba(200, 244, 60, 0.14);
  --accent-glow: rgba(200, 244, 60, 0.35);
  --bad: #ff4f5e;
  --cop-red: #ff3b4f;
  --cop-blue: #3d8bff;
  --info: #8cc8ff;
  --gold: #ffc23d;
  /* older names still used by generated markup */
  --amber: var(--accent);
  --teal: var(--accent);
  --green: var(--accent);
  --red: var(--bad);
  --blue: var(--cop-blue);
  --display: 'Saira', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 0.84, 0.3, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1.15);
  --r: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 14px; -webkit-font-smoothing: antialiased; }
canvas#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* =====================================================================================
   Logo
   ===================================================================================== */
.logo { display: inline-flex; align-items: center; gap: 0.32em; font-size: 22px; line-height: 1; user-select: none; }
.logo-mark { width: 1.75em; height: 1.75em; overflow: visible; flex: none; filter: drop-shadow(0.03em 0.03em 0 #4d6112) drop-shadow(0.03em 0.03em 0 #2b360a) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)); }
.logo-mark .lm-plate { fill: rgba(20, 20, 23, 0.94); stroke: var(--accent); stroke-width: 4.5; stroke-linejoin: round; }
.logo-mark .lm-glint { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 0.08 0.92; stroke-dashoffset: 0.08; opacity: 0; }
.logo-mark .lm-stem { fill: var(--text); }
.logo-mark .lm-arm { fill: none; stroke: var(--accent); stroke-width: 13; stroke-linecap: butt; }
.logo-word { position: relative; font-family: var(--display); font-weight: 800; font-style: italic; letter-spacing: -0.01em; font-size: 1em; display: inline-flex; padding-right: 0.08em; white-space: nowrap; }
/* the glint: the same word on top, see-through but for a bright band that sweeps across it */
.logo-word::after { content: attr(data-text); position: absolute; left: 0; top: 0; color: transparent; pointer-events: none; white-space: nowrap; text-shadow: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.92) 50%, transparent 58%) no-repeat; background-size: 300% 100%; background-position: 160% 0; -webkit-background-clip: text; background-clip: text; }
.logo-word .lw-key { color: var(--text); text-shadow: 0.022em 0.022em 0 #8d8a83, 0.044em 0.044em 0 #6c6a64, 0.066em 0.066em 0 #4e4c48, 0.088em 0.088em 0 #34332f, 0.12em 0.15em 0.14em rgba(0, 0, 0, 0.55); }
.logo-word .lw-stake { color: var(--accent); text-shadow: 0.022em 0.022em 0 #8fb126, 0.044em 0.044em 0 #6c861b, 0.066em 0.066em 0 #4d6112, 0.088em 0.088em 0 #34410b, 0.12em 0.15em 0.14em rgba(0, 0, 0, 0.55); }
.logo-word .lw { display: inline-block; }
.logo-sm { font-size: 20px; }
.logo-md { font-size: 30px; }
.logo-lg { font-size: clamp(40px, 7.5vw, 76px); }
.logo-lg .logo-mark { filter: drop-shadow(0.025em 0.025em 0 #4d6112) drop-shadow(0.025em 0.025em 0 #2b360a) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(200, 244, 60, 0.18)); }

/* the intro: plate outline draws, stem drops, arms slash in, letters follow, glint */
/* the intro, in two acts. First the letters alone, flat, one after another. Then the pseudo-3D:
   the word swings in perspective and grows its extruded depth, the emblem assembles (outline
   drawn, stem dropped, arms slashed in), and a glint runs over both. */
.logo-intro .lw { opacity: 0; transform: translateY(0.2em); animation: lw-in 0.32s var(--ease-out) forwards; animation-delay: calc(0.12s + var(--i) * 0.07s); }
.logo-intro .lw-key, .logo-intro .lw-stake { animation: lw-depth 0.6s var(--ease-out) 1s both; }
.logo-intro .logo-word { animation: lw-swing 0.8s var(--ease-out) 0.95s both; }
.logo-intro .logo-mark { opacity: 0; animation: lm-show 0.01s linear 0.95s forwards; }
.logo-intro .lm-plate { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; animation: lm-draw 0.7s var(--ease-out) 1s forwards, lm-fill 0.45s ease 1.35s forwards; }
.logo-intro .lm-stem { transform-box: fill-box; transform-origin: center; opacity: 0; transform: translateY(-38px); animation: lm-drop 0.42s var(--ease-snap) 1.25s forwards; }
.logo-intro .lm-arm1 { opacity: 0; transform: translate(34px, -16px); animation: lm-slash 0.34s var(--ease-out) 1.45s forwards; }
.logo-intro .lm-arm2 { opacity: 0; transform: translate(34px, 20px); animation: lm-slash 0.34s var(--ease-out) 1.55s forwards; }
.logo-intro .logo-word::after { animation: lw-shine 1.1s ease 1.95s 1 both; }
.logo-intro .lm-glint { animation: lm-glint 1.1s ease 1.9s 1; }
@keyframes lm-show { to { opacity: 1; } }
@keyframes lw-swing { 0% { transform: perspective(520px) rotateY(0); } 45% { transform: perspective(520px) rotateY(-20deg) translateX(0.05em); } 100% { transform: perspective(520px) rotateY(0); } }
@keyframes lw-depth { from { text-shadow: none; } }
@keyframes lm-draw { to { stroke-dashoffset: 0; } }
@keyframes lm-fill { to { fill-opacity: 1; } }
@keyframes lm-drop { to { opacity: 1; transform: none; } }
@keyframes lm-slash { to { opacity: 1; transform: none; } }
@keyframes lw-in { to { opacity: 1; transform: none; } }
@keyframes lw-shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes lm-glint { 0% { opacity: 0; stroke-dashoffset: 0.08; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -0.92; } }
/* while on screen: a glint now and then (the menu's small logo too, on hover/focus) */
.logo-idle .logo-word::after { animation: lw-shine-idle 9s ease 3s infinite; }
.logo-idle .lm-glint { animation: lm-glint-idle 9s ease 3s infinite; }
@keyframes lw-shine-idle { 0% { background-position: 160% 0; } 12%, 100% { background-position: -60% 0; } }
@keyframes lm-glint-idle { 0% { opacity: 0; stroke-dashoffset: 0.08; } 1% { opacity: 1; } 11% { opacity: 1; } 13%, 100% { opacity: 0; stroke-dashoffset: -0.92; } }
.tb-logo:hover .logo-word::after, .tb-logo.pad-focus .logo-word::after { animation: lw-shine 0.9s ease 1; }

/* =====================================================================================
   Full-screen panes: loading, sign-in
   ===================================================================================== */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; z-index: 50; padding: 16px; }
#loading { background: radial-gradient(ellipse at 50% 55%, #18191d 0%, #08080a 72%); }
#loading.fade-out { opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
#loading.fade-out .logo { transform: scale(1.04); transition: transform 0.45s ease; }
#loading::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, 0.018) 46px 48px); pointer-events: none; }
.speedlines { position: absolute; left: 50%; top: 50%; width: min(760px, 92vw); height: 140px; transform: translate(-50%, -50%); pointer-events: none; overflow: hidden; }
.speedlines i { position: absolute; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent)); opacity: 0; animation: speedline 1.6s var(--ease-out) infinite; }
.speedlines i:nth-child(1) { top: 22%; width: 38%; animation-delay: 0.1s; }
.speedlines i:nth-child(2) { top: 50%; width: 52%; animation-delay: 0.45s; }
.speedlines i:nth-child(3) { top: 78%; width: 30%; animation-delay: 0.8s; }
@keyframes speedline { 0% { left: 110%; opacity: 0; } 20% { opacity: 0.8; } 100% { left: -60%; opacity: 0; } }
.loading-bar { width: min(300px, 76vw); height: 3px; background: var(--line); overflow: hidden; border-radius: 2px; transform: skewX(-20deg); }
.loading-bar div { height: 100%; width: 38%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: load 1.1s infinite linear; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
#loading-text { font-family: var(--display); font-style: italic; letter-spacing: 0.02em; }

#auth { background: radial-gradient(ellipse 40% 80% at 50% 45%, rgba(8, 8, 10, 0.66), rgba(8, 8, 10, 0.12) 100%), linear-gradient(180deg, transparent 55%, rgba(8, 8, 10, 0.75));
  overflow-y: auto; justify-content: flex-start; }
/* the title screen: the logo, line and features, and beside them (below on narrow screens) the
   card to start from */
.auth-wrap { margin: auto 0; flex-shrink: 0; width: min(430px, 100%); display: flex; flex-direction: column; gap: 18px; }
.auth-hero { display: flex; flex-direction: column; gap: 12px; animation: card-in 0.6s var(--ease-out) both; }
#auth .auth-card { flex-shrink: 0; width: 100%; }
#auth-form.collapsed { display: none; }
#auth-form:not(.collapsed) { animation: rise 0.35s var(--ease-out) both; }
@media (min-width: 960px) {
  #auth { background: linear-gradient(90deg, rgba(8, 8, 10, 0.78) 0, rgba(8, 8, 10, 0.4) 45%, rgba(8, 8, 10, 0.1) 75%), linear-gradient(180deg, transparent 55%, rgba(8, 8, 10, 0.7)); }
  .auth-wrap { width: min(1080px, 100%); flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; padding: 0 24px; }
  .auth-hero { flex: 1; max-width: 560px; gap: 18px; }
  .auth-hero #auth-logo { justify-content: flex-start; }
  .auth-hero .tagline { text-align: left; font-size: 24px; margin: 0; color: #e2dfd6; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
  .auth-hero .auth-features { font-size: 15.5px; gap: 10px; color: #cfccc4; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
  #auth .auth-card { width: 400px; animation-delay: 0.15s; }
}
/* narrow screens: logo, line and actions in one dark card (over the bright sky the line and
   features weren't readable on their own) */
@media (max-width: 959px) {
  .auth-wrap { gap: 14px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: 18px; padding: 28px 24px 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); animation: card-in 0.6s var(--ease-out) both; }
  .auth-hero { animation: none; }
  #auth .auth-card { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
}
/* phones on their side: side by side as on a wide screen, smaller, so nothing needs scrolling */
@media (max-width: 959px) and (max-height: 500px) and (min-width: 600px) {
  #auth { background: linear-gradient(90deg, rgba(8, 8, 10, 0.82) 0, rgba(8, 8, 10, 0.5) 50%, rgba(8, 8, 10, 0.2)); }
  .auth-wrap { width: min(840px, 100%); flex-direction: row; align-items: center; gap: 24px; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 8px; animation: none; }
  .auth-hero { flex: 1; gap: 10px; animation: card-in 0.6s var(--ease-out) both; }
  .auth-hero #auth-logo { justify-content: flex-start; }
  .auth-hero .tagline { text-align: left; color: #e2dfd6; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); margin: 0; }
  .auth-hero .auth-features { color: #cfccc4; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
  #auth .auth-card { width: 340px; flex-shrink: 0; gap: 10px; padding: 18px 20px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); animation: card-in 0.6s var(--ease-out) 0.15s both; }
  .play-now { padding: 11px; }
}
.auth-card { width: min(430px, 100%); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: 18px; padding: 30px 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); animation: card-in 0.6s var(--ease-out) both; }
.auth-card .logo { align-self: center; margin-bottom: 2px; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.tagline { text-align: center; margin: -4px 0 4px; color: var(--muted); font-family: var(--display); font-style: italic; font-size: 17px; }
.auth-features { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 7px; font-size: 13.5px; color: var(--muted); }
.auth-features li { padding-left: 18px; position: relative; line-height: 1.35; }
.auth-features li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 9px; height: 6px; background: var(--accent); transform: skewX(-25deg); border-radius: 1px; }
.auth-features b { color: var(--text); font-weight: 600; }
.play-now { font-size: 19px; padding: 14px; }
.play-now-note { margin-top: -6px; text-align: center; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }
.oauth-row { display: flex; flex-direction: column; gap: 8px; }
.btn.oauth { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; }
.btn.oauth .oauth-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; font-size: 13px; }
.btn.oauth.google { background: #f4f3ef; color: #1c1d20; border-color: #f4f3ef; }
.btn.oauth.google:hover { background: #fff; }
.btn.oauth.google .oauth-mark { background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); color: #fff; }
.btn.oauth.discord { background: #5865f2; color: #fff; border-color: #5865f2; }
.btn.oauth.discord:hover { background: #6b77f5; }
.btn.oauth.discord .oauth-mark { background: rgba(255, 255, 255, 0.22); }
.guest-chip { font-family: var(--display); font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 6px; border: 1px solid rgba(200, 244, 60, 0.5); color: var(--accent); margin-left: 6px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { background: none; border: 0; padding: 9px 12px; border-radius: 9px; color: #c9c6be; font-family: var(--display); font-weight: 700; font-size: 15px; transition: background 0.18s, color 0.18s; }
.seg button:hover { color: var(--text); }
.seg button.active { background: rgba(255, 255, 255, 0.1); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); }
.field input { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 13px; color: var(--text); font-size: 15px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-error { color: var(--bad); min-height: 18px; margin: 0; font-size: 13px; }
.fine { font-size: 12px; color: var(--muted); text-align: center; margin: 0; }
#auth form { display: flex; flex-direction: column; gap: 12px; }

/* =====================================================================================
   Buttons, focus, button glyphs
   ===================================================================================== */
.btn { position: relative; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 10px 18px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.01em; line-height: 1.1;
  transition: background 0.16s, border-color 0.16s, transform 0.12s var(--ease-out), box-shadow 0.16s, color 0.16s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.26); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 6px 22px rgba(200, 244, 60, 0.18); }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn.teal { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { border-color: rgba(255, 79, 94, 0.5); color: #ff8d97; background: rgba(255, 79, 94, 0.07); }
.btn.danger:hover { background: rgba(255, 79, 94, 0.16); }
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 12px; font-size: 14px; border-radius: 9px; }
.btn.wide { width: 100%; padding: 13px; }
.btn.big { padding: 15px 26px; font-size: 19px; border-radius: 12px; }
.btn .glyph { margin-left: -4px; }
.btn:focus-visible, .tabs button:focus-visible, .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* gamepad / keyboard focus in menus and dialogs */
.pad-focus { outline: 2px solid var(--accent) !important; outline-offset: 3px; box-shadow: 0 0 0 6px var(--accent-soft), 0 0 26px var(--accent-glow) !important; }
.btn.pad-focus { transform: scale(1.03); }

/* glyphs: what to press, drawn for the device in use (body[data-device] kb | pad | touch,
   body[data-pad] xbox | ps) */
.glyph { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; font-family: var(--display); font-weight: 800; font-size: 12.5px; line-height: 1; color: var(--text); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); flex: none; }
.glyph.face { border-radius: 50%; padding: 0; width: 24px; border: 0; color: #fff; font-size: 13px; }
.glyph.face.ga { background: #2fa84a; } .glyph.face.gb { background: #d9433a; } .glyph.face.gx { background: #2d79d8; } .glyph.face.gy { background: #e1b22a; color: #1d1600; }
body[data-pad="ps"] .glyph.face { background: #26262b; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 14px; }
body[data-pad="ps"] .glyph.face.ga { color: #7aa7ff; } body[data-pad="ps"] .glyph.face.gb { color: #ff6b6b; }
body[data-pad="ps"] .glyph.face.gx { color: #ff8ad8; } body[data-pad="ps"] .glyph.face.gy { color: #5fe0a6; }
.glyph.shoulder { border-radius: 8px 8px 5px 5px; font-size: 11px; padding: 0 7px; }
.glyph.stick { border-radius: 50%; padding: 0; width: 24px; font-size: 11px; }
.glyph .ico { width: 14px; height: 14px; display: block; }
.glyph.icon { padding: 0 4px; gap: 1px; grid-auto-flow: column; }
.glyph.face .ico { width: 13px; height: 13px; }
.ico { flex: none; }
.star .ico { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; color: var(--gold); }
.opt .ov .arr .ico { width: 16px; height: 16px; display: block; }
.kb-only, .pad-only { display: contents; }
body[data-device="pad"] .kb-only, body:not([data-device="pad"]) .pad-only, body[data-device="touch"] .kb-only { display: none !important; }

/* =====================================================================================
   Menu shell: top bar (logo, sections, player), the stage (screens), the prompt bar
   ===================================================================================== */
#menu { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); pointer-events: none; }
#menu > * { pointer-events: auto; }
/* the city stays visible: dark only where the type sits (top, left, bottom) */
#menu::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.86) 0, rgba(8, 8, 10, 0.25) 120px, transparent 220px), linear-gradient(90deg, rgba(8, 8, 10, 0.72) 0, rgba(8, 8, 10, 0.35) 38%, transparent 62%), linear-gradient(0deg, rgba(8, 8, 10, 0.78) 0, transparent 140px); }
.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 22px 10px; }
.tb-logo { background: none; border: 0; padding: 4px 6px; border-radius: 10px; flex: none; }
.sections { display: flex; align-items: center; gap: 4px; margin: 0 auto; padding: 4px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); }
.sections button { position: relative; background: none; border: 0; padding: 9px 16px 10px; border-radius: 10px; font-family: var(--display); font-weight: 700; font-style: italic; font-size: 17px; color: #bdbab2; transition: color 0.18s, background 0.18s; }
.sections button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.sections button.active { color: var(--text); }
.sections button.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--accent); transform: skewX(-25deg); box-shadow: 0 0 12px var(--accent-glow); animation: tab-bar 0.3s var(--ease-out); }
@keyframes tab-bar { from { transform: skewX(-25deg) scaleX(0.2); opacity: 0; } }
.sections .glyph { margin: 0 4px; }
.tb-right { display: flex; align-items: center; gap: 12px; }
.player-chip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); cursor: pointer; transition: background 0.16s; }
.player-chip:hover { background: rgba(255, 255, 255, 0.09); }
.player-chip .avatar { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 17px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), #8fd11a); }
.player-chip .pc-name { font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.05; display: flex; align-items: center; }
.player-chip .pc-sub { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.tier-badge { font-family: var(--display); font-weight: 700; font-size: 12px; }
.cash { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 22px; color: var(--accent); letter-spacing: 0.01em; text-shadow: 0 0 18px rgba(200, 244, 60, 0.25); }
.cash.bump { animation: cash-bump 0.5s var(--ease-snap); }
@keyframes cash-bump { 40% { transform: scale(1.12); } }
.icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.05); display: grid; place-items: center; transition: background 0.16s, transform 0.3s var(--ease-out); }
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.icon-btn.active { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 20px; height: 20px; }
.online-dot { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.online-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.queue-chip { font-family: var(--display); font-weight: 700; padding: 6px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(200, 244, 60, 0.4); font-size: 14px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.6; } }

.stage { position: relative; min-height: 0; overflow: hidden; }
/* one screen at a time; a new one slides in from the side you moved to, the old one out */
.scr { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 26px 26px; }
.scr.enter-from-right { animation: scr-in-r 0.42s var(--ease-out) both; }
.scr.enter-from-left { animation: scr-in-l 0.42s var(--ease-out) both; }
.scr.enter-from-below { animation: scr-in-b 0.42s var(--ease-out) both; }
.scr.leave-to-left { animation: scr-out-l 0.26s ease-in both; pointer-events: none; }
.scr.leave-to-right { animation: scr-out-r 0.26s ease-in both; pointer-events: none; }
.scr.leave-to-below { animation: scr-out-b 0.22s ease-in both; pointer-events: none; }
@keyframes scr-in-r { from { opacity: 0; transform: translateX(60px) skewX(-4deg); filter: blur(3px); } }
@keyframes scr-in-l { from { opacity: 0; transform: translateX(-60px) skewX(4deg); filter: blur(3px); } }
@keyframes scr-in-b { from { opacity: 0; transform: translateY(26px); } }
@keyframes scr-out-l { to { opacity: 0; transform: translateX(-50px) skewX(4deg); } }
@keyframes scr-out-r { to { opacity: 0; transform: translateX(50px) skewX(-4deg); } }
@keyframes scr-out-b { to { opacity: 0; transform: translateY(18px); } }
/* staggered entry of a screen's parts */
.scr .rise { animation: rise 0.5s var(--ease-out) both; animation-delay: calc(0.06s + var(--d, 0) * 0.05s); }
.d0 { --d: 0; } .d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; } .d4 { --d: 4; } .d5 { --d: 5; } .d6 { --d: 6; } .d7 { --d: 7; } .d8 { --d: 8; } .d9 { --d: 9; } .d10 { --d: 10; } .d11 { --d: 11; } .d12 { --d: 12; } .d13 { --d: 13; } .d14 { --d: 14; } .d15 { --d: 15; } .d16 { --d: 16; } .d17 { --d: 17; } .d18 { --d: 18; } .d19 { --d: 19; } .d20 { --d: 20; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
/* the menu itself opening over the game */
#menu.opening .topbar { animation: drop-in 0.4s var(--ease-out) both; }
#menu.opening .prompt-bar { animation: up-in 0.4s var(--ease-out) both; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-20px); } }
@keyframes up-in { from { opacity: 0; transform: translateY(20px); } }

.prompt-bar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 22px 14px; min-height: 52px; }
.prompt-bar .pb-left { margin-right: auto; display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; }
.prompt { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 10px; border-radius: 9px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--text); transition: background 0.15s; animation: prompt-in 0.3s var(--ease-out) both; }
.prompt:hover { background: rgba(255, 255, 255, 0.07); }
@keyframes prompt-in { from { opacity: 0; transform: translateY(6px); } }
body[data-device="touch"] .prompt-bar .prompt { display: none; }

/* =====================================================================================
   Building blocks
   ===================================================================================== */
.scr h1 { font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1; margin: 6px 0 6px; letter-spacing: -0.01em; }
.scr h2 { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 26px; margin: 0 0 4px; }
.scr h3 { font-family: var(--display); font-weight: 700; font-size: 17px; margin: 22px 0 10px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.scr h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lead { color: var(--muted); margin: 0 0 18px; max-width: 62ch; line-height: 1.55; }
.eyebrow { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ''; width: 16px; height: 3px; background: var(--accent); transform: skewX(-25deg); border-radius: 1px; }
.panel { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.45); display: inline-block; vertical-align: middle; }
.rarity { font-family: var(--display); font-weight: 700; font-size: 13px; }
.make { font-size: 12.5px; color: var(--muted); }
.pr { font-family: var(--display); font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
.pr .cls { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); font-size: 15px; font-style: italic; }
.cls-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); font-family: var(--display); font-weight: 800; font-size: 12px; }
.cls-D { color: #a8b0bc; } .cls-C { color: #5fd38f; } .cls-B { color: #4aa8ff; } .cls-A { color: #b77cff; } .cls-S { color: #ffc23d; } .cls-X { color: #ff4b78; }
.tag { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.tag.protect { color: var(--accent); background: var(--accent-soft); }
.tag.lock { color: var(--gold); background: rgba(255, 194, 61, 0.12); }
.stats { display: grid; grid-template-columns: 82px 1fr 66px; gap: 7px 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.bar { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; position: relative; }
.bar > div { height: 100%; background: linear-gradient(90deg, rgba(200, 244, 60, 0.55), var(--accent)); border-radius: 3px; transition: width 0.5s var(--ease-out); }
.bar > i { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 3px, transparent 3px 6px); opacity: 0.7; transition: left 0.4s var(--ease-out), width 0.4s var(--ease-out); }
.bar > i.down { background: repeating-linear-gradient(90deg, rgba(255, 79, 94, 0.9) 0 3px, transparent 3px 6px); }
.stats .v { text-align: right; color: var(--text); font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.stats .v .up { color: var(--accent); } .stats .v .dn { color: var(--bad); }
.price { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 22px; color: var(--accent); }
.price.cant { color: var(--muted); }
table.lb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.lb th { text-align: left; font-size: 12px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
table.lb td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.lb tr { transition: background 0.15s; }
table.lb tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
table.lb tr.me td { background: var(--accent-soft); }
table.lb td.rank { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 18px; width: 54px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.kpi { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; }
.kpi .k { font-size: 12px; color: var(--muted); }
.kpi .v { font-family: var(--display); font-size: 24px; font-weight: 800; font-style: italic; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rules { color: var(--muted); line-height: 1.6; padding-left: 18px; margin: 8px 0; }
.res-win { color: var(--accent); font-weight: 800; font-family: var(--display); }
.res-loss { color: var(--bad); font-weight: 800; font-family: var(--display); }
.res-void { color: var(--muted); font-weight: 800; font-family: var(--display); }
.match-row { display: grid; grid-template-columns: 62px 1fr auto auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.select { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 11px; color: var(--text); min-width: 220px; }

/* carousel: a row of cards that scrolls sideways, the focused one in the middle */
.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 40vw 14px 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 60px), transparent); }
.carousel::-webkit-scrollbar { display: none; }
.car-chip { flex: 0 0 auto; width: 176px; scroll-snap-align: center; text-align: left; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 5px; transition: transform 0.25s var(--ease-out), border-color 0.2s, background 0.2s; }
.car-chip:hover { background: rgba(30, 30, 34, 0.86); }
.car-chip .cc-make { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.car-chip .cc-name { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 19px; line-height: 1.05; }
.car-chip .cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.car-chip.sel { border-color: var(--accent); background: linear-gradient(160deg, rgba(200, 244, 60, 0.13), var(--glass) 60%); transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.car-chip .cc-price { font-family: var(--display); font-weight: 800; font-style: italic; color: var(--accent); }
.car-chip .cc-price.cant { color: var(--muted); }
.car-chip .cc-flag { font-size: 11px; color: var(--accent); }

/* settings rows: label on the left, the value on the right (left/right change it) */
.opts { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.opt { display: grid; grid-template-columns: 1fr minmax(220px, auto); align-items: center; gap: 16px; padding: 12px 16px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); text-align: left; width: 100%; color: var(--text); transition: border-color 0.16s, background 0.16s; }
.opt:hover { background: rgba(28, 28, 32, 0.86); }
.opt .ol { display: flex; flex-direction: column; gap: 2px; }
.opt .ol b { font-family: var(--display); font-size: 16px; font-weight: 700; }
.opt .ol span { color: var(--muted); font-size: 12.5px; }
.opt .ov { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 16px; }
.opt .ov .arr { color: var(--dim); font-size: 13px; transition: color 0.15s, transform 0.15s; }
.opt:hover .ov .arr, .opt.pad-focus .ov .arr { color: var(--accent); }
.opt .ov .val { min-width: 120px; text-align: center; }
.opt .slider { width: 180px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); position: relative; }
.opt .slider > div { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.opt .slider > i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.opt.pad-focus { box-shadow: 0 0 0 4px var(--accent-soft) !important; }

/* bindings (settings > controls) */
.binds { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 18px; max-width: 900px; }
.bind { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); }
.bind span { color: var(--muted); }
.bind .keys { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

/* =====================================================================================
   Screens
   ===================================================================================== */
/* play: a hero line and big tiles, the car on the right */
.play-wrap { max-width: 860px; display: flex; flex-direction: column; gap: 16px; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; overflow: hidden; text-align: left; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 18px; min-height: 132px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; color: var(--text);
  transition: transform 0.25s var(--ease-out), border-color 0.2s, box-shadow 0.25s; grid-column: span 2; }
.tile.wide { grid-column: span 4; min-height: 180px; }
.tile.half { grid-column: span 3; }
.tile::before { content: ''; position: absolute; inset: 0; background: var(--tile-bg, none); opacity: 0.9; z-index: -1; transition: transform 0.6s var(--ease-out); }
.tile:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.24); }
.tile:hover::before, .tile.pad-focus::before { transform: scale(1.06); }
.tile.pad-focus { transform: translateY(-3px) scale(1.015); }
.tile .t-ico { position: absolute; right: 16px; top: 14px; width: 44px; height: 44px; color: var(--accent); opacity: 0.9; }
.tile .t-kicker { font-size: 12.5px; color: var(--muted); padding-right: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line, clear of the icon in the corner */
.tile .t-title { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 26px; line-height: 1; }
.tile.wide .t-title { font-size: 36px; }
.tile .t-sub { color: var(--muted); font-size: 13px; line-height: 1.4; max-width: 46ch; }
.tile.primary { border-color: rgba(200, 244, 60, 0.55); }
.tile.primary .t-title { color: var(--accent); }
.tile:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
/* in the flow, above the kicker: the tile grows rather than the badge covering text */
.tile .t-badge { align-self: flex-start; margin-bottom: 4px; font-family: var(--display); font-weight: 700; font-size: 12px; padding: 3px 9px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); }
.road { display: flex; gap: 8px; align-items: stretch; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.road::-webkit-scrollbar { display: none; }
.road .rs { flex: 0 0 auto; min-width: 150px; max-width: 220px; padding: 10px 12px; border-radius: 12px; background: var(--glass-soft); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
.road .rs b { font-family: var(--display); font-size: 15px; color: var(--text); }
.road .rs.done { opacity: 0.5; }
.road .rs b .ico { width: 14px; height: 14px; color: var(--accent); vertical-align: -2px; margin-right: 4px; }
.road .rs.next { border-color: rgba(200, 244, 60, 0.6); background: linear-gradient(160deg, rgba(200, 244, 60, 0.12), transparent); }

/* garage and dealership: the car is the screen. Info top left, actions on the right, the
   collection along the bottom */
.showroom { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(280px, 360px) 1fr minmax(220px, 280px); grid-template-rows: 1fr auto; padding: 8px 26px 6px; gap: 0 18px; pointer-events: none; }
.showroom > * { pointer-events: auto; }
.sr-info { grid-column: 1; grid-row: 1; align-self: start; display: flex; flex-direction: column; gap: 10px; }
.sr-info .sr-name { font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(32px, 4.2vw, 50px); line-height: 0.95; margin: 2px 0; }
.sr-info .sr-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-info .panel { padding: 14px 16px; }
.sr-actions { grid-column: 3; grid-row: 1; align-self: center; display: flex; flex-direction: column; gap: 8px; }
.sr-actions .btn { justify-content: space-between; width: 100%; padding: 13px 16px; font-size: 17px; }
.sr-actions .btn .glyph { order: 2; margin: 0; }
.sr-strip { grid-column: 1 / -1; grid-row: 2; min-width: 0; position: relative; }
.sr-strip .carousel { padding-left: calc(50% - 88px); padding-right: calc(50% - 88px); }
.sr-hint { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 4px; white-space: nowrap; font-size: 12.5px; color: #d6d3cb; display: flex; gap: 8px; align-items: center; pointer-events: none; padding: 4px 12px 4px 6px; border-radius: 999px; background: rgba(10, 10, 12, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* tune / paint: a panel that slides in on the right, the car stays in view */
.drawer { grid-column: 3; grid-row: 1; align-self: center; background: var(--glass-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; animation: drawer-in 0.36s var(--ease-out) both; width: 100%; }
@keyframes drawer-in { from { opacity: 0; transform: translateX(30px); } }
.drawer h2 { font-size: 22px; }
.up-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--glass-soft); border: 1px solid var(--line); text-align: left; color: var(--text); width: 100%; }
.up-row b { font-family: var(--display); font-size: 16px; }
.up-row .pips { display: flex; gap: 4px; grid-column: 1; }
.up-row .pips i { width: 26px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); transform: skewX(-25deg); }
.up-row .pips i.on { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.up-row .cost { font-family: var(--display); font-weight: 800; font-style: italic; color: var(--accent); grid-row: 1 / span 2; grid-column: 2; }
.up-row .cost.cant { color: var(--muted); }
.up-row .sub { grid-column: 1; font-size: 12px; color: var(--muted); }
.swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.swatches button { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); transition: transform 0.18s var(--ease-snap), border-color 0.15s; }
.swatches button:hover { transform: scale(1.12); }
.swatches button.cur { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); }

/* crates */
.crate-stage { max-width: 720px; display: grid; place-items: center; gap: 16px; padding: 26px; border-radius: 18px; background: radial-gradient(ellipse at 50% 0, rgba(200, 244, 60, 0.1), transparent 70%), var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.reel { width: min(560px, 100%); height: 84px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line-strong); position: relative; background: rgba(0, 0, 0, 0.45); }
.reel::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%) skewX(-12deg); background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.reel-track { display: flex; height: 100%; will-change: transform; }
.reel-item { flex: 0 0 130px; display: grid; place-items: center; text-align: center; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 15px; line-height: 1.1; border-right: 1px solid var(--line); padding: 4px; }
.crate-result { font-family: var(--display); font-size: 30px; font-weight: 800; font-style: italic; text-align: center; min-height: 36px; }
.crate-result.reveal { animation: reveal 0.7s var(--ease-snap); }
@keyframes reveal { 0% { transform: scale(0.6); opacity: 0; filter: blur(8px); } 60% { transform: scale(1.08); opacity: 1; filter: none; } }
.odds { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 13px; }
.odds .p { font-variant-numeric: tabular-nums; text-align: right; }

/* compete */
.comp-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(300px, 1fr); gap: 16px; max-width: 1100px; align-items: start; }
.rank-hero { padding: 20px; border-radius: 18px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), transparent), var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 12px; }
.rank-hero .tier { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 40px; line-height: 1; }
.rank-hero .mmr { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--muted); }
.progress { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, rgba(200, 244, 60, 0.6), var(--accent)); border-radius: 4px; }
.stake-list { display: flex; flex-direction: column; gap: 6px; }
.stake-list .opt { grid-template-columns: 1fr auto; }

/* daily run */
.daily-card { border-color: rgba(200, 244, 60, 0.4); background: linear-gradient(135deg, rgba(200, 244, 60, 0.1), rgba(255, 255, 255, 0.02)), var(--glass); }
.daily-card .daily-head { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.daily-card h3 { margin: 2px 0 4px; font-size: 22px; color: var(--text); }
.daily-card h3::after { display: none; }
.daily-top { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; max-width: 360px; }
.daily-top li { display: flex; justify-content: space-between; color: var(--muted); }
.daily-top li:first-child { color: var(--accent); }

/* race select: routes in a row, details of the focused one below */
.routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; max-width: 1100px; }
.route { text-align: left; position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 14px; color: var(--text); display: flex; flex-direction: column; gap: 6px; min-height: 150px; transition: transform 0.22s var(--ease-out), border-color 0.2s; }
.route:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.22); }
.route .rt-map { position: absolute; right: -6px; top: -6px; width: 96px; height: 96px; opacity: 0.55; }
.route .rt-kind { font-size: 12.5px; color: var(--accent); font-family: var(--display); font-weight: 700; }
.route .rt-name { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 22px; line-height: 1; max-width: 70%; }
.route .rt-blurb { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.route .rt-foot { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.route.sel { border-color: var(--accent); background: linear-gradient(160deg, rgba(200, 244, 60, 0.12), var(--glass) 60%); }
.race-bar { position: sticky; bottom: -26px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line-strong); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: 1100px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.race-bar .rb-info { margin-right: auto; display: flex; flex-direction: column; gap: 2px; }
.race-bar .rb-info b { font-family: var(--display); font-size: 18px; font-style: italic; }
.race-bar .rb-info span { color: var(--muted); font-size: 13px; }

/* profile */
.prof-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.prof-head .avatar { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 34px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), #8fd11a); box-shadow: 0 10px 30px rgba(200, 244, 60, 0.2); }

/* settings */
.set-wrap { max-width: 900px; display: flex; flex-direction: column; gap: 14px; }
.set-wrap .seg { max-width: 640px; }

/* =====================================================================================
   Modal & toasts
   ===================================================================================== */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(5, 5, 7, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 16px; animation: fade-in 0.2s ease both; }
@keyframes fade-in { from { opacity: 0; } }
.modal-card { position: relative; width: min(540px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--glass-strong); border: 1px solid var(--line-strong); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7); animation: modal-in 0.34s var(--ease-snap) both; }
.modal-card::before { content: ''; position: absolute; left: 26px; top: 0; width: 64px; height: 3px; background: var(--accent); transform: skewX(-25deg); border-radius: 2px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.modal-card h2 { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 32px; line-height: 1.05; margin: 0; }
.modal-card .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; text-align: center; }
.vs .side { background: var(--glass-soft); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.vs .name { font-family: var(--display); font-size: 22px; font-weight: 800; font-style: italic; }
.vs .x { font-family: var(--display); font-size: 30px; color: var(--accent); font-weight: 800; font-style: italic; }
#toasts { position: fixed; top: 78px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: max-content; max-width: min(640px, calc(100vw - 32px)); text-align: center; }
body.touch #toasts { top: 128px; }
.toast { font-family: var(--display); font-weight: 700; font-size: 17px; padding: 9px 18px 9px 16px; border-radius: 11px; background: rgba(14, 14, 17, 0.9); border: 1px solid var(--line-strong); border-left: 3px solid var(--text); animation: toast-in 0.3s var(--ease-snap); text-shadow: 0 1px 6px #000; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.toast.good { border-left-color: var(--accent); color: var(--accent); }
.toast.bad { border-left-color: var(--bad); color: #ff98a1; }
.toast.cop { border-left-color: var(--cop-blue); color: #9fd0ff; }
.toast.gold { border-left-color: var(--gold); color: var(--gold); }
@media (max-width: 520px) { .toast { font-size: 15px; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(0.96); } }
#update-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--glass-strong); border: 1px solid var(--accent); border-radius: 12px; color: var(--text); font-size: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); }
#update-banner .btn { padding: 6px 12px; }
.perf-stats { position: fixed; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 80; font: 12px/1.2 ui-monospace, Consolas, monospace; color: #dfffa0; background: rgba(0, 0, 0, 0.6); padding: 4px 8px; border-radius: 6px; pointer-events: none; }

/* =====================================================================================
   HUD
   ===================================================================================== */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: var(--display); }
.hud-tl { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 10px; }
.hud-tr { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.district { font-size: 21px; font-weight: 800; font-style: italic; text-shadow: 0 2px 12px #000; opacity: 0.92; transition: opacity 0.6s; }
.pursuit { background: rgba(12, 12, 15, 0.78); border: 1px solid rgba(255, 59, 79, 0.35); border-radius: 12px; padding: 10px 14px; width: 244px; display: flex; flex-direction: column; gap: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.heat { display: flex; gap: 4px; }
.heat i { flex: 1; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); transform: skewX(-25deg); }
.heat i.on { background: var(--cop-red); box-shadow: 0 0 8px var(--cop-red); }
.pursuit-status { font-size: 23px; font-weight: 800; font-style: italic; color: var(--cop-red); }
.pursuit-status.cool { color: var(--cop-blue); }
.pursuit-status.hide { color: var(--accent); }
.bounty { font-size: 15px; color: var(--muted); }
.bounty b { color: var(--accent); font-size: 19px; font-style: italic; }
.meter { position: relative; height: 14px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; }
.meter > div { height: 100%; width: 0; }
.meter.evade > div { background: var(--cop-blue); }
.meter.bust > div { background: var(--cop-red); }
.meter span { position: absolute; inset: 0; font-size: 11px; display: grid; place-items: center; color: rgba(255, 255, 255, 0.8); font-weight: 700; }
.preport { position: absolute; left: 16px; top: 16px; background: rgba(12, 12, 15, 0.84); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 14px 12px; width: 280px; display: flex; flex-direction: column; gap: 2px; animation: preport-in 0.38s var(--ease-out); transition: opacity 0.45s, transform 0.45s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.preport.escaped { border-color: rgba(61, 139, 255, 0.45); box-shadow: inset 3px 0 0 var(--cop-blue); }
.preport.busted { border-color: rgba(255, 59, 79, 0.45); box-shadow: inset 3px 0 0 var(--cop-red); }
.preport.out { opacity: 0; transform: translateX(-18px); }
@keyframes preport-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.pr-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; font-size: 12px; color: var(--muted); }
.pr-head b { font-size: 20px; font-style: italic; }
.preport.escaped .pr-head b { color: var(--cop-blue); }
.preport.busted .pr-head b { color: var(--cop-red); }
.pr-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 8px; padding: 2px 0; font-size: 13px; color: #cfccc4; opacity: 0; transform: translateX(-10px); transition: opacity 0.22s, transform 0.22s; }
.pr-row.in { opacity: 1; transform: none; }
.pr-row b { font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.pr-row > span > i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 4px; padding: 1px 5px 0; margin-left: 4px; vertical-align: 2px; }
.pr-heat { display: inline-flex; gap: 3px; vertical-align: 1px; }
.pr-heat i { width: 12px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); transform: skewX(-25deg); }
.pr-heat i.on { background: var(--cop-red); box-shadow: 0 0 6px var(--cop-red); }
.pr-foot { margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line-strong); font-size: 13px; }
.pr-foot b { font-size: 22px; font-style: italic; }
.pr-foot.gain b { color: var(--accent); }
.pr-foot.loss b { color: #ff7480; }
.pr-foot small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .preport, .pr-row { animation: none; transition: none; } }
@media (max-width: 760px) { .preport { width: 232px; padding: 8px 11px 10px; } .pr-row { font-size: 12px; } .pr-row b { font-size: 14px; } .pr-foot b { font-size: 19px; } }
body.touch .preport { left: 10px; top: 136px; transform-origin: top left; scale: 0.85; }
/* short screens (phones on their side): across the top in two columns, half the height, clear
   of the steering pad and the pedals */
@media (max-height: 500px) {
  /* between the speedometer (left) and the pedals (right: 190 px wide, 14 px in), centred in that band */
  .preport, body.touch .preport { left: 128px; right: 216px; top: 56px; scale: 1; width: auto; max-width: 440px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 0; padding: 6px 12px 8px; }
  .pr-head, .pr-foot { grid-column: 1 / -1; }
  .pr-head { margin-bottom: 2px; }
  .pr-head b { font-size: 17px; }
  .pr-row { font-size: 11.5px; padding: 1px 0; }
  .pr-row:not(.pr-foot) { flex-wrap: nowrap; white-space: nowrap; }
  .pr-row b { font-size: 13px; }
  .pr-row > span > i { font-size: 9px; padding: 0 4px; }
  .pr-foot { margin-top: 3px; padding-top: 4px; }
  .pr-foot b { font-size: 17px; }
  /* the live pursuit panel, tighter, so it ends well above the steering pad */
  .pursuit { gap: 3px; padding: 7px 11px 8px; }
  .pursuit-status { font-size: 19px; line-height: 1.1; }
  .bounty { font-size: 13px; }
  .bounty b { font-size: 16px; }
  .meter { height: 11px; }
  .meter span { font-size: 10px; }
}
.race { background: rgba(12, 12, 15, 0.78); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 200px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.race-pos b { font-size: 56px; line-height: 1; color: var(--accent); font-style: italic; }
.race-pos span { font-size: 22px; color: var(--muted); }
.race-info { display: flex; gap: 16px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
#minimap { position: absolute; left: 16px; bottom: 16px; width: 220px; height: 220px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35); background: rgba(10, 10, 12, 0.6); }
.speedo { position: absolute; right: 20px; bottom: 18px; width: 230px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.speed b { font-size: 76px; line-height: 0.9; font-weight: 800; font-style: italic; font-variant-numeric: tabular-nums; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7); }
.speed span { font-size: 15px; color: var(--muted); margin-left: 6px; }
.gear { position: absolute; right: 236px; bottom: 34px; font-size: 40px; font-weight: 800; color: var(--accent); }
.rpm { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; }
.rpm > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #ffd23d 70%, var(--bad)); }
.nitro { position: relative; width: 100%; height: 14px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; transform: skewX(-20deg); }
.nitro > div { height: 100%; background: linear-gradient(90deg, #2f86ff, #7fe0ff); width: 100%; }
.nitro.boost > div { background: linear-gradient(90deg, #7fe0ff, #fff); box-shadow: 0 0 14px #7fe0ff; }
.nitro span { position: absolute; inset: 0; font-size: 11px; display: grid; place-items: center; color: rgba(255, 255, 255, 0.85); font-weight: 700; transform: skewX(20deg); }
/* big calls (the countdown, Busted, Escaped): a dark edge behind the letters so they read over
   pale facades and sky, and low enough to clear the guide arrow over the road ahead */
.center-msg { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; font-size: clamp(48px, 10vw, 120px); font-weight: 800; font-style: italic; letter-spacing: -0.01em; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8); white-space: nowrap;
  -webkit-text-stroke: 0.05em rgba(8, 8, 10, 0.88); paint-order: stroke fill; }
.center-msg small { display: block; font-size: 20px; color: var(--muted); font-style: normal; font-weight: 700; -webkit-text-stroke: 0; }
.center-msg.pop { animation: center-pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes center-pop { 0% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; filter: blur(6px); } 45% { transform: translate(-50%, -50%) scale(0.94); opacity: 1; filter: blur(0); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .center-msg.pop { animation: none; } }
.center-msg.go { color: var(--accent); }
.center-msg.busted { color: var(--cop-red); }
.center-msg.escaped { color: var(--cop-blue); }
.split-chip { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); padding: 6px 16px; border-radius: 10px; background: rgba(12, 12, 15, 0.78); border: 1px solid var(--line-strong); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.split-chip small { font-size: 13px; color: var(--muted); margin-right: 10px; font-weight: 700; }
.split-chip.ahead { color: var(--accent); border-color: rgba(200, 244, 60, 0.5); }
.split-chip.behind { color: #ff6b78; border-color: rgba(255, 79, 94, 0.45); }
.spiked-chip { position: absolute; right: 24px; bottom: 132px; background: rgba(40, 8, 12, 0.85); border: 1px solid rgba(255, 79, 94, 0.75); color: #ff9aa3; border-radius: 10px; padding: 6px 12px; font-family: var(--display); font-weight: 800; font-size: 15px; animation: spiked-pulse 0.9s ease-in-out infinite alternate; }
.spiked-chip b { color: #fff; margin-left: 6px; }
@keyframes spiked-pulse { from { box-shadow: 0 0 0 rgba(255, 79, 94, 0); } to { box-shadow: 0 0 18px rgba(255, 79, 94, 0.45); } }
body.touch .spiked-chip { right: auto; left: 50%; transform: translateX(-50%); bottom: auto; top: 112px; }
.draft-chip { position: absolute; right: 0; top: -30px; padding: 3px 10px; border-radius: 7px; font-family: var(--display); font-weight: 800; font-size: 13px; color: #c9f3ff; background: rgba(8, 36, 48, 0.78); border: 1px solid rgba(110, 220, 255, 0.6); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.draft-chip.on { opacity: 1; }
.radio { position: absolute; left: 20px; bottom: 258px; width: 340px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.radio-line { background: rgba(10, 12, 18, 0.76); border-left: 3px solid var(--cop-blue); padding: 5px 9px; border-radius: 5px; font-family: var(--body); font-size: 13px; line-height: 1.3; color: #dde7f2; transition: opacity 0.4s; }
.radio-line b { color: #9fd0ff; font-weight: 700; }
body.touch .radio { left: 50%; transform: translateX(-50%); bottom: auto; top: 150px; width: min(340px, 86vw); }
@media (max-width: 760px) { .radio { width: 260px; } .radio-line { font-size: 12px; } }
.tach { position: relative; width: 220px; height: 220px; align-self: flex-end; }
.tach canvas { width: 100%; height: 100%; display: block; }
.tach-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 34px; }
.tach-center .gear { position: static; font-family: var(--display); font-size: 30px; line-height: 1; color: var(--accent); font-style: italic; }
.tach-center .speed { display: flex; flex-direction: column; align-items: center; }
.tach-center .speed b { font-size: 56px; line-height: 0.95; }
.tach-center .speed span { margin: 0; font-size: 12px; }
/* the smaller dial goes with the narrower speedo (860 px and below), else it overflows it */
@media (max-width: 860px) { .tach { width: 170px; height: 170px; } .tach-center .speed b { font-size: 42px; } .tach-center .gear { display: block !important; font-size: 22px; } }
/* duels */
.challenge-prompt { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); pointer-events: auto; background: rgba(12, 12, 15, 0.84); border: 1px solid rgba(200, 244, 60, 0.6); color: var(--text); border-radius: 12px; padding: 8px 14px; font-family: var(--display); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.challenge-prompt kbd { color: var(--accent); }
.invite-card { position: absolute; right: 16px; top: 120px; width: 280px; pointer-events: auto; background: var(--glass-strong); border: 1px solid rgba(200, 244, 60, 0.6); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); animation: toast-in 0.25s ease-out; }
.invite-card .inv-title { font-family: var(--display); font-weight: 800; font-style: italic; color: var(--accent); font-size: 16px; }
.invite-card .inv-body { font-size: 13px; line-height: 1.5; }
.invite-card .inv-actions { display: flex; gap: 8px; justify-content: flex-end; }


/* =====================================================================================
   Touch controls
   ===================================================================================== */
#touch { position: absolute; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
#touch > * { pointer-events: auto; touch-action: none; }
.t-steer { position: absolute; left: 0; bottom: 0; width: 42vw; height: 46vh; display: flex; align-items: center; justify-content: center; }
.t-track { width: 180px; height: 56px; border-radius: 28px; background: rgba(10, 10, 12, 0.45); border: 1px solid rgba(255, 255, 255, 0.18); position: relative; }
.t-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(200, 244, 60, 0.85); box-shadow: 0 0 16px rgba(200, 244, 60, 0.5); }
.t-label { position: absolute; bottom: 16px; font-family: var(--display); font-weight: 700; font-size: 12px; color: rgba(255, 255, 255, 0.35); }
.t-pedals { position: absolute; right: 14px; bottom: 14px; display: grid; grid-template-columns: 84px 96px; grid-template-rows: 64px 120px; gap: 10px; }
.t-btn { border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(10, 10, 12, 0.5); color: rgba(255, 255, 255, 0.88); border-radius: 16px; font-family: var(--display); font-weight: 800; font-size: 15px; }
.t-btn.on { background: rgba(200, 244, 60, 0.6); border-color: var(--accent); color: var(--accent-ink); }
.t-gas { grid-column: 2; grid-row: 2; background: rgba(200, 244, 60, 0.2); border-color: rgba(200, 244, 60, 0.6); }
.t-gas.on { background: rgba(200, 244, 60, 0.75); color: var(--accent-ink); }
.t-brake { grid-column: 1; grid-row: 2; background: rgba(255, 79, 94, 0.22); border-color: rgba(255, 79, 94, 0.55); }
.t-brake.on { background: rgba(255, 79, 94, 0.7); color: #1a0307; }
.t-nitro { grid-column: 2; grid-row: 1; background: rgba(61, 139, 255, 0.22); border-color: rgba(61, 139, 255, 0.55); }
.t-nitro.on { background: rgba(61, 139, 255, 0.7); color: #02101d; }
.t-hb { grid-column: 1; grid-row: 1; }
.t-small { position: absolute; top: 12px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(10, 10, 12, 0.55); color: rgba(255, 255, 255, 0.88); border-radius: 10px; padding: 8px 12px; font-family: var(--display); font-weight: 700; font-size: 13px; }
.t-menu { left: 50%; transform: translateX(-50%); }
.t-reset { left: calc(50% + 60px); }
body.touch .speedo { left: 10px; right: auto; top: 8px; bottom: auto; width: 170px; transform: scale(0.62); transform-origin: top left; align-items: center; }
body.touch .tach { width: 170px; height: 170px; align-self: center; }
body.touch .hud-tl { top: 136px; left: 10px; transform: scale(0.85); transform-origin: top left; }
body.touch .gear { display: none !important; }
body.touch #minimap { left: auto; right: 12px; top: 12px; bottom: auto; width: 120px; height: 120px; }
body.touch .hud-tr { top: 142px; }
body.touch .district { font-size: 14px; }
@media (max-width: 520px) {
  body.touch #minimap { width: 96px; height: 96px; }
  body.touch .hud-tr { top: 116px; }
  body.touch .t-menu { transform: translateX(calc(-100% - 4px)); }
  body.touch .t-reset { left: calc(50% + 4px); }
}

/* =====================================================================================
   Smaller screens
   ===================================================================================== */
@media (max-width: 1100px) {
  .showroom { grid-template-columns: minmax(250px, 320px) 1fr minmax(200px, 240px); }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile, .tile.half { grid-column: span 2; }
  .tile.wide { grid-column: span 4; }
}
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px 6px; }
  .sections { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .sections::-webkit-scrollbar { display: none; }
  .sections button { font-size: 15px; padding: 8px 12px 9px; white-space: nowrap; }
  .tb-right { margin-left: auto; gap: 8px; }
  .player-chip .pc-sub, #tb-online, .player-chip .pc-name { display: none; }
  .player-chip { padding: 4px; }
  .cash { font-size: 19px; }
  .tb-right { gap: 6px; }
  #btn-claim { padding: 6px 10px; font-size: 13px; }
  .scr { padding: 6px 14px 18px; }
  .showroom { display: flex; flex-direction: column; padding: 6px 14px 4px; gap: 8px; }
  .sr-info { order: 1; }
  .sr-info .panel { display: none; }
  .sr-strip { order: 3; margin-top: auto; }
  .sr-actions { order: 4; flex-direction: row; flex-wrap: wrap; align-self: stretch; }
  .sr-strip { align-self: stretch; }
  .sr-strip .carousel { padding: 10px 16px 12px; }
  .drawer { align-self: stretch; }
  .sr-actions .btn { width: auto; flex: 1 1 40%; padding: 11px 12px; font-size: 15px; }
  .drawer { order: 4; }
  .sr-hint { display: none; }
  .comp-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile.half, .tile.wide { grid-column: span 2; min-height: 108px; }
  .tile.wide .t-title { font-size: 28px; }
  .opt { grid-template-columns: 1fr; gap: 8px; }
  .opt .ov { justify-content: flex-start; }
  body:has(#menu:not(.hidden)) #hud { visibility: hidden; }
  #minimap { width: 140px; height: 140px; }
  .speedo { width: 170px; }
  .speed b { font-size: 52px; }
  .gear { display: none; }
  .prompt-bar { min-height: 0; padding: 4px 14px 8px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .topbar { flex-wrap: nowrap; padding: 6px 14px 4px; gap: 10px; }
  .sections { order: 0; width: auto; }
  .sections button { font-size: 14px; padding: 6px 10px 7px; }
  .logo-sm { font-size: 16px; }
  .cash { font-size: 18px; }
  .player-chip { display: none; }
  .scr { padding: 4px 14px 12px; }
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .tile, .tile.half { grid-column: span 2; }
  .tile.wide { grid-column: span 4; }
  .tile .t-sub, .tile .t-ico { display: none; }
  .scr h1 { font-size: 26px; }
  .tile { min-height: 92px; padding: 12px; }
  .tile .t-title { font-size: 20px; }
  .tile.wide { min-height: 110px; }
  .play-wrap { max-width: 64%; } /* the car on its turntable to the right of the tiles */
  .tile .t-kicker { padding-right: 0; } /* no corner icons here */
  #btn-claim { white-space: nowrap; }
  .prompt-bar { min-height: 0; padding: 2px 14px 6px; }
  .showroom { padding: 4px 14px 2px; }
  .sr-info .sr-name { font-size: 28px; }
  .sr-info .panel { display: none; }
  .car-chip { width: 150px; padding: 8px 10px; }
  .car-chip .cc-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .scr, .scr .rise, .tile, .modal, .modal-card, .drawer, .toast, .logo-intro *, .logo-idle *, .speedlines i { animation: none !important; transition: none !important; }
  /* and everything else that moves (title screen, results, tab bars, pulsing chips): straight
     to where it ends */
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .logo-intro .lm-plate { stroke-dashoffset: 0; fill-opacity: 1; }
  .logo-intro .lm-stem, .logo-intro .lm-arm, .logo-intro .lw, .logo-intro .logo-mark { opacity: 1; transform: none; }
}
#auth-logo { display: flex; justify-content: center; }
@media (max-width: 520px) { #btn-claim { display: none !important; } .topbar .logo-sm { font-size: 18px; } }
/* results after a race */
.result { display: flex; flex-direction: column; gap: 10px; }
.result .r-title { font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(40px, 7vw, 58px); line-height: 0.95; letter-spacing: -0.01em; animation: r-pop 0.5s var(--ease-snap) both; }
.result .r-title.good { color: var(--accent); text-shadow: 0 0 30px rgba(200, 244, 60, 0.3); }
.result .r-title.gold { color: var(--gold); }
.result .r-title.bad { color: var(--bad); }
@keyframes r-pop { from { opacity: 0; transform: scale(0.8) skewX(-8deg); filter: blur(4px); } }
.result .r-time { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 36px; font-variant-numeric: tabular-nums; line-height: 1; animation: rise 0.45s var(--ease-out) 0.12s both; }
.result .r-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.result .r-chip { padding: 6px 11px; border-radius: 9px; background: var(--glass-soft); border: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 14px; animation: rise 0.4s var(--ease-out) both; }
.result .r-chip.gain { color: var(--accent); background: var(--accent-soft); border-color: rgba(200, 244, 60, 0.4); }
.result .r-chip.loss { color: #ff98a1; background: rgba(255, 79, 94, 0.1); border-color: rgba(255, 79, 94, 0.35); }
.result .r-rows { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.result .r-rows-title { padding: 8px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.result .r-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.result .r-row:last-child { border-bottom: 0; }
.result .r-row.me { background: var(--accent-soft); font-weight: 600; }
.result .r-pos { font-family: var(--display); font-style: italic; font-weight: 800; }
.result .r-t { font-family: var(--display); font-weight: 700; }
/* car side views (ui/silhouette.js) */
.sil { display: block; overflow: visible; }
.car-chip .cc-sil { height: 46px; display: flex; align-items: flex-end; justify-content: center; margin: -2px 0 2px; }
.car-chip .cc-sil .sil { height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); transition: transform 0.3s var(--ease-out); }
.car-chip.sel .cc-sil .sil, .car-chip:hover .cc-sil .sil { transform: translateX(4px) scale(1.04); }
.reel-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.reel-item .sil { height: 34px; width: auto; max-width: 112px; }
.reel-item span { font-size: 13px; }
/* touch buttons: an icon over a small label */
.t-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.t-btn .ico { width: 30px; height: 30px; }
.t-gas .ico { width: 36px; height: 36px; }
.t-btn span { font-size: 12px; opacity: 0.85; }
.t-small { display: grid; place-items: center; padding: 8px 10px; }
.t-small .ico { width: 20px; height: 20px; }
/* ranked: the cars you can stake, each with its side view */
.opt.stake { grid-template-columns: 92px 1fr auto; }
.opt.stake .st-sil .sil { height: 30px; width: auto; max-width: 92px; }
.opt.stake.sel { border-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--glass) 60%); }
/* blurred glass costs GPU time over the running 3D scene: on Low quality and on touch devices the
   panels go opaque instead */
body[data-quality="low"], body.touch { --glass: rgba(17, 17, 20, 0.9); --glass-strong: rgb(14, 14, 17); }
body[data-quality="low"] *, body.touch * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* with no blur behind a dialog, the menu under it stays sharp: a darker veil, and a solid card
   (at 97% the bright text behind still showed through) */
body[data-quality="low"] .modal, body.touch .modal { background: rgba(5, 5, 7, 0.8); }
/* time trials: no place to show, the clock takes its spot */
.race.solo .race-pos { display: none; }
.race.solo .race-info { flex-direction: column; gap: 0; }
.race.solo #hud-time { font-size: 40px; font-style: italic; font-weight: 800; color: var(--accent); line-height: 1; order: -1; }
/* which player this window is, when there are several on one computer */
.seat-chip { flex: none; white-space: nowrap; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 14px; padding: 5px 10px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); }

/* laptop widths: a tighter top bar (the player chip shows just the avatar, the logo just its
   mark), so cash, save and settings stay on screen */
@media (min-width: 861px) and (max-width: 1180px) {
  .topbar { gap: 10px; padding: 12px 16px 10px; }
  .sections button { padding: 9px 11px 10px; font-size: 16px; }
  #tb-online { display: none; }
  .player-chip .pc-name, .player-chip .pc-sub { display: none; }
  .player-chip { padding: 4px; }
  .cash { font-size: 19px; }
  #btn-claim { padding: 7px 12px; font-size: 13px; }
}
@media (min-width: 861px) and (max-width: 1060px) {
  .tb-logo .logo-word { display: none; }
}
/* leave the car a place beside the play tiles and the profile's figures */
@media (min-width: 861px) {
  .play-wrap { max-width: min(860px, 100% - 280px); }
  .scr .kpis { max-width: min(1100px, 100% - 240px) !important; }
}
/* small phones on their side: the logo as its mark, so the top bar fits on one line */
@media (max-height: 500px) and (min-width: 600px) and (max-width: 800px) {
  .tb-logo .logo-word { display: none; }
}
/* short screens: the race panel tighter too, so it ends well above the steering pad (here at
   the end, after the panel's own rules) */
@media (max-height: 500px) {
  .race { padding: 7px 12px 8px; min-width: 0; }
  .race-pos b { font-size: 40px; }
  .race-pos span { font-size: 17px; }
  .race-info { font-size: 15px; gap: 12px; }
  #hud-opp { font-size: 12px; }
  .race.solo #hud-time { font-size: 30px; }
}
/* phones on their side, garage and dealership: the portrait column put the tune and paint
   panels below the screen. Name and tags top left, the car strip bottom left, and the actions
   or the open panel in a column of their own on the right (scrolling if it must) */
@media (max-height: 500px) and (min-width: 600px) {
  .showroom { display: grid; grid-template-columns: minmax(0, 1fr) min(300px, 38%); grid-template-rows: auto 1fr auto; gap: 6px 14px; }
  .sr-info { grid-column: 1; grid-row: 1; }
  .sr-strip { grid-column: 1; grid-row: 3; margin-top: 0; align-self: end; }
  .sr-strip .carousel { padding: 6px 0 8px; }
  .sr-actions { grid-column: 2; grid-row: 1 / 4; align-self: center; flex-direction: column; flex-wrap: nowrap; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
  .sr-actions::-webkit-scrollbar { display: none; }
  .sr-actions .btn { width: 100%; flex: none; padding: 10px 14px; }
  .drawer { padding: 10px 12px; gap: 6px; }
  .drawer h2 { font-size: 18px; }
}
/* phones on their side, races and crates: the route cards hid behind the sticky race bar and
   the crate's button sat below the screen. Intros cut to two lines, slimmer route cards (the
   bar below has the route's details), a slimmer bar and crate stage */
@media (max-height: 500px) and (min-width: 600px) {
  .lead { font-size: 12.5px; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .route { min-height: 0; padding: 9px 11px; gap: 3px; }
  .route .rt-blurb { display: none; }
  .route .rt-map { width: 62px; height: 62px; }
  .route .rt-name { font-size: 18px; }
  .race-bar { padding: 8px 12px; gap: 8px; margin-top: 8px; }
  .race-bar .rb-info b { font-size: 16px; }
  .race-bar .rb-info span { font-size: 12px; }
  .race-bar .btn { padding: 7px 12px; font-size: 14px; }
  .crate-stage { padding: 8px 12px; gap: 6px; }
  .reel { height: 60px; }
  .crate-result { font-size: 22px; min-height: 0; }
  .crate-result:empty { display: none; } /* (its line is kept free on taller screens) */
  .crate-stage .btn.big { padding: 9px 16px; font-size: 16px; }
}
/* upright phones: with the tune or paint panel open the car strip sat over the car itself; you
   don't switch cars while tuning one, so it steps aside until the panel closes */
@media (max-width: 860px) and (orientation: portrait) {
  .showroom:has(.drawer) .sr-strip { display: none; }
  .showroom:has(.drawer) .sr-actions { margin-top: auto; } /* the panel stays at the foot, the car in view above it */
}
/* short screens (phones on their side): toasts smaller and right under the pause and reset
   buttons, so they take less of the road ahead */
@media (max-height: 500px) {
  #toasts, body.touch #toasts { top: 56px; max-width: min(560px, 64vw); gap: 4px; }
  .toast { font-size: 14px; padding: 6px 12px 6px 11px; border-radius: 9px; }
}
/* short screens: the duel invite sat over the minimap and under the drift and nitro buttons, so
   a tap meant for Accept could land on Nitro. It comes top centre instead, between the
   speedometer and the minimap, and any toast moves down below it */
@media (max-height: 500px) {
  /* between the speedometer (left) and the pedals (190 px wide, 14 px in), centred in that band */
  .invite-card { left: 128px; right: 216px; top: 56px; width: auto; max-width: 360px; margin-inline: auto; padding: 9px 12px; gap: 5px; }
  .invite-card .inv-title { font-size: 14px; }
  .invite-card .inv-body { font-size: 12px; line-height: 1.4; }
  body:has(#hud-invite:not(.hidden)) #toasts { top: 196px; }
}
/* touch: the "challenge to a duel" prompt sat on the steering pad and the drift button (upright)
   or over the car (on its side). Upright it now sits just above the controls; on short screens
   at the top, in the band between the speedometer and the pedals */
body.touch .challenge-prompt { bottom: 236px; white-space: nowrap; max-width: calc(100vw - 32px); }
@media (max-height: 500px) {
  .challenge-prompt, body.touch .challenge-prompt { left: 128px; right: 216px; width: fit-content; margin-inline: auto; transform: none; top: 56px; bottom: auto; }
  body:has(#hud-challenge:not(.hidden)) #toasts { top: 104px; }
}
/* the "tyres spiked" chip sat on the round speedometer (it was placed for the old bar one): it
   goes above the dial and the slipstream chip */
.spiked-chip { bottom: 306px; }
@media (max-width: 860px) { .spiked-chip { bottom: 250px; } }
/* short screens: the police radio lay over the drift button and the pursuit panel; it goes in
   the band right of the pursuit panel and left of the pedals, below the toasts */
@media (max-height: 500px) {
  .radio, body.touch .radio { left: 228px; right: 216px; top: 100px; bottom: auto; width: auto; max-width: 340px; margin-inline: auto; transform: none; }
  .radio-line { font-size: 11.5px; }
  /* "tyres spiked" in that band too (both come in a pursuit): the radio steps below it */
  .spiked-chip, body.touch .spiked-chip { left: 228px; right: 216px; top: 100px; bottom: auto; width: fit-content; margin-inline: auto; transform: none; }
  body:has(#hud-spiked:not(.hidden)) .radio { top: 144px; }
}
/* upright phones: the pursuit and race panels sit below the speedometer on the left (to ~250
   px); the police radio, "tyres spiked" and the ghost split chip lay over them. They go below */
@media (orientation: portrait) {
  body.touch .radio { top: 262px; }
  body.touch .spiked-chip { top: 262px; }
  body.touch:has(#hud-spiked:not(.hidden)) .radio { top: 306px; }
  body.touch .split-chip { top: 262px; }
}
/* touch: the speedometer sits at the top, so the slipstream chip (placed above it) was off the
   screen. It goes in the open bottom of the dial, under the speed */
body.touch .draft-chip { top: 138px; right: auto; left: 50%; transform: translateX(-50%); font-size: 17px; padding: 2px 10px; white-space: nowrap; }