/* ============================================================
   SEREN
   A dark, restrained interface for a fast game.

   One identity, distinct menu compositions: black ground, white type, a neutral
   grey ramp for structure, and red as the only accent. Elevated
   surfaces - dialogs, panels, the instruments over the road - are
   glass: tonal, blurred, hairline-edged, never decorative.

   Sections
     1  Tokens
     2  Base
     3  Type
     4  Surfaces        the glass recipe, and what it does without blur
     5  Controls        buttons, icon buttons, steps, switches
     6  Splash
     7  Language       the first-run picker, and the settings dialog
     8  Home
     9  Setup           destinations, scale, bays, workbench, showroom
    10  Cars & more
    11  Race HUD
    12  Countdown
    13  Panels          pause, results
    14  Responsive
    15  Motion & contrast
   ============================================================ */

/* ============================================================
   1  TOKENS
   ============================================================ */
:root{
  /* ground -> surface, darkest first */
  --void:#050506;
  --ground:#0A0B0C;
  --asphalt:#141518;

  /* ink */
  --ink:#F4F5F6;
  --ink-2:#A7ACB3;
  --ink-3:#71767E;
  --ink-4:#4C5158;

  /* hairlines and washes, always alpha so they sit on any ground */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --line-3:rgba(255,255,255,.28);
  --wash:rgba(255,255,255,.04);
  --wash-2:rgba(255,255,255,.07);

  /* the accent, and nothing beside it */
  --red:#E5262D;
  --red-hi:#FF4A50;
  --red-lo:#B3151B;
  --red-wash:rgba(229,38,45,.14);

  /* gameplay colours - these say what the game is doing, not what the
     interface is. They are the one sanctioned exception to the ramp. */
  --go:#2FBF63;
  --go-hi:#7CF7A6;
  --gold:#FFD86B;

  /* glass: one recipe, three weights */
  --glass-blur:blur(26px) saturate(150%);
  --glass-blur-sm:blur(14px) saturate(140%);
  --glass-1:linear-gradient(180deg,rgba(32,35,41,.72),rgba(10,11,13,.80));
  --glass-2:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  --glass-3:linear-gradient(180deg,rgba(9,10,12,.74),rgba(9,10,12,.82));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.10);
  --lift-3:0 28px 70px -18px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.5);

  /* geometry */
  --r-1:8px;
  --r-2:12px;
  --r-3:16px;
  --r-4:22px;
  --r-pill:999px;

  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:26px; --s-7:34px; --s-8:44px;

  --pad:20px;                       /* screen gutter */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);

  /* type */
  --display:'Archivo','Arial Narrow',Helvetica,Arial,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  --fs-title:20px;
  --fs-body:14px;
  --fs-small:12.5px;
  --fs-meta:10px;

  /* motion */
  --ease:cubic-bezier(.22,.78,.28,1);
  --d-1:.13s;
  --d-2:.22s;
  --d-3:.34s;
}

/* ============================================================
   2  BASE
   ============================================================ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0}
body{
  background:var(--void);
  font-family:var(--body);
  font-size:var(--fs-body);
  color:var(--ink-2);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

/* Portrait-first shell. On a computer it stays a centred column until the
   window goes landscape, where the race takes the full width. */
#shell{
  position:relative;
  width:100%;max-width:520px;
  height:100dvh;height:100vh;height:100dvh;
  margin:0 auto;
  background:var(--ground);
  overflow:hidden;
  isolation:isolate;
}

/* A screen that is not showing is hidden outright rather than merely faded.
   Opacity alone left every control on every other screen in the tab order, so
   a keyboard user leaving the home screen walked into four invisible sheets.
   The visibility switch is delayed by the length of the fade, so the screen
   still fades out before it goes. */
.screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--d-3) var(--ease),visibility 0s linear var(--d-3);
  z-index:1;
}
.screen.on{
  opacity:1;visibility:visible;pointer-events:auto;z-index:2;
  transition:opacity var(--d-3) var(--ease),visibility 0s;
}
/* A screen kept on as the backdrop behind a sheet stays visible and stops
   being reachable. ui.js sets it; this is only the fallback for a browser
   that has not implemented the attribute. */
.screen[inert]{pointer-events:none}

.spacer{flex:1}

/* the page's own scrollbars, made to belong */
.setup-body,#garageBody{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.setup-body::-webkit-scrollbar,#garageBody::-webkit-scrollbar{width:6px}
.setup-body::-webkit-scrollbar-thumb,#garageBody::-webkit-scrollbar-thumb{
  background:var(--line-2);border-radius:3px}

/* ============================================================
   3  TYPE
   Five roles and no more: display, action, body, meta, readout.
   ============================================================ */
.display{
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 780;
  font-weight:780;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.96;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
.eyebrow{
  font-family:var(--mono);
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.lede,.lead{
  margin:0 0 var(--s-4);
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--ink-2);
  max-width:46ch;
}
.note{
  margin:var(--s-3) 0 0;
  font-family:var(--mono);
  font-size:var(--fs-meta);
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--ink-3);
}

/* ============================================================
   4  SURFACES
   ============================================================ */
/* Where the browser cannot blur, the same surface goes opaque instead of
   translucent - the layering survives, the readability never depends on it. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .panel-card,#langCard,#settingsCard,.hud-btn,#gauges,
  #ultPct,#itemBox,#coleSwitch,#meterRail,.count-card{
    background:linear-gradient(180deg,#1C1F24,#0B0C0E)!important;
  }
  /* Nothing is blurred behind these, so the dim has to do all the separating. */
  #settingsWrap{background:rgba(5,5,6,.94)!important}
  #langWrap{background:rgba(5,5,6,.94)!important}
  .hud-btn,#gauges,#ultPct,#itemBox,#coleSwitch,#meterRail,.shield-bar{
    background:#121316!important;
  }
  .readout{background:linear-gradient(180deg,rgba(5,6,7,.88),rgba(5,6,7,.72))!important}
}

/* ============================================================
   5  CONTROLS
   ============================================================ */
.btn{
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 720;
  font-weight:720;
  text-transform:uppercase;letter-spacing:.055em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:52px;padding:15px 20px;
  font-size:15px;line-height:1;
  border-radius:var(--r-2);
  position:relative;
  transition:background var(--d-1) var(--ease),
             border-color var(--d-1) var(--ease),
             color var(--d-1) var(--ease),
             transform var(--d-1) var(--ease),
             box-shadow var(--d-1) var(--ease);
}
.btn .ic{width:19px;height:19px;flex:0 0 auto}
.btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.btn-primary{
  background:var(--red);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 24px -8px rgba(229,38,45,.7);
}
.btn-primary .ic{stroke:#fff}
@media (hover:hover){.btn-primary:hover{background:var(--red-hi)}}
.btn-primary:active{background:var(--red-lo);transform:translateY(1px);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset}

.btn-ghost{
  background:var(--glass-2);color:var(--ink);
  border:1px solid var(--line-2);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  backdrop-filter:var(--glass-blur-sm);
  box-shadow:var(--glass-edge);
}
.btn-ghost .ic{stroke:var(--ink)}
@media (hover:hover){.btn-ghost:hover{background:var(--wash-2);border-color:var(--line-3)}}
.btn-ghost:active{background:var(--wash);transform:translateY(1px)}

.btn[disabled],.btn.off{opacity:.34;pointer-events:none}

/* One focus treatment for the whole interface: a white ring with a dark
   halo behind it, so it is visible on glass, on red and on the road. */
.btn:focus-visible,.icon-btn:focus-visible,.mode:focus-visible,
.car-opt:focus-visible,.step:focus-visible,.tog:focus-visible,
.tab:focus-visible,.lang-opt:focus-visible,#ultPct:focus-visible,
#itemBox:focus-visible,#coleSwitch:focus-visible,.set-reset:focus-visible,.set-range:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(0,0,0,.65);
}

.icon-btn{
  appearance:none;-webkit-appearance:none;border:1px solid var(--line);cursor:pointer;
  width:42px;height:42px;flex:0 0 auto;border-radius:var(--r-2);
  background:var(--glass-2);
  display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:var(--glass-blur-sm);
  backdrop-filter:var(--glass-blur-sm);
  box-shadow:var(--glass-edge);
  transition:background var(--d-1) var(--ease),border-color var(--d-1) var(--ease),
             transform var(--d-1) var(--ease);
}
@media (hover:hover){.icon-btn:hover{background:var(--wash-2);border-color:var(--line-2)}}
.icon-btn:active{background:var(--wash);transform:scale(.94)}
.icon-btn.quiet{background:transparent;border-color:transparent;box-shadow:none}
@media (hover:hover){.icon-btn.quiet:hover{background:var(--wash-2)}}

svg.ic{width:21px;height:21px;fill:none;stroke:var(--ink-2);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.icon-btn .ic{stroke:var(--ink)}
.ic.off{display:none}

/* ============================================================
   6  SPLASH
   ============================================================ */
#splash{
  position:absolute;inset:0;display:flex;background:var(--void);
  align-items:center;justify-content:center;
  opacity:1;pointer-events:auto;z-index:30;
  transition:opacity .42s var(--ease);
}
#splash.out{opacity:0;pointer-events:none}
#splashArt{
  width:min(52vw,196px);height:min(52vw,196px);
  display:flex;align-items:center;justify-content:center;
  animation:rise .9s var(--ease) both;
}
#splashArt img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
#splashCredit{
  position:absolute;left:0;right:0;bottom:calc(32px + var(--safe-b));
  text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:lowercase;
  color:var(--ink-4);
  animation:fadeIn .8s .5s both;
}
#splashBar{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(72px + var(--safe-b));
  width:56px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;
}
#splashBar i{display:block;height:100%;width:0;background:var(--red);
  animation:load 2.1s .15s var(--ease) forwards}
@keyframes load{to{width:100%}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* 7a LANGUAGE — a compact elevated choice, shown once on a fresh install */
#langWrap{position:absolute;inset:0;z-index:40;background:rgba(5,5,6,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:calc(20px + var(--safe-t)) calc(20px + var(--safe-r)) calc(20px + var(--safe-b)) calc(20px + var(--safe-l))}
#langWrap.on{display:flex}
#langCard{width:100%;max-width:480px;max-height:100%;overflow-y:auto;padding:32px;background:var(--glass-1);border:1px solid var(--line-2);border-top:3px solid var(--red);border-radius:4px;box-shadow:var(--lift-3);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);animation:slideUp var(--d-2) var(--ease) both}
@keyframes slideUp{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
#langCard .display{margin:20px 0 12px;font-size:30px}
#langCard .lead{margin-bottom:24px}
.lang-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lang-opt{appearance:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-height:110px;padding:16px;border:1px solid var(--line-2);border-radius:2px;background:var(--wash);font:500 15px var(--body);color:var(--ink)}
.lang-opt:hover,.lang-opt:focus-visible{background:var(--wash-2);border-color:var(--ink)}
.lang-code{font:500 24px var(--mono);color:var(--ink-2)}

/* 7b SETTINGS — one dialog over whatever opened it, rows rather than cards.
   The card is the same glass as every other elevated surface; hierarchy comes
   from type, hairlines and spacing, and red only ever marks what is chosen. */
/* A grid rather than a flex row for one reason: the card's max-height:100% then
   means the space inside this padding, so a tall panel on a short screen is
   capped where the gutter starts and scrolls its own body instead of running
   off the bottom of the shell. */
#settingsWrap{
  position:absolute;inset:0;z-index:39;display:none;place-items:center;
  background:rgba(5,5,6,.70);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
}
#settingsWrap.on{display:grid}
#settingsCard{
  display:flex;flex-direction:column;
  width:100%;max-width:520px;max-height:100%;overflow:hidden;
  background:var(--glass-1);border:1px solid var(--line-2);border-top:3px solid var(--red);
  border-radius:4px;box-shadow:var(--lift-3);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  animation:slideUp var(--d-2) var(--ease) both;
}
.set-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-shrink:0;padding:24px 24px 18px;border-bottom:1px solid var(--line-2)}
.set-head .display{margin:8px 0 0;font-size:30px}
/* The body is the only thing that scrolls: the head and the road behind stay put. */
.set-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:0 24px 24px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.set-body::-webkit-scrollbar{width:6px}
.set-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.set-group{padding-top:22px}
.set-group-name{margin:0;font:10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.set-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;
  padding:16px 0;border-top:1px solid var(--line)}
.set-group-name + .set-row{margin-top:10px}
.set-text{display:block;min-width:0}
.set-text b{display:block;font:700 15px var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.set-text span{display:block;margin-top:5px;font:12px/1.45 var(--body);color:var(--ink-3)}
.set-ctl{display:flex;align-items:center;justify-content:flex-end;gap:12px}

/* Segmented rows borrow the setup sheet's steps, tightened for a dialog and
   marked in red rather than filled in white. */
.set-seg{margin:0;gap:4px;flex-wrap:nowrap}
.set-seg .step{flex:0 0 auto;min-width:60px;min-height:44px;padding:9px 10px;line-height:1.25}
.set-seg .step.on{background:var(--red-wash);border-color:var(--red);color:var(--ink);font-weight:600}
.set-seg .step i{display:block;font-style:normal;font:500 13px var(--mono);color:var(--ink-3);margin-bottom:3px}
.set-seg .step.on i{color:var(--red-hi)}

/* The custom sheet's switch, boxed and compact, with its state in words as
   well as in the pill. Doubled up on .tog, which is written further down the
   sheet and would otherwise win back its full-width row. */
.tog.set-tog{min-height:44px;padding:8px 12px;gap:10px;border:1px solid var(--line-2);border-radius:2px}
.tog.set-tog .sw{order:0}
.sw-state{font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);min-width:56px}
.tog.set-tog.on .sw-state{color:var(--ink)}

/* A native range, dressed: grey track, red behind the thumb, big enough to hit. */
.set-range{-webkit-appearance:none;appearance:none;width:140px;max-width:100%;height:28px;
  margin:0;background:transparent;cursor:pointer;touch-action:none}
.set-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--red) var(--fill,90%),var(--line-2) var(--fill,90%))}
.set-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;
  border-radius:50%;background:var(--ink);border:1px solid rgba(0,0,0,.55);box-shadow:0 1px 4px rgba(0,0,0,.6)}
.set-range::-moz-range-track{height:4px;border-radius:2px;background:var(--line-2)}
.set-range::-moz-range-progress{height:4px;border-radius:2px;background:var(--red)}
.set-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink);
  border:1px solid rgba(0,0,0,.55);box-shadow:0 1px 4px rgba(0,0,0,.6)}
.set-val{font:500 15px var(--mono);color:var(--ink);min-width:52px;text-align:right;font-variant-numeric:tabular-nums}

/* Low emphasis on purpose: it is the one control here that undoes work. */
.set-reset-group{margin-top:8px;padding-top:24px;border-top:1px solid var(--line-2)}
.set-reset{appearance:none;-webkit-appearance:none;cursor:pointer;width:100%;min-height:44px;padding:13px;
  border:1px solid var(--line-2);border-radius:2px;background:transparent;
  font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  transition:border-color var(--d-1) var(--ease),color var(--d-1) var(--ease),background var(--d-1) var(--ease)}
