/* GrowBlocks GP: HUD and menus. Loaded after arena-screens.css. Theme: body[data-theme="kart"].
   Sizes run on one unit, --u (1 at 1280x720, set by hud.js from the HUD root's size), so the broadcast keeps its
   proportions from a 640x360 phone to a 2560x1440 monitor. Numbers: "Saira Condensed" (Google Fonts), tabular. */
body[data-theme="kart"]{--a-accent:#ff2e4d;--a-accent2:#ffe16b;
 --k-navy:#0f1a3d;--k-ink:#f5f2df;--k-dim:#8fa4cf;--k-lime:#baff38;--k-cyan:#53edff;--k-pink:#ff5fb4;--k-gold:#ffe16b;--k-red:#ff2e4d;
 --k-purple:#b45cff;--k-green:#22d46a;--k-yellow:#ffd21f;
 --k-num:"Saira Condensed","Arial Narrow",Nunito,sans-serif;--k-disp:Launch,"Lilita One",Nunito,sans-serif}

/* ================= HUD root ================= */
.kh-root{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;--u:1;
 --sl:max(calc(var(--u)*22px),env(safe-area-inset-left));--sr:max(calc(var(--u)*22px),env(safe-area-inset-right));
 --st:max(calc(var(--u)*20px),env(safe-area-inset-top));--sb:max(calc(var(--u)*20px),env(safe-area-inset-bottom));
 --pbg:linear-gradient(180deg,rgba(20,30,68,.92),rgba(9,13,32,.92));--pline:rgba(130,160,240,.22);
 font-family:Nunito,system-ui,sans-serif;color:var(--k-ink,#f5f2df);-webkit-user-select:none;user-select:none}
.kh-root *{box-sizing:border-box}
.kh-race{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.kh-root[data-view="race"] .kh-race{opacity:1;visibility:visible;transition:opacity .3s}
.kh-root[data-view="pause"] .kh-race{opacity:.14;visibility:visible}
.kh-root[data-view="pause"] .kh-tower,.kh-root[data-view="pause"] .kh-map,.kh-root[data-view="pause"] .kh-top{opacity:0}
.kh-num,.kh-root b{font-variant-numeric:tabular-nums}

/* ---------- timing tower (top-left) ---------- */
.kh-tower{position:absolute;left:var(--sl);top:var(--st);width:calc(var(--u)*244px);--rh:calc(var(--u)*27px);border-radius:calc(var(--u)*10px);
 box-shadow:0 calc(var(--u)*6px) calc(var(--u)*16px) rgba(0,0,0,.35)}
.kh-th{display:flex;align-items:center;gap:calc(var(--u)*10px);height:calc(var(--u)*34px);padding:0 calc(var(--u)*10px) 0 0;
 background:linear-gradient(90deg,#0b1129,#17234f);border-radius:calc(var(--u)*10px) calc(var(--u)*10px) 0 0;border-bottom:calc(var(--u)*3px) solid var(--k-red)}
.kh-logo{display:flex;align-items:center;height:100%;padding:0 calc(var(--u)*10px);font:400 calc(var(--u)*17px)/1 var(--k-disp);color:#fff;letter-spacing:.02em;
 background:rgba(255,255,255,.06);border-radius:calc(var(--u)*10px) 0 0 0}
.kh-logo b{margin-left:calc(var(--u)*4px);padding:calc(var(--u)*2px) calc(var(--u)*5px);border-radius:calc(var(--u)*4px);background:var(--k-red);font:400 calc(var(--u)*14px)/1 var(--k-disp);transform:skewX(-8deg)}
.kh-track{flex:1;min-width:0;font:700 calc(var(--u)*13px)/1 var(--k-num);letter-spacing:.14em;text-transform:uppercase;color:#c0cfe9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kh-rows{position:relative;height:calc(var(--n,8)*var(--rh));transition:height .3s;background:rgba(9,13,32,.82);border-radius:0 0 calc(var(--u)*10px) calc(var(--u)*10px);overflow:hidden}
.kh-row{position:absolute;left:0;right:0;top:0;height:var(--rh);display:grid;grid-template-columns:calc(var(--u)*30px) calc(var(--u)*5px) minmax(0,1fr) auto;align-items:center;column-gap:calc(var(--u)*8px);
 padding-right:calc(var(--u)*10px);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);transition:transform .45s cubic-bezier(.3,.8,.25,1),opacity .25s;will-change:transform}
.kh-row.off{opacity:0}
.kh-p{display:grid;place-items:center;height:100%;font:800 calc(var(--u)*16px)/1 var(--k-num);color:#fff;background:rgba(255,255,255,.07)}
.kh-bar{display:block;width:100%;height:62%;border-radius:2px}
.kh-n{font:700 calc(var(--u)*16px)/1 var(--k-num);letter-spacing:.04em;text-transform:uppercase;color:#f5f2df;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kh-g{font:600 calc(var(--u)*15px)/1 var(--k-num);color:#b9c7e6;font-variant-numeric:tabular-nums;text-align:right;min-width:calc(var(--u)*58px)}
.kh-g{height:100%;display:flex;align-items:center;justify-content:flex-end}
.kh-g.ldr{font-size:calc(var(--u)*12px);letter-spacing:.12em;color:var(--k-gold)}
.kh-row.me{background:#f5f2df;box-shadow:none}
.kh-row.me .kh-p{background:var(--k-red);color:#fff}
.kh-row.me .kh-n,.kh-row.me .kh-g{color:#0f1a3d}
.kh-row.fin .kh-g::before{content:"";display:inline-block;width:calc(var(--u)*11px);height:calc(var(--u)*9px);margin-right:calc(var(--u)*5px);vertical-align:0;
 background:repeating-conic-gradient(#fff 0 25%,#0b1024 0 50%) 0 0/calc(var(--u)*5.5px) calc(var(--u)*4.5px);border-radius:1px}
.kh-row.gain{animation:kh-gain .9s ease-out}
@keyframes kh-gain{0%,30%{background:rgba(34,212,106,.55)}100%{background:transparent}}
.kh-row.me.gain{animation:none}

/* ---------- position, lap, timer (top-right) ---------- */
.kh-tr{position:absolute;right:var(--sr);top:var(--st);display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--u)*6px);width:calc(var(--u)*248px)}
.kh-posbox,.kh-lapbox,.kh-timer{box-shadow:0 calc(var(--u)*6px) calc(var(--u)*16px) rgba(0,0,0,.3)}
.kh-pl{display:grid;grid-template-columns:1.25fr 1fr;gap:calc(var(--u)*6px);height:calc(var(--u)*78px)}
.kh-posbox,.kh-lapbox{position:relative;display:flex;align-items:baseline;padding:calc(var(--u)*22px) calc(var(--u)*12px) 0;background:var(--pbg);border:1px solid var(--pline);border-radius:calc(var(--u)*12px);overflow:hidden}
.kh-posbox small,.kh-lapbox small,.kh-lapbox em{position:absolute;left:calc(var(--u)*12px);top:calc(var(--u)*8px);font:1000 calc(var(--u)*11px)/1 Nunito,sans-serif;letter-spacing:.2em;color:var(--k-dim);font-style:normal}
.kh-posbox{border-top:calc(var(--u)*4px) solid var(--k-red)}
.kh-posbox::before{content:"P";font:800 calc(var(--u)*30px)/1 var(--k-num);color:var(--k-red);margin-right:calc(var(--u)*2px);transform:skewX(-8deg)}
.kh-pos{font:800 calc(var(--u)*58px)/.84 var(--k-num);color:#fff;transform:skewX(-8deg);transform-origin:bottom}
.kh-tot,.kh-laps{font:700 calc(var(--u)*22px)/1 var(--k-num);color:var(--k-dim);margin-left:calc(var(--u)*3px)}
.kh-lap{font:800 calc(var(--u)*44px)/.84 var(--k-num);color:#fff;transform:skewX(-8deg);transform-origin:bottom}
.kh-lapbox{border-top:calc(var(--u)*4px) solid #44558f}
.kh-lapbox em{display:none;color:#0f1a3d}
.kh-lapbox.final{background:linear-gradient(180deg,#ffe16b,#ffc93a);border-top-color:#fff}
.kh-lapbox.final small{display:none}.kh-lapbox.final em{display:block}
.kh-lapbox.final .kh-lap{color:#0f1a3d}.kh-lapbox.final .kh-laps{color:#6b5a1a}
.kh-posbox.up{animation:kh-up .8s ease-out}.kh-posbox.down{animation:kh-down .8s ease-out}
@keyframes kh-up{0%{box-shadow:inset 0 0 0 999px rgba(34,212,106,.5)}100%{box-shadow:inset 0 0 0 999px rgba(34,212,106,0)}}
@keyframes kh-down{0%{box-shadow:inset 0 0 0 999px rgba(255,46,77,.5)}100%{box-shadow:inset 0 0 0 999px rgba(255,46,77,0)}}
.kh-timer{display:grid;grid-template-columns:1fr;padding:calc(var(--u)*9px) calc(var(--u)*12px) calc(var(--u)*9px);background:var(--pbg);border:1px solid var(--pline);border-radius:calc(var(--u)*12px);height:calc(var(--u)*98px)}
.kh-lt{font:700 calc(var(--u)*34px)/1 var(--k-num);color:#fff;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.kh-sec{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*4px);margin:calc(var(--u)*7px) 0 calc(var(--u)*8px)}
.kh-sec i{height:calc(var(--u)*6px);border-radius:2px;background:rgba(255,255,255,.14);transition:background .2s}
.kh-sec i.purple{background:var(--k-purple);box-shadow:0 0 calc(var(--u)*8px) rgba(180,92,255,.7)}
.kh-sec i.green{background:var(--k-green)}.kh-sec i.yellow{background:var(--k-yellow)}
.kh-lb{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*8px)}
.kh-lb span{display:flex;flex-direction:column;gap:calc(var(--u)*3px);font:1000 calc(var(--u)*10px)/1 Nunito,sans-serif;letter-spacing:.18em;color:var(--k-dim)}
.kh-lb b{font:600 calc(var(--u)*17px)/1 var(--k-num);letter-spacing:.02em;color:#e6ecfa}
.kh-lb span:last-child b{color:var(--k-purple);filter:brightness(1.25)}

/* ---------- item slot, slipstream, wrong way (top-centre) ---------- */
.kh-top{position:absolute;left:50%;top:var(--st);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*8px);transition:opacity .25s}
.kh-race:has(.kh-lights.on) .kh-top{opacity:0}
.kh-item{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*5px);--ic:#8fa4cf}
.kh-slot{position:relative;width:calc(var(--u)*80px);height:calc(var(--u)*80px);border-radius:calc(var(--u)*20px);overflow:hidden;
 background:radial-gradient(circle at 50% 30%,#22346e,#0d1430 75%);border:calc(var(--u)*3px) solid rgba(160,185,255,.35);
 box-shadow:0 calc(var(--u)*6px) 0 rgba(5,8,20,.55),inset 0 0 0 calc(var(--u)*3px) rgba(5,8,20,.5);transition:border-color .2s,box-shadow .2s}
.kh-slot::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:400 calc(var(--u)*40px)/1 var(--k-disp);color:rgba(160,185,255,.18);transform:skewX(-8deg)}
.kh-reel,.kh-icon{position:absolute;inset:0;opacity:0}
.kh-strip{display:flex;flex-direction:column}
.kh-strip span{flex:none;height:calc(var(--u)*74px);display:grid;place-items:center}
.kh-strip svg,.kh-icon svg{width:72%;height:72%}
.kh-icon{display:grid;place-items:center}
.kh-item[data-state="rolling"] .kh-reel{opacity:1}
.kh-item[data-state="rolling"] .kh-strip{animation:kh-reel .34s linear infinite;filter:blur(.6px)}
.kh-item[data-state="rolling"] .kh-slot{border-color:#fff;box-shadow:0 calc(var(--u)*6px) 0 rgba(5,8,20,.55),0 0 calc(var(--u)*22px) rgba(255,255,255,.35)}
.kh-item[data-state="rolling"] .kh-slot::before,.kh-item[data-state="have"] .kh-slot::before{opacity:0}
.kh-item[data-state="have"] .kh-icon{opacity:1}
.kh-item[data-state="have"] .kh-slot{border-color:var(--ic);box-shadow:0 calc(var(--u)*6px) 0 rgba(5,8,20,.55),0 0 calc(var(--u)*24px) color-mix(in srgb,var(--ic) 60%,transparent)}
.kh-item.pop .kh-slot{animation:kh-pop .45s cubic-bezier(.2,1.6,.3,1)}
@keyframes kh-reel{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes kh-pop{0%{transform:scale(1.3)}100%{transform:scale(1)}}
.kh-iname{min-height:calc(var(--u)*14px);font:1000 calc(var(--u)*12px)/1 Nunito,sans-serif;letter-spacing:.16em;color:var(--ic);text-shadow:0 1px 0 #0b1024,0 0 8px rgba(0,0,0,.6);white-space:nowrap}
.kh-item[data-state="rolling"] .kh-iname{color:#fff}
.kh-ikey{position:absolute;top:calc(var(--u)*58px);left:calc(50% + var(--u)*30px);min-width:calc(var(--u)*24px);padding:calc(var(--u)*4px) calc(var(--u)*6px);border-radius:calc(var(--u)*6px);
 background:#f5f2df;color:#0f1a3d;font:1000 calc(var(--u)*11px)/1 Nunito,sans-serif;text-align:center;box-shadow:0 2px 0 #0b1024}
.kh-item[data-state="empty"] .kh-ikey{display:none}
.kh-slip,.kh-wrong{opacity:0;transform:translateY(calc(var(--u)*-6px)) skewX(-8deg);transition:opacity .2s,transform .2s;white-space:nowrap}
.kh-slip{display:flex;align-items:center;gap:calc(var(--u)*4px);padding:calc(var(--u)*6px) calc(var(--u)*14px);border-radius:999px;background:rgba(10,40,58,.85);border:2px solid var(--k-cyan);
 font:1000 calc(var(--u)*13px)/1 Nunito,sans-serif;letter-spacing:.18em;color:var(--k-cyan);box-shadow:0 0 calc(var(--u)*18px) rgba(83,237,255,.35)}
.kh-slip i{display:block;width:calc(var(--u)*14px);height:2px;border-radius:2px;background:var(--k-cyan);animation:kh-wind .5s linear infinite}
.kh-slip i:nth-child(2){animation-delay:-.17s;width:calc(var(--u)*10px)}.kh-slip i:nth-child(3){animation-delay:-.34s;width:calc(var(--u)*6px)}
@keyframes kh-wind{from{transform:translateX(calc(var(--u)*8px));opacity:0}50%{opacity:1}to{transform:translateX(calc(var(--u)*-8px));opacity:0}}
.kh-slip.on,.kh-wrong.on{opacity:1;transform:skewX(-8deg)}
.kh-wrong{display:flex;align-items:center;gap:calc(var(--u)*12px);padding:calc(var(--u)*8px) calc(var(--u)*24px);border-radius:calc(var(--u)*12px);background:var(--k-red);color:#fff;
 font:400 calc(var(--u)*34px)/1 var(--k-disp);letter-spacing:.04em;box-shadow:0 calc(var(--u)*6px) 0 #7a0c1d,0 0 calc(var(--u)*30px) rgba(255,46,77,.5)}
.kh-wrong span{font:900 calc(var(--u)*32px)/1 Nunito,sans-serif}
.kh-wrong.on{animation:kh-blink 1s steps(2) infinite}
@keyframes kh-blink{50%{filter:brightness(1.35)}}

/* ---------- minimap (bottom-left) ---------- */
.kh-map{position:absolute;left:var(--sl);bottom:var(--sb);width:calc(var(--u)*196px);height:calc(var(--u)*196px);border-radius:50%;
 background:radial-gradient(circle,rgba(8,12,30,.22) 0%,rgba(8,12,30,.12) 62%,transparent 71%)}
.kh-map svg{display:block;width:100%;height:100%;overflow:visible}
.kh-mb{fill:none;stroke:rgba(4,7,18,.38);stroke-width:7;stroke-linejoin:round;stroke-linecap:round}
.kh-ml{fill:none;stroke:#f5f2df;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;opacity:.62}
.kh-mst rect{fill:#fff;stroke:#0b1024;stroke-width:.8;opacity:.85}
.kh-dots circle{stroke:#0b1024;stroke-width:1.3}
.kh-dots g.me path{stroke:#fff;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 0 2.5px rgba(0,0,0,.8))}
.kh-dots g.me .kh-ring{fill:none;stroke:#fff;stroke-width:1.1;transform-box:fill-box;transform-origin:center;animation:kh-sonar 1.8s ease-out infinite}
@keyframes kh-sonar{0%{transform:scale(.6);opacity:.85}100%{transform:scale(2.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.kh-dots g.me .kh-ring{animation:none;opacity:.5}}

/* ---------- speedo cluster (bottom-right) ---------- */
.kh-cluster{position:absolute;right:var(--sr);bottom:var(--sb);display:flex;align-items:flex-end;gap:calc(var(--u)*10px)}
.kh-gauge{position:relative;width:calc(var(--u)*232px);height:calc(var(--u)*226px);margin-top:calc(var(--u)*30px)}
.kh-gauge::before{content:"";position:absolute;left:50%;top:0;width:calc(var(--u)*232px);height:calc(var(--u)*232px);transform:translateX(-50%);border-radius:50%;
 background:radial-gradient(circle at 50% 50%,rgba(16,24,56,.92) 0 58%,rgba(9,13,32,.86) 59% 69%,transparent 70.5%);filter:drop-shadow(0 calc(var(--u)*6px) calc(var(--u)*14px) rgba(0,0,0,.4))}
.kh-gauge svg{position:absolute;left:0;top:0;width:calc(var(--u)*232px);height:calc(var(--u)*232px);overflow:visible}
.kh-gauge path{fill:none}
.kh-arc-t{stroke:rgba(255,255,255,.1);stroke-width:14}
.kh-arc-f{stroke:#f5f2df;stroke-width:14;stroke-dasharray:0 200;transition:stroke .15s}
.kh-arc-r{stroke:var(--k-red);stroke-width:14;stroke-dasharray:0 85 15 100;opacity:.75;mix-blend-mode:normal}
.kh-arc-k{stroke:rgba(255,255,255,.4);stroke-width:5;stroke-dasharray:.45 9.55}
.kh-arc-bt{stroke:rgba(83,237,255,.12);stroke-width:6}
.kh-arc-b{stroke:var(--k-cyan);stroke-width:6;stroke-dasharray:0 200;stroke-linecap:round}
.kh-gauge.boosting .kh-arc-b{filter:drop-shadow(0 0 4px #53edff)}
.kh-gauge.lim .kh-arc-f{stroke:#3a8bff}
.kh-gear{position:absolute;left:0;right:0;top:calc(var(--u)*38px);text-align:center}
.kh-gear b{display:inline-block;font:800 calc(var(--u)*100px)/1 var(--k-num);color:#fff;transform:skewX(-8deg);text-shadow:0 calc(var(--u)*4px) 0 rgba(0,0,0,.35)}
.kh-gauge.lim .kh-gear b{color:#7fb2ff}
.kh-spd{position:absolute;left:0;right:0;top:calc(var(--u)*140px);display:flex;justify-content:center;align-items:baseline;gap:calc(var(--u)*5px)}
.kh-spd b{min-width:3ch;text-align:right;font:700 calc(var(--u)*32px)/1 var(--k-num);color:#fff;font-variant-numeric:tabular-nums}
.kh-spd small{font:1000 calc(var(--u)*11px)/1 Nunito,sans-serif;letter-spacing:.14em;color:var(--k-dim)}
.kh-box{position:absolute;left:50%;bottom:calc(var(--u)*2px);transform:translateX(-50%) skewX(-8deg);padding:calc(var(--u)*5px) calc(var(--u)*10px);border-radius:calc(var(--u)*7px);
 font:1000 calc(var(--u)*12px)/1 Nunito,sans-serif;letter-spacing:.16em;background:rgba(186,255,56,.14);border:2px solid var(--k-lime);color:var(--k-lime)}
.kh-box.man{background:rgba(255,225,107,.14);border-color:var(--k-gold);color:var(--k-gold)}
.kh-blab{position:absolute;left:calc(var(--u)*14px);bottom:calc(var(--u)*8px);font:1000 calc(var(--u)*9px)/1 Nunito,sans-serif;letter-spacing:.18em;color:var(--k-cyan);opacity:.75}
.kh-shift{position:absolute;left:50%;top:calc(var(--u)*-30px);transform:translateX(-50%);display:flex;gap:calc(var(--u)*4px);padding:calc(var(--u)*5px) calc(var(--u)*7px);border-radius:999px;background:rgba(6,9,22,.88);border:1px solid var(--pline)}
.kh-shift i{display:block;width:calc(var(--u)*12px);height:calc(var(--u)*12px);border-radius:50%;background:rgba(255,255,255,.1);transition:background .05s}
.kh-shift i.on:nth-child(-n+4){background:#2bea6a;box-shadow:0 0 calc(var(--u)*8px) #2bea6a}
.kh-shift i.on:nth-child(n+5):nth-child(-n+7){background:#ff3048;box-shadow:0 0 calc(var(--u)*8px) #ff3048}
.kh-shift i.on:nth-child(n+8){background:#3a8bff;box-shadow:0 0 calc(var(--u)*8px) #3a8bff}
.kh-gauge.lim .kh-shift i{background:#3a8bff;box-shadow:0 0 calc(var(--u)*10px) #3a8bff;animation:kh-lim .14s steps(2) infinite}
@keyframes kh-lim{50%{background:rgba(58,139,255,.15);box-shadow:none}}

/* drift charge: sparks blue -> orange -> purple */
.kh-drift{--dc:#8fa4cf;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*6px);position:relative;margin-bottom:calc(var(--u)*30px);padding:calc(var(--u)*9px) calc(var(--u)*12px);
 border-radius:calc(var(--u)*14px);background:var(--pbg);border:2px solid var(--dc);opacity:0;transform:translateX(calc(var(--u)*12px)) skewX(-8deg);transition:opacity .15s,transform .2s,border-color .15s}
.kh-drift.on{opacity:1;transform:skewX(-8deg)}
.kh-drift span{font:1000 calc(var(--u)*11px)/1 Nunito,sans-serif;letter-spacing:.2em;color:var(--dc)}
.kh-pips{display:flex;gap:calc(var(--u)*5px)}
.kh-pips i{width:calc(var(--u)*14px);height:calc(var(--u)*14px);transform:rotate(45deg);border-radius:3px;background:rgba(255,255,255,.12);transition:background .15s}
.kh-drift[data-tier="1"]{--dc:#3aa0ff}.kh-drift[data-tier="2"]{--dc:#ff9a1f}.kh-drift[data-tier="3"]{--dc:#c25bff}
.kh-drift[data-tier="1"] .kh-pips i:nth-child(-n+1),.kh-drift[data-tier="2"] .kh-pips i:nth-child(-n+2),.kh-drift[data-tier="3"] .kh-pips i{background:var(--dc);box-shadow:0 0 calc(var(--u)*10px) var(--dc)}
.kh-sparks{position:absolute;inset:0;pointer-events:none}
.kh-sparks b{position:absolute;left:50%;top:50%;width:calc(var(--u)*5px);height:calc(var(--u)*5px);border-radius:50%;background:var(--dc);opacity:0}
.kh-drift.on:not([data-tier="0"]) .kh-sparks b{animation:kh-spark .5s ease-out infinite}
.kh-sparks b:nth-child(1){--x:-34px;--y:-22px}.kh-sparks b:nth-child(2){--x:30px;--y:-26px;animation-delay:-.12s!important}
.kh-sparks b:nth-child(3){--x:-28px;--y:24px;animation-delay:-.25s!important}.kh-sparks b:nth-child(4){--x:36px;--y:18px;animation-delay:-.38s!important}
@keyframes kh-spark{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(calc(-50% + var(--x)*var(--u)),calc(-50% + var(--y)*var(--u))) scale(.3)}}

/* ---------- start lights ---------- */
.kh-lights{position:absolute;left:50%;top:var(--st);transform:translate(-50%,calc(var(--u)*-30px));opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.2,1.2,.3,1)}
.kh-lights.on{opacity:1;transform:translate(-50%,0)}
.kh-lights.on.out{opacity:0;transform:translate(-50%,calc(var(--u)*-20px));transition:opacity .5s .25s,transform .5s .25s}
.kh-pods{display:flex;gap:calc(var(--u)*12px);padding:calc(var(--u)*12px) calc(var(--u)*16px);border-radius:calc(var(--u)*16px);background:linear-gradient(180deg,#151a2c,#07090f);
 border:2px solid #2a3150;box-shadow:0 calc(var(--u)*8px) 0 rgba(0,0,0,.45),0 calc(var(--u)*16px) calc(var(--u)*30px) rgba(0,0,0,.4)}
.kh-pod{display:flex;flex-direction:column;gap:calc(var(--u)*8px);padding:calc(var(--u)*8px);border-radius:calc(var(--u)*12px);background:#04060b;box-shadow:inset 0 0 0 2px #1e2438}
.kh-pod i{width:calc(var(--u)*44px);height:calc(var(--u)*44px);border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a1218,#16070a 70%);box-shadow:inset 0 0 0 2px #261015;transition:background .06s,box-shadow .06s}
.kh-pod.lit i{background:radial-gradient(circle at 40% 35%,#fff0f0 0,#ff5065 22%,#e0102c 60%,#8a0013 100%);box-shadow:0 0 calc(var(--u)*24px) #ff1f3d,0 0 calc(var(--u)*50px) rgba(255,31,61,.55)}

/* ---------- centre calls ---------- */
.kh-flash{position:absolute;left:0;right:0;top:25%;display:grid;place-items:center;pointer-events:none}
.kh-msg{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4px);--tc:#ffe369;animation:kh-msg 1.6s cubic-bezier(.2,1.3,.3,1) both;position:relative}
.kh-msg::before{content:"";position:absolute;left:-12%;right:-12%;top:18%;bottom:12%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tc) 22%,rgba(8,12,30,.7)) 18% 82%,transparent);transform:skewX(-14deg);z-index:-1}
.kh-msg b{font:400 calc(var(--u)*62px)/1 var(--k-disp);letter-spacing:.02em;color:var(--tc);text-transform:uppercase;transform:skewX(-8deg);white-space:nowrap;
 text-shadow:calc(var(--u)*4px) calc(var(--u)*4px) 0 #0b1024,0 0 calc(var(--u)*34px) color-mix(in srgb,var(--tc) 55%,transparent)}
.kh-msg small{font:1000 calc(var(--u)*14px)/1 Nunito,sans-serif;letter-spacing:.3em;color:#fff;text-shadow:0 2px 0 #0b1024;white-space:nowrap}
.kh-msg.gone{animation:kh-gone .18s ease-in both}
.kh-msg[data-tone="lime"]{--tc:#baff38}.kh-msg[data-tone="cyan"]{--tc:#53edff}.kh-msg[data-tone="orange"]{--tc:#ff9a1f}.kh-msg[data-tone="gold"]{--tc:#ffe369}
.kh-msg[data-tone="purple"]{--tc:#c77dff}.kh-msg[data-tone="green"]{--tc:#3dff8a}.kh-msg[data-tone="red"]{--tc:#ff4d5e}
.kh-msg[data-kind="final-lap"] b{color:#fff;-webkit-text-stroke:0;text-shadow:calc(var(--u)*4px) calc(var(--u)*4px) 0 #0b1024,0 0 calc(var(--u)*30px) rgba(255,227,105,.7)}
.kh-msg[data-kind="final-lap"]::before{background:repeating-conic-gradient(rgba(255,255,255,.18) 0 25%,rgba(8,12,30,.75) 0 50%) 0 0/calc(var(--u)*24px) calc(var(--u)*24px);opacity:.9}
.kh-msg[data-kind="go"]{animation-duration:1.1s}
.kh-msg[data-kind="go"] b{font-size:calc(var(--u)*150px);color:var(--k-lime,#baff38);text-shadow:calc(var(--u)*7px) calc(var(--u)*7px) 0 #0b1024,0 0 calc(var(--u)*60px) rgba(186,255,56,.6)}
.kh-msg[data-kind="go"]::before{display:none}
.kh-msg[data-kind="hit"]{animation:kh-msg 1.6s cubic-bezier(.2,1.3,.3,1) both,kh-shake .3s linear}
@keyframes kh-msg{0%{opacity:0;transform:scale(1.9)}12%{opacity:1;transform:scale(.94)}20%{transform:scale(1)}78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(calc(var(--u)*-24px))}}
@keyframes kh-gone{to{opacity:0;transform:scale(.9)}}
@keyframes kh-shake{25%{translate:-6px 0}75%{translate:6px 0}}

/* ---------- finish banner ---------- */
.kh-finish{position:absolute;left:0;right:0;top:30%;display:grid;grid-template-rows:auto auto auto;opacity:0;transform:skewY(-4deg);pointer-events:none;--pc:#f5f2df}
.kh-finish.on{animation:kh-fin 3.4s cubic-bezier(.2,.9,.2,1) both}
.kh-check{height:calc(var(--u)*22px);background:repeating-conic-gradient(#fff 0 25%,#0b1024 0 50%) 0 0/calc(var(--u)*22px) calc(var(--u)*22px)}
.kh-fin{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*24px);padding:calc(var(--u)*10px) 0;background:linear-gradient(90deg,#0b1129,#17234f 50%,#0b1129)}
.kh-fin small{font:1000 calc(var(--u)*13px)/1 Nunito,sans-serif;letter-spacing:.3em;color:var(--k-dim)}
.kh-fin b{font:400 calc(var(--u)*84px)/1 var(--k-disp);color:#fff;transform:skewX(-8deg);text-shadow:calc(var(--u)*5px) calc(var(--u)*5px) 0 var(--k-red)}
.kh-fin span{font:800 calc(var(--u)*40px)/1 var(--k-num);color:var(--pc);letter-spacing:.04em;transform:skewX(-8deg)}
@keyframes kh-fin{0%{opacity:0;clip-path:inset(0 100% 0 0)}10%{opacity:1;clip-path:inset(0 0 0 0)}85%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 100%)}}

/* ---------- small screens (height < 480): the broadcast tightens ---------- */
.kh-small .kh-tower{--rh:calc(var(--u)*30px);width:calc(var(--u)*272px)}
.kh-small .kh-th{height:calc(var(--u)*38px)}
.kh-small .kh-n,.kh-small .kh-p{font-size:calc(var(--u)*19px)}
.kh-small .kh-g{font-size:calc(var(--u)*17px)}
.kh-small .kh-track{display:none}
.kh-small .kh-map{width:calc(var(--u)*180px);height:calc(var(--u)*180px)}

/* ================= touch ================= */
.kt{position:absolute;inset:0;pointer-events:none;z-index:2;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kt[hidden]{display:none}
.kt button,.kt-steer{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
:where(.kt button){appearance:none;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.kt-steer{position:absolute;left:var(--sl);bottom:var(--sb);width:max(212px,calc(var(--u)*330px));height:max(88px,calc(var(--u)*124px));display:grid;grid-template-columns:1fr 1fr;gap:max(8px,calc(var(--u)*10px))}
.kt-steer span{position:relative;border-radius:max(18px,calc(var(--u)*26px));background:rgba(11,16,36,.55);border:3px solid rgba(135,169,236,.5);transition:background .08s,border-color .08s}
.kt-steer span i{position:absolute;left:50%;top:50%;width:max(22px,calc(var(--u)*30px));height:max(22px,calc(var(--u)*30px));border-left:max(6px,calc(var(--u)*8px)) solid #dfe8fb;border-bottom:max(6px,calc(var(--u)*8px)) solid #dfe8fb;border-radius:3px}
.kt-l i{transform:translate(-30%,-50%) rotate(45deg)}.kt-r i{transform:translate(-70%,-50%) rotate(-135deg)}
.kt-steer[data-dir="l"] .kt-l,.kt-steer[data-dir="r"] .kt-r{background:rgba(83,237,255,.28);border-color:var(--k-cyan,#53edff)}
.kt-knob{position:absolute;left:50%;top:50%;width:max(14px,calc(var(--u)*18px));height:max(14px,calc(var(--u)*18px));margin:calc(max(14px,calc(var(--u)*18px))/-2) 0 0 calc(max(14px,calc(var(--u)*18px))/-2);border-radius:50%;background:#fff;opacity:0;transition:opacity .1s}
.kt-steer.on .kt-knob{opacity:.9}
.kt-btn{position:absolute;border-radius:50%;border:3px solid #0b1024;display:grid;place-items:center;font:400 max(15px,calc(var(--u)*20px))/1 var(--k-disp,Launch,'Lilita One',sans-serif);letter-spacing:.03em;transition:transform .06s,box-shadow .06s}
.kt-btn span{transform:skewX(-8deg)}
.kt-drift{--s:max(96px,calc(var(--u)*134px));width:var(--s);height:var(--s);right:var(--sr);bottom:var(--sb);background:radial-gradient(circle at 50% 35%,#ffa3d4,#ff5fb4 60%);color:#3a0a24;box-shadow:0 7px 0 #8c2b62,0 10px 22px rgba(0,0,0,.35)}
.kt-drift.down{transform:translateY(5px);box-shadow:0 2px 0 #8c2b62}
.kt-brake{--s:max(74px,calc(var(--u)*100px));width:var(--s);height:var(--s);right:calc(var(--sr) + max(96px,calc(var(--u)*134px)) + max(14px,calc(var(--u)*18px)));bottom:var(--sb);
 background:radial-gradient(circle at 50% 35%,#ff8a96,#ff2e4d 60%);color:#3b0610;box-shadow:0 6px 0 #8a1024,0 8px 18px rgba(0,0,0,.35);font-size:max(13px,calc(var(--u)*17px))}
.kt-brake.down{transform:translateY(4px);box-shadow:0 2px 0 #8a1024}
.kt-item{--s:max(70px,calc(var(--u)*92px));width:var(--s);height:var(--s);right:calc(var(--sr) + max(96px,calc(var(--u)*134px)) + max(6px,calc(var(--u)*8px)));bottom:calc(var(--sb) + max(74px,calc(var(--u)*100px)) + max(14px,calc(var(--u)*18px)));
 background:radial-gradient(circle at 50% 35%,#2a3d7a,#141f48 65%);border-color:rgba(160,185,255,.45);color:#c0cfe9;box-shadow:0 5px 0 #0b1024,0 8px 16px rgba(0,0,0,.3)}
.kt-item.has{border-color:var(--k-gold,#ffe16b);box-shadow:0 5px 0 #0b1024,0 0 22px rgba(255,225,107,.5)}
.kt-item.rolling{border-color:#fff}
.kt-item.down{transform:translateY(4px);box-shadow:0 1px 0 #0b1024}
.kt-item.pop{animation:kh-pop .4s cubic-bezier(.2,1.6,.3,1)}
.kt-ii{position:absolute;inset:16%;display:grid;place-items:center}.kt-ii svg{width:100%;height:100%}
.kt-il{font-size:max(12px,calc(var(--u)*14px))}
.kt-item.has .kt-il{display:none}
.kt-pause{position:absolute;left:50%;top:var(--st);transform:translateX(calc(var(--u)*-150px - 100%));width:46px;height:46px;border-radius:14px;border:2px solid #87a9ec;background:rgba(11,16,36,.82);box-shadow:0 4px 0 #0b1024;display:grid;place-items:center}
.kt-pause i{display:block;width:14px;height:16px;border-left:5px solid #dfe8fb;border-right:5px solid #dfe8fb}
/* With thumbs on the corners, the speedo becomes a strip under the timer and the map moves up beside the tower. */
.kh-touch .kh-cluster{top:calc(var(--st) + var(--u)*196px);bottom:auto;right:var(--sr);flex-direction:row-reverse;align-items:center}
.kh-touch .kh-gauge{width:calc(var(--u)*248px);height:calc(var(--u)*64px);margin:0;border-radius:calc(var(--u)*12px);background:var(--pbg);border:1px solid var(--pline);display:flex;align-items:center;gap:calc(var(--u)*10px);padding:calc(var(--u)*20px) calc(var(--u)*12px) 0}
.kh-touch .kh-gauge::before,.kh-touch .kh-gauge svg,.kh-touch .kh-blab{display:none}
.kh-touch .kh-shift{top:calc(var(--u)*6px);left:calc(var(--u)*12px);right:calc(var(--u)*12px);transform:none;justify-content:space-between;padding:0;background:none;border:0}
.kh-touch .kh-shift i{width:calc(var(--u)*14px);height:calc(var(--u)*8px);border-radius:3px}
.kh-touch .kh-gear,.kh-touch .kh-spd,.kh-touch .kh-box{position:static;transform:none}
.kh-touch .kh-gear b{font-size:calc(var(--u)*40px)}
.kh-touch .kh-spd{flex:1;justify-content:flex-start}
.kh-touch .kh-box{transform:skewX(-8deg)}
.kh-touch .kh-drift{margin:0}
.kh-touch .kh-map{bottom:auto;top:calc(var(--st) + var(--u)*34px + 8*var(--u)*27px + var(--u)*12px);width:calc(var(--u)*150px);height:calc(var(--u)*150px)}
.kh-touch.kh-small .kh-map{display:none}

/* ================= title card (#start, fight card) ================= */
body[data-theme="kart"] #start .lobby-inner{width:min(660px,62vw)}
body[data-theme="kart"] #start .lobby-title{font-size:clamp(44px,7.2vw,104px);overflow-wrap:normal;white-space:nowrap}
body[data-theme="kart"] #start[data-mode="pause"] .lobby-title{font-size:clamp(44px,7vw,84px)}
.kt-gp{display:inline-block;margin-left:.14em;padding:.06em .16em .02em;font-size:.6em;vertical-align:.32em;line-height:1;background:var(--a-accent);color:#fff;border-radius:.1em;
 text-shadow:none;box-shadow:.07em .07em 0 var(--a-accent2)}
body[data-theme="kart"] .lobby-slash{background:var(--a-accent)}
body[data-theme="kart"] .lobby-slash::after{content:"";position:absolute;inset:0 0 0 auto;width:70%;left:calc(100% + 46px);background:repeating-conic-gradient(#f5f2df 0 25%,#0b1024 0 50%) 0 0/14px 14px;opacity:.85}
body[data-theme="kart"] #start .ghost kbd,#kselect .ghost kbd{margin-left:6px;padding:2px 6px;border-radius:6px;background:#1c2a58;border:1.5px solid #4a63a5;font:1000 11px/1 Nunito,sans-serif;color:#e9f6ff}
.kt-poster{position:fixed;top:0;bottom:0;right:0;left:calc(min(800px,64vw) + 90px);display:flex;align-items:flex-end;justify-content:center;pointer-events:none;padding-bottom:6vh}
.kt-poster[hidden]{display:none}
.kt-pd{position:relative;flex:0 1 auto;width:min(19vw,46vh);margin:0 -4.5vw;display:flex;flex-direction:column;align-items:center;animation:kt-pd .6s calc(.15s + var(--i)*.1s) cubic-bezier(.2,1.2,.3,1) both}
.kt-pd:nth-child(2){order:-1;z-index:2;width:min(23vw,56vh);margin-bottom:2vh}
.kt-pd::before{content:"";position:absolute;left:8%;right:8%;bottom:10%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--dc) 55%,transparent),transparent 68%)}
.kt-pd img{position:relative;width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(0,0,0,.45))}
.kt-pd span{position:relative;margin-top:-1vh;padding:6px 12px;border-radius:8px;background:var(--dc);color:#0b1024;font:400 clamp(13px,1.4vw,22px)/1 Launch,'Lilita One',sans-serif;transform:skewX(-8deg);box-shadow:4px 4px 0 #0b1024;white-space:nowrap}
.kt-pd:nth-child(1){order:0}.kt-pd:nth-child(3){order:1}
@keyframes kt-pd{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
#start.kout,#after.kout,#kselect.kout{animation:kt-out .18s ease-in both}
@keyframes kt-out{to{opacity:0}}
@media (max-width:760px){.kt-poster{left:66vw}.kt-pd span{display:none}.kt-pd{margin:0 -7vw}}
@media (max-height:560px){body[data-theme="kart"] #start .lobby-title{font-size:clamp(36px,7vw,60px)}.kt-poster{padding-bottom:3vh}}

/* ================= driver select + race setup (#kselect) ================= */
#kselect{position:fixed;inset:0;z-index:6;pointer-events:auto;display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);color:#f5f2df;overflow:hidden;--dc:#baff38;
 background:linear-gradient(100deg,rgba(8,12,30,.97) 0%,rgba(8,12,30,.93) 40%,rgba(10,16,40,.86) 100%);font-family:Nunito,sans-serif}
#kselect[hidden]{display:none}
#kselect.kin{animation:lobby-in .3s ease-out both}
#kselect button{appearance:none;margin:0;font:inherit;color:inherit;cursor:pointer;box-sizing:border-box}
#kselect button:active{transform:none}
.ks-slash{position:absolute;top:-10%;bottom:-10%;left:38%;width:calc(var(--u,1)*12px);background:var(--dc);transform:skewX(-12deg);box-shadow:calc(var(--u,1)*22px) 0 0 var(--a-accent,#ff2e4d);opacity:.9;transition:background .3s;pointer-events:none;z-index:1}
.ks-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 calc(var(--u,1)*24px + env(safe-area-inset-left)) calc(var(--u,1)*28px + env(safe-area-inset-bottom)) max(calc(var(--u,1)*36px),env(safe-area-inset-left))}
.ks-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 42%,color-mix(in srgb,var(--dc) 50%,transparent),transparent 70%),
 repeating-linear-gradient(-62deg,transparent 0 calc(var(--u,1)*28px),color-mix(in srgb,var(--dc) 9%,transparent) calc(var(--u,1)*28px) calc(var(--u,1)*56px));transition:background .3s}
.ks-num{position:absolute;left:calc(var(--u,1)*20px);top:calc(var(--u,1)*8px);font:900 calc(var(--u,1)*230px)/1 var(--k-num);color:transparent;-webkit-text-stroke:calc(var(--u,1)*2px) color-mix(in srgb,var(--dc) 55%,transparent);opacity:.55;transform:skewX(-8deg);letter-spacing:-.02em}
.ks-img{position:absolute;left:50%;top:4%;height:72%;aspect-ratio:1;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 calc(var(--u,1)*20px) calc(var(--u,1)*24px) rgba(0,0,0,.5))}
.ks-hero.swap .ks-img{animation:ks-swap .35s cubic-bezier(.2,1.3,.3,1)}
.ks-hero.swap .ks-name{animation:ks-name .3s ease-out}
@keyframes ks-swap{from{opacity:.2;transform:translateX(-50%) translateY(calc(var(--u,1)*24px)) scale(.94)}to{opacity:1;transform:translateX(-50%)}}
@keyframes ks-name{from{opacity:0;transform:skewX(-8deg) translateX(calc(var(--u,1)*-16px))}to{opacity:1;transform:skewX(-8deg)}}
.ks-info{position:relative;z-index:2}
.ks-info::before{content:"";position:absolute;left:-40%;right:-20%;top:-30%;bottom:-40%;background:linear-gradient(180deg,transparent,rgba(8,12,30,.85) 40%);z-index:-1}
.ks-role{display:inline-block;margin:0 0 calc(var(--u,1)*6px);padding:calc(var(--u,1)*5px) calc(var(--u,1)*10px);border-radius:calc(var(--u,1)*7px);background:var(--dc);color:#0b1024;
 font:1000 calc(var(--u,1)*12px)/1 Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;transform:skewX(-8deg)}
.ks-name{margin:0;font:400 calc(var(--u,1)*58px)/.95 var(--k-disp);text-transform:uppercase;color:#fff;transform:skewX(-8deg);transform-origin:left bottom;
 text-shadow:calc(var(--u,1)*4px) calc(var(--u,1)*4px) 0 var(--dc),calc(var(--u,1)*7px) calc(var(--u,1)*7px) 0 #0b1024;overflow-wrap:normal}
.ks-tag{margin:calc(var(--u,1)*10px) 0 calc(var(--u,1)*10px);font:800 calc(var(--u,1)*16px)/1.35 Nunito,sans-serif;color:#c0cfe9}
.ks-livery{display:flex;align-items:center;gap:calc(var(--u,1)*6px);font:1000 calc(var(--u,1)*10px)/1 Nunito,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--k-dim)}
.ks-livery i{width:calc(var(--u,1)*22px);height:calc(var(--u,1)*12px);border-radius:3px;transform:skewX(-14deg);box-shadow:0 0 0 1.5px rgba(255,255,255,.25)}
.ks-livery span{margin-left:calc(var(--u,1)*4px)}
.ks-main{position:relative;z-index:2;display:flex;flex-direction:column;gap:calc(var(--u,1)*16px);min-height:0;
 padding:max(calc(var(--u,1)*26px),env(safe-area-inset-top)) max(calc(var(--u,1)*40px),env(safe-area-inset-right)) max(calc(var(--u,1)*24px),env(safe-area-inset-bottom)) calc(var(--u,1)*70px)}
.ks-head{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:calc(var(--u,1)*20px);row-gap:calc(var(--u,1)*6px)}
.ks-head .lobby-live{grid-column:1/-1;justify-self:start;margin:0;font-size:calc(var(--u,1)*12px)}
.ks-title{margin:0;font:400 calc(var(--u,1)*54px)/1 var(--k-disp);text-transform:uppercase;color:#fff;transform:skewX(-8deg);text-shadow:calc(var(--u,1)*4px) calc(var(--u,1)*4px) 0 var(--a-accent,#ff2e4d);white-space:nowrap}
.ks-steps{display:flex;gap:calc(var(--u,1)*6px);margin:0 0 calc(var(--u,1)*8px);padding:0;list-style:none;counter-reset:st}
.ks-steps li{counter-increment:st;padding:calc(var(--u,1)*6px) calc(var(--u,1)*11px);border-radius:calc(var(--u,1)*8px);border:2px solid #34498a;background:rgba(16,26,61,.85);
 font:900 calc(var(--u,1)*12px)/1 Nunito,sans-serif;color:var(--k-dim);transform:skewX(-8deg);white-space:nowrap}
.ks-steps li::before{content:counter(st) "  ";color:inherit;opacity:.7}
#kselect[data-step="grid"] .ks-steps .s1,#kselect[data-step="setup"] .ks-steps .s2{border-color:var(--k-lime);color:var(--k-lime);background:rgba(186,255,56,.1)}
.ks-grid{display:grid;grid-template-columns:repeat(6,minmax(0,calc(var(--u,1)*118px)));gap:calc(var(--u,1)*10px);align-content:start}
#kselect[data-step="setup"] .ks-grid{display:none}
.ks-tile{position:relative;aspect-ratio:1/1.1;padding:0;border-radius:calc(var(--u,1)*14px);overflow:hidden;border:2px solid rgba(110,140,220,.3);
 background:linear-gradient(165deg,#1f2d62,#101839);box-shadow:0 calc(var(--u,1)*4px) 0 rgba(5,8,20,.6);transition:transform .12s,border-color .12s,box-shadow .12s,background .2s}
.ks-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--u,1)*5px);background:var(--dc)}
.ks-face{position:absolute;left:0;right:0;top:0;bottom:calc(var(--u,1)*24px);background:no-repeat 50% 4%/185%;transition:transform .2s}
.ks-tn{position:absolute;left:calc(var(--u,1)*4px);right:calc(var(--u,1)*4px);bottom:calc(var(--u,1)*9px);font:700 calc(var(--u,1)*14px)/1 var(--k-num);letter-spacing:.04em;text-transform:uppercase;text-align:center;
 color:#dfe8fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-tile:hover{border-color:rgba(170,195,255,.7)}
.ks-tile:hover .ks-face{transform:scale(1.05)}
.ks-tile.on{border-color:var(--dc);background:linear-gradient(165deg,color-mix(in srgb,var(--dc) 40%,#1f2d62),#101839 75%);box-shadow:0 0 0 calc(var(--u,1)*3px) var(--dc),0 0 calc(var(--u,1)*24px) color-mix(in srgb,var(--dc) 55%,transparent);transform:translateY(calc(var(--u,1)*-4px))}
#kselect .ks-tile.on:active{transform:translateY(calc(var(--u,1)*-4px))}
.ks-tile.on .ks-tn{color:#fff}
#kselect button:focus-visible{outline:3px solid var(--a-gold,#ffe369);outline-offset:3px}
.ks-setup{display:none;flex-direction:column;gap:calc(var(--u,1)*14px)}
#kselect[data-step="setup"] .ks-setup{display:flex}
.ks-row{display:grid;grid-template-columns:calc(var(--u,1)*120px) minmax(0,1fr);align-items:center;gap:calc(var(--u,1)*14px)}
.ks-rl{font:1000 calc(var(--u,1)*13px)/1 Nunito,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--k-dim)}
.ks-seg{display:flex;gap:calc(var(--u,1)*10px)}
.ks-opt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:calc(var(--u,1)*5px);min-width:calc(var(--u,1)*136px);height:calc(var(--u,1)*74px);padding:0 calc(var(--u,1)*18px);
 border-radius:calc(var(--u,1)*14px);border:2px solid #34498a;background:rgba(16,26,61,.9);box-shadow:0 calc(var(--u,1)*5px) 0 #0b1024;transform:skewX(-8deg);transition:background .12s,border-color .12s}
#kselect .ks-opt:active{transform:skewX(-8deg) translateY(2px)}
.ks-opt b{font:800 calc(var(--u,1)*30px)/1 var(--k-num);color:#fff;letter-spacing:.02em}
.ks-opt small{font:1000 calc(var(--u,1)*11px)/1 Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--k-dim);white-space:nowrap}
.ks-opt:hover{border-color:#87a9ec}
.ks-opt.on{background:var(--k-lime,#baff38);border-color:#0b1024;box-shadow:0 calc(var(--u,1)*5px) 0 #3d6b16}
.ks-opt.on b{color:#14300b}.ks-opt.on small{color:#2c5212}
.ks-actions{display:flex;align-items:center;gap:calc(var(--u,1)*14px);flex-wrap:wrap;margin-top:auto}
#kselect .drop{position:relative;display:inline-flex;align-items:center;gap:calc(var(--u,1)*16px);min-height:calc(var(--u,1)*70px);padding:0 calc(var(--u,1)*20px) 0 calc(var(--u,1)*34px);border:3px solid #0b1024;border-radius:calc(var(--u,1)*16px);
 background:var(--k-lime,#baff38);color:#14300b;box-shadow:0 calc(var(--u,1)*7px) 0 #3d6b16;transform:skewX(-8deg);transition:filter .15s}
#kselect .drop:hover{filter:brightness(1.07)}
#kselect .drop:active{transform:skewX(-8deg) translateY(4px);box-shadow:0 3px 0 #3d6b16}
#kselect .drop-label{font-size:calc(var(--u,1)*34px)}
#kselect .ghost{min-height:calc(var(--u,1)*48px);padding:0 calc(var(--u,1)*16px);border-radius:calc(var(--u,1)*12px);border:2px solid #4a63a5;background:rgba(16,26,61,.85);color:#e9f0ff;box-shadow:0 4px 0 #0b1024;font:900 calc(var(--u,1)*15px) Nunito,sans-serif}
#kselect .ghost[hidden]{display:none}
@media (max-height:480px){
 .ks-tn{display:none}.ks-face{bottom:calc(var(--u,1)*6px)}
 .ks-tag{display:none}
 .ks-steps{display:none}
 .ks-head .lobby-live{display:none}
}
@media (hover:none) and (pointer:coarse){#kselect .drop-key,#kselect .ghost kbd{display:none}}

/* ================= results (#after) ================= */
body[data-theme="kart"] #after.results{background:radial-gradient(ellipse at 30% 30%,rgba(19,35,80,.7),rgba(6,9,22,.94) 70%);padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
body[data-theme="kart"] #after .res-inner{width:min(1240px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(18px,3vw,48px);align-items:center;text-align:left}
.kr-l,.kr-r{min-width:0}
.kr-r{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px)}
body[data-theme="kart"] #after .res-kicker{letter-spacing:.24em}
body[data-theme="kart"] #after .res-place{font:800 clamp(80px,13vw,190px)/.86 var(--k-num);margin:6px 0 4px;transform-origin:left bottom}
body[data-theme="kart"] #after .res-place sup{font-size:.32em;vertical-align:1.6em;color:var(--a-dim);text-shadow:none;margin-left:.06em}
body[data-theme="kart"] #after .res-sub{margin:0 0 clamp(8px,2vh,18px);min-height:1px;display:flex;gap:8px;flex-wrap:wrap}
.kr-win,.kr-fl{display:inline-block;padding:6px 12px;border-radius:9px;font:1000 13px/1 Nunito,sans-serif;letter-spacing:.16em;transform:skewX(-8deg);background:var(--a-gold);color:#3a2c00}
.kr-win.pod{background:#d6e1f5;color:#26324f}
.kr-fl{background:var(--k-purple);color:#fff;box-shadow:0 0 18px rgba(180,92,255,.5)}
body[data-theme="kart"] #after .res-stats{grid-template-columns:repeat(4,1fr);margin:0;max-width:none}
body[data-theme="kart"] #after .res-stat{padding:12px 8px 10px;text-align:center}
body[data-theme="kart"] #after .res-stat b{font:700 clamp(20px,2.4vw,32px)/1 var(--k-num);font-variant-numeric:tabular-nums;white-space:nowrap}
body[data-theme="kart"] #after .res-stat.purple{border-color:var(--k-purple)}
body[data-theme="kart"] #after .res-stat.purple b{color:#d7a8ff}
body[data-theme="kart"] #after .res-stat span{font-size:10px}
body[data-theme="kart"] #after .res-board{margin:0;max-width:none;gap:4px}
body[data-theme="kart"] #after .res-board li{grid-template-columns:30px minmax(0,1fr) auto minmax(78px,auto);height:clamp(28px,4.4vh,40px);gap:12px;font:700 clamp(14px,1.5vw,18px)/1 var(--k-num);letter-spacing:.03em}
body[data-theme="kart"] #after .res-board li:nth-child(n){display:grid}
.kr-name{display:flex;align-items:center;gap:9px;min-width:0;white-space:nowrap;overflow:hidden;text-transform:uppercase}
.kr-name i{flex:none;width:5px;height:18px;border-radius:2px}
.kr-name small{flex:none}
body[data-theme="kart"] #after .res-board li .kd{font:600 clamp(13px,1.3vw,16px)/1 var(--k-num);color:var(--a-dim);font-variant-numeric:tabular-nums}
body[data-theme="kart"] #after .res-board li .kd.fl{padding:3px 6px;border-radius:5px;background:var(--k-purple);color:#fff}
body[data-theme="kart"] #after .res-board li .sc{font:700 clamp(14px,1.5vw,18px)/1 var(--k-num);font-variant-numeric:tabular-nums}
body[data-theme="kart"] #after .res-board li .pos{font:800 15px/1 var(--k-num)}
body[data-theme="kart"] #after .res-actions{justify-content:flex-start;margin-top:clamp(10px,2.4vh,24px)}
body[data-theme="kart"] #after .ghost{min-height:52px}
.kr-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;max-width:520px}
.kr-step{display:flex;flex-direction:column;align-items:center;min-width:0;animation:fade-up .45s var(--d,.4s) both}
.kr-who{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%}
.kr-who img{width:min(100%,clamp(70px,19vh,190px));aspect-ratio:1;object-fit:contain;margin-bottom:-6%;filter:drop-shadow(0 10px 10px rgba(0,0,0,.45))}
.kr-step.p1 .kr-who img{width:min(100%,clamp(86px,25vh,250px))}
.kr-n{max-width:100%;font:700 clamp(13px,1.4vw,18px)/1.1 var(--k-num);letter-spacing:.04em;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kr-t{margin:2px 0 6px;font:600 clamp(12px,1.2vw,15px)/1 var(--k-num);color:var(--a-dim);font-variant-numeric:tabular-nums}
.kr-block{position:relative;width:100%;display:grid;place-items:center;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#22346e,#121b40);border-top:5px solid var(--dc);box-shadow:inset 0 -6px 0 rgba(0,0,0,.25)}
.kr-block b{font:400 clamp(26px,3.6vw,44px)/1 var(--k-disp);color:#c0cfe9;transform:skewX(-8deg)}
.kr-step.p1 .kr-block{height:clamp(54px,11vh,104px)}.kr-step.p1 .kr-block b{color:var(--a-gold)}
.kr-step.p2 .kr-block{height:clamp(40px,8vh,76px)}.kr-step.p2 .kr-block b{color:#d6e1f5}
.kr-step.p3 .kr-block{height:clamp(30px,6vh,56px)}.kr-step.p3 .kr-block b{color:#e59a5b}
.kr-step.me .kr-n{color:var(--k-lime)}
.kr-step.me .kr-block{box-shadow:inset 0 -6px 0 rgba(0,0,0,.25),0 0 0 2px var(--k-lime)}
@media (max-height:560px){
 body[data-theme="kart"] #after .res-place{font-size:clamp(56px,10vw,96px)}
 body[data-theme="kart"] #after .res-stat{padding:7px 4px 6px}
 body[data-theme="kart"] #after .res-stat b{font-size:18px}
 body[data-theme="kart"] #after .res-stat span{font-size:8.5px;letter-spacing:.1em;margin-top:4px}
 body[data-theme="kart"] #after .res-board li{height:24px;font-size:13px;gap:8px;padding:0 10px 0 4px}
 body[data-theme="kart"] #after .res-board li .pos{width:20px;height:20px;font-size:12px}
 body[data-theme="kart"] #after .res-board li .kd,body[data-theme="kart"] #after .res-board li .sc{font-size:12.5px}
 body[data-theme="kart"] #after .res-board li small{display:none}
 body[data-theme="kart"] #after .res-actions{margin-top:8px;gap:8px}
 body[data-theme="kart"] #after .drop{min-height:50px;padding:0 14px 0 22px}
 body[data-theme="kart"] #after .drop-label{font-size:22px}
 body[data-theme="kart"] #after .ghost{min-height:44px}
 .kr-t{display:none}.kr-n{font-size:11px}
 body[data-theme="kart"] #after.results{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
 body[data-theme="kart"] #after .res-kicker{font-size:10px;letter-spacing:.18em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body[data-theme="kart"] #after .res-place{font-size:clamp(48px,16vh,96px);margin:2px 0}
 body[data-theme="kart"] #after .res-sub{margin-bottom:6px}
 .kr-who img{width:min(100%,clamp(40px,15vh,90px))}
 .kr-step.p1 .kr-who img{width:min(100%,clamp(50px,20vh,120px))}
 .kr-step.p1 .kr-block{height:clamp(30px,9vh,60px)}.kr-step.p2 .kr-block{height:clamp(22px,6.5vh,44px)}.kr-step.p3 .kr-block{height:clamp(16px,4.5vh,32px)}
 .kr-block b{font-size:clamp(18px,5vh,30px)}
 body[data-theme="kart"] #after .res-actions{flex-wrap:nowrap}
 body[data-theme="kart"] #after .drop{gap:10px}
 body[data-theme="kart"] #after .drop .drop-key{display:none}
 .kr-win,.kr-fl{font-size:10px;padding:4px 8px}
}
@media (max-width:720px) and (min-height:561px){body[data-theme="kart"] #after .res-inner{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
 .kh-row,.kh-msg,.kh-finish.on,.kh-item.pop .kh-slot,.kh-posbox.up,.kh-posbox.down,.kt-pd,.ks-hero.swap .ks-img,.kr-step{animation-duration:.01s!important;transition:none}
 .kh-item[data-state="rolling"] .kh-strip{animation-duration:1.2s}
}

/* ---------- online lobby (src/kart/lobby.js) ---------- */
.kl{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;overflow:auto;
 background:radial-gradient(120% 90% at 20% 0%,rgba(83,237,255,.16),transparent 55%),linear-gradient(160deg,rgba(21,35,80,.94),rgba(15,26,61,.97));color:#F5F2DF;font-family:Nunito,system-ui,sans-serif}
.kl[hidden]{display:none}
.kl-in{width:min(980px,100%);display:flex;flex-direction:column;gap:14px}
.kl-kick{margin:0;display:flex;gap:8px;align-items:center;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:#53EDFF}
.kl-title{margin:0;font:400 clamp(34px,5vw,60px)/1 "Lilita One",sans-serif;letter-spacing:.01em}
.kl-code{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kl-code>span{font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:12px;opacity:.7}
.kl-c{font:400 34px/1 "Lilita One",sans-serif;letter-spacing:.18em;color:#BAFF38;background:rgba(0,0,0,.25);padding:6px 14px;border-radius:12px}
.kl-seats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kl-seats li{display:flex;align-items:center;gap:8px;min-height:54px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.07);border:2px solid transparent;border-left:6px solid var(--dc,#3a4677)}
.kl-seats li.cpu{opacity:.45;border-left-color:#3a4677}
.kl-seats li.cpu i{width:34px;height:34px;border-radius:8px;background:#26315c}
.kl-seats li.me{border-color:#BAFF38}
.kl-seats li.away{opacity:.6}
.kl-seats img{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#26315c}
.kl-seats span{display:flex;flex-direction:column;min-width:0;flex:1}
.kl-seats b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.kl-seats small{opacity:.7;font-size:12px}
.kl-seats em{font-style:normal;font-weight:900;font-size:11px;letter-spacing:.06em;color:#FFE16B}
.kl-seats li.ready em{color:#BAFF38}
.kl-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.kl-col h2{margin:6px 0 8px;font:400 18px/1 "Lilita One",sans-serif;letter-spacing:.02em}
.kl-col h2 small{font:700 12px Nunito,sans-serif;opacity:.6;margin-left:6px}
.kl-drivers{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:190px;overflow:auto;padding:2px}
.kl-d{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:10px;background:rgba(255,255,255,.06);border:2px solid transparent;font-size:11px;font-weight:800}
.kl-d img{width:46px;height:46px;border-radius:8px;object-fit:cover;border-bottom:4px solid var(--dc)}
.kl-d span{max-width:62px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-d.on{border-color:#BAFF38;background:rgba(186,255,56,.14)}
.kl-d:focus-visible{outline:3px solid #53EDFF;outline-offset:1px}
.kl-seg{display:flex;gap:6px;margin-bottom:8px}
.kl-seg button{all:unset;cursor:pointer;flex:1;text-align:center;padding:8px 6px;border-radius:10px;background:rgba(255,255,255,.07);border:2px solid transparent;font:400 18px/1.1 "Lilita One",sans-serif}
.kl-seg button small{display:block;font:700 11px Nunito,sans-serif;opacity:.7}
.kl-seg button.on{border-color:#BAFF38;background:rgba(186,255,56,.14);color:#BAFF38}
.kl-seg button:focus-visible{outline:3px solid #53EDFF}
.kl:not(.is-host) .kl-cls button,.kl:not(.is-host) .kl-laps button,.kl:not(.is-host) .kl-track button{cursor:default;opacity:.75}
.kl-msg{margin:0;min-height:1.4em;font-weight:700;color:#cfd6ff}
.kl-msg.bad{color:#FF5FB4}
.kl-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.kl-go[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:760px){.kl-seats{grid-template-columns:repeat(2,minmax(0,1fr))}.kl-cols{grid-template-columns:1fr}}
@media (max-height:520px){.kl{place-items:start center}.kl-drivers{max-height:120px}}
/* the title lockup: the supplied GrowBlocks wordmark (assets/ui-launch/growblocks.svg), never retyped */
.lobby-title .kt-logo{height:.92em;width:auto;vertical-align:-.08em;display:inline-block;filter:drop-shadow(.04em .05em 0 rgba(0,0,0,.35))}
/* Crew the player does not own (src/kart/owned.js): shown, locked, linked to the Crew shop */
.ks-lock{display:none}
.ks-tile.locked .ks-face{filter:grayscale(1) brightness(.55)}
.ks-tile.locked .ks-lock{display:block;position:absolute;top:6%;right:6%;padding:.1em .45em;border-radius:.4em;background:#152350;color:#BAFF38;font:900 10px/1.4 Nunito,sans-serif;letter-spacing:.06em}
.ks-tile{position:relative}
.kselect.is-locked .ks-img{filter:grayscale(.85) brightness(.7)}
.kl-d.locked img{filter:grayscale(1) brightness(.55)}
.kl-d.locked{opacity:.7}
.kl-d.locked::after{content:'NFT';font:900 9px Nunito,sans-serif;color:#BAFF38;background:#152350;border-radius:4px;padding:0 4px;margin-top:-2px}

/* ================= Grand Prix layer (src/kart/gp-hud.js) ================= */
.kg{position:absolute;inset:0;pointer-events:none}
.kg[hidden]{display:none}
.kg-c{display:inline-grid;place-items:center;flex:none;width:calc(var(--u)*19px);height:calc(var(--u)*19px);border-radius:50%;background:#10152c;border:calc(var(--u)*3px) solid var(--cc);
 font:800 calc(var(--u)*11px)/1 var(--k-num);font-style:normal;color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
/* tyres: bottom-left, beside the minimap */
.kg-tyre{position:absolute;left:calc(var(--sl) + var(--u)*206px);bottom:var(--sb);width:calc(var(--u)*150px);padding:calc(var(--u)*8px) calc(var(--u)*10px) calc(var(--u)*9px);
 background:var(--pbg);border:1px solid var(--pline);border-radius:calc(var(--u)*14px);box-shadow:0 calc(var(--u)*6px) calc(var(--u)*16px) rgba(0,0,0,.3)}
.kg-tyre[hidden]{display:none}
.kg-th{display:flex;align-items:center;gap:calc(var(--u)*6px);margin-bottom:calc(var(--u)*6px)}
.kg-th .kg-c{width:calc(var(--u)*24px);height:calc(var(--u)*24px);font-size:calc(var(--u)*13px)}
.kg-tn{font:800 calc(var(--u)*14px)/1 var(--k-num);letter-spacing:.08em;color:#fff}
.kg-tl{margin-left:auto;font:700 calc(var(--u)*11px)/1 var(--k-num);letter-spacing:.1em;color:var(--k-dim)}
.kg-tyre.punct .kg-tl{color:var(--k-red);animation:kg-blink .5s steps(2) infinite}
.kg-car{position:relative;display:grid;grid-template-columns:1fr calc(var(--u)*24px) 1fr;grid-template-rows:1fr 1fr;gap:calc(var(--u)*5px) calc(var(--u)*4px);height:calc(var(--u)*62px)}
.kg-car .kg-w:nth-child(1){grid-area:1/1}.kg-car .kg-w:nth-child(2){grid-area:1/3}.kg-car .kg-w:nth-child(4){grid-area:2/1}.kg-car .kg-w:nth-child(5){grid-area:2/3}
.kg-body{grid-area:1/2/3/3;border-radius:calc(var(--u)*10px) calc(var(--u)*10px) calc(var(--u)*5px) calc(var(--u)*5px);background:linear-gradient(180deg,#2a3a78,#16214a);border:1px solid rgba(160,185,255,.3)}
.kg-w{display:grid;place-items:center;border-radius:calc(var(--u)*6px);background:color-mix(in srgb,var(--wc,#22d46a) 28%,#0b1024);border:calc(var(--u)*2px) solid var(--wc,#22d46a);
 font:700 calc(var(--u)*13px)/1 var(--k-num);color:#fff;font-variant-numeric:tabular-nums;transition:background .4s,border-color .4s}
.kg-w.gone{animation:kg-blink .7s steps(2) infinite}
.kg-tf{display:flex;justify-content:space-between;gap:calc(var(--u)*6px);margin-top:calc(var(--u)*7px);font:700 calc(var(--u)*11px)/1 var(--k-num);letter-spacing:.08em;color:var(--k-dim);white-space:nowrap}
.kg-win.hot{color:#fff;background:var(--k-red);padding:calc(var(--u)*2px) calc(var(--u)*5px);margin:calc(var(--u)*-2px) 0;border-radius:calc(var(--u)*4px);animation:kg-blink .6s steps(2) infinite}
@keyframes kg-blink{50%{opacity:.35}}
/* race control: under the item slot, top-centre */
.kg-rc{position:absolute;left:50%;top:calc(var(--st) + var(--u)*160px);transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--u)*10px);padding:calc(var(--u)*6px) calc(var(--u)*14px);
 border-radius:calc(var(--u)*8px);background:rgba(9,13,32,.86);border:1px solid var(--pline);font:700 calc(var(--u)*15px)/1 var(--k-num);letter-spacing:.08em;color:#fff;white-space:nowrap;opacity:0;transition:opacity .25s}
.kg-rc.on{opacity:1}
.kg-rc b{padding:calc(var(--u)*4px) calc(var(--u)*8px);border-radius:calc(var(--u)*5px);font:800 calc(var(--u)*16px)/1 var(--k-num);letter-spacing:.1em}
.kg-rc b.sc{background:#ffd21f;color:#151515;animation:kg-blink 1s steps(2) infinite}
.kg-rc b.q{background:var(--k-purple)}
.kg-rc b.lim{background:#2f7bff}
.kg-rc b.yf{background:#ffd21f;color:#151515}
.kg-rc b.gf{background:var(--k-green);color:#0b1024}
.kg-rc em{font-style:normal;color:var(--k-dim);font-size:calc(var(--u)*13px)}
.kg-rc span{font:800 calc(var(--u)*20px)/1 var(--k-num);font-variant-numeric:tabular-nums}
/* DRS: above the speedo */
.kg-drs{position:absolute;right:calc(var(--sr) + var(--u)*8px);bottom:calc(var(--sb) + var(--u)*236px);padding:calc(var(--u)*5px) calc(var(--u)*10px);border-radius:calc(var(--u)*6px);
 font:800 calc(var(--u)*17px)/1 var(--k-num);letter-spacing:.14em;color:rgba(255,255,255,.3);border:calc(var(--u)*2px) solid rgba(255,255,255,.18);background:rgba(9,13,32,.7);opacity:0;transition:all .2s}
.kg-drs[data-s="avail"]{opacity:1;color:#fff;border-color:var(--k-green)}
.kg-drs[data-s="open"]{opacity:1;color:#0b1024;background:var(--k-green);border-color:var(--k-green);box-shadow:0 0 calc(var(--u)*18px) rgba(34,212,106,.6)}
/* the stop: low in the frame, the kart is parked */
.kg-stop{position:absolute;left:50%;bottom:calc(var(--sb) + var(--u)*20px);transform:translateX(-50%);display:grid;grid-template-columns:auto auto auto;align-items:center;gap:calc(var(--u)*18px) calc(var(--u)*34px);
 padding:calc(var(--u)*14px) calc(var(--u)*30px);background:var(--pbg);border:1px solid var(--pline);border-top:calc(var(--u)*4px) solid var(--k-gold);border-radius:calc(var(--u)*16px);
 box-shadow:0 calc(var(--u)*10px) calc(var(--u)*30px) rgba(0,0,0,.45);pointer-events:auto;animation:kg-in .25s cubic-bezier(.2,1.3,.3,1)}
.kg-stop[hidden]{display:none}
@keyframes kg-in{from{transform:translateX(-50%) translateY(30%);opacity:0}}
.kg-sh{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4px);min-width:calc(var(--u)*92px)}
.kg-sh small{font:1000 calc(var(--u)*11px)/1 Nunito,sans-serif;letter-spacing:.2em;color:var(--k-gold)}
.kg-sh b{font:800 calc(var(--u)*40px)/1 var(--k-num);color:#fff;font-variant-numeric:tabular-nums}
.kg-pit{display:grid;grid-template-columns:calc(var(--u)*58px) calc(var(--u)*64px) calc(var(--u)*58px);grid-template-rows:calc(var(--u)*58px) calc(var(--u)*58px);gap:calc(var(--u)*10px) calc(var(--u)*8px)}
.kg-pit .kg-pw:nth-child(1){grid-area:1/1}.kg-pit .kg-pw:nth-child(2){grid-area:1/3}.kg-pit .kg-pw:nth-child(4){grid-area:2/1}.kg-pit .kg-pw:nth-child(5){grid-area:2/3}
.kg-pbody{grid-area:1/2/3/3;display:grid;place-items:center;border-radius:calc(var(--u)*16px) calc(var(--u)*16px) calc(var(--u)*8px) calc(var(--u)*8px);background:linear-gradient(180deg,#2a3a78,#16214a);border:1px solid rgba(160,185,255,.3)}
.kg-pbody span{font:800 calc(var(--u)*11px)/1.15 var(--k-num);letter-spacing:.1em;color:var(--k-gold);text-align:center;writing-mode:vertical-rl;transform:rotate(180deg)}
.kg-pw{display:grid;place-items:center;border:calc(var(--u)*3px) solid rgba(255,255,255,.18);border-radius:calc(var(--u)*12px);background:#141a33;color:#fff;font:800 calc(var(--u)*26px)/1 var(--k-num);cursor:pointer;transition:transform .1s,background .15s}
.kg-pw kbd{font:inherit;padding:0 calc(var(--u)*6px);border-radius:calc(var(--u)*6px);background:#f5f2df;color:#0f1a3d;box-shadow:0 calc(var(--u)*3px) 0 #0b1024}
.kg-pw[data-s="on"]{border-color:var(--k-gold);background:#3a3010;transform:scale(1.12);box-shadow:0 0 calc(var(--u)*24px) rgba(255,225,107,.7);animation:kg-pulse .35s ease-in-out infinite alternate}
.kg-pw[data-s="done"]{border-color:var(--k-green);background:#0f3a24;color:var(--k-green)}
.kg-pw[data-s="miss"]{border-color:var(--k-red);background:#4a0f1a}
.kg-pw:not([data-s="on"]) kbd{opacity:.45}
@keyframes kg-pulse{to{box-shadow:0 0 calc(var(--u)*8px) rgba(255,225,107,.4)}}
.kg-pick{display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--u)*6px);position:relative}
.kg-opts{display:flex;flex-direction:column;gap:calc(var(--u)*5px)}
.kg-opts b{display:flex;align-items:center;gap:calc(var(--u)*7px);padding:calc(var(--u)*5px) calc(var(--u)*10px);border-radius:calc(var(--u)*8px);border:calc(var(--u)*2px) solid transparent;
 font:700 calc(var(--u)*13px)/1 var(--k-num);letter-spacing:.1em;color:var(--k-dim);cursor:pointer}
.kg-opts b i{display:grid;place-items:center;width:calc(var(--u)*20px);height:calc(var(--u)*20px);border-radius:50%;border:calc(var(--u)*3px) solid var(--cc);font:800 calc(var(--u)*11px)/1 var(--k-num);font-style:normal;color:#fff}
.kg-opts b.on{border-color:var(--cc);color:#fff;background:rgba(255,255,255,.08)}
.kg-arr{position:absolute;top:50%;width:calc(var(--u)*22px);height:calc(var(--u)*22px);margin-top:calc(var(--u)*-11px);padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:calc(var(--u)*10px);cursor:pointer}
.kg-arr[data-d="-1"]{left:calc(var(--u)*-26px)}.kg-arr[data-d="1"]{right:calc(var(--u)*-26px)}
.kg-lolly{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*10px);font:800 calc(var(--u)*15px)/1 var(--k-num);letter-spacing:.12em;color:var(--k-dim);cursor:pointer}
.kg-lolly i{width:calc(var(--u)*22px);height:calc(var(--u)*22px);border-radius:50%;background:#3a3f55;border:calc(var(--u)*3px) solid #0b1024;box-shadow:0 0 0 calc(var(--u)*2px) #8a8fa0}
.kg-lolly[data-s="green"]{color:#fff}.kg-lolly[data-s="green"] i{background:var(--k-green);box-shadow:0 0 calc(var(--u)*18px) var(--k-green)}
.kg-lolly[data-s="red"]{color:var(--k-red)}.kg-lolly[data-s="red"] i{background:var(--k-red);box-shadow:0 0 calc(var(--u)*18px) var(--k-red)}
/* tower: compound + stops per driver, PIT, fastest lap */
.kh-row.gp{grid-template-columns:calc(var(--u)*30px) calc(var(--u)*5px) minmax(0,1fr) auto calc(var(--u)*34px)}
.kh-ty{display:flex;align-items:center;gap:calc(var(--u)*2px);height:100%}
.kh-ty:empty{display:none}
.kh-ty small{font:700 calc(var(--u)*11px)/1 var(--k-num);color:var(--k-dim)}
.kh-pit{padding:calc(var(--u)*2px) calc(var(--u)*4px);border-radius:calc(var(--u)*3px);background:#2f7bff;color:#fff;font:800 calc(var(--u)*11px)/1 var(--k-num);letter-spacing:.06em}
.kh-row.fl .kh-n{color:#d9a8ff}
.kh-row.me.fl .kh-n{color:#6a1fb0}
.kh-row.me .kh-ty small{color:#44558f}
/* results: tyre history */
.kr-ty{display:inline-flex;align-items:center;gap:3px;margin-left:8px}
.kr-ty .kg-c{width:17px;height:17px;border-width:3px;font-size:10px}
.kr-ty small{font:600 12px/1 var(--k-num);color:var(--a-dim,#8fa4cf);margin-left:4px;text-transform:none}
.kr-ty em{font:700 12px/1 var(--k-num);font-style:normal;color:#ff2e4d;margin-left:4px}
.kh-small .kg-tyre{left:calc(var(--sl) + var(--u)*190px)}
.kh-touch.kh-small .kg-tyre{left:var(--sl);bottom:calc(var(--sb) + var(--u)*150px)}
.kl:not(.is-gp) .kl-gponly{display:none}
.ks-row[hidden]{display:none!important}
/* Grand Prix setup has 7 rows: compact them so the start button stays on screen */
.ks-setup.gp{gap:calc(var(--u,1)*8px)}
.ks-setup.gp .ks-opt{height:calc(var(--u,1)*54px);gap:calc(var(--u,1)*3px)}
.ks-setup.gp .ks-opt b{font-size:calc(var(--u,1)*24px)}
.kr-name .kr-ty i.kg-c{width:17px;height:17px;border-radius:50%;background:#10152c;border:3px solid var(--cc);font-size:10px}

/* ================= GARAGE (#kgarage, src/kart/garage.js): kart parts, built karts, the parts shop ================= */
#kgarage{position:fixed;inset:0;z-index:60;pointer-events:auto;display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);color:#f5f2df;overflow:hidden;
 background:linear-gradient(100deg,rgba(8,12,30,.98) 0%,rgba(8,12,30,.95) 40%,rgba(10,16,40,.92) 100%);font-family:Nunito,sans-serif}
#kgarage[hidden]{display:none}
#kgarage.kin{animation:lobby-in .3s ease-out both}
#kgarage button{appearance:none;margin:0;font:inherit;color:inherit;cursor:pointer;box-sizing:border-box}
#kgarage button:focus-visible,#kgarage input:focus-visible{outline:3px solid #ffe369;outline-offset:3px}
#kgarage.busy .kgr-body{opacity:.7;pointer-events:none}
.kgr-slash{position:absolute;top:-10%;bottom:-10%;left:40%;width:calc(var(--u,1)*12px);background:#baff38;transform:skewX(-12deg);box-shadow:calc(var(--u,1)*22px) 0 0 #ff5fb4;opacity:.9;pointer-events:none;z-index:1}
.kgr-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
 background:radial-gradient(ellipse 70% 55% at 50% 40%,rgba(83,237,255,.22),transparent 70%),repeating-linear-gradient(-62deg,transparent 0 28px,rgba(186,255,56,.05) 28px 56px);transition:background .4s}
.kgr-hero.night{background:radial-gradient(ellipse 70% 55% at 50% 40%,rgba(99,70,215,.35),transparent 70%),#05071a}
.kgr-view{position:absolute;left:0;top:0;width:100%;height:64%;display:block}
.kgr-heroinfo{position:relative;z-index:2;padding:0 calc(var(--u,1)*40px) max(calc(var(--u,1)*18px),env(safe-area-inset-bottom)) max(calc(var(--u,1)*24px),env(safe-area-inset-left))}
.kgr-kname{margin:0 0 calc(var(--u,1)*8px);font:400 calc(var(--u,1)*34px)/1.1 "Lilita One",Nunito,sans-serif;text-transform:uppercase;color:#fff;transform:skewX(-8deg);text-shadow:3px 3px 0 #ff5fb4,6px 6px 0 #0b1024;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kgr-stats{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u,1)*5px) calc(var(--u,1)*14px)}
.kgr-stat{display:grid;grid-template-columns:calc(var(--u,1)*92px) 1fr calc(var(--u,1)*56px);align-items:center;gap:calc(var(--u,1)*6px);font:900 calc(var(--u,1)*11px)/1 Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8fa4cf}
.kgr-stat i{position:relative;height:calc(var(--u,1)*8px);border-radius:4px;background:rgba(255,255,255,.1)}
.kgr-stat i::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:rgba(255,255,255,.35)}
.kgr-stat b{position:absolute;top:0;bottom:0;border-radius:4px;background:#8fa4cf}
.kgr-stat.up b{background:#baff38;box-shadow:0 0 8px rgba(186,255,56,.5)}.kgr-stat.down b{background:#ff5f6d}
.kgr-stat em{font:800 calc(var(--u,1)*14px)/1 "Saira Condensed",Nunito,sans-serif;font-style:normal;color:#f5f2df;text-align:right;white-space:nowrap}
.kgr-stat.up em{color:#baff38}.kgr-stat.down em{color:#ff8a94}.kgr-stat em small{font-size:.7em;color:#ffe16b}
.kgr-note{margin:calc(var(--u,1)*8px) 0;font:700 calc(var(--u,1)*12px)/1.35 Nunito,sans-serif;color:#8fa4cf}
.kgr-herobtns{display:flex;gap:8px}
.kgr-main{position:relative;z-index:2;display:flex;flex-direction:column;gap:calc(var(--u,1)*10px);min-height:0;
 padding:max(calc(var(--u,1)*22px),env(safe-area-inset-top)) max(calc(var(--u,1)*32px),env(safe-area-inset-right)) max(calc(var(--u,1)*16px),env(safe-area-inset-bottom)) calc(var(--u,1)*64px)}
.kgr-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:calc(var(--u,1)*8px) calc(var(--u,1)*16px)}
.kgr-head .lobby-live{grid-column:1/-1;justify-self:start;margin:0;background:rgba(186,255,56,.12);border-color:rgba(186,255,56,.5);color:#d8ff9a}
.kgr-head .live-dot{background:#baff38}
.kgr-title{margin:0;display:flex;align-items:center;gap:calc(var(--u,1)*14px);font:400 calc(var(--u,1)*48px)/1 "Lilita One",Nunito,sans-serif;text-transform:uppercase;color:#fff}
.kgr-title img{height:calc(var(--u,1)*38px);width:auto}
.kgr-title span{transform:skewX(-8deg);text-shadow:4px 4px 0 #ff5fb4}
.kgr-wallet{display:flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:12px;background:rgba(16,26,61,.9);border:2px solid #34498a}
.kgr-wallet b{font:800 calc(var(--u,1)*26px)/1 "Saira Condensed",Nunito,sans-serif;color:#ffe16b}.kgr-wallet small{font-weight:900;letter-spacing:.14em;color:#8fa4cf}
#kgarage .kgr-wallet .ghost{margin-left:8px;min-height:32px;font-size:12px}
.kgr-tabs{grid-column:1/-1;display:flex;gap:8px}
.kgr-tabs button{padding:calc(var(--u,1)*9px) calc(var(--u,1)*18px);border-radius:12px;border:2px solid #34498a;background:rgba(16,26,61,.9);font:900 calc(var(--u,1)*15px)/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#c0cfe9;transform:skewX(-8deg);box-shadow:0 4px 0 #0b1024}
#kgarage .kgr-tabs button.on{background:#baff38;color:#14300b;border-color:#0b1024;box-shadow:0 4px 0 #3d6b16}
.kgr-msg{margin:0;min-height:1.3em;font:800 14px/1.3 Nunito,sans-serif;color:#c0cfe9}
.kgr-msg[data-kind="ok"]{color:#baff38}.kgr-msg[data-kind="bad"]{color:#ff8a94}.kgr-msg[data-kind="soon"]{color:#ffe16b}
.kgr-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 6px 12px 2px;scrollbar-width:thin;touch-action:pan-y}
.kgr-body h3{margin:14px 0 8px;font:400 20px/1 "Lilita One",Nunito,sans-serif;text-transform:uppercase;color:#fff}
.kgr-body h3 small{margin-left:8px;font:900 11px Nunito,sans-serif;letter-spacing:.14em;color:#8fa4cf}
.kgr-sub{margin:0 0 8px;font:700 14px/1.35 Nunito,sans-serif;color:#c0cfe9}
.kgr-empty{font:800 14px/1.4 Nunito,sans-serif;color:#8fa4cf}
.kgr-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
#kgarage .kgr-btn{min-height:40px;padding:0 14px;border-radius:11px;border:2px solid #4a63a5;background:rgba(16,26,61,.9);color:#e9f0ff;box-shadow:0 4px 0 #0b1024;font:900 14px Nunito,sans-serif}
#kgarage .kgr-btn:hover{border-color:#87a9ec}#kgarage .kgr-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #0b1024}
#kgarage .kgr-btn.primary{background:#baff38;color:#14300b;border-color:#0b1024;box-shadow:0 4px 0 #3d6b16}
#kgarage .kgr-btn.big{min-height:56px;padding:0 28px;font:400 26px/1 "Lilita One",Nunito,sans-serif;text-transform:uppercase;transform:skewX(-8deg)}
#kgarage .kgr-btn.warn{border-color:#ff5f6d;color:#ffc2c8}
#kgarage .kgr-btn:disabled{opacity:.6;cursor:default;background:rgba(16,26,61,.9);color:#c0cfe9;border-color:#34498a;box-shadow:none}
#kgarage .ghost{min-height:44px;padding:0 16px;border-radius:12px;border:2px solid #4a63a5;background:rgba(16,26,61,.85);color:#e9f0ff;box-shadow:0 4px 0 #0b1024;font:900 14px Nunito,sans-serif}
#kgarage .ghost[aria-pressed="true"]{background:#53edff;color:#0b1024;border-color:#0b1024}
#kgarage .ghost kbd{margin-left:6px;padding:2px 6px;border-radius:6px;background:#1c2a58;border:1.5px solid #4a63a5;font:1000 11px/1 Nunito,sans-serif;color:#e9f6ff}
.kgr-actions{display:flex;gap:10px}
.kgr-karts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.kgr-kart{padding:12px 14px;border-radius:16px;border:2px solid #34498a;background:linear-gradient(165deg,#1f2d62,#101839);box-shadow:0 5px 0 rgba(5,8,20,.6)}
.kgr-kart.active{border-color:#baff38;box-shadow:0 0 0 3px #baff38,0 0 24px rgba(186,255,56,.35)}
.kgr-kart.new{border-style:dashed}
.kgr-kart header{display:flex;align-items:center;gap:8px}
.kgr-kart header b{font:400 20px/1.1 "Lilita One",Nunito,sans-serif;text-transform:uppercase;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kgr-cols{display:flex;gap:3px}.kgr-cols i{width:16px;height:12px;border-radius:3px;transform:skewX(-14deg);box-shadow:0 0 0 1.5px rgba(255,255,255,.3)}.kgr-cols small{color:#8fa4cf;font-weight:800}
.kgr-badge{margin-left:auto;padding:3px 8px;border-radius:7px;background:#baff38;color:#14300b;font:1000 11px/1 Nunito,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase}
.kgr-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;min-height:24px}.kgr-chips small{color:#8fa4cf;font-weight:800}
.kgr-chip{padding:4px 8px;border-radius:8px;border:1.5px solid var(--rc);background:color-mix(in srgb,var(--rc) 14%,transparent);font:900 12px/1 Nunito,sans-serif;color:#f5f2df;white-space:nowrap}
.kgr-slots{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
#kgarage .kgr-slot{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:76px;padding:8px 4px;border-radius:12px;border:2px solid #34498a;background:rgba(16,26,61,.9);box-shadow:0 4px 0 #0b1024;min-width:0}
#kgarage .kgr-slot.filled{border-color:var(--rc)}
#kgarage .kgr-slot.on{background:#baff38;color:#14300b;border-color:#0b1024;box-shadow:0 4px 0 #3d6b16}
.kgr-si{font-size:20px;line-height:1}.kgr-slot small{font:900 10px/1 Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.8;text-align:center}
.kgr-slot b{font:800 12px/1.05 "Saira Condensed",Nunito,sans-serif;text-transform:uppercase;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.kgr-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
#kgarage .kgr-part{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border-radius:14px;border:2px solid color-mix(in srgb,var(--rc,#34498a) 60%,#34498a);background:linear-gradient(165deg,color-mix(in srgb,var(--rc,#1f2d62) 18%,#1f2d62),#101839);text-align:left;box-shadow:0 4px 0 #0b1024}
#kgarage .kgr-part.on{box-shadow:0 0 0 3px #baff38,0 4px 0 #0b1024}
.kgr-part em,.kgr-card em{font:1000 10px/1 Nunito,sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--rc,#8fa4cf)}
.kgr-part b{font:400 17px/1.05 "Lilita One",Nunito,sans-serif;text-transform:uppercase;color:#fff}
.kgr-part small{font:800 11px/1 "JetBrains Mono",monospace;color:#8fa4cf}
.kgr-lines{display:flex;flex-direction:column;gap:2px;margin-top:3px}
.kgr-lines span{font:900 12px/1.15 Nunito,sans-serif}.kgr-lines .up{color:#baff38}.kgr-lines .down{color:#ff8a94}.kgr-lines .cos{color:#c0cfe9}
.kgr-meta{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.kgr-namel{display:flex;align-items:center;gap:10px;font:900 12px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8fa4cf}
.kgr-name{flex:0 1 260px;min-height:38px;padding:0 12px;border-radius:10px;border:2px solid #4a63a5;background:#0d1430;color:#fff;font:800 16px Nunito,sans-serif;user-select:text;-webkit-user-select:text}
.kgr-colrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kgr-colrow span{width:56px;font:900 11px Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8fa4cf}
#kgarage .kgr-sw{width:28px;height:28px;border-radius:8px;border:2px solid rgba(255,255,255,.25);padding:0}
#kgarage .kgr-sw.on{border-color:#fff;box-shadow:0 0 0 2px #0b1024,0 0 0 4px #baff38}
.kgr-cpick{width:34px;height:30px;padding:0;border:2px solid #4a63a5;border-radius:8px;background:none}
.kgr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.kgr-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:2px solid color-mix(in srgb,var(--rc) 55%,#34498a);background:linear-gradient(165deg,#1f2d62,#101839);box-shadow:0 5px 0 rgba(5,8,20,.6);padding-bottom:10px}
.kgr-card.sel{box-shadow:0 0 0 3px var(--rc),0 5px 0 rgba(5,8,20,.6)}
#kgarage .kgr-thumb{display:block;padding:0;border:0;background:#141d45;aspect-ratio:16/10;width:100%}
.kgr-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.kgr-cm{display:flex;flex-direction:column;gap:3px;padding:8px 12px 0;flex:1}
.kgr-cm b{font:400 18px/1.05 "Lilita One",Nunito,sans-serif;text-transform:uppercase;color:#fff}
.kgr-sup{font:800 11px/1.2 Nunito,sans-serif;color:#8fa4cf;margin-top:4px}
.kgr-card .kgr-row{padding:0 12px}
#kgr-sheet{position:fixed;inset:0;z-index:80;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:min-content;align-content:start;gap:8px;padding:10px;background:#0b1024;overflow:auto}
#kgr-sheet[hidden]{display:none}
#kgr-sheet figure{margin:0;border-radius:10px;overflow:hidden;border:2px solid var(--rc);background:#141d45}
#kgr-sheet img{display:block;width:100%}
#kgr-sheet figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:4px 8px;font:400 15px "Lilita One",Nunito,sans-serif;color:#fff;text-transform:uppercase}
#kgr-sheet figcaption small{font:900 10px Nunito,sans-serif;letter-spacing:.1em;color:var(--rc)}
@media (max-height:520px){
 #kgarage{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
 .kgr-slash{left:34%}
 .kgr-view{height:56%}
 .kgr-heroinfo{padding-right:24px}
 .kgr-kname{font-size:20px}.kgr-note,.kgr-herobtns{display:none}
 .kgr-stats{grid-template-columns:1fr;gap:3px}.kgr-stat{grid-template-columns:66px 1fr 40px;font-size:9px}.kgr-stat em{font-size:12px}
 .kgr-title{font-size:28px}.kgr-title img{height:22px}.kgr-head .lobby-live{display:none}
 .kgr-wallet{padding:4px 10px}.kgr-wallet b{font-size:20px}
 .kgr-tabs button{padding:6px 12px;font-size:13px}
 .kgr-main{gap:6px;padding:10px 16px 8px 36px}
 .kgr-slots{grid-template-columns:repeat(5,minmax(0,1fr))}
 #kgarage .kgr-slot{min-height:50px;padding:5px 3px}.kgr-slot small{display:none}
 .kgr-msg{font-size:12px}
}
@media (hover:none) and (pointer:coarse){#kgarage .ghost kbd{display:none}}
.kgr-hint{font:800 12px/1.3 Nunito,sans-serif;color:#ffe16b}
.kgr-karts{align-items:start}
@media (max-height:520px){
 .kgr-head{grid-template-columns:1fr auto;gap:4px 8px}
 .kgr-wallet{padding:3px 8px;gap:4px}
 #kgarage .kgr-wallet .ghost{min-height:24px;padding:0 6px;font-size:10px;margin-left:4px}
 .kgr-sub,.kgr-body h3 small{display:none}
 .kgr-body h3{margin:8px 0 6px;font-size:16px}
 .kgr-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:6px}
 .kgr-cm{padding:5px 8px 0}.kgr-cm b{font-size:13px}.kgr-lines span{font-size:10px}.kgr-card em,.kgr-part em{font-size:9px}
 .kgr-karts{grid-template-columns:1fr;gap:8px}
 .kgr-wallet small{display:none}
 .kgr-kart{padding:8px 10px}.kgr-kart header b{font-size:15px}.kgr-chip{font-size:10px;padding:3px 6px}
 .kgr-parts{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
 #kgarage .kgr-part{padding:6px 8px}.kgr-part b{font-size:13px}
 #kgarage .kgr-btn{min-height:32px;font-size:12px;padding:0 10px}
 #kgarage .kgr-btn.big{min-height:40px;font-size:20px}
 #kgarage .kgr-actions .ghost{min-height:32px;font-size:12px}
 #kgarage .kgr-sw{width:22px;height:22px}
 .kgr-card .kgr-row{padding:0 8px}
}
.kgr-settle{display:block;margin-top:6px;font:800 11px/1.3 Nunito,sans-serif;color:#ffe16b}
/* a hidden garage button stays hidden whatever its button style says */
#kgarage [hidden]{display:none!important}

/* ================= TIME TRIAL (src/kart/timetrial.js): delta, rankings line, the FASTEST LAPS screen ================= */
.kh-tt .kh-posbox,.kh-tt .kh-laps,.kh-tt .kh-top .kh-item,.kh-tt .kh-slip{display:none}
.kh-tt .kh-pl{grid-template-columns:1fr}
.kh-tt .kh-timer{height:auto}
.kh-delta{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:calc(var(--u)*8px);margin-top:calc(var(--u)*8px);padding:calc(var(--u)*6px) calc(var(--u)*8px);
 border-radius:calc(var(--u)*8px);background:rgba(255,255,255,.06);border-left:calc(var(--u)*4px) solid var(--k-dim)}
.kh-delta[hidden]{display:none}
.kh-dref{font:1000 calc(var(--u)*10px)/1 Nunito,sans-serif;letter-spacing:.18em;color:var(--k-dim);white-space:nowrap;max-width:calc(var(--u)*90px);overflow:hidden;text-overflow:ellipsis}
.kh-dv{justify-self:end;font:800 calc(var(--u)*30px)/1 var(--k-num);color:#fff;font-variant-numeric:tabular-nums}
.kh-delta[data-tone="up"]{border-left-color:var(--k-green);background:rgba(34,212,106,.14)}.kh-delta[data-tone="up"] .kh-dv{color:#5dff9c}
.kh-delta[data-tone="down"]{border-left-color:var(--k-red);background:rgba(255,46,77,.14)}.kh-delta[data-tone="down"] .kh-dv{color:#ff7a8a}
.kh-split{grid-column:1/-1;justify-self:end;min-height:calc(var(--u)*14px);font:700 calc(var(--u)*14px)/1 var(--k-num);letter-spacing:.04em;color:var(--k-dim)}
.kh-split[data-tone="up"]{color:#5dff9c}.kh-split[data-tone="down"]{color:#ff7a8a}
.kh-ttmsg{margin:calc(var(--u)*6px) 0 0;font:900 calc(var(--u)*11px)/1.2 Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--k-gold)}
.kh-ttmsg[hidden]{display:none}
#kselect .ks-rank[hidden]{display:none}

.ktt-rank{position:fixed;inset:0;z-index:8;display:flex;justify-content:center;color:#f5f2df;font-family:Nunito,sans-serif;--dc:#c45bff;
 background:linear-gradient(100deg,rgba(8,12,30,.97),rgba(10,16,40,.93));overflow:hidden;animation:lobby-in .25s ease-out both}
.ktt-rank[hidden]{display:none}
.ktt-rank .ks-slash{left:6%}
.ktt-rank button{appearance:none;margin:0;font:inherit;cursor:pointer;box-sizing:border-box}
.ktt-in{position:relative;z-index:2;display:flex;flex-direction:column;gap:calc(var(--u,1)*12px);width:min(100%,calc(var(--u,1)*1060px));min-height:0;
 padding:max(calc(var(--u,1)*24px),env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(calc(var(--u,1)*18px),env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.ktt-head h1{margin:calc(var(--u,1)*4px) 0 0;font:400 calc(var(--u,1)*50px)/1 var(--k-disp);text-transform:uppercase;color:#fff;transform:skewX(-8deg);text-shadow:calc(var(--u,1)*4px) calc(var(--u,1)*4px) 0 var(--k-purple)}
.ktt-head .lobby-live{margin:0}
.ktt-tabs{display:flex;gap:calc(var(--u,1)*8px);flex-wrap:wrap}
.ktt-tabs .ks-opt{min-width:calc(var(--u,1)*104px);height:calc(var(--u,1)*50px);gap:calc(var(--u,1)*3px)}
.ktt-tabs .ks-opt b{font-size:calc(var(--u,1)*22px)}
.ktt-cls .ks-opt{min-width:calc(var(--u,1)*70px);height:calc(var(--u,1)*40px)}
.ktt-list{flex:1;min-height:0;overflow:auto;border-radius:calc(var(--u,1)*12px);background:rgba(9,13,32,.7);border:1px solid rgba(130,160,240,.22)}
.ktt-list ol{margin:0;padding:0;list-style:none}
.ktt-row{display:grid;grid-template-columns:calc(var(--u,1)*46px) minmax(0,1.4fr) minmax(0,1fr) calc(var(--u,1)*96px) calc(var(--u,1)*70px) calc(var(--u,1)*112px);align-items:center;gap:calc(var(--u,1)*10px);
 min-height:calc(var(--u,1)*42px);padding:calc(var(--u,1)*4px) calc(var(--u,1)*12px);border-bottom:1px solid rgba(130,160,240,.12)}
.ktt-th{position:sticky;top:0;z-index:1;background:#0d1530;font:1000 calc(var(--u,1)*10px)/1 Nunito,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--k-dim)}
.ktt-pos{font:800 calc(var(--u,1)*22px)/1 var(--k-num);color:#fff;transform:skewX(-8deg)}
.ktt-row.wr .ktt-pos{color:#d7a8ff}.ktt-row.wr .ktt-lap{color:#d7a8ff}
.ktt-name{font:900 calc(var(--u,1)*15px)/1.1 Nunito,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ktt-name small{margin-left:calc(var(--u,1)*6px);padding:2px 6px;border-radius:5px;background:var(--k-red);color:#fff;font-size:.7em;letter-spacing:.12em}
.ktt-crew{display:flex;align-items:center;gap:calc(var(--u,1)*6px);min-width:0;font:800 calc(var(--u,1)*13px)/1 Nunito,sans-serif;color:#c0cfe9}
.ktt-crew img{width:calc(var(--u,1)*30px);height:calc(var(--u,1)*30px);border-radius:50%;background:var(--dc);object-fit:cover;flex:none}
.ktt-crew em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ktt-lap{font:700 calc(var(--u,1)*20px)/1 var(--k-num);color:#fff;font-variant-numeric:tabular-nums}
.ktt-date{font:800 calc(var(--u,1)*12px)/1 Nunito,sans-serif;color:var(--k-dim)}
.ktt-race{padding:calc(var(--u,1)*7px) calc(var(--u,1)*10px);font-size:calc(var(--u,1)*12px)!important;white-space:nowrap}
.ktt-row.me{background:#f5f2df;color:#0f1a3d}.ktt-row.me .ktt-pos,.ktt-row.me .ktt-lap{color:#0f1a3d}.ktt-row.me .ktt-crew{color:#34416a}
.ktt-me{border-top:2px dashed rgba(130,160,240,.35)}
.ktt-me:empty{display:none}
.ktt-empty{padding:calc(var(--u,1)*28px) calc(var(--u,1)*16px);font:800 calc(var(--u,1)*15px)/1.45 Nunito,sans-serif;color:#c0cfe9}
.ktt-empty b{color:var(--k-gold)}
.ktt-note{margin:0;padding:calc(var(--u,1)*8px) calc(var(--u,1)*12px);font:800 calc(var(--u,1)*11px)/1.3 Nunito,sans-serif;color:var(--k-dim)}
.ktt-actions{display:flex;gap:calc(var(--u,1)*12px)}
@media (max-width:760px){.ktt-row{grid-template-columns:calc(var(--u,1)*34px) minmax(0,1fr) calc(var(--u,1)*84px) calc(var(--u,1)*92px)}.ktt-crew em,.ktt-date,.ktt-th span:nth-child(3),.ktt-th span:nth-child(5){display:none}.ktt-crew{display:none}}
.ktt-rank .ghost{min-height:calc(var(--u,1)*38px);padding:0 calc(var(--u,1)*14px);border-radius:calc(var(--u,1)*10px);border:2px solid #4a63a5;background:rgba(16,26,61,.85);color:#e9f0ff;box-shadow:0 4px 0 #0b1024;font:900 calc(var(--u,1)*14px) Nunito,sans-serif}
.ktt-rank .ghost:hover,.ktt-rank .ghost:focus-visible{border-color:var(--k-lime);color:#fff}
.ktt-rank .ktt-race{min-height:calc(var(--u,1)*32px);border-color:rgba(196,91,255,.7);background:rgba(196,91,255,.16);color:#ecd9ff}
.ktt-row.me .ktt-race{color:#0f1a3d;background:rgba(196,91,255,.25)}
.ktt-rank kbd{margin-left:6px;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.12);font:800 .8em Nunito,sans-serif}