*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#030d15;color:#f5fcff}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe275;outline-offset:3px}[hidden]{display:none!important}.shell{position:relative;max-width:500px;height:100vh;height:100dvh;margin:auto;display:flex;flex-direction:column;background:#071b26;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}header{display:flex;align-items:center;gap:12px;padding:10px 14px;flex-shrink:0}header b{font-size:17px;letter-spacing:2px}header small{display:block;font-size:11px;color:#9ab8c4}.exit,#pause{display:grid;place-items:center;width:36px;height:36px;border:1px solid #335965;border-radius:11px;color:white;background:#102c38;text-decoration:none;font-size:24px}#pause{margin-left:auto;font-size:15px}.dashboard{display:flex;justify-content:space-around;text-align:center;padding:6px;background:#102b37;border-block:1px solid #254550;flex-shrink:0}.dashboard small{display:block;color:#91b1bd;font-size:9px;letter-spacing:1.5px}.dashboard strong{font-size:22px}.prompt{text-align:center;padding:12px 8px;background:linear-gradient(120deg,#123744,#0a242f);z-index:2;flex-shrink:0}.prompt small{font-size:10px;letter-spacing:2px;color:#8debcf}.prompt h1{font-size:clamp(22px,6vw,30px);margin:2px 0;color:#ffe380;line-height:1.1}.track{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;background:#1c232d}canvas{width:100%;height:100%;position:absolute;inset:0}.lane-glow{position:absolute;inset:0 50% 0 5%;background:linear-gradient(transparent,#64ffbd16);transition:transform .14s;pointer-events:none}.lane-glow.right{transform:translateX(100%)}#gates{position:absolute;top:0;left:0;right:0;will-change:transform}.gate{position:absolute;left:6%;width:38%;min-height:60px;border:2px solid #82d9e1;border-radius:14px;padding:10px 5px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(14px,3.8vw,18px);font-weight:800;line-height:1.15;background:linear-gradient(#173c4b,#09212f);box-shadow:0 5px 0 #030d16,0 0 20px #68dfdd30;overflow-wrap:break-word}.gate:nth-child(2){left:56%}.gate.correct{background:#155440;border-color:#9affb6}.gate.wrong{background:#642632;border-color:#ff8a8a}#car{position:absolute;width:clamp(44px,14vw,62px);height:24%;max-height:140px;object-fit:fill;left:25%;bottom:12px;transform:translateX(-50%);transition:left .14s ease-out;filter:drop-shadow(0 8px 8px #0008);pointer-events:none}.catch-line{position:absolute;left:5%;right:5%;bottom:calc(12px + min(24%,140px) / 2);border-top:2px dashed #ffdf7a55}#feedback{position:absolute;top:25%;left:8%;right:8%;text-align:center;font-size:clamp(18px,5vw,25px);font-weight:900;pointer-events:none;text-shadow:0 3px 6px #000;z-index:4;color:#aaffcd}#feedback.bad{color:#ffb4b4}.track.hit{animation:shake .28s}footer{display:flex;align-items:center;gap:8px;padding:8px 12px;flex-shrink:0;background:#0c2633}footer button{flex:1;min-height:48px;background:#163f4e;border:1px solid #477384;border-radius:14px;color:white;font-weight:800;font-size:16px}footer button.active{background:#ffe080;border-color:#ffe080;color:#082431}footer span{font-size:10px;color:#a3bac5;text-align:center}.overlay{position:absolute;inset:0;z-index:10;background:#061722df;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:20px}.panel{width:100%;max-height:100%;padding:26px 22px;text-align:center;border:1px solid #40747b;border-radius:28px;background:radial-gradient(ellipse at top,#204e58,#0b2634 70%);box-shadow:0 20px 60px #0008}.tag{font-size:10px;letter-spacing:2px;color:#90ead0;font-weight:800}.panel h2{font-size:clamp(35px,12vw,64px);line-height:1;margin:16px 0;letter-spacing:-2px}.panel h2 em{font-style:normal;color:#ffe080}.panel p{font-size:16px;line-height:1.5;color:#d1e4e8;margin:14px 0 22px}.primary{width:100%;min-height:52px;border:0;border-radius:15px;background:#ffe080;color:#082431;font-size:18px;font-weight:900;box-shadow:0 4px 0 #a58131}.panel>a{display:block;color:#afcbd4;margin-top:18px;font-size:13px;text-decoration:none}#review{margin:15px 0;text-align:left;font-size:14px}#review div{padding:8px 10px;border-radius:9px;background:#ffffff09;margin:5px 0}#review strong{color:#ffe080}#review span{display:block;color:#a1e5ca;font-size:13px}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@media(max-height:640px){header{padding:6px 12px}.prompt{padding:6px}.dashboard strong{font-size:18px}footer button{min-height:42px}.panel{padding:18px}.panel h2{font-size:40px;margin:10px 0}.panel p{font-size:14px;margin:12px 0}#review div{padding:5px 8px}}@media(prefers-reduced-motion:reduce){.track.hit{animation:none}}

