@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,800;0,900;1,900&family=Inter:wght@600;800&display=swap');:root{--acid:#d8ff3e;--red:#ff4c35;--blue:#35c9ff}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080a0d;color:#f5f3ed;font-family:Inter,Arial}
main,#view,#view canvas{position:absolute;inset:0;width:100%;height:100%}
#view canvas{display:block}
header{position:absolute;z-index:20;inset:0 0 auto;height:74px;display:grid;grid-template-columns:1fr repeat(3,145px) 52px;align-items:center;padding:0 24px;background:#090d11ed;border-bottom:1px solid #39434c}
.brand{display:flex;align-items:center;gap:10px;font:900 19px 'Barlow Condensed'}
.brand i{width:43px;height:44px;display:grid;place-items:center;background:var(--acid);color:#111;font-size:27px;transform:skew(-8deg)}
.brand b{color:var(--acid)}
.brand small{margin-left:5px;background:var(--red);padding:2px 4px;font-size:8px}
.stat{height:43px;border-left:1px solid #394149;padding-left:18px;display:grid;grid-template-columns:auto 1fr;align-items:end}
.stat small{grid-column:1/-1;color:#84909a;font-size:8px}
.stat strong{font:800 24px/1 'Barlow Condensed'}
.stat em{font:normal 8px Inter;color:#78828a;margin:0 0 2px 4px}
.coin strong{color:#ffd33e}
header button{width:42px;height:42px;background:#192027;border:1px solid #48535d;color:white}
.health{position:absolute;z-index:8;left:22px;top:94px;width:260px;padding:12px 14px;background:#0b1015df;border-left:4px solid var(--acid)}
.health>div:first-child{display:flex;justify-content:space-between;font-size:8px}
.health>div:last-child{height:8px;background:#353d44;margin-top:8px}
.health i{display:block;width:100%;height:100%;background:var(--acid)}
.nitro{position:absolute;z-index:8;right:24px;bottom:25px;width:180px;padding:10px;background:#0a0e12dd}
.nitro small,.nitro b{font-size:8px;color:#8c969e}
.nitro>div{height:7px;background:#374047;margin:5px 0}
.nitro i{display:block;width:100%;height:100%;background:#27cfff;box-shadow:0 0 10px #27cfff}
.nitro b{display:block;text-align:right}
.warning{position:absolute;z-index:10;top:110px;left:50%;transform:translateX(-50%);padding:11px 20px;background:#3d0808dd;border:1px solid var(--red);color:#ffad9f;font-size:11px;animation:pulse .35s infinite alternate}
.message{position:absolute;z-index:10;bottom:80px;left:50%;transform:translateX(-50%);padding:10px 17px;background:#0a0e12e9;border:1px solid var(--acid);color:var(--acid);font-size:10px}
.hidden{display:none!important}
.overlay{position:absolute;z-index:15;inset:0;display:grid;place-items:center;padding:20px;background:#070b0fdd;backdrop-filter:blur(4px)}
.home-card,.result-card,.shop-card{width:min(680px,94%);padding:34px 38px;background:#121920f5;border-top:5px solid var(--acid);box-shadow:0 30px 70px #000a}
.eyebrow{margin:0;color:var(--acid);font-size:9px;letter-spacing:3px}
.danger{color:var(--red)}
h1{margin:7px 0 22px;font:900 italic clamp(62px,8vw,90px)/.72 'Barlow Condensed'}
h1 em{color:var(--acid)}
h2{margin:7px 0 16px;font:900 italic 50px/.8 'Barlow Condensed'}
.worlds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.world{min-height:140px;padding:16px;text-align:left;border:1px solid #46525c;background:linear-gradient(140deg,#202a32,#10161c);color:white;cursor:pointer}
.world:hover{border-color:var(--acid);transform:translateY(-2px)}
.world.meteor{background:linear-gradient(140deg,#3a1618,#141217)}
.world>i{display:block;font-style:normal;font-size:34px}
.world span{display:block;margin:10px 0}
.world span b{display:block;font:900 21px 'Barlow Condensed'}
.world span small{color:#929ca4;font-size:8px}
.world>em{color:var(--acid);font:800 normal 9px Inter}
.shop-button,.result-card>button{width:100%;margin-top:13px;padding:14px 16px;border:0;background:var(--acid);display:flex;justify-content:space-between;font:900 15px 'Barlow Condensed';cursor:pointer}
.shop-button b,.balance b{color:#9c6800}
.controls{display:block;text-align:center;margin-top:12px;color:#7f8991;font-size:8px}
.shop-card{position:relative;width:min(820px,96%);max-height:90vh;overflow:auto}
.close{position:absolute;right:15px;top:14px;width:36px;height:36px;background:#202830;border:1px solid #56616b;color:white;font-size:22px}
.balance{padding:10px 13px;background:#0c1115;color:#8d979f;font-size:9px}
.vehicle-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.vehicle{padding:13px;background:#192128;border:1px solid #3e4952}
.vehicle.selected{border-color:var(--acid)}
.preview{height:70px;display:grid;place-items:center;background:#10161b;font-size:38px}
.vehicle h3{margin:9px 0 2px;font:900 18px 'Barlow Condensed'}
.vehicle p{margin:0 0 8px;color:#89949c;font-size:8px}
.armor{height:5px;background:#343d44;margin:7px 0}
.armor i{display:block;height:100%;background:var(--acid)}
.vehicle button{width:100%;padding:8px;border:0;background:var(--acid);font-size:9px;font-weight:800}
.vehicle button:disabled{background:#3a4248;color:#818a91}
.results{display:grid;gap:2px}
.results span{display:flex;justify-content:space-between;padding:11px 13px;background:#0c1115;color:#929ca4;font-size:10px}
.results b{color:white}
.result-card .secondary{background:transparent;color:var(--acid);border:1px solid var(--acid)}
.paused{position:absolute;z-index:14;inset:0;display:grid;place-content:center;text-align:center;background:#070a0dbb}
.paused b{font:900 italic 75px 'Barlow Condensed'}
.mobile{display:none;position:absolute;z-index:10;left:16px;right:16px;bottom:16px;justify-content:space-between}
.mobile button{width:70px;height:60px;background:#0b1015cc;border:1px solid #fff5;color:white;font-size:22px}
.mobile #boostBtn{border-radius:50%;height:72px;color:var(--blue);font-size:9px}
@keyframes pulse{to{transform:translateX(-50%) scale(1.06)}
}
@media(max-width:700px),(pointer:coarse){header{height:61px;padding:0 8px;grid-template-columns:1fr repeat(3,60px) 38px}
.brand span{display:none}
.stat{padding-left:6px}
.stat strong{font-size:18px}
.stat em{display:none}
header button{width:35px}
.health{top:72px;left:10px;width:225px}
.nitro{display:none}
.home-card,.shop-card,.result-card{padding:24px}
.worlds{grid-template-columns:1fr}
.world{min-height:100px}
.vehicle-list{grid-template-columns:repeat(2,1fr)}
.mobile{display:flex}
}