:root {
  color-scheme: dark;
  --ice: #c9fbff;
  --snow: #f4fbf9;
  --ink: #071722;
  --mist: rgba(213, 244, 245, .68);
  --cyan: #8ee8e1;
  --signal: #ff563c;
  --signal-2: #ffb648;
  --glass: rgba(5, 24, 34, .58);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #071722; }
body { user-select: none; -webkit-user-select: none; touch-action: none; }
button, kbd { font: inherit; }
button { color: inherit; }

#app { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: linear-gradient(#7ec0cb, #d9f1ed 55%, #c8e2df); }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.sky-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 232, 173, .54) 0, rgba(255, 231, 164, .12) 13%, transparent 29%),
    linear-gradient(180deg, rgba(17, 79, 104, .08), transparent 44%, rgba(3, 18, 26, .12));
  mix-blend-mode: screen;
}
#vignette {
  position: absolute; inset: -2px; z-index: 5; pointer-events: none; opacity: .58;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(1, 13, 20, .16) 72%, rgba(1, 11, 17, .52) 116%);
  transition: opacity .35s;
}
#impact-flash { position: absolute; inset: 0; z-index: 12; pointer-events: none; background: white; opacity: 0; }
#impact-flash.hit { animation: impact .38s ease-out; }
@keyframes impact { 0% { opacity: .78; } 18% { opacity: .22; } 100% { opacity: 0; } }

.overlay { position: absolute; inset: 0; z-index: 30; transition: opacity .45s ease; }
.overlay[hidden], .overlay:not(.is-visible) { opacity: 0; visibility: hidden; pointer-events: none; }