/* Grand Prix cockpit: carbon, racing red, telemetry and compact aero panels. */
body{background:#08090c}.shell{background:#111217}header{background:repeating-linear-gradient(135deg,#181a20 0 3px,#14161b 3px 6px);border-top:3px solid #f0313e;border-bottom:1px solid #33343c}header b{font-style:italic;letter-spacing:2px;font-weight:950}header small{color:#ed6971;font-size:9px;letter-spacing:1.5px}.exit,#pause{border-radius:5px;border-color:#4e505b;background:#23252c}.dashboard{background:#14161c;border-color:#353740;gap:2px;padding:5px 10px}.dashboard>div{flex:1;border-right:1px solid #3b3d46}.dashboard>div:last-child{border:0}.dashboard small{color:#b1b3bf;letter-spacing:2px}.dashboard strong{font-style:italic;font-variant-numeric:tabular-nums;color:#fff;font-weight:950}.dashboard>div:last-child strong{color:#ff6470}.prompt{padding:9px 8px 11px;background:linear-gradient(105deg,#c71625,#ed2837 60%,#9d1120);box-shadow:0 5px 18px #0008;clip-path:polygon(0 0,100% 0,100% 86%,94% 100%,6% 100%,0 86%)}.prompt small{color:#ffcad0;font-size:9px;font-weight:800}.prompt h1{color:white;font-style:italic;font-weight:950;letter-spacing:-.7px}.track{background:#17191f}.lane-glow{background:linear-gradient(transparent,#ff263913);transition:transform .085s}.gate{border-radius:4px;border:1px solid #f1f1f5;border-top:4px solid #f33143;background:linear-gradient(135deg,#282b35,#101219);color:white;box-shadow:0 5px 0 #0008;font-weight:900;text-transform:uppercase;font-size:clamp(13px,3.65vw,17px);min-height:58px;clip-path:polygon(0 0,90% 0,100% 20%,100% 100%,10% 100%,0 80%)}.gate.correct{border-top-color:#7dffc1}.gate.wrong{border-top-color:#ff6470}#car{transition:left .085s ease-out;filter:drop-shadow(0 7px 5px #000a)}.catch-line{border-color:#fff3}footer{background:#15171d;border-top:2px solid #393c47;padding:7px 12px}footer button{border-radius:5px;background:linear-gradient(#30333f,#20222b);border-color:#535561;font-style:italic;min-height:44px}footer button.active{background:#e32638;border-color:#ff6975;color:#fff;box-shadow:0 0 16px #ee263944}footer span{font-weight:850;letter-spacing:1px;color:#f19199;font-size:10px;min-width:52px}.overlay{background:#080a10e8}.panel{border-radius:8px;border-color:#42444f;border-top:5px solid #f0313e;background:repeating-linear-gradient(135deg,#1c1e27 0 3px,#181a22 3px 6px);position:relative}.panel:before{content:"";display:block;width:80px;height:16px;margin:0 auto 18px;background:conic-gradient(#fff 25%,#17191f 0 50%,#fff 0 75%,#17191f 0) 0 0/16px 16px;transform:skew(-12deg)}.tag{color:#ff737e;font-style:italic;letter-spacing:1.6px}.panel h2{font-style:italic;font-weight:950;text-transform:uppercase;letter-spacing:-3px}.panel h2 em{color:#ff3d50}.panel p{color:#d2d3dc}.primary{border-radius:5px;background:#ef293c;color:white;font-style:italic;text-transform:uppercase;box-shadow:0 4px 0 #8a1022}.panel>a{color:#bbbcc7}#review strong{color:#ff7e88}#feedback{font-style:italic;font-size:clamp(18px,5vw,24px)}@media(max-height:640px){.prompt{padding:5px 8px 8px}.panel:before{margin-bottom:10px;height:12px}}

#car{transition:left .22s cubic-bezier(.2,.75,.25,1);transform-origin:50% 60%;will-change:left,transform}
@media(prefers-reduced-motion:reduce){#car{transition:left .08s linear}}

#race-progress{display:inline-block;margin-left:10px;padding:2px 6px;border:1px solid #ffffff60;border-radius:3px;color:#fff;font-variant-numeric:tabular-nums}
#boost-cue{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(transparent,#090b13e6 30%,#090b13e6 70%,transparent);text-align:center;pointer-events:none;animation:boost-in .35s ease-out}
#boost-cue strong{font-size:clamp(32px,10vw,48px);font-style:italic;font-weight:950;color:#fff;letter-spacing:-2px;text-shadow:4px 4px 0 #e3253d}
#boost-cue span{color:#ff5d70;font-size:13px;letter-spacing:2px;font-weight:850;margin:12px 0}#boost-cue small{font-size:13px;color:#e1e4ed}
.boosted .lane-glow{background:linear-gradient(transparent,#ff26392c)}@keyframes boost-in{from{opacity:0;transform:scale(1.3)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){#boost-cue{animation:none}}

/* Sweep the car and counter-steer while short tyre streaks dissipate. */
#car{transition:none;z-index:3;transform-origin:50% 42%}
.tyre-trail{position:absolute;width:7px;height:45px;border-radius:50%;background:linear-gradient(transparent,#e9edf67a,#a3a7b13b);filter:blur(2px);transform-origin:50% 0;pointer-events:none;z-index:2;opacity:0}

.home-screen{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#070c14;overflow:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.home-screen:before{content:"";position:absolute;inset:-20px;background:url("assets/lane-rush-game-assets/home-lights-out.png") center/cover;filter:blur(18px);opacity:.45;pointer-events:none}
.home-art{position:relative;width:min(100%,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .5568));aspect-ratio:936/1681;max-height:100%;flex-shrink:0}
.home-art>img{display:block;width:100%;height:100%;object-fit:contain}
.home-actions{position:absolute;left:10%;right:10%;bottom:19%;display:flex;flex-direction:column;align-items:center;gap:8px}
.home-actions .primary{position:relative;overflow:hidden;min-height:clamp(34px,6dvh,54px);font-size:clamp(15px,4.5vw,22px);border:1px solid #ff7180;border-radius:9px;background:linear-gradient(160deg,#ff344c,#e3112a 55%,#a9061b);box-shadow:0 3px 0 #86091b,0 0 20px #ff193c66;text-shadow:0 2px 1px #930819;font-weight:950}
.home-actions .primary:before{content:"";position:absolute;inset:0 auto 0 0;width:23%;background:conic-gradient(#ffffff20 25%,transparent 0 50%,#ffffff20 0 75%,transparent 0) 0 0/20px 20px;transform:skew(-15deg);pointer-events:none}
.home-actions .primary span{margin-left:12px}.home-actions>a{color:#bcc5d6;font-size:clamp(11px,3.3vw,15px);text-decoration:none;padding:3px 8px;text-shadow:0 2px 3px #000}

/* Neon night race, matching the title artwork. */
.shell{background:#090d16;box-shadow:0 0 40px #f019301c;border-inline:1px solid #53607355}
header{background:linear-gradient(115deg,#151c29,#080d16 70%);border-top:2px solid #ff2548;border-bottom:1px solid #62718955;padding:10px 13px;box-shadow:0 0 18px #fa183126;z-index:3}
header b{font-size:19px;letter-spacing:1.8px;text-shadow:0 2px 0 #02050c,0 0 15px #ffffff30}header small{color:#ff526e;letter-spacing:1.6px}
.exit,#pause{border-radius:9px;background:linear-gradient(145deg,#253043,#0d1420);border:1px solid #596779;color:#e9f2ff;box-shadow:inset 0 1px 0 #ffffff18}
.dashboard{background:linear-gradient(#111926,#080d16);border-bottom:1px solid #5a6b8155;padding:8px 12px}.dashboard small{font-size:9px;letter-spacing:1.7px;color:#94a8c2}.dashboard strong{font-size:24px;line-height:1.2;text-shadow:0 0 14px #ffffff25}.dashboard>div{border-color:#66748a40}.dashboard>div:last-child strong{color:#ff385a;text-shadow:0 0 15px #f9244560}
.prompt{background:radial-gradient(ellipse at center,#ae1534,#471023 75%,#110e1c);clip-path:none;border-top:1px solid #ff476860;border-bottom:2px solid #ff3155;box-shadow:0 5px 22px #fb183847;padding:9px 10px 10px;position:relative}.prompt:before,.prompt:after{content:"";position:absolute;top:50%;width:12%;height:2px;background:linear-gradient(90deg,transparent,#ff647c);box-shadow:0 0 10px #ff345e}.prompt:before{left:0}.prompt:after{right:0;transform:rotate(180deg)}.prompt h1{color:#f3f7ff;text-shadow:0 2px 2px #350511,0 0 20px #ff8b9b44;font-size:clamp(23px,6vw,30px)}.prompt small{color:#ffc5cf;font-size:9px;letter-spacing:2px}#race-progress{background:#100e1d55;border-color:#ff698b80;border-radius:5px}
.track:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#ff123438,transparent 15%,transparent 85%,#ff123438),linear-gradient(#0a0e1640,transparent 25%,#03050c25)}
.track:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 5px 0 12px #ff204942,inset -5px 0 12px #ff204942}
#gates{z-index:2}.gate{border-radius:9px;clip-path:none;border:1px solid #a1b7cc;border-top:3px solid #ff3156;background:linear-gradient(145deg,#243244,#0a111d 80%);box-shadow:0 4px 0 #03060b,0 0 14px #ff20492b,inset 0 1px 0 #ffffff28;color:#f7fbff;text-shadow:0 2px 2px #0007}.gate.correct{background:linear-gradient(135deg,#205940,#0b2829);border-color:#88ffbd;box-shadow:0 0 22px #5bffa74a}.gate.wrong{background:linear-gradient(135deg,#77203a,#290c1c);border-color:#ff577a;box-shadow:0 0 22px #ff274b55}
.lane-glow{background:linear-gradient(transparent,#ff1c3815)}.catch-line{border-color:#fc476747;z-index:2}#car{filter:drop-shadow(0 7px 5px #000a) drop-shadow(0 0 12px #ff183533)}
footer{background:linear-gradient(#111b2b,#070d16);border-top:1px solid #677b9355;box-shadow:0 -5px 22px #0005;z-index:3;padding:9px 12px;gap:10px}footer button{border-radius:9px;background:linear-gradient(145deg,#263548,#111a29);border:1px solid #657890;font-size:15px;box-shadow:inset 0 1px 0 #ffffff18,0 3px 0 #030810}footer button.active{background:linear-gradient(135deg,#ff3657,#cb092b 75%);border-color:#ff6b87;box-shadow:0 0 18px #ff274a4d,inset 0 1px 0 #ffffff35,0 3px 0 #79051c}footer span{color:#ff718b;font-size:9px;text-shadow:0 0 10px #f8314f}
@media(max-height:640px){header{padding:6px 12px}.dashboard{padding:5px 10px}.dashboard strong{font-size:21px}.prompt{padding:6px 8px 8px}footer{padding:7px 12px}}

/* Transform-only impact and tyre effects keep animation off layout work. */
.shell.wrong-impact{animation:race-impact .9s ease-out}
.shell.wrong-impact:after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(ellipse,transparent 25%,#ff173799 75%,#ff1737e6 100%);border:5px solid #ff345a;box-shadow:inset 0 0 45px 12px #ff173799;animation:wrong-answer-flash .9s linear forwards}
.tyre-trail{animation:tyre-fade .6s ease-out forwards;will-change:transform,opacity}
.overlay{-webkit-backdrop-filter:blur(9px)}
@keyframes race-impact{0%,100%{transform:translate3d(0,0,0)}15%{transform:translate3d(-7px,2px,0) rotate(-.5deg)}30%{transform:translate3d(7px,-2px,0) rotate(.5deg)}45%{transform:translate3d(-5px,1px,0)}60%{transform:translate3d(4px,-1px,0)}80%{transform:translate3d(-2px,0,0)}}
@keyframes impact-flash{0%,25%{opacity:1}100%{opacity:0}}
@keyframes tyre-fade{0%{opacity:0;transform:translate3d(0,0,0) scaleY(.1)}25%{opacity:.65;transform:translate3d(calc(var(--trail-distance) * .35),15px,0) rotate(var(--trail-angle)) scaleY(1)}60%{opacity:.35;transform:translate3d(calc(var(--trail-distance) * .75),55px,0) rotate(var(--trail-angle)) scaleY(1.4)}100%{opacity:0;transform:translate3d(var(--trail-distance),100px,0) scaleY(1.8)}}
@media(prefers-reduced-motion:reduce){.shell.wrong-impact{animation:none}.tyre-trail{display:none}}

/* Finish-line report shares the title page's wet-road and neon lighting. */
.race-report{background:linear-gradient(#040912d9,#070c15b8),url("assets/lane-rush-game-assets/home-lights-out.png") center 72%/cover;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:18px}
.race-report .panel{background:linear-gradient(145deg,#101927ed,#060d17f0);border:1px solid #71839a85;border-radius:22px;box-shadow:0 24px 70px #000b,inset 0 1px 0 #d5e5ff28,0 0 30px #f4213922;padding:25px 20px;overflow:hidden;position:relative}
.race-report .panel:before{height:18px;width:86px;margin-bottom:18px;filter:drop-shadow(0 0 8px #c4e0ff38)}
.race-report .panel:after{content:"";position:absolute;top:0;left:10%;right:10%;height:2px;background:#ff3254;box-shadow:0 0 22px 5px #ff24465c;pointer-events:none}
.race-report .tag{color:#ff637e;letter-spacing:2px;font-size:10px;display:inline-block;padding:6px 13px;border-radius:20px;border:1px solid #f7436444;background:#d5223e15}
.race-report #title{font-size:clamp(34px,10vw,52px);margin:18px 0 16px;letter-spacing:-1.5px;color:#f0f6ff;text-shadow:0 3px 0 #4f6376,0 0 24px #c4dbf72c;line-height:1.1}
.race-report #description{display:flex;justify-content:center;gap:0;margin:0 0 18px;padding:12px 0;border-block:1px solid #8eabc326;background:linear-gradient(90deg,transparent,#45617a15,transparent)}
.race-report #description>span{flex:1}.race-report #description>span+span{border-left:1px solid #8eabc333}.race-report #description strong{display:block;color:#f8fcff;font-size:27px;font-style:italic;font-weight:950;line-height:1.1}.race-report #description small{display:block;color:#99aec6;letter-spacing:1px;font-size:9px;margin-top:5px;font-weight:700}
.race-report #review{margin:0 0 18px}.race-report #review:before{content:"MISSED MATCHES";display:block;color:#8fa7c1;font-size:9px;letter-spacing:1.8px;margin:0 0 9px;font-weight:800}
.race-report #review div{position:relative;margin:7px 0;padding:10px 13px 10px 17px;border-radius:9px;border:1px solid #6b839733;background:linear-gradient(110deg,#f1203f13,#1f314335);box-shadow:inset 3px 0 0 #f12a4a}
.race-report #review strong{font-size:14px;color:#f4d4dd;display:block}.race-report #review span{font-size:14px;color:#c3e2f3;margin-top:3px;line-height:1.2}.race-report #review span:before{content:"\2192  ";color:#ff5470}
.race-report .primary{position:relative;border-radius:10px;background:linear-gradient(150deg,#ff3d5b,#e31031 60%,#af0822);border:1px solid #ff7a91;box-shadow:0 4px 0 #78071b,0 0 25px #ff1e453c;font-size:18px;min-height:50px;text-shadow:0 2px 0 #930a24}.race-report .panel>a{margin-top:15px;color:#b2c3d9;font-size:13px;padding:3px}
@media(max-height:640px){.race-report{padding:12px}.race-report .panel{padding:17px}.race-report .panel:before{margin-bottom:10px;height:12px}.race-report #title{margin:11px 0;font-size:36px}.race-report #description{padding:8px 0;margin-bottom:12px}.race-report #review{margin-bottom:12px}.race-report #review div{padding:7px 12px}.race-report .panel>a{margin-top:10px}.race-report .primary{min-height:45px}}

.practice-note{margin:0 0 6px;color:#e6edf8;font-size:clamp(11px,3.2vw,14px);line-height:1.5;text-align:center;text-shadow:0 2px 5px #000;font-weight:600}

.flow-panel h2{font-size:clamp(32px,9vw,45px);line-height:1.05}.flow-panel ol{list-style:none;counter-reset:flow;text-align:left;padding:0;margin:20px 0}.flow-panel li{counter-increment:flow;position:relative;padding:10px 0 10px 42px;border-bottom:1px solid #ffffff15}.flow-panel li:before{content:counter(flow);position:absolute;left:0;top:12px;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#ed2340;color:white;font-weight:900}.flow-panel li strong{display:block;font-size:16px;color:#fff}.flow-panel li span{display:block;font-size:14px;line-height:1.4;color:#bbccdf;margin-top:4px}.flow-panel p{font-size:13px;margin:12px 0 18px}
#powerup{position:absolute;top:15%;left:7%;right:7%;z-index:7;pointer-events:none;opacity:0;text-align:center;font-size:clamp(16px,4.6vw,22px);font-style:italic;font-weight:950;color:#eefff5;text-shadow:0 0 15px #64ffbd,0 3px 3px #000;padding:12px 4px;background:linear-gradient(90deg,transparent,#093f36d9,transparent);border-block:1px solid #8affa366}
#powerup.show{animation:powerup-burst .95s ease-out forwards}.count-beat strong{font-size:90px!important;animation:count-pulse .6s ease-out}
@keyframes powerup-burst{0%{opacity:0;transform:translate3d(0,25px,0) scale(.65)}20%{opacity:1;transform:translate3d(0,0,0) scale(1.1)}40%,65%{opacity:1;transform:translate3d(0,0,0) scale(1)}100%{opacity:0;transform:translate3d(0,-35px,0) scale(1.08)}}
@keyframes count-pulse{from{opacity:.3;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}
@media(max-height:640px){.flow-panel{padding:16px}.flow-panel h2{margin:10px 0;font-size:32px}.flow-panel ol{margin:10px 0}.flow-panel li{padding-top:7px;padding-bottom:7px}.flow-panel li span{font-size:13px}.flow-panel:before{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.count-beat strong{animation:none}#powerup.show{animation:impact-flash .95s ease-out forwards}}

/* Three equal lanes. */
.lane-glow{inset:0 auto 0 0;width:33.333333%;transition:transform .14s}
.gate{left:3%;width:27.333333%;font-size:clamp(12px,3.2vw,16px);min-height:66px;padding:8px 4px}
.gate:nth-child(2){left:36.333333%}.gate:nth-child(3){left:69.666667%}
#car{left:50%;width:clamp(38px,12vw,56px)}
footer button{font-size:14px;padding:8px 4px}.speed-readout{text-align:center;font-size:10px;color:#b8ccdf;background:#0c2633;padding:2px 0 5px;flex-shrink:0}
header b{font-size:15px;letter-spacing:1px}
.home-screen{background:radial-gradient(ellipse at top,#24374a,#070c14 65%)}.home-screen:before{background:none}
.home-art{width:100%;height:100%;aspect-ratio:auto;display:flex;flex-direction:column;justify-content:center;padding:32px}
.home-title{text-align:center}.home-title small{color:#c1d4e5;letter-spacing:3px;font-size:11px}.home-title h1{font-size:clamp(48px,15vw,76px);font-style:italic;font-weight:950;line-height:1.05;margin:20px 0}.home-title h1 span{display:block}.home-title h1 span:nth-child(1){color:#8effbc}.home-title h1 span:nth-child(2){color:#ffdb7a}.home-title h1 span:nth-child(3){color:#ff647e}.home-title p{color:#d5e6f5;line-height:1.5}
.home-actions{position:static;margin-top:20px}.home-actions .primary{width:100%}
@media(max-height:640px){.home-art{padding:18px}.home-title h1{font-size:48px;margin:10px 0}.home-actions{margin-top:8px}}

/* Fixed category colors remain visible throughout every round. */
.gate.lane-0,#left{--category:#8effbc}.gate.lane-1,#center{--category:#ffdb7a}.gate.lane-2,#right{--category:#ff647e}
.gate.lane-0,.gate.lane-1,.gate.lane-2{color:var(--category);border-color:var(--category);border-top-color:var(--category)}
footer button{color:var(--category);border-color:var(--category)}footer button.active{background:var(--category);border-color:var(--category);color:#071b26;box-shadow:0 0 16px color-mix(in srgb,var(--category) 30%,transparent)}
.lane-glow,.boosted .lane-glow{background:linear-gradient(transparent,color-mix(in srgb,var(--lane-color,#ffdb7a) 14%,transparent))}
.prompt h1{font-size:clamp(19px,5vw,27px)}
.race-report #review:before{content:"SCENARIOS TO REVIEW"}

/* Lab Safety Grand Prix ? reference-inspired cockpit. */
@font-face{font-family:Race;src:url('assets/test-tube-game-assets/fonts/BMW Helvetica 97 Black Condense Regular.otf') format('opentype');font-display:swap}
:root{--race-red:#ff2548}.shell{max-width:540px;background:#06111c;border-inline:1px solid #2c3e4c}header{padding:10px 14px;gap:8px;min-height:67px;border-top:0;border-bottom:2px solid var(--race-red);background:radial-gradient(ellipse at center,#122536,#030b13)}header>div{flex:1;text-align:center;position:relative}header b{font-family:Race,Impact,sans-serif;font-size:clamp(24px,7.5vw,40px);font-style:normal;letter-spacing:2px;white-space:nowrap}header b span:first-child{color:#c5ffdc}header b span:nth-child(2){color:#ffcf5b}header b span:nth-child(3){color:#ff3b57}header small{color:#ff3752;font-size:10px;letter-spacing:3px;margin-top:2px}.exit,#pause{width:43px;height:43px;border:2px solid var(--race-red);border-radius:12px;background:linear-gradient(145deg,#182a39,#030a12);flex-shrink:0;font-size:28px}#pause{font-size:19px;margin-left:0}.dashboard{border-block:0;border-bottom:2px solid var(--race-red);background:linear-gradient(135deg,#102232,#030b13);padding:9px 12px;border-radius:0 0 10px 10px}.dashboard small{font-family:Race,Impact,sans-serif;font-size:12px;letter-spacing:2px;color:#82a3bd}.dashboard strong{font-family:Race,Impact,sans-serif;font-style:normal;font-size:29px}.dashboard>div{border-color:#345165}.dashboard>div:last-child strong{color:#ff3b57}
.prompt{display:flex;align-items:center;gap:14px;padding:13px 15px;margin:5px 5px 0;border:2px solid var(--race-red);border-radius:20px;clip-path:none;background:linear-gradient(115deg,#111c28,#10101b 65%,#35111f);box-shadow:0 5px 14px #000b,inset 0 0 15px #ff254815;min-height:106px;z-index:4;text-align:left}.scenario-art{width:35%;height:78px;flex-shrink:0;border:1px solid #526775;border-radius:12px;background:radial-gradient(ellipse,#344e5d,#152431);display:grid;place-items:center;overflow:hidden;position:relative}.scenario-art img{height:108px;width:37px;object-fit:contain;transform:rotate(75deg);filter:drop-shadow(3px 4px 3px #0008)}.scenario-art.broken:after{content:"";position:absolute;width:65%;height:2px;background:#bfd4df;transform:rotate(-25deg);box-shadow:0 2px 4px #000}.scenario-art>span{font-size:48px;color:#dce6ec;text-shadow:0 4px 6px #0008}.scenario-copy{flex:1;min-width:0;border-left:1px solid #3b4652;padding-left:14px}.prompt small{display:inline-block;padding:4px 7px;border:1px solid var(--race-red);border-radius:8px;font-family:Race,Impact,sans-serif;color:#f0ebed;font-size:12px;letter-spacing:1.5px}.prompt h1{font-family:system-ui,sans-serif;font-style:normal;font-size:clamp(15px,4.4vw,22px);line-height:1.3;margin:8px 0;color:#faf4f7;font-weight:750;letter-spacing:0}.round-timer{height:3px;background:#ffffff15;border-radius:5px;overflow:hidden}.round-timer i{display:block;height:100%;background:#ff3653;transform-origin:left;box-shadow:0 0 6px #ff3653}
.track{margin:0 6px;background:#15202b}#gates{top:10px;z-index:3}.gate{min-height:74px;left:4%;width:25.333333%;padding:4px;border-radius:7px;border:1px solid var(--category);border-top:6px solid var(--category);background:linear-gradient(180deg,color-mix(in srgb,var(--category) 55%,#06110c),#08120f 65%);box-shadow:0 4px 0 #0009,0 0 12px color-mix(in srgb,var(--category) 35%,transparent),inset 0 1px 2px #ffffff80;display:flex;flex-direction:column;gap:2px}.gate:nth-child(2){left:37.333333%}.gate:nth-child(3){left:70.666667%}.gate span{font-size:30px;line-height:1}.gate strong{font-family:Race,Impact,sans-serif;letter-spacing:1px;font-size:24px;color:white;line-height:1}.gate:before,.gate:after{content:"";position:absolute;top:16px;bottom:9px;width:3px;background:var(--category);border-radius:3px;box-shadow:0 0 7px 2px var(--category)}.gate:before{left:1px}.gate:after{right:1px}.gate.correct{box-shadow:0 0 24px var(--category);filter:brightness(1.35)}.gate.wrong{outline:3px solid white;animation:shake .28s}.lane-chevrons{position:absolute;top:57%;left:0;right:0;display:flex;pointer-events:none;z-index:1}.lane-chevrons span{width:33.333%;text-align:center;font-size:42px;font-weight:950;transform:rotate(-90deg);opacity:.6;color:#9effad}.lane-chevrons span:nth-child(2){color:#ffce54}.lane-chevrons span:nth-child(3){color:#ff677b}.catch-line{display:none}#car{width:clamp(42px,15vw,76px);height:24%;max-height:130px;object-fit:contain;bottom:8px;z-index:3;filter:drop-shadow(0 4px 5px #000b)}#feedback{top:36%;font-size:19px}#powerup{top:25%}footer{padding:10px 14px;gap:12px;border-top:2px solid var(--race-red);background:linear-gradient(145deg,#102231,#030a12);position:relative}footer button{min-height:54px;font-family:Race,Impact,sans-serif;font-size:23px;border:2px solid var(--race-red);border-radius:13px;background:linear-gradient(140deg,#152c3e,#040d16);color:#f8fbff;font-style:normal}footer button:disabled{opacity:.4;cursor:default}footer button:active{background:#3e1121}.steer-hint{font-family:Race,Impact,sans-serif;text-align:center;line-height:1.05;color:#ff3554;font-size:14px;letter-spacing:1px;flex-shrink:0}.steer-hint small{display:block;font-family:system-ui,sans-serif;font-size:8px;color:#839bad;margin-top:5px;letter-spacing:0}.home-screen{background:radial-gradient(ellipse at center,#192b3e,#030b14 75%)}.home-title h1{font-family:Race,Impact,sans-serif;font-style:normal;letter-spacing:5px}.home-actions .primary,.primary{border-radius:12px}.panel{border-radius:20px;background:linear-gradient(140deg,#192b3a,#070c17);border:2px solid #ff2548}.flow-panel p{line-height:1.5}.overlay{background:#030b14e8}.race-report{background:radial-gradient(ellipse,#1d3042,#030b14)}
@media(max-height:700px){header{min-height:55px;padding:6px 10px}header b{font-size:28px}.exit,#pause{width:36px;height:36px}.dashboard{padding:5px}.dashboard strong{font-size:24px}.prompt{min-height:88px;padding:9px 12px}.scenario-art{height:63px}.prompt h1{font-size:16px;margin:6px 0}.gate{min-height:62px}.gate span{font-size:24px}.gate strong{font-size:21px}footer{padding:7px 12px}footer button{min-height:43px}.lane-chevrons span{font-size:30px}}
@media(max-width:360px){header b{font-size:25px;letter-spacing:1px}header small{font-size:8px;letter-spacing:2px}.prompt{gap:9px}.scenario-copy{padding-left:9px}.prompt small{font-size:10px}.prompt h1{font-size:14px}footer{gap:7px}.steer-hint{font-size:12px}}
@media(prefers-reduced-motion:reduce){.gate.wrong{animation:none}}

/* Incoming gates keep the original Lane Rush timing and collision behavior. */
#gates{top:0;will-change:transform}
.gate span{display:block;width:30px;height:30px}.gate span svg{display:block;width:100%;height:100%}
.scenario-art>svg{width:48px;height:48px;color:#dce6ec;filter:drop-shadow(0 3px 3px #0008)}
.lane-chevrons span{position:relative;transform:none;height:52px;font-size:0}
.lane-chevrons span:before,.lane-chevrons span:after{content:"";position:absolute;left:50%;width:26px;height:26px;border-top:8px solid currentColor;border-left:8px solid currentColor;transform:translateX(-50%) rotate(45deg)}
.lane-chevrons span:before{top:0}.lane-chevrons span:after{top:23px}
@media(max-height:700px){.gate span{width:24px;height:24px}.lane-chevrons span:before,.lane-chevrons span:after{width:20px;height:20px;border-width:6px}}

/* Compact cockpit leaves more height for incoming gates. */
header{min-height:46px;padding:5px 10px;gap:7px}
header b{font-size:clamp(23px,7vw,32px);letter-spacing:1.5px}
header small{font-size:8px;letter-spacing:2px;margin-top:0}
.exit,#pause{width:32px;height:32px;border-radius:9px;font-size:23px}#pause{font-size:15px}
.dashboard{padding:4px 10px}.dashboard small{font-size:9px;letter-spacing:1.5px}.dashboard strong{font-size:23px;line-height:1.05}
.prompt{min-height:70px;margin:4px 5px 0;padding:7px 10px;gap:10px;border-radius:14px}
.scenario-art{height:51px;width:29%;border-radius:9px}.scenario-art img{height:85px;width:29px}.scenario-art>svg{width:35px;height:35px}
.scenario-copy{padding-left:10px}.prompt small{padding:2px 6px;font-size:10px;letter-spacing:1px}.prompt h1{font-size:clamp(14px,3.8vw,18px);margin:4px 0;line-height:1.2}
footer{padding:6px 10px;gap:10px}footer button{min-height:40px;font-size:20px;border-radius:10px;padding:4px}
.steer-hint{font-size:11px}.steer-hint small{font-size:8px;margin-top:3px}
@media(max-width:360px){header b{font-size:23px;letter-spacing:1px}header small{font-size:7px}.prompt h1{font-size:13px}.steer-hint{font-size:10px}}

/* Supplied opening artwork. Controls sit below the illustrated title. */
.home-screen{background:#030b14}.home-screen:before{background:none}
.home-art{width:100%;height:100%;max-height:100%;padding:0;background:url('assets/good-bad-ugly-assets/opening-bg.webp') center center/cover no-repeat;display:block;position:relative}
.home-actions{position:absolute;left:10%;right:10%;bottom:max(4%,16px);margin:0;gap:8px;padding:12px;border-radius:16px;background:linear-gradient(#030b14a8,#030b14ed);border:1px solid #ff36534d}
.home-actions .practice-note{font-size:12px;margin:0;color:#edf4ff}.home-actions .primary{min-height:46px;font-size:19px}.home-actions>a{font-size:12px;color:#d1dfef}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-height:640px){.home-actions{bottom:12px;padding:8px;gap:5px}.home-actions .primary{min-height:39px}.home-actions .practice-note{font-size:11px}}

.flow-panel h2{font-size:clamp(28px,8vw,40px);letter-spacing:-1px}.flow-panel .lane-legend{display:flex;justify-content:center;gap:10px;font-size:11px;font-weight:800;margin:14px 0 6px}.lane-legend span:nth-child(1){color:#8effbc}.lane-legend span:nth-child(2){color:#ffdb7a}.lane-legend span:nth-child(3){color:#ff647e}

/* Give the scenario priority over cockpit decoration. */
header{min-height:34px;padding:3px 8px}header b{font-size:19px;letter-spacing:1px}header small{display:none}.exit,#pause{width:27px;height:27px;border-radius:7px;font-size:20px}#pause{font-size:13px}
.dashboard{padding:3px 8px;display:flex;align-items:center}.dashboard>div{display:flex;align-items:center;justify-content:center;gap:6px}.dashboard small{font-family:system-ui,sans-serif;font-size:8px;letter-spacing:.5px}.dashboard strong{font-family:system-ui,sans-serif;font-size:15px;font-weight:800;line-height:1.2}
.prompt{min-height:86px;padding:9px 12px;display:block;background:linear-gradient(120deg,#172533,#0a131e);border-radius:12px;border-color:#ff3553;margin:4px 5px 0}.prompt:before,.prompt:after{display:none}.scenario-copy{border:0;padding:0;width:100%}.prompt small{font-family:system-ui,sans-serif;font-size:9px;letter-spacing:.6px;border:0;padding:0;background:none;color:#9db4c8}.prompt h1{font-family:system-ui,sans-serif;font-size:clamp(21px,5.7vw,28px);font-weight:800;line-height:1.22;margin:5px 0 8px;letter-spacing:0;text-shadow:none;color:#fff}.round-timer{height:3px}
@media(max-width:360px){header b{font-size:18px}.prompt h1{font-size:20px}}

/* Answer reveal: readable, category-colored and briefly held between rounds. */
#feedback:empty{display:none}
#feedback{top:32%;left:9%;right:9%;z-index:8;padding:16px 12px;border:2px solid var(--answer-color,#8effbc);border-radius:16px;background:linear-gradient(145deg,#101f30f5,#030b14fa);box-shadow:0 12px 30px #000b,0 0 24px color-mix(in srgb,var(--answer-color,#8effbc) 35%,transparent);color:#fff;font-style:normal;text-shadow:none}
#feedback small{display:block;font-size:12px;letter-spacing:2px;font-weight:850;color:#f2f7ff}
#feedback strong{display:block;margin:5px 0;font-family:Race,Impact,sans-serif;font-size:clamp(44px,13vw,66px);line-height:1;color:var(--answer-color);letter-spacing:3px;text-shadow:0 0 18px color-mix(in srgb,var(--answer-color) 40%,transparent)}
#feedback>span{display:block;font-size:12px;font-weight:800;letter-spacing:1px;color:#d3e3f2}
#feedback.feedback-pop{animation:answer-reveal .35s ease-out}
@keyframes answer-reveal{from{opacity:0;transform:translateY(12px) scale(.88)}65%{opacity:1;transform:translateY(0) scale(1.04)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#feedback.feedback-pop{animation:none}}

/* Garage and reward screens. Cars are cosmetic; every ride keeps the same controls. */
.garage-screen{padding:12px;background:radial-gradient(ellipse at top,#233448,#030914 75%)}.garage-panel{padding:18px 14px;overflow-y:auto;max-height:100%;scrollbar-width:thin}.garage-panel:before{display:none}.garage-panel h2{font-family:Race,Impact,sans-serif;font-size:36px;letter-spacing:0;margin:9px 0}.garage-panel>p{font-size:13px;margin:8px 0 14px;color:#c6d8e9}.garage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:16px}.garage-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #455975;border-radius:12px;background:radial-gradient(ellipse at center,#25384d,#0a1423 80%);padding:9px 5px;color:#edf5ff;min-width:0;transition:border-color .15s,box-shadow .15s}.garage-card img{height:115px;width:100%;object-fit:contain;filter:drop-shadow(0 5px 4px #0009)}.garage-card strong{font-size:12px;margin-top:8px;line-height:1.2}.garage-card small{font-size:7px;letter-spacing:.4px;margin-top:5px;color:#adc4dc;line-height:1.5}.garage-card.selected{border:2px solid #8effbc;box-shadow:0 0 18px #8effbc38;background:radial-gradient(ellipse,#20533d,#081724)}.garage-card.selected small{color:#8effbc}.garage-card:disabled{cursor:default;background:#0b1421;border-style:dashed}.garage-card:disabled img{opacity:.22;filter:grayscale(1)}.garage-card:disabled strong{color:#8899ad}.garage-link{display:block;border:0;background:none;color:#d1dfef;letter-spacing:1px;font-size:11px;font-weight:800;margin:12px auto 0;padding:6px 12px}.home-actions .garage-link{margin:0}.garage-panel .primary{min-height:46px;font-size:17px}
.unlock-screen{background:radial-gradient(ellipse,#224232,#081523 60%,#030912);padding:16px}.unlock-panel{position:relative;border-color:#ffdc7a;background:radial-gradient(ellipse at center,#273627,#0c1824 75%);box-shadow:0 0 45px #ffd96d30;overflow:auto;padding:22px 18px;z-index:1}.unlock-panel:before{display:none}.unlock-panel .tag{color:#ffdc7a;letter-spacing:3px}.victory-stars{color:#ffdd7f;font-size:27px;letter-spacing:8px;margin-top:10px;text-shadow:0 0 12px #ffd55a77}.unlock-panel h2{font-family:Race,Impact,sans-serif;font-size:clamp(30px,10vw,48px);margin:10px 0;letter-spacing:1px;color:#fff}.car-podium{position:relative;padding:8px 0 16px;background:radial-gradient(ellipse at 50% 80%,#8effbc35,transparent 65%);border-bottom:1px solid #ffdc7a55}.car-podium:after{content:"";display:block;position:absolute;bottom:29px;left:18%;right:18%;height:25px;border:1px solid #8effbc88;border-radius:50%;background:#8effbc12;box-shadow:0 0 20px #8effbc22;z-index:-1}.car-podium img{height:clamp(140px,30dvh,260px);max-width:80%;object-fit:contain;filter:drop-shadow(0 8px 6px #000a);animation:car-unlock .75s ease-out}.car-podium span{display:block;font-size:9px;font-weight:850;letter-spacing:2px;color:#8effbc;margin-top:10px}.unlock-panel p{font-size:14px;line-height:1.5;margin:14px 0 18px}.unlock-panel .primary{background:linear-gradient(140deg,#ffe48e,#e7ad38);color:#17202b;border:1px solid #fff0ba;box-shadow:0 4px 0 #8a5c19}.unlock-screen #confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.unlock-screen #confetti i{position:absolute;top:-20px;left:var(--x);height:12px;width:6px;background:var(--color);animation:confetti-fall 2.5s var(--delay) ease-in forwards}
@keyframes car-unlock{from{opacity:0;transform:translateY(30px) scale(.8)}to{opacity:1;transform:none}}@keyframes confetti-fall{to{transform:translateY(100dvh) rotate(600deg);opacity:0}}
@media(max-height:700px){.garage-panel{padding:12px}.garage-panel h2{font-size:28px}.garage-card img{height:85px}.garage-grid{gap:7px;margin-bottom:12px}.unlock-panel{padding:16px}.unlock-panel h2{font-size:32px}.car-podium img{height:160px}.unlock-panel p{font-size:12px}.victory-stars{font-size:22px}}
@media(prefers-reduced-motion:reduce){.car-podium img,.unlock-screen #confetti i{animation:none}.garage-card{transition:none}}

/* Quiet asphalt with one prominent caution-board prompt. */
.prompt{margin:5px 5px 0;min-height:96px;border:2px solid #e6bc36;border-radius:10px;background:#f2cd4a;color:#141414;padding:14px 12px 13px;position:relative;box-shadow:0 4px 10px #0006;overflow:hidden}
.prompt:before,.prompt:after{display:block;content:"";position:absolute;left:0;right:0;width:100%;height:6px;background:repeating-linear-gradient(135deg,#171717 0 9px,#f2cd4a 9px 18px);box-shadow:none;transform:none}
.prompt:before{top:0}.prompt:after{top:auto;bottom:0}
.prompt small{color:#423610;background:none;font-size:9px;border:0}.prompt h1{color:#151515;font-size:clamp(21px,5.7vw,28px);line-height:1.22;text-shadow:none;margin:5px 0 8px}.round-timer{background:#19191924}.round-timer i{background:#222;box-shadow:none}
.lane-glow,.boosted .lane-glow{display:none}.track{background:#222a33;margin:0 5px}footer{border-top:1px solid #52606d;padding:6px 7px;gap:6px;background:#0b1722}footer .exit,footer #pause{width:25px;height:32px;min-height:32px;flex:0 0 25px;border:1px solid #596a79;border-radius:7px;background:#142535;color:#dfe8ef;font-family:system-ui,sans-serif;font-size:19px}footer #pause{font-size:12px}footer button{border-color:#596a79;font-size:18px}footer .steer-hint{font-size:9px;color:#aebfce;letter-spacing:.4px}

/* Simple, legible steering controls. */
footer{gap:8px;padding:8px;background:#0b1722}
footer #left,footer #right{min-height:48px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;font-weight:800;font-style:normal;letter-spacing:.3px;border:2px solid #9aabba;color:#fff;background:#182b3b;border-radius:10px;text-shadow:none}
footer #left:disabled,footer #right:disabled{opacity:1;color:#8a9aa8;border-color:#465968;background:#101e2a}
footer .exit,footer #pause{width:36px;min-height:44px;height:44px;flex:0 0 36px;font-size:24px;border-color:#718594}footer #pause{font-size:16px}
@media(max-width:360px){footer{gap:6px;padding:7px}footer #left,footer #right{font-size:15px}footer .exit,footer #pause{width:32px;flex-basis:32px}}

/* Neutral roadside medians and balanced question metadata. */
.track:before{background:none}.track:after{box-shadow:none}
.prompt-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
#race-level,#race-progress{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:10px;font-weight:800;line-height:1.2;letter-spacing:.6px;padding:4px 7px;border-radius:5px;background:#211e13;color:#fff1b0;border:0}

/* Victory spotlight: rotating rays, floating reward and sparkling stars. */
.unlock-screen{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#243c33,#071522 65%,#020811)}
.unlock-screen:before{content:"";position:absolute;left:50%;top:45%;width:max(150dvh,150vw);height:max(150dvh,150vw);background:repeating-conic-gradient(from 0deg,#ffde7b18 0deg 8deg,transparent 8deg 20deg);mask-image:radial-gradient(circle,#000 0%,#0009 32%,transparent 66%);-webkit-mask-image:radial-gradient(circle,#000 0%,#0009 32%,transparent 66%);pointer-events:none;animation:victory-rays 28s linear infinite;z-index:0}
.unlock-screen:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,#8effbc18,transparent 60%);pointer-events:none;animation:victory-ambient 3s ease-in-out infinite;z-index:0}
.unlock-panel{overflow-y:auto;background:linear-gradient(145deg,#152b2de8,#091521ed);border-color:#ffda72;animation:victory-panel .65s cubic-bezier(.18,.9,.3,1.1) both;box-shadow:0 0 45px #ffd96d30,0 18px 60px #0008}
.unlock-panel .tag{display:block;animation:victory-label .7s .2s ease-out both}
.victory-stars{animation:victory-stars 1.8s .4s ease-in-out infinite;text-shadow:0 0 10px #ffe990,0 0 22px #ffba4766}
.unlock-panel h2{animation:victory-label .6s .35s ease-out both;text-shadow:0 3px 0 #364a52,0 0 22px #ffffff20}
.car-podium{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,#8effbc38,transparent 70%)}
.car-podium:before{content:"";position:absolute;inset:-40% -30%;background:repeating-conic-gradient(from 10deg at 50% 58%,#8effbc12 0deg 10deg,transparent 10deg 30deg);z-index:-1;pointer-events:none;animation:podium-rays 18s linear infinite}
.car-podium:after{animation:podium-glow 2.4s ease-in-out infinite}
.car-podium img{animation:car-unlock .85s cubic-bezier(.2,.8,.2,1.1) both,car-float 3s 1s ease-in-out infinite}
.car-podium span{animation:victory-label .6s .7s ease-out both}
.unlock-panel .primary{position:relative;overflow:hidden;animation:reward-button 2.6s 1s ease-in-out infinite}
.unlock-panel .primary:after{content:"";position:absolute;inset:-40% auto -40% -50%;width:25%;background:linear-gradient(90deg,transparent,#fff8,transparent);transform:skewX(-20deg);animation:reward-shine 3.5s 1s ease-in-out infinite;pointer-events:none}
@keyframes victory-rays{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes podium-rays{to{transform:rotate(360deg)}}
@keyframes victory-ambient{50%{opacity:.45}}
@keyframes victory-panel{from{opacity:0;transform:translateY(28px) scale(.94)}to{opacity:1;transform:none}}
@keyframes victory-label{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes victory-stars{50%{transform:scale(1.12);filter:brightness(1.3)}}
@keyframes car-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes podium-glow{50%{box-shadow:0 0 28px #8effbc55;opacity:.65;transform:scale(.92)}}
@keyframes reward-button{50%{box-shadow:0 4px 0 #8a5c19,0 0 20px #ffcf6255}}
@keyframes reward-shine{0%,65%{left:-50%}90%,100%{left:140%}}
@media(prefers-reduced-motion:reduce){.unlock-screen:before,.unlock-screen:after,.unlock-panel,.unlock-panel .tag,.victory-stars,.unlock-panel h2,.car-podium:before,.car-podium:after,.car-podium img,.car-podium span,.unlock-panel .primary,.unlock-panel .primary:after{animation:none}}

/* Explicit CSS ray layer, visible above the podium background. */
.car-podium{position:relative;overflow:hidden;isolation:isolate}
.car-podium:before{display:none}
.reward-rays{position:absolute;left:50%;top:45%;width:520px;height:520px;border-radius:50%;background:repeating-conic-gradient(#ffdf7855 0deg 9deg,transparent 9deg 24deg);mask-image:radial-gradient(circle,#000 0%,#000 22%,#0009 42%,transparent 67%);-webkit-mask-image:radial-gradient(circle,#000 0%,#000 22%,#0009 42%,transparent 67%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);animation:reward-rays-spin 10s linear infinite;will-change:transform}
.car-podium img{position:relative;z-index:1;animation:car-unlock .7s ease-out both,reward-car-hover 2s .7s ease-in-out infinite}
.car-podium span{position:relative;z-index:1;background:#0d1c24b8;border-radius:20px;display:table;margin:10px auto 0;padding:5px 12px}
@keyframes reward-rays-spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes reward-car-hover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.reward-rays,.car-podium img{animation:none}}

/* Keep the requested celebration visible even in reduced-motion environments.
   Reduce its speed and remove bouncing rather than freezing the ray layer. */
@media(prefers-reduced-motion:reduce){
 .reward-rays{animation:reward-rays-spin 24s linear infinite}
 .unlock-screen:before{animation:victory-rays 60s linear infinite}
 .car-podium img{animation:none}
}

/* Royal garage reward: violet velvet, luminous gold and a trophy podium. */
.unlock-screen{background:radial-gradient(ellipse at 50% 40%,#6c31b8 0%,#351466 45%,#160d35 85%);padding:18px 14px}
.unlock-screen:before{background:repeating-conic-gradient(from 0deg,#c494ff35 0deg 8deg,transparent 8deg 20deg);opacity:.9}
.unlock-screen:after{background:radial-gradient(ellipse at 50% 40%,#ffd46d38,transparent 60%)}
.unlock-panel{border:2px solid #ffe49b;border-radius:26px;padding:20px 17px;background:linear-gradient(145deg,#53278fef,#2b1458f5 58%,#41216cf5);box-shadow:0 0 0 5px #ffe29b0d,0 0 45px #b575ff55,0 22px 50px #100326a8,inset 0 1px 0 #fff6}
.reward-emblem{display:grid;place-items:center;margin:0 auto 10px;width:48px;height:48px;border:1px solid #fff0bb;border-radius:14px;background:linear-gradient(145deg,#ffeeb5,#e7a936);color:#52257e;font-size:32px;box-shadow:0 4px 0 #8a531d,0 0 25px #ffdc7e55;transform:rotate(-5deg)}
.unlock-panel .tag{color:#ffebae;font-family:system-ui,sans-serif;font-style:normal;font-weight:900;font-size:10px;letter-spacing:2px}
.victory-stars{color:#ffe88b;font-size:26px;margin:8px 0 0;letter-spacing:10px;text-shadow:0 0 15px #ffd665}
.unlock-panel h2{font-family:Race,Impact,sans-serif;color:#fff8e7;font-size:clamp(34px,11vw,52px);margin:10px 0 8px;text-shadow:0 3px 0 #8e51c8,0 0 24px #ffd99f44;letter-spacing:1px}
.car-podium{border:1px solid #cf9fff65;border-radius:18px;background:radial-gradient(ellipse at 50% 40%,#a972dc,#7339ac 48%,#45216f 85%);padding:15px 0 17px;box-shadow:inset 0 1px 0 #ffffff35,0 8px 20px #16062766}
.reward-rays{background:repeating-conic-gradient(#ffe8a655 0deg 9deg,transparent 9deg 24deg)}
.car-podium:after{left:16%;right:16%;bottom:30px;height:29px;border:2px solid #ffe8aa;background:linear-gradient(#ffda7733,#dca84155);box-shadow:0 0 24px #ffda7799,0 6px 0 #6b3888;z-index:0}
.car-podium img{height:clamp(150px,27dvh,225px);filter:drop-shadow(0 12px 7px #230b4666) drop-shadow(0 0 7px #ffe4a833)}
.car-podium span{color:#fff2be;background:#3d1c68e8;border:1px solid #e9c57c88;letter-spacing:1.5px;font-size:9px;padding:5px 13px;margin-top:12px}
.unlock-panel p{color:#fff4e3;font-size:13px;line-height:1.55;margin:16px 3px 18px}
.unlock-panel .primary{min-height:52px;border:1px solid #fff2c4;border-radius:13px;background:linear-gradient(125deg,#fff0b4,#ffd268 55%,#efb83f);color:#452166;font-size:17px;font-weight:950;box-shadow:0 5px 0 #a96a22,0 0 24px #ffdb6855;text-shadow:none}
@media(max-height:700px){.unlock-panel{padding:15px 14px;border-radius:22px}.reward-emblem{width:39px;height:39px;font-size:27px;margin-bottom:8px}.victory-stars{font-size:21px}.unlock-panel h2{font-size:34px;margin:8px 0}.car-podium{padding-top:10px}.car-podium img{height:150px}.unlock-panel p{font-size:12px;margin:12px 0 14px}.unlock-panel .primary{min-height:46px;font-size:15px}}

/* One outer ray burst; the car sits in a soft showroom spotlight. */
.car-podium{background:radial-gradient(ellipse at 50% 72%,#b278dc55,transparent 62%),linear-gradient(145deg,#7642a5,#482477)}
.car-podium:before{display:block;inset:0;z-index:0;background:linear-gradient(105deg,transparent 18%,#fff0b521 47%,#fff7d538 50%,#fff0b521 53%,transparent 82%);clip-path:polygon(37% 0,63% 0,90% 100%,10% 100%);animation:showroom-light 4s ease-in-out infinite;pointer-events:none}
.victory-stars{display:flex;align-items:center;justify-content:center;gap:16px;height:46px;margin:9px 0 0;letter-spacing:0;animation:none}
.victory-stars span{position:relative;display:block;font-size:29px;color:#ffe49a;text-shadow:0 2px 0 #b2771b,0 0 12px #ffcf6388;animation:star-award .65s cubic-bezier(.2,.8,.3,1.4) both,star-sparkle 3s 1.2s ease-in-out infinite}
.victory-stars span:nth-child(1){animation-delay:.15s,1.4s;transform:rotate(-12deg)}
.victory-stars span:nth-child(2){font-size:40px;color:#fff2bf;animation-delay:.35s,1.8s}
.victory-stars span:nth-child(3){animation-delay:.55s,2.2s;transform:rotate(12deg)}
.victory-stars span:after{content:"";position:absolute;top:2px;right:-3px;width:7px;height:7px;background:#fff8df;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:star-glint 2.8s ease-in-out infinite}
.victory-stars span:nth-child(2):after{animation-delay:.8s}.victory-stars span:nth-child(3):after{animation-delay:1.6s}
@keyframes star-award{from{opacity:0;scale:.2;translate:0 12px}to{opacity:1;scale:1;translate:0 0}}
@keyframes star-sparkle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25);scale:1.08}}
@keyframes star-glint{0%,70%,100%{opacity:0;transform:scale(.3) rotate(0)}80%{opacity:1;transform:scale(1.4) rotate(90deg)}}
@keyframes showroom-light{50%{opacity:.5}}
@media(max-height:700px){.victory-stars{height:38px;gap:14px}.victory-stars span{font-size:25px}.victory-stars span:nth-child(2){font-size:34px}}
@media(prefers-reduced-motion:reduce){.car-podium:before,.victory-stars span,.victory-stars span:after{animation:none}}

/* Environment sits outside the medians. Override image variables for future levels. */
.race-scene{--environment-left:none;--environment-right:none;display:flex;flex:1;min-height:0;margin:0 5px;overflow:hidden}
.race-scene .track{flex:1;min-width:0;margin:0}
.roadside{flex:0 0 12%;background-repeat:repeat-y;background-size:100% auto;pointer-events:none}
.roadside-left{background-image:var(--environment-left);background-position:right var(--scenery-offset,0px)}
.roadside-right{background-image:var(--environment-right);background-position:left var(--scenery-offset,0px)}
.race-scene .gate{font-size:clamp(12px,4.5vw,22px)}
.race-scene #car{width:min(86px,22%)}

/* Small celebration during the correct-answer pause. */
.answer-confetti{position:absolute;left:50%;top:35%;width:0;height:0;z-index:5;pointer-events:none}
.answer-confetti i{position:absolute;width:9px;height:15px;background:var(--celebration-color);border-radius:2px;box-shadow:0 0 8px var(--celebration-color);animation:answer-confetti-burst .95s ease-out forwards}
.answer-confetti i:nth-child(3n){background:#fff1bb;width:9px;height:9px}
@keyframes answer-confetti-burst{0%{opacity:0;transform:translate(0,0) scale(.4)}10%,65%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.85)}}
@media(prefers-reduced-motion:reduce){.answer-confetti{display:none}}

/* Compact race instructions with the action kept inside the panel. */
.flow-panel{padding:20px 18px;overflow-y:auto}
.flow-panel h2{font-size:clamp(27px,7.5vw,34px);margin:12px 0;line-height:1.05}
.flow-panel ol{margin:12px 0}
.flow-panel li{padding:9px 0 9px 37px}
.flow-panel li:before{top:10px;width:26px;height:26px;font-size:13px}
.flow-panel li strong{font-size:14px}
.flow-panel li span{font-size:13px;line-height:1.4;margin-top:3px}
.flow-panel .lane-legend{margin:12px 0 5px;gap:8px;font-size:10px}
.flow-panel .keyboard-hint{font-size:11px;margin:5px 0 14px}
.flow-panel .primary{min-height:46px;font-size:16px}
@media(max-height:640px){.flow-panel{padding:14px 16px}.flow-panel:before{margin-bottom:8px}.flow-panel h2{margin:8px 0}.flow-panel li{padding-top:7px;padding-bottom:7px}}

/* Static showroom: overhead car grounded on a solid circular display plinth. */
.unlock-panel .car-podium{position:relative;padding:16px 12px 14px;border:1px solid #d5b3ff38;border-radius:20px;background:radial-gradient(ellipse at 50% 20%,#73579955,transparent 65%),linear-gradient(160deg,#251b3b,#100d20 85%);box-shadow:inset 0 1px 0 #ffffff12,0 8px 20px #16062766}
.unlock-panel .car-podium:before,.unlock-panel .car-podium:after{display:none}
.showroom-stage{position:relative;width:min(100%,230px);aspect-ratio:1;margin:0 auto 12px;display:grid;place-items:center;isolation:isolate}
.showroom-stage:before{content:"";position:absolute;inset:-20px -25px 8px;background:conic-gradient(from 155deg at 50% 0%,transparent 0deg,#fff3cc08 9deg,#fff3cc24 25deg,#fff3cc08 41deg,transparent 50deg);filter:blur(10px);z-index:0;pointer-events:none}
.showroom-platform{position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle at 42% 28%,#77658b,#40334f 58%,#281f34 85%);border:2px solid #d7ba7e;box-shadow:0 2px 0 #ffedc688,inset 0 0 0 5px #22192e,inset 0 0 0 6px #d6b57755,inset 0 12px 24px #fff4d412,0 8px 0 #352539,0 10px 0 #987743,0 18px 22px #0009,0 0 35px #dcbaff14;z-index:1}
.showroom-platform:after{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(ellipse,#fff5d521,transparent 70%);pointer-events:none}
.unlock-panel .car-podium img{position:relative;z-index:2;display:block;height:76%;width:auto;max-width:65%;object-fit:contain;animation:none;transform:none;filter:drop-shadow(6px 10px 5px #000b) drop-shadow(0 0 2px #fff3cc33)}
.unlock-panel .car-podium span{animation:none;display:table;margin:0 auto;padding:5px 12px;border:1px solid #d8b57366;background:#1a1428;color:#f5dfac;font-size:9px;letter-spacing:1.6px}
.unlock-panel #unlock-copy{margin:13px 0 15px;font-size:12px;color:#e4d6ef;line-height:1.4}
@media(max-height:700px){.showroom-stage{width:min(100%,190px)}.unlock-panel .car-podium{padding:10px 10px 12px}}

/* Polished award stars and a gold level-clear seal. */
.unlock-panel .victory-stars{gap:13px;height:48px;margin:12px 0 4px;align-items:center}
.unlock-panel .victory-stars span{width:29px;height:29px;font-size:0;transform:rotate(-10deg);animation:star-award .55s ease-out both;filter:drop-shadow(0 2px 0 #98601c) drop-shadow(0 0 7px #ffd66a55);text-shadow:none}
.unlock-panel .victory-stars span:before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%);background:linear-gradient(145deg,#fffbe0 5%,#ffe798 38%,#edb648 65%,#c78a25);box-shadow:inset 0 1px 0 #fff}
.unlock-panel .victory-stars span:nth-child(1){animation-delay:.1s}
.unlock-panel .victory-stars span:nth-child(2){width:42px;height:42px;transform:none;animation-delay:.2s;filter:drop-shadow(0 3px 0 #98601c) drop-shadow(0 0 10px #ffd66a66)}
.unlock-panel .victory-stars span:nth-child(3){transform:rotate(10deg);animation-delay:.3s}
.unlock-panel .victory-stars span:after{top:0;right:1px;width:6px;height:6px;animation:star-glint 3.5s 1s ease-in-out infinite}
.unlock-panel #unlock-copy{display:table;margin:16px auto 18px;padding:8px 18px;border:1px solid #e4bf6b80;border-radius:8px;background:linear-gradient(110deg,#ffdf8612,#ffdf8626,#ffdf8612);color:#ffe9ad;font-family:Race,Impact,sans-serif;font-size:19px;font-weight:400;letter-spacing:1px;line-height:1.2;text-transform:uppercase;box-shadow:inset 0 1px 0 #ffedba18,0 0 16px #ffd9710d}
@media(max-height:700px){.unlock-panel .victory-stars{margin:8px 0 3px;height:42px}.unlock-panel #unlock-copy{font-size:17px;margin:13px auto 15px;padding:7px 16px}}
@media(prefers-reduced-motion:reduce){.unlock-panel .victory-stars span,.unlock-panel .victory-stars span:after{animation:none}}

/* Quiet display surface keeps the car as the focus. */
.unlock-panel .car-podium{background:radial-gradient(ellipse at 50% 40%,#44305680,transparent 72%),linear-gradient(155deg,#21162f,#110d1e);border-color:#d8bdff26;box-shadow:inset 0 1px 0 #ffffff09}
.showroom-platform{inset:13px;border:1px solid #d6bddb45;background:radial-gradient(circle at 45% 30%,#796b8270,#4b3d5866 62%,#29203280);box-shadow:inset 0 1px 2px #ffffff16,0 10px 20px #0005,0 0 25px #c5a4ff0a}
.showroom-platform:after{inset:18%;background:radial-gradient(ellipse at 50% 65%,#0005,transparent 70%);filter:blur(7px)}
.showroom-stage:before{background:conic-gradient(from 155deg at 50% 0%,transparent 0deg,#fff3cc04 9deg,#fff3cc18 25deg,#fff3cc04 41deg,transparent 50deg);filter:blur(14px)}
.unlock-panel .car-podium img{filter:drop-shadow(3px 7px 4px #0009)}

/* Tight contact shadow grounds the driving car without an animated filter. */
.race-scene #car{filter:drop-shadow(0 3px 2px #000b)}

.track.car-sway-enabled .tyre-trail{display:block}

.car-paint{border:1px solid #455975;border-radius:10px;padding:8px 10px;margin:0 0 12px;text-align:left}.car-paint legend{padding:0 6px;font-size:11px;font-weight:800;color:#d6e8f8}.paint-options{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.paint-option{display:grid;place-items:center;width:32px;height:32px;padding:3px;border:1px solid transparent;border-radius:8px;background:#0a1423;color:#d8e6f3;flex:0 0 32px}.paint-option:before{content:"";width:22px;height:22px;border-radius:50%;background:var(--paint-color);box-shadow:inset 0 0 0 1px #ffffff55,0 2px 5px #0008}.paint-option[aria-pressed="true"]{border-color:#8effbc;background:#16382d}

.prompt-meta{gap:8px}.prompt-meta .exit,.prompt-meta #pause{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;min-height:25px;margin:0;border:1px solid #473d17;border-radius:5px;background:#25220f;color:#fff4b9;font-size:18px;text-decoration:none}.prompt-meta #pause{font-size:12px}.prompt-meta #race-progress{margin-left:auto}.prompt-meta #pause:disabled{opacity:.4}

.race-scene #car{bottom:48px}

.race-scene #car{transform-origin:50% 50%}

/* Clean question card with quiet metadata and a slim time indicator. */
.prompt{min-height:0;margin:6px 6px 0;padding:12px 14px 11px;border:1px solid #e5cc86;border-radius:12px;background:linear-gradient(135deg,#fff4d2,#f6e4ad);box-shadow:0 3px 12px #0003;clip-path:none}
.prompt:before,.prompt:after{display:none}
.prompt .scenario-copy{width:100%;padding:0;border:0;min-width:0}
.prompt-meta{gap:8px;margin-bottom:9px}
.prompt-meta #race-level,.prompt-meta #race-progress{background:#5947160e;color:#655424;border:0;padding:4px 7px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.4px}
.prompt-meta .exit,.prompt-meta #pause{width:28px;height:28px;min-height:28px;flex-basis:28px;border:1px solid #65542426;border-radius:7px;background:#fff9e780;color:#655424}
.prompt h1{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:clamp(18px,4.8vw,23px);font-weight:650;font-style:normal;letter-spacing:0;line-height:1.4;text-align:left;color:#252a30;margin:0 0 12px;text-shadow:none;overflow-wrap:break-word}
.prompt .round-timer{height:3px;border:0;border-radius:3px;background:#6554241c;overflow:hidden}
.prompt .round-timer i{background:#aa8430;box-shadow:none;border-radius:3px}
@media(max-height:640px){.prompt{padding:9px 12px}.prompt-meta{margin-bottom:6px}.prompt h1{font-size:18px;line-height:1.35;margin-bottom:9px}}

/* Caution board: restrained hazard edges around a clear reading area. */
.prompt{padding:15px 14px 14px;border:6px solid transparent;border-radius:10px;background:linear-gradient(#fff,#fff) padding-box,repeating-linear-gradient(135deg,#171717 0 8px,#f5d45b 8px 16px) border-box;box-shadow:0 3px 10px #0004}
.prompt:before,.prompt:after{display:none}
.prompt:before{top:0}.prompt:after{top:auto;bottom:0}
.prompt h1{color:#242414;font-weight:700;line-height:1.4;text-align:center;font-style:normal}
.prompt-meta #race-level,.prompt-meta #race-progress{background:#292719;color:#fff1b1;font-weight:700}
.prompt-meta .exit,.prompt-meta #pause{background:#292719;color:#fff1b1;border-color:#292719;border-radius:6px}
.prompt .round-timer{background:#29271920}.prompt .round-timer i{background:#39351e}
@media(max-height:640px){.prompt{padding:12px 12px 11px}}

/* Quiet lane signs: category color lives in the edge and icon, not a neon glow. */
.race-scene .gate{border:1px solid #60717e;border-top:3px solid var(--category);border-radius:8px;background:linear-gradient(180deg,#26343e,#16212a);box-shadow:0 3px 6px #0004;gap:5px;padding:8px 3px;clip-path:none}
.race-scene .gate:before,.race-scene .gate:after{display:none}
.race-scene .gate span{color:var(--category);font-size:24px;line-height:1}
.race-scene .gate strong{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:clamp(14px,4vw,19px);font-weight:750;letter-spacing:.4px;line-height:1.2;color:#f4f7f9;text-shadow:none}
.race-scene .gate.correct{border-color:var(--category);box-shadow:0 0 0 1px var(--category);filter:none}
.race-scene .gate.wrong{outline:1px solid #ff8791;animation:none}
#feedback{left:12%;right:12%;padding:12px 14px;border:1px solid #60717e;border-left:3px solid var(--answer-color);border-radius:10px;background:#101c27f5;box-shadow:0 5px 14px #0004;text-align:left}
#feedback small{font-size:10px;font-weight:600;letter-spacing:.6px;color:#b6c5d0}
#feedback strong{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:26px;font-weight:750;letter-spacing:.3px;line-height:1.2;margin:5px 0;text-shadow:none}
#feedback>span{font-size:11px;font-weight:500;letter-spacing:.2px;color:#c6d4de}
#feedback.feedback-pop{animation:sleek-answer-in .18s ease-out}
@keyframes sleek-answer-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#feedback.feedback-pop{animation:none}}

/* Balanced answer reveal: a strong category badge with restrained illumination. */
#feedback{left:10%;right:10%;padding:16px 14px 15px;text-align:center;border:1px solid var(--answer-color);border-left-width:1px;border-radius:14px;background:linear-gradient(145deg,#1c2c38f7,#0c1722fa);box-shadow:0 8px 22px #0006,inset 0 3px 0 var(--answer-color)}
#feedback small{font-size:10px;letter-spacing:1.1px;font-weight:700;color:#d6e1e9}
#feedback strong{display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(30px,8.5vw,40px);font-weight:800;letter-spacing:1px;margin:10px 0;line-height:1.1;color:var(--answer-color)}
#feedback strong:before{content:"!";display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border:1px solid currentColor;border-radius:50%;font-size:20px;font-weight:700;letter-spacing:0}
#feedback:not(.bad) strong:before{content:"?"}
#feedback>span{display:inline-block;padding:5px 10px;border-radius:6px;background:#ffffff09;color:#dce7ee;font-size:11px;font-weight:650;letter-spacing:.5px}

/* Clear results hierarchy and compact, category-colored corrections. */
.race-report{padding:16px;background:#06111bed}
.race-report .panel{padding:24px 20px;border:1px solid #4c6275;border-radius:20px;background:linear-gradient(145deg,#172735,#0b1621);box-shadow:0 16px 40px #0005;overflow-y:auto}
.race-report .panel:before,.race-report .panel:after{display:none}
.race-report .tag{padding:0;border:0;border-radius:0;background:none;color:#9db3c5;font-size:10px;letter-spacing:1.3px;font-style:normal}
.race-report #title{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:56px;font-weight:800;font-style:normal;letter-spacing:-2px;margin:14px 0 4px;color:#fff;text-shadow:none}
.race-report #title:after{content:"CORRECT ANSWERS";display:block;font-size:10px;letter-spacing:1.2px;font-weight:600;color:#9db3c5;margin-top:6px}
.race-report #description{display:block;border:0;background:none;padding:0;margin:14px 0 22px;font-size:13px;line-height:1.5;color:#cfdae3}
.race-report #review{margin:0 0 20px;text-align:left}
.race-report #review:before{content:"REVIEW THE CORRECT ANSWERS";font-size:9px;letter-spacing:1px;margin-bottom:10px;color:#9db3c5}
.race-report #review div{display:flex;align-items:center;gap:12px;padding:12px 0;margin:0;border:0;border-bottom:1px solid #ffffff12;border-radius:0;background:none;box-shadow:none}
.race-report #review div:before{display:none}
.race-report #review strong{flex:1;min-width:0;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;font-weight:550;line-height:1.45;color:#e7eef4}
.race-report #review .review-category{display:inline-block;flex:0 0 auto;margin:0;padding:5px 8px;font-size:11px;font-weight:700;border-radius:6px;color:#9bf0bf;background:#83e9ac16}
.race-report #review .review-category:before{content:none}
.race-report #review .category-bad{color:#ffda7a;background:#ffda7a16}
.race-report #review .category-ugly{color:#ff90a2;background:#ff718b16}
.race-report .primary{min-height:46px;border-radius:10px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;font-style:normal;letter-spacing:.3px;text-shadow:none;box-shadow:0 3px 0 #8a1830;background:linear-gradient(135deg,#f23958,#d51d40)}
.race-report .panel>a{font-size:12px;margin-top:16px;color:#a9bfce}
@media(max-height:640px){.race-report .panel{padding:18px 16px}.race-report #title{font-size:44px;margin-top:10px}.race-report #description{margin:12px 0 16px}.race-report #review div{padding:9px 0}}

/* On a missed answer, leave only the correct category visible until the next round. */
.race-scene .gate{transition:opacity .25s ease}
.race-scene .gate.answer-dimmed{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.race-scene .gate{transition:none}}

/* Correct matches get one quiet confirmation instead of a streak banner. */
#feedback.feedback-success{left:50%;right:auto;top:34%;transform:translateX(-50%);width:max-content;max-width:80%;padding:8px 16px;border:1px solid #8effbc55;border-radius:24px;background:#102a23ec;color:#a4f3c5;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;font-weight:650;letter-spacing:.2px;box-shadow:0 3px 9px #0003;animation:none}
.race-scene .gate.match-pulse{animation:match-confirm .45s ease-out}
@keyframes match-confirm{0%,100%{box-shadow:0 0 0 1px var(--category)}45%{box-shadow:0 0 0 3px var(--category),0 0 14px #ffffff18}}
@media(prefers-reduced-motion:reduce){.race-scene .gate.match-pulse{animation:none}}

/* Results arrive in a short sequence so the score leads the review. */
.race-report.report-enter .panel{animation:report-panel-in .4s cubic-bezier(.2,.75,.3,1) both}
.race-report.report-enter .tag{animation:report-text-in .35s .08s ease-out both}
.race-report.report-enter #title{animation:report-score-in .55s .12s cubic-bezier(.2,.8,.3,1.15) both}
.race-report.report-enter #description{animation:report-text-in .4s .25s ease-out both}
.race-report.report-enter #review:before{animation:report-text-in .35s .32s ease-out both}
.race-report.report-enter #review div{animation:report-text-in .4s ease-out both;animation-delay:.38s}
.race-report.report-enter #review div:nth-child(2){animation-delay:.46s}
.race-report.report-enter #review div:nth-child(3){animation-delay:.54s}
.race-report.report-enter .primary{animation:report-text-in .4s .62s ease-out both}
.race-report.report-enter .panel>a{animation:report-text-in .35s .7s ease-out both}
@keyframes report-panel-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes report-text-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes report-score-in{0%{opacity:0;transform:translateY(8px) scale(.85)}70%{opacity:1;transform:translateY(0) scale(1.05)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.race-report.report-enter .panel,.race-report.report-enter .tag,.race-report.report-enter #title,.race-report.report-enter #description,.race-report.report-enter #review:before,.race-report.report-enter #review div,.race-report.report-enter .primary,.race-report.report-enter .panel>a{animation-name:report-fade-in;animation-duration:.4s;animation-timing-function:ease-out}}

@keyframes report-fade-in{from{opacity:0}to{opacity:1}}

#feedback.feedback-success{display:flex;align-items:center;justify-content:center;gap:7px}
#feedback.feedback-success svg{width:18px;height:18px;flex:0 0 18px}
#feedback.feedback-success>span{display:inline;padding:0;background:none;border:0;font-size:14px;font-weight:650;color:inherit;letter-spacing:0}

/* Empty feedback must stay hidden even when a previous result class remains. */
#feedback.feedback-success:empty,#feedback:empty{display:none}

/* Question sits behind the car: below upward driving, above downward driving. */
body:not([data-direction="reverse"]) .prompt{margin:0 6px 6px}
body[data-direction="reverse"] .prompt{margin:6px 6px 0}

/* One continuous neon showroom. The wheel baseline is fixed at 56.5% of the scene, inside the platform rim. Car dimensions shrink to fit above this baseline. */
.garage-screen{padding:0;background:#070a0e;backdrop-filter:none;overflow:auto;align-items:flex-start}
.garage-panel{width:100%;height:100%;min-height:620px;max-height:none;margin:0;padding:0 4%;border:0;border-radius:0;box-shadow:none;overflow:visible;display:grid;grid-template-rows:15% 47% 16% 12% 7% 3%;background:linear-gradient(180deg,#0002,transparent 45%,#02060a44 75%,#0003),url('assets/good-bad-ugly-assets/garage-pg-bg.webp') center/100% 100% no-repeat}
.garage-panel:before,.garage-panel #garage-level,.garage-panel #garage-goal{display:none}
.garage-panel h2{align-self:center;margin:0;font-family:Race,Impact,sans-serif;font-size:clamp(30px,8.5vw,46px);line-height:.95;letter-spacing:0;color:#fff;text-shadow:0 3px 8px #000;position:relative;z-index:2}
.garage-panel h2 br{display:block}.garage-panel h2 em{display:inline-block;position:relative;font-size:1.24em;color:#ff1236;font-style:italic;margin:3px 0 0}
.garage-panel h2 em:before,.garage-panel h2 em:after{content:"";display:inline-block;width:27px;height:19px;vertical-align:middle;margin:0 12px;transform:skew(-16deg);background:repeating-conic-gradient(#d6e4edb3 0% 25%,transparent 0% 50%) 0/13px 13px;mask-image:linear-gradient(90deg,transparent,#000)}
.garage-panel h2 em:after{transform:skew(-16deg) scaleX(-1)}
.garage-showcase{--pedestal-contact:88.3%;position:relative;min-height:0;overflow:visible;isolation:isolate;background:none;border:0;box-shadow:none;margin:0 -4.35%;border-radius:0;perspective:1000px}
.garage-showcase:before,.garage-showcase:after,.garage-display-platform,.garage-light,.garage-floor{display:none}
.garage-car-rig{position:absolute;top:2%;bottom:calc(100% - var(--pedestal-contact));left:10%;right:10%;z-index:1;transform-style:preserve-3d;transform:rotateY(var(--garage-tilt,0deg));transition:transform .4s ease;animation:garage-showroom-idle 8s ease-in-out infinite}
.garage-car-rig #garage-preview{position:absolute;inset:0;top:7%;display:block;width:100%;height:100%;margin:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center bottom;transform:none;filter:drop-shadow(0 6px 3px #0009)}
.garage-car-shadow{position:absolute;left:15%;right:12%;bottom:0;height:12%;border-radius:50%;background:#000c;filter:blur(7px);opacity:.8}
.garage-preview-copy{position:absolute;z-index:2;bottom:0;left:6%;right:6%;height:14%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;background:linear-gradient(90deg,transparent,#030609b3 20%,#030609b3 80%,transparent)}
.garage-preview-copy span{font-size:7px;font-weight:750;color:#b7d9d0;letter-spacing:2px;line-height:1;margin:0}
.garage-preview-copy h3{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin:0;font-family:Race,Impact,sans-serif;font-size:clamp(23px,6.4vw,32px);line-height:1.1;color:#fff;text-shadow:0 2px 6px #000}
.garage-preview-copy h3:before,.garage-preview-copy h3:after{content:"";width:28px;height:3px;background:#fa1238;transform:skew(30deg);box-shadow:0 0 10px #ff173c99}
.garage-carousel{display:flex;align-items:center;gap:7px;min-height:0;min-width:0;padding:8px 0;margin:0}
.garage-carousel .garage-grid{display:flex;flex:1;min-width:0;height:100%;gap:6px;padding:4px 2px 5px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0}
.garage-grid::-webkit-scrollbar{display:none}
.garage-card{flex:0 0 calc((100% - 12px)/3);min-width:0;min-height:0;justify-content:center;gap:3px;border-radius:9px;border:1px solid #617c8e99;background:linear-gradient(145deg,#14202ce8,#03090fee);padding:5px 2px;box-shadow:inset 0 1px 0 #ffffff0d;scroll-snap-align:center;transition:border-color .2s,background .2s,box-shadow .2s}
.garage-card img{height:58%;width:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #0009)}
.garage-card strong{font-size:clamp(8px,2.1vw,11px);margin:0;line-height:1.15}.garage-card small{font-size:5px;line-height:1.3;letter-spacing:.1px;margin:0;color:#afc3d5}
.garage-card.selected{border:1px solid #81ffd0;background:linear-gradient(#12382ae8,#04100de8);box-shadow:0 0 10px #48ffbd55,inset 0 0 12px #54ffc71c}.garage-card.selected small{color:#a3ffda}
.garage-card:disabled{border-style:solid;background:#050b12df;cursor:default}.garage-card:disabled img{opacity:.4;filter:grayscale(1)}.garage-card:disabled strong{color:#b0bcc8}
.garage-arrow{display:grid;place-items:center;flex:0 0 25px;width:25px;height:44px;padding:0;border:0;border-radius:7px;background:#02070cc4;color:#fff;font:34px/1 system-ui;cursor:pointer;text-shadow:0 2px 5px #000;transition:background .2s,opacity .2s}
.garage-arrow:disabled{opacity:.22;cursor:default}.garage-arrow:hover:not(:disabled){background:#3d1424}.garage-arrow:active:not(:disabled){transform:scale(.92)}
.garage-panel .car-paint{align-self:center;min-width:0;width:100%;margin:0;padding:5px 8px 7px;border:1px solid #7d95a899;border-radius:12px;background:linear-gradient(140deg,#0b151eee,#02070cef);text-align:left;box-shadow:0 4px 12px #0006}
.garage-panel .car-paint legend{font-size:clamp(10px,2.8vw,13px);padding:0 5px;color:#edf4fa}
.garage-panel .paint-options{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:2px;width:100%;max-width:none;margin:0}
.garage-panel .paint-option{width:100%;height:34px;min-width:0;flex:auto;padding:0;background:none;border:1px solid transparent;border-radius:50%;box-shadow:none;transition:transform .2s,border-color .2s}
.garage-panel .paint-option:before{width:clamp(17px,4.6vw,25px);height:clamp(17px,4.6vw,25px);box-shadow:inset 0 0 0 1px #ffffff88,0 2px 5px #0009}
.garage-panel .paint-option[aria-pressed="true"]{border-color:#66ffca;background:#1b554144;box-shadow:0 0 8px #44ffba66;outline:0}
.garage-panel .primary{align-self:center;position:relative;overflow:hidden;min-height:42px;height:85%;max-height:62px;width:100%;margin:0;padding:5px 12px;border:1px solid #ff8195;border-radius:3px;background:linear-gradient(160deg,#ff284a,#f00029 60%,#ba0025);box-shadow:inset 0 0 0 3px #4f001c, inset 0 0 0 4px #ff5c71,0 0 18px #ff153744;color:#fff;font-size:clamp(18px,5vw,25px);clip-path:polygon(4% 0,96% 0,100% 25%,100% 75%,96% 100%,4% 100%,0 75%,0 25%)}
.garage-panel .primary:before,.garage-panel .primary:after{content:"";position:absolute;top:24%;bottom:24%;width:13%;background:repeating-conic-gradient(#ffffff38 0% 25%,transparent 0% 50%) 0/14px 14px;transform:skew(-12deg);pointer-events:none}
.garage-panel .primary:before{left:5%}.garage-panel .primary:after{right:5%}
.garage-panel .garage-link{align-self:center;justify-self:center;margin:0;padding:2px 14px;min-height:0;background:none;border:0;color:#d1dfef;font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.5px}
.garage-card:focus-visible,.garage-arrow:focus-visible,.garage-panel .paint-option:focus-visible{outline:2px solid #d6fff0;outline-offset:2px}
@keyframes garage-showroom-idle{0%,100%{translate:0 0}50%{translate:0 -1px}}
@media(min-width:460px){.garage-card{flex-basis:calc((100% - 30px)/6)}.garage-arrow{flex-basis:20px;width:20px}}
@media(prefers-reduced-motion:reduce){.garage-car-rig{animation:none;transition:none}.garage-card,.garage-arrow,.garage-panel .paint-option{transition:none}}

.answer-confetti-gif{position:absolute;left:0;bottom:0;width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center bottom;z-index:5;pointer-events:none}


/* Outcome feedback uses a single neutral highlight for every category. */
.race-scene .gate.correct{--category:#f4f7fb;border:3px solid #f4f7fb;background:linear-gradient(180deg,#445464,#243240);box-shadow:0 0 0 2px #f4f7fb66,0 0 20px #ffffff40;filter:none}
.race-scene .gate.correct span,.race-scene .gate.correct strong{color:#fff}
.race-scene .gate.wrong{outline:2px solid #f4f7fb;animation:none}
#feedback,#feedback.bad{--answer-color:#f4f7fb;color:#f4f7fb;font-style:normal}
#feedback strong:before{content:none}
#feedback.feedback-success{background:#182633f5;border:2px solid #f4f7fb;color:#fff;box-shadow:0 4px 16px #0006}
@keyframes match-confirm{0%,100%{box-shadow:0 0 0 2px #f4f7fb66}45%{box-shadow:0 0 0 4px #f4f7fb,0 0 22px #ffffff55}}

/* Prevent repeated actions while the page turns in depth. */
.shell.page-transitioning{isolation:isolate}
.shell.page-transitioning>*{pointer-events:none}

.page-transition-backdrop{position:absolute;inset:0;z-index:8;background:#030b14;pointer-events:none}
.shell.transition-to-race .race-scene{position:relative;z-index:9}
.shell.transition-to-race .prompt{z-index:9}

@keyframes wrong-answer-flash{0%,18%,36%,54%,72%,90%{opacity:1}27%,63%,100%{opacity:0}}