:root {
  color-scheme: dark;
  --ink: #f6fbff;
  --muted: #9cb6c8;
  --deep: #06141f;
  --panel: rgba(10, 34, 48, .88);
  --line: rgba(129, 229, 217, .22);
  --mint: #31e6c1;
  --gold: #ffcf4a;
  --pink: #ff6b8a;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(49, 230, 193, .16), transparent 32rem),
    radial-gradient(circle at 92% 85%, rgba(117, 167, 255, .14), transparent 30rem),
    linear-gradient(145deg, #071824, #031018 65%, #071a25);
  overscroll-behavior: none;
}
button, input, a { font: inherit; }
button, .button { touch-action: manipulation; }
.topbar {
  min-height: 72px; padding: max(12px, env(safe-area-inset-top)) clamp(16px, 4vw, 54px) 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--line); background: rgba(3, 16, 24, .76); backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #06221d; background: var(--mint); font-weight: 1000; font-size: 24px; transform: rotate(-4deg); }
.brand strong { line-height: 1.05; }
.brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.connection-pill { color: var(--muted); font-size: 13px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; }
.connection-pill.online { color: var(--mint); }
.connection-pill.problem { color: #ff9ba9; border-color: rgba(255,107,138,.4); }
.shell { width: min(1180px, 100%); margin: 0 auto; padding: clamp(30px, 6vw, 80px) clamp(16px, 4vw, 40px) max(30px, env(safe-area-inset-bottom)); }
.hero { max-width: 760px; margin-bottom: 42px; }
.eyebrow { margin: 0 0 9px; color: var(--mint); font-size: 12px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(52px, 10vw, 104px); line-height: .88; letter-spacing: -.065em; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero > p:last-child { max-width: 640px; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
.cards { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.watch-card { grid-column: 1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.65fr); column-gap:32px; align-items:center; }
.watch-card .eyebrow,.watch-card h2,.watch-card > p { grid-column:1; }
.watch-card form { grid-column:2; grid-row:1 / span 3; }
.watch-button { width:100%; margin-top:14px; color:var(--ink); background:rgba(117,167,255,.18); border:1px solid rgba(117,167,255,.55); }
.card { min-width: 0; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.card h2 { margin: 0 0 12px; font-size: clamp(32px, 5vw, 52px); letter-spacing: -.045em; }
.card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.game-art { height: 190px; margin: -10px -10px 28px; position: relative; overflow: hidden; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg, #154359, #0d2738); }
.game-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 40px, rgba(255,255,255,.06) 42px 45px); }
.game-art span { position: relative; z-index: 2; font-size: 86px; filter: drop-shadow(0 14px 14px rgba(0,0,0,.45)); transform: rotate(-8deg); }
.game-art i { position: absolute; width: 110%; height: 5px; background: var(--mint); box-shadow: 0 0 18px var(--mint); transform: rotate(-9deg); }
.game-art i:nth-of-type(2) { background: var(--gold); top: 36%; }
.game-art i:nth-of-type(3) { background: var(--pink); top: 70%; }
label { display: block; margin: 16px 0 7px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
input { width: 100%; min-height: 54px; border: 1px solid rgba(156,182,200,.34); border-radius: 13px; padding: 10px 14px; color: var(--ink); background: rgba(0,0,0,.25); outline: none; }
input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(49,230,193,.14); }
.code-input { font-size: 30px; font-weight: 1000; letter-spacing: .24em; text-transform: uppercase; text-align: center; }
.button { min-height: 52px; border: 0; border-radius: 14px; padding: 13px 18px; display: inline-grid; place-items: center; text-decoration: none; font-weight: 950; cursor: pointer; }
.primary { color: #071b18; background: var(--mint); }
.secondary { width: 100%; margin-top: 20px; color: #171302; background: var(--gold); }
.error { min-height: 22px; margin: 12px 0 0; color: #ff98a8; }
.controller-view { min-height: calc(100dvh - 110px); display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin: 0 auto; }
.controller-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.player-badge, .room-chip { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.player-badge span { width: 13px; height: 13px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px currentColor; }
.room-chip { color: var(--muted); }
.room-chip b { color: var(--gold); letter-spacing: .14em; }
.controller-status { text-align: center; padding: 18px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.race-feedback { margin:-8px 0; padding:13px 18px; border-radius:16px; text-align:center; font-size:clamp(18px,6vw,28px); font-weight:1000; letter-spacing:-.02em; background:rgba(49,230,193,.18); border:1px solid rgba(49,230,193,.55); animation:feedback-pop .34s ease-out; }
.race-feedback.impact { color:#fff; background:rgba(255,107,138,.28); border-color:rgba(255,107,138,.7); }
@keyframes feedback-pop { from { transform:scale(.88); opacity:.2; } to { transform:scale(1); opacity:1; } }
.choice-panel { padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.choice-buttons { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.choice-buttons button { min-height:42px; padding:7px; border:1px solid rgba(255,255,255,.15); border-radius:11px; color:var(--ink); background:rgba(255,255,255,.06); font-weight:850; }
.choice-buttons button.selected { color:#071b18; background:var(--mint); border-color:var(--mint); }
.vote-buttons button { color:#fff4c4; border-color:rgba(255,207,74,.35); }
.garage-panel { margin-top:10px; color:var(--muted); }
.garage-panel summary { cursor:pointer; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.garage-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:9px; }
.garage-grid label { margin:0; font-size:9px; }
.garage-grid select { width:100%; min-height:36px; margin-top:4px; border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:4px; color:var(--ink); background:#102f3e; }
.gadget-use { min-height:48px; border:1px solid rgba(194,140,255,.5); border-radius:14px; color:#f0deff; background:linear-gradient(180deg,rgba(194,140,255,.28),rgba(76,42,113,.35)); font-weight:1000; letter-spacing:.08em; }
.gadget-use:disabled { opacity:.38; }
.emote-bar { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.emote-bar button { min-height:42px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.05); font-size:21px; }
.controller-status h1 { margin: 5px 0 18px; font-size: clamp(25px, 8vw, 42px); }
.controller-metrics { display: flex; justify-content: center; gap: clamp(16px, 8vw, 42px); }
.controller-metrics span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.controller-metrics b { display: block; margin-top: 3px; color: var(--ink); font-size: 24px; }
.tilt-panel { text-align: center; }
.tilt-meter { height: 18px; margin: 0 18px 12px; border-radius: 99px; background: linear-gradient(90deg, var(--pink), #1d3442 47%, #1d3442 53%, var(--mint)); position: relative; }
.tilt-meter::after { content: ""; position: absolute; left: 50%; top: -4px; width: 2px; height: 26px; background: white; opacity: .6; }
.tilt-meter span { position: absolute; left: 50%; top: -5px; width: 28px; height: 28px; border-radius: 50%; background: white; box-shadow: 0 4px 14px rgba(0,0,0,.45); transform: translateX(-50%); transition: left 70ms linear; }
.tilt-button { width: 100%; color: var(--ink); background: rgba(49,230,193,.12); border: 1px solid rgba(49,230,193,.42); }
#tiltHelp { margin: 8px 10px 0; min-height: 36px; color: var(--muted); font-size: 12px; }
.drive-controls { margin-top: auto; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; }
.drive-button { min-width: 0; min-height: clamp(112px, 28vw, 160px); border: 1px solid rgba(255,255,255,.16); border-radius: 24px; color: var(--ink); background: linear-gradient(180deg, rgba(30,66,82,.98), rgba(10,31,43,.98)); font-size: 42px; font-weight: 1000; box-shadow: inset 0 -8px 0 rgba(0,0,0,.22); touch-action: none; user-select: none; }
.drive-button small { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; letter-spacing: .14em; }
.drive-button.boost { color: #171302; background: linear-gradient(180deg, #ffe278, #f4af28); }
.drive-button:active, .drive-button.pressed { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.drive-button:disabled { opacity: .38; }
.text-button { min-height: 44px; border: 0; color: var(--muted); background: transparent; text-decoration: underline; cursor: pointer; }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  .topbar { min-height: 62px; padding-left: 14px; padding-right: 14px; }
  .connection-pill { max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .shell { padding-top: 25px; }
  .cards { grid-template-columns: 1fr; }
  .watch-card { grid-column:auto; display:block; }
  .controller-view { min-height: calc(100dvh - 88px); }
  .garage-grid { grid-template-columns:1fr; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .topbar { min-height: 54px; }
  .shell { padding: 8px 14px; }
  .controller-view { display: grid; grid-template-columns: .8fr 1.2fr; grid-template-rows: auto minmax(0, 1fr); min-height: 0; height: calc(100dvh - 70px); }
  .controller-head { grid-column: 1 / -1; }
  .controller-status { grid-row: 2; }
  .controller-status h1 { margin-bottom: 10px; font-size: clamp(22px, 5vw, 34px); }
  .tilt-panel { display: none; }
  .choice-panel { display:none; }
  .drive-controls { grid-column: 2; grid-row: 2; margin: 0; min-height: 0; }
  .drive-button { min-height: 0; height: 100%; border-radius: 18px; }
  .text-button { display: none; }
  .gadget-use { position:fixed; left:14px; bottom:12px; width:calc(34% - 20px); z-index:3; }
  .emote-bar { display:none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }