:root{ --bg:#0b0b1a; --panel:#16161f; --panel2:#1f1f2b; --line:#2c2c3a; --ink:#f4f4f8; --mut:#a8a8bd;
    --pink:#ff4fa3; --purple:#9d6bff; --cyan:#4fe3ff; --lime:#b6ff5c; --gold:#ffd166; --red:#ff5470; }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
  html,body{ margin:0; padding:0; height:100%; overflow:hidden; }
  body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; background:#06060b; color:var(--ink); height:100svh; -webkit-font-smoothing:antialiased;   /* svh: iOS 100vh hides the bottom controls under the toolbar */ }
  .topbar{ display:flex; align-items:center; justify-content:space-between; padding:calc(8px + env(safe-area-inset-top)) 14px 8px; position:relative; z-index:6; }
  .topbar .mini{ font-weight:900; letter-spacing:1.5px; color:var(--cyan); font-size:15px; }
  .topbar .mini b{ color:#fff; } .topbar .mini i{ color:var(--pink); font-style:normal; font-size:11px; vertical-align:super; }
  .back{ background:none; border:1px solid var(--line); color:var(--mut); padding:8px 12px; border-radius:999px; font-weight:700; cursor:pointer; font-size:13px; text-decoration:none; }
  .stage{ position:absolute; inset:0; }
  #scene{ position:absolute; inset:0; } #scene canvas{ display:block; width:100%; height:100%; touch-action:none; }

  .hud{ position:absolute; top:calc(52px + env(safe-area-inset-top)); left:0; right:0; display:flex; justify-content:space-between; padding:0 16px; z-index:4; pointer-events:none; gap:8px; }
  .hud .stat{ background:rgba(0,0,0,.45); border:1px solid var(--line); border-radius:12px; padding:6px 12px; font-weight:800; font-size:14px; white-space:nowrap; }
  .hud .stat b{ color:var(--cyan); } .hud .stat.spd b{ color:var(--gold); }
  .prog{ position:absolute; top:calc(82px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:min(320px,80vw); z-index:4; pointer-events:none; }
  .prog .bar{ height:7px; border-radius:5px; background:rgba(0,0,0,.5); border:1px solid var(--line); overflow:hidden; }
  .prog .bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--lime)); }
  .prog .lbl{ font-size:10px; font-weight:800; color:var(--mut); text-align:center; margin-top:2px; letter-spacing:1px; }
  .prog .flag{ position:absolute; right:-4px; top:-3px; font-size:12px; }
  #peerDots{ position:absolute; left:0; right:0; top:0; height:9px; pointer-events:none; }
  #peerDots u{ position:absolute; top:-1px; width:9px; height:9px; border-radius:50%; border:2px solid #090b16; transform:translateX(-50%); box-shadow:0 0 6px rgba(255,120,220,.8); }
  .peerind{ position:absolute; top:calc(108px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:4; pointer-events:none; display:none;
    font-size:12px; font-weight:800; letter-spacing:.5px; color:#dff6ff; background:rgba(10,12,24,.6); border:1px solid rgba(120,200,255,.35); border-radius:10px; padding:3px 10px; text-shadow:0 0 6px rgba(80,200,255,.5); }
  .rivaltrack{ position:absolute; top:calc(108px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:5; display:none;
    background:linear-gradient(110deg,rgba(255,90,160,.92),rgba(180,70,255,.92)); color:#fff; border:1px solid rgba(255,255,255,.35);
    border-radius:999px; padding:4px 13px; font-weight:900; font-size:13px; white-space:nowrap; pointer-events:none; box-shadow:0 3px 12px rgba(255,80,150,.4); }
  .rivaltrack.show{ display:block; }
  .rivaltrack.behindyou{ background:linear-gradient(110deg,rgba(54,224,255,.92),rgba(110,255,120,.9)); color:#062028; box-shadow:0 3px 12px rgba(54,200,255,.4); }

  .heat{ position:absolute; top:calc(108px + env(safe-area-inset-top)); left:18px; z-index:5; display:none; align-items:center; gap:6px; pointer-events:none; }
  .heat.show{ display:flex; } .heat .lbl{ font-size:11px; font-weight:900; letter-spacing:1px; color:#fff; text-shadow:0 1px 2px #000; }
  .heat .pip{ width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.35); background:rgba(0,0,0,.4); }
  .heat .pip.on{ background:var(--red); border-color:#fff; }
  .heat.warn .lbl{ color:var(--red); } .heat.warn .pip{ animation:blink .4s steps(1) infinite; background:var(--red); border-color:#fff; }
  @keyframes blink{ 50%{ opacity:.35; } }

  .copbar{ position:absolute; top:calc(150px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:min(280px,76vw); z-index:5; display:none; text-align:center; pointer-events:none; }
  .copbar.show{ display:block; }
  .copbar .t{ font-size:14px; font-weight:900; color:var(--gold); text-shadow:0 1px 3px #000; margin-bottom:4px; }
  .copbar.danger .t{ color:var(--red); }
  .copbar .bar{ height:13px; border-radius:7px; background:rgba(0,0,0,.55); overflow:hidden; border:1px solid rgba(255,255,255,.5); }
  .copbar .bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lime),var(--cyan)); transition:width .1s linear; }
  .copbar.danger .bar i{ background:linear-gradient(90deg,var(--red),var(--gold)); }

  .banner{ position:absolute; top:35%; left:50%; transform:translateX(-50%); z-index:5; font-weight:900; font-size:clamp(19px,5.6vw,29px);
    color:var(--cyan); text-shadow:0 2px 8px #000,0 0 4px #000; opacity:0; transition:opacity .2s; pointer-events:none; text-align:center; white-space:normal; max-width:92vw; line-height:1.12; }
  .banner.show{ opacity:1; } .banner.cop{ color:var(--red); } .banner.win{ color:var(--lime); }
  .copTint{ position:absolute; inset:0; z-index:3; pointer-events:none; display:none; } .copTint.show{ display:block; }
  .flash{ position:absolute; inset:0; z-index:3; pointer-events:none; background:#cdd9ff; opacity:0; }
  .nearflash{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .18s; background:radial-gradient(ellipse at 50% 72%, transparent 38%, rgba(79,227,255,.5)); } .nearflash.show{ opacity:1; }
  /* 🚨 5-second arrest countdown when you stall during a chase */
  .arrest{ position:absolute; left:50%; top:28%; transform:translateX(-50%); z-index:9; display:none; text-align:center; pointer-events:none;
    background:rgba(24,2,6,.82); border:2px solid var(--red); border-radius:18px; padding:14px 22px; box-shadow:0 0 40px rgba(255,40,70,.6); max-width:88%; }
  .arrest.show{ display:block; animation:arrestPulse .5s infinite alternate; }
  @keyframes arrestPulse{ from{ box-shadow:0 0 26px rgba(255,40,70,.5); } to{ box-shadow:0 0 60px rgba(255,40,70,.95); } }
  .arrest .at{ font-size:clamp(15px,4.4vw,22px); font-weight:900; color:var(--red); text-shadow:0 1px 3px #000; }
  .arrest .an{ font-size:clamp(46px,16vw,86px); font-weight:900; color:#fff; line-height:1; margin:2px 0; text-shadow:0 0 18px var(--red); }
  .arrest .as{ font-size:clamp(13px,3.6vw,16px); font-weight:800; color:var(--gold); }
  /* full-screen BUSTED on a failed arrest = game over */
  .busted{ position:absolute; inset:0; z-index:13; display:none; flex-direction:column; align-items:center; justify-content:center; background:rgba(8,0,0,.93); }
  .busted.show{ display:flex; animation:bustIn .25s; }
  @keyframes bustIn{ from{ opacity:0; transform:scale(1.25); } to{ opacity:1; transform:scale(1); } }
  .busted .bz{ font-size:clamp(60px,22vw,140px); line-height:1; }
  .busted .bt{ font-size:clamp(54px,17vw,150px); font-weight:900; letter-spacing:6px; color:var(--red); text-shadow:0 0 30px rgba(255,40,70,.95),0 4px 10px #000; }
  /* Rear-view mirror removed 2026-07-20 (it flickered constantly). Element kept
     hidden so the existing .classList('show'/'danger') toggles are harmless no-ops. */
  .mirror, .mirror.show{ display:none !important; }

  .shout{ position:absolute; left:50%; transform:translateX(-50%); top:calc(196px + env(safe-area-inset-top)); z-index:5; pointer-events:none;
    background:rgba(255,79,163,.92); color:#1a0512; font-weight:900; padding:8px 16px; border-radius:999px; font-size:15px; max-width:86%;
    text-align:center; opacity:0; transition:opacity .2s; box-shadow:0 6px 20px rgba(0,0,0,.4); }
  .shout.show{ opacity:1; }

  .controls{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:flex-end;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom)); z-index:6; }
  .stick{ position:relative; width:clamp(104px,32vw,150px); height:clamp(72px,22vw,96px);
    border-radius:999px; background:rgba(20,20,30,.78); border:1px solid var(--line); touch-action:none; }
  .stick .track{ position:absolute; left:14px; right:14px; top:50%; height:4px; transform:translateY(-50%); border-radius:4px;
    background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan)); opacity:.55; }
  .stick .knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:clamp(48px,15vw,64px); height:clamp(48px,15vw,64px); border-radius:50%;
    background:radial-gradient(circle at 38% 32%, #fff6, transparent 60%), linear-gradient(180deg,var(--pink),var(--purple)); box-shadow:0 6px 16px rgba(0,0,0,.5); }
  .stick .lbl{ position:absolute; bottom:4px; left:0; right:0; text-align:center; font-size:10px; font-weight:800; color:var(--mut); letter-spacing:1px; }
  .rcluster{ display:grid; grid-template-columns:auto auto; grid-template-areas:". nitro" "brake gas"; gap:10px; align-items:end; touch-action:none; }
  .pedal{ width:clamp(70px,21vw,98px); height:clamp(72px,22vw,98px); border:1px solid var(--line); border-radius:20px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; touch-action:none; color:#fff; }
  .gas{ grid-area:gas; background:rgba(34,120,80,.92); color:#dcffe8; } .gas:active{ background:var(--lime); color:#10240a; }
  .gas.on{ background:var(--lime); color:#10240a; box-shadow:0 0 16px rgba(134,255,94,.7), inset 0 0 0 2px rgba(255,255,255,.4); }   /* latched: tapped once, car keeps going */
  .brake{ grid-area:brake; background:rgba(31,31,43,.85); } .brake:active{ background:var(--red); color:#180407; }
  .nitro{ grid-area:nitro; justify-self:end; width:clamp(70px,21vw,98px); height:clamp(54px,15vw,68px); background:rgba(40,28,60,.88);
    border:1px solid var(--line); border-radius:18px; font-weight:900; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; touch-action:none; transition:background .12s; }
  .nitro.ready{ background:rgba(34,120,80,.5); color:#dcffe8; } .nitro.ready:active{ background:var(--cyan); color:#062028; }
  .nitro.charging{ background:rgba(31,31,43,.55); color:#7a7a8a; font-size:16px; } .nitro.go{ background:var(--cyan); color:#062028; }

  .overlay{ position:absolute; inset:0; z-index:12; display:flex; overflow-y:auto; padding:22px; }
  #menuArt{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .overlay::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,5,18,.5) 0%, rgba(6,5,16,.72) 55%, rgba(4,3,10,.9) 100%); z-index:1; }
  .overlay.hide{ display:none; }
  /* COUNTDOWN overlay: let it sit lightly over the live scene so you can SEE the road + pedals and
     PRESS GAS during 3-2-1 (taps fall through to the controls). */
  #cdOv{ pointer-events:none; }
  #cdOv::before{ background:linear-gradient(180deg, rgba(6,5,18,.20), rgba(4,3,10,.34)); }
  #cdOv .card{ background:none; border:none; box-shadow:none; backdrop-filter:none; }
  #cdNum{ text-shadow:0 0 18px rgba(120,200,255,.85), 0 0 34px rgba(255,90,200,.6), 0 4px 10px rgba(0,0,0,.75); }
  #cdTitle{ text-shadow:0 2px 8px rgba(0,0,0,.8); }
  .card{ position:relative; z-index:2; width:100%; max-width:380px; margin:auto; background:linear-gradient(180deg, rgba(26,20,48,.82), rgba(12,9,26,.9)); border:1px solid rgba(255,255,255,.14);
    border-radius:22px; padding:16px 16px 14px; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.6); backdrop-filter:blur(7px); }
  .card h1{ margin:2px 0 2px; font-size:clamp(20px,6.6vw,34px); font-weight:900; letter-spacing:.5px; line-height:.95; color:#fff; white-space:nowrap;
    text-shadow:0 0 10px rgba(120,200,255,.55), 0 0 22px rgba(255,90,200,.5), 0 2px 4px rgba(0,0,0,.6); }
  .card .tag{ display:inline-block; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10px; font-weight:900; letter-spacing:2px; color:var(--cyan); background:rgba(79,227,255,.08); border:1px solid rgba(79,227,255,.45); padding:3px 10px; border-radius:6px; margin-bottom:8px; box-shadow:0 0 12px rgba(79,227,255,.25); }
  .card .sub{ margin:0 0 14px; color:var(--mut); font-size:14px; }
  .big{ font-size:52px; } #cdNum{ font-size:clamp(34px,13vw,58px); font-weight:900; }
  .playbtn{ width:100%; border:none; cursor:pointer; border-radius:14px; padding:13px; font-weight:900; font-size:17px; margin-top:4px; background:linear-gradient(110deg,var(--purple),var(--pink) 60%,var(--cyan)); color:#120417; }
  .playbtn:active{ transform:translateY(2px); } .playbtn:disabled{ opacity:.5; cursor:default; }
  .playbtn.isready{ background:linear-gradient(110deg,#16b06a,#0d8f52 60%,var(--cyan)); color:#06281a; }
  /* MOBILE: lift the GO button to the top of the ride-picker so it isn't buried below the car tiles */
  @media (max-width:600px), (max-height:600px){
    #menuOv .card{ display:flex; flex-direction:column; align-items:stretch; }
    #menuOv .card > .tag{ order:-2; align-self:center; }
    #menuOv .card > #title-text{ order:-2; }
    #menuOv .card > .hype{ order:-2; }
    #menuOv .card > #playBtn{ order:-1; margin:6px 0 11px; }
  }
  .best{ margin-top:7px; font-size:13px; color:var(--mut); } .best b{ color:var(--lime); }
  .carrow{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:4px 0 6px; }
  .carrow button{ background:var(--panel2); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:7px 11px; font-weight:800; font-size:12px; cursor:pointer; }
  .carrow button.sel{ background:var(--pink); color:#1a0512; border-color:var(--pink); }
  .colorrow{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:0 0 6px; }
  .colorrow button{ flex:0 0 clamp(30px,7.5vw,36px); width:clamp(30px,7.5vw,36px); aspect-ratio:1; border-radius:50%; border:2px solid rgba(255,255,255,.45); cursor:pointer; padding:0; }   /* kid-size touch targets — wrap to two rows rather than shrink below a fingertip */
  .colorrow button.sel{ border-color:#fff; box-shadow:0 0 0 2px var(--pink); transform:scale(1.15); }
  /* ===== neon / techy ride picker ===== */
  .hype{ margin:5px 0 8px; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px; font-weight:800; letter-spacing:4px; color:var(--cyan); text-shadow:0 0 12px rgba(79,227,255,.6); }
  .pickc{ margin:6px 0 4px; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; font-weight:800; letter-spacing:3px; color:var(--mut); }
  /* section headers with neon rules */
  .modehdr{ display:flex; align-items:center; gap:10px; margin:3px 0 6px; }
  .modehdr i{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(79,227,255,.55)); }
  .modehdr i:last-child{ background:linear-gradient(90deg,rgba(79,227,255,.55),transparent); }
  .modehdr span{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; font-weight:900; letter-spacing:3px; color:var(--cyan); text-shadow:0 0 10px rgba(79,227,255,.5); }
  .modehdr.alt i{ background:linear-gradient(90deg,transparent,rgba(255,209,102,.55)); } .modehdr.alt i:last-child{ background:linear-gradient(90deg,rgba(255,209,102,.55),transparent); }
  .modehdr.alt span{ color:var(--gold); text-shadow:0 0 10px rgba(255,209,102,.5); }
  .drivetoggle{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 9px; }
  .drivetoggle .dt{ flex:1; padding:8px 4px; border-radius:9px; border:1px solid rgba(79,227,255,.35); background:rgba(10,12,24,.7); color:#bfeaff; font-weight:900; font-size:12px; letter-spacing:1px; cursor:pointer; font-family:ui-monospace,Menlo,monospace; }
  .drivetoggle .dt.sel{ background:linear-gradient(180deg,rgba(79,227,255,.34),rgba(79,227,255,.12)); color:#fff; border-color:var(--cyan); box-shadow:0 0 12px rgba(79,227,255,.4); }
  .sndrow{ display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin:2px 0 6px; }
  .sndrow .dt{ flex:1; padding:6px 4px; border-radius:9px; border:1px solid rgba(255,255,255,.16); background:rgba(10,12,24,.7); color:#5d6382; font-weight:900; font-size:10px; letter-spacing:1px; cursor:pointer; font-family:ui-monospace,Menlo,monospace; text-decoration:line-through; }
  .sndrow .dt.sel{ color:#bfeaff; border-color:rgba(79,227,255,.4); text-decoration:none; }
  .mission{ margin:4px 2px 2px; font-size:11px; line-height:1.35; color:#9fa6c6; text-align:center; min-height:15px; }
  .pedal.pulse{ animation:gaspulse .9s ease-in-out infinite; }
  @keyframes gaspulse{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(134,255,94,.0); } 50%{ transform:scale(1.12); box-shadow:0 0 0 6px rgba(134,255,94,.4),0 0 30px rgba(134,255,94,.8); } }
  /* shared ride tile */
  .ride{ position:relative; cursor:pointer; border:1.5px solid rgba(120,200,255,.22); border-radius:14px; overflow:hidden;
    background:radial-gradient(120% 80% at 50% 0%, rgba(60,80,140,.30), rgba(10,12,24,.92) 70%);
    transition:transform .12s, border-color .15s, box-shadow .15s; -webkit-tap-highlight-color:transparent; }
  .ride .thumb{ display:block; width:100%; background:center/86% no-repeat; }
  .ride .nm{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-weight:900; letter-spacing:1px; color:#dfe6ff; }
  .ride .tagx{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-weight:800; letter-spacing:1px; color:#7f86a8; }
  .ride:active{ transform:scale(.95); }
  .ride.sel{ border-color:var(--cyan); box-shadow:0 0 0 1.5px var(--cyan),0 0 22px rgba(79,227,255,.5); }
  .ride.sel .nm{ color:#fff; } .ride.sel .tagx{ color:var(--cyan); }
  /* RACING: 3 square tiles, thumbnail on top */
  .cartiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 5px; }
  .cartiles .ride{ padding:5px 4px 7px; text-align:center; }
  .cartiles .ride .thumb{ height:42px; margin-bottom:2px; }
  .cartiles .ride .nm{ display:block; font-size:12px; } .cartiles .ride .tagx{ display:block; font-size:10px; margin-top:2px; }
  /* SPECIAL MODES: wide banner tiles, thumbnail left + text right, colour-coded */
  /* taxi + police + robber share ONE compact 3-up row (mission text lives on the tile's tag) */
  .modetiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 7px; }
  .modetiles .ride{ display:block; padding:5px 4px 7px; text-align:center; }
  .modetiles .ride .thumb{ width:100%; height:38px; background-size:contain; margin-bottom:2px; }
  .modetiles .ride .mtxt{ display:block; min-width:0; }
  .modetiles .ride .md{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10.5px; font-weight:900; letter-spacing:.5px; color:#fff; }
  .modetiles .ride .dsc{ display:none; }
  .modetiles .ride .tagx{ display:block; width:max-content; margin:3px auto 0; font-size:9px; padding:1px 6px; border-radius:999px; border:1px solid currentColor; }
  .modetiles .m-taxi{ border-color:rgba(255,209,102,.4); background:radial-gradient(120% 120% at 12% 50%, rgba(255,209,102,.18), rgba(10,12,24,.92) 62%); }
  .modetiles .m-taxi .tagx{ color:var(--gold); }
  .modetiles .m-robber{ border-color:rgba(255,90,90,.45); background:radial-gradient(120% 120% at 12% 50%, rgba(255,90,90,.2), rgba(10,12,24,.92) 62%); }
  .modetiles .m-robber .tagx{ color:#ff7a7a; }
  .modetiles .m-taxi.sel{ border-color:var(--gold); box-shadow:0 0 0 1.5px var(--gold),0 0 22px rgba(255,209,102,.45); }
  .modetiles .m-cop{ border-color:rgba(91,140,255,.42); background:radial-gradient(120% 120% at 12% 50%, rgba(91,140,255,.20), rgba(10,12,24,.92) 62%); }
  .modetiles .m-cop .tagx{ color:#7aa2ff; }
  .modetiles .m-cop.sel{ border-color:#5b8cff; box-shadow:0 0 0 1.5px #5b8cff,0 0 22px rgba(91,140,255,.5); }
  /* secondary neon EXIT button + exit screen */
  .exitbtn{ width:100%; margin:7px 0 0; border:1.5px solid rgba(120,200,255,.4); background:rgba(79,227,255,.06); color:var(--cyan);
    border-radius:12px; padding:9px; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-weight:900; letter-spacing:2px; font-size:13px; cursor:pointer; transition:transform .1s, box-shadow .15s, border-color .15s; }
  .exitbtn:active{ transform:translateY(1px); } .exitbtn:hover{ border-color:var(--cyan); box-shadow:0 0 14px rgba(79,227,255,.25); }
  .exitcard{ max-width:320px; } .exitcard .exit-h{ font-size:30px; font-weight:900; letter-spacing:1px; color:#fff; margin:2px 0 2px;
    text-shadow:0 0 12px rgba(79,227,255,.6),0 0 24px rgba(255,79,163,.5); } #exitOv .hype{ margin-bottom:16px; } #exitOv .playbtn{ animation:none; }
  .card h1{ animation:titleGlow 2.6s ease-in-out infinite; }
  @keyframes titleGlow{ 0%,100%{ text-shadow:0 0 10px rgba(120,200,255,.55),0 0 22px rgba(255,90,200,.5),0 2px 4px rgba(0,0,0,.6); }
    50%{ text-shadow:0 0 16px rgba(120,200,255,.9),0 0 34px rgba(255,90,200,.85),0 2px 4px rgba(0,0,0,.6); } }
  .playbtn:not(:disabled){ animation:playPulse 1.5s ease-in-out infinite; font-size:20px; }
  @keyframes playPulse{ 0%,100%{ box-shadow:0 0 0 rgba(255,90,200,0); transform:scale(1); } 50%{ box-shadow:0 0 26px rgba(255,90,200,.7); transform:scale(1.025); } }
  .game-version{ position:fixed; right:8px; bottom:6px; font-size:10px; color:#45455a; font-family:ui-monospace,monospace; z-index:20; }
  .crashflash{ position:absolute; inset:0; pointer-events:none; z-index:6; opacity:0; transition:opacity .34s ease-out; background:radial-gradient(ellipse at 50% 52%, rgba(255,40,40,0) 38%, rgba(220,20,20,0.55) 100%); }
  .crashflash.show{ opacity:1; transition:opacity .04s; }
  .loadbar{ height:6px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:10px; } .loadbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--lime)); transition:width .2s; }
  /* THE GARAGE — multiplayer ready-up lineup: every racer's car, name, role, READY badge */
  .ghdr{ opacity:.85; font-size:10.5px; letter-spacing:.07em; margin-bottom:6px; text-transform:uppercase; }
  .ghdr .rdy{ color:#7cfc8a; opacity:1; }
  .gslots{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:2px 0 4px; }
  .gslot{ flex:0 1 100px; min-width:86px; max-width:118px; padding:6px 4px; border-radius:11px; position:relative;
    background:linear-gradient(180deg,rgba(34,42,74,.92),rgba(10,14,28,.96)); border:1px solid rgba(120,170,255,.32); }
  .gslot.me{ border-color:rgba(79,227,255,.85); box-shadow:0 0 10px rgba(79,227,255,.35); }
  .gslot .gyou{ position:absolute; top:-6px; right:-6px; font:800 8px system-ui,sans-serif; letter-spacing:.05em; padding:2px 6px; border-radius:7px; background:var(--cyan); color:#06121a; box-shadow:0 1px 4px rgba(0,0,0,.45); }
  .gslot .gcar{ display:block; width:100%; height:48px; background:center/contain no-repeat; filter:drop-shadow(0 5px 5px rgba(0,0,0,.55)); }
  .gslot .gdot{ display:inline-block; width:26px; height:26px; border-radius:50%; margin:11px 0; }
  .gslot .gnm{ display:block; font:700 11px system-ui,sans-serif; color:#eaf1ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 2px; }
  .gslot .grole{ display:block; font:700 8.5px system-ui,sans-serif; letter-spacing:.08em; opacity:.8; text-transform:uppercase; margin:1px 0 3px; }
  .gslot .gready{ display:inline-block; font:800 9px system-ui,sans-serif; letter-spacing:.06em; padding:2px 8px; border-radius:8px;
    background:rgba(124,252,138,.16); color:#7cfc8a; border:1px solid rgba(124,252,138,.45); }
  .gslot .gwait{ display:inline-block; font:700 9px system-ui,sans-serif; letter-spacing:.06em; padding:2px 8px; border-radius:8px;
    background:rgba(255,200,90,.12); color:#ffd27a; border:1px solid rgba(255,200,90,.35); }
  /* friends-mode entry row (the in-MP party roster panel is built by refreshPartyPanel) */
  .mprow{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; margin:4px 0 2px; }
  .mpbtn{ font:800 13px/1 "Segoe UI",system-ui,sans-serif; letter-spacing:.06em; color:#0a0a14; background:linear-gradient(90deg,var(--cyan),var(--lime)); border:0; border-radius:10px; padding:9px 14px; cursor:pointer; }
  .mpbtn:active{ transform:scale(.97); }
  .mphint{ flex-basis:100%; font-size:11px; color:#9aa0c0; text-align:center; }
  .mplv{ font:600 11px/1 "Segoe UI",system-ui,sans-serif; color:#9aa0c0; background:none; border:0; text-decoration:underline; cursor:pointer; }
  /* instant garage colour preview: pre-baked body colour + a CSS underglow halo (shell.js) */
  .ride .glow{ position:absolute; left:0; right:0; top:0; height:54px; z-index:0; pointer-events:none; }
  .cartiles .ride .glow{ height:50px; } .modetiles .ride .glow{ height:46px; }
  .ride .thumb{ position:relative; z-index:1; }
  @keyframes kg-hue{ to{ filter:hue-rotate(360deg); } }
  .ride.glow-rainbow .glow{ display:block !important; background:radial-gradient(ellipse at 50% 62%, #ff4060cc 0%, #ff406000 62%); animation:kg-hue 3s linear infinite; }
  @keyframes kg-rainbow-pan{ to{ background-position:300% 0; } }
  .ride.rainbow-paint .thumb::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(60deg,#ff4060,#ffa23a,#ffd23a,#86ff5e,#36e0ff,#6b8bff,#b06bff,#ff4060); background-size:300% 100%;
    -webkit-mask:var(--carmask) center/86% no-repeat; mask:var(--carmask) center/86% no-repeat;
    mix-blend-mode:screen; opacity:.85; animation:kg-rainbow-pan 3s linear infinite; }