*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#252732;color:#fff;font:13px Arial,sans-serif}#game{display:block;width:100vw;height:100dvh}button{font:inherit;cursor:pointer;border:0;border-bottom:1px solid #ffffff65;border-radius:0;padding:8px 0;background:transparent;color:#fff}button:disabled{opacity:.55;cursor:wait}button:focus-visible{outline:2px solid white;outline-offset:4px}[hidden]{display:none!important}.dashboard,#right-hud{position:fixed;bottom:max(28px,env(safe-area-inset-bottom));z-index:3;text-shadow:0 1px 5px #000b}.dashboard{left:max(28px,env(safe-area-inset-left));width:190px;pointer-events:none}#player-state{font-size:10px;letter-spacing:2px;margin-bottom:12px}.readouts{display:flex;gap:28px;align-items:baseline}.readouts strong{display:block;font-size:38px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1}.readouts small{display:block;font-size:10px;margin-top:5px;letter-spacing:1px}#coins{font-size:26px}#charge{font-size:10px;letter-spacing:.8px;margin-top:16px}.boost-track{height:2px;background:#ffffff30;margin-top:8px;overflow:hidden}#boost-fill{height:100%;background:white;transform:scaleX(0);transform-origin:left}#right-hud{right:max(28px,env(safe-area-inset-right));width:260px;text-align:right}#standings{font-size:14px;letter-spacing:2px;margin:12px 0}#status,#push-hint,#item{font-size:12px;line-height:1.5;margin-top:6px}#status:empty,#push-hint:empty,#item:empty{display:none}.controls{display:flex;justify-content:flex-end;gap:18px;font-size:11px}.controls button{text-shadow:0 1px 5px #000b}#camera{display:none;position:fixed;left:max(28px,env(safe-area-inset-left));top:max(28px,env(safe-area-inset-top));width:220px;height:165px;overflow:hidden;z-index:2;border:1px solid #fff;border-radius:4px;background:#15151a}video,#hands{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}video{transform:scaleX(-1);opacity:.85}#camera.preview-hidden{width:1px;height:1px;opacity:.01;pointer-events:none;border:0}#camera.preview-hidden #hands{visibility:hidden}#intro,#result{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,90vw);padding:30px;background:#161921e8;border:1px solid #ffffff30;border-radius:12px;text-align:center;z-index:5}#intro>small{font-size:10px;letter-spacing:2px}h1{margin:14px 0;font-size:30px;font-weight:500}p{color:#fff;line-height:1.6;font-size:13px}.instructions{text-align:left;margin:22px 0;display:grid;gap:12px;font-size:12px}.instructions b{display:inline-block;width:58px;font-size:10px;letter-spacing:1px}#start,#again{background:white;color:#24242b;border:0;border-radius:5px;font-weight:600;padding:13px 22px}#keyboard-start{display:block;margin:12px auto 0;border:0;font-size:12px}#error{margin-bottom:0}#error:empty{display:none}#push-flash{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 60px #fff9;opacity:0;transition:opacity .08s}#push-flash.active{opacity:.25}@media(max-width:600px){.dashboard{left:16px;bottom:20px;width:132px}#right-hud{right:16px;bottom:20px;width:185px}.readouts{gap:20px}.readouts strong{font-size:30px}#coins{font-size:22px}#camera{left:max(16px,env(safe-area-inset-left));top:max(16px,env(safe-area-inset-top));width:176px;height:132px}.controls{gap:12px;font-size:10px}#status,#push-hint,#item{font-size:10px}#standings{font-size:12px}#intro,#result{padding:24px}}@media(max-height:500px){#camera{width:144px;height:108px;top:16px}.dashboard,#right-hud{bottom:16px}}

