:root {
  color-scheme: dark;
  --ink: #242035;
  --paper: #fff7dc;
  --yellow: #ffd84a;
  --orange: #ff7b3d;
  --purple: #7454df;
  --cyan: #29c7c2;
  --night: #171427;
  --line: rgba(255, 255, 255, .15);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: var(--night); color: var(--paper);
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none;
}

button, a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

#game-shell {
  position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(93, 69, 169, .23), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 16px),
    #171427;
}

.topbar {
  position: absolute; z-index: 20; inset: max(10px, env(safe-area-inset-top)) 14px auto;
  display: flex; align-items: center; gap: 12px; height: 52px; pointer-events: none;
}

.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--paper); text-decoration: none; text-shadow: 0 2px 8px #0a0712; }
.brand-dot { width: 33px; height: 33px; border: 5px solid var(--yellow); border-radius: 50%; box-shadow: inset 0 0 0 5px #06050b, 0 0 0 2px #06050b; }
.brand b, .brand small { display: block; font-weight: 950; line-height: .85; letter-spacing: .08em; }
.brand b { font-size: 13px; }
.brand small { margin-top: 6px; color: var(--yellow); font-size: 10px; letter-spacing: .23em; }

.hud { margin-left: auto; min-width: 110px; text-align: center; text-shadow: 0 2px 8px #08060d; }
.hud div { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.hud b { font-size: 19px; }
.hud small { color: #d8caed; font-size: 9px; letter-spacing: .14em; }
#endless-hud b:nth-of-type(2) { margin-left: 9px; color: var(--yellow); }

.icon-button {
  border: 1px solid var(--line); border-radius: 999px; background: rgba(10, 8, 18, .68);
  padding: 9px 11px; font-size: 8px; font-weight: 900; letter-spacing: .13em;
}

#arena-wrap { position: absolute; inset: 0; overflow: hidden; }
#arena { display: block; width: 100%; height: 100%; overflow: visible; }

.outer-shadow { fill: #0b0912; opacity: .7; filter: blur(8px); }
.arena-floor { fill: url(#floor-glow); }
.arena-wall { fill: none; stroke: #302941; stroke-width: 28; filter: url(#soft-shadow); }
.arena-wall + * { pointer-events: none; }
.pull-zone { fill: #6f55be; opacity: .055; stroke: #5d489e; stroke-width: 4; stroke-dasharray: 9 15; }
.danger-zone { fill: #3c2868; opacity: .15; stroke: #ff7a54; stroke-opacity: .42; stroke-width: 7; stroke-dasharray: 16 13; }
.floor-orbit { fill: none; stroke: #4b3b68; stroke-width: 3; stroke-dasharray: 8 18; opacity: .17; }
.orbit-a { animation: dash 15s linear infinite; }
.orbit-b { animation: dash-reverse 10s linear infinite; }
.rink-marks { fill: none; stroke: #fff5d5; stroke-width: 15; stroke-linecap: round; opacity: .55; }
.hole-ring { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 62 19 14 31; transform-origin: 800px 800px; pointer-events: none; }
.ring-one { stroke: #fb8b46; animation: spin 3.8s linear infinite; }
.ring-two { stroke: #8b68f4; opacity: .72; animation: spin-reverse 5.1s linear infinite; }

.car { transform-box: fill-box; transform-origin: center; }
.car .car-art { filter: url(#soft-shadow); }
.car.player .player-arrow { opacity: 1; }
.player-arrow { opacity: 0; fill: var(--yellow); stroke: var(--ink); stroke-width: 3; }
.car .effect-ring { fill: none; stroke-width: 6; opacity: 0; }
.car.turbo .turbo-ring { opacity: .9; stroke: #25cfd0; stroke-dasharray: 10 8; animation: dash 1s linear infinite; }
.car.heavy .heavy-ring { opacity: .9; stroke: #242035; stroke-width: 10; }
.car.spikes .spike-ring { opacity: 1; stroke: #ff6747; stroke-dasharray: 3 9; stroke-width: 13; }
.car.magnet .magnet-ring { opacity: .9; stroke: #39bcd5; stroke-dasharray: 18 5; }
.car.boosting .car-art { filter: url(#soft-shadow) drop-shadow(0 0 11px #43e7df); }
.driver { filter: url(#soft-shadow); }
.driver.squashed { animation: squash-out .38s forwards; }
.falling { pointer-events: none; }
.magnet-link { fill: none; stroke: #30c6d5; stroke-width: 7; stroke-dasharray: 13 9; animation: dash .6s linear infinite; }
.boost-shock { fill: none; stroke: #6ff5e8; stroke-width: 9; transform-box: fill-box; transform-origin: center; animation: boost-shock .3s ease-out forwards; }
.powerup { filter: url(#soft-shadow); animation: float 1.4s ease-in-out infinite alternate; }
.powerup-halo { fill: #fff6cf; stroke-width: 6; }
.ejector { filter: url(#soft-shadow); transform-box: fill-box; transform-origin: center; }
.ejector.hit { animation: bumper-flash .12s ease-out; }
.particle { pointer-events: none; }

.controls {
  position: absolute; z-index: 18; left: 50%; transform: translateX(-50%);
  bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 112px 88px 112px; align-items: end; gap: 12px;
}
.steer-button, .boost-button {
  border: 2px solid rgba(255,255,255,.17); color: white; background: rgba(29, 24, 45, .88);
  box-shadow: 0 9px 24px rgba(0,0,0,.3); touch-action: none;
}
.steer-button { height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.steer-button span { font-size: 29px; line-height: 1; }
.steer-button small { font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.steer-button.active { transform: translateY(2px); background: #4c3b78; border-color: #9e86ef; }
.boost-button { position: relative; width: 88px; height: 88px; border-radius: 50%; padding: 0; background: #ff7142; border: 4px solid #2a2036; overflow: hidden; }
.boost-button svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.boost-button span { position: relative; font-size: 10px; font-weight: 950; letter-spacing: .08em; text-shadow: 0 2px #9b3324; }
.boost-track, .boost-ring { fill: none; stroke-width: 8; }
.boost-track { stroke: rgba(41, 25, 44, .55); }
.boost-ring { stroke: #fff4ba; stroke-linecap: round; stroke-dasharray: 270; stroke-dashoffset: 0; transition: stroke-dashoffset .08s linear; }
.boost-button:disabled { filter: saturate(.35); cursor: default; }
.boost-button.active { transform: scale(.95); }

.status-strip {
  position: absolute; z-index: 16; top: max(70px, calc(env(safe-area-inset-top) + 67px)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; pointer-events: none;
}
.status-pill { display: flex; align-items: center; gap: 5px; border-radius: 999px; background: rgba(19, 15, 31, .84); border: 1px solid var(--line); padding: 5px 9px; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.status-pill img { width: 17px; height: 17px; }
.toast { position: absolute; z-index: 22; left: 50%; top: 18%; transform: translate(-50%, -8px); padding: 8px 13px; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 999px; font-size: 10px; font-weight: 950; letter-spacing: .08em; opacity: 0; pointer-events: none; transition: .16s ease; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.screen { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(10, 8, 18, .62); backdrop-filter: blur(5px); }
.screen[hidden] { display: none; }
.panel { width: min(430px, 100%); border: 3px solid #302941; border-radius: 24px; background: #fff4d2; color: var(--ink); padding: 28px; box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 0 0 5px rgba(255,255,255,.42); text-align: center; }
.eyebrow { margin: 0 0 10px; color: #755cab; font-size: 9px; font-weight: 950; letter-spacing: .17em; }
.panel h1 { margin: 0; font-size: clamp(38px, 12vw, 62px); line-height: .78; letter-spacing: -.055em; transform: rotate(-1deg); }
.panel h1 span { display: block; color: #6f52d4; font-size: .64em; letter-spacing: .035em; }
.lede { margin: 22px 0; color: #554c60; font-size: 13px; line-height: 1.45; }
.mode-buttons { display: grid; gap: 9px; }
.primary, .secondary { width: 100%; border-radius: 12px; padding: 13px 16px; font-weight: 950; letter-spacing: .04em; }
.primary { border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.secondary { border: 2px solid #433958; background: #7860d8; color: white; box-shadow: 0 4px 0 #433958; }
.primary:active, .secondary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.mode-button small { display: block; margin-bottom: 4px; opacity: .65; font-size: 7px; letter-spacing: .17em; }
.how-to { display: flex; justify-content: center; gap: 26px; margin-top: 24px; }
.how-to div { display: flex; align-items: center; gap: 4px; }
.how-to b { margin-left: 4px; font-size: 8px; letter-spacing: .12em; }
.key { min-width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid #443b51; border-radius: 5px; background: #fffaf0; box-shadow: 0 3px 0 #443b51; font-size: 9px; font-weight: 900; }
.key.wide { min-width: 52px; }
.touch-copy { display: none; margin: 22px 0 0; color: #655c6e; font-size: 10px; }
.end-panel h2 { margin: 0; color: #6d50d0; font-size: clamp(35px, 12vw, 54px); line-height: .9; letter-spacing: -.04em; }
.end-panel > p:not(.eyebrow) { color: #665d6c; font-size: 12px; }
.end-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 22px 0; border-block: 2px solid #d8cca9; padding: 16px 0; }
.end-stat small, .end-stat b { display: block; }
.end-stat small { color: #786b7a; font-size: 8px; letter-spacing: .12em; }
.end-stat b { margin-top: 4px; font-size: 20px; }
.text-button { margin-top: 17px; border: 0; background: none; color: #67547e; font-size: 9px; font-weight: 950; letter-spacing: .12em; text-decoration: underline; text-underline-offset: 4px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }
@keyframes dash { to { stroke-dashoffset: -120; } }
@keyframes dash-reverse { to { stroke-dashoffset: 120; } }
@keyframes float { to { translate: 0 -7px; } }
@keyframes bumper-flash { 45% { opacity: .78; } }
@keyframes boost-shock { to { scale: 3.2; opacity: 0; stroke-width: 2; } }
@keyframes squash-out { 35% { scale: 1.8 .3; } 100% { scale: 2 .08; opacity: 0; } }

@media (pointer: coarse), (max-width: 700px) {
  .how-to { display: none; }
  .touch-copy { display: block; }
  .icon-button { padding: 8px; font-size: 0; }
  .icon-button::after { content: "♪"; font-size: 14px; }
}

@media (max-width: 520px) {
  .topbar { inset-inline: 10px; gap: 7px; }
  .brand span:last-child { display: none; }
  .brand-dot { width: 30px; height: 30px; }
  .hud { min-width: 0; margin-left: auto; }
  .hud b { font-size: 15px; }
  .hud small { font-size: 7px; }
  .controls { grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); width: calc(100% - 20px); gap: 8px; }
  .steer-button { height: 59px; }
  .boost-button { width: 76px; height: 76px; }
  .panel { padding: 24px 20px; }
}

@media (max-height: 630px) {
  .topbar { top: 5px; }
  .controls { bottom: 6px; grid-template-columns: 96px 66px 96px; }
  .steer-button { height: 48px; }
  .boost-button { width: 66px; height: 66px; }
  .panel { padding-block: 20px; }
  .lede { margin: 13px 0; }
  .how-to { margin-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}