:root {
  --cyan: #1ef3ff;
  --mag: #ff2bd6;
  --yel: #ffe14d;
  --red: #ff2f4e;
  --ink: #eafcff;
  --dim: rgba(214, 240, 255, 0.6);
  --panel: rgba(8, 5, 20, 0.78);
  --line: rgba(30, 243, 255, 0.4);
  --head: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  --body: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --glow-c: 0 0 6px rgba(30, 243, 255, 0.9), 0 0 18px rgba(30, 243, 255, 0.45);
  --glow-m: 0 0 6px rgba(255, 43, 214, 0.9), 0 0 18px rgba(255, 43, 214, 0.45);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #04030a; color: var(--ink);
  font-family: var(--body); font-weight: 600;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }
kbd {
  font-family: var(--head); font-size: 10px; letter-spacing: 0.1em; font-weight: 700;
  padding: 3px 7px; border: 1px solid currentColor; border-radius: 3px; opacity: 0.7;
}

#scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 30;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 2px 3px);
  mix-blend-mode: multiply;
}
body.noscan #scanlines { display: none; }

/* ── Shared screen + panel styles ─────────────── */
.screen { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen button, .screen input, .screen label, .screen .npanel { pointer-events: auto; }
.modal {
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(20, 6, 40, 0.55), rgba(2, 1, 8, 0.85));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: auto; z-index: 20;
}
.npanel {
  position: relative; width: 100%; max-width: 480px;
  max-height: calc(100vh - 32px); overflow: auto;
  background: linear-gradient(160deg, rgba(30, 243, 255, 0.07), transparent 40%), var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(255, 43, 214, 0.15), 0 0 40px rgba(30, 243, 255, 0.12), inset 0 0 40px rgba(30, 243, 255, 0.05);
  padding: 26px 28px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.npanel.wide { max-width: 720px; }
.npanel.narrow { max-width: 360px; }
.ptitle {
  font-family: var(--head); font-weight: 900; letter-spacing: 0.22em; font-size: 24px;
  margin: 0 0 20px; color: var(--cyan); text-shadow: var(--glow-c);
}
.kicker { font-family: var(--head); font-size: 11px; letter-spacing: 0.3em; color: var(--mag); text-shadow: var(--glow-m); }
.kicker i { color: var(--cyan); font-style: normal; }
.kicker.red { color: var(--red); text-shadow: 0 0 10px rgba(255, 47, 78, 0.8); }
.note { color: var(--dim); font-size: 14px; margin: 14px 0 0; }
.note b { color: var(--cyan); }
.row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.col { display: flex; flex-direction: column; gap: 10px; }

/* Glitch heading */
.glitch {
  position: relative; margin: 0;
  font-family: var(--head); font-weight: 900; letter-spacing: 0.08em; color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), var(--glow-c);
}
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden;
}
.glitch::before { color: var(--mag); transform: translate(-3px, 0); mix-blend-mode: screen; animation: glitch 3.2s infinite steps(1); opacity: 0.85; }
.glitch::after { color: var(--cyan); transform: translate(3px, 0); mix-blend-mode: screen; animation: glitch 2.7s infinite reverse steps(1); opacity: 0.85; }
@keyframes glitch {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); }
  88% { clip-path: inset(10% 0 60% 0); }
  91% { clip-path: inset(55% 0 20% 0); }
  94% { clip-path: inset(30% 0 45% 0); }
  97% { clip-path: inset(75% 0 5% 0); }
}

