:root{--c1:#22d3ff;--c2:#ff3d6e;--gold:#ffc21a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}
html,body{margin:0;height:100%;overflow:hidden;background:#05060d;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#fff}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s}.flash.on{opacity:.35;transition:none}
#hud{position:fixed;inset:0;pointer-events:none}
.top{position:absolute;top:calc(env(safe-area-inset-top) + 10px);left:10px;right:10px;display:flex;gap:8px;justify-content:space-between;align-items:flex-start}
.box{background:linear-gradient(180deg,rgba(10,14,30,.72),rgba(10,14,30,.45));border:1px solid rgba(120,170,255,.25);border-radius:14px;padding:6px 10px;min-width:84px;display:flex;flex-direction:column;backdrop-filter:blur(4px)}
.box small{font-size:10px;letter-spacing:.08em;opacity:.75;font-weight:700}
.box b{font-size:22px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.box.c{flex:1;max-width:170px}.box.r{align-items:flex-end}.box.r b{font-size:18px}
.bar{height:9px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden;margin:4px 0}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3d7bff,var(--c1));box-shadow:0 0 10px var(--c1)}
.mini{display:flex;justify-content:space-between;font-size:13px}.mini b{font-size:14px}
.callout{position:absolute;top:28%;left:0;right:0;text-align:center;font-size:30px;font-weight:900;letter-spacing:.02em;opacity:0;transform:scale(.7);transition:all .18s;text-shadow:0 0 18px rgba(34,211,255,.8),0 3px 0 rgba(0,0,0,.5)}
.callout.show{opacity:1;transform:scale(1)}.callout.good{color:#fff;text-shadow:0 0 22px rgba(255,194,26,.95),0 3px 0 rgba(0,0,0,.5)}.callout.bad{color:#ffd0d0;text-shadow:0 0 22px rgba(255,40,60,1)}.callout.ring{color:#fff}
.help.show{opacity:1}.help.ok{background:rgba(20,160,80,.8)}.help.bad{background:rgba(220,40,60,.82)}
.lights{position:fixed;top:24%;left:0;right:0;text-align:center;pointer-events:none}
.lrow{display:inline-flex;gap:12px;padding:12px 16px;background:rgba(5,6,12,.75);border-radius:18px;border:1px solid rgba(255,255,255,.15)}
.lrow i{width:42px;height:42px;border-radius:50%;background:#2a0606;box-shadow:inset 0 0 8px #000}
.lrow i.r{background:radial-gradient(circle at 40% 35%,#ff9a8a,#ff1a1a 45%,#900);box-shadow:0 0 22px #ff2020}
.lrow i.g{background:radial-gradient(circle at 40% 35%,#c4ffcf,#22e060 45%,#0a7a2a);box-shadow:0 0 26px #30ff70}
#lightsMsg{margin-top:12px;font-weight:900;font-size:20px;text-shadow:0 2px 8px #000}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 34px) 20px calc(env(safe-area-inset-bottom) + 22px);background:linear-gradient(180deg,rgba(3,4,12,.75) 0%,rgba(3,4,12,0) 34%,rgba(3,4,12,0) 52%,rgba(3,4,12,.88) 78%)}
.logo{text-align:center;line-height:.85}
.l1{font-size:44px;font-weight:900;letter-spacing:.32em;margin-left:.32em;color:#cfe9ff;text-shadow:0 0 18px rgba(34,211,255,.7)}
.l2{font-size:68px;font-weight:900;font-style:italic;letter-spacing:.06em;background:linear-gradient(180deg,#fff 10%,#ffb3c2 55%,#ff2d55);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(255,45,85,.7))}
.l3{margin-top:10px;font-size:13px;font-weight:800;letter-spacing:.28em;color:var(--gold)}
.spacer{flex:1}
.paint{text-align:center;margin-bottom:12px}.plbl{font-size:14px;opacity:.9;margin-bottom:8px}
.swatches{display:flex;gap:14px;justify-content:center}
.sw{width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.35);box-shadow:inset 0 -6px 10px rgba(0,0,0,.4),inset 0 5px 8px rgba(255,255,255,.35)}
.sw.on{border-color:#fff;box-shadow:0 0 0 3px var(--c1),inset 0 -6px 10px rgba(0,0,0,.4),inset 0 5px 8px rgba(255,255,255,.35)}
.cta{width:100%;max-width:330px;padding:17px;border-radius:40px;border:none;font-size:22px;font-weight:900;letter-spacing:.06em;color:#fff;background:linear-gradient(90deg,#ff2d55,#ff7a1a);box-shadow:0 6px 26px rgba(255,60,80,.55);margin:6px 0}
.cta.ghost{background:rgba(255,255,255,.1);box-shadow:none;border:1px solid rgba(255,255,255,.3);font-size:17px;padding:12px}
.how{margin-top:12px;font-size:14px;line-height:1.7;text-align:center;opacity:.92}
.bestline{margin-top:8px;font-size:14px;color:var(--gold)}
.mute{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);color:#fff;font-size:20px}
.res{justify-content:flex-end;background:linear-gradient(180deg,rgba(3,4,12,0) 30%,rgba(3,4,12,.9) 62%)}
.card{width:100%;max-width:360px;text-align:center}
.rt{font-size:34px;font-weight:900;text-shadow:0 0 20px rgba(255,194,26,.8)}
.rs{font-size:16px;opacity:.9;margin:4px 0 6px}
.rscore{font-size:52px;font-weight:900;color:var(--gold);text-shadow:0 0 18px rgba(255,194,26,.6)}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:8px 0;font-size:14px}
.rows div{display:flex;justify-content:space-between;background:rgba(255,255,255,.07);padding:6px 10px;border-radius:10px}
.tip{font-size:14px;color:#9fe6ff;margin:6px 0 10px}
@media (min-aspect-ratio:1/1){.how{font-size:13px}.l2{font-size:56px}}

.box.r em{font-style:normal;font-size:12px;opacity:.7;margin-left:2px}
.help{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 300px);left:0;right:0;margin:auto;width:max-content;padding:8px 16px;border-radius:30px;font-weight:800;font-size:17px;opacity:0;transition:opacity .2s}
.speedfx{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,0) 38%,rgba(0,200,255,.10) 62%,rgba(0,0,0,.55) 100%);transition:opacity .15s}
/* ---------- premium controls ---------- */
.ctrl{position:fixed;left:0;right:0;bottom:0;height:250px;pointer-events:none}
.ctrl button{pointer-events:auto;border:none;color:#fff;font-weight:900;touch-action:none;font-family:inherit}
.lz,.rz{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 16px)}
.lz{left:12px}.rz{right:12px}
.pedal{--a:#00f0ff;--b:#00ff9c;--glow:rgba(0,240,255,.55);position:relative;width:min(29vw,118px);height:min(42vw,164px);border-radius:28px 28px 34px 34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;
 background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%),repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 9px,rgba(0,0,0,.28) 9px 12px),linear-gradient(160deg,#283246,#0a0e17 70%);
 box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 0 4px rgba(0,0,0,.55),0 0 0 6px var(--a),0 0 26px 4px var(--glow),0 12px 22px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -14px 24px rgba(0,0,0,.55);
 transition:transform .08s ease-out,box-shadow .12s,filter .12s;color:var(--a)}
.pedal .gl{position:absolute;left:8%;right:8%;top:5px;height:38%;border-radius:22px 22px 60% 60%;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
.pedal::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 120%,var(--glow),transparent 62%);opacity:.55;transition:opacity .12s;pointer-events:none}
.pedal .ic{width:46%;height:auto;filter:drop-shadow(0 0 8px var(--glow)) drop-shadow(0 2px 0 rgba(0,0,0,.6));position:relative}
.pedal b{font-size:clamp(15px,4.6vw,20px);letter-spacing:.08em;color:#fff;text-shadow:0 0 12px var(--glow),0 2px 0 rgba(0,0,0,.6);position:relative}
.pedal small{font-size:10px;font-weight:700;opacity:.8;color:#dfe8ff;position:relative;letter-spacing:.04em}
.pedal.down{transform:translateY(4px) scale(.94);filter:brightness(1.35) saturate(1.2);box-shadow:0 0 0 2px rgba(255,255,255,.2),0 0 0 4px rgba(0,0,0,.5),0 0 0 6px var(--b),0 0 44px 12px var(--glow),0 4px 10px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -6px 30px var(--glow)}
.pedal.down::after{opacity:1}
.pedal.brake{--a:#ff2d55;--b:#ff7a7a;--glow:rgba(255,40,80,.6);width:min(26vw,104px);height:min(36vw,140px)}
.pedal.gas[data-mode=GAS]{--a:#00f0ff;--b:#6dffcf;--glow:rgba(0,230,255,.6)}
.pedal.gas[data-mode=GO]{--a:#2bff7a;--b:#b6ffcf;--glow:rgba(40,255,120,.6);animation:pulse 0.9s ease-in-out infinite}
.pedal.gas[data-mode=THRUST]{--a:#ff9a1a;--b:#ffd36b;--glow:rgba(255,140,20,.65)}
@keyframes pulse{50%{box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 0 4px rgba(0,0,0,.55),0 0 0 6px var(--a),0 0 40px 10px var(--glow),0 12px 22px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -14px 24px rgba(0,0,0,.55)}}
#mainIc{display:flex;justify-content:center;width:100%;position:relative}
.rot{display:none;gap:12px}
.rb{--a:#b388ff;--b:#e0ccff;--glow:rgba(160,110,255,.6);position:relative;width:min(21vw,84px);height:min(21vw,84px);border-radius:50%;overflow:hidden;color:var(--a);
 background:linear-gradient(165deg,rgba(255,255,255,.18),rgba(255,255,255,0) 45%),radial-gradient(circle at 50% 40%,#2c2a4a,#0b0a18 72%);
 box-shadow:0 0 0 2px rgba(255,255,255,.14),0 0 0 4px rgba(0,0,0,.55),0 0 0 6px var(--a),0 0 22px 3px var(--glow),0 10px 18px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.35);transition:transform .08s,filter .12s,box-shadow .12s}
.rb .gl{position:absolute;left:14%;right:14%;top:4px;height:40%;border-radius:50% 50% 45% 45%;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
.rb .ic{width:58%;height:auto;filter:drop-shadow(0 0 8px var(--glow));position:relative}
.rb.down{transform:scale(.9);filter:brightness(1.4);box-shadow:0 0 0 2px rgba(255,255,255,.2),0 0 0 4px rgba(0,0,0,.5),0 0 0 6px var(--b),0 0 40px 10px var(--glow)}
.ctrl[data-mode=air] .brake{display:none}.ctrl[data-mode=air] .rot{display:flex}
.ctrl[data-mode=lights] .brake{opacity:.45;filter:saturate(.4)}
/* gauge */
.gauge{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 18px);width:min(36vw,150px);height:min(36vw,150px);transform:translateX(-50%);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);filter:drop-shadow(0 6px 16px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(0,200,255,.25))}
.gauge svg{width:100%;height:100%;display:block}
.gnum{position:absolute;left:0;right:0;top:54%;text-align:center;line-height:1}
.gnum b{display:block;font-size:clamp(24px,8vw,34px);font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(0,230,255,.7)}
.gnum small{font-size:10px;font-weight:800;letter-spacing:.14em;opacity:.7}
#gNeedle{transform-origin:100px 100px;transition:transform .05s linear}
.ctrl[data-mode=air] .gauge{transform:translateX(-50%) translateY(-150px) scale(.72)}
.gauge.hot .gnum b{color:#ffd0dc;text-shadow:0 0 16px rgba(255,45,110,.9)}
/* revive + ads */
.cta.revive{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15.5px;white-space:nowrap;padding:16px 12px;letter-spacing:.02em;background:linear-gradient(90deg,#00c2ff,#7a5cff 55%,#ff2d8a);box-shadow:0 6px 28px rgba(120,90,255,.6),inset 0 2px 0 rgba(255,255,255,.35);animation:rv 1.6s ease-in-out infinite}
@keyframes rv{50%{transform:scale(1.035);box-shadow:0 8px 36px rgba(120,90,255,.85),inset 0 2px 0 rgba(255,255,255,.35)}}
.cta:active{transform:scale(.96)}
.adov{position:fixed;inset:0;z-index:50;background:rgba(2,3,8,.92);display:flex;align-items:center;justify-content:center;animation:fi .2s}
.adov.out{opacity:0;transition:opacity .25s}
@keyframes fi{from{opacity:0}}
.adcard{width:min(86vw,340px);padding:26px 20px;border-radius:22px;text-align:center;background:linear-gradient(160deg,#141a2e,#070a14);border:1px solid rgba(140,180,255,.25);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.adtag{display:inline-block;padding:3px 10px;border-radius:6px;background:#ffc21a;color:#111;font-weight:900;font-size:12px;letter-spacing:.12em}
.adtitle{margin:14px 0;font-size:19px;font-weight:900}
.adring{position:relative;width:96px;height:96px;margin:6px auto}
.adring svg{width:100%;height:100%;transform:rotate(-90deg)}
.adring circle{fill:none;stroke-width:7}.adring .bg{stroke:rgba(255,255,255,.1)}.adring .fg{stroke:#00e5ff;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5}
.adring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900}
.adnote{margin-top:12px;font-size:12px;opacity:.6}
.countdown{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:96px;font-weight:900;pointer-events:none;text-shadow:0 0 30px rgba(0,230,255,.9),0 6px 0 rgba(0,0,0,.5);z-index:6}

/* ---------- v1.2 ---------- */
.coinchip{position:absolute;top:calc(env(safe-area-inset-top) + 16px);left:14px;padding:8px 14px;border-radius:22px;background:linear-gradient(180deg,rgba(60,40,0,.75),rgba(30,20,0,.6));border:1px solid rgba(255,194,26,.6);color:#ffd75a;font-weight:900;font-size:16px;box-shadow:0 0 14px rgba(255,194,26,.35)}
.stages{display:flex;gap:8px;justify-content:center;margin-bottom:12px;width:100%;max-width:370px}
.stg{flex:1;padding:8px 4px 6px;border-radius:14px;border:1px solid rgba(140,200,255,.3);background:linear-gradient(180deg,rgba(20,30,60,.8),rgba(8,10,24,.75));color:#fff;display:flex;flex-direction:column;align-items:center;gap:1px}
.stg b{font-size:13px;font-weight:900;letter-spacing:.05em}.stg small{font-size:10px;opacity:.8;white-space:nowrap}
.stg span{font-size:13px;letter-spacing:2px;color:rgba(255,255,255,.25)}.stg span i{font-style:normal}.stg span i.on{color:#ffc21a;text-shadow:0 0 6px #ffb000}
.stg.on{border-color:#22d3ff;box-shadow:0 0 0 2px rgba(34,211,255,.6),0 0 18px rgba(34,211,255,.45);background:linear-gradient(180deg,rgba(10,70,110,.85),rgba(8,20,40,.8))}
.stg.locked{opacity:.55;filter:grayscale(.6)}
.sw{position:relative}.sw em{position:absolute;left:-10px;right:-10px;bottom:-17px;font-style:normal;font-size:10px;font-weight:900;color:#ffd75a;white-space:nowrap}
.sw.locked{opacity:.75}.sw.locked::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.35)}
.sw.neon.on{box-shadow:0 0 0 3px #39ff14,0 0 16px #39ff14}.sw.gold.on{box-shadow:0 0 0 3px #ffc21a,0 0 16px #ffc21a}
.paint{margin-bottom:22px}
.stg-tag{position:absolute;top:calc(env(safe-area-inset-top) + 96px);left:0;right:0;text-align:center;font-size:11px;font-weight:900;letter-spacing:.3em;opacity:.6}
.bigtxt{position:absolute;top:17%;left:0;right:0;text-align:center;font-size:64px;font-weight:900;font-style:italic;letter-spacing:.04em;opacity:0;transform:scale(2.2);pointer-events:none;transition:opacity .25s,transform .25s;color:#fff}
.bigtxt small{display:block;font-size:24px;font-style:normal;letter-spacing:.02em;margin-top:4px}
.bigtxt.show{opacity:1;transform:scale(1);transition:transform .22s cubic-bezier(.2,1.6,.4,1),opacity .1s}
.bigtxt.palti{background:linear-gradient(180deg,#fff 15%,#ffe066 50%,#ff7a1a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(255,170,30,.9)) drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.bigtxt.combo{font-size:40px;color:#fff;text-shadow:0 0 22px #ff3db8,0 0 40px rgba(34,211,255,.8),0 3px 0 rgba(0,0,0,.5)}
.bigtxt.combo small{color:#ffd75a;font-size:28px;text-shadow:0 0 14px rgba(255,194,26,.9)}
body.slowmo #c{filter:saturate(1.25) contrast(1.06)}
body.slowmo .speedfx{opacity:.9!important;background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,0) 45%,rgba(255,160,40,.12) 70%,rgba(0,0,0,.6) 100%)}
.rstage{font-size:12px;font-weight:900;letter-spacing:.25em;color:#9fe6ff;margin-top:2px}
.rstars{font-size:52px;line-height:1;margin:4px 0 2px;letter-spacing:6px}
.rstars i{font-style:normal;color:rgba(255,255,255,.16);display:inline-block}
.rstars i.on{color:#ffc21a;text-shadow:0 0 16px rgba(255,180,0,.9),0 2px 0 #8a5a00;animation:starpop .45s cubic-bezier(.2,1.8,.4,1) both}
@keyframes starpop{0%{transform:scale(0) rotate(-40deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.rcoins{font-size:20px;font-weight:900;color:#ffd75a;margin:-2px 0 4px}.rcoins span{font-size:14px;color:rgba(255,230,160,.7);font-weight:700}
.runlock{margin:4px auto 6px;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,rgba(34,211,255,.25),rgba(57,255,136,.25));border:1px solid rgba(57,255,136,.6);font-weight:900;font-size:15px;animation:starpop .5s .9s both}
.res .card .rows{font-size:13px;gap:5px 8px;margin:6px 0}.res .card .rows div{padding:5px 9px}
.res .rt{font-size:30px}.res .rscore{font-size:46px;line-height:1.05}.res .tip{margin:4px 0 8px;font-size:13px}
body:has(#result:not(.hidden)) .stg-tag{display:none}
.rstage{text-shadow:0 1px 4px #000,0 0 8px #000}

body.resmode #hud{display:none}
body.adquiet [data-sb]{display:none!important;visibility:hidden!important;pointer-events:none!important}
.splink{display:block;margin:8px auto 0;background:none;border:0;color:rgba(230,237,255,.6);font-size:12px;text-decoration:underline;cursor:pointer;padding:6px}
.splink.hidden{display:none}


/* HAWA CONTROL glide button (above the main pedal) */
.glide{position:absolute;right:0;bottom:calc(min(42vw,164px) + 10px);width:min(29vw,118px);height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;background:linear-gradient(180deg,rgba(80,200,255,.32),rgba(40,90,200,.28));box-shadow:0 0 0 2px rgba(120,220,255,.55) inset,0 6px 16px rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.glide .gi{font-size:22px;line-height:1}
.glide .gt{display:flex;flex-direction:column;line-height:1.02;font-size:11px;letter-spacing:.04em;text-align:left}
.glide small{position:absolute;top:-8px;right:-6px;min-width:26px;padding:2px 6px;border-radius:10px;background:#ffcf33;color:#111;font-size:11px;font-weight:900;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.glide.locked{background:linear-gradient(180deg,rgba(60,66,90,.55),rgba(30,34,52,.55));box-shadow:0 0 0 2px rgba(255,255,255,.18) inset,0 6px 16px rgba(0,0,0,.45);color:rgba(255,255,255,.75)}
.glide.locked small{background:#ff3d6e;color:#fff}
.glide.down,.glide.active{transform:scale(.96);background:linear-gradient(180deg,rgba(0,240,255,.6),rgba(0,140,255,.5));box-shadow:0 0 0 2px #9ff inset,0 0 22px rgba(0,230,255,.8)}
.ctrl[data-mode=lights] .glide{opacity:.6}

/* fun: coin pop, tutorial tips, daily reward */
.mini span.pop{animation:cpop .28s ease-out}
@keyframes cpop{0%{transform:scale(1)}40%{transform:scale(1.45);color:#ffd84a;text-shadow:0 0 10px #ffb300}100%{transform:scale(1)}}
.tut{position:absolute;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 104px);margin:auto;max-width:360px;padding:9px 14px;border-radius:14px;background:rgba(10,16,34,.82);border:1px solid rgba(120,220,255,.45);font-size:14px;line-height:1.3;text-align:center;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;pointer-events:none}
.tut.show{opacity:1;transform:none}
.tut b{color:#7ff3ff}
.daily{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(2,3,10,.62);animation:dfade .2s ease-out}
.daily.out{opacity:0;transition:opacity .22s}
.dcard{width:min(86vw,320px);padding:22px 18px 18px;border-radius:22px;text-align:center;background:linear-gradient(180deg,#1a2350,#0b1028);box-shadow:0 0 0 2px rgba(255,216,74,.55) inset,0 18px 40px rgba(0,0,0,.6);animation:dpop .35s cubic-bezier(.2,1.4,.4,1)}
.dt{font-size:20px;font-weight:900;letter-spacing:.04em}
.dc{font-size:46px;font-weight:900;color:#ffd84a;margin:8px 0 4px;text-shadow:0 0 18px rgba(255,190,0,.6)}
.ds{font-size:13px;opacity:.8;margin-bottom:14px}
.dbtn{width:100%}
@keyframes dpop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes dfade{0%{opacity:0}100%{opacity:1}}



/* ===== v1.5: GAME STAGE + FIXED AD BOXES =====
   The whole game (3D canvas, HUD, buttons, menu, result) lives inside #stage. Ads live ONLY in the fixed bands/rails
   around it. Band sizes are set before any ad loads and do not change between menu, run and result, so nothing jumps
   and no ad can ever sit on the road or a button. (transform makes #stage the box for its position:fixed children.) */
:root{--st:0px;--sb:0px;--sl:0px;--sr:0px}
#stage{position:fixed;top:var(--st);bottom:var(--sb);left:var(--sl);right:var(--sr);overflow:hidden;transform:translateZ(0);contain:layout paint;z-index:1;isolation:isolate}
#c{z-index:0}
#flash,#speedfx{z-index:1}
#hud{z-index:2}
#lights{z-index:3}
.ctrl{z-index:4}
.screen{z-index:5}
.countdown{z-index:6}
.adband{position:fixed;display:none;align-items:center;justify-content:center;background:#03040a;z-index:2;overflow:hidden;contain:strict}
.adband.on{display:flex}
.adband.t{top:0;left:0;right:0;height:var(--st);align-items:flex-end;padding-bottom:2px}
.adband.b{bottom:0;left:0;right:0;height:var(--sb);align-items:flex-start;padding-top:2px}
.adband.l{left:0;top:var(--st);bottom:var(--sb);width:var(--sl)}
.adband.r{right:0;top:var(--st);bottom:var(--sb);width:var(--sr)}
.adslot{display:none;flex:0 0 auto;overflow:hidden;position:relative;border-radius:6px;background:rgba(255,255,255,.025)}
.adslot.on{display:block}
.adslot span{font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.45);border:1px dashed rgba(255,255,255,.2);border-radius:6px;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.adslot iframe{max-width:100%;max-height:100%}
.adov.hidden{display:none!important}
html.adbands body{background:#03040a}
/* short game area: squeeze menu / result so every button always stays on screen */
.screen.compact{padding-top:calc(env(safe-area-inset-top) + 14px)}
.screen.compact .how,.screen.compact .bestline{display:none}
.screen.compact .l1{font-size:34px}.screen.compact .l2{font-size:52px}.screen.compact .l3{margin-top:6px}
.res.compact .rows{display:none}
.res.compact .rt{font-size:26px}.res.compact .rscore{font-size:38px}
.screen.tight .tip,.screen.tight .rstage,.screen.tight .paint .plbl,.screen.tight .logo .l3{display:none}
.screen.tight .cta{padding:12px;font-size:19px;margin:4px 0}.screen.tight .cta.ghost{padding:9px;font-size:15px}
.screen.tight .l1{font-size:28px}.screen.tight .l2{font-size:42px}
body.gllost #stage::after{content:'Game dobara load ho raha hai…';position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#05060d;color:#fff;font-weight:900;font-size:18px;z-index:9}

/* v2: theme picker (Raat / Shaam / Din) */
.themes{display:flex;gap:8px;justify-content:center;margin-top:12px;width:100%;max-width:300px}
.th{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 4px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(8,10,24,.55);color:#e9f1ff;font:inherit;font-size:12px;letter-spacing:.06em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.th i{font-style:normal;font-size:15px}.th b{font-weight:900}
.th.on{border-color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08));box-shadow:0 0 14px rgba(140,200,255,.45)}
.th-night.on{box-shadow:0 0 16px rgba(180,90,255,.75);border-color:#c79bff}
.th-sunset.on{box-shadow:0 0 16px rgba(255,140,60,.8);border-color:#ffb36b}
.th-day.on{box-shadow:0 0 16px rgba(120,200,255,.8);border-color:#9fdcff}
body[data-theme=day] .screen{background:linear-gradient(180deg,rgba(6,16,40,.55) 0%,rgba(6,16,40,0) 34%,rgba(6,16,40,0) 58%,rgba(6,16,40,.6) 100%)}

/* v2: 9 liveries -> two compact rows */
.swatches{flex-wrap:wrap;gap:10px 12px;max-width:290px;margin:0 auto}
.sw{width:38px;height:38px}

/* v2.1 */
.mission{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 98px);margin:auto;width:max-content;max-width:92%;padding:5px 12px;border-radius:16px;background:rgba(8,12,28,.62);border:1px solid rgba(255,214,90,.45);color:#ffe28a;font-size:12.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tut{top:calc(env(safe-area-inset-top) + 132px)}
.tut i{font-style:normal;opacity:.6;font-size:12px;margin-right:4px}
.menumission{margin:4px 0 2px;padding:6px 14px;border-radius:16px;background:rgba(8,12,28,.55);border:1px solid rgba(255,214,90,.45);color:#ffe28a;font-size:13.5px;font-weight:800;text-align:center;max-width:330px}
.resmission{margin:2px 0 6px;font-size:13px;color:#ffe28a;font-weight:700;text-align:center}
.runlock{white-space:pre-line}
.langbtn{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:66px;height:44px;padding:0 12px;border-radius:22px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);color:#fff;font-size:15px;font-weight:800}
body[data-tut="1"] #btnMain,body[data-tut="3"] #btnMain{animation:tutPulse 1s ease-in-out infinite}
body[data-tut="2"] #btnL,body[data-tut="2"] #btnR{animation:tutPulse 1s ease-in-out infinite}
@keyframes tutPulse{0%,100%{box-shadow:0 0 0 0 rgba(127,243,255,.0)}50%{box-shadow:0 0 0 10px rgba(127,243,255,.55)}}
.screen.tight .menumission,.screen.tight .resmission{display:none}

#lights,.gauge,.speedfx,#spBtn,#ctrl .gauge,.how,#langBtn{display:none!important}

#mission,#menuMission,.menumission,.resmission,#resMission,.callout.mission{display:none!important}