*{box-sizing:border-box}
/* The stage sits BELOW the 48px ZayroPlay game shell so the in-game bar and the
   site chrome can never overlap (they used to fight for the same top strip). */
.racer-stage{position:fixed;top:48px;left:0;right:0;bottom:0;background:#141d29;color:#faf5e9;font-family:Arial,Helvetica,sans-serif;overflow:hidden;z-index:5}
.racer-stage button,.racer-stage a{-webkit-tap-highlight-color:transparent}
.racer-stage button{font:700 12px Arial;letter-spacing:1px;cursor:pointer;color:inherit;background:#1b2735;border:1px solid #4d5a66;padding:12px 16px}
.racer-stage button:hover{border-color:#ff703c}
.racer-stage button:focus-visible,.racer-stage a:focus-visible{outline:3px solid #ffad65;outline-offset:3px}
.racer-stage button:disabled{opacity:.45;cursor:not-allowed}
[hidden]{display:none!important}
#world{position:absolute;width:100%;height:100%;inset:0;display:block}
#vfx{position:absolute;width:100%;height:100%;inset:0;display:block;pointer-events:none}
.racer-bar{position:absolute;left:4vw;right:4vw;top:14px;display:flex;align-items:center;justify-content:space-between;z-index:2}
.header-right{display:flex;align-items:center;gap:16px}
#coin-chip{font-size:12px;letter-spacing:1px;background:#1b2735;border:1px solid #687271;padding:9px 14px;color:#ffd23c}
#coin-chip b{font-size:14px}
.racer-brand{font-size:24px;font-weight:900;font-style:italic;letter-spacing:-2px;color:inherit}
.racer-brand span{font:10px Arial;letter-spacing:2px;margin-left:12px}
#edition{font-size:10px;letter-spacing:2px}
#menu{position:absolute;inset:0;padding:80px 4vw 96px;background:linear-gradient(90deg,rgba(12,20,30,.97),rgba(12,20,30,.85) 45%,rgba(12,20,30,.55) 78%,transparent);overflow:auto;display:flex;flex-direction:column}
.menu-grid{display:grid;grid-template-columns:minmax(320px,1.15fr) minmax(320px,1fr);gap:34px;align-items:start}
@media(max-width:860px){.menu-grid{grid-template-columns:1fr}}
.eyebrow{color:#ffa275;font-size:10px;letter-spacing:3px;font-weight:bold}
.racer-stage h1{font-size:clamp(34px,4.6vw,72px);line-height:.92;letter-spacing:-3px;margin:14px 0;font-weight:900}
.racer-stage h1 em{font-style:italic;color:#ff703c}
.intro{color:#c4cccc;font-size:13px;line-height:1.7;margin:0}
.section-title{font-size:10px;letter-spacing:3px;color:#ffa275;font-weight:bold;margin:22px 0 10px}
#levels{display:flex;gap:7px;flex-wrap:wrap}
.level{width:64px;padding:11px 5px}
.level small{display:block;font-size:8px;margin-top:6px;letter-spacing:0}
.level.active{background:#f1ebdf;color:#182227;border-color:#f1ebdf}
#difficulty{display:flex;gap:7px}
#difficulty button{flex:1;text-align:left}
#difficulty button small{display:block;font-size:9px;font-weight:400;margin-top:4px;color:#9fb0ab}
#difficulty button.active{background:#f1ebdf;color:#182227;border-color:#f1ebdf}
#difficulty button.active small{color:#5b6a5f}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:stretch}
.primary{background:#ff703c;color:#161e22;border:0;padding:16px 22px;min-width:250px;text-align:left;font-size:13px}
.primary span{float:right;font-size:18px}
.primary:hover{background:#ff905c}
#dodge{display:block;text-align:left}
#dodge span{float:right;color:#ffa275;margin-left:12px}
.stats-row{display:flex;gap:26px;margin-top:18px;font-size:10px;letter-spacing:2px;color:#9fb0ab}
.stats-row b{color:#faf5e9;font-size:14px;margin-left:6px}
.shop{display:flex;flex-direction:column;gap:8px}
.shop-item{display:flex;align-items:center;gap:12px;background:#1b2735;border:1px solid #333f4b;padding:10px 12px}
.shop-item.owned{border-color:#5a7a4a}
.shop-swatch{width:42px;height:26px;border-radius:4px;flex:none;border:1px solid #0006}
.shop-info{flex:1;min-width:0}
.shop-info strong{font-size:12px;display:block}
.shop-info small{font-size:10px;color:#9fb0ab;display:block;margin-top:2px}
.shop-item button{padding:8px 12px;flex:none}
.shop-item button.buy{background:#ffd23c;color:#161e22;border:0}
.shop-item button.buy:hover{background:#ffe27a}
.shop-item button.equip.active{background:#5a7a4a;border-color:#5a7a4a}
#status{color:#ffa275;font-size:11px;letter-spacing:1px;min-height:18px;margin:14px 0 0}
.controls{margin-top:8px;font-size:10px;color:#7f8f8b;letter-spacing:1px}
.controls b{color:#c4cccc;border:1px solid #4d5a66;padding:2px 6px;margin-right:4px}
#hud{position:absolute;inset:0;pointer-events:none;padding:70px 4vw 0;display:flex;flex-direction:column;gap:12px}
.race-top{display:flex;justify-content:space-between;align-items:flex-start}
.race-top small{display:block;font-size:9px;letter-spacing:2px;color:#ffa275}
.race-top strong{font-size:26px;font-style:italic}
#timer{font-variant-numeric:tabular-nums}
.progress{height:5px;background:#0007;max-width:520px}
#distance-bar{height:100%;width:0;background:#ff703c;transition:width .2s linear}
.dash{display:flex;gap:26px;align-items:center;background:#0006;padding:10px 16px;max-width:640px;margin-top:auto}
.dash>div{display:flex;flex-direction:column;gap:2px;min-width:70px}
.dash strong{font-size:22px;font-variant-numeric:tabular-nums}
.dash small{font-size:8px;letter-spacing:2px;color:#9fb0ab}
.dash meter{width:130px;height:10px}
#touch{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:10px;pointer-events:auto}
#touch button{width:64px;height:52px;font-size:15px;background:#0008}
#overlay{position:absolute;inset:0;background:#0a121ccc;display:grid;place-items:center;z-index:5}
.dialog{background:#141d29;border:1px solid #4d5a66;padding:34px 38px;max-width:480px;display:flex;flex-direction:column;gap:14px}
.dialog h2{margin:6px 0;font-size:30px;letter-spacing:-1px;font-style:italic}
.dialog p{color:#c4cccc;font-size:13px;line-height:1.6;margin:0}
@media (hover:hover) and (pointer:fine){#touch{display:none}}