/* Neon parallelogram buttons */
.nbtn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-width: 220px; padding: 13px 22px; cursor: pointer;
  background: linear-gradient(90deg, rgba(30, 243, 255, 0.14), rgba(30, 243, 255, 0.02));
  border: 1px solid var(--line); color: var(--ink);
  transform: skewX(-14deg); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
  font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: 0.16em;
}
.nbtn > * { transform: skewX(14deg); }
.nbtn .ic { color: var(--cyan); text-shadow: var(--glow-c); width: 18px; text-align: center; }
.nbtn .lbl { flex: 1; text-align: left; }
.nbtn:hover, .nbtn:focus-visible {
  outline: none; border-color: var(--mag);
  background: linear-gradient(90deg, rgba(255, 43, 214, 0.25), rgba(255, 43, 214, 0.04));
  box-shadow: var(--glow-m); transform: skewX(-14deg) translateX(6px);
}
.nbtn.primary {
  border-color: var(--cyan); color: #001014;
  background: linear-gradient(90deg, var(--cyan), #7af9ff);
  box-shadow: var(--glow-c);
}
.nbtn.primary .ic { color: #001014; text-shadow: none; }
.nbtn.primary:hover, .nbtn.primary:focus-visible { background: linear-gradient(90deg, #fff, var(--cyan)); border-color: #fff; }
.nbtn.small { min-width: 0; padding: 10px 18px; font-size: 12px; }

/* ── Main menu (over the 3D garage) ───────────── */
/* Frame: 64px header bar, 48px footer, two 300px columns that share their
   top and bottom lines, car centred between them. */
#menu { z-index: 12; --pad: 40px; --col: 300px; --top: 96px; --bot: 76px; }
#menu::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 2, 9, 0.92) 0, rgba(3, 2, 9, 0.55) calc(var(--pad) + var(--col) + 40px), transparent 42%,
      transparent 58%, rgba(3, 2, 9, 0.55) calc(100% - var(--pad) - var(--col) - 40px), rgba(3, 2, 9, 0.92) 100%);
}
.mbar {
  position: absolute; top: 0; left: 0; right: 0; height: 64px; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: linear-gradient(180deg, rgba(3, 2, 9, 0.96), rgba(3, 2, 9, 0.82));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0, var(--cyan) 22%, transparent 22%, transparent 78%, var(--mag) 78%);
  box-shadow: 0 0 10px rgba(30, 243, 255, 0.5);
}
.brand { font-family: var(--head); font-weight: 900; font-size: 26px; letter-spacing: 0.14em; line-height: 1; white-space: nowrap; }
.brand .b1 { color: #fff; text-shadow: 0 0 12px rgba(30, 243, 255, 0.55); }
.brand .b2 { color: var(--mag); text-shadow: var(--glow-m); margin-left: 12px; }
.mbar-mid { font-family: var(--head); font-size: 11px; letter-spacing: 0.32em; color: rgba(234, 252, 255, 0.55); }
.mbar-mid i { color: var(--mag); font-style: normal; }
.best { justify-self: end; display: flex; align-items: baseline; gap: 12px; font-family: var(--head); }
.best span { font-size: 11px; letter-spacing: 0.3em; color: rgba(234, 252, 255, 0.6); }
.best b { font-size: 24px; color: var(--yel); letter-spacing: 0.08em; text-shadow: 0 0 10px rgba(255, 225, 77, 0.5); }

.mcol {
  position: absolute; top: var(--top); bottom: var(--bot); width: var(--col);
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.mcol.left { left: var(--pad); }
.mcol.right { right: var(--pad); }
.mpanel {
  pointer-events: auto; position: relative;
  background: rgba(5, 4, 13, 0.9); border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 20px 20px;
}
.mpanel::before { content: ''; position: absolute; left: -1px; top: -1px; width: 48px; height: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.mcol.right .mpanel::before { left: auto; right: -1px; background: var(--mag); box-shadow: 0 0 8px var(--mag); }
.sect {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--head); font-size: 10px; letter-spacing: 0.34em; color: rgba(234, 252, 255, 0.68); margin-bottom: 14px;
}
.sect b { font-size: 12px; letter-spacing: 0.14em; color: #fff; }
.mbtn {
  width: 100%; display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 15px 16px; margin-top: 8px; text-align: left;
  font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: 0.16em; color: #fff;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.15s, border-color 0.15s, color 0.15s, padding 0.15s;
}
.mbtn:first-of-type { margin-top: 0; }
.mbtn .ic { width: 18px; text-align: center; color: var(--cyan); }
.mbtn .lbl { flex: 1; }
.mbtn .arr { font-size: 20px; line-height: 1; color: rgba(255, 255, 255, 0.35); transition: transform 0.15s, color 0.15s; }
.mbtn:hover, .mbtn:focus-visible {
  outline: none; background: var(--cyan); border-color: var(--cyan); color: #001014; box-shadow: var(--glow-c);
}
.mbtn:hover .ic, .mbtn:focus-visible .ic, .mbtn:hover .arr, .mbtn:focus-visible .arr { color: #001014; }
.mbtn:hover .arr { transform: translateX(4px); }
.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.keys li { display: grid; grid-template-columns: 112px 1fr; align-items: center; font-size: 16px; color: rgba(234, 252, 255, 0.82); }
.keys .k { display: flex; gap: 5px; }
.keys kbd { opacity: 1; color: var(--cyan); border-color: rgba(30, 243, 255, 0.5); background: rgba(30, 243, 255, 0.08); }

.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 20px; }
.swatches button {
  height: 34px; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.18);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.swatches button:hover { border-color: rgba(255, 255, 255, 0.6); }
.swatches button.active { border-color: #fff; box-shadow: 0 0 0 2px var(--cyan), var(--glow-c); transform: translateY(-2px); }
.specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.specs li { display: grid; grid-template-columns: 1fr auto; font-size: 14px; letter-spacing: 0.06em; color: rgba(234, 252, 255, 0.7); }
.specs b { color: #fff; font-family: var(--head); font-size: 12px; }
.specs i { grid-column: 1 / -1; height: 4px; margin-top: 6px; background: rgba(255, 255, 255, 0.1); position: relative; }
.specs i::after { content: ''; position: absolute; inset: 0; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--mag), var(--cyan)); }

.start-btn {
  pointer-events: auto; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: space-between; padding: 24px 26px;
  font-family: var(--head); font-weight: 900; font-size: 24px; letter-spacing: 0.14em; color: #0c0010;
  background: var(--yel); border: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  box-shadow: 0 0 26px rgba(255, 225, 77, 0.45);
  transition: background 0.15s;
}
.start-btn .chev { font-size: 34px; line-height: 1; animation: chev 0.9s ease-in-out infinite; }
.start-btn:hover, .start-btn:focus-visible { outline: none; background: #fff; }
@keyframes chev { 50% { transform: translateX(6px); } }

.mfoot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px; padding: 0 var(--pad);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--head); font-size: 10px; letter-spacing: 0.3em; color: rgba(234, 252, 255, 0.5);
  background: rgba(3, 2, 9, 0.9); border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mfoot i { color: var(--mag); font-style: normal; }
.mfoot .hint { color: rgba(234, 252, 255, 0.8); animation: blink 1.6s ease-in-out infinite; }
.mfoot kbd { color: var(--yel); opacity: 1; margin: 0 4px; }
@keyframes blink { 50% { opacity: 0.45; } }
#menu.leaving .mbar, #menu.leaving .mcol, #menu.leaving .mfoot, #menu.leaving::before { opacity: 0; transition: opacity 0.4s; }

/* ── Leaderboard ──────────────────────────────── */
.board { list-style: none; margin: 0; padding: 0; counter-reset: rank; font-family: var(--head); }
.board li {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 9px 12px; border-bottom: 1px solid rgba(30, 243, 255, 0.12); font-size: 15px;
}
.board li::before { counter-increment: rank; content: counter(rank, decimal-leading-zero); color: var(--mag); font-size: 12px; }
.board li:first-child { color: var(--yel); text-shadow: 0 0 10px rgba(255, 225, 77, 0.6); }
.board li.me { background: rgba(255, 43, 214, 0.14); }
.board .sc { color: var(--cyan); letter-spacing: 0.08em; }
.board .meta { display: block; font-family: var(--body); font-size: 12px; color: var(--dim); letter-spacing: 0.04em; }
.board .empty { grid-template-columns: 1fr; color: var(--dim); font-family: var(--body); }
.board .empty::before { content: none; }

/* ── Settings ─────────────────────────────────── */
.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tabs button {
  flex: 1; padding: 10px; cursor: pointer; font-family: var(--head); font-size: 12px; letter-spacing: 0.2em;
  background: transparent; border: 1px solid rgba(30, 243, 255, 0.25); color: var(--dim); transform: skewX(-14deg);
}
.tabs button.active { color: #001014; background: var(--cyan); border-color: var(--cyan); box-shadow: var(--glow-c); }
.tab { display: grid; gap: 16px; }
.slider { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 14px; letter-spacing: 0.12em; color: var(--dim); }
.slider output { font-family: var(--head); font-size: 12px; color: var(--cyan); }
.slider input { grid-column: 1 / -1; width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: rgba(30, 243, 255, 0.2); outline: none; }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; background: var(--cyan); box-shadow: var(--glow-c); transform: skewX(-14deg); cursor: pointer; }
.slider input::-moz-range-thumb { width: 16px; height: 22px; border: 0; border-radius: 0; background: var(--cyan); box-shadow: var(--glow-c); cursor: pointer; }
.toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: 15px; letter-spacing: 0.1em; }
.toggle input { display: none; }
.toggle i { position: relative; width: 46px; height: 22px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); transform: skewX(-14deg); flex: none; }
.toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 14px; background: var(--dim); transition: left 0.15s, background 0.15s; }
.toggle input:checked + i { border-color: var(--cyan); box-shadow: var(--glow-c); }
.toggle input:checked + i::after { left: 23px; background: var(--cyan); }
.seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.seg button { padding: 10px 0; cursor: pointer; font-family: var(--head); font-size: 10px; letter-spacing: 0.12em; background: transparent; border: 1px solid rgba(30, 243, 255, 0.25); color: var(--dim); transform: skewX(-14deg); }
.seg button.active { color: var(--mag); border-color: var(--mag); box-shadow: var(--glow-m); }

/* ── How to play ──────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hcard { border: 1px solid rgba(30, 243, 255, 0.2); background: rgba(30, 243, 255, 0.04); padding: 14px; }
.hcard b { display: block; font-family: var(--head); font-size: 12px; letter-spacing: 0.15em; color: var(--cyan); margin: 8px 0 6px; }
.hcard p { margin: 0; font-size: 15px; line-height: 1.35; color: var(--dim); font-weight: 500; }
.hic { font-size: 22px; color: var(--mag); text-shadow: var(--glow-m); }

/* ── HUD ──────────────────────────────────────── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; font-family: var(--head); }
#hud button { pointer-events: auto; }
.hlabel { font-size: 10px; letter-spacing: 0.3em; color: var(--dim); }
.hlabel b { color: var(--cyan); }
.hsub { font-size: 11px; letter-spacing: 0.2em; color: var(--dim); margin-top: 4px; }
.hsub span { color: var(--yel); }
.hsub.warn { color: var(--red); text-shadow: 0 0 8px rgba(255, 47, 78, 0.8); }
.hud-tl { position: absolute; top: 18px; left: 22px; }
.hscore { font-size: 38px; font-weight: 900; letter-spacing: 0.08em; color: var(--cyan); text-shadow: var(--glow-c); font-variant-numeric: tabular-nums; line-height: 1.1; }
.hud-tr { position: absolute; top: 14px; right: 22px; width: 150px; text-align: center; }
.gauge { width: 150px; height: 85px; overflow: visible; }
.gauge path { fill: none; stroke-width: 8; stroke-linecap: butt; }
.g-bg { stroke: rgba(30, 243, 255, 0.12); stroke-dasharray: 3 1; }
.g-fg { stroke: var(--cyan); stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px var(--cyan)); transition: stroke 0.3s; }
.g-fg.hot { stroke: var(--mag); filter: drop-shadow(0 0 5px var(--mag)); }
.gnum { margin-top: -44px; }
.gnum b { display: block; font-size: 30px; font-weight: 900; color: #fff; text-shadow: var(--glow-c); font-variant-numeric: tabular-nums; }
.gnum span { font-size: 10px; letter-spacing: 0.3em; color: var(--dim); }
.hud-bl { position: absolute; left: 22px; bottom: 22px; }
.segs { display: flex; gap: 4px; margin: 8px 0 2px; }
.segs i { width: 16px; height: 12px; background: rgba(30, 243, 255, 0.1); transform: skewX(-20deg); transition: background 0.12s, box-shadow 0.12s; }
.segs i.on { background: var(--cyan); box-shadow: 0 0 8px rgba(30, 243, 255, 0.8); }
.segs.low i.on { background: var(--red); box-shadow: 0 0 8px rgba(255, 47, 78, 0.9); }
.hud-bm { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 28px; }
.hud-bm div { text-align: center; }
.hud-bm b { display: block; font-size: 22px; color: var(--mag); text-shadow: var(--glow-m); font-variant-numeric: tabular-nums; }
.hud-bm span { font-size: 9px; letter-spacing: 0.3em; color: var(--dim); }
.hud-br { position: absolute; right: 22px; bottom: 22px; display: flex; gap: 8px; }
.hbtn {
  display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 16px;
  font-family: var(--head); font-size: 11px; letter-spacing: 0.18em; color: var(--cyan);
  background: rgba(8, 5, 20, 0.6); border: 1px solid var(--line); transform: skewX(-14deg);
}
.hbtn > * { transform: skewX(14deg); }
.hbtn svg { width: 18px; height: 18px; }
.hbtn:hover { border-color: var(--mag); color: var(--mag); box-shadow: var(--glow-m); }
.hbtn.icon { padding: 10px 14px; }

#toasts { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.toast {
  font-weight: 900; font-size: 28px; letter-spacing: 0.14em; white-space: nowrap; color: #fff;
  text-shadow: var(--glow-c); animation: toast 1.3s ease-out forwards;
}
.toast small { font-size: 16px; color: var(--yel); margin-left: 10px; text-shadow: 0 0 10px rgba(255, 225, 77, 0.7); }
.toast.warn { color: var(--red); font-size: 20px; text-shadow: 0 0 10px rgba(255, 47, 78, 0.9); }
.toast.gold { color: var(--yel); text-shadow: 0 0 12px rgba(255, 225, 77, 0.8); }
@keyframes toast {
  0% { opacity: 0; transform: translateY(14px) scale(0.85) skewX(-20deg); filter: blur(4px); }
  12% { opacity: 1; transform: translateY(0) scale(1.08) skewX(0); filter: none; }
  16% { transform: translateX(-4px); } 20% { transform: translateX(3px); } 24% { transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px); }
}
#countdown { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); pointer-events: none; }
#countdown .num {
  font-size: 140px; font-weight: 900; color: #fff; text-shadow: var(--glow-c), 0 0 60px rgba(30, 243, 255, 0.6);
  animation: count 0.95s ease-out forwards;
}
#countdown .num.go { color: var(--yel); font-size: 110px; letter-spacing: 0.1em; text-shadow: 0 0 14px rgba(255, 225, 77, 0.9), 0 0 60px rgba(255, 43, 214, 0.7); }
@keyframes count {
  0% { opacity: 0; transform: scale(1.8); filter: blur(6px); }
  18% { opacity: 1; transform: scale(1); filter: none; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.8); }
}

/* On-screen drive buttons: bottom right on desktop, thumb corners on touch. */
.tbtn {
  position: absolute; right: 22px; bottom: 78px; width: 84px; height: 84px; border-radius: 50%;
  pointer-events: auto; cursor: pointer; touch-action: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(8, 5, 20, 0.5); border: 2px solid var(--mag); color: var(--mag);
  box-shadow: var(--glow-m); font-family: var(--head); transition: background 0.1s;
}
.tbtn span { font-size: 24px; line-height: 1; }
.tbtn small { font-size: 8px; letter-spacing: 0.14em; }
.tbtn kbd { font-size: 8px; padding: 1px 5px; color: inherit; }
.tbtn.jump { width: 96px; height: 96px; border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-c); }
.tbtn:hover { background: rgba(255, 255, 255, 0.08); }
.tbtn.pressed { background: rgba(30, 243, 255, 0.25); }
#tDive { right: 130px; bottom: 84px; }
.hbtn.dragging { border-color: var(--yel); color: var(--yel); }
@media (pointer: coarse) {
  .tbtn { bottom: 26px; width: 92px; height: 92px; }
  .tbtn span { font-size: 26px; }
  .tbtn small { font-size: 9px; }
  .tbtn kbd { display: none; }
  .tbtn.jump { right: 22px; width: 108px; height: 108px; }
  #tDive { right: auto; left: 22px; bottom: 26px; }
  .hud-bl { bottom: 136px; }
  .hud-br { bottom: auto; top: 112px; }
  .hud-bm { bottom: 40px; }
}

/* ── Game over ────────────────────────────────── */
.glitch.big { font-size: 46px; margin: 8px 0 18px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stats div { border: 1px solid rgba(30, 243, 255, 0.2); background: rgba(30, 243, 255, 0.05); padding: 10px 8px; text-align: center; }
.stats b { display: block; font-family: var(--head); font-size: 20px; color: var(--cyan); text-shadow: var(--glow-c); }
.stats span { font-size: 11px; letter-spacing: 0.2em; color: var(--dim); }
.stats .stat-best b { color: var(--yel); text-shadow: 0 0 10px rgba(255, 225, 77, 0.6); }
.entry { margin-top: 18px; padding: 14px; border: 1px dashed var(--mag); background: rgba(255, 43, 214, 0.06); }
.entry-label { font-family: var(--head); font-size: 11px; letter-spacing: 0.2em; color: var(--mag); }
.entry-row { display: flex; gap: 12px; margin-top: 10px; align-items: center; }
#initials {
  width: 150px; padding: 8px 12px; font-family: var(--head); font-size: 30px; font-weight: 900; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--yel); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--yel);
  outline: none; text-shadow: 0 0 10px rgba(255, 225, 77, 0.7); user-select: text; -webkit-user-select: text;
}
.fact { color: var(--dim); font-size: 14px; line-height: 1.45; margin: 16px 0 0; padding-left: 10px; border-left: 2px solid var(--mag); font-weight: 500; }

