/* Warm storybook art direction, readable races, touch-friendly garage. */
html body .screen{min-height:100dvh;height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
html body #title .box{border:2px solid #fff7ea;box-shadow:0 22px 0 -14px #5b2d9e55,0 28px 80px #20182c66}
html body #select{justify-content:flex-start;padding-top:20px;gap:10px;background:radial-gradient(ellipse at 20% 0,#513977,transparent 65%),#191329}
.directorBadge{font-size:10px;letter-spacing:.2em;color:#b8dacf;margin-bottom:0}
html body #preview{flex:none;width:min(92vw,600px);max-width:100%;height:clamp(180px,31vh,290px);border:2px solid #fff3d64a;background:linear-gradient(#ffdcad,#c5e5db)}
html body .card{min-width:106px;border-radius:14px;padding:9px 13px;box-shadow:0 5px 0 #0002}
html body .card:focus-visible{outline:3px solid #ffb347;outline-offset:3px}
#raceLength{font:inherit;color:#fff3d6;border:1px solid #fff3d660;background:#332545;border-radius:10px;padding:6px 12px}
#hubLink{color:#fff3d6;text-decoration:none;padding:9px 18px;border-radius:999px;background:#20182cbf;font-size:14px}
html body #toast{max-width:80%;font-size:clamp(16px,2.5vw,26px);top:30%;pointer-events:none}
html body #speedlines{opacity:.6;filter:opacity(.48)}
#directorDrift{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);width:195px;background:#20182ccd;padding:8px 12px;border:1px solid #ffffff55;border-radius:14px;text-align:center;font-size:11px;opacity:0;transition:opacity .15s}
#directorDrift>div{height:7px;background:#ffffff25;border-radius:5px;position:relative;margin-top:5px;overflow:hidden}#driftCharge{height:100%;display:block;border-radius:5px;width:0}#directorDrift b{position:absolute;top:0;bottom:0;width:2px;background:#fff;left:43.75%}
#coach{position:absolute;top:112px;left:50%;transform:translateX(-50%);max-width:62%;padding:7px 17px;border-radius:14px;background:#fff3d6ec;color:#302143;font-size:13px;text-align:center;box-shadow:0 4px 0 #20182c22}
#racePause{pointer-events:auto;position:absolute;right:72px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:12px;border:1px solid #fff5;background:#20182cc7;color:#fff;font-size:20px;cursor:pointer}
html body #tPause{display:none}html body #tCam{left:auto;right:130px;top:14px;width:44px;height:44px}html body #tHorn{left:auto;right:182px;top:14px;width:44px;height:44px}
html body #touch #tBrake{left:18px;bottom:176px;width:64px;height:48px;border-radius:16px;font-size:13px}
@media(max-width:700px){html body .screen{gap:10px}html body #title .box{padding:24px 18px}html body #title h1{font-size:56px}html body #title p{font-size:15px}html body .kbd{font-size:11px}html body #select{padding-top:14px}html body #select h2{font-size:29px}html body #preview{height:190px}html body .cards{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;max-width:100%;width:100%;padding:6px 3px 12px;flex:none;touch-action:pan-x}html body .card{flex:0 0 105px;font-size:14px}html body .row{gap:7px}html body .toggle{font-size:13px}html body .btn{font-size:18px;padding:11px 25px}html body #pstats{font-size:11px}html body #pname{font-size:22px}html body #mini{width:90px;height:90px;bottom:12px;right:8px}html body #stand{top:85px;left:8px;font-size:11px}html body #stand div:not(.me){display:none}html body .gun{bottom:14px;font-size:12px;padding:6px 10px;gap:5px;max-width:49%}html body .gun b{font-size:25px}html body .gun i{font-size:15px}html body .speed{bottom:18px;left:10px;font-size:28px}html body .heat{width:90px}html body .item{width:60px;height:60px;font-size:29px;top:10px}html body #coach{top:108px;font-size:11px;max-width:88%;width:max-content}html body #toast{top:38%;font-size:16px}html body #tCam{top:140px;left:auto;right:14px;width:42px;height:42px}html body #tHorn{top:140px;left:auto;right:63px;width:42px;height:42px}html body #tPause{display:none}#directorDrift{bottom:85px;width:170px}#racePause{right:14px;top:205px;width:42px;height:42px}html body #mute{right:63px;top:184px;width:42px;height:42px;transform:none}html body #steerZone{bottom:235px}html body #touch #tItem{bottom:268px}html body #touch #tGas{bottom:183px}html body #touch #tFire{right:90px;bottom:104px;width:74px;height:74px}html body #touch #tDrift{right:90px;bottom:190px;width:64px;height:64px}}
@media(max-height:550px){html body #title,html body #result,html body #pause{justify-content:flex-start}html body #select{display:grid;grid-template-columns:minmax(200px,1fr) minmax(250px,1fr);align-content:start;align-items:center;column-gap:18px;row-gap:8px;padding:12px 20px}#select .directorBadge,#select h2{grid-column:1;grid-row:auto}html body #preview{grid-column:1;grid-row:3 / span 5;width:100%;height:220px}html body #cards,html body #select>.row,html body #bGo{grid-column:2;width:100%}html body #cards{grid-row:1 / span 2;flex-wrap:wrap;gap:5px;overflow:visible}html body .card{padding:5px 8px;min-width:82px;flex:1 0 82px;font-size:12px}html body .card b{font-size:10px}html body #select h2{font-size:26px}html body #select>.row{font-size:12px}html body .seg button{padding:5px 12px}html body #stand{display:none}html body #coach{top:94px}html body #touch #tL{bottom:70px}html body #touch #tR{bottom:70px}html body #touch #tBrake{bottom:148px}html body #touch #tGas{bottom:100px}html body #touch #tItem{bottom:179px}html body #touch #tFire{bottom:70px}html body #touch #tDrift{bottom:153px}html body #touch #tCam,html body #touch #tHorn{display:none}html body #mini{width:80px;height:80px}html body .item{width:54px;height:54px;font-size:26px}html body #coach{font-size:11px}html body #toast{top:45%}}
@media(prefers-reduced-motion:reduce){html body #speedlines{display:none}.card,.btn{transition:none}html body #center.pop{animation:none}}