@media (hover:hover){.set-reset:hover{border-color:var(--ink);color:var(--ink)}}
.set-reset.armed{border-color:var(--red);color:var(--ink);background:var(--red-wash)}
.set-note{margin:10px 0 0;font:11px/1.5 var(--body);color:var(--ink-3)}

/* 8 HOME — typography alongside a moving, banked strip of asphalt */
#home{background:var(--ground);overflow:hidden}
.topbar{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:calc(20px + var(--safe-t)) calc(var(--pad) + var(--safe-r)) 0 calc(var(--pad) + var(--safe-l));flex-shrink:0}
.topbar-title{font-size:24px;letter-spacing:-.02em}
#ribbon{position:absolute;z-index:0;left:57%;top:-40%;width:43%;height:180%;transform:rotate(23deg);overflow:hidden;background:linear-gradient(90deg,#151618,#242528 50%,#18191b);border-inline:1px solid #55575a;box-shadow:0 0 80px #000;transition:left var(--d-3) var(--ease),opacity var(--d-3) var(--ease)}
#ribbon .kerb{position:absolute;top:0;bottom:0;width:10px;background:repeating-linear-gradient(180deg,#ddd 0 42px,#be2028 42px 84px);opacity:.7}
#ribbon .kerb.left{left:8px}#ribbon .kerb.right{right:8px}
.lane-line{position:absolute;top:-160px;bottom:-160px;width:3px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.55) 0 36px,transparent 36px 78px);animation:roadScroll 1.4s linear infinite}
.lane-line.l1{left:33.33%}.lane-line.l2{left:66.66%}
@keyframes roadScroll{to{transform:translateY(78px)}}
#ribbon .fade{position:absolute;inset-inline:0;height:24%;pointer-events:none}
#ribbon .fade.top{top:0;background:linear-gradient(var(--ground),transparent)}
#ribbon .fade.bot{bottom:0;background:linear-gradient(transparent,var(--ground))}
#home::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--ground) 4%,rgba(10,11,12,.85) 34%,transparent 76%)}
.home-head{position:relative;z-index:2;margin-top:auto;padding:48px calc(var(--pad) + var(--safe-r)) 0 calc(var(--pad) + var(--safe-l))}
.home-kicker{color:var(--ink-2);margin:0 0 20px}
.home-title{font-size:clamp(64px,13vw,170px);font-variation-settings:'wdth' 100,'wght' 900;letter-spacing:-.075em;line-height:.85}
.title-stop{color:var(--red)}
.home-sub{display:flex;gap:20px;align-items:center;max-width:320px;margin:24px 0 0}
.home-sub .eyebrow{letter-spacing:.08em;color:var(--ink-2)}
.rule{height:1px;flex:1;background:var(--line-3)}
.home-mid{position:relative;z-index:2;padding:42px calc(var(--pad) + var(--safe-r)) 48px calc(var(--pad) + var(--safe-l));margin-bottom:auto}
.home-actions{display:flex;flex-direction:column;gap:8px;width:320px;max-width:100%}
.home-actions .btn{justify-content:flex-start;border-radius:2px;min-height:58px}
.home-actions .btn-primary{font-size:17px}
.home-actions .btn-ghost{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink-2)}
.home-foot{position:relative;z-index:2;display:flex;gap:28px;align-items:center;justify-content:space-between;padding:20px calc(var(--pad) + var(--safe-r)) calc(20px + var(--safe-b)) calc(var(--pad) + var(--safe-l));border-top:1px solid var(--line-2);background:rgba(10,11,12,.8)}
.best-strip{display:flex;align-items:baseline;gap:14px;flex-shrink:0}
.best-strip .k{font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.best-strip .v{font:500 24px var(--mono);color:var(--ink)}
.best-strip .v em{font:11px var(--mono);color:var(--ink-2);margin-left:4px}
.keys{display:none;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
body.desk .keys{display:flex}.keys-k{display:none}
/* Settings hides the hint row without touching anything a player needs. */
body.no-hints .keys{display:none}
.key-pair{display:inline-flex;align-items:center;gap:4px}
.keycap{font:10px var(--mono);color:var(--ink-2);border:1px solid var(--line-2);border-radius:3px;padding:4px;min-width:20px;text-align:center}
.keys .lbl{font:10px var(--mono);color:var(--ink-2)}
#home.in-setup .home-head,#home.in-setup .home-mid,#home.in-setup .home-foot,#home.in-setup .topbar{opacity:0;transition:opacity var(--d-1)}
#home.in-setup #ribbon{left:85%;opacity:.28}

/* 9 SETUP — shared navigation, distinct decision spaces */
.setup-screen{padding:calc(22px + var(--safe-t)) calc(var(--pad) + var(--safe-r)) calc(22px + var(--safe-b)) calc(var(--pad) + var(--safe-l));background:linear-gradient(90deg,rgba(10,11,12,.99) 45%,rgba(10,11,12,.86));align-items:center}
.setup-frame{width:100%;max-width:1180px;height:100%;min-height:0;display:flex;flex-direction:column}
.setup-screen.on .setup-frame{animation:screenEnter var(--d-2) var(--ease) both}
@keyframes screenEnter{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.setup-rail{display:flex;align-items:center;gap:12px;min-height:32px;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);flex-shrink:0}
.wordmark{font:800 14px var(--display);color:var(--ink);letter-spacing:.03em;white-space:nowrap}.wordmark span{color:var(--red);margin-left:10px}
.session-context{line-height:1.5}
.setup-head{display:flex;align-items:center;gap:16px;padding:28px 0 30px;flex-shrink:0}
.setup-head .display{font-size:clamp(26px,4vw,52px);letter-spacing:-.04em;max-width:900px;flex:1;line-height:1.02}
.setup-head .icon-btn{order:-1;border:1px solid var(--line-2);border-radius:50%;width:44px;height:44px;margin:0}
.setup-body{flex:1;min-height:0;overflow:auto;padding:4px;scrollbar-width:thin}
.setup-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;border-top:1px solid var(--line-2);padding-top:18px;margin-top:16px}
.setup-foot .btn{width:auto;min-width:210px;border-radius:2px}.setup-foot .note{margin:0}
.mode{appearance:none;cursor:pointer;text-align:left;font:inherit;color:var(--ink);border:0;border-radius:0;background:transparent;position:relative;transition:background var(--d-1),transform var(--d-1)}
.mode:hover{background:var(--wash-2)}.mode:active{transform:translateY(2px)}.mode.off{opacity:.45;cursor:not-allowed}
.mode-text{display:block;min-width:0}.mode-name{display:block;font:750 26px/1.08 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--ink)}
.mode-desc{display:block;font:14px/1.55 var(--body);color:var(--ink-2);margin-top:12px;max-width:34ch}
.mode-mark{display:flex;align-items:center;justify-content:center}.mode-mark .ic{width:64px;height:64px;stroke:var(--ink);stroke-width:1}
/* Mode destinations: a wide open road, a starting grid, a shared screen. */
.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:360px;height:100%;max-height:540px;gap:24px}
.mode-grid .mode{display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border-block:1px solid var(--line-3);overflow:hidden;background:linear-gradient(180deg,var(--wash),transparent)}
.choice-index{position:absolute;top:20px;left:24px;font:12px var(--mono);color:var(--ink-2)}
.mode-grid .mode-mark{flex:1;min-height:120px;position:relative;margin-bottom:28px}
#modeEndless .mode-mark{width:70%;align-self:center;border-inline:1px solid var(--line-3);transform:skewX(-14deg)}
#modeEndless .mode-mark::before{content:"";position:absolute;top:0;bottom:0;border-left:2px dashed var(--line-3)}
#modeEndless .mode-mark .ic{display:none}
#modeBots .mode-mark::before{content:"";position:absolute;width:116px;height:116px;background:repeating-conic-gradient(var(--ink-3) 0% 25%,transparent 0% 50%) 50% / 32px 32px;transform:rotate(-12deg);opacity:.35}
#modeBots .mode-mark .ic{display:none}
#modeLocal .mode-mark .ic{width:110px;height:90px;stroke:var(--ink-3)}
.mode-grid .mode::after{content:"↗";position:absolute;top:14px;right:22px;font:26px var(--body);color:var(--red)}
.mode-grid .mode:disabled::after{content:"—";color:var(--ink-2)}
/* Difficulty is an ascending scale, with number and filled bars. */
.difficulty-scale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;margin-top:clamp(10px,7vh,70px);border-bottom:1px solid var(--line-3)}
.difficulty-scale .mode{display:flex;flex-direction:column;padding:24px;gap:24px;border-left:1px solid var(--line-2)}
.difficulty-scale .mode:last-child{border-right:1px solid var(--line-2)}
.difficulty-number{font:400 clamp(32px,5vw,64px) var(--mono);letter-spacing:-.06em;color:var(--ink-3)}
.diff-mark{display:flex;align-items:flex-end;gap:7px;height:110px;padding-block:12px}
.diff-mark i{width:14px;background:var(--wash-2)}
.diff-mark i:nth-child(1){height:25%}.diff-mark i:nth-child(2){height:50%}.diff-mark i:nth-child(3){height:75%}.diff-mark i:nth-child(4){height:100%}
.diff .diff-mark i:first-child,.lv2 .diff-mark i:nth-child(-n+2),.lv3 .diff-mark i:nth-child(-n+3),.lv4 .diff-mark i{background:var(--ink)}
.lv4 .diff-mark i:last-child{background:var(--red)}
.difficulty-scale .mode-name{font-size:22px}.difficulty-scale .mode-desc{font-size:13px}
/* Number of players is a preview of the actual equal-column split. */
.player-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.player-grid .mode{padding:0 0 20px}.player-grid .mode-text{padding:20px 8px 0}
.split-preview{display:flex;gap:4px;height:180px;border:1px solid var(--line-3);padding:8px;background:var(--wash)}
.split-preview i{position:relative;flex:1;background:linear-gradient(#151618,#2a2c2e);border-top:2px solid var(--ink-2);overflow:hidden}
.split-preview i::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed var(--ink-3)}
.split-preview b{position:absolute;bottom:12px;left:8px;font:18px var(--mono);color:var(--ink)}
/* Controller bays are clear occupied / empty positions with live status. */
#pads .setup-frame{max-width:980px}.tally{font:500 24px var(--mono);color:var(--ink);white-space:nowrap}
#padList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.pad-row{position:relative;display:grid;grid-template-columns:1fr auto;gap:16px;padding:24px;border:1px dashed var(--line-3);min-height:150px;transition:background var(--d-2),border-color var(--d-2)}
.pad-row.on{border-style:solid;background:var(--wash)}
.pad-row .chip-seat{position:absolute;left:0;top:24px;bottom:24px;width:3px;opacity:.3}.pad-row.on .chip-seat{opacity:1}
.pad-row .who{font:700 21px var(--display);color:var(--ink);text-transform:uppercase}
.pad-row .nm{grid-column:1/-1;font:12px var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.pad-state{font:10px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);align-self:center}
.pad-row.on .pad-state{color:var(--ink)}
#padHint{max-width:80ch;color:var(--ink-2)}
/* Race style: a lead feature and a compact tuning workbench. */
.style-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;height:100%;max-height:520px}
.style-grid .mode{padding:36px;display:flex;flex-direction:column;gap:32px;border-top:1px solid var(--line-3)}
#styleStandard{height:100%;justify-content:flex-end;background:linear-gradient(135deg,var(--wash-2),transparent);border-left:3px solid var(--red)}
.style-grid .mode-mark{justify-content:flex-start}.style-grid .mode-name{font-size:clamp(26px,4vw,48px)}
#styleCustom .mode-mark .ic{width:42px;height:42px}
/* Custom race: field controls on the left, a compact rule bank on the right. */
#customBody{display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:auto 1fr;gap:28px 48px;align-content:start}
.opt{padding:20px 0;border-top:1px solid var(--line-2)}
.opt-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.opt-name{font:700 17px var(--display);text-transform:uppercase;color:var(--ink)}
.opt-val{font:400 40px var(--mono);color:var(--ink)}.opt-desc{font-size:13px;line-height:1.5;color:var(--ink-2)}
.opt.off{opacity:.35}.steps{display:flex;gap:4px;margin-top:18px;flex-wrap:wrap}
.step{appearance:none;cursor:pointer;flex:1;min-width:44px;min-height:44px;padding:10px 5px;border:1px solid var(--line-2);border-radius:2px;background:transparent;font:11px var(--mono);text-transform:uppercase;color:var(--ink-2)}
.step.on{background:var(--ink);border-color:var(--ink);color:var(--void);font-weight:600}.step:disabled{cursor:default}.step:hover:not(:disabled){border-color:var(--ink)}
#toggles{grid-column:2;grid-row:1/3;display:flex;flex-direction:column}
.tog{appearance:none;cursor:pointer;text-align:left;display:flex;align-items:center;gap:20px;padding:22px 0;border:0;border-top:1px solid var(--line-2);background:transparent;color:var(--ink);min-height:88px}
.tog .tx{flex:1}.tog .tx b{display:block;font:700 16px var(--display);text-transform:uppercase}.tog .tx span{display:block;margin-top:6px;font:13px/1.5 var(--body);color:var(--ink-2)}
.sw{order:2;display:block;position:relative;flex:0 0 36px;height:21px;border:1px solid var(--line-3);border-radius:20px;background:var(--wash-2)}
.sw i{position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--ink-2);transition:transform var(--d-1)}
.tog.on .sw{background:var(--red);border-color:var(--red)}.tog.on .sw i{transform:translateX(15px);background:white}
/* Showroom retains direct picking; focus or hover inspects the full-size car. */
#carTurn{display:none;gap:10px;align-items:center;font:12px var(--mono);color:var(--ink);padding-bottom:14px}#carTurn.on{display:flex}#carTurn i{width:5px;height:20px}#carPadState{margin-left:auto;font:10px var(--mono);color:var(--ink-2)}
#pickRoster{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;font:10px var(--mono);color:var(--ink-2)}#pickRoster:empty{display:none}
#carRules{margin:0 0 14px;color:var(--ink-2)}#carRules:empty{display:none}
.showroom{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;min-height:350px}
.car-feature{position:relative;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at 50% 45%,#232528,transparent 65%);border-bottom:1px solid var(--line-2);padding:16px}
.car-feature>.eyebrow{align-self:flex-start;color:var(--ink-2)}
#carHero{width:100%;height:240px;min-height:0;flex:1}
.car-feature-copy{width:100%}.car-feature-copy .display{font-size:32px}.car-feature-copy p{font:13px/1.5 var(--body);margin:10px 0 0;color:var(--ink-2)}
.car-lineup>.note{margin:0 0 14px;color:var(--ink-2)}
.car-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

.car-opt{appearance:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;padding:10px 6px 14px;border:1px solid transparent;border-bottom-color:var(--line-2);border-radius:2px;background:transparent;color:var(--ink);transition:background var(--d-1),border-color var(--d-1)}
.car-opt:hover,.car-opt.preview{background:var(--wash);border-bottom-color:var(--red)}
.car-name{font:700 12px var(--display);text-transform:uppercase;line-height:1.2;overflow-wrap:anywhere;max-width:100%}
.car-art{display:flex;align-items:center;justify-content:center;width:100%;height:112px;overflow:hidden}.car-art canvas{width:100%;height:100%;display:block}
.car-opt.taken{opacity:.3;cursor:not-allowed}.car-opt.taken .car-name{text-decoration:line-through}
.car-opt.cursor{border-color:var(--red);background:var(--red-wash);outline:1px solid var(--red)}

/* 10 CARS & MORE — the in-game reference, with an index rail */
#garage{background:var(--ground);display:grid;grid-template-columns:190px 1fr;grid-template-rows:auto 1fr;padding:0 calc(var(--pad) + var(--safe-r)) calc(20px + var(--safe-b)) calc(var(--pad) + var(--safe-l));gap:28px}
#garage .topbar{grid-column:1/-1;padding:calc(20px + var(--safe-t)) 0 0}
.tabs{display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line-2);padding-right:20px}
.tab{appearance:none;cursor:pointer;min-height:54px;padding:12px;border:0;border-left:2px solid transparent;background:transparent;text-align:left;color:var(--ink-2);font:12px/1.5 var(--mono);white-space:pre-line;text-transform:uppercase}
.tab.on{border-color:var(--red);color:var(--ink);background:var(--wash)}.tab:hover{background:var(--wash-2)}
#garageBody{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:24px;padding:4px}
.sect,.soon,#garageBody>.lede{grid-column:1/-1;margin:0}.sect{font:14px var(--mono);text-transform:uppercase;color:var(--ink)}.soon{font:11px/1.6 var(--mono);color:var(--ink-2)}
.info{padding:20px 0;border-top:1px solid var(--line-2);min-width:0}.info-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.info h3{flex:1;margin:0;font:700 17px/1.2 var(--display);text-transform:uppercase;color:var(--ink)}
.info p{margin:12px 0 0;font:13px/1.65 var(--body);color:var(--ink-2)}.tagrow{margin-top:14px;font:10px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.info.car{display:grid;grid-template-columns:100px 1fr;gap:20px}.info .car-art{height:150px;background:radial-gradient(#25272a,transparent 70%)}
.kind,.odds{font:9px var(--mono);text-transform:uppercase;border:1px solid var(--line-2);border-radius:3px;padding:4px 6px;color:var(--ink-2)}.kind.trap{color:var(--red-hi)}.odds{color:var(--ink)}
/* The reference card wears the badge it wears on the road - same circle, same
   icon, drawn from the same paths - so what is learned here is recognisable at
   speed rather than merely described. */
.cond-dot{display:inline-flex;flex:0 0 auto;line-height:0}
.cond-dot svg{display:block}
/* The Conditions page's Buff/Debuff switcher: a second rail inside the page,
   plainly subordinate to the main tab rail down the left. */
.subtabs{grid-column:1/-1;display:flex;gap:4px;padding:0 0 2px}
.subtab{appearance:none;cursor:pointer;min-height:36px;padding:8px 16px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:transparent;
  color:var(--ink-2);font:11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.subtab:hover{background:var(--wash-2);color:var(--ink)}
.subtab.on{border-color:var(--red);background:var(--red-wash);color:var(--ink)}
.subtab:focus-visible{outline:2px solid var(--red-hi);outline-offset:2px}

/* ============================================================
   11  RACE HUD
   The instruments. Everything here is read at a glance at speed, so
   it stays out of the middle of the road, sits on glass dark enough
   to hold white text over any track, and never grows past a corner.
   ============================================================ */
#race{background:var(--void)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hud{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  /* The instrument band. On a phone it is the screen's own margin; across a
     wide window it closes in on the road, so the things you spend stay in
     peripheral vision instead of stranded in the far corners. The reference
     readouts stay in the corners, where they keep the road clear.
     js/hud.js computes the same inset for the split-screen copy. */
  --side:max(14px,calc((100% - 680px) / 2));
}

.hud-tl{
  position:absolute;
  left:calc(14px + var(--safe-l));top:calc(12px + var(--safe-t));
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);
}
.hud-btn{pointer-events:auto;background:var(--glass-3);border-color:var(--line-2)}

/* track and clock, one chip */
#gauges{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:5px 9px;border-radius:var(--r-1);
  background:var(--glass-3);border:1px solid var(--line);
  -webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
}
#trackName{
  font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
}
#raceClock{
  display:none;font-family:var(--mono);font-weight:600;font-size:12px;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
  padding-left:var(--s-2);border-left:1px solid var(--line-2);
}
#raceClock.on{display:block}
#raceClock.final{color:var(--red-hi)}