.error {
  position: fixed; left: 16px; right: 16px; top: 16px; z-index: 50;
  background: #300; border: 1px solid var(--red); color: #fdd; padding: 12px 16px;
  font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap;
}
body.nohud #hud, body.nohud .screen, body.nohud #scanlines { display: none !important; }

@media (max-width: 820px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hscore { font-size: 26px; }
  .hud-tr { width: 110px; right: 12px; }
  .gauge { width: 110px; height: 62px; }
  .gnum { margin-top: -34px; }
  .gnum b { font-size: 22px; }
  .hud-tl { left: 14px; top: 12px; }
  .hud-bl { left: 14px; }
  .segs i { width: 11px; }
  .npanel { padding: 20px 18px; }
  .glitch.big { font-size: 32px; }
}
.seg.two { grid-template-columns: 1fr 1fr; }
.seg.two button { font-size: 11px; padding: 12px 0; }
#gaugeBtn { pointer-events: auto; cursor: pointer; }
.seg.three { grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; }
.seg.three button { font-size: 10px; padding: 10px 0; transform: none; }
.driver {
  width: 100%; margin: 0 0 18px; padding: 10px 14px; outline: none;
  font-family: var(--head); font-weight: 900; font-size: 20px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--yel); background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 225, 77, 0.45);
  user-select: text; -webkit-user-select: text;
}
.driver::placeholder { color: rgba(255, 225, 77, 0.3); }
.driver:focus { border-color: var(--yel); box-shadow: 0 0 12px rgba(255, 225, 77, 0.35); }
label.sect { cursor: text; }
.sect span { font-size: 9px; letter-spacing: 0.2em; color: rgba(234, 252, 255, 0.35); }
#initials { width: 230px; font-size: 24px; letter-spacing: 0.22em; }
.seg.quality { margin-bottom: 20px; }
.seg.quality button { transform: none; font-size: 12px; letter-spacing: 0.24em; padding: 11px 0; }
.sect-s { font-family: var(--head); font-size: 10px; letter-spacing: 0.3em; color: rgba(234, 252, 255, 0.5); margin-bottom: -6px; }

