*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#111;font-family:"Rubik","Segoe UI",Arial,sans-serif;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block}
.hidden{display:none!important}
#touchLayer{position:fixed;inset:0;z-index:5;touch-action:none}
#hud{position:fixed;inset:0;z-index:6;pointer-events:none}
.panel{position:absolute;background:rgba(20,30,50,.62);border:2px solid rgba(255,255,255,.25);border-radius:12px;padding:4px 10px;text-shadow:0 1px 2px #000}
.mono{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:embed}
#hudPos{top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));text-align:center;line-height:1}
#hudPos .lbl{font-size:11px;opacity:.8}
#posNum{font-size:34px;font-weight:800;color:#ffd23f}
#hudPos small{font-size:16px;opacity:.8}
#hudLap{top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);text-align:center}
#lapNum{font-size:13px;opacity:.9}#lapTime{font-size:22px;font-weight:700}
#hudTimes{top:max(8px,env(safe-area-inset-top));right:calc(max(10px,env(safe-area-inset-right)) + 160px);font-size:12px;line-height:1.5}
#hudTimes b{font-size:14px}
#minimap{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:150px;height:132px;background:rgba(20,30,50,.5);border-radius:12px;border:2px solid rgba(255,255,255,.25)}
#hudBat{top:calc(max(8px,env(safe-area-inset-top)) + 62px);left:max(10px,env(safe-area-inset-left));display:flex;align-items:center;gap:6px;font-size:13px;direction:ltr}
.batIcon{width:44px;height:16px;border:2px solid #fff;border-radius:3px;position:relative;padding:1px}
.batIcon:after{content:"";position:absolute;right:-6px;top:3px;width:4px;height:6px;background:#fff;border-radius:1px}
#batFill{height:100%;width:100%;background:#52d273;border-radius:1px;transition:width .2s}
#spd{font-weight:700;font-size:15px}
#toast{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:rgba(255,210,63,.92);color:#222;font-weight:700;padding:6px 16px;border-radius:20px;opacity:0;transition:opacity .4s;white-space:nowrap;font-size:15px}
#toast.show{opacity:1}
#warn{position:absolute;top:108px;left:50%;transform:translateX(-50%);color:#ff4d6d;font-weight:800;font-size:18px;text-shadow:0 0 6px #000,0 2px 2px #000;white-space:nowrap}
#warn.ok{color:#4cc9f0}
.hbtn{pointer-events:auto;position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 142px);width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(20,30,50,.6);color:#fff;font-size:20px}
#btnPause{right:calc(max(10px,env(safe-area-inset-right)) + 0px)}
#btnReset{right:calc(max(10px,env(safe-area-inset-right)) + 50px)}
.stick{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));width:150px;text-align:center;--kx:0px;--ky:0px}
#stickL{left:max(14px,env(safe-area-inset-left))}
#stickR{right:max(14px,env(safe-area-inset-right))}
.stick .lbl{font-size:12px;background:rgba(0,0,0,.45);display:inline-block;padding:2px 8px;border-radius:8px;margin-bottom:4px}
.gimbal{position:relative;width:118px;height:118px;margin:0 auto;border-radius:22px;background:linear-gradient(145deg,#3a3f47,#1f2328);border:3px solid #6c757d;box-shadow:inset 0 0 12px rgba(0,0,0,.7),0 3px 8px rgba(0,0,0,.5);opacity:.82}
.gimbal:before{content:"";position:absolute;inset:14px;border-radius:50%;border:2px solid rgba(255,255,255,.15);background:radial-gradient(circle,#2b2f35 40%,#15181c)}
.cross{position:absolute;inset:0}
.cross:before,.cross:after{content:"";position:absolute;background:rgba(255,255,255,.12);left:50%;top:18px;bottom:18px;width:2px;transform:translateX(-50%)}
.cross:after{top:50%;left:18px;right:18px;width:auto;height:2px;bottom:auto;transform:translateY(-50%)}
.knob{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9ecef,#868e96 60%,#495057);border:3px solid #212529;box-shadow:0 4px 6px rgba(0,0,0,.6);transform:translate(var(--kx),var(--ky));transition:transform .05s}
.knob:after{content:"";position:absolute;inset:8px;border-radius:50%;background:repeating-conic-gradient(#adb5bd 0 10deg,#6c757d 10deg 20deg);opacity:.6}
#countdown{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:8;pointer-events:none}
#countdown .cd{font:900 clamp(110px,34vh,190px)/1 'Arial Black',Impact,system-ui,sans-serif;letter-spacing:4px;color:#ff2d2d;-webkit-text-stroke:6px #ffe14d;paint-order:stroke fill;text-shadow:0 8px 0 #8a0f12,0 14px 24px rgba(0,0,0,.6);animation:cdpop .9s cubic-bezier(.2,1.6,.4,1) both;transform-origin:50% 60%}
#countdown .cd.go{color:#ff2d2d;font-size:clamp(130px,42vh,230px);animation:gopop .9s cubic-bezier(.2,1.8,.4,1) both}
#countdown .cd.n3,#countdown .cd.n2,#countdown .cd.n1{color:#fff;-webkit-text-stroke-color:#ff2d2d;text-shadow:0 8px 0 #8a0f12,0 14px 24px rgba(0,0,0,.6)}
@keyframes cdpop{0%{transform:scale(2.4);opacity:0}35%{transform:scale(.92);opacity:1}55%{transform:scale(1.05)}100%{transform:scale(1);opacity:.95}}
@keyframes gopop{0%{transform:scale(.2) rotate(-8deg);opacity:0}40%{transform:scale(1.15) rotate(2deg);opacity:1}70%{transform:scale(1)}100%{transform:scale(1.06);opacity:1}}
.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(13,27,42,.55),rgba(13,27,42,.82));overflow:auto}
.menuBox{width:min(96vw,860px);max-height:100vh;padding:8px 10px}
.menuHead{text-align:center;margin-bottom:6px}
h1{margin:0;font-size:34px;color:#ffd23f;text-shadow:0 3px 0 #e63946,0 6px 10px #000;letter-spacing:1px}
.tag{font-size:12px;background:#e63946;color:#fff;border-radius:6px;padding:1px 6px;vertical-align:middle}
.sub{font-size:13px;opacity:.9}
.menuBody{display:flex;gap:10px;align-items:stretch}
.trackCard,.pick{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:16px;padding:8px 12px}
.trackCard{flex:1.1;font-size:12.5px}.pick{flex:1}
.cardTitle{font-size:15px;margin-bottom:4px}
.sections{margin:4px 0;padding-inline-start:18px}.sections li{margin:3px 0}
.small{font-size:11.5px;opacity:.85}
.vehicles{display:flex;gap:8px}
.vcard{flex:1;background:rgba(0,0,0,.35);color:#fff;border:3px solid transparent;border-radius:14px;padding:6px;font:inherit;text-align:left;cursor:pointer}
.vcard.sel{border-color:#ffd23f;background:rgba(255,210,63,.18)}
.vicon{font-size:26px;text-align:center}.vname{font-weight:800;text-align:center;font-size:14px;margin-bottom:3px}
.stat{display:flex;align-items:center;gap:4px;font-size:11px;margin:2px 0}.stat span{width:46px}
.stat i{flex:1;height:7px;border-radius:4px;background:linear-gradient(90deg,#ffd23f var(--v),rgba(255,255,255,.15) var(--v))}
.vnote{font-size:10.5px;opacity:.8;margin-top:3px;text-align:center}
button.big{display:block;width:100%;margin-top:8px;padding:10px;font:inherit;font-size:18px;font-weight:800;border:none;border-radius:14px;background:linear-gradient(#ff6b6b,#e63946);color:#fff;box-shadow:0 4px 0 #9d0208;cursor:pointer}
button.big:active{transform:translateY(3px);box-shadow:0 1px 0 #9d0208}
button.big.alt{background:linear-gradient(#4f6d8f,#1d3557);box-shadow:0 4px 0 #0d1b2a}
button.link{background:none;border:none;color:#bde0fe;text-decoration:underline;font:inherit;font-size:13px;margin-top:6px;cursor:pointer;display:block;margin-inline:auto}
#help,#credits{position:absolute;inset:6% 8%;background:#0d1b2a;border:2px solid #ffd23f;border-radius:16px;padding:10px 18px;font-size:13px;overflow:auto;z-index:2}
#help h3,#credits h3{margin:4px 0;color:#ffd23f}
.dialog{background:rgba(13,27,42,.95);border:2px solid #ffd23f;border-radius:18px;padding:12px 22px;min-width:280px;text-align:center;max-height:96vh;overflow:auto}
.dialog.wide{min-width:min(94vw,640px)}
.dialog h2{margin:2px 0 8px;color:#ffd23f}
.row{display:flex;gap:10px}.row button{flex:1}
#results{width:100%;border-collapse:collapse;font-size:13px}
#results th{font-size:11px;opacity:.75;font-weight:600;padding:2px 4px}
#results td{padding:4px;border-top:1px solid rgba(255,255,255,.15)}
#results tr.me td{color:#ffd23f;font-weight:800}
#balance{margin-top:6px}
#rotate{display:none;position:fixed;inset:0;z-index:50;background:#0d1b2a;color:#ffd23f;font-size:22px;font-weight:800;flex-direction:column;align-items:center;justify-content:center;gap:10px}
#rotate div:first-child{font-size:60px}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}
@media (max-height:420px){h1{font-size:26px}.sub{font-size:11px}.trackCard{font-size:11.5px}button.big{padding:7px;font-size:16px}.vicon{font-size:20px}}

/* v2: weapon slot + action buttons */
/* v3.2: the weapon slot IS the fire button – bottom left, right of the left stick, thumb-sized */
#wslot{pointer-events:auto;top:auto;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 108px);right:calc(max(14px,env(safe-area-inset-right)) + 158px);left:auto;width:96px;height:90px;box-sizing:border-box;
  text-align:center;padding:6px 6px 4px;border-radius:20px;border:3px solid rgba(255,255,255,.45);color:#fff;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-shadow:0 4px 0 rgba(0,0,0,.45),0 0 10px rgba(0,0,0,.4);transition:transform .08s,box-shadow .15s,background .15s;touch-action:none;cursor:pointer}
#wicon{font-size:38px;line-height:44px;height:44px;filter:drop-shadow(0 2px 2px #000);pointer-events:none}
#wname{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px;pointer-events:none}
#wtap{font-size:10px;font-weight:900;letter-spacing:1px;opacity:0;height:12px;pointer-events:none}
#wslot.empty{opacity:.6}#wslot.empty #wicon{color:#bbb}
#wslot.rolling{border-color:#ffd23f;animation:wshake .12s infinite}
#wslot.ready{opacity:1;border-color:#7dff9a;background:radial-gradient(circle at 50% 35%,rgba(82,210,115,.55),rgba(20,60,40,.85));animation:wpulse 1s ease-in-out infinite}
#wslot.ready #wtap{opacity:1;color:#d9ffe2}
#wslot.down{transform:translateY(3px) scale(.93);box-shadow:0 1px 0 rgba(0,0,0,.45),0 0 6px #52d273;animation:none}
@keyframes wpulse{0%,100%{box-shadow:0 4px 0 rgba(0,0,0,.45),0 0 10px 2px rgba(82,210,115,.7);transform:scale(1)}50%{box-shadow:0 4px 0 rgba(0,0,0,.45),0 0 26px 9px rgba(125,255,154,.95);transform:scale(1.06)}}
@keyframes wshake{0%{transform:translateX(-1px)}50%{transform:translateX(1px)}}
.abtn{pointer-events:auto;position:absolute;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 18px);width:76px;height:76px;border-radius:50%;border:3px solid rgba(255,255,255,.75);color:#fff;font:inherit;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(0,0,0,.45),0 0 12px rgba(0,0,0,.4);touch-action:none;padding:0;opacity:.9}
.abtn b{font-size:24px;line-height:26px}.abtn span{font-size:12px;letter-spacing:1px}
.abtn.jump{right:calc(max(14px,env(safe-area-inset-right)) + 168px);background:radial-gradient(circle at 40% 35%,#8ad8ff,#0077b6)}
.abtn.off{filter:grayscale(.85);opacity:.5}
.abtn.down{transform:translateY(3px) scale(.95);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.vehicles{flex-wrap:wrap;gap:5px}
.vcard{flex:1 1 30%;min-width:0;padding:3px 5px;border-width:2px}
.vcard .vicon{font-size:20px}.vcard .vname{font-size:11.5px;margin-bottom:1px}
.vcard .stat{font-size:9.5px;margin:1px 0}.vcard .stat span{width:44px}
.vcard .vnote{font-size:9px;line-height:1.15}
.wtip{margin-top:4px;color:#ffe9a8}
@media (max-height:420px){.vcard .vnote{display:none}.vcard .vicon{font-size:17px}}
#speedlines{position:fixed;inset:-5%;pointer-events:none;z-index:4;opacity:0;transition:opacity .25s;background:repeating-conic-gradient(from 0deg at 50% 55%,rgba(255,255,255,0) 0deg 5deg,rgba(255,255,255,.55) 5deg 5.5deg,rgba(255,255,255,0) 5.5deg 11deg,rgba(160,230,255,.45) 11deg 11.4deg);-webkit-mask:radial-gradient(circle at 50% 55%,transparent 30%,#000 75%);mask:radial-gradient(circle at 50% 55%,transparent 30%,#000 75%)}
#speedlines.on{opacity:.85;animation:slz .12s linear infinite}
@keyframes slz{0%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.05) rotate(1.5deg)}100%{transform:scale(1) rotate(0deg)}}

/* v3.1: iOS touch hardening + rescue fade */
#touchLayer,#hud,#hud *,.abtn,.hbtn,#wslot,canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
.hbtn{touch-action:manipulation}
#rescueFx{position:fixed;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(255,255,255,0) 20%,rgba(255,255,255,.85) 75%);opacity:0;transition:opacity .25s}
#rescueFx.on{opacity:1}
.vcard .vflav{font-size:9.5px;opacity:.85;margin-top:2px}
/* v3.3: weapon slot sits directly above JUMP (same column, 14px gap); bolt-gear crate icon */
#wicon .boltgear{width:44px;height:44px;display:block;margin:2px auto}
#wname{max-width:88px}

/* v3.5 speedometer: arc gauge + digital readout */
#hudBat{min-width:92px;padding:2px 8px 4px;text-align:center;flex-direction:column;gap:0}
#hudBat .gauge{display:block;width:84px;height:48px;margin:0 auto -18px}
#hudBat .gTrack{fill:none;stroke:rgba(255,255,255,.18);stroke-width:8;stroke-linecap:round}
#hudBat .gArc{fill:none;stroke:#ffd23f;stroke-width:8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .12s linear,stroke .2s}
#hudBat.turbo .gArc{stroke:#4cc9f0;filter:drop-shadow(0 0 4px #4cc9f0)}
#hudBat .gRead{position:relative;line-height:1}
#hudBat #spd{font-size:20px;font-weight:800}
#hudBat small{display:block;font-size:9px;opacity:.75}

/* v3.9 online lobby */
#online{z-index:12}
#online .dialog{max-width:min(94vw,560px)}
.joinRow{display:flex;gap:8px;align-items:stretch;margin-top:8px}
.joinRow input{flex:1;min-width:0;font:inherit;font-size:24px;font-weight:900;letter-spacing:6px;text-align:center;text-transform:uppercase;border-radius:12px;border:2px solid #ffd23f;background:#0d1b2a;color:#fff;padding:6px;margin-top:8px}
.joinRow button.big{width:auto;flex:0 0 38%}
.err{color:#ff8c8c;min-height:1em;margin-top:4px}
.codeBox{font-size:15px;margin:2px 0 6px}.codeBox b{font-size:32px;letter-spacing:6px;color:#ffd23f;margin:0 6px;font-family:ui-monospace,monospace}
#lobbyList{list-style:none;padding:0;margin:4px 0 8px;text-align:left}
#lobbyList li{display:flex;align-items:center;gap:8px;padding:4px 8px;margin:3px 0;background:rgba(255,255,255,.08);border-radius:10px;font-size:14px}
#lobbyList .dot{width:14px;height:14px;border-radius:50%;flex:0 0 14px;border:2px solid #fff}
#lobbyList .nm{font-weight:800;flex:1}#lobbyList .lk{font-size:11px;opacity:.75}
#lobbyList li.me{outline:2px solid #ffd23f}#lobbyList li.bot{opacity:.7}
.onVeh{display:flex;gap:6px;justify-content:center;margin:4px 0}
.onVeh button{font:inherit;font-size:24px;background:rgba(0,0,0,.35);border:2px solid transparent;border-radius:10px;color:#fff;padding:2px 8px;cursor:pointer}
.onVeh button.sel{border-color:#ffd23f;background:rgba(255,210,63,.2)}
#hostOpts select{font:inherit;border-radius:8px;padding:2px 4px}
#btnOnStart:disabled{opacity:.45;filter:grayscale(.6)}

/* ================= v4.0 "Toy Garage" title + HUD ================= */
@font-face{font-family:"Lilita One";src:url(fonts/LilitaOne-Regular.woff) format("woff");font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/Fredoka.woff) format("woff");font-weight:300 700;font-display:swap}
@font-face{font-family:"Caveat";src:url(fonts/Caveat.woff) format("woff");font-display:swap}
:root{--tz-cream:#fbf3e4;--tz-cream-2:#f1e3c8;--tz-ink:#2b2420;--tz-ink-soft:#6b5a4c;--tz-red:#e5483d;--tz-red-d:#a92b22;--tz-coral:#ff7a59;--tz-teal:#1fa7a0;--tz-teal-d:#137a75;--tz-sun:#ffd166;--tz-orange:#ff9a1f;
  --tz-r:18px;--tz-shadow:0 10px 28px rgba(43,24,10,.35),0 2px 0 rgba(255,255,255,.6) inset;--tz-display:"Lilita One","Arial Black",system-ui,sans-serif;--tz-body:"Fredoka","Rubik","Segoe UI",Arial,sans-serif;--tz-hand:"Caveat","Comic Sans MS",cursive;
  --tz-ease:cubic-bezier(.2,.9,.25,1.15)}
#menu.overlay{background:radial-gradient(120% 90% at 30% 55%,rgba(0,0,0,0) 55%,rgba(30,14,4,.45));display:block;overflow:hidden;font-family:var(--tz-body)}
.title{position:absolute;inset:0;padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.title button{font-family:inherit;cursor:pointer}
.logo{position:absolute;top:max(14px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));transform:rotate(-3deg);transform-origin:left top;line-height:.86}
.logoWord{display:flex;align-items:flex-end;gap:8px;font:clamp(40px,6.4vw,84px)/.9 var(--tz-display);letter-spacing:1px;color:#fff;-webkit-text-stroke:clamp(5px,.7vw,9px) var(--tz-ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--tz-ink),0 12px 22px rgba(0,0,0,.35)}
.logoWord.lw2{color:var(--tz-orange);margin-left:clamp(18px,2.4vw,34px)}
.logo .flag{width:clamp(34px,4.2vw,56px);margin-bottom:.12em;filter:drop-shadow(0 4px 0 var(--tz-ink));transform-origin:3px 100%;animation:flagWave 2.6s ease-in-out infinite}
@keyframes flagWave{50%{transform:rotate(-6deg) skewY(-3deg)}}
.tagline{margin:10px 0 0 clamp(26px,3vw,44px);font:600 clamp(13px,1.35vw,19px) var(--tz-body);color:#fff;text-shadow:0 2px 0 var(--tz-ink),0 0 8px rgba(0,0,0,.4);transform:rotate(1deg)}
.tagline .tag{font-family:var(--tz-body);background:var(--tz-teal);margin-left:6px}
.topIcons{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));display:flex;gap:10px}
.iconBtn{width:48px;height:48px;border-radius:50%;border:3px solid var(--tz-ink);background:var(--tz-cream);color:var(--tz-ink);display:grid;place-items:center;padding:0;box-shadow:0 4px 0 var(--tz-ink);transition:transform .15s var(--tz-ease)}
.iconBtn svg{width:26px;height:26px}.iconBtn:hover{transform:translateY(-2px)}.iconBtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tz-ink)}
.iconBtn.sm{width:32px;height:32px;border-width:2px;box-shadow:0 2px 0 var(--tz-ink)}.iconBtn.sm svg{width:17px;height:17px}
#btnSound .mute{display:none}#btnSound.off .mute{display:inline}#btnSound.off .waves{display:none}
.garageCard{position:absolute;right:max(22px,env(safe-area-inset-right));top:clamp(84px,13vh,128px);width:clamp(270px,28vw,410px);background:var(--tz-cream);color:var(--tz-ink);border-radius:var(--tz-r);padding:30px 20px 14px;box-shadow:var(--tz-shadow);border:3px solid var(--tz-ink)}
.gTab{position:absolute;top:-18px;left:16px;background:var(--tz-red);color:#fff;font:clamp(15px,1.4vw,20px) var(--tz-display);letter-spacing:1px;padding:5px 14px 5px 10px;border-radius:10px;border:3px solid var(--tz-ink);display:flex;align-items:center;gap:6px;box-shadow:0 3px 0 var(--tz-ink)}
.gTab svg{width:18px;height:18px}
.gName{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:2px dashed var(--tz-cream-2);padding-bottom:8px;margin-bottom:8px}
.gName h2{margin:0;font:clamp(20px,2.3vw,34px)/1.05 var(--tz-display);letter-spacing:.5px;color:var(--tz-ink)}
.gNote{font-size:13px;color:var(--tz-ink-soft);margin:-2px 0 8px}
.gStat{display:grid;grid-template-columns:24px 92px 1fr;align-items:center;gap:8px;margin:9px 0;font:700 clamp(13px,1.1vw,15px) var(--tz-body);letter-spacing:.6px}
.gStat svg{width:22px;height:22px;color:var(--tz-ink)}
.bar{height:14px;border-radius:8px;background:var(--tz-cream-2);box-shadow:inset 0 2px 0 rgba(0,0,0,.08);overflow:hidden;display:block}
.bar b{display:block;height:100%;width:var(--v,50%);border-radius:8px;transition:width .5s var(--tz-ease)}
.bar.coral b{background:linear-gradient(90deg,#ff9b6a,var(--tz-coral))}.bar.teal b{background:linear-gradient(90deg,#3cc7bd,var(--tz-teal))}
.gFoot{font-size:11.5px;color:var(--tz-ink-soft);margin-top:8px}
.trackCard2{position:absolute;right:max(22px,env(safe-area-inset-right));top:calc(clamp(84px,13vh,128px) + clamp(250px,30vh,300px));width:clamp(270px,28vw,410px);padding:8px;background:var(--tz-cream);border:3px solid var(--tz-ink);border-radius:var(--tz-r);box-shadow:var(--tz-shadow);color:var(--tz-ink);text-align:left}
.trackCard2 img{display:block;width:100%;height:auto;aspect-ratio:480/210;object-fit:cover;border-radius:11px;background:#9fc77a}
.tName{display:flex;align-items:center;gap:8px;padding:8px 4px 2px;font:clamp(15px,1.4vw,19px) var(--tz-display);letter-spacing:.5px}
.tName svg{width:22px;height:22px;color:var(--tz-teal)}.tName .chev{margin-left:auto;color:var(--tz-ink);transition:transform .2s}
.trackCard2:hover .chev{transform:translateX(4px)}
.picker{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;max-width:calc(100% - clamp(420px,40vw,600px))}
.arrow{flex:none;width:46px;height:46px;border-radius:50%;border:3px solid var(--tz-ink);background:var(--tz-teal);color:#fff;display:grid;place-items:center;padding:0;box-shadow:0 4px 0 var(--tz-teal-d),0 4px 0 2px var(--tz-ink)}
.arrow svg{width:24px;height:24px}.arrow:active{transform:translateY(3px)}
#menu .vehicles{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;scrollbar-width:none;padding:6px 4px}
#menu .vehicles::-webkit-scrollbar{display:none}
#menu .vcard{flex:none;width:clamp(96px,8.5vw,128px);padding:0;border:3px solid var(--tz-ink);background:var(--tz-cream);border-radius:16px;color:var(--tz-ink);text-align:center;overflow:hidden;box-shadow:0 4px 0 rgba(43,36,32,.6);transition:transform .2s var(--tz-ease),box-shadow .2s}
#menu .vcard:hover{transform:translateY(-3px)}
#menu .vcard.sel{border-color:var(--tz-red);box-shadow:0 0 0 3px var(--tz-red),0 6px 0 var(--tz-red-d);transform:translateY(-4px);background:#fff}
.vthumb{display:grid;place-items:center;aspect-ratio:3/2;background:radial-gradient(circle at 50% 70%,#fff8ea,#efdcb8)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}.vthumb .vicon{font-size:32px}
#menu .vcard .vname{display:block;font:700 12.5px var(--tz-body);padding:3px 4px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.handNote{position:absolute;left:calc(max(22px,env(safe-area-inset-left)) + 60px);bottom:calc(max(18px,env(safe-area-inset-bottom)) + clamp(124px,11.5vw,160px));font:700 clamp(22px,2.2vw,32px) var(--tz-hand);color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.6);transform:rotate(-4deg)}
.handNote svg{display:block;width:70%;height:10px}
.ctaRow{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.pill{border:3px solid var(--tz-ink);border-radius:999px;font:clamp(16px,1.5vw,20px) var(--tz-display);letter-spacing:.6px;padding:10px 18px;color:#fff;background:var(--tz-teal);box-shadow:0 5px 0 var(--tz-ink);transition:transform .15s var(--tz-ease)}
.pill:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tz-ink)}
.pill.race{display:flex;align-items:center;gap:12px;font-size:clamp(24px,3vw,46px);padding:clamp(10px,1.3vw,18px) clamp(22px,3vw,44px);background:linear-gradient(180deg,#ff7d6b,var(--tz-red));box-shadow:0 7px 0 var(--tz-red-d),0 7px 0 3px var(--tz-ink),0 16px 30px rgba(0,0,0,.35);text-shadow:0 3px 0 var(--tz-red-d)}
.pill.race svg{width:.9em;height:.9em;transform:rotate(-8deg)}
@media (prefers-reduced-motion:no-preference){.pill.race{animation:raceGlow 2.4s ease-in-out infinite}}
@keyframes raceGlow{50%{filter:brightness(1.08) drop-shadow(0 0 14px rgba(255,140,110,.75))}}
@keyframes racePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.creditsLink{position:absolute;left:50%;bottom:max(4px,env(safe-area-inset-bottom));transform:translateX(-50%);background:none;border:none;color:rgba(255,255,255,.8);font:600 12px var(--tz-body);text-decoration:underline;padding:4px 8px}
.sheet{position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,520px);max-height:92vh;overflow:auto;background:var(--tz-cream);color:var(--tz-ink);border:3px solid var(--tz-ink);border-radius:var(--tz-r);padding:16px 20px;box-shadow:var(--tz-shadow);z-index:3;font-family:var(--tz-body)}
.sheet h3{margin:0 0 8px;font:24px var(--tz-display);color:var(--tz-red)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:2px dashed var(--tz-cream-2);font-weight:600}
.srow input[type=range]{width:50%;accent-color:var(--tz-teal)}.srow input[type=checkbox]{width:22px;height:22px;accent-color:var(--tz-teal)}
.sheet button.big{font-family:var(--tz-display);letter-spacing:.5px}
#menu #help,#menu #credits{background:var(--tz-cream);color:var(--tz-ink);border:3px solid var(--tz-ink);z-index:4}
#menu #help h3,#menu #credits h3{color:var(--tz-red);font-family:var(--tz-display)}
#menu #help a,#menu #credits a{color:var(--tz-teal-d)}
:focus-visible{outline:3px solid var(--tz-sun);outline-offset:3px}
/* compact phone landscape (844x390 etc.) */
@media (max-height:500px){
  .logoWord{font-size:clamp(28px,5vw,44px);-webkit-text-stroke-width:5px}.tagline{margin-top:4px;font-size:12px}
  .iconBtn{width:38px;height:38px}.iconBtn svg{width:20px;height:20px}
  .garageCard{top:64px;width:250px;padding:20px 12px 8px}.gTab{top:-15px;font-size:13px}.gName h2{font-size:18px}.gName{padding-bottom:4px;margin-bottom:4px}
  .gStat{margin:3px 0;font-size:11px;grid-template-columns:18px 70px 1fr}.gStat svg{width:18px;height:18px}.gFoot{display:none}
  .trackCard2{top:auto;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 64px);width:250px;padding:5px;display:flex;align-items:center;gap:6px}.trackCard2 img{width:76px;aspect-ratio:4/3}.tName{font-size:13px;padding:0;flex:1}
  .picker{bottom:max(10px,env(safe-area-inset-bottom));gap:6px}.arrow{width:36px;height:36px}#menu .vcard{width:84px}.vthumb .vicon{font-size:22px}#menu .vcard .vname{font-size:11px;padding:1px 3px 3px}
  .handNote{display:none}.ctaRow{bottom:max(10px,env(safe-area-inset-bottom))}.pill{padding:7px 12px;font-size:14px}.pill.race{font-size:22px;padding:8px 18px}
  .creditsLink{left:max(14px,env(safe-area-inset-left));top:104px;bottom:auto;transform:none}
  .picker{max-width:calc(100% - 400px)}#btnOnline{padding:7px 10px}
}
/* portrait phones (390x844): car on top, cards stacked below */
@media (max-aspect-ratio:1/1){
  .garageCard{top:auto;right:16px;left:16px;width:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 236px);padding:24px 14px 10px}
  .gFoot{display:none}
  .trackCard2{top:auto;left:16px;right:16px;width:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 168px);display:flex;align-items:center;gap:8px;padding:5px}.trackCard2 img{width:90px;aspect-ratio:4/3}.tName{padding:0;flex:1;font-size:15px}
  .picker{left:10px;right:10px;max-width:none;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 70px)}#menu .vcard{width:84px}
  .handNote{display:none}.ctaRow{left:16px;right:16px;justify-content:space-between}.pill.race{font-size:24px}
  .creditsLink{bottom:max(2px,env(safe-area-inset-bottom))}
  .logoWord{font-size:44px}.topIcons{top:max(14px,env(safe-area-inset-top))}.iconBtn{width:40px;height:40px}
}
/* ---- v4.0 race HUD (reference layout: position top-left, name+timer top-centre, LAP top-right; centre kept clear) ---- */
#hud{font-family:var(--tz-body)}
#hud .panel{background:rgba(24,18,14,.62);border:2.5px solid rgba(255,255,255,.85);border-radius:16px;box-shadow:0 4px 0 rgba(0,0,0,.35);backdrop-filter:blur(3px)}
#hudPos{padding:4px 14px 6px}
#posNum{font:clamp(40px,5vw,58px)/1 var(--tz-display);color:var(--tz-sun);-webkit-text-stroke:2px var(--tz-ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--tz-ink)}
#hudPos small{font:clamp(20px,2.4vw,28px) var(--tz-display);opacity:1;color:#fff}
#hudPos .lbl{font:700 10.5px var(--tz-body);letter-spacing:2px;opacity:.9;margin-top:1px}
#hudCenter{position:absolute;top:max(6px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;align-items:center}
#hudName{background:var(--tz-red);border:2.5px solid #fff;border-radius:10px;padding:2px 16px;font:clamp(13px,1.3vw,17px) var(--tz-display);letter-spacing:1px;text-transform:uppercase;box-shadow:0 3px 0 rgba(0,0,0,.35)}
#lapTime{margin-top:3px;font:clamp(22px,2.4vw,30px)/1 var(--tz-display);letter-spacing:1px;color:#fff;-webkit-text-stroke:1.5px var(--tz-ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--tz-ink),0 0 10px rgba(0,0,0,.4)}
#hudTimes{position:static;display:flex;gap:10px;font:600 11px var(--tz-body);margin-top:3px;background:rgba(24,18,14,.5);border-radius:10px;padding:1px 10px;text-shadow:0 1px 2px #000}
#hudTimes b{font-size:12px}
#hudLap{left:auto;transform:none;right:calc(max(10px,env(safe-area-inset-right)) + 160px);padding:6px 14px;text-align:center}
#lapNum{font:clamp(18px,2vw,24px) var(--tz-display);letter-spacing:1px;opacity:1}#lapNum b{font-size:1.45em;color:var(--tz-sun);-webkit-text-stroke:1.5px var(--tz-ink);paint-order:stroke fill}
#minimap{border-radius:16px;border:2.5px solid rgba(255,255,255,.85);background:rgba(24,18,14,.45)}
#hudBat{top:calc(max(8px,env(safe-area-inset-top)) + 92px)}
#toast{top:auto;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 150px);font-family:var(--tz-body);background:rgba(255,209,102,.95);border:2px solid var(--tz-ink)}
#warn{top:auto;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 188px)}
@media (max-height:500px){#posNum{font-size:36px}#hudPos small{font-size:18px}#lapTime{font-size:20px}#hudTimes{display:none}#hudBat{top:calc(max(8px,env(safe-area-inset-top)) + 72px)}#hudLap{padding:3px 10px}#lapNum{font-size:15px}#toast{bottom:auto;top:84px}#warn{bottom:auto;top:116px}}
/* WebGL failure overlay */
#glErr{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#2b2420;color:#fbf3e4;font-family:"Fredoka",Arial,sans-serif;text-align:center;padding:24px}
#glErr h2{font:32px "Lilita One",Arial Black,sans-serif;color:#ffd166;margin:0 0 8px}#glErr button{margin-top:14px;font:20px "Lilita One",Arial Black,sans-serif;padding:10px 26px;border-radius:999px;border:3px solid #fbf3e4;background:#e5483d;color:#fff}
/* v4.0.1 phone-landscape title fixes (short heights, notch safe areas) */
#menu .title{height:100dvh;bottom:auto}
@supports not (height:100dvh){#menu .title{height:100%}}
@media (max-height:500px) and (min-aspect-ratio:1/1){
  .title{--sl:max(16px,env(safe-area-inset-left));--sr:max(16px,env(safe-area-inset-right));--sb:calc(max(10px,env(safe-area-inset-bottom)) + clamp(6px,5dvh,24px));--st:max(10px,env(safe-area-inset-top))}
  .logo{top:calc(var(--st) + 6px);left:var(--sl)}
  .logoWord{font-size:clamp(26px,4.6vw,40px)}.tagline{font-size:clamp(11px,1.4vw,13px)}
  .topIcons{top:var(--st);right:var(--sr);gap:8px}
  .iconBtn{width:clamp(36px,9.5vh,40px);height:clamp(36px,9.5vh,40px)}
  .creditsLink{top:calc(var(--st) + 8px);bottom:auto;left:auto;right:calc(var(--sr) + 140px);transform:none;font-size:12px;min-height:32px;text-shadow:0 1px 2px rgba(0,0,0,.7)}
  .garageCard{right:var(--sr);top:calc(var(--st) + clamp(52px,14vh,62px));width:clamp(220px,30vw,260px)}
  .gStat{font-size:12px}.gName h2{font-size:clamp(16px,4.6vh,19px)}
  .trackCard2{right:var(--sr);width:clamp(220px,30vw,260px);bottom:calc(var(--sb) + clamp(54px,15vh,64px))}
  .tName{font-size:clamp(12px,3.4vh,14px)}
  .ctaRow{right:var(--sr);bottom:var(--sb);gap:8px}
  .pill{font-size:14px;padding:7px 12px}.pill.race{font-size:clamp(18px,5.6vh,22px);padding:7px clamp(12px,2vw,18px)}
  .picker{left:var(--sl);bottom:var(--sb);gap:6px;max-width:calc(100% - var(--sl) - var(--sr) - 322px)}
  #menu .vehicles{gap:8px;padding:6px 2px}
  #menu .vcard{width:clamp(70px,18vh,84px)}
}
@media (max-height:380px) and (min-aspect-ratio:1/1){
  .tagline{display:none}
  .gStat{margin:2px 0}.garageCard{padding:18px 10px 6px}
}