/* distance and the running order */
.readout{
  position:absolute;right:calc(14px + var(--safe-r));top:calc(12px + var(--safe-t));
  min-width:118px;text-align:right;
  padding:9px 11px 10px;border-radius:var(--r-2);
  background:var(--glass-3);border:1px solid var(--line);
  -webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
  box-shadow:var(--glass-edge);
}
.readout .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  color:var(--ink-3);text-transform:uppercase}
.readout .v{
  font-family:var(--mono);font-weight:600;font-size:32px;color:#fff;
  line-height:1;margin-top:3px;font-variant-numeric:tabular-nums;
}
.readout .v em{font-style:normal;font-size:11px;color:var(--ink-3);margin-left:2px}
.readout .ladder{
  margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;
}
.readout .b{
  font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:7px;
  letter-spacing:.1em;font-variant-numeric:tabular-nums;
}
.readout .pos{
  position:relative;
  display:flex;justify-content:flex-end;align-items:baseline;gap:8px;
  font-family:var(--mono);opacity:.6;
}
.readout .pos .p{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.readout .pos .n{font-size:12px;font-weight:600;min-width:46px;text-align:right;
  font-variant-numeric:tabular-nums}
/* Your own row. It is marked three ways at once - a red tick on the rail,
   full opacity, and a slow lift - so it is never brightness alone. */
.readout .pos.mine{opacity:1}
.readout .pos.mine .p{opacity:1}
.readout .pos.mine .n{font-size:13px}
.readout .pos.mine::before{
  content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  width:3px;height:11px;border-radius:2px;background:var(--red);
  box-shadow:0 0 6px rgba(229,38,45,.8);
  animation:posMine 1.8s ease-in-out infinite;
}
@keyframes posMine{0%,100%{opacity:.75}50%{opacity:1}}

/* What is being done to you: one circular badge per Condition, icon only,
   stacked upward from the corner. The names live on the garage's Conditions
   page - mid-race there is no time to read a word, only to recognise a shape.
   column-reverse means the list is appended in priority order and reads from
   the corner up, so the stack never reshuffles. */
#condList{
  position:absolute;left:calc(var(--side) + var(--safe-l));bottom:calc(51px + var(--weapon-extra,0px) + var(--safe-b));
  display:flex;flex-direction:column-reverse;gap:5px;pointer-events:none;
  align-items:flex-start;
}
#condList .cond{display:block;line-height:0;animation:condIn var(--d-2) var(--ease) both}
#condList .cond svg{display:block}
@keyframes condIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* The gold edge around the whole view while Invulnerable lasts. Secondary
   feedback: the badge above is the canonical indicator, and this only says the
   same thing louder. */