/* Compact identity above the camera preview. */
#brand{position:fixed;top:max(26px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));z-index:3;color:#fff;font-size:12px;font-weight:600;letter-spacing:3px;line-height:18px;text-shadow:0 1px 5px #0008;pointer-events:none}#brand span{font-weight:400;letter-spacing:2px}#camera{top:calc(max(26px,env(safe-area-inset-top)) + 36px)}
@media(max-width:600px){#brand{left:max(16px,env(safe-area-inset-left));top:max(16px,env(safe-area-inset-top));font-size:10px;letter-spacing:2.5px}#camera{top:calc(max(16px,env(safe-area-inset-top)) + 32px)}}
@media(max-height:500px){#brand{top:16px}#camera{top:48px}}

/* Gesture boost: small composited edge streaks; no full-screen scene blur. */
#push-flash{z-index:1;overflow:hidden;contain:strict;box-shadow:none;background:radial-gradient(ellipse at 50% 48%,transparent 42%,rgba(255,210,162,.06) 61%,rgba(255,196,145,.36) 87%,rgba(255,244,217,.66) 100%);transition:opacity .06s ease-out;opacity:0}
#push-flash.active{opacity:1}
#push-flash i{position:absolute;left:var(--x);top:var(--y);width:var(--length);height:3px;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(255,220,178,.3) 32%,rgba(255,252,233,.95) 85%,transparent);box-shadow:0 0 7px 2px rgba(255,226,187,.38);filter:blur(1.3px);opacity:0;transform-origin:left center;animation:push-trail .58s linear infinite;animation-delay:var(--delay);animation-play-state:paused}
#push-flash.active i{animation-play-state:running}
@keyframes push-trail{0%{transform:rotate(var(--angle)) translateX(-9vmax) scaleX(.45);opacity:0}25%{opacity:.7}75%{opacity:.5}100%{transform:rotate(var(--angle)) translateX(12vmax) scaleX(1.35);opacity:0}}
@media(prefers-reduced-motion:reduce){#push-flash i{animation:none}#push-flash.active{opacity:.65}}

.scene-choice{display:block;margin-bottom:20px;font-size:11px;letter-spacing:2px;color:white}.scene-choice select{margin-left:12px;padding:8px 12px;background:#101225;color:#fff;border:1px solid #ffffff55;border-radius:5px;font:inherit;letter-spacing:.4px}

#push-flash.charging:not(.active){opacity:.22;transition:opacity .055s}
body[data-scene="prism"] #push-flash{background:radial-gradient(ellipse at 50% 48%,transparent 42%,rgba(135,180,255,.04) 60%,rgba(126,134,255,.30) 87%,rgba(236,204,255,.60) 100%)}
body[data-scene="prism"] #push-flash i{background:linear-gradient(90deg,transparent,rgba(130,220,255,.3) 32%,rgba(232,208,255,.95) 85%,transparent);box-shadow:0 0 7px 2px rgba(186,174,255,.38)}

/* The start card follows the same white, low-chrome language as the race HUD. */
#intro{width:min(440px,90vw);padding:32px 34px;background:linear-gradient(155deg,rgba(17,22,39,.72),rgba(14,17,31,.62));border:1px solid rgba(255,255,255,.5);border-radius:3px;box-shadow:0 18px 65px rgba(6,8,24,.32);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-shadow:0 1px 6px rgba(5,8,24,.5)}
#intro>small,#intro .scene-choice,#intro .instructions b{font-size:10px;letter-spacing:2px;font-weight:600}
#intro h1{font-size:34px;font-weight:400;letter-spacing:-.6px;margin:12px 0 4px}
#intro p{margin:8px 0;color:#fff}
#intro .scene-choice{margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid #ffffff70}
#intro .scene-choice select{background:transparent;color:#fff;border:0;border-radius:0;border-bottom:1px solid #fff;padding:6px 18px 6px 4px;letter-spacing:.5px;text-shadow:0 1px 5px #0008}
#intro .scene-choice option{color:#24242b;background:#fff}
#intro .instructions{margin:24px 0;gap:0}
#intro .instructions span{padding:9px 0;border-top:1px solid #ffffff40}
#intro .instructions span:last-child{border-bottom:1px solid #ffffff40}
#intro #start{width:100%;padding:13px 20px;background:rgba(255,255,255,.16);border:1px solid #ffffffc7;border-radius:2px;color:#fff;font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 1px 5px #0007}
#intro #start:hover:not(:disabled){background:rgba(255,255,255,.28)}
#intro #keyboard-start{margin:13px auto 0;color:#fff;font-size:11px;letter-spacing:.6px;text-shadow:0 1px 5px #0007}
#intro #error{font-size:12px}
@media(max-width:600px){#intro{padding:24px}}

/* Full-screen opening composition: the live circuit remains the artwork. */
body.pre-race #brand,body.pre-race .player,body.pre-race #right-hud{display:none}
#intro{inset:0;top:0;left:0;transform:none;width:100%;height:100%;height:100dvh;box-sizing:border-box;padding:clamp(22px,3.1vw,52px);display:flex;flex-direction:column;justify-content:space-between;overflow:auto;border:0;border-radius:0;box-shadow:none;background-color:#5b4f73;background-image:linear-gradient(180deg,rgba(24,14,47,.22) 0%,rgba(24,14,47,.14) 33%,rgba(15,12,32,.02) 53%,rgba(12,10,27,.53) 100%),url('hero-coast.jpg');background-size:cover;background-position:center;-webkit-backdrop-filter:none;backdrop-filter:none;text-align:center;color:#fff;text-shadow:0 2px 12px rgba(7,6,22,.62)}
body[data-scene="prism"] #intro{background-color:#080b2b;background-image:linear-gradient(180deg,rgba(5,5,24,.22),rgba(5,5,24,.10) 34%,rgba(5,5,24,.02) 48%,rgba(3,3,18,.48) 100%),url('hero-prism.jpg')}
#intro .intro-top{display:flex;align-items:flex-start;justify-content:flex-end;gap:24px;text-align:left}
#intro .intro-mark{font-size:11px;letter-spacing:.28em;font-weight:600;white-space:nowrap}
#intro .intro-mark i{font-style:normal;opacity:.65;margin:0 .55em}
#intro .scene-choice{margin:0;padding:0;border:0;font-size:10px;white-space:nowrap;text-align:right}
#intro .scene-choice select{max-width:160px;margin-left:12px;padding:2px 17px 6px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.7);background:transparent;font-size:11px;font-weight:600;cursor:pointer}
#intro .intro-hero{position:absolute;top:19%;left:0;right:0;margin:0 auto;padding:0 24px}
#intro .intro-hero small{font-size:11px;letter-spacing:.42em;font-weight:500}
#intro h1{margin:0 0 12px;font-family:Baskerville,"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;font-size:clamp(60px,7.2vw,116px);line-height:1.05;font-weight:400;letter-spacing:.14em;text-indent:.14em;white-space:nowrap;text-transform:uppercase}
#intro .intro-hero p{margin:0;font-size:11px;letter-spacing:.36em;text-transform:uppercase}
#intro .intro-footer{position:relative;display:flex;justify-content:space-between;align-items:end;gap:28px;width:100%;min-height:138px;text-align:left}
#intro .instructions{width:min(36vw,375px);margin:0;gap:7px;font-size:10px;line-height:1.4;opacity:.94}
#intro .instructions span{padding:0;border:0}
#intro .instructions span:last-child{border:0}
#intro .instructions b{width:58px;font-size:10px;letter-spacing:.18em}
#intro .intro-actions{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:250px;max-width:calc(100vw - 48px);text-align:center}
#intro #start{width:100%;padding:14px 14px;background:rgba(255,255,255,.94);border:1px solid white;color:#222034;font-size:11px;font-weight:700;letter-spacing:.15em;white-space:nowrap;text-shadow:none;box-shadow:0 7px 26px rgba(0,0,0,.14);cursor:pointer;transition:background .18s,transform .18s}
#intro #start:hover:not(:disabled){background:#fff;transform:translateY(-2px)}
#intro #start:disabled{opacity:.67;cursor:wait}
#intro #keyboard-start{margin:15px auto 0;padding:5px 9px;color:white;letter-spacing:.14em;text-decoration:underline;text-decoration-color:rgba(255,255,255,.65);text-underline-offset:5px;cursor:pointer}
#intro #keyboard-start:disabled{opacity:.55;cursor:wait}
#intro #error{position:absolute;left:50%;bottom:100%;width:min(360px,90vw);transform:translateX(-50%);margin:0 0 12px;color:white;font-size:12px;line-height:1.5}
@media(max-width:700px){#intro{padding:22px 20px 24px}#intro .intro-top{align-items:center}#intro .intro-mark{font-size:9px;letter-spacing:.15em}#intro .intro-mark i{margin:0 .25em}#intro .scene-choice{font-size:9px}#intro .scene-choice select{display:block;margin:5px 0 0 auto;max-width:130px;font-size:10px}#intro .intro-hero{margin-top:6vh}#intro .intro-hero small{font-size:9px;letter-spacing:.25em}#intro h1{font-size:clamp(35px,10.4vw,77px);letter-spacing:.12em;text-indent:.12em;white-space:normal}#intro .intro-hero p{font-size:10px;letter-spacing:.12em}#intro .intro-footer{display:block;min-height:230px}#intro .instructions{width:100%;max-width:330px;margin:0 auto 105px;font-size:9px}#intro .intro-actions{bottom:0}}
@media(max-height:550px){#intro .intro-hero{margin:8px auto}#intro h1{font-size:clamp(40px,7vw,78px)}#intro .intro-footer{min-height:100px}#intro .instructions{gap:3px}#intro #start{padding:10px 14px}#intro #keyboard-start{margin-top:7px}}

/* Two concise camera instructions, shared by both circuits. */
#intro .instructions{font-size:12px;line-height:1.55;gap:16px;width:min(34vw,390px)}
#intro .instructions>span{display:grid;grid-template-columns:82px 1fr;gap:10px;align-items:start}
#intro .instructions b{width:auto;padding-top:2px;font-size:10px;white-space:nowrap}
#intro .instructions>span>span{display:block;color:#ffffffe6}
@media(max-width:700px){#intro .instructions{width:100%;max-width:350px;font-size:11px;gap:14px;margin-bottom:110px}}
@media(max-height:550px){#intro .instructions{font-size:11px;gap:8px}}

#intro .intro-top{justify-content:space-between}#intro .music-credit{color:#fff;font-size:10px;line-height:1.5;text-decoration:none;opacity:.72;text-align:left;max-width:45%}#intro .music-credit:hover{opacity:1;text-decoration:underline}

/* Keep boost visible through tracking jitter without blurring the central view. */
#push-flash{z-index:2}
#push-flash.active{box-shadow:inset 0 0 45px rgba(255,240,210,.24)}
#push-flash i{filter:none;height:4px;box-shadow:0 0 10px 3px rgba(255,226,187,.42)}
@media(prefers-reduced-motion:reduce){#push-flash.active i{opacity:.22;transform:rotate(var(--angle));animation:none}}

/* A small, compositor-only drift for the homepage title. */
#intro .intro-hero h1{animation:title-float 6s ease-in-out infinite;will-change:transform}
@keyframes title-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){#intro .intro-hero h1{animation:none;will-change:auto}}