:root{--ink:#f4f7ff;--sub:#b1bed7;--blue:#36deea;--gold:#ffcc5b;--pink:#ff6393;--navy:#101629}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#111a2c;color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif}button{font:inherit;cursor:pointer;border:0;color:inherit;touch-action:manipulation}#app{height:100%;height:100dvh;width:100%;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 50%,#425071,#111524)}#track{position:absolute;inset:0;width:100%;height:100%;display:block}.hidden{display:none!important}.screen{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.screen>section{pointer-events:auto}.panel{color:#fff}.menu-panel{width:100%;height:100%;background:linear-gradient(90deg,rgba(7,16,33,.96) 0%,rgba(7,16,33,.9) 41%,rgba(7,16,33,.12) 80%),url('./poster.webp') center center/cover no-repeat;position:relative;overflow:hidden}.menu-content{height:100%;padding:clamp(12px,3.5vh,36px) clamp(18px,5vw,64px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(6px,1.3vh,16px);position:relative;z-index:2;max-width:780px}.eyebrow{letter-spacing:.15em;font-weight:900;font-size:clamp(10px,1.3vw,14px);color:var(--gold)}h1{font-size:clamp(38px,6.5vw,92px);line-height:.91;font-weight:1000;letter-spacing:-.055em;margin:0;text-shadow:0 5px 20px #080f25}h1 em{font-style:normal;color:#55eff0}p{color:#e5edff;font-size:clamp(12px,1.25vw,19px);line-height:1.34;margin:0;font-weight:600}.menu-stats{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:#eaf8ff;font-weight:800;font-size:clamp(11px,1.2vw,16px)}.menu-stats span{background:#ffffff22;padding:6px 10px;border:1px solid #ffffff36;border-radius:8px}.menu-actions{display:flex;flex-direction:column;gap:9px;min-width:min(360px,95%)}.primary{background:linear-gradient(135deg,#ffcf5c,#ff9b52);color:#172344;font-weight:1000;letter-spacing:.035em;border-radius:14px;box-shadow:0 6px 0 #ae6837,0 10px 23px #0009;padding:clamp(10px,1.9vh,19px) 22px;font-size:clamp(15px,1.8vw,21px)}.primary b{float:right}.secondary-actions{display:flex;gap:7px}.secondary-actions button,.result-actions button,.modal-panel>button:not(.primary):not(.reward-btn),.small-btn,.other-body button,.text-btn{border:1px solid #8db4d066;border-radius:10px;background:#182641;color:#e6f5ff;font-size:clamp(11px,1.15vw,15px);padding:10px 12px;font-weight:850}.secondary-actions button{flex:1}.text-btn{padding:5px 8px;background:#0d1838a6}.menu-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:#c2d3f0;font-size:clamp(10px,1.12vw,13px)}button:focus-visible{outline:3px solid #fff;outline-offset:2px}button:active{transform:translateY(2px)}.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:8px;z-index:10;pointer-events:none;gap:6px;font-weight:900;text-shadow:0 1px 3px #000}.hud>div{display:flex;flex-wrap:wrap;gap:5px;min-width:0}.hud span,.hud strong{display:inline-flex;align-items:center;background:#101a31de;padding:7px 9px;border:1px solid #80b4d055;border-radius:9px;white-space:nowrap;font-size:clamp(10px,1.18vw,15px)}.hud strong{color:var(--gold)}.hud-mid{justify-content:center}.hud-right{justify-content:flex-end}.hud button{pointer-events:auto;padding:5px 12px;font-size:18px}.race-controls{position:absolute;inset:auto 0 0 0;padding:0 clamp(10px,2vw,24px) clamp(9px,2.2vh,22px);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:9}.dpad,.boost{pointer-events:auto}.dpad{display:flex;align-items:center;flex-direction:column;gap:3px}.cross{display:flex;gap:3px}.dpad button{font-weight:1000;font-size:23px;width:clamp(42px,6vw,56px);height:clamp(38px,5.5vh,52px);border:1px solid #d7fff6aa;border-radius:10px;background:#173451bc;color:#fff;backdrop-filter:blur(4px);user-select:none;touch-action:none;box-shadow:0 3px 0 #092139}.dpad button.pressed,.boost.pressed{background:#24ccd4;color:#0b2544}.boost{display:flex;flex-direction:column;justify-content:center;align-items:center;width:clamp(66px,8vw,88px);height:clamp(63px,10vw,86px);border-radius:50%;background:#ffd158dd;border:3px solid #fff4c1;color:#20294a;box-shadow:0 4px 0 #a7752d;font-size:28px;font-weight:1000;user-select:none;touch-action:none}.boost span{font-size:11px}.other-panel,.modal-panel{background:linear-gradient(160deg,#16243af7,#0a1226f7);border:1px solid #5881a0b0;border-radius:20px;box-shadow:0 25px 90px #000b;max-width:min(830px,96vw);max-height:96dvh;display:flex;flex-direction:column;overflow:hidden;padding:clamp(11px,2vh,22px)}.other-panel{width:min(820px,95vw);height:min(620px,94dvh)}.section-head{display:flex;gap:10px;align-items:center;flex-shrink:0}.section-head h2{flex:1;margin:0;font-size:clamp(18px,3vw,30px)}.section-head span{font-weight:1000;color:var(--gold)}.other-body{overflow:auto;flex:1;min-height:0;padding:10px 2px}.upgrade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.upgrade{border:1px solid #526e98;border-radius:14px;padding:13px;background:#182a46}.upgrade h3{font-size:17px;margin:2px 0;color:#80f6f3}.upgrade p{font-size:13px;font-weight:500;color:#b7c9e4;margin:5px 0}.upgrade button{width:100%;background:#256d8b;margin-top:8px}.tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.track-card{padding:10px;border:1px solid #6d89ad;border-radius:11px;background:linear-gradient(120deg,#223657,#15203a);text-align:left}.track-card strong{display:block;color:#8df7ef;font-size:15px}.track-card small{display:block;color:#d5deef;font-size:12px}.track-card.locked{opacity:.45}.modal-panel{align-items:center;text-align:center;gap:10px;min-width:min(400px,95vw);overflow:auto}.modal-panel h2{font-size:clamp(28px,5vw,52px);margin:0;color:var(--gold)}.modal-panel p{color:#ecf1ff}.modal-panel button{min-width:160px}.result-actions{display:flex;gap:5px}.result-actions button{min-width:auto!important}.reward-btn{background:linear-gradient(120deg,#1d728d,#366dc7);border:1px solid #86dfff;border-radius:10px;padding:10px;color:#fff;font-weight:800}.toast{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);background:#10273be8;color:#fff;border:1px solid #56cce6;padding:9px 16px;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .25s;max-width:86%;text-align:center;font-weight:900;z-index:25}.toast.show{opacity:1}@media(max-width:650px){.menu-panel{background-position:60% center}.menu-content{background:linear-gradient(90deg,#0b142be9 0%,#0b142bd4 55%,#0b142b55 100%);width:100%;padding:14px;max-width:none}.menu-foot{font-size:10px}.menu-foot span{max-width:240px}.menu-actions{min-width:0;width:min(330px,100%)}.hud{padding:5px}.hud span,.hud strong{padding:5px 6px;font-size:10px}.hud-mid #hudTrack{display:none}.hud-right #hudNitro{display:none}.hud-right button{font-size:17px;padding:3px 10px}.upgrade-grid{grid-template-columns:1fr}.tracks{grid-template-columns:repeat(2,minmax(0,1fr))}.other-body{padding:5px 0}}@media(max-height:520px){.menu-content{gap:5px;padding-top:7px;padding-bottom:7px}.menu-panel h1{font-size:clamp(32px,min(6vw,11vh),60px)}.menu-panel p{font-size:12px;line-height:1.15}.menu-stats span{padding:3px 6px}.primary{padding:8px 16px;font-size:16px}.secondary-actions button{padding:6px}.menu-foot{font-size:10px}.modal-panel{gap:5px;padding:8px}.modal-panel h2{font-size:26px}.modal-panel p{font-size:12px}.other-panel{max-height:97dvh}.dpad button{width:42px;height:35px}.boost{width:64px;height:64px}.race-controls{padding-bottom:7px}.other-body{font-size:12px}}@media(max-height:400px){.menu-content{justify-content:flex-start}.menu-panel h1{font-size:31px}.menu-panel p{display:none}.menu-stats{font-size:10px}.menu-stats span{padding:2px 5px}.primary{padding:6px;font-size:14px}.menu-foot span{display:none}.secondary-actions button{font-size:10px;padding:5px}.menu-panel .eyebrow{font-size:9px}.hud-mid{display:none!important}.race-controls{padding-bottom:3px}}