#shell.invulnerable::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:50;
  border:3px solid var(--gold);border-radius:inherit;
  animation:invulnEdge 1.1s steps(2,jump-none) infinite;
}
@keyframes invulnEdge{0%,100%{border-color:#FFFFFF}50%{border-color:var(--gold)}}

/* the two things you spend, together, where the thumb already is */
#hudActions{
  position:absolute;right:calc(var(--side) + var(--safe-r));bottom:calc(46px + var(--weapon-extra,0px) + var(--safe-b));
  display:flex;align-items:center;gap:var(--s-2);pointer-events:none;
}
#ultPct,#itemBox,#coleSwitch{
  position:relative;overflow:hidden;pointer-events:auto;
  width:var(--hud-act,56px);height:var(--hud-act,56px);box-sizing:border-box;flex:0 0 auto;
  appearance:none;-webkit-appearance:none;padding:0;margin:0;
  cursor:pointer;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
  border-radius:var(--r-2);border:1px solid var(--line-2);
  background:var(--glass-3);
  -webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
  box-shadow:var(--glass-edge);
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease),
             background var(--d-2) var(--ease),transform var(--d-1) var(--ease);
}
#ultPct::-moz-focus-inner,#itemBox::-moz-focus-inner,#coleSwitch::-moz-focus-inner{border:0;padding:0}
#ultPct:focus,#itemBox:focus,#coleSwitch:focus{outline:none}
#ultPct:active,#itemBox:active,#coleSwitch:active{transform:scale(.93)}

