:root{
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --safe-left:max(12px,calc(env(safe-area-inset-left) + 10px));
  --safe-right:max(12px,calc(env(safe-area-inset-right) + 10px));
  --safe-top:max(8px,env(safe-area-inset-top));
  --safe-bottom:max(12px,env(safe-area-inset-bottom));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#080808;touch-action:none;user-select:none}
#game{position:fixed;inset:0}
#game canvas{display:block;width:100%;height:100%}
#speedFx{position:fixed;inset:-12%;z-index:1;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 271deg at 50% 62%,rgba(244,248,255,.28) 0deg .12deg,transparent .12deg 5.4deg),radial-gradient(ellipse at 50% 62%,transparent 0 44%,rgba(255,224,176,.12) 72%,rgba(255,232,199,.22) 100%);-webkit-mask-image:radial-gradient(ellipse at 50% 62%,transparent 0 39%,rgba(0,0,0,.16) 54%,#000 82%);mask-image:radial-gradient(ellipse at 50% 62%,transparent 0 39%,rgba(0,0,0,.16) 54%,#000 82%);filter:blur(.25px);transition:opacity .1s linear}
#ui{position:fixed;inset:0;z-index:2;pointer-events:none}
.hidden{display:none!important}
#gameNav{position:absolute;z-index:40;inset:0;pointer-events:none}
#gameNav a,#gameNav button{position:absolute;top:var(--safe-top);width:36px;min-width:36px;height:36px;min-height:36px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(144,236,255,.55);border-radius:12px;background:linear-gradient(180deg,rgba(11,31,43,.86),rgba(3,12,19,.89));box-shadow:0 4px 14px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.12);backdrop-filter:blur(5px);color:#e9fbff;text-decoration:none;white-space:nowrap;touch-action:manipulation;pointer-events:auto;overflow:hidden;opacity:.84}
#arcadeBtn{left:var(--safe-left)}
#pauseRaceBtn{right:calc(var(--safe-right) + 264px)}
#resetRaceBtn{right:calc(var(--safe-right) + 220px)}
#cleanBtn{right:var(--safe-right)}
#layoutCleanBtn{right:calc(var(--safe-right) + 176px)}
#gameNav a span{font:900 22px/1 Arial,sans-serif;margin-top:-2px;color:#78ecff}
#gameNav button span{font:900 15px/1 Arial,sans-serif;color:#88ffc1}
#gameNav strong{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#gameNav a:active,#gameNav button:active,#gameNav button.is-clean{transform:translateY(1px);border-color:#fff06a;background:linear-gradient(180deg,rgba(32,65,55,.94),rgba(4,23,28,.95));color:#fff}
#layoutCleanBtn span{color:#ffe875!important}
#pauseNotice{pointer-events:none;position:absolute;z-index:48;left:50%;top:50%;transform:translate(-50%,-50%);padding:13px 22px;border:2px solid #ffe875;border-radius:14px;background:rgba(5,5,5,.9);box-shadow:0 14px 40px rgba(0,0,0,.5);font-weight:950;letter-spacing:.13em}
body.clean-layout #gameNav>*:not(#layoutCleanBtn),body.clean-layout #raceHud,body.clean-layout #miniWrap,body.clean-layout #sectionFlash{opacity:0!important;pointer-events:none!important}
body.clean-layout #layoutCleanBtn{opacity:.78!important;pointer-events:auto!important;right:var(--safe-right)}
.card{pointer-events:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,710px);max-height:92vh;overflow:auto;padding:20px 22px 22px;border-radius:24px;background:linear-gradient(180deg,rgba(18,18,18,.91),rgba(5,5,5,.86));border:1px solid rgba(255,255,255,.22);box-shadow:0 22px 80px rgba(0,0,0,.5);backdrop-filter:blur(9px);text-align:center}
.eyebrow{font-size:.72rem;letter-spacing:.22em;font-weight:900;opacity:.72}
h1{margin:2px 0 0;font-size:clamp(36px,7vw,66px);line-height:.95;letter-spacing:-.04em}
.tagline{margin:8px 0 0;font-weight:900;font-size:clamp(16px,2.8vw,23px)}
.menuCopy{max-width:600px;margin:8px auto 17px;opacity:.78;line-height:1.35;font-size:.92rem}
.label{margin:12px 0 6px;font-size:.72rem;letter-spacing:.18em;font-weight:900;opacity:.62}
.buttonGrid{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
button{font:inherit;color:#fff;font-weight:850;background:#252525;border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:9px 12px;min-height:42px}
button:disabled{opacity:.30}
button.active{outline:3px solid rgba(255,255,255,.9);outline-offset:1px;background:#343434}
.primaryBtn{margin-top:15px;min-width:190px;background:#f3f3f3;color:#111;border:none;font-size:1.05rem;padding:12px 22px}
.subtle{margin-top:10px;font-size:.75rem;opacity:.5}
#raceHud{position:absolute;left:calc(var(--safe-left) + 44px);top:var(--safe-top);display:flex;gap:5px;font-weight:950;font-size:clamp(12px,1.65vw,15px);text-shadow:0 2px 5px #000}
.hudPill{padding:6px 9px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(0,0,0,.46);box-shadow:0 3px 12px rgba(0,0,0,.2);backdrop-filter:blur(3px)}
.speedPill{color:#ffe875;min-width:70px;text-align:center}
#miniWrap{position:absolute;right:calc(var(--safe-right) + 44px);top:var(--safe-top);width:clamp(96px,14vw,126px);aspect-ratio:1.42;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(0,0,0,.22);overflow:hidden;backdrop-filter:blur(2px);opacity:.84}
#miniMap{width:100%;height:100%}
#countdown{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:clamp(64px,17vw,150px);font-weight:1000;text-shadow:0 5px 24px #000}
#boostFlash{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);font-size:clamp(23px,5vw,42px);font-weight:1000;opacity:0;text-shadow:0 3px 12px #000}
#sectionFlash{position:absolute;left:50%;top:7%;transform:translateX(-50%);font-size:clamp(12px,1.7vw,15px);font-weight:950;letter-spacing:.08em;opacity:0;text-shadow:0 2px 8px #000}
#resetCarBtn{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 4px);transform:translateX(-50%);min-height:34px;padding:7px 12px;border:1px solid rgba(255,224,137,.72);border-radius:999px;background:linear-gradient(180deg,rgba(77,49,20,.88),rgba(30,18,8,.92));box-shadow:0 5px 18px rgba(0,0,0,.38);color:#fff3cb;font-size:.72rem;letter-spacing:.06em;pointer-events:auto;touch-action:manipulation;backdrop-filter:blur(4px)}
#resetCarBtn:active{transform:translate(-50%,2px);filter:brightness(1.16)}
#touchControls{position:absolute;inset:0}
#steeringJoystick{--stick-x:0px;--stick-y:0px;position:absolute;left:var(--safe-left);bottom:var(--safe-bottom);width:148px;height:148px;border:1.5px solid rgba(220,247,255,.42);border-radius:50%;background:radial-gradient(circle at 46% 38%,rgba(201,246,255,.16),rgba(17,38,49,.16) 48%,rgba(3,12,18,.29) 76%);box-shadow:inset 0 0 0 10px rgba(208,244,255,.025),0 7px 22px rgba(0,0,0,.24);backdrop-filter:blur(2px);pointer-events:auto;touch-action:none;filter:drop-shadow(0 5px 14px rgba(0,0,0,.28));opacity:.88}
.joystickGuide{position:absolute;inset:20px;border:1px dashed rgba(222,248,255,.24);border-radius:50%;pointer-events:none}
.joystickGuide::before,.joystickGuide::after{content:"";position:absolute;left:50%;top:50%;background:rgba(226,249,255,.22);transform:translate(-50%,-50%);border-radius:999px}.joystickGuide::before{width:68%;height:1px}.joystickGuide::after{width:1px;height:68%}
#joystickKnob{position:absolute;left:50%;top:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));border:1.5px solid rgba(237,252,255,.72);border-radius:50%;background:radial-gradient(circle at 38% 30%,rgba(235,252,255,.35),rgba(68,142,171,.32) 48%,rgba(6,31,43,.51));box-shadow:inset 0 1px 7px rgba(255,255,255,.16),0 5px 14px rgba(0,0,0,.33);color:rgba(241,252,255,.84);font-size:9px;font-weight:950;letter-spacing:.08em;pointer-events:none;transition:transform .07s ease-out}
#steeringJoystick.is-active{opacity:1;border-color:rgba(235,253,255,.75);background:radial-gradient(circle at 46% 38%,rgba(205,248,255,.23),rgba(20,66,84,.22) 50%,rgba(3,18,27,.34) 78%)}
#steeringJoystick.is-active #joystickKnob{transition:none;border-color:#fff;filter:brightness(1.12)}
.joystickAssist{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;white-space:nowrap;color:rgba(231,251,255,.68);font-size:7px;font-weight:900;letter-spacing:.07em;pointer-events:none}.joystickAssist strong{color:#a9ffd3;font-size:7px}
#tiltBtn{position:absolute;left:calc(var(--safe-left) + 158px);bottom:var(--safe-bottom);width:58px;height:43px;min-height:43px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(171,230,255,.42);border-radius:13px;background:linear-gradient(180deg,rgba(23,42,54,.56),rgba(4,13,20,.62));box-shadow:0 5px 14px rgba(0,0,0,.3);backdrop-filter:blur(3px);pointer-events:auto;touch-action:manipulation;opacity:.82;line-height:.9}
#tiltBtn span{font-size:10px;letter-spacing:.08em}#tiltBtn strong{margin-top:4px;font-size:8px;color:#a9bbca;letter-spacing:.08em}
#tiltBtn.is-on{border-color:#8fffc4;background:linear-gradient(180deg,rgba(27,112,79,.68),rgba(7,54,40,.72));opacity:1}#tiltBtn.is-on strong{color:#aaffcf}
#tiltBtn.is-error{border-color:#ffd365;background:linear-gradient(180deg,rgba(114,78,21,.70),rgba(52,31,5,.74))}#tiltBtn.is-error strong{color:#ffe39b}
#pedalControls{position:absolute;right:var(--safe-right);bottom:var(--safe-bottom);display:flex;align-items:flex-end;gap:10px;pointer-events:auto}
#pedalControls button{position:relative;pointer-events:auto;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.45);box-shadow:0 6px 22px rgba(0,0,0,.34);opacity:.92}
#driftBtn{width:68px;height:66px;border-radius:21px;background:linear-gradient(180deg,rgba(224,151,32,.62),rgba(122,63,7,.66));border:2px solid rgba(255,235,176,.55);backdrop-filter:blur(3px);font-size:.73rem}
#reverseBtn{width:72px;height:64px;border-radius:20px;background:linear-gradient(180deg,rgba(53,103,186,.58),rgba(21,47,106,.64));border:2px solid rgba(220,235,255,.48);backdrop-filter:blur(3px);font-size:.72rem}
#brakeBtn{width:78px;height:76px;border-radius:23px;background:linear-gradient(180deg,rgba(198,48,45,.54),rgba(107,16,16,.58));border:2px solid rgba(255,225,225,.46);backdrop-filter:blur(3px)}
#gasBtn{width:90px;height:96px;border-radius:25px;background:linear-gradient(180deg,rgba(38,198,107,.57),rgba(8,103,53,.62));border:2px solid rgba(218,255,232,.52);backdrop-filter:blur(3px);font-size:1.08rem}
#driftBtn.down,#reverseBtn.down,#brakeBtn.down,#gasBtn.down{transform:translateY(3px) scale(.97);filter:brightness(1.22);opacity:1;box-shadow:0 2px 10px rgba(0,0,0,.35)}
#finishCard h2{margin:2px 0 8px;font-size:clamp(30px,6vw,52px)}
.finishList{list-style:none;padding:0;margin:12px auto 15px;width:min(100%,430px);text-align:left}
.finishRow{display:flex;justify-content:space-between;gap:14px;padding:8px 10px;margin:5px 0;border-radius:10px;background:rgba(255,255,255,.07)}
.finishRow.player{outline:2px solid rgba(255,255,255,.6)}
.finishActions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#rotateNotice{pointer-events:auto;position:absolute;inset:0;background:#0b0b0b;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;z-index:20}
#rotateNotice>div{font-size:62px;margin-bottom:6px}
#rotateNotice strong{font-size:24px}
#rotateNotice span{margin-top:8px;opacity:.65}
@media (orientation:portrait) and (max-width:700px){#rotateNotice{display:flex!important}}
@media (max-height:460px){#gameNav a,#gameNav button{width:30px;min-width:30px;height:30px;min-height:30px;border-radius:10px}#pauseRaceBtn{right:calc(var(--safe-right) + 212px)}#resetRaceBtn{right:calc(var(--safe-right) + 174px)}#layoutCleanBtn{right:calc(var(--safe-right) + 136px)}#raceHud{left:calc(var(--safe-left) + 38px)}#miniWrap{right:calc(var(--safe-right) + 38px);width:92px}.card{top:calc(50% + 17px);max-height:calc(100vh - 44px);padding:12px 16px 14px}.menuCopy{margin:5px auto 9px}.label{margin:7px 0 4px}.primaryBtn{margin-top:9px}.subtle{margin-top:6px}#steeringJoystick{width:128px;height:128px}#joystickKnob{width:56px;height:56px}.joystickGuide{inset:17px}.joystickAssist{bottom:6px;font-size:6px}.joystickAssist strong{font-size:6px}#tiltBtn{left:calc(var(--safe-left) + 135px);width:52px;height:38px;min-height:38px;border-radius:11px}#pedalControls{gap:6px}#driftBtn{width:54px;height:52px;border-radius:17px;font-size:.62rem}#reverseBtn{width:58px;height:52px;border-radius:17px;font-size:.64rem}#brakeBtn{width:62px;height:58px;border-radius:18px;font-size:.78rem}#gasBtn{width:72px;height:74px;border-radius:20px;font-size:.94rem}#resetCarBtn{min-height:30px;padding:5px 9px;font-size:.64rem}}