/* Portrait phones: header, paint strip, car, then the buttons stacked at the bottom. */
@media (max-width: 820px) and (max-aspect-ratio: 1/1) {
  #menu { --pad: 16px; }
  #menu::before { background: linear-gradient(0deg, rgba(3, 2, 9, 0.95) 0, rgba(3, 2, 9, 0.6) 38%, transparent 60%, transparent 80%, rgba(3, 2, 9, 0.7) 100%); }
  .mbar { height: 56px; grid-template-columns: 1fr auto; }
  .mbar-mid { display: none; }
  .brand { font-size: 18px; }
  .best b { font-size: 17px; }
  .mcol { position: static; display: contents; }
  .mcol.left .mpanel:last-child { display: none; }
  .mcol.right .mpanel {
    position: absolute; top: 68px; left: var(--pad); right: var(--pad); padding: 10px 12px;
  }
  .mcol.right .mpanel .sect { margin-bottom: 8px; }
  .specs { display: none; }
  .swatches { margin: 0; }
  .swatches button { height: 26px; }
  #menuNav {
    position: absolute; left: var(--pad); right: var(--pad); bottom: 132px; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: none; border: 0;
  }
  /* Phones keep the menu lean: graphics and camera live in Settings. */
  #menuNav::before, #menuNav .sect, #menuNav .seg { display: none; }
  .mbar { padding: 0 var(--pad); }
  .best span { display: none; }
  label.sect span { display: none; }
  .driver { font-size: 16px; padding: 8px 12px; margin-bottom: 10px; }
  .swatches { gap: 6px; }
  #menuNav .mbtn { margin: 0; flex-direction: column; gap: 6px; padding: 12px 4px; font-size: 9px; letter-spacing: 0.1em; text-align: center; background: rgba(5, 4, 13, 0.9); }
  #menuNav .mbtn .arr { display: none; }
  #menuNav .mbtn .ic { font-size: 16px; }
  .start-btn { position: absolute; left: var(--pad); right: var(--pad); bottom: 60px; width: auto; padding: 18px 22px; font-size: 20px; }
  .mfoot { height: 44px; }
  .mfoot .hint { display: none; }
}

