:root{color-scheme:dark;--bg:#070b13;--ink:#eef8ff;--muted:#91a1b7;--cyan:#72f3e0;--blue:#6ca6ff;--pink:#ff527d;--amber:#ffd36c}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:"Space Grotesk",sans-serif}
body{background:radial-gradient(ellipse at 50% -20%,#16344a6b,transparent 46%),var(--bg)}
button,a{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit}
.game-page{min-height:100svh;display:flex;flex-direction:column}
.game-topbar{height:66px;flex:0 0 66px;padding:0 clamp(15px,4vw,50px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #8ca4be20;background:#090e18e8;backdrop-filter:blur(16px)}
.game-brand{display:flex;align-items:center;gap:10px;color:#a9bad0;font-size:9px;font-weight:700;letter-spacing:.15em}.game-brand b{color:#eaf7ff}.game-brand i{margin:0 4px;color:#547087;font-style:normal}.game-brand-icon{width:30px;height:30px;display:grid;place-items:center;border:1px solid #72f3e064;border-radius:9px;color:var(--cyan);font-size:17px;letter-spacing:0;box-shadow:inset 0 0 18px #72f3e01a,0 0 22px #72f3e010}
.top-actions{display:flex;align-items:center;gap:10px}.icon-button{position:relative;width:34px;height:34px;display:grid;place-items:center;border:1px solid #90a4bb32;border-radius:8px;background:#ffffff06;color:#c6d6ea;font-size:17px;cursor:pointer}.icon-button:hover{border-color:#72f3e0a8;color:var(--cyan)}.sound-slash{position:absolute;width:19px;height:1px;transform:rotate(-45deg);background:var(--pink);display:none}.icon-button[aria-label="Turn sound on"] .sound-slash{display:block}
.exit-game{margin-left:5px;color:#93a6bd;font-size:9px;letter-spacing:.1em;text-transform:uppercase}.exit-game span{margin-left:5px;color:var(--cyan)}.exit-game:hover{color:#fff}
.cabinet{width:min(1200px,100%);margin:auto;padding:clamp(12px,2.4vw,30px) clamp(10px,2vw,22px) 10px}
.game-display{position:relative;isolation:isolate;width:100%;height:min(72svh,720px);min-height:440px;overflow:hidden;border:1px solid #5e7a943f;border-radius:15px;background:#080f1d;box-shadow:0 24px 90px #0009,0 0 45px #1ebbc20c,inset 0 0 80px #020713;touch-action:none}
#gameCanvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
.screen-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0509127a,transparent 25%,transparent 77%,#05091272),radial-gradient(ellipse at center,transparent 52%,#02050bb8 130%)}
.hud{position:absolute;z-index:2;top:0;left:0;right:0;min-height:79px;padding:15px 18px 10px;display:grid;grid-template-columns:1fr .8fr 1fr;align-items:start;background:linear-gradient(#070b13ce,transparent);pointer-events:none}
.hud-cell{display:flex;flex-direction:column;gap:4px}.hud-cell>span{color:#9aaec1;font:500 7px "DM Mono",monospace;letter-spacing:.18em}.hud-cell strong{color:#f2f8ff;font:500 20px/1 "DM Mono",monospace;letter-spacing:.08em}.hud-cell small{color:#87a3b5;font:400 7px "DM Mono",monospace;letter-spacing:.14em}.center-cell{align-items:center;text-align:center}.center-cell strong{color:var(--cyan);font-size:18px}.right-cell{align-items:flex-end;text-align:right}.lives{color:#ff7188!important;font-size:10px!important;letter-spacing:.16em!important}.level-meter{width:80px;height:3px;margin-top:3px;overflow:hidden;background:#ffffff1c;border-radius:2px}.level-meter i{display:block;width:5%;height:100%;background:linear-gradient(90deg,#72f3e0,#6ca6ff,#ff6287);box-shadow:0 0 9px #72f3e0;transition:width .25s}
.boost-readout,.shield-readout{position:absolute;top:80px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:7px;padding:6px 10px;border:1px solid #ffd36c68;border-radius:50px;background:#171527cf;color:#ffe39d;font:500 7px "DM Mono",monospace;letter-spacing:.13em;white-space:nowrap;box-shadow:0 4px 20px #0005}.boost-readout.active,.shield-readout.active{display:flex}.boost-gem{color:#ffd36c;font-size:12px}.boost-readout b{color:#fff6dc;font-size:9px}.shield-readout{top:110px;border-color:#72f3e069;color:#a7fff3}
.screen-overlay{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;padding:25px 20px 72px;background:linear-gradient(95deg,#030712e8,#050a13b8 48%,#060b168a);backdrop-filter:blur(3px);pointer-events:none}.screen-overlay[hidden]{display:none}.intro-panel,.pause-panel,.end-panel{pointer-events:auto;width:min(450px,100%);text-align:center}.overlay-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#91a9bd;font:500 8px "DM Mono",monospace;letter-spacing:.2em}.overlay-eyebrow i{width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan)}
.intro-panel h1,.end-panel h2{margin:19px 0 10px;font:700 clamp(62px,9vw,106px)/.79 "Space Grotesk",sans-serif;letter-spacing:-.09em;text-shadow:0 12px 50px #0009}.intro-panel h1 em,.end-panel h2 em{color:var(--cyan);font-style:normal;text-shadow:0 0 32px #72f3e047}.intro-panel>p,.pause-panel>p,.end-panel>p{margin:18px 0 0;color:#b6c5d5;font-size:12px;line-height:1.7}
.start-button{width:min(275px,100%);min-height:48px;margin-top:25px;padding:0 15px 0 20px;display:inline-flex;align-items:center;justify-content:space-between;border:1px solid #72f3e0a3;border-radius:8px;background:linear-gradient(110deg,#145a57,#18456a);box-shadow:0 8px 34px #12d5c51a,inset 0 1px #ffffff25;color:#f3fffd;font-size:10px;font-weight:700;letter-spacing:.12em;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}.start-button b{display:grid;place-items:center;width:29px;height:29px;border-radius:6px;background:#72f3e01b;color:var(--cyan);font-size:18px}.start-button:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 12px 39px #12d5c538}
.intro-controls{margin-top:22px;display:flex;justify-content:center;gap:15px;flex-wrap:wrap;color:#9dafc4;font:500 7px "DM Mono",monospace;letter-spacing:.08em}.intro-controls span{display:flex;align-items:center;gap:4px}.intro-controls kbd{min-width:17px;height:17px;padding:2px 4px;border:1px solid #b3c6d54c;border-radius:4px;background:#ffffff0c;color:#f1fbff;font:500 8px "DM Mono",monospace}.intro-foot{position:absolute;bottom:17px;left:20px;right:20px;display:flex;justify-content:space-between;color:#7890a5;font:400 7px "DM Mono",monospace;letter-spacing:.16em}
.pause-panel h2{margin:18px 0 5px;font-size:37px;letter-spacing:-.055em}.pause-panel>p{margin-top:8px}.quiet-button{display:block;margin:14px auto 0;border:0;background:transparent;color:#aabbd0;font-size:10px;cursor:pointer}.quiet-button:hover{color:var(--cyan)}
.end-panel h2{font-size:clamp(48px,7vw,73px);line-height:.9}.end-panel h2 em{display:inline-block;margin-top:6px}.result-score{margin:21px auto 4px;display:flex;flex-direction:column;gap:5px}.result-score span{color:#9aadc1;font:500 7px "DM Mono",monospace;letter-spacing:.2em}.result-score strong{font:500 32px "DM Mono",monospace;color:#fff}.end-panel>p{margin:7px 0 0;font-size:10px}
.combo-flash{position:absolute;z-index:3;left:50%;top:38%;transform:translate(-50%,-50%) scale(.7);opacity:0;color:#fff4c0;font:700 clamp(28px,5vw,48px) "Space Grotesk",sans-serif;text-shadow:0 0 22px #ffd36c99;pointer-events:none;transition:transform .25s,opacity .25s}.combo-flash.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.combo-flash span{display:block;margin-top:-4px;text-align:center;color:var(--amber);font:500 8px "DM Mono",monospace;letter-spacing:.18em}
.control-strip{position:absolute;z-index:3;bottom:12px;left:12px;right:12px;display:flex;align-items:end;justify-content:center;gap:9px;pointer-events:none}.touch-control{pointer-events:auto;width:57px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid #b6d1e54a;border-radius:9px;background:#0a1120b8;backdrop-filter:blur(9px);color:#d5eaff;touch-action:none;user-select:none;cursor:pointer;transition:background .12s,transform .12s,border-color .12s}.touch-control span{font-size:20px;line-height:1}.touch-control small{font:500 6px "DM Mono",monospace;letter-spacing:.15em;color:#8ba1b8}.touch-control:active,.touch-control.pressed{transform:translateY(2px);border-color:var(--cyan);background:#164447d9}.brake-control{margin-left:10px;width:65px;color:#ffd78c;border-color:#e7bf744a}.brake-control small{color:#d5b979}.pause-control{margin-left:10px;width:52px;height:42px}
.game-footer{width:min(1155px,calc(100% - 36px));margin:0 auto 18px;display:grid;grid-template-columns:1fr 1.2fr auto;align-items:center;gap:20px;color:#8395aa}.game-footer>div{display:flex;flex-direction:column;gap:5px}.game-footer>div b{color:#a9bbce;font:500 7px "DM Mono",monospace;letter-spacing:.18em}.game-footer>div span{font-size:8px;line-height:1.55}.build-signature{color:#91a7b9;font:500 7px "DM Mono",monospace;letter-spacing:.13em;white-space:nowrap}.build-signature i{color:var(--cyan);font-style:normal;margin-left:5px}.screen-reader-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:740px){.game-display{height:min(74svh,650px);min-height:450px;border-radius:11px}.game-footer{grid-template-columns:1fr 1.2fr}.build-signature{grid-column:1/-1;justify-self:end}.hud{padding:12px 12px 8px}.hud-cell strong{font-size:16px}.center-cell strong{font-size:15px}}
@media(max-width:520px){.game-topbar{height:57px;flex-basis:57px;padding-inline:13px}.game-brand{font-size:7px;letter-spacing:.1em;gap:7px}.game-brand-icon{width:27px;height:27px;font-size:15px}.top-actions{gap:6px}.icon-button{width:30px;height:30px;font-size:15px}.exit-game{font-size:7px;margin-left:1px}.cabinet{padding:8px 7px}.game-display{height:calc(100svh - 140px);min-height:450px;max-height:700px;border-radius:9px}.hud{min-height:68px;padding:11px 9px 6px}.hud-cell>span{font-size:6px}.hud-cell strong{font-size:14px}.hud-cell small{font-size:6px}.center-cell strong{font-size:13px}.level-meter{width:55px}.lives{font-size:9px!important}.boost-readout{top:69px}.shield-readout{top:98px}.screen-overlay{padding:20px 12px 68px}.intro-panel h1{font-size:67px}.intro-panel>p{font-size:10px}.intro-controls{gap:7px;margin-top:17px;font-size:6px}.intro-controls kbd{min-width:15px;height:15px;font-size:7px}.intro-foot{left:11px;right:11px;font-size:6px}.control-strip{bottom:8px;gap:6px}.touch-control{width:51px;height:44px}.brake-control{width:59px;margin-left:5px}.pause-control{width:46px;margin-left:5px;height:40px}.game-footer{width:calc(100% - 30px);grid-template-columns:1fr;gap:9px;margin-bottom:14px}.game-footer>div span{font-size:8px}.build-signature{grid-column:auto;justify-self:start;margin-top:4px}}
@media(max-height:660px) and (min-width:521px){.game-topbar{height:54px;flex-basis:54px}.cabinet{padding-top:8px}.game-display{height:calc(100svh - 142px);min-height:370px}.game-footer{margin-bottom:9px}.intro-panel h1{font-size:65px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.icon-button[aria-label="Turn music and effects on"] .sound-slash{display:block}
.speed-cell>strong{display:flex;align-items:baseline;gap:5px}
.speed-cell>strong b{font:500 18px/1 "DM Mono",monospace;letter-spacing:.04em;color:var(--cyan)}
.speed-cell>strong small{font:500 6px "DM Mono",monospace;letter-spacing:.08em;color:#9eb2c7}
.speed-level{margin-top:1px}.speed-level i{font-style:normal;color:#c2d5e5}
.control-strip{position:absolute;inset:0;display:block;pointer-events:none}
.touch-control{position:absolute;display:flex;align-items:center;justify-content:center;gap:2px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 8px 26px #0008,inset 0 1px #ffffff16}
.steering-control{bottom:clamp(12px,2vw,20px);width:86px;height:86px;border-radius:50%;border-color:#7bdff08a;background:linear-gradient(145deg,#11243acc,#09111de8);box-shadow:0 0 28px #4e9fff2b,inset 0 1px #ffffff2a}
.steering-control span{font-size:31px;line-height:1;color:#e8f8ff;text-shadow:0 0 15px #65c9ff}
.steering-control small{font-size:7px;color:#adc4d9}
.left-steer{left:clamp(12px,2.3vw,28px)}.right-steer{right:clamp(12px,2.3vw,28px)}
.brake-control,.speed-control{bottom:clamp(22px,3vw,31px);height:58px;border-radius:16px}
.brake-control{left:calc(50% - 101px);width:64px;margin:0;color:#ffd78c;border-color:#e7bf748a;background:linear-gradient(145deg,#342714dc,#13101be8)}
.brake-control span,.speed-control span{font-size:20px;line-height:1}
.brake-control small,.speed-control small{font-size:7px;letter-spacing:.12em}
.speed-control{left:calc(50% + 22px);width:76px;border-color:#74f7d4ad;color:#a8ffeb;background:linear-gradient(145deg,#105c51e8,#10213ce8);box-shadow:0 0 24px #33ead048,inset 0 1px #ffffff37}
.speed-control small{color:#c7fff0}
.speed-control.active{border-color:#ffe178;box-shadow:0 0 34px #ffb93891,inset 0 1px #ffffff55;animation:turboPulse .42s ease-in-out infinite alternate}
.speed-control.cooldown{opacity:.55;border-color:#6d7b8c}
@keyframes turboPulse{from{transform:scale(1)}to{transform:scale(1.06)}}
@media(max-width:520px){.steering-control{width:74px;height:74px;bottom:10px}.left-steer{left:9px}.right-steer{right:9px}.steering-control span{font-size:27px}.brake-control,.speed-control{bottom:18px;height:54px;border-radius:14px}.brake-control{left:calc(50% - 78px);width:56px}.speed-control{left:calc(50% + 12px);width:64px}.brake-control span,.speed-control span{font-size:18px}.brake-control small,.speed-control small{font-size:6px}.top-actions{gap:5px}}
/* Near-white page chrome; the midnight racing scene keeps its game contrast. */
html,body{background:#f5f8fd;color:#152b47;color-scheme:light}
.game-topbar{background:#fffffff5;border-color:#cbd8e8}
.game-brand,.exit-game{color:#4c6179}.game-brand b{color:#152b47}
.game-brand-icon{background:#eaf2ff;color:#185eb2;border-color:#adc6e6;box-shadow:none}
.icon-button{color:#185eb2;background:#fff;border-color:#cbd8e8}.icon-button:hover,.exit-game:hover{color:#104a8d;border-color:#185eb2}
.game-footer,.game-footer>div b,.build-signature{color:#4c6179}.build-signature i{color:#185eb2}
.play-breadcrumbs{color:#4c6179}.play-breadcrumbs a{color:#185eb2}.play-breadcrumbs [aria-current=page]{color:#152b47}
.screen-overlay{background:linear-gradient(110deg,#f5f8fdf5,#ffffffec);color:#152b47}
.intro-panel h1,.end-panel h2{color:#152b47;text-shadow:none}.intro-panel h1 em,.end-panel h2 em{color:#185eb2;text-shadow:none}
.overlay-eyebrow,.intro-panel>p,.pause-panel>p,.end-panel>p,.intro-controls,.intro-foot,.result-score span,.quiet-button{color:#4c6179}
.result-score strong{color:#152b47}.intro-controls kbd{background:#eaf2ff;color:#185eb2;border-color:#adc6e6}
.start-button{background:#185eb2;color:#fff;border-color:#185eb2;box-shadow:0 8px 24px #185eb220}.start-button b{background:#ffffff20;color:#fff}
