* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body, #root { height: 100%; }
body { overflow: hidden; font-family: 'Vazirmatn', system-ui, sans-serif; background: #15161a; color: #fff; user-select: none; }
canvas { display: block; touch-action: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.app { position: fixed; inset: 0; overflow: hidden; }
.gl { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter .3s; }
.screen, .play, .modal, .loading { position: absolute; inset: 0; }
.metal { background: linear-gradient(#5b5f66, #2b2d31 45%, #1b1c1f); border: 2px solid #8a8e95; box-shadow: inset 0 1px 0 #b9bdc4, 0 4px 10px #0009; border-radius: 12px; }
.gtitle { text-align: center; font-weight: 900; font-size: 84px; line-height: 1; background: linear-gradient(#ffd38a, #f08a1c 55%, #b6520e); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #3b1a05); }
.gtitle small { display: block; font-size: 30px; line-height: 1.6; background: linear-gradient(#fff, #b8bcc2); -webkit-background-clip: text; }
.title .logo { display: none; }
.title .gtitle { position: absolute; top: max(16px, env(safe-area-inset-top)); inset-inline: 0; }
.topbtns { position: absolute; top: 120px; inset-inline-end: 14px; z-index: 2; }
.sq { min-width: 56px; height: 48px; padding: 0 10px; font-size: 14px; font-weight: 700; }
.starplate { position: absolute; top: 28%; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 6px 28px; border-radius: 16px; }
.starplate img { width: 30px; } .starplate b { font-size: 24px; }
.bottom { position: absolute; bottom: 9%; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.btn { display: block; width: min(68vw, 270px); height: 60px; font-weight: 900; font-size: 24px; border-radius: 40px; text-shadow: 0 2px 0 #0007; transition: transform .1s; margin: 0 auto; }
.btn:active { transform: scale(.94); }
.btn.orange { background: linear-gradient(#ffb15a, #f07a14 50%, #c25a0a); border: 3px solid #d6d9de; box-shadow: 0 0 0 2px #4a4d52, 0 6px 14px #0009, inset 0 2px 0 #ffd6a0; }
.btn.big { height: 72px; font-size: 32px; width: min(76vw, 300px); }
.btn.grey { background: linear-gradient(#7b8088, #3c4047 50%, #2a2c30); border: 3px solid #b7bbc1; box-shadow: 0 0 0 2px #1d1e21, 0 6px 14px #0009, inset 0 2px 0 #a8acb3; width: min(56vw, 230px); }
.topbar { position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline: 12px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.pill { padding: 6px 24px; border-radius: 30px; font-weight: 800; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.pill img { width: 22px; }
.panel { position: relative; width: min(90vw, 400px); padding: 54px 22px 26px; border-radius: 20px; background: repeating-linear-gradient(45deg, #2a2b2f 0 3px, #232427 3px 6px); border: 4px solid #9a9ea5; box-shadow: inset 0 0 0 3px #3c3e43, inset 0 0 0 7px #6f737a, 0 14px 40px #000c; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.ptab { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); min-width: 62%; padding: 4px 22px 6px; background: linear-gradient(#ffb15a, #e0700f); color: #1a1208; font-weight: 900; font-size: 22px; clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); }
.panel h2 { color: #ff9a2e; font-size: 30px; font-weight: 900; text-shadow: 0 2px 0 #000; line-height: 1.7; }
.xbtn { position: absolute; top: 8px; inset-inline-end: 10px; font-size: 26px; width: 38px; height: 38px; }
.goal { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.goal img { width: 44px; }
.laps { color: #b6bac0; font-weight: 700; font-size: 18px; }
.stars { display: flex; justify-content: center; gap: 8px; }
.carplate { align-self: center; padding: 6px 34px; font-weight: 800; font-size: 18px; }
.note { color: #c9b9a6; font-size: 15px; line-height: 1.8; }
.modal { display: grid; place-items: center; background: #0007; z-index: 10; animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.9) } }
.garage .gpanel { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); gap: 10px; }
.stat { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.stat span { width: 90px; text-align: start; }
.sbar { flex: 1; height: 12px; border-radius: 8px; background: #111; border: 1px solid #555; overflow: hidden; }
.sbar i { display: block; height: 100%; background: linear-gradient(90deg, #c25a0a, #ffb15a); }
.carrow { display: flex; gap: 8px; margin-top: 6px; }
.chip { flex: 1; padding: 8px 4px; border-radius: 12px; background: #2b2d31; border: 2px solid #5d6168; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; }
.chip img { width: 20px; } .chip.on { border-color: #ff9a2e; box-shadow: 0 0 10px #f07a1488; }
.map { background: #0b0c0e; }
.mapcard { position: absolute; top: 78px; bottom: 16px; inset-inline: 14px; border-radius: 18px; border: 3px solid #4a4d52; overflow: hidden; display: flex; flex-direction: column-reverse; background: linear-gradient(#2e6c9c, #7aa7c8 40%, #c29b68 70%, #8c4e28); }
.zone { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-top: 1px dashed #fff5; }
.zone.z0 { background: linear-gradient(#8c4e2800, #8c4e28aa); } .zone.z1 { background: #c29b6833; } .zone.z2 { background: #2b4a3a55; }
.zname { position: absolute; top: 8px; inset-inline-end: 14px; font-weight: 900; color: #e8e2da; font-size: 18px; text-shadow: 0 2px 4px #000; }
.node { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(#ffb15a, #d0640c); border: 6px solid #8a8e95; box-shadow: 0 0 0 4px #2b2d31, 0 8px 18px #000a; font-size: 36px; font-weight: 900; color: #2a1608; }
.node.locked { background: radial-gradient(#4a4d52, #222326); } .node img { width: 46px; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud button, .hud .nitrowrap { pointer-events: auto; }
.hud-tl { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.posplate { padding: 0 20px; height: 64px; display: flex; align-items: baseline; font-weight: 900; }
.pos { font-size: 50px; color: #ff9a2e; line-height: 1.2; } .tot { font-size: 24px; color: #ddd; }
.lapbox { background: #1b1d22cc; border-radius: 10px; padding: 4px 14px; font-weight: 800; color: #ff9a2e; font-size: 15px; line-height: 1.7; }
.lapbox span { color: #fff; margin-inline-start: 6px; }
.pausebtn { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; width: 52px; height: 52px; }
.pausebtn img, .nitro img { width: 100%; }
.minimap { position: absolute; top: 72px; right: 8px; width: 120px; height: 120px; }
.minimap img { position: absolute; inset: 0; width: 100%; } .minimap canvas { position: absolute; inset: 0; }
.countdown { position: absolute; top: 34%; inset-inline: 0; text-align: center; font-size: 110px; font-weight: 900; color: #ff9a2e; text-shadow: 0 6px 0 #3b1a05, 0 0 30px #000; }
.speedo { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 10px; width: 150px; height: 150px; }
.speedo img { position: absolute; inset: 0; width: 100%; }
.needle { position: absolute; left: 50%; bottom: 50%; width: 4px; margin-left: -2px; height: 58px; background: linear-gradient(#fff, #ff8a1e); transform-origin: 50% 100%; border-radius: 3px; transition: transform .08s; }
.spd { position: absolute; top: 54%; inset-inline: 0; text-align: center; font-size: 34px; font-weight: 900; text-shadow: 0 2px 4px #000; line-height: 1.2; }
.kmh { position: absolute; bottom: 14px; inset-inline: 0; text-align: center; font-size: 10px; color: #ff9a2e; font-weight: 800; }
.brake { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(#6a6e75, #2b2d31); border: 4px solid #9a9ea5; font-weight: 900; font-size: 20px; box-shadow: 0 6px 16px #000a; }
.brake:active, .nitro:active { transform: translateX(-50%) scale(.92); }
.nitro:active { transform: scale(.92); }
.nitrowrap { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); right: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nitro { width: 112px; height: 112px; }
.nbar { width: 120px; height: 12px; border-radius: 8px; background: #111c; border: 1px solid #667; overflow: hidden; }
.nbar div { height: 100%; background: linear-gradient(90deg, #2a7fd0, #7fd0ff); transform-origin: left; }
.hint { position: absolute; top: 46%; inset-inline: 0; text-align: center; font-size: 14px; color: #fffc; text-shadow: 0 2px 4px #000; animation: fade 1s 4s forwards; pointer-events: none; }
@keyframes fade { to { opacity: 0 } }
.speedlines { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, #fff3 70%, #ffb15a44); opacity: 0; transition: opacity .2s; }
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #15161a; z-index: 20; }
.lbar { width: 220px; height: 12px; border-radius: 8px; background: #2b2d31; overflow: hidden; } .lbar i { display: block; height: 100%; background: #f07a14; transition: width .3s; }
.loading p { color: #aaa; }