/* Short landscape screens, including X's 640×480 in-tweet player: slimmer
   columns, controls panel and specs hidden so the car stays in view. */
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  #menu { --pad: 14px; --col: 196px; --top: 54px; --bot: 42px; }
  .mbar { height: 44px; }
  .brand { font-size: 16px; }
  .brand .b2 { margin-left: 8px; }
  .mbar-mid { display: none; }
  .best span { font-size: 9px; }
  .best b { font-size: 16px; }
  .mcol { gap: 10px; }
  .mpanel { padding: 10px 12px; background: rgba(5, 4, 13, 0.82); }
  .sect { margin-bottom: 8px; font-size: 9px; letter-spacing: 0.26em; }
  .mbtn { padding: 8px 10px; margin-top: 6px; gap: 10px; font-size: 10.5px; letter-spacing: 0.12em; }
  .mbtn .arr { font-size: 16px; }
  .mcol.left .mpanel:last-child, .specs { display: none; }
  .seg.quality { margin-bottom: 10px; }
  .seg.quality button { padding: 7px 0; font-size: 10px; }
  .driver { font-size: 15px; padding: 7px 10px; margin-bottom: 10px; letter-spacing: 0.22em; }
  .swatches { margin-bottom: 0; gap: 6px; }
  .swatches button { height: 24px; }
  .start-btn { padding: 14px 16px; font-size: 17px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
  .start-btn .chev { font-size: 24px; }
  .mfoot { height: 32px; font-size: 8px; }
  .hscore { font-size: 24px; }
  .hud-tl { left: 12px; top: 10px; }
  .hud-tr { width: 104px; right: 10px; top: 8px; }
  .gauge { width: 104px; height: 58px; }
  .gnum { margin-top: -32px; }
  .gnum b { font-size: 20px; }
  .hud-bl, .hud-br { bottom: 12px; }
  .hud-bl { left: 12px; }
  .hud-br { right: 10px; }
  .hud-bm { bottom: 12px; gap: 18px; }
  .hud-bm b { font-size: 17px; }
  .segs i { width: 10px; height: 10px; }
  .hbtn { padding: 8px 12px; font-size: 10px; }
  .tbtn { width: 66px; height: 66px; bottom: 56px; right: 10px; }
  .tbtn.jump { width: 74px; height: 74px; }
  #tDive { right: 92px; bottom: 60px; }
  .tbtn span { font-size: 18px; }
  .tbtn small { font-size: 7px; }
  #menu .seg.five { gap: 3px; }
  #menu .seg.five button { font-size: 7px; letter-spacing: 0; padding: 6px 0; }
  label.sect span { display: none; }
  #countdown .num { font-size: 96px; }
  #countdown .num.go { font-size: 72px; }
  .toast { font-size: 20px; }
  .npanel { padding: 16px 18px; }
  .ptitle { font-size: 18px; margin-bottom: 12px; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hcard { padding: 10px; }
  .hcard p { font-size: 13px; }
  .glitch.big { font-size: 28px; margin: 4px 0 12px; }
  .stats b { font-size: 16px; }
  .fact { display: none; }
}

/* X on phones covers the bottom 30% of the page with its own panel. */
body.safe-bottom #game { height: 70vh; }
body.safe-bottom .screen, body.safe-bottom #hud, body.safe-bottom #scanlines { bottom: 30vh; }
.seg.five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 20px; }
.seg.five button { transform: none; font-size: 8.5px; letter-spacing: 0.04em; padding: 9px 0; }
body.poster .best, body.poster .mfoot .hint { visibility: hidden; }
.screen a { pointer-events: auto; }
.credit {
  font-family: var(--head); font-size: 10px; letter-spacing: 0.28em; color: rgba(234, 252, 255, 0.6); text-decoration: none;
  transition: color 0.15s, text-shadow 0.15s;
}
.credit b { font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--cyan); margin-left: 4px; }
.credit:hover, .credit:focus-visible { color: #fff; outline: none; }
.credit:hover b, .credit:focus-visible b { text-shadow: var(--glow-c); }
.credit.small { display: block; margin-top: 16px; text-align: right; font-size: 9px; }
.credit.small b { font-size: 13px; }
.follow {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 14px; text-decoration: none;
  font-family: var(--head); font-size: 11px; letter-spacing: 0.2em; color: #fff;
  border: 1px solid rgba(30, 243, 255, 0.35); background: rgba(30, 243, 255, 0.06);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.follow .x { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1; }
.follow b { font-family: var(--body); font-size: 16px; letter-spacing: 0.02em; color: var(--cyan); }
.follow i { font-family: var(--body); font-style: normal; font-size: 13px; letter-spacing: 0.02em; color: var(--dim); margin-left: auto; }
.follow:hover, .follow:focus-visible { outline: none; border-color: var(--cyan); background: rgba(30, 243, 255, 0.14); box-shadow: var(--glow-c); }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats b { font-size: 17px; letter-spacing: 0.02em; }
.stats span { display: block; }
.foot-left { display: flex; align-items: center; gap: 22px; }
.plink { font-family: var(--head); font-size: 9px; letter-spacing: 0.24em; color: rgba(234, 252, 255, 0.45); text-decoration: none; }
.plink:hover { color: #fff; }
.note a { color: var(--cyan); }
#boardTabs { margin-bottom: 14px; }
.consent {
  position: fixed; z-index: 40; left: 50%; bottom: 64px; transform: translateX(-50%);
  width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 16px;
  padding: 12px 14px 12px 18px; background: rgba(8, 5, 20, 0.95); border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); font-size: 14px; color: rgba(234, 252, 255, 0.82); font-weight: 500;
}
.consent p { margin: 0; line-height: 1.35; }
.consent a { color: var(--cyan); }
.consent-btns { display: flex; gap: 8px; flex: none; }
.consent button {
  cursor: pointer; padding: 8px 12px; font-family: var(--head); font-size: 10px; letter-spacing: 0.16em;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: var(--ink);
}
.consent button.yes { background: var(--cyan); border-color: var(--cyan); color: #001014; }
@media (max-width: 820px) and (max-aspect-ratio: 1/1) {
  .consent { bottom: auto; top: 64px; flex-direction: column; align-items: stretch; gap: 10px; }
  .consent-btns button { flex: 1; }
  .plink { display: none; }
}
/* Notched phones: keep the header and bottom controls inside the safe area. */
.mbar { top: env(safe-area-inset-top); }
.mfoot { bottom: env(safe-area-inset-bottom); }
.hud-tl, .hud-tr { margin-top: env(safe-area-inset-top); }
@media (max-width: 820px) and (max-aspect-ratio: 1/1) {
  .mcol.right .mpanel { top: calc(68px + env(safe-area-inset-top)); }
  .start-btn { bottom: calc(60px + env(safe-area-inset-bottom)); }
  #menuNav { bottom: calc(132px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  .tbtn, #tDive { bottom: calc(26px + env(safe-area-inset-bottom)); }
}
/* Shorter desktop windows: drop the controls card so it never meets the footer. */
@media (max-height: 760px) and (min-aspect-ratio: 1/1) {
  .mcol.left .mpanel:last-child { display: none; }
}
/* ?og: hero composition for link-preview images. */
body.og .mcol.left, body.og .mcol.right .mpanel, body.og .best, body.og .mfoot .hint { visibility: hidden; }
body.poster .tbtn, body.poster .hud-br, body.poster #scanlines { display: none !important; }
/* Narrow phones: stats as a 2×2 grid, name field shrinks to fit beside SAVE. */
@media (max-width: 520px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-row #initials { width: auto; flex: 1; min-width: 0; font-size: 22px; }
  .entry-row .nbtn { flex: none; }
  .follow i { display: none; }
}

/* Very small landscape frames, like the in-tweet X player (~505×380 on the
   desktop timeline): everything scaled down so the game has room. */
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  .row { flex-wrap: nowrap; }
  .row .nbtn { min-width: 0; flex: 1; }
}
@media (max-height: 440px) and (min-aspect-ratio: 1/1) {
  #menu { --pad: 10px; --col: 170px; --top: 44px; --bot: 34px; }
  .mbar { height: 36px; }
  .brand { font-size: 13px; }
  .best span { display: none; }
  .best b { font-size: 13px; }
  .mcol { gap: 8px; }
  .mpanel { padding: 8px 10px; }
  .mpanel::before { width: 32px; }
  .sect { font-size: 8px; margin-bottom: 6px; letter-spacing: 0.22em; }
  .seg.quality { margin-bottom: 8px; }
  .seg.quality button { padding: 4px 0; font-size: 9px; }
  #menu .seg.five { margin-bottom: 8px; }
  #menu .seg.five button { font-size: 6.5px; padding: 4px 0; }
  .mbtn { padding: 6px 8px; margin-top: 5px; gap: 8px; font-size: 9px; letter-spacing: 0.1em; }
  .mbtn .ic { width: 12px; }
  .mbtn .arr { display: none; }
  .driver { font-size: 12px; padding: 4px 8px; margin-bottom: 8px; letter-spacing: 0.18em; }
  .swatches { gap: 5px; }
  .swatches button { height: 18px; }
  .start-btn { padding: 10px 12px; font-size: 14px; }
  .start-btn .chev { font-size: 18px; }
  .mfoot { height: 26px; font-size: 7px; }
  .credit b { font-size: 11px; }

  .hlabel { font-size: 7px; letter-spacing: 0.2em; }
  .hsub { font-size: 8px; margin-top: 2px; }
  .hscore { font-size: 17px; }
  .hud-tl { left: 10px; top: 8px; }
  .hud-tr { width: 80px; right: 8px; top: 6px; }
  .gauge { width: 80px; height: 45px; }
  .gnum { margin-top: -26px; }
  .gnum b { font-size: 15px; }
  .gnum span { font-size: 7px; }
  .hud-bl { left: 10px; bottom: 8px; }
  .segs { gap: 3px; margin: 5px 0 1px; }
  .segs i { width: 7px; height: 7px; }
  .hud-bm { bottom: 8px; gap: 14px; }
  .hud-bm b { font-size: 13px; }
  .hud-bm span { font-size: 6.5px; }
  .hud-br { right: 8px; bottom: 8px; gap: 5px; }
  .hbtn { padding: 5px 8px; font-size: 8px; gap: 5px; }
  .hbtn svg { width: 13px; height: 13px; }
  .tbtn { width: 50px; height: 50px; right: 8px; bottom: 40px; gap: 1px; border-width: 1.5px; }
  .tbtn.jump { width: 56px; height: 56px; }
  #tDive { right: 70px; bottom: 43px; }
  .tbtn span { font-size: 14px; }
  .tbtn small { font-size: 5.5px; letter-spacing: 0.08em; }
  .tbtn kbd { display: none; }
  .toast { font-size: 15px; }
  .toast small { font-size: 11px; }
  #countdown .num { font-size: 64px; }
  #countdown .num.go { font-size: 46px; }

  .npanel { padding: 12px 14px; }
  .ptitle { font-size: 15px; margin-bottom: 8px; }
  .kicker { font-size: 8px; }
  .glitch.big { font-size: 20px; margin: 2px 0 8px; }
  .stats { gap: 5px; }
  .stats div { padding: 5px 4px; }
  .stats b { font-size: 13px; }
  .stats span { font-size: 8px; }
  .entry { margin-top: 8px; padding: 7px 9px; }
  .entry-label { font-size: 8px; letter-spacing: 0.14em; }
  .entry-row { margin-top: 6px; gap: 8px; }
  .entry-row #initials { width: auto; flex: 1; min-width: 0; font-size: 15px; padding: 4px 8px; }
  .follow { margin-top: 8px; padding: 6px 10px; font-size: 8px; }
  .follow b { font-size: 12px; }
  .follow i { display: none; }
  .row { margin-top: 10px; gap: 8px; }
  .row .nbtn, .nbtn.small { padding: 7px 10px; font-size: 10px; gap: 8px; }
  .row .nbtn kbd { display: none; }
  .tabs { margin-bottom: 8px; }
  .tabs button { padding: 6px; font-size: 9px; }
  .board li { padding: 5px 8px; font-size: 12px; }
  .board .meta { font-size: 10px; }
  .cards { gap: 6px; }
  .hcard { padding: 7px; }
  .hcard b { font-size: 9px; margin: 4px 0 3px; }
  .hcard p { font-size: 11px; }
}
@media (max-height: 440px) and (min-aspect-ratio: 1/1) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #paintName { display: none; }
}
/* Narrow upright screens: flips and distance tuck under the score so the
   bottom row (tanks, drive buttons, camera) has room. */
@media (max-width: 520px) and (max-aspect-ratio: 1/1) {
  .hud-bm { left: 14px; right: auto; top: calc(96px + env(safe-area-inset-top)); bottom: auto; transform: none; gap: 18px; }
  .hud-bm div { text-align: left; }
  .hud-bm b { font-size: 18px; }
}