/* Staging Lane game UI layer (gameui.js). Touch-first: big targets, landscape phone is the baseline (844x390). */
@import url(fonts/fonts.css);
:root{
  --z:1;--gz:1;
  --gu-display:'Barlow Semi Condensed','Barlow','Segoe UI',Roboto,Arial,sans-serif;
  --gu-title:'Barlow Semi Condensed','Barlow','Segoe UI',Arial,sans-serif;
  --gu-body:'Barlow','Segoe UI',Roboto,Arial,sans-serif;
  --gu-num:'Chakra Petch','Barlow',Consolas,monospace;
  --gu-hud:calc(58px*var(--z)); --gu-dock:calc(74px*var(--z));
  --gu-glass:rgba(10,11,14,.72); --gu-edge:rgba(255,255,255,.08);
  --gu-amber:#ff8a1f; --gu-amber2:#ffc061;
}
body.gui{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body.gui button{touch-action:manipulation}

/* ---------- HUD (the old header, restyled into an overlay) */
body.gui header{position:fixed;left:0;right:0;top:0;height:var(--gu-hud);padding:0 calc(14px*var(--z));gap:calc(12px*var(--z));flex-wrap:nowrap;border:0;
  background:linear-gradient(180deg,rgba(5,6,8,.92),rgba(5,6,8,.55) 70%,rgba(5,6,8,0));z-index:40}
body.gui .brand{font:800 calc(22px*var(--z))/1 var(--gu-title);letter-spacing:1px;font-style:normal;transform:skewX(-10deg);text-shadow:0 2px 0 #000}
body.gui .hud-top{gap:calc(10px*var(--z))}
body.gui #carName{display:none}
body.gui #clock{font:700 calc(15px*var(--z))/1 var(--gu-num);color:#d9dde5;background:var(--gu-glass);border:1px solid var(--gu-edge);padding:calc(8px*var(--z)) calc(12px*var(--z));border-radius:calc(999px*var(--z));white-space:nowrap}
body.gui #clock .owe{color:var(--bad);margin-left:calc(6px*var(--z))}
body.gui #money{font:700 calc(18px*var(--z))/1 var(--gu-num);color:#7dffa6;background:var(--gu-glass);border:1px solid rgba(62,207,110,.35);padding:calc(8px*var(--z)) calc(14px*var(--z)) calc(8px*var(--z)) calc(30px*var(--z));border-radius:calc(999px*var(--z));position:relative;
  text-shadow:0 0 calc(12px*var(--z)) rgba(62,207,110,.45)}
body.gui #money::before{content:'$';position:absolute;left:calc(10px*var(--z));top:50%;transform:translateY(-50%);width:calc(16px*var(--z));height:calc(16px*var(--z));border-radius:50%;background:#3ecf6e;color:#062;font:800 calc(11px*var(--z))/calc(16px*var(--z)) var(--gu-display);text-align:center;text-shadow:none}
body.gui #lvl{font:800 calc(15px*var(--z))/1 var(--gu-display);background:var(--gu-glass);border:1px solid var(--gu-edge);padding:calc(7px*var(--z)) calc(12px*var(--z));border-radius:calc(999px*var(--z));display:flex;align-items:center;gap:calc(8px*var(--z));color:var(--gu-amber2)}
body.gui #lvl .repbar{width:calc(54px*var(--z))}
/* sound + volume move into the gear sheet */
body.gui #soundBtn,body.gui .hud-top .vol{display:none}
body.gui.gu-set #soundBtn,body.gui.gu-set .hud-top .vol{display:flex}
body.gui.gu-set .hud-top .vol{position:fixed;top:calc(var(--gu-hud) + calc(58px*var(--z)));right:calc(14px*var(--z));background:#14161b;border:1px solid var(--gu-edge);border-radius:calc(12px*var(--z));padding:calc(12px*var(--z)) calc(14px*var(--z));z-index:46;align-items:center;gap:calc(10px*var(--z));min-height:calc(48px*var(--z))}
body.gui.gu-set #soundBtn{position:fixed;top:calc(var(--gu-hud) + calc(4px*var(--z)));right:calc(14px*var(--z));z-index:46;min-height:calc(48px*var(--z));padding:0 calc(18px*var(--z));border-radius:calc(12px*var(--z));background:#14161b;color:#e6e8ec;align-items:center;font-weight:700}
.gu-ic{width:calc(44px*var(--z));height:calc(44px*var(--z));border-radius:50%;display:grid;place-items:center;background:var(--gu-glass);border:1px solid var(--gu-edge);color:#cfd3da;cursor:pointer;flex:none}
.gu-ic svg{width:calc(22px*var(--z));height:calc(22px*var(--z))}
.gu-ic:active{transform:scale(.92)}
body.gui #menuBtn{font:700 0/0 a;width:calc(44px*var(--z));height:calc(44px*var(--z));border-radius:50%;padding:0;background:var(--gu-glass) center/calc(22px*var(--z)) no-repeat;border:1px solid var(--gu-edge);order:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfd3da' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}

/* ---------- Dock (the old tab bars, restyled into big icon buttons along the bottom) */
body.gui #tabs,body.gui.m-career #cnav{position:fixed;left:50%;transform:translateX(-50%);bottom:max(calc(8px*var(--z)),env(safe-area-inset-bottom));z-index:40;display:flex;gap:calc(6px*var(--z));flex-wrap:nowrap;
  padding:calc(6px*var(--z));border-radius:calc(20px*var(--z));background:linear-gradient(180deg,rgba(26,28,34,.94),rgba(12,13,16,.96));border:1px solid rgba(255,255,255,.07);
  box-shadow:0 calc(10px*var(--z)) calc(30px*var(--z)) rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
body.gui.m-career #tabs{display:none}
body.gui #tabs button,body.gui #cnav button{min-width:calc(68px*var(--z));height:calc(60px*var(--z));padding:calc(30px*var(--z)) calc(8px*var(--z)) 0;border-radius:calc(14px*var(--z));border:0;background:transparent;color:#8d939e;position:relative;
  font:700 calc(14px*var(--z))/1 var(--gu-display);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;transition:transform .08s,background .15s,color .15s}
body.gui #tabs button::before,body.gui #cnav button::before{content:'';position:absolute;left:50%;top:calc(9px*var(--z));width:calc(26px*var(--z));height:calc(26px*var(--z));transform:translateX(-50%);background:currentColor;
  -webkit-mask:var(--gu-icon) center/contain no-repeat;mask:var(--gu-icon) center/contain no-repeat}
body.gui #tabs button:active,body.gui #cnav button:active{transform:scale(.93)}
body.gui #tabs button.on,body.gui #cnav button.on{color:#140a00;background:linear-gradient(180deg,var(--gu-amber2),var(--gu-amber));box-shadow:0 0 calc(18px*var(--z)) rgba(255,138,31,.45),inset 0 -3px 0 rgba(0,0,0,.18)}
[data-tab=garage],[data-cn=garage]{--gu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 8v14h4V11h14v11h4V8z M7 13h10v2H7z M7 17h10v2H7z M7 21h10v1H7z'/%3E%3C/svg%3E")}
[data-tab=shop]{--gu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.6 18.6 13.5 9.5c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 5.7 5.7 9 1.3 4.6C.1 7 .6 10 2.6 12c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.6-2.6c.4-.4.4-1 0-1.4z'/%3E%3C/svg%3E")}
[data-tab=body]{--gu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h6v4H7z M5 7h10v15H5z M17 3h2v2h-2z M20 5h2v2h-2z M17 7h2v2h-2z M20 9h2v2h-2z'/%3E%3C/svg%3E")}
[data-tab=tune],[data-cn=tune]{--gu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v12H3z M1 18h22v2H1z' /%3E%3Cpath d='M5 13l3-4 3 2 3-5 3 3' stroke='%23000' stroke-width='1.8' fill='none'/%3E%3C/svg%3E")}
[data-tab=dyno]{--gu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a10 10 0 0 0-10 10c0 2.8 1.1 5.3 3 7.1L6.4 18.7A8 8 0 1 1 17.6 18.7L19 20.1A10 10 0 0 0 12 3z M11 14l5.5-6.5 1 1L12.9 15A1.6 1.6 0 1 1 11 14z'/%3E%3C/svg%3E")}
[data-tab=race]{--gu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2h2v20H4z M7 3h14v11H7z' /%3E%3Cpath d='M7 3h3.5v3.7H7zm7 0h3.5v3.7H14zm-3.5 3.7H14v3.6h-3.5zm7 0H21v3.6h-3.5zM7 10.3h3.5V14H7zm7 0h3.5V14H14z' fill='%23000' opacity='.55'/%3E%3C/svg%3E")}
[data-tab=dealer]{--gu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12 12 2h9v9L11 21zM17 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E")}
[data-cn=map]{--gu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 3 5v16l6-2 6 2 6-2V3l-6 2zm0 2.2 6 2v13.6l-6-2z'/%3E%3C/svg%3E")}
[data-cn=ray]{--gu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4 3 12l8 8v-5h10V9H11z'/%3E%3C/svg%3E")}

/* page frame: content clears the HUD and the dock */
body.gui main{padding-top:calc(var(--gu-hud) + calc(6px*var(--z)));padding-bottom:calc(var(--gu-dock) + calc(24px*var(--z)))}
body.gui #toast{bottom:calc(var(--gu-dock) + calc(22px*var(--z)));font:700 calc(15px*var(--z))/1.3 var(--gu-display);letter-spacing:.3px;border-radius:calc(12px*var(--z));padding:calc(12px*var(--z)) calc(18px*var(--z));background:#16130f;border-color:var(--gu-amber);box-shadow:0 calc(8px*var(--z)) calc(24px*var(--z)) rgba(0,0,0,.6)}

/* ================================================================== THE BAY */
body.gu-bay main{max-width:none;padding:0;height:100dvh;overflow:hidden}
.bay{position:relative;width:100%;height:100dvh;overflow:hidden;background:#0b0b0b;user-select:none}
.bay .bayBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bay .bayLight{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 40%,rgba(255,236,200,.06),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.35),transparent 25%,transparent 70%,rgba(0,0,0,.55))}
.bay .carWrap{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}
.bay canvas{background:transparent;border-radius:0;max-width:none}
.bay .carWrap canvas{display:block;width:100%;height:100%}
.bay .carShadow{position:absolute;left:4%;right:4%;bottom:-2%;height:14%;background:radial-gradient(ellipse at center,rgba(0,0,0,.85),rgba(0,0,0,.4) 45%,transparent 72%);filter:blur(3px)}
.bay .carWrap.in{animation:guRoll .55s cubic-bezier(.2,.8,.25,1)}
@keyframes guRoll{from{transform:translateX(-40%);opacity:0}to{transform:translateX(-50%);opacity:1}}

/* hotspots: tap targets on the car and the walls */
.hs{position:absolute;transform:translate(-50%,-50%);width:calc(48px*var(--z));height:calc(48px*var(--z));border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;z-index:5}
.hs::before{content:'';position:absolute;inset:calc(12px*var(--z));border-radius:50%;background:var(--hc,#ffb347);box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 calc(14px*var(--z)) var(--hc,#ffb347)}
.hs::after{content:'';position:absolute;inset:calc(4px*var(--z));border-radius:50%;border:2px solid var(--hc,#ffb347);opacity:.0;animation:guPing 2.2s ease-out infinite}
.hs.bad{--hc:#ff4d4d}.hs.warn{--hc:#f2c94c}.hs.good{--hc:#3ecf6e}
.hs .hl{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);white-space:nowrap;font:700 calc(15px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase;color:#fff;
  background:rgba(8,9,11,.82);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--hc,#ffb347);padding:calc(5px*var(--z)) calc(8px*var(--z));border-radius:calc(4px*var(--z));margin-bottom:2px;pointer-events:none}
.hs .hl b{font:700 calc(15px*var(--z))/1 var(--gu-num);color:var(--hc,#ffb347);margin-left:calc(6px*var(--z))}
@keyframes guPing{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(1.5);opacity:0}}
.hs:active::before{transform:scale(.85)}

/* the name plate (top centre) */
.plate{position:absolute;left:50%;top:calc(var(--gu-hud) + 2px);transform:translateX(-50%);text-align:center;z-index:6;cursor:pointer;background:none;border:0;color:inherit;padding:calc(4px*var(--z)) calc(18px*var(--z))}
.plate .nm{font:800 clamp(calc(22px*var(--z)),4.4vw,calc(40px*var(--z)))/1 var(--gu-title);letter-spacing:.5px;color:#f2f2f2;text-transform:uppercase;text-shadow:0 2px 0 #000,0 0 calc(24px*var(--z)) rgba(0,0,0,.9)}
.plate .nick{font:800 calc(13px*var(--z))/1 var(--gu-display);color:var(--gu-amber2);letter-spacing:2px;text-transform:uppercase;margin-bottom:3px}
.plate .sub{font:600 calc(15px*var(--z))/1.2 var(--gu-num);color:#aab0ba;margin-top:calc(4px*var(--z));letter-spacing:.4px}

/* stat strip (bottom left) */
.stats{position:absolute;left:calc(14px*var(--z));bottom:calc(var(--gu-dock) + calc(22px*var(--z)));display:flex;gap:calc(6px*var(--z));z-index:6}
.stat{background:linear-gradient(180deg,rgba(18,19,23,.86),rgba(8,9,11,.9));border:1px solid rgba(255,255,255,.07);border-top:2px solid var(--gu-amber);padding:calc(6px*var(--z)) calc(10px*var(--z)) calc(7px*var(--z));border-radius:calc(6px*var(--z));min-width:calc(76px*var(--z));clip-path:polygon(0 0,100% 0,100% 72%,88% 100%,0 100%)}
.stat .k{font:700 calc(12px*var(--z))/1 var(--gu-display);letter-spacing:1.2px;color:#8b919c;text-transform:uppercase}
.stat .v{font:700 calc(19px*var(--z))/1.1 var(--gu-num);color:#fff;margin-top:3px;white-space:nowrap}
.stat .v small{font-size:calc(11px*var(--z));color:#9aa0aa;margin-left:2px}

/* big call to action (bottom right) */
.bayGo{position:absolute;right:calc(14px*var(--z));bottom:calc(var(--gu-dock) + calc(22px*var(--z)));z-index:6;display:flex;gap:calc(8px*var(--z))}
.gbtn{border:0;cursor:pointer;min-height:calc(52px*var(--z));padding:0 calc(22px*var(--z));font:800 calc(18px*var(--z))/1 var(--gu-display);letter-spacing:1px;text-transform:uppercase;color:#160b00;
  background:linear-gradient(180deg,#ffc061,#ff8a1f 55%,#e2700c);border-radius:calc(6px*var(--z));transform:skewX(-10deg);box-shadow:0 calc(5px*var(--z)) 0 #8a3f00,0 calc(10px*var(--z)) calc(22px*var(--z)) rgba(0,0,0,.55);transition:transform .06s,box-shadow .06s}
.gbtn>span{display:inline-block;transform:skewX(10deg)}
.gbtn:active{transform:skewX(-10deg) translateY(calc(4px*var(--z)));box-shadow:0 1px 0 #8a3f00,0 calc(4px*var(--z)) calc(10px*var(--z)) rgba(0,0,0,.5)}
.gbtn.dark{color:#e6e8ec;background:linear-gradient(180deg,#2a2d35,#17191e);box-shadow:0 calc(5px*var(--z)) 0 #050506,0 calc(10px*var(--z)) calc(22px*var(--z)) rgba(0,0,0,.55)}
.gbtn.red{color:#fff;background:linear-gradient(180deg,#ff6b5b,#d9302a);box-shadow:0 calc(5px*var(--z)) 0 #6d1110,0 calc(10px*var(--z)) calc(22px*var(--z)) rgba(0,0,0,.55)}

/* switch between your cars */
.carNav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:calc(52px*var(--z));height:calc(72px*var(--z));border:0;border-radius:calc(10px*var(--z));background:rgba(8,9,11,.6);color:#e6e8ec;cursor:pointer;
  font:800 calc(30px*var(--z))/1 var(--gu-display);border:1px solid rgba(255,255,255,.08)}
.carNav.l{left:calc(10px*var(--z))}.carNav.r{right:calc(10px*var(--z))}
.carNav:active{transform:translateY(-50%) scale(.92)}
.bayNo{position:absolute;left:50%;transform:translateX(-50%) perspective(calc(200px*var(--z))) rotateX(38deg);z-index:4;font:800 calc(22px*var(--z))/1 var(--gu-display);letter-spacing:calc(4px*var(--z));color:rgba(214,186,82,.75);background:none;border:0;padding:calc(6px*var(--z)) calc(14px*var(--z));cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.bayNo i{font-style:normal;font-size:calc(14px*var(--z));opacity:.7}

/* alert banner */
.bayAlert{position:absolute;left:50%;top:calc(var(--gu-hud) + calc(76px*var(--z)));transform:translateX(-50%);z-index:7;max-width:min(calc(560px*var(--z)),86vw);display:flex;gap:calc(10px*var(--z));align-items:center;
  background:linear-gradient(90deg,rgba(120,14,14,.92),rgba(60,8,8,.92));border:1px solid #ff4d4d;border-radius:calc(10px*var(--z));padding:calc(8px*var(--z)) calc(10px*var(--z)) calc(8px*var(--z)) calc(14px*var(--z));font:600 calc(14px*var(--z))/1.25 var(--gu-body);color:#ffe2e0;box-shadow:0 0 calc(24px*var(--z)) rgba(255,60,60,.35)}
.bayAlert .gbtn{min-height:calc(42px*var(--z));font-size:calc(15px*var(--z));padding:0 calc(14px*var(--z));flex:none}

/* ---------- sheets: the old panels slide in from the side (bottom on portrait) */
.gu-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.gu-scrim.on{opacity:1;pointer-events:auto}
.gu-sheet{position:fixed;top:0;right:0;bottom:0;width:min(calc(460px*var(--z)),56vw);z-index:51;background:linear-gradient(180deg,#17181c,#0f1013);border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-20px 0 calc(40px*var(--z)) rgba(0,0,0,.6);transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.8,.25,1);display:flex;flex-direction:column}
.gu-sheet.on{transform:none}
.gu-sheet .sh{display:flex;align-items:center;gap:calc(10px*var(--z));padding:calc(10px*var(--z)) calc(10px*var(--z)) calc(10px*var(--z)) calc(18px*var(--z));border-bottom:1px solid rgba(255,255,255,.07);min-height:var(--gu-hud);
  background:linear-gradient(90deg,rgba(255,138,31,.16),transparent 60%)}
.gu-sheet .sh h2{margin:0;flex:1;font:800 calc(24px*var(--z))/1 var(--gu-title);letter-spacing:.6px;text-transform:uppercase;color:#fff}
.gu-sheet .sb{flex:1;overflow:auto;padding:calc(12px*var(--z)) calc(14px*var(--z)) calc(30px*var(--z));-webkit-overflow-scrolling:touch}
.gu-sheet .sb>.panel{background:transparent;border:0;padding:0;margin-bottom:calc(18px*var(--z))}
.gu-sheet .sb>.panel>h3:first-child{font:800 calc(14px*var(--z))/1 var(--gu-display);letter-spacing:1.6px;color:var(--gu-amber2);margin-bottom:calc(10px*var(--z))}
.gu-sheet .cond{min-height:calc(44px*var(--z));margin:2px 0}
.gu-sheet .cond .lbl{width:calc(118px*var(--z));font-weight:600}
.gu-sheet .bar{height:calc(12px*var(--z));border-radius:2px;background:#25272d;clip-path:polygon(0 0,100% 0,calc(100% - calc(4px*var(--z))) 100%,0 100%)}
.gu-sheet .pct{font:700 calc(14px*var(--z))/1 var(--gu-num)!important;width:calc(44px*var(--z))}
.gu-sheet .ghost.small,.gu-sheet .btn{min-height:calc(40px*var(--z));padding:0 calc(12px*var(--z));font-weight:700}
.gu-sheet .btn{border-radius:calc(6px*var(--z))}
.gu-sheet .cond>.row{flex-wrap:nowrap}
@media (orientation:portrait){
  .gu-sheet{top:auto;left:0;width:auto;height:min(78dvh,calc(640px*var(--z)));border-left:0;border-top:1px solid rgba(255,255,255,.1);border-radius:calc(18px*var(--z)) calc(18px*var(--z)) 0 0;transform:translateY(102%)}
  .gu-sheet .sh::before{content:'';position:absolute;left:50%;top:calc(6px*var(--z));width:calc(40px*var(--z));height:calc(4px*var(--z));border-radius:2px;background:#444;transform:translateX(-50%)}
  .stats{left:calc(10px*var(--z));right:calc(10px*var(--z));bottom:calc(var(--gu-dock) + calc(86px*var(--z)));justify-content:center}
  .bayGo{left:calc(10px*var(--z));right:calc(10px*var(--z));justify-content:center}
  .carNav{top:auto;bottom:calc(var(--gu-dock) + calc(160px*var(--z)));transform:none}
}
/* phones in landscape: tighter */
@media (max-height:440px){
  :root{--gu-hud:calc(50px*var(--z));--gu-dock:calc(62px*var(--z))}
  body.gui #tabs button,body.gui #cnav button{height:calc(52px*var(--z));min-width:calc(62px*var(--z));padding-top:calc(28px*var(--z));font-size:calc(12.5px*var(--z))}
  body.gui #tabs button::before,body.gui #cnav button::before{top:calc(5px*var(--z));width:calc(22px*var(--z));height:calc(22px*var(--z))}
  body.gui .brand{font-size:calc(18px*var(--z))}
  .stats{bottom:calc(var(--gu-dock) + calc(18px*var(--z)))}.bayGo{bottom:calc(var(--gu-dock) + calc(18px*var(--z)))}
  .stat{min-width:calc(64px*var(--z));padding:calc(5px*var(--z)) calc(8px*var(--z))}.stat .v{font-size:calc(16px*var(--z))}
  .gbtn{min-height:calc(46px*var(--z));font-size:calc(16px*var(--z));padding:0 calc(16px*var(--z))}
  .plate .nm{font-size:calc(26px*var(--z))}
}
@media (max-width:620px){ body.gui .brand{display:none} body.gui #lvl .repbar{display:none} }
.gu-close{width:calc(48px*var(--z));height:calc(48px*var(--z));border-radius:calc(12px*var(--z));border:1px solid rgba(255,255,255,.1);background:#1d1f25;color:#fff;font:700 calc(22px*var(--z))/1 sans-serif;cursor:pointer}

/* no dock on the title screen, online screens, or while a race is running; races get the whole screen */
body.gui.m-title #tabs,body.gui.m-title #cnav,body.gui.m-online #tabs,body.gui.m-online #cnav{display:none}
body.gui:has(#view .raceWrap) #tabs,body.gui:has(#view .raceWrap) #cnav{display:none}
body.gui:has(#view .raceWrap) main{padding-bottom:calc(12px*var(--z))}

/* ================================================================== THE TOWN MAP */
body.gu-map main{max-width:none;padding:0;height:100dvh;overflow:hidden}
body.gu-map .mapWrap{display:block;min-height:0;height:100dvh;position:relative}
body.gu-map .map{position:absolute;inset:0;min-height:0;border:0;border-radius:0;touch-action:none;cursor:default}
.mapHud{position:absolute;left:calc(12px*var(--z));top:calc(var(--gu-hud) + calc(6px*var(--z)));z-index:8;display:flex;gap:calc(8px*var(--z));align-items:flex-start}
.goalChip{max-width:min(calc(380px*var(--z)),46vw);text-align:left;cursor:pointer;background:linear-gradient(180deg,rgba(18,19,23,.9),rgba(8,9,11,.92));border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--gu-amber);
  border-radius:calc(6px*var(--z));padding:calc(7px*var(--z)) calc(12px*var(--z));color:#e6e8ec;display:flex;flex-direction:column;gap:3px;min-height:calc(44px*var(--z));justify-content:center}
.goalChip .gk{font:800 calc(14px*var(--z))/1 var(--gu-display);letter-spacing:1.4px;text-transform:uppercase;color:var(--gu-amber2)}
.goalChip .gn{font:600 calc(16px*var(--z))/1.25 var(--gu-body);color:#e6e8ec}
.phoneBtn{position:relative}
.phoneBtn .nb{position:absolute;right:-3px;top:-3px;min-width:calc(20px*var(--z));height:calc(20px*var(--z));border-radius:calc(10px*var(--z));background:#ff4d4d;color:#fff;font:800 calc(12px*var(--z))/calc(20px*var(--z)) var(--gu-display);font-style:normal;text-align:center;padding:0 calc(5px*var(--z));box-shadow:0 0 0 2px #0b0c10}
.mapGo{position:absolute;right:calc(14px*var(--z));bottom:max(calc(14px*var(--z)),env(safe-area-inset-bottom));z-index:8}
.mapGo .gbtn{min-height:calc(52px*var(--z));font-size:calc(16px*var(--z))}
@media (max-height:440px){.mapGo .gbtn{min-height:calc(46px*var(--z));font-size:calc(14px*var(--z));padding:0 calc(14px*var(--z))}}
body.gu-map .map .pin span b{font-family:var(--gu-display);font-weight:800;letter-spacing:1.2px;font-size:calc(15px*var(--z))}

/* ================================================================== RAY'S PARTS COUNTER (vShop) */
body.gu-shop main{max-width:none;padding:calc(var(--gu-hud) + calc(4px*var(--z))) 0 0;height:100dvh;overflow:hidden;
  background:linear-gradient(180deg,rgba(8,8,9,.55),rgba(8,8,9,.82)),url(img/ui/shop_bg.webp) center/cover,
  radial-gradient(ellipse 80% 60% at 60% 20%,#2b2620,#121110 70%)}
body.gu-shop .store{height:100%;display:flex;flex-direction:column}
body.gu-shop .store .storehead{margin:0;padding:calc(4px*var(--z)) calc(16px*var(--z)) calc(8px*var(--z));border:0;align-items:center;gap:calc(10px*var(--z));flex-direction:row}
body.gu-shop .store .storehead>div:first-child{flex:1;min-width:0}
body.gu-shop .sname{font:800 calc(24px*var(--z))/1 var(--gu-title);letter-spacing:1px;color:var(--gu-amber);text-shadow:0 2px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.gu-shop .sname span{display:none}
body.gu-shop .storehead .muted.small{display:none}
body.gu-shop .search{width:calc(200px*var(--z));min-height:calc(44px*var(--z));border-radius:calc(10px*var(--z));background:rgba(10,11,13,.8);border-color:rgba(255,255,255,.1);font-size:calc(15px*var(--z))}
.buildChip{min-height:calc(44px*var(--z));display:flex;align-items:center;gap:calc(8px*var(--z));padding:0 calc(14px*var(--z));border-radius:calc(10px*var(--z));border:1px solid rgba(255,255,255,.1);background:rgba(10,11,13,.8);color:#e6e8ec;
  font:700 calc(14px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.buildChip i{width:calc(10px*var(--z));height:calc(10px*var(--z));border-radius:50%;background:var(--good);box-shadow:0 0 calc(10px*var(--z)) var(--good)}
.buildChip.warn i{background:var(--warn);box-shadow:0 0 calc(10px*var(--z)) var(--warn)}.buildChip.bad i{background:var(--bad);box-shadow:0 0 calc(10px*var(--z)) var(--bad)}
body.gu-shop .storebody{flex:1;min-height:0;display:grid;grid-template-columns:calc(150px*var(--z)) 1fr;gap:0}
body.gu-shop .cats{position:static;height:100%;overflow:auto;flex-direction:column;flex-wrap:nowrap;gap:calc(4px*var(--z));padding:2px calc(8px*var(--z)) calc(var(--gu-dock) + calc(20px*var(--z))) calc(12px*var(--z))}
body.gu-shop .cats button{display:flex;align-items:center;gap:calc(8px*var(--z));min-height:calc(46px*var(--z));padding:0 calc(10px*var(--z));border-radius:calc(8px*var(--z));background:rgba(14,15,18,.82);border:1px solid rgba(255,255,255,.06);
  font:700 calc(15px*var(--z))/1.05 var(--gu-display);letter-spacing:.4px;text-transform:uppercase;color:#c3c8d0;text-align:left;flex:none}
body.gu-shop .cats button svg{width:calc(20px*var(--z));height:calc(20px*var(--z));fill:currentColor;flex:none}
body.gu-shop .cats button.on{color:#160b00;background:linear-gradient(180deg,var(--gu-amber2),var(--gu-amber));border-color:transparent;box-shadow:0 0 calc(14px*var(--z)) rgba(255,138,31,.35)}
body.gu-shop #shopGrid{height:100%;overflow:auto;padding:2px calc(12px*var(--z)) calc(var(--gu-dock) + calc(30px*var(--z))) calc(4px*var(--z));-webkit-overflow-scrolling:touch}
body.gu-shop .shead{font:800 calc(16px*var(--z))/1 var(--gu-display);letter-spacing:1.6px;color:#fff;margin:calc(6px*var(--z)) 0 calc(8px*var(--z));display:flex;align-items:center;gap:calc(10px*var(--z))}
body.gu-shop .shead::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,rgba(255,138,31,.6),transparent)}
body.gu-shop .pgrid{display:flex;gap:calc(12px*var(--z));overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px calc(12px*var(--z));margin-bottom:calc(6px*var(--z));grid-template-columns:none}
body.gu-shop .prod{flex:0 0 calc(236px*var(--z));scroll-snap-align:start;border-radius:calc(10px*var(--z));background:linear-gradient(180deg,#1b1c20,#111215);border:1px solid rgba(255,255,255,.07);box-shadow:0 calc(8px*var(--z)) calc(18px*var(--z)) rgba(0,0,0,.45)}
body.gu-shop .prod.inst{border-color:rgba(62,207,110,.7);box-shadow:0 0 0 1px rgba(62,207,110,.25),0 calc(8px*var(--z)) calc(18px*var(--z)) rgba(0,0,0,.45)}
body.gu-shop .prod.lvlock{opacity:.6;filter:saturate(.4)}
body.gu-shop .pphoto{aspect-ratio:236/130}
body.gu-shop .pbody{padding:calc(8px*var(--z)) calc(10px*var(--z)) calc(10px*var(--z));gap:calc(5px*var(--z))}
body.gu-shop .pname{font:800 calc(17px*var(--z))/1.05 var(--gu-display);letter-spacing:.3px;text-transform:uppercase}
body.gu-shop .pcat{display:none}
body.gu-shop .price{font:700 calc(20px*var(--z))/1 var(--gu-num);color:#7dffa6}
body.gu-shop .pfoot{flex-wrap:wrap}
body.gu-shop .pfoot .btn{min-height:calc(42px*var(--z));padding:0 calc(14px*var(--z));border-radius:calc(6px*var(--z));font:800 calc(15px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase;
  background:linear-gradient(180deg,#ffc061,#ff8a1f 60%,#e2700c);box-shadow:0 3px 0 #8a3f00;color:#160b00}
body.gu-shop .pfoot .btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8a3f00}
body.gu-shop .pfoot .ghost{min-height:calc(42px*var(--z));font-weight:700}
body.gu-shop .tag{font:800 calc(13px*var(--z))/1 var(--gu-display);letter-spacing:1px;padding:calc(6px*var(--z)) calc(8px*var(--z));border-radius:calc(4px*var(--z))}
body.gu-shop .ribbon{font:800 calc(13px*var(--z))/1 var(--gu-display);letter-spacing:1px}
@media (max-height:440px){ body.gu-shop .storehead{padding:2px calc(12px*var(--z)) calc(6px*var(--z))} body.gu-shop .sname{font-size:calc(20px*var(--z))} body.gu-shop .storebody{grid-template-columns:calc(132px*var(--z)) 1fr}
  body.gu-shop .prod{flex-basis:calc(210px*var(--z))} body.gu-shop .search{width:calc(150px*var(--z))} }
@media (max-width:700px){ body.gu-shop .search{width:calc(110px*var(--z))} }
/* short landscape phones: cards go sideways (photo left, details right) so a whole card fits above the dock */
@media (max-height:440px){
  body.gu-shop .prod{flex:0 0 calc(330px*var(--z));display:grid;grid-template-columns:calc(116px*var(--z)) 1fr;max-height:calc(200px*var(--z))}
  body.gu-shop .prod .pic{height:100%}
  body.gu-shop .prod .pic{display:flex}
  body.gu-shop .pphoto{aspect-ratio:auto;height:100%;flex:1}
  body.gu-shop .pbody{min-width:0;overflow:hidden}
  body.gu-shop .pbody>.muted.small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:calc(11px*var(--z));line-height:1.25}
  body.gu-shop .pname{font-size:calc(15px*var(--z))}
  body.gu-shop .price{font-size:calc(17px*var(--z))}
  body.gu-shop .pfoot .btn{min-height:calc(38px*var(--z));font-size:calc(13px*var(--z));padding:0 calc(10px*var(--z))}
  body.gu-shop .cats button{font-size:calc(11.5px*var(--z));min-height:calc(42px*var(--z));padding:0 calc(8px*var(--z))}
  body.gu-shop .shead{font-size:calc(14px*var(--z));margin:2px 0 calc(6px*var(--z))}
}

/* ================================================================== PLACES */
body.gu-place main{max-width:none;padding:calc(var(--gu-hud) + calc(6px*var(--z))) calc(16px*var(--z)) calc(var(--gu-dock) + calc(26px*var(--z)))}
.placeBg{position:fixed;inset:0;width:100vw;height:100dvh;z-index:0;border-radius:0!important;background:#0b0c0f!important;max-width:none!important}
body.gu-place .placeHead{background:none;border:0;padding:calc(4px*var(--z)) 0 calc(10px*var(--z));margin:0;justify-content:flex-start;align-items:center;gap:calc(12px*var(--z))}
body.gu-place .placeHead .kicker{font:700 calc(12px*var(--z))/1 var(--gu-num);letter-spacing:2px;color:var(--gu-amber2)}
body.gu-place .placeHead h2{font:800 clamp(calc(26px*var(--z)),4.2vw,calc(44px*var(--z)))/1 var(--gu-title);font-style:normal;letter-spacing:.5px;text-transform:uppercase;transform-origin:left;color:#fff;text-shadow:0 3px 0 #000,0 0 calc(30px*var(--z)) rgba(0,0,0,.8);margin:3px 0}
body.gu-place .placeHead .muted{color:#c3c7ce;font-size:calc(13px*var(--z))}
.backBtn{width:calc(48px*var(--z));height:calc(48px*var(--z))}
body.gu-place .panel{background:linear-gradient(180deg,rgba(20,21,25,.88),rgba(11,12,14,.9));border:1px solid rgba(255,255,255,.08);border-radius:calc(12px*var(--z));backdrop-filter:blur(calc(6px*var(--z)));-webkit-backdrop-filter:blur(calc(6px*var(--z)))}
body.gu-place .panel h3{font:800 calc(15px*var(--z))/1 var(--gu-display);letter-spacing:1.6px}
body.gu-place .btn{min-height:calc(44px*var(--z));padding:0 calc(16px*var(--z));border-radius:calc(6px*var(--z));font:800 calc(15px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase;background:linear-gradient(180deg,#ffc061,#ff8a1f 60%,#e2700c);box-shadow:0 3px 0 #8a3f00;color:#160b00}
body.gu-place .btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8a3f00}
body.gu-place .btn:disabled{background:#33363d;color:#80858e;box-shadow:0 3px 0 #18191c}
body.gu-place .ghost{min-height:calc(44px*var(--z));padding:0 calc(14px*var(--z));border-radius:calc(6px*var(--z));font-weight:700}
body.gu-place .grid.g2{grid-template-columns:1fr 1fr}
@media (max-width:700px){body.gu-place .grid.g2{grid-template-columns:1fr}}
/* Ray */
.rayCard{position:relative}
.rayCard>h3{display:inline-block;background:var(--gu-amber);color:#160b00!important;padding:calc(6px*var(--z)) calc(12px*var(--z));border-radius:calc(4px*var(--z))}
.rayCard .ray{position:relative;font:600 italic calc(16px*var(--z))/1.4 var(--gu-body);color:#f1ead9;background:#f4ead2;color:#2a2116;padding:calc(12px*var(--z)) calc(16px*var(--z));border-radius:calc(14px*var(--z));margin:calc(10px*var(--z)) 0 calc(14px*var(--z));box-shadow:0 calc(6px*var(--z)) calc(16px*var(--z)) rgba(0,0,0,.4)}
.rayCard .ray::before{content:'';position:absolute;left:calc(22px*var(--z));top:-10px;border:calc(10px*var(--z)) solid transparent;border-bottom-color:#f4ead2;border-top:0}
.rayCard [data-go]{min-height:calc(64px*var(--z));flex:1;font-size:calc(17px*var(--z))}
.rayCard .row{gap:calc(10px*var(--z));flex-wrap:wrap}
@media (max-height:440px){ body.gu-place .placeHead{padding:0 0 calc(6px*var(--z))} body.gu-place .placeHead h2{font-size:calc(26px*var(--z))} .rayCard [data-go]{min-height:calc(52px*var(--z))} }
body.gu-place #view>*:not(.placeBg){position:relative;z-index:1}
.rayCard [data-go]{line-height:1.05;white-space:normal}
body.gu-shop .pphoto img{height:100%}

/* ================================================================== EVERY OTHER SCREEN: game panels instead of web boxes */
body.gui main{max-width:none}
body.gui:not(.gu-bay):not(.gu-map):not(.gu-shop) main{padding-left:calc(16px*var(--z));padding-right:calc(16px*var(--z))}
body.gui .panel{background:linear-gradient(180deg,rgba(24,25,30,.92),rgba(13,14,17,.94));border:1px solid rgba(255,255,255,.07);border-radius:calc(12px*var(--z));box-shadow:0 calc(10px*var(--z)) calc(24px*var(--z)) rgba(0,0,0,.35)}
body.gui h2{font:800 calc(26px*var(--z))/1.05 var(--gu-title);letter-spacing:.5px;text-transform:uppercase}
body.gui .panel h3{font:800 calc(17px*var(--z))/1 var(--gu-display);letter-spacing:1.6px;color:var(--gu-amber2)}
body.gui .btn{min-height:calc(44px*var(--z));padding:0 calc(16px*var(--z));border-radius:calc(6px*var(--z));font:800 calc(15px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase;
  background:linear-gradient(180deg,#ffc061,#ff8a1f 60%,#e2700c);box-shadow:0 3px 0 #8a3f00;color:#160b00;transition:transform .05s,box-shadow .05s}
body.gui .btn:hover{background:linear-gradient(180deg,#ffd07f,#ff9a3a 60%,#ea7a18)}
body.gui .btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8a3f00}
body.gui .btn:disabled{background:#33363d;color:#80858e;box-shadow:0 3px 0 #18191c}
body.gui .btn.red{background:linear-gradient(180deg,#ff6b5b,#d9302a);box-shadow:0 3px 0 #6d1110;color:#fff}
body.gui .ghost{min-height:calc(40px*var(--z));border-radius:calc(6px*var(--z));font-weight:700;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#d0d4db}
body.gui .ghost.small{min-height:calc(36px*var(--z));padding:0 calc(10px*var(--z))}
body.gui .money,body.gui .num,body.gui .price{font-family:var(--gu-num)}
body.gui input[type=range]{accent-color:var(--gu-amber);height:calc(28px*var(--z))}
body.gui select,body.gui input:not([type]),body.gui input[type=text],body.gui input[type=number]{min-height:calc(40px*var(--z));border-radius:calc(8px*var(--z))}
/* backdrops per screen: painted art when the art AI delivers img/ui/<screen>_bg.webp, a dark stand-in until then */
body.gui.m-free main,body.gui.m-career main{background-attachment:fixed}
body.gu-tab-tune main{background:linear-gradient(180deg,rgba(6,8,10,.6),rgba(6,8,10,.9)),url(img/ui/tune_bg.webp) center/cover fixed,radial-gradient(ellipse at 50% 0,#14202a,#0a0c0f 70%)}
body.gu-tab-dyno main{background:linear-gradient(180deg,rgba(6,8,10,.55),rgba(6,8,10,.9)),url(img/ui/dyno_bg.webp) center/cover fixed,radial-gradient(ellipse at 50% 0,#22201c,#0b0b0a 70%)}
body.gu-tab-race main{background:linear-gradient(180deg,rgba(6,8,10,.55),rgba(6,8,10,.9)),url(img/ui/race_bg.webp) center/cover fixed,radial-gradient(ellipse at 50% 0,#151b2b,#08090c 70%)}
body.gu-tab-dealer main{background:linear-gradient(180deg,rgba(6,8,10,.55),rgba(6,8,10,.9)),url(img/ui/dealer_bg.webp) center/cover fixed,radial-gradient(ellipse at 50% 0,#2a2016,#0b0a09 70%)}
body.gu-tab-body main{background:linear-gradient(180deg,rgba(8,9,11,.5),rgba(8,9,11,.88)),url(img/ui/body_bg.webp) center/cover fixed,radial-gradient(ellipse at 50% 0,#2b2e33,#0d0e10 70%)}

/* ================================================================== RACE (phones + touch screens) */
@media (max-height:620px),(pointer:coarse){
  body.gui:has(#view .raceWrap) header{display:none}
  body.gui:has(#view .raceWrap) main{padding:max(calc(6px*var(--z)),env(safe-area-inset-top)) max(calc(8px*var(--z)),env(safe-area-inset-right)) calc(6px*var(--z)) max(calc(8px*var(--z)),env(safe-area-inset-left));height:100dvh;overflow:hidden}
  body.gui #view>.panel:has(>.raceWrap){height:100%;padding:0;background:none;border:0;box-shadow:none;display:grid;grid-template-columns:calc(118px*var(--z)) 1fr calc(112px*var(--z));grid-template-rows:1fr auto;gap:calc(8px*var(--z))}
  body.gui #view>.panel>.raceWrap{display:contents}
  body.gui #view>.panel>.row{display:contents}
  body.gui #view>.panel>.row>span.muted,body.gui #view>.panel>.muted.small{display:none}
  body.gui .raceWrap canvas#track{grid-column:2;grid-row:1/3;width:100%;height:100%;min-height:0;max-height:none;border-radius:calc(10px*var(--z))}
  body.gui .pedalBox{grid-column:3;grid-row:1/3;width:auto;border-radius:calc(12px*var(--z));background:linear-gradient(180deg,#141519,#0b0c0e);border:1px solid rgba(255,255,255,.08)}
  body.gui .raceWrap canvas#ptrack{height:auto;flex:1;width:calc(84px*var(--z));max-height:calc(100dvh - calc(110px*var(--z)))}
  body.gui .pedGrp{flex:1;min-height:0;justify-content:center}
  body.gui .raceCtl{grid-column:1;grid-row:1/3;display:flex!important;flex-direction:column;gap:calc(8px*var(--z));margin:0}
  body.gui .raceCtl button{margin:0;border-radius:calc(12px*var(--z));font:800 calc(15px*var(--z))/1 var(--gu-display)!important;letter-spacing:1px;text-transform:uppercase;user-select:none;-webkit-user-select:none;touch-action:none}
  body.gui .raceCtl #abort{order:-2;min-height:calc(34px*var(--z));flex:none;font-size:calc(12px*var(--z))!important;opacity:.7}
  body.gui .raceCtl #armBtn,body.gui .raceCtl #purgeBtn{order:-1;min-height:calc(36px*var(--z));flex:none;font-size:calc(12px*var(--z))!important}
  body.gui .raceCtl #tapBtn{order:1;flex:3;min-height:0;font-size:calc(22px*var(--z))!important}
  body.gui .raceCtl #downBtn{order:2;flex:1.2;min-height:0}
  body.gui .raceCtl .hold{order:3;flex:3;min-height:0;font-size:calc(18px*var(--z))!important;background:linear-gradient(180deg,#2a2d35,#17191e);color:#e6e8ec;border:1px solid rgba(255,255,255,.12);box-shadow:0 calc(4px*var(--z)) 0 #050506}
  body.gui .raceCtl .hold:active,body.gui .raceCtl .hit{transform:translateY(3px);box-shadow:0 1px 0 #050506;filter:brightness(1.3)}
}

/* ---------- story cards + popups */
body.gui .overlay .box,body.gui .story .storyIn{background:linear-gradient(180deg,#1b1c21,#0f1013);border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--gu-amber);border-radius:calc(14px*var(--z));box-shadow:0 calc(20px*var(--z)) calc(60px*var(--z)) rgba(0,0,0,.7)}
body.gui .story h1{font:800 clamp(calc(28px*var(--z)),5vw,calc(48px*var(--z)))/1 var(--gu-title);text-transform:uppercase;letter-spacing:.5px;transform-origin:left}
body.gui .overlay .box h2{font:800 calc(26px*var(--z))/1 var(--gu-display);text-transform:uppercase}
@media (max-height:440px){ body.gui .overlay{padding:calc(8px*var(--z))} body.gui .overlay .box{max-height:calc(100dvh - calc(16px*var(--z)));padding:calc(12px*var(--z)) calc(14px*var(--z))} body.gui .story .storyIn{max-height:calc(100dvh - calc(16px*var(--z)));overflow:auto;padding:calc(16px*var(--z)) calc(20px*var(--z))} }

/* ---------- Tune: ECU software on a laptop: each setting is a tile with a big readout */
body.gu-tab-tune #view>.grid.g2{grid-template-columns:1.5fr 1fr;align-items:start}
body.gu-tab-tune #view .panel:first-child{background:linear-gradient(180deg,rgba(10,18,24,.94),rgba(6,10,14,.96));border-color:rgba(80,200,255,.18);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(220px*var(--z)),1fr));gap:calc(10px*var(--z));align-items:start}
body.gu-tab-tune #view .panel:first-child>:not(.slider){grid-column:1/-1}
body.gu-tab-tune #view .panel:first-child>h2{color:#9fe3ff;font-family:var(--gu-num);font-weight:700;letter-spacing:2px;font-size:calc(20px*var(--z))}
body.gu-tab-tune #view .panel:first-child>h3{color:#6fd0ff;margin:calc(6px*var(--z)) 0 0}
body.gu-tab-tune .slider{background:rgba(120,200,255,.05);border:1px solid rgba(120,200,255,.14);border-radius:calc(8px*var(--z));padding:calc(8px*var(--z)) calc(10px*var(--z));margin:0}
body.gu-tab-tune .slider label{display:flex;justify-content:space-between;align-items:baseline;font:700 calc(14px*var(--z))/1.2 var(--gu-display);letter-spacing:1px;text-transform:uppercase;color:#a9c7d6}
body.gu-tab-tune .slider .val{font:700 calc(22px*var(--z))/1 var(--gu-num);color:#7fe0ff;text-shadow:0 0 calc(10px*var(--z)) rgba(80,200,255,.4)}
body.gu-tab-tune .slider input{width:100%;accent-color:#3fc3ff}
body.gu-tab-tune .slider .muted.small{font-size:calc(13px*var(--z));line-height:1.3}
@media (max-width:760px){ body.gu-tab-tune #view>.grid.g2{grid-template-columns:1fr} }

/* ---------- Dyno: the graph fills the screen, the numbers sit beside it */
body.gu-tab-dyno #view>.panel{display:grid;grid-template-columns:1fr minmax(calc(200px*var(--z)),30%);grid-template-rows:auto auto 1fr;gap:calc(8px*var(--z)) calc(14px*var(--z));background:linear-gradient(180deg,rgba(18,17,15,.92),rgba(9,9,8,.95))}
body.gu-tab-dyno #view>.panel>.row:first-child{grid-column:1/-1}
body.gu-tab-dyno canvas#dyno{grid-column:1;grid-row:2/4;width:100%;height:calc(100dvh - var(--gu-hud) - var(--gu-dock) - calc(120px*var(--z)));min-height:calc(200px*var(--z))}
body.gu-tab-dyno .legend{grid-column:2;grid-row:2}
body.gu-tab-dyno #dynoNotes{grid-column:2;grid-row:3;overflow:auto;max-height:calc(100dvh - var(--gu-hud) - var(--gu-dock) - calc(170px*var(--z)))}
body.gu-tab-dyno #pull{min-height:calc(52px*var(--z));font-size:calc(18px*var(--z));padding:0 calc(22px*var(--z))}
@media (max-width:700px){ body.gu-tab-dyno #view>.panel{grid-template-columns:1fr} body.gu-tab-dyno canvas#dyno,body.gu-tab-dyno .legend,body.gu-tab-dyno #dynoNotes{grid-column:1;grid-row:auto} }

/* ---------- Body shop: the car stays in view on the left, the tool tray scrolls on the right */
@media (orientation:landscape){
  body.gu-tab-body #view>.bodyg{grid-template-columns:1.25fr 1fr;align-items:stretch;height:calc(100dvh - var(--gu-hud) - var(--gu-dock) - calc(40px*var(--z)))}
  body.gu-tab-body #view>.bodyg>.panel{overflow:auto;min-height:0}
  body.gu-tab-body main{padding-bottom:calc(var(--gu-dock) + calc(16px*var(--z)))}
}
body.gu-tab-body .btabs button{min-height:calc(42px*var(--z));font:800 calc(13px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase}
body.gu-tab-body .sw{width:calc(36px*var(--z));height:calc(36px*var(--z))}

/* ---------- Dealer lot: swipe through the cars */
body.gu-tab-dealer #view>h2{font-size:calc(30px*var(--z));transform-origin:left;margin-bottom:calc(8px*var(--z))}
body.gu-tab-dealer #view>.grid.g3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:calc(14px*var(--z));padding-bottom:calc(10px*var(--z))}
body.gu-tab-dealer #view>.grid.g3>.panel{flex:0 0 min(calc(440px*var(--z)),72vw);scroll-snap-align:start;display:flex;flex-direction:column}
body.gu-tab-dealer #view>.grid.g3>.panel h3{font-size:calc(20px*var(--z));color:#fff;letter-spacing:.6px}
body.gu-tab-dealer #view>.grid.g3>.panel>.row:last-child{margin-top:auto;justify-content:space-between}
body.gu-tab-dealer #view .money{font:700 calc(24px*var(--z))/1 var(--gu-num);color:#7dffa6}
body.gu-tab-dealer canvas.dside{background:radial-gradient(ellipse at 50% 80%,#2a2622,#0d0c0b 70%)}
@media (max-height:440px){ body.gu-tab-dealer #view>.grid.g3>.panel p.muted.small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} }

/* ---------- Race menu (Free Play): racer cards */
body.gu-tab-race .opp{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--gu-amber);border-radius:calc(8px*var(--z));padding:calc(10px*var(--z)) calc(12px*var(--z))}
body.gu-tab-race .opp b{font:800 calc(17px*var(--z))/1 var(--gu-display);letter-spacing:.4px;text-transform:uppercase}

body.gu-tab-tune #view>.grid.g2.guOne{grid-template-columns:1fr}
body.gu-tab-tune h2 .notesBtn{float:right;font:700 calc(12px*var(--z))/1 var(--gu-display);letter-spacing:1px;text-transform:uppercase;color:#9fe3ff;border-color:rgba(120,200,255,.3)}

/* readable text everywhere the game shows it */
body.gui{font-family:var(--gu-body);font-size:calc(15px*var(--z))}
body.gui .muted.small,body.gui .small{font-size:calc(13px*var(--z))}
body.gu-shop .pbody>.muted.small{font-size:calc(13px*var(--z))}
body.gu-shop .chips span{font-size:calc(12.5px*var(--z))}
body.gu-map .map .pin span b{font:700 calc(18px*var(--z))/1 var(--gu-display);letter-spacing:.8px}
body.gu-map .map .pin span em{font:600 calc(14px*var(--z))/1.2 var(--gu-body)}
body.gu-map .map .pin i{width:calc(50px*var(--z));height:calc(50px*var(--z))}
/* the map starts under the HUD; your goal sits bottom-left beside the dock so nothing covers the places */
body.gu-map .map{top:var(--gu-hud)}
.mapHud{top:auto;bottom:max(calc(14px*var(--z)),env(safe-area-inset-bottom));align-items:flex-end}
.goalChip{max-width:min(calc(340px*var(--z)),30vw)}
@media (max-width:1000px){ .goalChip .gn{display:none} .goalChip{max-width:calc(150px*var(--z))} }

/* big screens: content screens zoom as a whole (the old panels inside use fixed sizes); the scene screens scale their own parts */
body.gui.gu-zoom #view{zoom:var(--gz);--z:1;--gu-hud:58px;--gu-dock:74px}
body.gui.gu-zoom .placeBg{width:calc(100vw/var(--gz));height:calc(100dvh/var(--gz))}
body.gu-zoom.gu-tab-dyno canvas#dyno{height:calc(100dvh/var(--gz) - var(--gu-hud) - var(--gu-dock) - 120px)}
body.gu-zoom.gu-tab-dyno #dynoNotes{max-height:calc(100dvh/var(--gz) - var(--gu-hud) - var(--gu-dock) - 170px)}
@media (orientation:landscape){ body.gu-zoom.gu-tab-body #view>.bodyg{height:calc(100dvh/var(--gz) - var(--gu-hud) - var(--gu-dock) - 40px)} }

/* every title in the game uses the same readable face (the old Impact titles were hard to read) */
body.gui .logo,body.gui .story h1,body.gui .revName,body.gui .mapTag,body.gui .placeHead h2,body.gui .sname,body.gui .brand{font-family:var(--gu-title)!important;font-style:normal!important;font-weight:800!important}
body.gui .logo{letter-spacing:2px}
body.gui .brand{letter-spacing:1px}
body.gui h1,body.gui h2,body.gui h3,body.gui h4{font-family:var(--gu-title)}

/* race: never zoomed, and the timeslip fits the window (slip left, notes right) */
body.gui:has(#view .raceWrap) #view{zoom:1}
@media (orientation:landscape) and (min-width:560px){
  body.gui .overlay .box:has(>.slip){max-width:calc(980px*var(--z));max-height:calc(100dvh - calc(32px*var(--z)));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:calc(16px*var(--z));overflow:hidden}
  body.gui .overlay .box:has(>.slip)>:nth-child(1){grid-column:1/3}
  body.gui .overlay .box:has(>.slip)>.slip{grid-column:1;grid-row:2/4;align-self:start}
  body.gui .overlay .box:has(>.slip)>.pbline{grid-column:2;grid-row:2;margin-top:0}
  body.gui .overlay .box:has(>.slip)>:nth-child(4){grid-column:2;grid-row:3;margin-top:calc(8px*var(--z))!important;overflow:auto;min-height:0}
  body.gui .overlay .box:has(>.slip)>:nth-child(5){grid-column:1/3}
}
/* v0.79.2: short screens (phones in landscape with the browser bar): the timeslip scrolls inside its column and the
   buttons always sit below it, on top, never under the slip */
@media (orientation:landscape) and (min-width:560px){
  body.gui .overlay .box:has(>.slip)>.slip{min-height:0;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
  body.gui .overlay .box:has(>.slip)>.row:last-child{grid-column:1/3;grid-row:4;position:relative;z-index:2}
}
@media (orientation:landscape) and (min-width:560px) and (max-height:560px){
  body.gui .overlay .box:has(>.slip){height:calc(100dvh - calc(16px*var(--z)));max-height:calc(100dvh - calc(16px*var(--z)));padding:calc(10px*var(--z)) calc(14px*var(--z))}
  body.gui .overlay:has(.box>.slip){padding:calc(8px*var(--z))}
  body.gui .overlay .box:has(>.slip)>:nth-child(1){margin-bottom:calc(4px*var(--z))!important}
  body.gui .overlay .box:has(>.slip)>:nth-child(1) .big{font-size:calc(22px*var(--z))}
  body.gui .overlay .box:has(>.slip)>.slip{padding:calc(6px*var(--z)) calc(10px*var(--z));font-size:calc(12px*var(--z))}
  body.gui .overlay .box:has(>.slip)>.slip h4{margin:0 0 calc(2px*var(--z));font-size:calc(11px*var(--z))}
  body.gui .overlay .box:has(>.slip)>.slip td{padding:calc(1px*var(--z)) calc(6px*var(--z))}
  body.gui .overlay .box:has(>.slip)>.row:last-child{margin-top:calc(6px*var(--z))!important}
  body.gui .overlay .box:has(>.slip) .note{padding:calc(5px*var(--z)) calc(8px*var(--z));margin:calc(4px*var(--z)) 0;font-size:calc(12px*var(--z))}
}
@media (min-height:621px) and (pointer:fine){ body.gui .raceWrap canvas#track{height:calc(100dvh - calc(178px*var(--z)));min-height:0} }

/* ================================================================ GAME KIT */
/* Street Rating badge */
.srb{--sc:#9aa3ad;display:inline-flex;align-items:stretch;border-radius:calc(6px*var(--z));overflow:hidden;border:1px solid color-mix(in srgb,var(--sc) 55%,transparent);background:#0d0e11;font-family:var(--gu-num);line-height:1;vertical-align:middle}
.srb>b{background:var(--sc);color:#111;font:900 calc(15px*var(--z))/1 var(--gu-display);padding:calc(5px*var(--z)) calc(7px*var(--z));display:flex;align-items:center}
.srb>span{display:flex;align-items:center;gap:calc(4px*var(--z));padding:0 calc(8px*var(--z));color:#fff;font-weight:700;font-size:calc(15px*var(--z))}
.srb small{font:700 calc(10px*var(--z))/1 var(--gu-display);letter-spacing:1px;color:var(--sc)}
.srb.big>b{font-size:calc(28px*var(--z));padding:calc(6px*var(--z)) calc(12px*var(--z))}
.srb.big>span{font-size:calc(24px*var(--z));padding:0 calc(12px*var(--z))}
.srb.big small{font-size:calc(11px*var(--z))}
#guSR{background:none;border:0;padding:0;cursor:pointer;box-shadow:none}
#guSR[hidden]{display:none}
/* stat bars */
.kb{display:grid;grid-template-columns:calc(64px*var(--z)) 1fr auto;align-items:center;gap:calc(8px*var(--z));min-height:calc(22px*var(--z))}
.kl{font:700 calc(12px*var(--z))/1 var(--gu-display);letter-spacing:1.2px;text-transform:uppercase;color:#9aa0aa}
.kt{position:relative;height:calc(10px*var(--z));background:#202228;border-radius:2px;overflow:hidden;clip-path:polygon(0 0,100% 0,calc(100% - calc(4px*var(--z))) 100%,0 100%)}
.kt .kf{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#c25f10,var(--gu-amber) 60%,var(--gu-amber2))}
.kt .kg{position:absolute;top:0;bottom:0}
.kt .kg.up{background:repeating-linear-gradient(-45deg,#3ee07a 0 calc(4px*var(--z)),#27b85e calc(4px*var(--z)) calc(8px*var(--z)));animation:guPulse 1.2s ease-in-out infinite}
.kt .kg.dn{background:repeating-linear-gradient(-45deg,#ff4d4d 0 calc(4px*var(--z)),#b82828 calc(4px*var(--z)) calc(8px*var(--z)))}
@keyframes guPulse{50%{opacity:.55}}
.kv{font:700 calc(13px*var(--z))/1 var(--gu-num);color:#e8eaee;white-space:nowrap;min-width:calc(70px*var(--z));text-align:right}
.kv em,.pcEt em,.pcD{font-style:normal;margin-left:calc(4px*var(--z))}
.up{color:#4ee88a}.dn{color:#ff6b6b}
/* bay: rating card replaces the three little stat boxes */
.stats.kit{display:flex;align-items:center;gap:calc(14px*var(--z));background:linear-gradient(180deg,rgba(18,19,23,.9),rgba(8,9,11,.94));border:1px solid rgba(255,255,255,.08);border-top:2px solid var(--gu-amber);border-radius:calc(10px*var(--z));padding:calc(10px*var(--z)) calc(14px*var(--z));cursor:pointer;width:min(calc(520px*var(--z)),calc(100vw - calc(28px*var(--z)) - calc(420px*var(--z))))}
.stats.kit .rc{display:flex;flex-direction:column;gap:calc(8px*var(--z));flex:none}
.rcEt{display:flex;flex-direction:column;gap:2px;font:600 calc(11px*var(--z))/1.2 var(--gu-display);color:#8b919c;letter-spacing:.6px;text-transform:uppercase}
.rcEt b{font:700 calc(20px*var(--z))/1 var(--gu-num);color:#fff;letter-spacing:0;text-transform:none}
.rcBars{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(3px*var(--z))}
/* bay: part category rail down the left */
.pRail{position:absolute;left:calc(14px*var(--z));top:calc(var(--gu-hud) + calc(14px*var(--z)));z-index:6;display:flex;flex-direction:column;gap:calc(6px*var(--z));max-height:calc(100% - var(--gu-hud) - var(--gu-dock) - calc(170px*var(--z)));overflow:auto;scrollbar-width:none}
.pRail::-webkit-scrollbar{display:none}
.pRail button{display:grid;grid-template-columns:calc(26px*var(--z)) 1fr;grid-template-rows:auto auto;column-gap:calc(8px*var(--z));align-items:center;text-align:left;min-width:calc(150px*var(--z));padding:calc(7px*var(--z)) calc(12px*var(--z)) calc(7px*var(--z)) calc(9px*var(--z));background:linear-gradient(90deg,rgba(20,21,26,.92),rgba(12,13,16,.8));border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--gu-amber);border-radius:calc(8px*var(--z));color:#e8eaee;cursor:pointer;margin:0}
.pRail button:hover{border-color:rgba(255,170,80,.5);background:linear-gradient(90deg,rgba(40,30,18,.95),rgba(16,14,12,.85))}
.pRail svg{grid-row:1/3;width:calc(24px*var(--z));height:calc(24px*var(--z));fill:var(--gu-amber2)}
.pRail span{font:700 calc(13px*var(--z))/1.1 var(--gu-display);letter-spacing:.4px;text-transform:uppercase}
.pRail b{font:600 calc(12px*var(--z))/1.1 var(--gu-num);color:#8f96a1}
/* sheets fit their content instead of a full-height empty drawer */
@media (orientation:landscape){
  .gu-sheet{top:calc(var(--gu-hud) + calc(8px*var(--z)));right:calc(10px*var(--z));bottom:auto;max-height:calc(100dvh - var(--gu-hud) - calc(18px*var(--z)));border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--gu-amber);border-radius:calc(14px*var(--z));transform:translateX(calc(100% + calc(24px*var(--z))))}
  .gu-sheet .sb{flex:0 1 auto}
}

/* ---------- the part upgrade card */
#guPC{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;padding:calc(12px*var(--z));animation:guFade .15s ease-out}
@keyframes guFade{from{opacity:0}}
.pcIn{width:min(calc(1060px*var(--z)),100%);max-height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#1a1b20,#0e0f12);border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--gu-amber);border-radius:calc(16px*var(--z));box-shadow:0 calc(30px*var(--z)) calc(80px*var(--z)) rgba(0,0,0,.8);overflow:hidden;animation:guRise .2s cubic-bezier(.2,.8,.25,1)}
@keyframes guRise{from{transform:translateY(calc(24px*var(--z)));opacity:.4}}
.pcTop{display:flex;align-items:center;gap:calc(10px*var(--z));padding:calc(8px*var(--z)) calc(10px*var(--z));border-bottom:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.25)}
.pcCats{display:flex;gap:calc(4px*var(--z));flex:1;overflow-x:auto;scrollbar-width:none}
.pcCats button{display:flex;align-items:center;gap:calc(6px*var(--z));padding:calc(8px*var(--z)) calc(12px*var(--z));background:transparent;border:1px solid transparent;border-radius:calc(8px*var(--z));color:#9aa0aa;font:700 calc(13px*var(--z))/1 var(--gu-display);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;margin:0;cursor:pointer}
.pcCats button svg{width:calc(18px*var(--z));height:calc(18px*var(--z));fill:currentColor}
.pcCats button.on{background:rgba(255,138,31,.14);border-color:rgba(255,138,31,.5);color:var(--gu-amber2)}
.pcCash{font:700 calc(17px*var(--z))/1 var(--gu-num);color:#7dffa6;white-space:nowrap}
.pcSlots{display:flex;gap:calc(6px*var(--z));padding:calc(8px*var(--z)) calc(12px*var(--z));overflow-x:auto;scrollbar-width:thin;border-bottom:1px solid rgba(255,255,255,.05)}
.pcSlots button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:calc(6px*var(--z)) calc(12px*var(--z));background:#16171b;border:1px solid rgba(255,255,255,.08);border-radius:calc(8px*var(--z));color:#d9dde5;font:700 calc(13px*var(--z))/1.1 var(--gu-display);white-space:nowrap;margin:0;cursor:pointer}
.pcSlots button small{font:600 calc(11px*var(--z))/1 var(--gu-num);color:#8b919c}
.pcSlots button.on{border-color:var(--gu-amber);background:linear-gradient(180deg,#2b1e10,#17120c);color:#fff}
.pcSlots button.on small{color:var(--gu-amber2)}
.pcMain{display:grid;grid-template-columns:1.05fr 1fr;gap:calc(18px*var(--z));padding:calc(14px*var(--z)) calc(18px*var(--z)) calc(16px*var(--z));min-height:0;overflow:auto}
.pcL{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.pcArt{display:flex;align-items:center;gap:calc(8px*var(--z));width:100%}
.pcPic{flex:1;position:relative;aspect-ratio:16/10;max-height:calc(250px*var(--z));border-radius:calc(12px*var(--z));background:radial-gradient(ellipse at 50% 60%,#34302a 0,#1a1916 55%,#0d0d0c 100%);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y;user-select:none}
.pcPic>*{max-width:88%;max-height:92%}
.pcPic svg,.pcPic img{max-width:100%;max-height:100%}
.pcPic .pphoto{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pcPic .pphoto img{width:100%;height:100%;object-fit:contain}
.pcPic.inR{animation:guInR .2s ease-out}.pcPic.inL{animation:guInL .2s ease-out}
@keyframes guInR{from{transform:translateX(calc(30px*var(--z)));opacity:.3}}@keyframes guInL{from{transform:translateX(calc(-30px*var(--z)));opacity:.3}}
.pcRib{position:absolute;top:calc(10px*var(--z));left:calc(10px*var(--z));background:#3ecf6e;color:#062;font:800 calc(11px*var(--z))/1 var(--gu-display);letter-spacing:1px;padding:calc(5px*var(--z)) calc(8px*var(--z));border-radius:calc(4px*var(--z))}
.pcArr{flex:none;width:calc(44px*var(--z));height:calc(64px*var(--z));border-radius:calc(10px*var(--z));background:#16171b;border:1px solid rgba(255,255,255,.1);color:#fff;font:400 calc(34px*var(--z))/1 var(--gu-body);margin:0;cursor:pointer;padding:0}
.pcArr:disabled{opacity:.25;cursor:default}
.pcPips{display:flex;gap:calc(6px*var(--z));margin:calc(12px*var(--z)) 0 calc(6px*var(--z))}
.pcPips i{width:calc(30px*var(--z));height:calc(8px*var(--z));background:#2a2c33;transform:skewX(-20deg);cursor:pointer}
.pcPips i.have{background:#6b4a22}
.pcPips i.on{background:var(--gu-amber);box-shadow:0 0 calc(10px*var(--z)) rgba(255,138,31,.7)}
.pcPips.n{font:700 calc(15px*var(--z))/1 var(--gu-num);color:var(--gu-amber2)}.pcPips.n span{color:#7d838e}
.pcStage{font:700 calc(13px*var(--z))/1 var(--gu-display);letter-spacing:1.4px;text-transform:uppercase;color:var(--gu-amber2)}
.pcName{font:800 calc(26px*var(--z))/1.1 var(--gu-title);color:#fff;margin:calc(6px*var(--z)) 0}
.pcDesc{font:500 calc(15px*var(--z))/1.35 var(--gu-body);color:#b9bec7;max-width:calc(440px*var(--z))}
.pcChips{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(6px*var(--z));margin-top:calc(10px*var(--z))}
.pcChips span{font:600 calc(12px*var(--z))/1 var(--gu-num);color:#d6dae1;background:#1e2026;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:calc(5px*var(--z)) calc(9px*var(--z))}
.pcR{display:flex;flex-direction:column;gap:calc(10px*var(--z));min-width:0}
.pcRate{display:flex;align-items:center;gap:calc(10px*var(--z));flex-wrap:wrap}
.pcTo{font:400 calc(30px*var(--z))/1 var(--gu-body);color:#6d737e}
.pcD{font:800 calc(22px*var(--z))/1 var(--gu-num)}
.pcEt{display:flex;align-items:baseline;gap:calc(8px*var(--z));flex-wrap:wrap;font:600 calc(12px*var(--z))/1 var(--gu-display);letter-spacing:1px;text-transform:uppercase;color:#8b919c}
.pcEt b{font:700 calc(26px*var(--z))/1 var(--gu-num);color:#fff;letter-spacing:0}
.pcEt em{font:700 calc(18px*var(--z))/1 var(--gu-num)}
.pcEt .was{text-transform:none;letter-spacing:0;font:500 calc(13px*var(--z))/1 var(--gu-num)}
.pcBars{display:flex;flex-direction:column;gap:calc(6px*var(--z));background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.05);border-radius:calc(10px*var(--z));padding:calc(10px*var(--z)) calc(12px*var(--z))}
.pcBars .kb{grid-template-columns:calc(70px*var(--z)) 1fr auto}
.pcBars .kt{height:calc(12px*var(--z))}
.pcBars .kv{min-width:calc(120px*var(--z))}
.pcFx{display:flex;flex-direction:column;gap:calc(5px*var(--z))}
.pcFx:empty{display:none}
.pcfx{font:500 calc(13px*var(--z))/1.3 var(--gu-body);padding:calc(6px*var(--z)) calc(10px*var(--z));border-left:3px solid #ffb347;background:rgba(255,179,71,.08);color:#ffd9a6;border-radius:calc(4px*var(--z))}
.pcfx.bad,.pcfx.fit{border-color:#ff5252;background:rgba(255,82,82,.1);color:#ffc2c2}
.pcfx.fix{border-color:#3ecf6e;background:rgba(62,207,110,.08);color:#bff5d2}
.pcBuy{display:flex;align-items:center;gap:calc(10px*var(--z));margin-top:auto;padding-top:calc(6px*var(--z))}
.pcPrice{display:flex;flex-direction:column;gap:2px;margin-right:auto}
.pcPrice b{font:700 calc(26px*var(--z))/1 var(--gu-num);color:#fff}
.pcPrice span{font:500 calc(12px*var(--z))/1 var(--gu-body);color:#8b919c}
.pcBuy .gbtn{min-height:calc(56px*var(--z));font-size:calc(19px*var(--z));padding:0 calc(26px*var(--z))}
.pcBuy .gbtn b{font-family:var(--gu-num);margin-left:calc(8px*var(--z))}
.pcBuy .gbtn.small{min-height:calc(44px*var(--z));font-size:calc(14px*var(--z));padding:0 calc(14px*var(--z))}
.pcBuy .gbtn:disabled{opacity:.6;cursor:default;filter:saturate(.3)}
.pcNote{font:500 calc(12px*var(--z))/1.3 var(--gu-body);color:#8b919c;text-align:right}
.pic.pcOpen{cursor:zoom-in}
/* phones */
@media (max-height:520px){
  #guPC{padding:calc(6px*var(--z))}
  .pcTop{padding:calc(4px*var(--z)) calc(8px*var(--z))}.pcCats button span{display:none}.pcCats button{padding:calc(7px*var(--z)) calc(9px*var(--z))}
  .pcSlots{padding:calc(5px*var(--z)) calc(8px*var(--z))}
  .pcMain{padding:calc(8px*var(--z)) calc(12px*var(--z));gap:calc(12px*var(--z))}
  .pcPic{max-height:calc(120px*var(--z))}.pcName{font-size:calc(20px*var(--z))}.pcDesc{font-size:calc(13px*var(--z))}
  .pcPips{margin:calc(6px*var(--z)) 0 calc(4px*var(--z))}.pcChips{display:none}
  .pcBuy .gbtn{min-height:calc(46px*var(--z));font-size:calc(16px*var(--z))}
  .pRail button{min-width:0;grid-template-columns:calc(22px*var(--z));padding:calc(6px*var(--z))}.pRail button span,.pRail button b{display:none}
  .stats.kit{width:auto;padding:calc(6px*var(--z)) calc(10px*var(--z))}.stats.kit .rcBars{display:none}
}
@media (orientation:portrait){
  .pcMain{grid-template-columns:1fr}
  .pRail{flex-direction:row;top:auto;bottom:calc(var(--gu-dock) + calc(150px*var(--z)));left:calc(10px*var(--z));right:calc(10px*var(--z));max-height:none;overflow-x:auto}
  .pRail button{min-width:0;grid-template-columns:calc(22px*var(--z));padding:calc(6px*var(--z))}.pRail button span,.pRail button b{display:none}
  .stats.kit{width:auto}
}
/* story / work-order cards: real padding at every size */
body.gui .story .storyIn{padding:calc(26px*var(--z)) calc(34px*var(--z)) calc(28px*var(--z));max-height:calc(100dvh - calc(32px*var(--z)));overflow:auto;box-sizing:border-box}
body.gui .story .storyIn .btn,body.gui .story .storyIn button{margin-top:calc(6px*var(--z))}
@media (max-height:440px){ body.gui .story .storyIn{padding:calc(16px*var(--z)) calc(20px*var(--z))} }
.pcCats{flex-wrap:nowrap}
@media (min-height:521px) and (orientation:landscape){ .pRail button{min-width:calc(140px*var(--z))} }
.pRail span{white-space:nowrap}
.pcBuy{position:sticky;bottom:calc(-16px*var(--z));background:linear-gradient(180deg,rgba(14,15,18,0),#0f1013 35%);padding-bottom:calc(4px*var(--z))}
@media (max-height:520px){
  .pcPic{max-height:calc(96px*var(--z))}.pcDesc{display:none}.pcName{font-size:calc(18px*var(--z));margin:calc(3px*var(--z)) 0}
  .pcR{gap:calc(6px*var(--z))}.pcRate .srb.big>b{font-size:calc(20px*var(--z));padding:calc(4px*var(--z)) calc(9px*var(--z))}.pcRate .srb.big>span{font-size:calc(18px*var(--z))}
  .pcEt b{font-size:calc(20px*var(--z))}.pcBars{padding:calc(6px*var(--z)) calc(10px*var(--z));gap:calc(3px*var(--z))}.pcBars .kv{min-width:calc(90px*var(--z))}
  .pcPrice b{font-size:calc(20px*var(--z))}.pcBuy{bottom:calc(-8px*var(--z))}
}
.pRail .carsBtn{margin-top:calc(6px*var(--z));border-left-color:#4fd1ff}
.pRail .carsBtn svg{fill:#9fe3ff}
.bayBar{position:absolute;left:50%;transform:translate(-50%,calc(34px*var(--z)));z-index:6;display:flex;gap:calc(8px*var(--z))}
.bayBar .bb{margin:0;padding:calc(8px*var(--z)) calc(16px*var(--z));min-height:calc(38px*var(--z));background:rgba(14,15,18,.88);border:1px solid rgba(255,255,255,.14);border-radius:calc(8px*var(--z));color:#e8eaee;font:700 calc(14px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.bayBar .bb b{font-family:var(--gu-num);color:#9fe3ff;margin-left:calc(4px*var(--z))}
.bayBar .bb:hover{border-color:rgba(255,170,80,.6)}
.bayBar .bb.sell{border-color:rgba(62,207,110,.45);color:#9ff0bd}
@media (max-height:520px){ .bayBar{transform:translate(-50%,calc(26px*var(--z)))} .bayBar .bb{padding:calc(5px*var(--z)) calc(10px*var(--z));min-height:calc(30px*var(--z));font-size:calc(12px*var(--z))} }
@media (max-height:520px),(orientation:portrait){ .pRail .carsBtn{display:none} }
/* bay corners: rating card bottom-left, buttons bottom-right, level with the dock (.lift = above the dock when it won't fit) */
.stats,.stats.kit,.bayGo{bottom:max(calc(10px*var(--z)),env(safe-area-inset-bottom))}
.stats.lift,.stats.kit.lift,.bayGo.lift{bottom:calc(var(--gu-dock) + calc(14px*var(--z)))}
.bayGo{flex-direction:column;align-items:flex-end;gap:calc(8px*var(--z))}
.bayGo .bgRow{display:flex;gap:calc(8px*var(--z))}
.bayGo .bgRow .gbtn{padding:0 calc(20px*var(--z));font-size:calc(17px*var(--z))}
.bayGo .bayBar{position:static;transform:none;justify-content:flex-end}
/* places (Ray's and the rest): the page fits the window; long lists scroll inside their own panel, never under the dock */
@media (orientation:landscape) and (min-width:900px){
  body.gu-place main{height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}
  body.gu-place.gu-zoom main{height:calc(100dvh / var(--gz))}
  body.gu-place main>.placeHead{flex:none}
  body.gu-place main>.grid{flex:1;min-height:0;overflow:auto;align-content:start}
  body.gu-place main>.grid:has(>.panel:nth-child(3)):not(:has(>.panel:nth-child(5))){grid-template-rows:auto minmax(0,1fr);align-content:stretch;overflow:hidden}
  body.gu-place main>.grid:has(>.panel:nth-child(3)):not(:has(>.panel:nth-child(5)))>.panel{overflow:auto;min-height:0}
}
/* Ray's counter: the store ends above the dock */
body.gu-shop main{box-sizing:border-box;padding-bottom:calc(var(--gu-dock) + calc(12px*var(--z)))}

/* ================================================================ HUBS + ACTIVITY VIEW */
body.gu-hub main{height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}
body.gu-hub.gu-zoom main{height:calc(100dvh / var(--gz))}
body.gu-hub main>*{flex:none}
body.gu-hub main>.guHub{flex:1;min-height:0}
.guHub{display:grid;gap:calc(14px*var(--z));grid-template-columns:repeat(auto-fit,minmax(calc(300px*var(--z)),1fr));grid-auto-rows:minmax(0,1fr);margin-top:calc(10px*var(--z))}
.guHub:has(>:nth-child(5)){grid-template-columns:repeat(3,1fr)}
.guHub:has(>:nth-child(7)){grid-template-columns:repeat(4,1fr)}
.hubT{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:calc(8px*var(--z)) calc(14px*var(--z));text-align:left;align-items:start;padding:calc(18px*var(--z)) calc(20px*var(--z));margin:0;min-height:0;overflow:hidden;cursor:pointer;color:#e8eaee;
  background:linear-gradient(160deg,rgba(32,30,27,.94),rgba(12,13,15,.94));border:1px solid rgba(255,255,255,.1);border-bottom:3px solid var(--gu-amber);border-radius:calc(14px*var(--z));box-shadow:0 calc(10px*var(--z)) calc(24px*var(--z)) rgba(0,0,0,.45);transition:transform .12s,border-color .12s}
.hubT:hover{transform:translateY(-2px);border-color:rgba(255,170,80,.55)}
.hubT:active{transform:translateY(1px)}
.hubIc{grid-row:1;width:calc(52px*var(--z));height:calc(52px*var(--z));border-radius:calc(12px*var(--z));background:linear-gradient(180deg,#ffc061,#ff8a1f);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #8a3f00}
.hubIc svg{width:62%;height:62%;fill:#1a0d00}
.hubTx{grid-row:1/3;grid-column:2;display:flex;flex-direction:column;gap:calc(4px*var(--z));min-width:0;min-height:0;overflow:hidden}
.hubTx b{font:800 calc(24px*var(--z))/1.05 var(--gu-title);text-transform:uppercase;letter-spacing:.5px;color:#fff}
.hubTx i{font:700 calc(12px*var(--z))/1 var(--gu-display);font-style:normal;letter-spacing:1.4px;text-transform:uppercase;color:var(--gu-amber2)}
.hubP{white-space:pre-line;font:500 calc(15px*var(--z))/1.4 var(--gu-body);color:#b9bec7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hubPics{grid-column:1/3;grid-row:2;align-self:stretch;display:flex;gap:calc(8px*var(--z));min-height:0;overflow:hidden;justify-content:center;align-items:flex-end}
.hubT.pic .hubTx{grid-row:1}
.hubPics canvas,.hubPics img{height:100%;min-height:0;min-width:0;width:auto;max-width:100%;flex:0 1 auto;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.hubPics:has(>:nth-child(2)) canvas,.hubPics:has(>:nth-child(2)) img{max-width:48%}
.hubPics.wide{flex-direction:column;align-items:center;justify-content:center}
.hubT .hubPics.wide:has(>:nth-child(2)) canvas,.hubT .hubPics.wide:has(>:nth-child(2)) img{height:auto;width:auto;max-width:100%;max-height:calc((100% - 16px*var(--z))/3);flex:0 1 auto}
.hubFoot{grid-column:1/3;grid-row:3;display:flex;align-items:center;gap:calc(10px*var(--z))}
.hubGo{font:800 calc(16px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase;padding:calc(12px*var(--z)) calc(18px*var(--z));border-radius:calc(8px*var(--z));background:linear-gradient(180deg,#ffc061,#ff8a1f 60%,#e2700c);color:#160b00;box-shadow:0 3px 0 #8a3f00}
.hubN{font:700 calc(13px*var(--z))/1 var(--gu-display);letter-spacing:1px;text-transform:uppercase;color:#7dffa6}
.hubWait{font:700 calc(13px*var(--z))/1 var(--gu-display);letter-spacing:1px;text-transform:uppercase;color:#9aa0aa;background:#24262b;padding:calc(8px*var(--z)) calc(12px*var(--z));border-radius:calc(6px*var(--z))}
.hubOpen{margin-left:auto;font:700 calc(14px*var(--z))/1 var(--gu-display);letter-spacing:1px;text-transform:uppercase;color:var(--gu-amber2)}
/* the activity view: one panel, the whole window between the top bar and the dock */
#guFocus{position:fixed;left:0;right:0;top:var(--gu-hud);bottom:calc(var(--gu-dock) + calc(14px*var(--z)));z-index:18;display:none;padding:calc(6px*var(--z)) calc(16px*var(--z)) 0}
#guFocus.on{display:block;animation:guFade .15s ease-out}
#guFocus.quiet{animation:none}
#guFocus .fIn{height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#16171b,#0b0c0e);border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--gu-amber);border-radius:calc(14px*var(--z));box-shadow:0 calc(20px*var(--z)) calc(60px*var(--z)) rgba(0,0,0,.7);overflow:hidden}
#guFocus .fHead{display:flex;align-items:center;gap:calc(12px*var(--z));padding:calc(10px*var(--z)) calc(16px*var(--z));border-bottom:1px solid rgba(255,255,255,.07)}
#guFocus .fHead h2{margin:0;font:800 calc(26px*var(--z))/1 var(--gu-title);text-transform:uppercase;letter-spacing:.5px;color:#fff}
#guFocus .fBody{flex:1;min-height:0;padding:calc(10px*var(--z)) calc(18px*var(--z)) calc(14px*var(--z));overflow:hidden}
body.gu-zoom #guFocus .fBody{zoom:var(--gz);--z:1}
#guFocus .fBody>.panel{height:100%;margin:0;background:none;border:0;box-shadow:none;padding:0;overflow:auto;backdrop-filter:none}
#guFocus .fBody>.panel>h3:first-child,#guFocus .fBody>.panel>h2:first-child{display:none}
#guFocus .fBody>.panel.cols{column-width:calc(460px*var(--z));column-gap:calc(28px*var(--z));column-fill:auto;overflow-x:auto;overflow-y:hidden}
#guFocus .fBody>.panel.cols>*{break-inside:avoid}
#guFocus .fBody .racers{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(300px*var(--z)),1fr));gap:calc(12px*var(--z))}
/* every activity in the hub uses the same place styling */
#guFocus .btn{min-height:calc(44px*var(--z));padding:0 calc(16px*var(--z));border-radius:calc(6px*var(--z));font:800 calc(15px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase;background:linear-gradient(180deg,#ffc061,#ff8a1f 60%,#e2700c);box-shadow:0 3px 0 #8a3f00;color:#160b00}
#guFocus .btn:disabled{background:#33363d;color:#80858e;box-shadow:0 3px 0 #18191c}
#guFocus .ghost{min-height:calc(44px*var(--z));padding:0 calc(14px*var(--z));border-radius:calc(6px*var(--z));font-weight:700}
@media (max-height:520px){
  .guHub{gap:calc(8px*var(--z));margin-top:calc(4px*var(--z))}
  .hubT{padding:calc(10px*var(--z)) calc(12px*var(--z))}.hubIc{width:calc(38px*var(--z));height:calc(38px*var(--z))}
  .hubTx b{font-size:calc(17px*var(--z))}.hubP{-webkit-line-clamp:2;font-size:calc(12px*var(--z))}.hubGo{padding:calc(8px*var(--z)) calc(12px*var(--z));font-size:calc(13px*var(--z))}
  .hubPics canvas,.hubPics img{height:calc(56px*var(--z))}
  #guFocus .fHead{padding:calc(6px*var(--z)) calc(10px*var(--z))}#guFocus .fHead h2{font-size:calc(18px*var(--z))}
}
.hubRows{grid-column:1/3;grid-row:2;align-self:stretch;display:flex;flex-direction:column;gap:calc(6px*var(--z));min-height:0;overflow:hidden;margin-top:calc(4px*var(--z))}
.hubT.rows .hubTx{grid-row:1}
.hubT.rows .hubP{-webkit-line-clamp:2}
.hubRow{display:flex;align-items:center;gap:calc(10px*var(--z));padding:calc(8px*var(--z)) calc(8px*var(--z)) calc(8px*var(--z)) calc(12px*var(--z));background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);border-left:3px solid rgba(255,138,31,.6);border-radius:calc(8px*var(--z));font:600 calc(15px*var(--z))/1.2 var(--gu-body);color:#e8eaee}
.hubRow>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubRow em{font:700 calc(11px*var(--z))/1 var(--gu-display);font-style:normal;letter-spacing:.8px;text-transform:uppercase;color:var(--gu-amber2);margin-left:calc(6px*var(--z))}
.hubRb{flex:none;font:800 calc(13px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase;padding:calc(9px*var(--z)) calc(14px*var(--z));border-radius:calc(6px*var(--z));background:linear-gradient(180deg,#ffc061,#ff8a1f 60%,#e2700c);color:#160b00;box-shadow:0 2px 0 #8a3f00}
.hubRb.off{background:#2a2c31;color:#80858e;box-shadow:none}
.hubMore{font:700 calc(12px*var(--z))/1 var(--gu-display);letter-spacing:1px;text-transform:uppercase;color:#8b919c;padding-left:calc(4px*var(--z))}
@media (max-height:520px){ .hubRows{display:none} }
.hubRow[hidden],.hubMore[hidden]{display:none}
/* phones: the hub is a grid of compact buttons (icon + name); the car strip above shrinks to one line */
@media (max-height:520px){
  body.gu-hub .streetTop .panel{flex-wrap:nowrap;gap:calc(6px*var(--z));padding:calc(5px*var(--z)) calc(8px*var(--z));margin-bottom:calc(4px*var(--z));font-size:calc(11px*var(--z));white-space:nowrap;overflow:hidden}
  body.gu-hub .streetTop .panel>b{flex:none}
  body.gu-hub .streetTop .panel button{flex:none;min-height:calc(28px*var(--z));padding:0 calc(8px*var(--z));font-size:calc(11px*var(--z))}
  body.gu-hub .placeHead{margin-bottom:calc(2px*var(--z))}
  .guHub{grid-template-columns:repeat(auto-fit,minmax(calc(170px*var(--z)),1fr))!important;grid-auto-rows:minmax(calc(44px*var(--z)),1fr)}
  .hubT{display:flex;align-items:center;gap:calc(8px*var(--z));padding:calc(6px*var(--z)) calc(10px*var(--z));border-bottom-width:2px}
  .hubIc{flex:none;width:calc(32px*var(--z));height:calc(32px*var(--z));border-radius:calc(8px*var(--z));box-shadow:0 2px 0 #8a3f00}
  .hubTx{flex:1;gap:0}.hubTx b{font-size:calc(14px*var(--z));line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hubTx i,.hubP,.hubPics,.hubFoot{display:none}
}
/* parts store: tabs for each part family, one family of cards on screen at a time */
body.gu-shop #shopGrid.oneSlot{display:flex;flex-direction:column;overflow:hidden;padding-bottom:calc(4px*var(--z))}
#shopGrid .gsOff,#shopGrid.oneSlot>.shead{display:none!important}
.slotTabs{flex:none;display:flex;gap:calc(6px*var(--z));overflow-x:auto;scrollbar-width:none;padding:0 0 calc(10px*var(--z))}
.slotTabs::-webkit-scrollbar{display:none}
.slotTabs button{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:calc(3px*var(--z));min-height:calc(48px*var(--z));padding:calc(7px*var(--z)) calc(14px*var(--z));border-radius:calc(8px*var(--z));background:rgba(14,15,18,.85);border:1px solid rgba(255,255,255,.08);color:#d9dde3;text-align:left;cursor:pointer}
.slotTabs b{font:800 calc(15px*var(--z))/1 var(--gu-display);letter-spacing:.8px;text-transform:uppercase}
.slotTabs i{font:600 calc(12px*var(--z))/1 var(--gu-body);font-style:normal;color:#8b919c;max-width:calc(170px*var(--z));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slotTabs button.on{background:linear-gradient(180deg,rgba(255,170,80,.22),rgba(255,138,31,.1));border-color:var(--gu-amber);color:#fff;box-shadow:inset 0 -3px 0 var(--gu-amber)}
.slotTabs button.on i{color:var(--gu-amber2)}
body.gu-shop #shopGrid.oneSlot>.pgrid{flex:1;min-height:0;align-items:flex-start;margin:0}
@media (max-height:520px){
  .slotTabs{padding-bottom:calc(6px*var(--z))}
  .slotTabs button{min-height:calc(34px*var(--z));padding:calc(4px*var(--z)) calc(10px*var(--z))}
  .slotTabs b{font-size:calc(12px*var(--z))}.slotTabs i{display:none}
}
@media (max-height:520px){
  body.gu-shop .cats{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:calc(4px*var(--z));padding-bottom:calc(4px*var(--z))}
  body.gu-shop .cats button{flex-direction:column;justify-content:center;gap:calc(2px*var(--z));min-height:calc(44px*var(--z));padding:calc(3px*var(--z));font-size:calc(9px*var(--z));line-height:1.05;text-align:center}
  body.gu-shop .cats button svg{width:calc(18px*var(--z));height:calc(18px*var(--z))}
  body.gu-shop #shopGrid.oneSlot>.pgrid{padding-bottom:0}
  body.gu-shop #shopGrid.oneSlot .prod{max-height:100%}
}
@media (max-height:520px){ body.gu-shop #shopGrid.oneSlot .chips{display:none} }
/* tune: groups side by side, or tabs when the window is short */
body.gu-tab-tune .tSecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(270px*var(--z)),1fr));gap:calc(12px*var(--z));align-items:start}
body.gu-tab-tune .tSec{min-width:0;background:rgba(120,200,255,.03);border:1px solid rgba(120,200,255,.1);border-radius:calc(10px*var(--z));padding:calc(10px*var(--z))}
body.gu-tab-tune .tSec.big{grid-column:span 2}
body.gu-tab-tune .tSec[hidden]{display:none}
body.gu-tab-tune .tSec>h4{margin:0 0 calc(8px*var(--z));font:700 calc(15px*var(--z))/1 var(--gu-display);letter-spacing:1.6px;text-transform:uppercase;color:#6fd0ff}
body.gu-tab-tune .tBody{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(230px*var(--z)),1fr));gap:calc(10px*var(--z));align-items:start}
body.gu-tab-tune .tBody>:not(.slider){grid-column:1/-1}
body.gu-tab-tune .tBody .row{flex-wrap:wrap;gap:calc(8px*var(--z))}
body.gu-tab-tune .tSecs.tabbed{grid-template-columns:1fr}
body.gu-tab-tune .tSecs.tabbed .tSec{grid-column:auto;background:none;border:0;padding:0}
body.gu-tab-tune .tSecs.tabbed .tSec>h4{display:none}
.tTabs{display:none;gap:calc(6px*var(--z));overflow-x:auto;scrollbar-width:none}
.tTabs.on{display:flex}
.tTabs button{flex:none;min-height:calc(42px*var(--z));padding:0 calc(16px*var(--z));border-radius:calc(8px*var(--z));background:rgba(10,18,24,.9);border:1px solid rgba(120,200,255,.18);color:#a9c7d6;font:700 calc(14px*var(--z))/1 var(--gu-display);letter-spacing:1.2px;text-transform:uppercase;cursor:pointer}
.tTabs button.on{color:#06121a;background:linear-gradient(180deg,#9fe3ff,#3fc3ff);border-color:transparent}
@media (max-height:520px){
  body.gu-tab-tune #view .panel:first-child{padding:calc(8px*var(--z)) calc(12px*var(--z));gap:calc(6px*var(--z))}
  body.gu-tab-tune #view .panel:first-child>h2{font-size:calc(15px*var(--z));margin:0}
  body.gu-tab-tune h2 .notesBtn{padding:calc(4px*var(--z)) calc(8px*var(--z));min-height:0}
  body.gu-tab-tune #view .panel:first-child>.note{padding:calc(5px*var(--z)) calc(10px*var(--z));font-size:calc(11px*var(--z));margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tTabs button{min-height:calc(30px*var(--z));padding:0 calc(12px*var(--z));font-size:calc(12px*var(--z))}
  body.gu-tab-tune .tBody{grid-template-columns:repeat(auto-fill,minmax(calc(190px*var(--z)),1fr));gap:calc(6px*var(--z))}
  body.gu-tab-tune .slider{padding:calc(5px*var(--z)) calc(8px*var(--z))}
  body.gu-tab-tune .slider label{font-size:calc(11px*var(--z))}
  body.gu-tab-tune .slider .val{font-size:calc(16px*var(--z))}
  body.gu-tab-tune .slider input{margin:calc(2px*var(--z)) 0}
  body.gu-tab-tune .slider .muted.small{font-size:calc(10.5px*var(--z));line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* street racing spots (Save-Rite Lot, the co-op): every racer card fits in one row across the screen; only on a narrow
   phone with many racers does the row swipe sideways (never hidden under the dock) */
body.gu-place main:has(>.racers){height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}
body.gu-place.gu-zoom main:has(>.racers){height:calc(100dvh / var(--gz))}
body.gu-place main:has(>.racers)>*:not(.placeBg,.racers){flex:none}
body.gu-place main>.streetTop .panel{margin-bottom:calc(10px*var(--z))}
body.gu-place main>.racers{flex:1 1 0;min-height:0;display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(calc(210px*var(--z)),1fr);grid-template-rows:minmax(0,1fr);gap:calc(12px*var(--z));overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:calc(4px*var(--z))}
body.gu-place main>.racers{align-items:stretch;grid-template-rows:fit-content(100%)!important}
body.gu-place main>.racers>.racer{display:flex;flex-direction:column;min-height:0;max-height:100%;min-width:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scroll-snap-align:start;margin:0}
body.gu-place main>.racers>.racer>canvas{flex:0 1 auto;min-height:calc(48px*var(--z));width:100%;height:auto;max-height:42%;object-fit:contain;aspect-ratio:3/1}
body.gu-place main>.racers .rInfo{flex:1 0 auto;display:flex;flex-direction:column;gap:calc(4px*var(--z))}
body.gu-place main>.racers .rInfo>*{flex:none;margin:0}
body.gu-place main>.racers .rInfo>.row{flex:none}
body.gu-place main>.racers .rInfo>.btn{flex:none;margin-top:auto;margin-bottom:0;position:relative;align-self:flex-start;min-height:calc(44px*var(--z))}
body.gu-place main>.streetTop .panel .row{flex-wrap:nowrap}
@media (max-height:520px){
  body.gu-place main>.racers{grid-auto-columns:minmax(calc(190px*var(--z)),1fr);gap:calc(8px*var(--z))}
  body.gu-place main>.racers .rInfo{font-size:calc(11px*var(--z))}
  body.gu-place main>.racers .rInfo .small{font-size:calc(10.5px*var(--z));line-height:1.2}
  body.gu-place main>.racers .rInfo>.btn{min-height:calc(34px*var(--z));font-size:calc(12px*var(--z))}
  body.gu-place main>.racers .rInfo{padding:calc(6px*var(--z)) calc(10px*var(--z)) calc(8px*var(--z))}
  body.gu-place main>.racers>.racer>canvas{max-height:30%}
  body.gu-place main>.streetTop .panel{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;padding:calc(5px*var(--z)) calc(8px*var(--z));font-size:calc(11px*var(--z));margin-bottom:calc(6px*var(--z))}
  body.gu-place main>.streetTop .panel button{min-height:calc(28px*var(--z));padding:0 calc(8px*var(--z));font-size:calc(11px*var(--z))}
}
/* short windows: smaller car picture and text before anything gets cut */
@media (max-height:700px){ body.gu-place main>.racers .rInfo{padding-top:calc(8px*var(--z));padding-bottom:calc(10px*var(--z));gap:calc(3px*var(--z))} body.gu-place main>.racers .rInfo .small{font-size:calc(12.5px*var(--z));line-height:1.25} body.gu-place main>.racers>.racer>canvas{max-height:34%} }