/* The charge is the square filling from the bottom: a shape you can read
   without reading the number, with the number still there for the exact
   answer. Full, the whole face goes red and the rim goes white. */
#ultFill{
  position:absolute;left:0;right:0;bottom:0;height:0%;
  background:linear-gradient(180deg,rgba(229,38,45,.85),rgba(229,38,45,.5));
  border-top:1px solid rgba(255,122,127,.9);
  transition:height .18s linear;
  pointer-events:none;
}
#ultNum{
  position:relative;
  font-family:var(--mono);font-weight:600;font-size:14px;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
#ultPct.ready{border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.5),
  0 0 18px -2px rgba(229,38,45,.75)}
#ultPct.ready #ultNum{color:#fff}
#ultPct.ready #ultFill{
  background:linear-gradient(180deg,var(--red-hi),var(--red));
  animation:ultReady 1.5s ease-in-out infinite;
}
@keyframes ultReady{0%,100%{opacity:.86}50%{opacity:1}}

#itemBox.full{background:linear-gradient(180deg,rgba(10,11,13,.82),rgba(10,11,13,.7))}
#itemBox svg{width:28px;height:28px;display:block}

/* Three two-hit tracks. Geometry is shared with HUD_SHIELD_* in hud.js.
   Reserve the right-hand action squares even on narrow local views. */
#shieldHud{
  position:absolute;left:calc(var(--side) + var(--safe-l));bottom:calc(35px + var(--weapon-extra,0px) + var(--safe-b));
  width:min(116px,calc(100% - var(--side) - var(--side) - var(--safe-l) - var(--safe-r) - var(--hud-action-width,120px) - 8px));
  min-width:24px;display:flex;gap:4px;pointer-events:none;
}
.shield-bar{
  position:relative;flex:1;min-width:0;height:8px;overflow:hidden;border-radius:2px;
  background:var(--glass-3);border:0;
}
.shield-bar i{position:absolute;inset:0 auto 0 0;width:100%}
/* The boost meter, in its own tray across the foot: one place to look for
   "how much have I got". js/hud.js lays the split-screen copy out from the
   same figures. */
#meterRail{
  position:absolute;left:calc(var(--side) + var(--safe-l));right:calc(var(--side) + var(--safe-r));
  bottom:calc(12px + var(--safe-b));
  padding:6px 8px;border-radius:var(--r-1);
  background:var(--glass-3);border:1px solid var(--line);
  -webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
  display:flex;flex-direction:column;pointer-events:none;
}
#boostWrap{
  position:relative;height:5px;border-radius:3px;
  background:rgba(255,255,255,.14);
  transition:box-shadow var(--d-2) var(--ease);
}
#boostFill{position:absolute;left:0;top:0;bottom:0;width:100%;
  background:var(--red);border-radius:3px;transition:background var(--d-2) var(--ease)}
#boostWrap.full #boostFill{background:var(--red-hi)}
#boostWrap.locked #boostFill{background:rgba(255,255,255,.3)}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:3}

/* A Neela transformation or teleport whites out the view it belongs to. The
   road goes white on the canvas; this is the other half of it, because on one
   screen the instruments are page elements sitting over that canvas and would
   otherwise be left hanging in the white. Local play never sets this: there
   the instruments are painted into each column and go with it. */
body.whiteout .hud{opacity:0}

/* Four sets of instruments are painted on the canvas in local play, so the
   page's single set has to get out of the way completely. */
body.local .hud .readout,body.local #hudActions,body.local #meterRail,
body.local #condList,body.local #shieldHud{display:none!important}

/* ============================================================
   12  COUNTDOWN
   ============================================================ */
#count{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(5,5,6,.44);pointer-events:none;z-index:4;
}
#count.on{display:flex}
.count-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-4);
  padding:var(--s-5) var(--s-7);border-radius:var(--r-4);
  background:var(--glass-1);border:1px solid var(--line);
  box-shadow:var(--glass-edge),var(--lift-3);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.gantry{display:flex;gap:10px}
.gantry i{
  width:16px;height:16px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid var(--line-2);
  transition:background var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),
             border-color var(--d-1) var(--ease);
}
.gantry i.lit{background:var(--red);border-color:var(--red);
  box-shadow:0 0 14px rgba(229,38,45,.8)}
.gantry i.go{background:var(--go);border-color:var(--go);
  box-shadow:0 0 14px rgba(47,191,99,.75)}
#countNum{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 820;
  font-weight:820;font-size:72px;line-height:.9;color:#fff;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
#countNum.pop{animation:pop .5s var(--ease) both}
@keyframes pop{0%{transform:scale(.72);opacity:0}34%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:1}}

/* ============================================================
   13  PANELS  —  pause and results
   ============================================================ */
.panel{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  padding:var(--s-5);z-index:5;
  padding-bottom:calc(var(--s-5) + var(--safe-b));
  background:rgba(5,5,6,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.panel.on{display:flex}
.panel-card{
  width:100%;max-width:400px;max-height:100%;overflow-y:auto;
  border-radius:4px;padding:var(--s-6) var(--s-5) var(--s-5);border-top:3px solid var(--red);
  background:var(--glass-1);border:1px solid var(--line);
  box-shadow:var(--glass-edge),var(--lift-3);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  animation:slideUp var(--d-2) var(--ease) both;
}
.panel-card .display{font-size:36px;margin:0 0 6px}
.panel-card .lead{margin:0 0 var(--s-5)}

/* A pause nobody asked for - a controller has gone - wears the same panel with
   the accent doing the telling. The reason is already in the lead line; this
   makes it read as an interruption rather than as a menu. */
#pausePanel.alert .panel-card{border-color:rgba(229,38,45,.45)}
#pausePanel.alert .lead{color:var(--red-hi)}

#ovBoard{display:none;margin:0 0 var(--s-5)}
#ovBoard.on{display:flex;flex-direction:column;gap:3px}
#ovBoard .r{
  display:flex;align-items:center;gap:var(--s-2);padding:8px 11px;
  background:var(--wash);border:1px solid transparent;border-radius:var(--r-1);
}
#ovBoard .r.seat{background:var(--wash-2);border-color:var(--line)}
#ovBoard .pl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);width:30px;flex:0 0 auto}
#ovBoard .r.seat .pl{color:var(--ink-2)}
#ovBoard .chip-seat{width:4px;height:18px;border-radius:2px;flex:0 0 auto;
  background:var(--line-3)}
#ovBoard .nm{
  flex:1;min-width:0;font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 700;font-weight:700;
  text-transform:uppercase;font-size:13px;letter-spacing:.04em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#ovBoard .by{font-family:var(--mono);font-size:10px;color:var(--ink-3);flex:0 0 auto;
  letter-spacing:.08em;text-transform:uppercase}