.title-screen {
  display: grid; grid-template-rows: auto 1fr auto auto; padding: clamp(22px, 3.5vw, 54px) clamp(22px, 5vw, 76px) max(20px, calc(var(--safe-bottom) + 12px));
  color: var(--snow); background: linear-gradient(90deg, rgba(3, 18, 28, .77) 0%, rgba(3, 18, 28, .42) 40%, rgba(3, 18, 28, .06) 72%);
  text-shadow: 0 2px 18px rgba(0, 11, 18, .4);
}
.title-topline { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: .24em; opacity: .82; }
.title-lockup { align-self: center; width: min(640px, 72vw); transform: translateY(1vh); }
.eyebrow { margin: 0 0 9px; color: var(--cyan); font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .28em; text-transform: uppercase; }
.title-lockup h1 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(68px, 11vw, 164px); line-height: .75; letter-spacing: -.025em; font-style: italic; font-weight: 950; }
.title-lockup h1 span { color: transparent; -webkit-text-stroke: 1.5px rgba(244,251,249,.86); }
.tagline { margin: clamp(18px, 2vw, 28px) 0 clamp(25px, 4vh, 42px) 5px; font-size: clamp(12px, 1.2vw, 17px); font-weight: 900; letter-spacing: .42em; }
.primary-button {
  --button-bg: var(--signal); min-width: 310px; height: 62px; padding: 0 18px; border: 0; border-radius: 2px;
  display: inline-grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; background: var(--button-bg); color: white;
  box-shadow: 0 12px 32px rgba(39, 8, 2, .26); cursor: pointer; font-size: 13px; font-weight: 950; letter-spacing: .18em;
  transform: skewX(-4deg); transition: transform .16s, filter .16s, box-shadow .16s;
}
.primary-button > * { transform: skewX(4deg); }
.primary-button:hover, .primary-button:focus-visible { transform: skewX(-4deg) translateY(-3px); filter: brightness(1.12); box-shadow: 0 16px 38px rgba(39, 8, 2, .34); outline: 2px solid white; outline-offset: 3px; }
.button-key { padding: 7px 8px 6px; border: 1px solid rgba(255,255,255,.62); border-radius: 2px; font-size: 8px; letter-spacing: .12em; }
.button-arrow { font-size: 24px; font-weight: 400; }
.quick-start { margin: 10px 0 0 5px; font-size: 10px; letter-spacing: .08em; opacity: .68; }
.control-ribbon { display: flex; align-items: stretch; gap: 0; width: min(900px, 80vw); border-top: 1px solid rgba(230,250,249,.34); border-bottom: 1px solid rgba(230,250,249,.18); background: rgba(3, 19, 29, .18); backdrop-filter: blur(8px); }
.control-item { display: flex; align-items: center; gap: 12px; min-width: 170px; padding: 14px 25px 14px 17px; border-right: 1px solid rgba(230,250,249,.2); }
kbd, .stick-icon { min-width: 30px; height: 29px; padding: 7px 8px; display: inline-grid; place-items: center; color: #06202d; background: rgba(239,253,251,.9); border: 0; border-radius: 2px; box-shadow: 0 2px 0 rgba(4,26,36,.4); font-size: 9px; font-weight: 950; }
.key-pair { display: flex; gap: 3px; }
.control-item b, .control-item small { display: block; white-space: nowrap; }
.control-item b { font-size: 9px; letter-spacing: .18em; }
.control-item small { margin-top: 3px; font-size: 9px; opacity: .56; }
.title-footer { margin: 12px 0 0; width: min(900px,80vw); text-align: right; font-size: 8px; font-weight: 800; letter-spacing: .26em; opacity: .6; }

.hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; transition: opacity .4s; color: var(--snow); text-shadow: 0 2px 8px rgba(1,17,24,.52); }
body.game-live .hud { opacity: 1; }
.hud-left { position: absolute; top: clamp(20px,3.6vw,48px); left: clamp(18px,3.6vw,52px); }
.zone-line { display: flex; gap: 9px; margin-bottom: 8px; font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.zone-line span:first-child { color: var(--signal-2); }
.altitude { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(34px,4.2vw,58px); line-height: .8; letter-spacing: .02em; }
.altitude small { margin-left: 6px; font-family: inherit; font-size: 12px; font-style: italic; opacity: .65; }
.surface-line { display: flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 8px; font-weight: 900; letter-spacing: .2em; opacity: .75; }
.surface-line i { width: 6px; height: 6px; border-radius: 50%; background: #e9fbff; box-shadow: 0 0 8px #dcfbff; }
.hud-right { position: absolute; top: clamp(20px,3.6vw,48px); right: clamp(18px,3.6vw,52px); text-align: right; }
.score-label { font-size: 8px; font-weight: 900; letter-spacing: .22em; opacity: .62; }
#score { margin-top: 2px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(30px,3.6vw,48px); line-height: 1; letter-spacing: .07em; }
.combo-row { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 8px; }
.combo-row span { color: var(--signal-2); font-size: 11px; font-weight: 950; letter-spacing: .1em; }
.combo-row i { width: 90px; height: 3px; overflow: hidden; background: rgba(255,255,255,.22); }
.combo-row i b { display: block; width: 0%; height: 100%; background: linear-gradient(90deg,var(--signal-2),var(--signal)); transition: width .12s linear; }
.runes { margin-top: 11px; display: flex; justify-content: flex-end; gap: 7px; color: rgba(225,249,248,.26); font-size: 11px; }
.runes span.found { color: #98fff1; filter: drop-shadow(0 0 5px #82e9e0); }
.hud-center { position: absolute; top: clamp(22px,3.8vw,51px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.course-spine { position: relative; width: min(180px, 18vw); height: 2px; background: rgba(244,252,250,.27); }
.course-spine i { display: block; width: 0; height: 100%; background: var(--snow); box-shadow: 0 0 7px rgba(229,255,251,.8); }
.course-spine b { position: absolute; top: -3px; left: 0; width: 2px; height: 8px; background: var(--signal-2); }
#distance-remaining { font-size: 8px; font-weight: 900; letter-spacing: .16em; white-space: nowrap; }
.icon-button { pointer-events: auto; border: 1px solid rgba(240,252,250,.35); color: white; background: rgba(4,25,34,.22); backdrop-filter: blur(5px); cursor: pointer; }
.pause-button { position: absolute; top: clamp(102px,10vw,136px); right: clamp(18px,3.6vw,52px); width: 32px; height: 32px; font-size: 11px; font-weight: 900; }
.pause-button:focus-visible { outline: 2px solid white; outline-offset: 3px; }

.speed-cluster { position: absolute; z-index: 11; left: clamp(14px,3vw,42px); bottom: clamp(24px,4vw,50px); width: 112px; height: 112px; display: grid; place-items: center; color: white; opacity: 0; transition: opacity .35s; text-shadow: 0 2px 10px rgba(0,11,17,.7); pointer-events: none; }
body.game-live .speed-cluster { opacity: 1; }
.speed-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(128deg); }
.speed-ring circle { fill: none; stroke: rgba(238,252,250,.2); stroke-width: 2; stroke-dasharray: 226 76; stroke-linecap: round; }
.speed-ring #speed-arc { stroke: var(--signal-2); stroke-width: 4; stroke-dasharray: 0 302; transition: stroke-dasharray .12s linear; filter: drop-shadow(0 0 3px rgba(255,172,55,.45)); }
.speed-cluster > div { display: flex; flex-direction: column; align-items: center; transform: translateY(-2px); }
.speed-cluster b { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 38px; line-height: .9; letter-spacing: .02em; }
.speed-cluster small { margin-top: 5px; font-size: 7px; font-weight: 900; letter-spacing: .2em; opacity: .6; }
#airtime { position: absolute; bottom: -10px; color: var(--signal-2); font-size: 10px; font-weight: 950; letter-spacing: .12em; white-space: nowrap; }

.announcer { position: absolute; z-index: 18; top: 22%; left: 50%; width: min(460px,86vw); transform: translate(-50%,-8px) scale(.96); color: white; text-align: center; opacity: 0; pointer-events: none; transition: opacity .18s, transform .28s cubic-bezier(.2,.8,.2,1); text-shadow: 0 3px 18px rgba(0,14,22,.56); }
.announcer.show { opacity: 1; transform: translate(-50%,0) scale(1); }
.announcer span, .announcer small { display: block; font-size: 8px; font-weight: 900; letter-spacing: .27em; }
.announcer span { color: var(--cyan); }
.announcer strong { display: block; margin: 5px 0 3px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(28px,4vw,50px); font-style: italic; letter-spacing: .04em; }
.announcer small { color: var(--signal-2); }

.crash-card { position: absolute; z-index: 26; top: 50%; left: 50%; transform: translate(-50%,-40%) rotate(-3deg) scale(.78); min-width: 320px; padding: 18px 34px 21px; color: #071722; background: var(--signal-2); box-shadow: 9px 11px 0 rgba(4,19,26,.33); text-align: center; opacity: 0; visibility: hidden; transition: opacity .12s, transform .25s cubic-bezier(.22,1.35,.45,1); }
.crash-card.show { opacity: 1; visibility: visible; transform: translate(-50%,-50%) rotate(-2deg) scale(1); }
.crash-card span, .crash-card small { display: block; font-size: 8px; font-weight: 950; letter-spacing: .26em; }
.crash-card strong { display: block; margin: 4px 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 41px; font-style: italic; letter-spacing: .03em; }

.modal-screen { display: grid; place-items: center; background: rgba(1,16,24,.64); backdrop-filter: blur(10px); }
.modal-card { width: min(510px, calc(100vw - 34px)); padding: clamp(30px,5vw,55px); border: 1px solid rgba(222,249,247,.22); background: rgba(4,24,33,.78); box-shadow: 0 24px 90px rgba(0,11,17,.48); text-align: center; color: white; }
.modal-card h2 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(54px,9vw,94px); line-height: .9; font-style: italic; letter-spacing: .04em; }
.modal-sub { margin: 14px 0 30px; color: var(--mist); font-size: 12px; letter-spacing: .08em; }
.primary-button.compact { min-width: min(100%,330px); height: 56px; }
.secondary-button { display: block; margin: 14px auto 0; padding: 10px 18px; border: 0; background: transparent; color: rgba(226,248,247,.62); cursor: pointer; font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.secondary-button:hover, .secondary-button:focus-visible { color: white; text-decoration: underline; outline: none; }
.modal-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(220,247,245,.13); font-size: 8px; letter-spacing: .08em; color: rgba(225,247,246,.55); }
.modal-controls b { color: white; }

.summary-screen { display: grid; place-items: center; background: linear-gradient(90deg, rgba(2,18,27,.88), rgba(4,22,30,.61)); backdrop-filter: blur(8px); }
.summary-card { width: min(670px, calc(100vw - 36px)); max-height: calc(100vh - 30px); overflow: auto; padding: clamp(24px,4vw,48px); color: white; border-left: 3px solid var(--signal); background: rgba(3,22,31,.8); box-shadow: 0 28px 110px rgba(0,8,13,.52); }
.summary-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.summary-heading h2 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(48px,8vw,88px); line-height: .72; font-style: italic; letter-spacing: .03em; }
.summary-heading h2 span { color: transparent; -webkit-text-stroke: 1px rgba(240,252,250,.8); }
.rank-badge { width: 76px; height: 86px; display: grid; place-items: center; color: #06202a; background: var(--signal-2); clip-path: polygon(8% 0,100% 0,92% 87%,50% 100%,8% 87%,0 0); font-family: Impact, sans-serif; font-size: 52px; font-style: italic; }
.summary-score { position: relative; margin-top: 29px; padding: 18px 0; border-top: 1px solid rgba(230,250,248,.18); border-bottom: 1px solid rgba(230,250,248,.18); }
.summary-score span { display: block; font-size: 8px; font-weight: 900; letter-spacing: .25em; opacity: .55; }
.summary-score strong { display: block; font-family: Impact, sans-serif; font-size: clamp(42px,7vw,72px); line-height: 1; letter-spacing: .07em; }
.summary-score em { position: absolute; right: 0; bottom: 22px; padding: 7px 9px; background: var(--signal); font-size: 8px; font-style: normal; font-weight: 950; letter-spacing: .13em; transform: rotate(-2deg); }
.summary-score em[hidden] { display: none; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 18px; background: rgba(230,250,248,.15); }
.stat-grid > div { min-width: 0; padding: 14px; background: rgba(3,23,32,.94); }
.stat-grid span, .stat-grid small { display: block; font-size: 7px; font-weight: 900; letter-spacing: .15em; opacity: .56; }
.stat-grid b { display: inline-block; margin: 8px 3px 2px 0; font-family: Impact,sans-serif; font-size: 29px; letter-spacing: .03em; }
.secret-line { margin: 17px 0; font-size: 8px; letter-spacing: .16em; color: rgba(230,249,247,.57); }
.secret-line b { color: var(--cyan); }

.touch-controls { position: absolute; z-index: 20; left: 0; right: 0; bottom: max(9px,var(--safe-bottom)); display: none; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; padding: 0 10px; pointer-events: none; opacity: 0; transition: opacity .25s; }
body.game-live .touch-controls { opacity: 1; }
.touch-controls button { pointer-events: auto; touch-action: none; border: 1px solid rgba(236,252,250,.28); background: rgba(3,24,34,.36); color: white; backdrop-filter: blur(7px); -webkit-tap-highlight-color: transparent; }
.touch-controls button.active { background: rgba(255,86,60,.72); border-color: rgba(255,255,255,.7); }
.touch-edge { height: 82px; display: grid; place-items: center; align-content: center; border-radius: 4px 4px 18px 18px; }
.touch-edge span { font-size: 24px; }
.touch-edge small { margin-top: 3px; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.touch-mid { display: flex; flex-direction: column; gap: 7px; }
.touch-mid button { width: 74px; height: 39px; border-radius: 3px; font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.touch-mid #touch-tuck { height: 49px; background: rgba(255,182,72,.38); }

.hint-line { position: absolute; z-index: 15; bottom: 36px; left: 50%; transform: translate(-50%,8px); display: flex; gap: 9px; align-items: center; color: white; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; text-shadow: 0 2px 8px #02131d; }
.hint-line.show { opacity: 1; transform: translate(-50%,0); }
.hint-line span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.48); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.hint-line b { font-size: 8px; letter-spacing: .17em; }
#performance-warning { position: absolute; z-index: 20; right: 14px; bottom: 14px; padding: 5px 7px; color: rgba(255,255,255,.72); background: rgba(5,22,29,.6); font-size: 7px; font-weight: 900; letter-spacing: .16em; opacity: 0; pointer-events: none; }
#performance-warning.show { opacity: 1; }
.audio-button { position: absolute; z-index: 32; left: clamp(18px,3.6vw,52px); bottom: max(14px,var(--safe-bottom)); padding: 6px 0; border: 0; background: transparent; color: rgba(241,253,251,.58); cursor: pointer; font-size: 7px; font-weight: 900; letter-spacing: .17em; }
body.game-live .audio-button { left: auto; right: clamp(18px,3.6vw,52px); bottom: 13px; }
.audio-button:focus-visible { outline: 1px solid white; outline-offset: 4px; }

@media (pointer: coarse), (max-width: 720px) {
  .touch-controls { display: grid; }
  .title-screen { padding: 19px 18px max(16px, var(--safe-bottom)); grid-template-rows: auto 1fr auto; }
  .title-lockup { width: 94vw; align-self: center; transform: translateY(-2vh); }
  .title-lockup h1 { font-size: clamp(62px,19vw,105px); }
  .tagline { margin: 18px 0 28px 3px; font-size: 10px; letter-spacing: .32em; }
  .primary-button { width: min(310px, 88vw); min-width: 0; height: 57px; }
  .control-ribbon { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); }
  .control-item { min-width: 0; padding: 10px 7px; gap: 7px; justify-content: center; }
  .control-item kbd, .control-item .key-pair, .gamepad-hint { display: none; }
  .control-item b { font-size: 8px; }
  .control-item small { font-size: 7px; }
  .title-footer { display: none; }
  .title-topline { font-size: 7px; }
  .hud-left { top: 17px; left: 14px; }
  .hud-right { top: 17px; right: 14px; }
  .hud-center { top: 91px; }
  .course-spine { width: 110px; }
  #distance-remaining { display: none; }
  .altitude { font-size: 34px; }
  .zone-line { font-size: 7px; }
  #zone-name { max-width: 126px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #score { font-size: 30px; }
  .combo-row i { width: 58px; }
  .pause-button { top: 88px; right: 14px; width: 35px; height: 35px; }
  .speed-cluster { width: 83px; height: 83px; left: 50%; bottom: 104px; transform: translateX(-50%); }
  .speed-cluster b { font-size: 30px; }
  .hint-line { bottom: 197px; }
  .audio-button, body.game-live .audio-button { display: none; }
  .summary-card { padding: 24px 22px; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .summary-score em { position: static; display: inline-block; margin-top: 8px; }
  .announcer { top: 27%; }
}

@media (max-height: 610px) and (orientation: landscape) {
  .title-screen { padding-top: 15px; padding-bottom: 10px; }
  .title-lockup h1 { font-size: 64px; }
  .title-lockup { transform: none; }
  .tagline { margin: 10px 0 14px; }
  .control-ribbon { display: none; }
  .title-footer { display: none; }
  .speed-cluster { bottom: 12px; }
  .touch-edge { height: 62px; }
  .summary-card { max-height: calc(100vh - 16px); padding-top: 18px; padding-bottom: 18px; }
  .summary-heading h2 { font-size: 48px; }
  .summary-score { margin-top: 15px; padding: 10px 0; }
}

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