#newBest{
  display:none;align-items:center;gap:7px;margin:0 0 var(--s-4);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-hi);
}
#newBest.on{display:flex}
#newBest .ic{stroke:var(--red-hi);width:15px;height:15px}

.stats{display:flex;gap:var(--s-2);margin-bottom:var(--s-5)}
.stat{flex:1;background:var(--wash);border:1px solid var(--line);
  border-radius:var(--r-2);padding:12px 13px}
.stat .k{font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-family:var(--mono);font-weight:600;font-size:24px;color:var(--ink);
  margin-top:4px;font-variant-numeric:tabular-nums}
.stat .v em{font-style:normal;font-size:11px;color:var(--ink-3);margin-left:2px}
.stat.hot{background:var(--red);border-color:var(--red)}
.stat.hot .k{color:rgba(255,255,255,.75)}
.stat.hot .v{color:#fff}
.stat.hot .v em{color:rgba(255,255,255,.7)}

.stack{display:flex;flex-direction:column;gap:var(--s-2)}

/* the two personal-record cells mean nothing on a shared screen */
body.local #overPanel .stats{display:none}

/* 14 RESPONSIVE — menu layouts use viewport space; race geometry is unchanged. */
@media (max-height:480px){
  .readout{padding:7px 10px 8px}.readout .v{font-size:24px}.readout .ladder{margin-top:6px;padding-top:6px;gap:0}.readout .pos .n{font-size:11px}.readout .pos.mine .n{font-size:12px}.readout .b{margin-top:5px}
  #hudActions{bottom:calc(40px + var(--weapon-extra,0px) + var(--safe-b))}
}
@media (max-height:680px){#countNum{font-size:56px}.count-card{padding:var(--s-4) var(--s-6);gap:var(--s-3)}}
@media (orientation:portrait){
  body.desk #shell{width:min(520px,calc(100dvh * .62));height:min(100dvh,900px);max-width:none;border-radius:var(--r-4);transform:scale(var(--desk-k,1));transform-origin:center;box-shadow:0 0 0 1px var(--line)}
}
@media (orientation:landscape){
  #shell{max-width:none;width:min(100vw,calc(100dvh * 2.2));height:100dvh;border-radius:0;transform:none}
  body{display:flex;align-items:center;justify-content:center}
}
/* Menus fill the available window. Returning to the race restores its existing shell. */
body.menu #shell{width:100vw;max-width:none;height:100dvh;border-radius:0;transform:none;box-shadow:none}
body.desk{display:flex;align-items:center;justify-content:center}
body.local #shell{width:100vw;height:100dvh;max-width:none;border-radius:0;transform:none;box-shadow:none}
@media (min-width:1000px){:root{--pad:56px}.home-head{padding-top:60px}.home-mid{padding-bottom:70px}.panel-card{max-width:440px}}
@media (min-width:1500px){:root{--pad:max(56px,calc((100vw - 1320px)/2))}}
@media (max-width:899px){
  .setup-head{padding:20px 0}.setup-head .display{font-size:32px}
  .mode-grid{gap:12px}.mode-grid .mode{padding:18px}.mode-name{font-size:22px}.mode-desc{font-size:13px}
  .mode-grid .mode-mark{min-height:80px}.choice-index{left:18px}
  .home-foot{align-items:flex-start}.keys{max-width:440px}
  .difficulty-scale .mode{padding:20px 12px}.difficulty-scale .mode-name{font-size:18px}
  .showroom{gap:20px}.car-art{height:95px}.car-feature-copy .display{font-size:26px}
  #customBody{gap:24px}.style-grid{gap:20px}.style-grid .mode{padding:24px}
  #garage{grid-template-columns:140px 1fr;gap:20px}#garageBody{grid-template-columns:1fr}
}
@media (max-width:599px){
  :root{--pad:20px}.home-head{padding-top:40px}.home-title{font-size:clamp(68px,19vw,112px)}
  .home-kicker{font-size:9px}.home-sub{max-width:250px}.home-mid{padding-top:32px;padding-bottom:38px}
  #ribbon{left:57%;width:64%;top:-25%;height:140%;transform:rotate(20deg)}
  .home-foot{flex-direction:column;gap:14px}.keys{justify-content:flex-start}.best-strip{width:100%;justify-content:space-between}
  .home-actions{width:280px}.home-head{margin-top:clamp(24px,12vh,110px)}.home-mid{margin-bottom:auto}
  .setup-screen{padding-top:calc(12px + var(--safe-t));padding-bottom:calc(16px + var(--safe-b))}
  .setup-head{gap:12px;padding:18px 0 22px}.setup-head .display{font-size:28px}
  .setup-rail{font-size:9px;gap:8px}.wordmark{font-size:12px}.setup-head .icon-btn{width:40px;height:40px}
  .mode-grid{display:flex;flex-direction:column;height:auto;max-height:none;gap:12px;min-height:0}
  .mode-grid .mode{min-height:150px;display:grid;grid-template-columns:72px 1fr;align-items:center;gap:18px;padding:24px 18px}
  .mode-grid .mode-mark{grid-column:1;grid-row:1;min-height:90px;margin:0;width:100%}.mode-grid .mode-text{grid-column:2;grid-row:1}
  .mode-grid .mode-name{font-size:21px}.mode-grid .mode-desc{font-size:12px;margin-top:8px}.choice-index{top:8px;font-size:9px}
  .mode-grid .mode::after{font-size:18px;right:10px;top:4px}#modeBots .mode-mark::before{width:64px;height:64px;background-size:20px 20px}#modeLocal .mode-mark .ic{width:64px;height:64px}
  .difficulty-scale{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px}.difficulty-scale .mode{padding:18px;gap:12px;border-top:1px solid var(--line-2)}.difficulty-scale .mode:nth-child(2){border-right:1px solid var(--line-2)}.difficulty-number{font-size:32px}.diff-mark{height:68px;gap:6px}.diff-mark i{width:10px}
  .player-grid{gap:8px;margin-top:24px}.split-preview{height:150px;padding:4px;gap:2px}.split-preview b{font-size:11px;left:4px}.player-grid .mode-text{padding-inline:0}.player-grid .mode-name{font-size:16px}.player-grid .mode-desc{font-size:11px}
  #padList{gap:10px}.pad-row{padding:16px;min-height:140px;gap:10px}.pad-row .who{font-size:17px}.pad-state{font-size:9px;grid-column:1/-1}.pad-row .nm{font-size:10px}.tally{font-size:18px}
  .style-grid{grid-template-columns:1fr;height:auto;gap:24px}.style-grid .mode{padding:24px;gap:20px}.style-grid .mode-mark .ic{width:40px;height:40px}.style-grid .mode-name{font-size:30px}
  #customBody{display:block}.opt{margin-bottom:20px}#toggles{display:flex}.tog{padding-block:18px}.opt-val{font-size:30px}
  .setup-foot{gap:12px;padding-top:12px;margin-top:12px}.setup-foot .btn{min-width:0;font-size:12px;padding:14px;flex:1}.setup-foot .note{font-size:9px;max-width:40%}
  .showroom{grid-template-columns:1fr;gap:20px;min-height:0}.car-feature{display:grid;grid-template-columns:100px 1fr;padding:10px;gap:8px 16px}.car-feature>.eyebrow{grid-column:1/-1;font-size:9px}.car-feature-copy .display{font-size:25px}.car-feature-copy p{font-size:11px;line-height:1.45}#carHero{height:155px;width:100px}.car-art{height:92px}.car-grid{gap:8px}.car-opt{gap:6px;padding:6px 2px 10px}.car-name{font-size:10px}.car-lineup>.note{font-size:9px}
  #carTurn{font-size:10px}#pickRoster{font-size:9px;gap:10px}
  #garage{display:flex;gap:18px}.tabs{flex-direction:row;gap:2px;border-right:0;border-bottom:1px solid var(--line-2);padding:0;flex-shrink:0}.tab{flex:1;min-width:0;text-align:center;font-size:9px;padding:8px 4px;border-left:0;border-bottom:2px solid transparent}.tab.on{border-color:var(--red)}#garageBody{flex:1}.info.car{grid-template-columns:80px 1fr;gap:14px}
  #langCard{padding:24px}
  /* Settings becomes the screen: no gutter, insets carried by the card itself. */
  #settingsWrap{padding:0}
  #settingsCard{max-width:none;height:100%;max-height:none;border-radius:0;border-inline:0;border-bottom:0}
  .set-head{padding:calc(18px + var(--safe-t)) calc(20px + var(--safe-r)) 16px calc(20px + var(--safe-l))}
  .set-head .display{font-size:26px}
  .set-body{padding:0 calc(20px + var(--safe-r)) calc(24px + var(--safe-b)) calc(20px + var(--safe-l))}
  .set-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .set-ctl{justify-content:flex-start}
  .set-seg{width:100%}.set-seg .step{flex:1 1 0;min-width:0}
  .set-tog{width:100%;justify-content:space-between}.set-tog .sw{order:2}
  .set-range{flex:1;width:auto}.set-val{min-width:auto}
}
/* A landscape phone scrolls the decision area while keeping Back and Continue reachable. */
@media (max-height:500px) and (min-width:600px){
  .topbar{padding-top:calc(10px + var(--safe-t))}.home-head{padding-top:16px}.home-kicker{margin-bottom:12px}.home-title{font-size:70px}.home-sub{margin-top:14px}.home-mid{padding-block:18px}.home-actions{flex-direction:row;width:520px}.home-actions .btn{min-height:46px;font-size:12px}.home-foot{padding-block:10px}.keys{display:none!important}
  .setup-screen{padding-top:calc(8px + var(--safe-t));padding-bottom:calc(10px + var(--safe-b))}.setup-rail{min-height:24px}.setup-head{padding:8px 0 12px}.setup-head .display{font-size:26px}.setup-head .icon-btn{width:40px;height:40px}
  .mode-grid{min-height:230px}.mode-grid .mode-mark{min-height:60px;margin-bottom:14px}.mode-grid .mode-name{font-size:19px}.mode-grid .mode-desc{font-size:11px}
  .difficulty-scale{margin-top:4px}.difficulty-scale .mode{gap:10px;padding:12px}.diff-mark{height:65px}.difficulty-number{font-size:28px}
  .player-grid{margin-top:12px}.split-preview{height:100px}.style-grid{min-height:250px}.showroom{min-height:280px}.car-art{height:75px}#carHero{height:180px}.car-feature-copy p{font-size:11px}.setup-foot{margin-top:8px;padding-top:8px}.setup-foot .btn{min-height:44px}
  #settingsWrap{padding-block:10px}.set-head{padding:14px 20px 12px}.set-head .display{font-size:22px}
  .set-body{padding:0 20px 16px}.set-group{padding-top:14px}.set-row{padding:12px 0}
  .set-text span{font-size:11px}
}

/* ============================================================
   15  MOTION & CONTRAST
   ============================================================ */
/* Both preferences are three-state: the system's answer, or the player's own
   overruling it in either direction. js/settings.js writes data-motion and
   data-contrast on <html>; with no script at all the attributes are absent and
   the system rules apply on their own, exactly as they did before.
     System   - no attribute matches "full"/"off", so the media rule stands
     Reduced/On  - the attribute rule applies whatever the system says
     Full/Off - the attribute opts the media rule out
   Anything drawn frame by frame from JS asks core.js's motionReduced(), which
   resolves the same three states, so the canvas and the stylesheet agree. */
@media (prefers-reduced-motion:reduce){
  :root:not([data-motion="full"]) *,
  :root:not([data-motion="full"]) *::before,
  :root:not([data-motion="full"]) *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  :root:not([data-motion="full"]) .lane-line{animation:none}
  /* the states that were carried by movement keep a still form */
  :root:not([data-motion="full"]) #condList .cond{animation:none}
  :root:not([data-motion="full"]) .readout .pos.mine::before{animation:none;opacity:1}
}
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important;
  scroll-behavior:auto!important;
}
:root[data-motion="reduced"] .lane-line{animation:none}
:root[data-motion="reduced"] #condList .cond{animation:none}
:root[data-motion="reduced"] .readout .pos.mine::before{animation:none;opacity:1}

/* Higher contrast is the same palette worked harder: type, hairlines, the
   washes that carry hover and selection, and the glass itself. No new hues. */
@media (prefers-contrast:more){
  :root:not([data-contrast="off"]){
    --line:rgba(255,255,255,.22);
    --line-2:rgba(255,255,255,.34);
    --line-3:rgba(255,255,255,.46);
    --ink-2:#C8CCD2;
    --ink-3:#9AA0A8;
    --wash:rgba(255,255,255,.09);
    --wash-2:rgba(255,255,255,.16);
    --red-wash:rgba(229,38,45,.28);
    --glass-1:linear-gradient(180deg,rgba(24,26,30,.94),rgba(8,9,11,.96));
    --glass-2:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.07));
    --glass-3:rgba(8,9,11,.88);
  }
}
:root[data-contrast="on"]{
  --line:rgba(255,255,255,.22);
  --line-2:rgba(255,255,255,.34);
  --line-3:rgba(255,255,255,.46);
  --ink-2:#C8CCD2;
  --ink-3:#9AA0A8;
  --wash:rgba(255,255,255,.09);
  --wash-2:rgba(255,255,255,.16);
  --red-wash:rgba(229,38,45,.28);
  --glass-1:linear-gradient(180deg,rgba(24,26,30,.94),rgba(8,9,11,.96));
  --glass-2:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.07));
  --glass-3:rgba(8,9,11,.88);
}
@media (forced-colors:active){
  .panel-card,#langCard,#settingsCard,.mode,.car-opt,.info,.opt,.tog,.step,.set-reset{
    border:1px solid CanvasText;
  }
  .btn:focus-visible,.icon-btn:focus-visible,.mode:focus-visible{outline:2px solid Highlight}
  .set-seg .step.on{outline:2px solid Highlight}
  .set-range{forced-color-adjust:auto}
}

@media (forced-colors:active){.car-opt.cursor,.car-opt.preview,.step.on,.tab.on{outline:2px solid Highlight}.diff-mark i{border:1px solid CanvasText}.diff .diff-mark i:first-child,.lv2 .diff-mark i:nth-child(-n+2),.lv3 .diff-mark i:nth-child(-n+3),.lv4 .diff-mark i{background:Highlight;forced-color-adjust:none}}

#coleSwitch svg{width:26px;height:26px;display:block}
#coleSwitch:disabled{cursor:default;color:var(--ink-2)}
#coleSwitch:disabled svg{opacity:.5}
#coleSwitch.ready{border-color:var(--ink-2);color:var(--ink)}
#coleSwitchTime{position:absolute;right:3px;bottom:2px;font:600 11px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}

/* Aureolin's yellow track sits directly under red; custom no-boost keeps it. */
#meterRail{gap:5px}
#weaponWrap{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
#weaponFill{position:absolute;inset:0 auto 0 0;width:100%;border-radius:3px;background:#F5CF32}
#weaponWrap.locked #weaponFill{background:#998637}