/* ===========================================================================
   UI layer: typography and the controls people actually press.

   Loaded last so it wins over the older rules in style.css without having to
   unpick them. Two rules govern everything here:

   1. Nothing you can press is smaller than 44px on its short edge. This is a
      phone game as much as a desktop one, and a 36px button with 8px type is
      a miss waiting to happen.
   2. The buttons speak the same language as the ride picker cards — machined
      slabs with a cut corner and a lit edge, not default browser chrome.
   =========================================================================== */

:root {
  /* Arial was the fallback of a fallback. system-ui lands on Segoe UI /
     SF Pro / Roboto, which is what the rest of each platform is set in. */
  font-family: var(--ui-font);
  --ui-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tap: 44px;
  --cut: 10px;
  --ink-line: rgba(21, 53, 65, .22);
  --ink-line-strong: rgba(21, 53, 65, .46);
}
body, button, input, select, textarea { font-family: var(--ui-font); }
/* Setting `display` on a class beats the user-agent rule for [hidden], so the
   leaderboard and name buttons kept their boxes while signed out and pushed the
   sound toggle off a phone screen. */
[hidden] { display: none !important; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}
.brand { letter-spacing: -1.1px; }
/* This line crosses the shop photo, where dark ink on a mountain is a guess. */
.masthead .location { color: #35545f; text-shadow: 0 1px 7px rgba(238, 246, 249, .85); }
.eyebrow { letter-spacing: 2.4px; }

/* ------------------------------------------------------------ press-and-hold */
/* Holding a button is a control input in this game - launch rpm, stage creep,
   boost, steering - not a gesture. Left alone, a phone treats a long press as
   "select this text" or "open the callout", which is what made holding the
   launch button feel like opening a sub-menu over the HUD. The tap highlight
   is already off globally; this turns off the rest of it. */
button, .ride-card, .drag-actions button, .touch-controls button, .control {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
}
/* The HUD is instrumentation, never text anyone wants to select. Leaving it
   selectable let a long press that slid a few pixels off the launch button
   start a selection on the readout behind it and raise the callout anyway. */
.drag-overlay, #hud, .ride-hud, .speedometer, .drag-readout, .drag-belt-zone {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* The hold controls go further: no double-tap zoom, no pan, no scroll stealing
   the press halfway through a stage. */
#dragLaunch, #dragShift, #dragSkipBurnout, .drag-actions .drag-steer,
.touch-controls button, .control, [data-control] {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* --------------------------------------------------------------- small-btn */
/* The workhorse. Light slab on the garage's light background, cut corner,
   real tap target. Panels that sit on dark (the HUD, the tuner header) keep
   their own colours via the rules further down. */
.small-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--tap);
  padding: 0 15px;
  border: 1.5px solid var(--ink-line);
  border-radius: 0;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: background .16s, color .16s, border-color .16s, transform .12s;
}
.small-btn:hover { background: #fff; border-color: var(--orange); }
.small-btn:active { transform: translateY(1px); }
.small-btn[aria-pressed="true"] { border-color: var(--ink-line-strong); }

/* The garage toolbar reads as instruments: dark chips on the light shop. */
.garage-options { display: flex; gap: 8px; align-items: center; }
.garage-options .small-btn {
  background: rgba(17, 44, 55, .92);
  border-color: rgba(17, 44, 55, .92);
  color: #eaf6fa;
  padding: 0 14px;
}
.garage-options .small-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
/* Back to the picker is the odd one out, so it gets the orange edge. A hollow
   button was unreadable here: the shop behind it is a photo, not a flat wall. */
.garage-options .ghost-btn {
  background: rgba(17, 44, 55, .92);
  border-color: var(--orange);
  color: #ffc79c;
  letter-spacing: 1.7px;
}
.garage-options .ghost-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
#playerName { max-width: 26vw; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------- modes */
/* Three real tabs instead of three flat words on a hairline. */
.modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border-bottom: 0;
  margin-bottom: 12px;
}
.modes button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  min-height: 56px;
  padding: 8px 11px;
  border: 1.5px solid var(--ink-line);
  border-radius: 0;
  background: rgba(255, 255, 255, .72);
  color: #456470;
  text-align: left;
  overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .18s, color .18s, border-color .18s;
}
.modes button i {
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.6px;
  color: #8aa4ae;
  transition: color .18s;
}
.modes button span {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
}
.modes button::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s cubic-bezier(.2, .8, .3, 1);
}
.modes button:hover:not(.active) { background: #fff; border-color: var(--ink-line-strong); color: var(--ink); }
.modes button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #f2fbff;
}
.modes button.active i { color: #ffb15e; }
.modes button.active::after { transform: scaleX(1); }

/* --------------------------------------------------------- control panel */
/* Modes, DROP IN and the hint sit over the bare 3D shop — no page background
   under them at all on the right-hand side. Give them their own slab so the
   type is readable whatever is parked behind it. */
.garage-actions {
  position: relative;
  padding: 14px;
  background: linear-gradient(180deg, rgba(17, 32, 41, .84), rgba(9, 17, 23, .93));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(126, 168, 190, .3);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.garage-actions .hint { color: #9fc0cd; margin-bottom: 0; }
.garage-actions .modes button {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(126, 168, 190, .3);
  color: #a9c5d1;
}
.garage-actions .modes button i { color: #7d9dab; }
.garage-actions .modes button:hover:not(.active) {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(150, 214, 238, .6);
  color: #eaf6fa;
}
.garage-actions .modes button.active { background: #f1f7f9; border-color: #f1f7f9; color: #10242e; }
.garage-actions .modes button.active i { color: #d2571f; }
.garage-actions .wide-btn { border-color: rgba(126, 168, 190, .45); color: #cfe4ec; }
.garage-actions .wide-btn:hover { background: rgba(126, 168, 190, .2); border-color: #9fd8e6; border-style: solid; color: #fff; }
.garage-actions .drag-track-picker { color: #9fc0cd; }
.garage-actions .drag-track-picker select {
  min-height: var(--tap);
  border-color: rgba(126, 168, 190, .45);
  background: rgba(8, 15, 21, .8);
  color: #eaf6fa;
  font-size: 11px;
}

/* ----------------------------------------------------------------- primary */
/* DROP IN is the whole point of the screen. Make it look like it. */
.primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 0 22px;
  border: 0;
  background: linear-gradient(135deg, #ff7f4a, #f0521f 58%, #d63f16);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: 0 12px 28px rgba(214, 63, 22, .3);
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s;
}
.primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .6s cubic-bezier(.3, .7, .3, 1);
  pointer-events: none;
}
.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(214, 63, 22, .42); }
.primary:hover::after { transform: translateX(130%); }
.primary:active { transform: translateY(0); }
.primary-go, .primary > span:last-child { font-size: 19px; letter-spacing: 0; transition: transform .16s; }
.primary:hover .primary-go { transform: translate(4px, -4px); }

/* The secondary call under it: same slab, hollow. */
.wide-btn {
  width: 100%;
  margin-top: 9px;
  min-height: 48px;
  background: transparent;
  border-color: var(--ink-line-strong);
  border-style: dashed;
  letter-spacing: 1.7px;
}
.wide-btn:hover { background: var(--ink); border-color: var(--ink); border-style: solid; color: #eaf6fa; }

/* -------------------------------------------------------- garage furniture */
.sled-heading { gap: 14px; }
.sled-heading h2 { font-size: 26px; letter-spacing: -.6px; }
.arrow {
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--ink-line-strong);
  background: rgba(255, 255, 255, .78);
  font-size: 22px;
  line-height: 1;
  transition: background .16s, border-color .16s, color .16s;
}
.arrow:hover { background: var(--ink); border-color: var(--ink); color: #eaf6fa; }
.tune-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 15px;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: #eaf6fa;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1.4px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: background .16s, border-color .16s;
}
.tune-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.hint { font-size: 10.5px; letter-spacing: .2px; color: #4b6975; }
.inspect-hint { font-size: 9px; letter-spacing: 1.3px; display: flex; align-items: center; gap: 4px; }
.inspect-hint button {
  min-height: var(--tap);
  margin-left: 6px;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--orange);
}
.stat { font-size: 9.5px; letter-spacing: 1.2px; }

/* ------------------------------------------------------------- tuner panel */
/* Every control in here was a 32px target with 10px type. */
.tune-part select,
.tune-slider select,
.tune-fuel > label select,
.board-filters select {
  min-height: var(--tap);
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 0;
}
.tune-slider input[type="range"] { height: var(--tap); }
.tune-map td input, .tune-boost-map input { min-height: 40px; }
.tune-swap-option button { min-height: var(--tap); font-size: 9.5px; letter-spacing: .6px; }
.tuner-window header .small-btn { background: #f6f7f4; color: #153541; border-color: transparent; }
.tuner-window header .small-btn:hover { background: var(--orange); color: #fff; }
.tune-setup > .small-btn { min-height: 48px; }

/* ------------------------------------------------------------------ on dark */
.hud-right .small-btn { background: rgba(21, 53, 65, .78); border-color: rgba(255, 255, 255, .28); color: #fff; }
.hud-right .small-btn:hover { background: var(--orange); border-color: var(--orange); }
.modal .small-btn { width: 100%; margin-top: 10px; }

/* ------------------------------------------------------- ride picker polish */
.ride-sound {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 16px;
  font: 900 9.5px/1 var(--ui-font);
  letter-spacing: 1.4px;
}
.ride-card { touch-action: manipulation; }

/* =============================================================== name gate */
/* Asked once, on the way in, when the account has no name yet. */
.name-gate {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: rgba(6, 15, 21, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-y: auto;
}
.name-gate.hidden { display: none !important; }
.name-card {
  width: min(430px, 100%);
  padding: clamp(24px, 5vw, 38px);
  color: #eaf6fa;
  background:
    linear-gradient(135deg, rgba(255, 138, 70, .1), transparent 44%),
    linear-gradient(180deg, rgba(30, 41, 52, .97), rgba(11, 16, 22, .99));
  box-shadow: inset 0 0 0 1px rgba(126, 168, 190, .34), 0 30px 80px rgba(0, 0, 0, .6);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.name-kicker { display: block; font-size: 9px; font-weight: 900; letter-spacing: 2.4px; color: #ffb15e; }
.name-card h2 {
  margin: 14px 0 12px;
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 900;
  font-style: italic;
  line-height: .92;
  letter-spacing: -1.2px;
}
.name-card h2 em { font-style: italic; color: var(--orange); }
.name-card > p { margin: 0 0 18px; font-size: 12px; line-height: 1.6; color: #9fc0cd; }
.name-card input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 1.5px solid rgba(126, 168, 190, .45);
  border-radius: 0;
  background: rgba(8, 13, 18, .85);
  color: #fff;
  font-size: 17px;           /* 16px or more, or iOS zooms the page on focus */
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.name-card input::placeholder { color: #5d7c8a; letter-spacing: 1.4px; }
.name-card input:focus { outline: none; border-color: var(--orange); background: rgba(12, 20, 27, .95); }
.name-error { min-height: 17px; margin: 8px 0 12px; font-size: 10.5px; font-weight: 900; letter-spacing: 1.2px; color: #ff9a76; }
.name-card .wide-btn { border-color: rgba(126, 168, 190, .45); color: #9fc0cd; }
.name-card .wide-btn:hover { background: rgba(126, 168, 190, .18); border-color: #9fc0cd; color: #eaf6fa; }
.name-card .primary[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* ---------------------------------------------------------- update notes */
.update-card { width: min(520px, 100%); }
.update-notes { max-height: min(46vh, 380px); overflow-y: auto; margin: 0 0 18px; }
.update-notes section + section { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(126, 168, 190, .25); }
.update-notes h3 {
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffb15e;
  text-transform: uppercase;
}
.update-notes ul { margin: 0; padding: 0; list-style: none; }
.update-notes li {
  position: relative;
  margin: 0 0 9px;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #cfe4ec;
}
.update-notes li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 2px; background: var(--orange); }

/* ================================================================== mobile */
@media (max-width: 650px) {
  /* The toolbar never fit five chips across a phone. Let it be its own row
     and scroll sideways rather than shrinking the buttons out of reach. */
  .masthead { flex-wrap: wrap; gap: 10px; }
  .masthead .brand { font-size: 17px; }
  /* Five labels measured 562px inside a 346px strip. Scrolling the row hid two
     controls behind a swipe nobody would guess at, so it wraps instead: the
     short labels usually keep it to one line, and when they do not every
     button is still on screen. */
  .garage-options {
    width: 100%;
    flex-wrap: wrap;
    gap: 5px;
  }
  .garage-options .small-btn { flex: 0 0 auto; min-height: var(--tap); font-size: 9.5px; padding: 0 9px; letter-spacing: 1.2px; }
  /* Five full labels measured 562px inside a 346px strip, so DETAIL and SOUND
     were simply off the screen with nothing to say they were there. Buttons
     that carry a short form swap to it here and the whole row fits. */
  /* The tagline was pinned to a percentage of the screen, so a toolbar that
     wrapped to two rows landed on top of it. In flow it moves out of the way. */
  .intro { position: static; margin-top: 14px; }
  .garage-options .small-btn[data-short] { font-size: 0; letter-spacing: 0; min-width: var(--tap); }
  .garage-options .small-btn[data-short]::after { content: attr(data-short); font-size: 9.5px; letter-spacing: 1.2px; }
  #playerName { max-width: 26vw; }

  /* On a phone the machine details sit over the bare 3D shop floor, dark ink on
     a dark garage. Give the block its own slab rather than washing a scrim over
     the whole lower half — the sled is what people came to look at. */
  .sled-info {
    padding: 11px 13px 13px;
    background: rgba(233, 242, 245, .93);
    box-shadow: inset 0 0 0 1px rgba(21, 53, 65, .12);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  }
  .sled-index { color: #4a6874; }

  .modes { gap: 5px; margin-bottom: 10px; }
  .modes button { min-height: 52px; padding: 7px 9px; }
  .modes button span { font-size: 11px; }
  .modes button i { font-size: 8.5px; }

  /* These three were still landing at 8px from rules further up the cascade
     that carry an extra class. 8px on a 3x phone is not type, it is texture. */
  .garage-bottom .hint, .garage-actions .hint { font-size: 9.5px; }
  .stats .stat, .sled-info .eyebrow { font-size: 9px !important; }
  .garage-bottom .sled-detail { font-size: 10px; }
  .stats { gap: 14px; }
  .garage-bottom { overflow: hidden; }
  .garage-actions { padding: 11px; }
  .primary { min-height: 58px; padding: 0 18px; font-size: 14px; letter-spacing: 2px; }
  .wide-btn { min-height: 46px; font-size: 9.5px; letter-spacing: 1.3px; }
  .hint { font-size: 9.5px; }

  .sled-heading { gap: 10px; flex-wrap: wrap; }
  .sled-heading h2 { font-size: 20px; flex: 1 1 auto; min-width: 0; }
  .arrow { width: var(--tap); height: var(--tap); font-size: 20px; }
  .tune-btn { font-size: 9.5px; padding: 0 12px; }

  /* Two columns gave each part select 113px of usable text for labels that run
     to 190px, so all thirteen read "Stock engine build ·". One column per row
     costs scroll length and buys back the half of every label that was cut. */
  .tune-parts { grid-template-columns: 1fr; gap: 9px; }
  .tune-sliders { grid-template-columns: 1fr; }
  .tune-part small { font-size: 9.5px; }
  /* The header was 235px — 28% of the phone — before a single part was visible. */
  .tuner-window header { padding: 12px 15px; }
  .tuner-window header small { font-size: 8px; letter-spacing: 1.6px; }
  .tuner-window h2 { font-size: 18px; margin: 5px 0 3px; }
  .tuner-window header p { font-size: 9px; line-height: 1.4; }
  .tune-wallet { padding: 8px 12px; font-size: 11px; }

  .ride-card { min-height: 64px; }
  .ride-foot { font-size: 9.5px; gap: 10px; }
  .name-card { padding: 22px 20px 24px; }
  .update-notes { max-height: 50vh; }
  .update-notes li { font-size: 12px; }
}

/* Short landscape phones: the intro type is the first thing to go. */
@media (max-height: 560px) {
  .modes button { min-height: var(--tap); }
  .primary { min-height: 52px; }
  .wide-btn { min-height: var(--tap); margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .primary, .primary::after, .primary-go, .modes button::after, .small-btn { transition: none; }
  .primary:hover { transform: none; }
}

/* A dedicated machine window. The UI is workshop furniture around the sled,
   so mobile never has to look through a title or a panel to inspect it. */
#garage .stat strong { display:block; margin-top:7px; font-size:14px; letter-spacing:.25px; color:#163844; }
#garage .inspect-hint { background:rgba(10,20,27,.84); color:#b9d3de; border:1px solid #7aafc13d; border-radius:5px; backdrop-filter:blur(12px); }
#garage .inspect-hint button { color:#ffc097; }
#garage .garage-actions { border-radius:9px; clip-path:none; background:linear-gradient(145deg,#1a303ced,#0a141bee); box-shadow:inset 0 1px #c8e8f320,0 12px 30px #03101b33; }
#garage .garage-actions .modes button { border-radius:5px; clip-path:none; box-shadow:inset 0 1px #efffff14; }
#garage .garage-actions .modes button.active { background:linear-gradient(180deg,#eff7fa,#cbdfe5); box-shadow:0 3px 8px #0005; }
#garage .primary { border-radius:6px; clip-path:none; background:linear-gradient(180deg,#ff7841,#e54418); box-shadow:inset 0 1px #ffc193,0 5px 14px #0004; }
#garage .wide-btn { border-radius:5px; border-style:solid; background:#20344066; }
@media(max-width:650px) {
  #garage { padding:18px 18px max(16px,env(safe-area-inset-bottom)); background:linear-gradient(180deg,#09151bcc,transparent 24%,transparent 56%,#07121a5c); color:#edf7fb; }
  #garage .masthead { gap:10px; }
  #garage .brand { color:#ecf6fa; font-size:16px; letter-spacing:-.4px; }
  #garage .garage-options { gap:6px; }
  #garage .garage-options .small-btn { border-radius:5px; clip-path:none; background:linear-gradient(180deg,#284451ef,#102832ed); border-color:#779bad50; box-shadow:inset 0 1px #d7f5ff17; }
  #garage .intro { margin-top:12px; }
  #garage .intro .eyebrow, #garage .intro p { display:none; }
  #garage .intro h1 { margin:0; font-size:25px; letter-spacing:-.8px; line-height:1.05; text-shadow:0 2px 18px #000; }
  #garage .intro h1 br { display:none; }
  #garage #inspect { left:14px; right:14px; cursor:grab; }
  #garage .inspect-hint { left:18px; right:18px; width:auto; justify-content:space-between; padding-left:11px; font-size:8px; letter-spacing:.6px; }
  #garage .inspect-hint button { padding:0 10px; margin-left:0; font-size:8px; }
  #garage .garage-bottom { left:18px; right:18px; bottom:max(16px,env(safe-area-inset-bottom)); gap:8px; }
  #garage .sled-info { position:relative; padding:10px 12px; border-radius:8px; clip-path:none; background:linear-gradient(145deg,#193440f2,#0a202cf2); box-shadow:inset 0 1px #d5f4ff25,inset 0 0 0 1px #81bfd033,0 8px 25px #0003; }
  #garage .sled-index { color:#9fc5d1; font-size:9px; letter-spacing:1.5px; line-height:14px; }
  #garage .sled-heading { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; margin-top:6px; padding-top:0; }
  #garage .sled-heading h2 { font-size:20px; line-height:1.05; color:#f1f8fa; margin:0; text-align:center; }
  #garage .arrow { width:44px; height:44px; border-radius:6px; background:linear-gradient(180deg,#375b6c,#183645); color:#e9f9ff; border-color:#8db9ca66; box-shadow:inset 0 1px #c0edff25,0 2px 4px #0004; }
  #garage .tune-btn { position:absolute; right:12px; bottom:10px; width:130px; justify-content:center; min-height:44px; padding:0 8px; font-size:9px; border-radius:5px; clip-path:none; background:linear-gradient(180deg,#2c4652,#172e3a); border-color:#91b4c74a; color:#f3fbfe; }
  #garage .sled-info #sledTag { color:#d6a372; font-size:8px!important; letter-spacing:.5px!important; margin-top:7px; line-height:1.4; }
  #garage .sled-detail { display:none; }
  #garage .stats { display:grid; grid-template-columns:1fr 1fr; padding-right:140px; min-height:44px; margin-top:8px; gap:8px; padding-top:8px; border-top:1px solid #a0d0e323; }
  #garage .stat:last-child { display:none; }
  #garage .stat { width:auto; flex:1; color:#90b3c2; font-size:8px; letter-spacing:1.1px; }
  #garage .stat strong { color:#e4f5fa; font-size:12px; margin-top:4px; }
  #garage .garage-actions { padding:10px; }
  #garage .modes { margin-bottom:8px; gap:6px; }
  #garage .modes button { min-height:46px; padding:5px 8px; }
  #garage .modes button span { font-size:10px; letter-spacing:.4px; }
  #garage .primary { min-height:50px; font-size:13px; }
  #garage .wide-btn { margin-top:8px; min-height:44px; font-size:9px; letter-spacing:.9px; }
  #garage .garage-actions .hint { display:none; }
}
@media(max-width:650px) and (max-height:700px) {
  #garage .intro { display:none; }
  #garage .sled-info #sledTag { display:none; }
  #garage .sled-info { padding:8px 10px; }
  #garage .sled-heading { grid-template-columns:44px minmax(0,1fr) 44px; }
}

/* After a run, the two things people actually want next sit side by side
   between "go again" and "leave": where they landed, and the garage. */
.drag-result-actions,.overlay-actions { display:flex;gap:8px;margin-top:8px; }
.drag-result-actions>button,.overlay-actions>button { flex:1;min-height:44px; }
.drag-results .drag-result-actions>button { border-radius:9px;border:1px solid #8bb7c8;
  background:linear-gradient(160deg,#2c4e5e,#0d2735 70%);color:#effcff;
  font:900 11px system-ui,Arial,sans-serif;letter-spacing:.1em;cursor:pointer;
  box-shadow:inset 0 1px #ffffff40,0 5px 13px #00131d90; }

/* Today's quickest pass, in the garage. Reads as a trophy card rather than a
   stat line, and highlights when the time on it is yours. */
.daily-best { display:grid;gap:2px;margin-bottom:12px;padding:9px 12px;border-radius:9px;
  border:1px solid #6d8ea0;border-left:3px solid #efb06a;
  background:linear-gradient(145deg,#1d3a4a,#0a1f2c);color:#e9f6fb; }
.daily-best[hidden] { display:none; }
.daily-best-crown { font:800 8px system-ui,sans-serif;letter-spacing:.17em;color:#9fc0d0; }
.daily-best strong { font:900 20px/1.15 Consolas,monospace;letter-spacing:-.03em;color:#ffdca8; }
.daily-best>span:last-child { font:750 9px system-ui,sans-serif;letter-spacing:.08em;color:#a9c8d6; }
.daily-best.mine { border-left-color:#78dc93; }
.daily-best.mine strong { color:#bdf7cd; }

/* Today's work. A list of jobs, what each pays, and which are already done. */
.challenges-card { max-width:680px; }
.challenge-list { list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:58vh;overflow:auto; }
.challenge-list li { display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  text-align:left;padding:10px 12px;border:1px solid #4e6c7c;border-left:3px solid #6f8fa0;
  border-radius:8px;background:linear-gradient(145deg,#1b3645,#0a1e2b); }
.challenge-list li.done { border-left-color:#78dc93;background:linear-gradient(145deg,#15362a,#081d18); }
.challenge-list .ch-title { grid-column:1;grid-row:1;font:900 12px system-ui,sans-serif;letter-spacing:.04em;color:#eaf7fd; }
.challenge-list .ch-detail { grid-column:1;grid-row:2;font:400 11px/1.45 system-ui,sans-serif;color:#9bbac8; }
.challenge-list .ch-pay { grid-column:2;grid-row:1/3;font:900 15px Consolas,monospace;color:#ffd79e;white-space:nowrap;text-align:right; }
.challenge-list li.done .ch-pay { color:#9bf0b4; }
.challenge-list .ch-tag { display:inline-block;margin-right:6px;padding:1px 5px;border-radius:3px;
  background:#2d4e5e;font:800 8px system-ui,sans-serif;letter-spacing:.1em;color:#bcd9e6;vertical-align:1px; }
#challengesOpen { margin-bottom:10px; }
#challengesOpen b { color:#ffd79e; }
.challenge-board { margin-top:12px;border-top:1px solid #44607466;padding-top:10px; }
.challenge-board[hidden] { display:none; }
.challenge-board h3 { margin:0 0 7px;font:800 9px system-ui,sans-serif;letter-spacing:.17em;color:#9fc0d0; }
.challenge-board ol { list-style:none;margin:0;padding:0;display:grid;gap:3px; }
.challenge-board li { display:flex;justify-content:space-between;gap:12px;
  font:750 11px system-ui,sans-serif;color:#cfe6ef; }
.challenge-board li b { font:900 11px Consolas,monospace;color:#ffd79e;white-space:nowrap; }
.challenge-board li.me { color:#bdf7cd; }
.challenge-board li.me b { color:#9bf0b4; }

/* Optional 3-stage boost controller. Hidden entirely unless the part is
   fitted, so a build without it has no extra furniture on screen. Sits above
   the drag instruments because the drag screen hides the riding HUD. */
/* Above .drag-overlay (z-index 34), which spans the viewport: underneath it the
   panel was visible but could not be tapped. Lifted clear of the launch
   control so neither covers the other on a phone. */
.boost-stages { position:fixed;left:50%;transform:translateX(-50%);bottom:calc(104px + env(safe-area-inset-bottom));
  z-index:36;display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;
  background:#0d1a22e0;border:1px solid #2d4e5e;backdrop-filter:blur(5px);pointer-events:auto; }
.boost-stages.hidden { display:none; }
.boost-stage-row { display:flex;gap:6px;align-items:center; }
.boost-stage-row .eyebrow { margin-right:4px;white-space:nowrap; }
.boost-stage { min-width:44px;min-height:44px;border-radius:9px;border:1px solid #37606f;
  background:#14242e;color:#cfe6ef;font:900 15px Consolas,monospace;cursor:pointer; }
.boost-stage.on { background:#2a6d55;border-color:#4fd49a;color:#eafff4; }
.scramble { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:108px;min-height:44px;padding:5px 12px;border-radius:9px;border:1px solid #7a4a28;
  background:#2a1a10;color:#ffd79e;font:900 10px system-ui,sans-serif;letter-spacing:.13em;cursor:pointer; }
.scramble.on { background:#8a4a16;border-color:#ffb766;color:#fff3e0; }
.scramble.spent { opacity:.45; }
.scramble-track { display:block;width:84px;height:4px;border-radius:2px;background:#4a3524;overflow:hidden; }
.scramble-track > i { display:block;height:100%;width:100%;background:#ffb766;transition:width .12s linear; }
@media (max-width:520px) { .boost-stages { gap:7px;padding:7px 8px; }
  .boost-stage-row .eyebrow { display:none; } .scramble { min-width:92px; } }

/* ------------------------------------------------------------ out of service
   A blown motor is the most expensive thing that can happen to a rider, so it
   gets the loudest card in the garage - and it smokes, because a sled that has
   let go is not a status line, it is a machine sitting there ruined. */
.service-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#2a1109f2,#140705f5);
  border:1px solid #e0724644;border-radius:9px;padding:15px 16px 14px;margin-bottom:12px;
  box-shadow:inset 0 1px #ffb59a1f,0 10px 28px #2c0b0340}
.service-card .service-kicker{display:block;font:800 8px/1 monospace;letter-spacing:.22em;color:#f7a583;margin-bottom:7px}
.service-card strong{display:block;font:900 19px/1.15 Arial,sans-serif;letter-spacing:-.4px;color:#ffe9df;margin-bottom:6px}
.service-card p{margin:0 0 11px;font:11px/1.5 Arial,sans-serif;color:#e0b7a8}
.service-card .service-note{margin:8px 0 0;font:700 9px/1.5 monospace;letter-spacing:.06em;color:#c99683}
.service-card .primary{width:100%}
.service-card .primary:disabled{opacity:.45;cursor:not-allowed}
/* Smoke. Three plumes on different periods so it never reads as a loop. */
.service-smoke{position:absolute;inset:0;pointer-events:none;opacity:.5}
.service-smoke i{position:absolute;bottom:-16px;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 50% 60%,#d9c6bd6b,#5b473f00 68%);filter:blur(5px);
  animation:service-plume 7s ease-in infinite}
.service-smoke i:nth-child(1){left:6%;animation-duration:7.2s}
.service-smoke i:nth-child(2){left:38%;animation-duration:9.1s;animation-delay:-3.4s}
.service-smoke i:nth-child(3){left:72%;animation-duration:8.3s;animation-delay:-6.1s}
@keyframes service-plume{
  0%{transform:translate3d(0,0,0) scale(.45);opacity:0}
  18%{opacity:.75}
  100%{transform:translate3d(16px,-150px,0) scale(2.1);opacity:0}
}
@media(prefers-reduced-motion:reduce){.service-smoke i{animation:none;opacity:.3}}
/* The sled that is down says so in the picker too, so it is obvious which one
   is parked before the rider arrows onto it. */
.sled-heading h2.out-of-service::after{content:' · SMOKING';font-size:10px;letter-spacing:2px;color:#f0906a;vertical-align:middle}
/* A parked sled's DROP IN is inert, and has to look it. It was still rendering
   as the brightest thing on the screen while doing nothing when tapped. */
.primary:disabled,.primary.disabled{filter:grayscale(.75) brightness(.55);cursor:not-allowed;box-shadow:none}
.primary:disabled .primary-go,.primary.disabled .primary-go{opacity:.4}

/* ------------------------------------------------------------------ duels
   The two moments that make a duel worth having: finding out you took one,
   and finding out somebody took yours while you were asleep. Both are meant
   to land. This is the only place in the game where a real person can reach
   into your wallet, and it should read that way. */
.duel-outcome{position:fixed;left:50%;top:max(16px,env(safe-area-inset-top));transform:translateX(-50%);
  z-index:40;width:min(420px,calc(100vw - 20px));padding:16px 18px;border-radius:12px;text-align:center;
  background:linear-gradient(150deg,#10261ff2,#07140ff7);border:1px solid #4fd49a66;
  box-shadow:0 18px 50px #02140c66;animation:duel-drop .36s cubic-bezier(.2,.9,.3,1.3)}
.duel-outcome.lost{background:linear-gradient(150deg,#2a1109f2,#140705f7);border-color:#f2653d66;
  box-shadow:0 18px 50px #2c0b0366}
.duel-outcome.pending{background:linear-gradient(150deg,#16222bf2,#0b1319f7);border-color:#ffffff22}
.duel-outcome small{display:block;font:800 8px/1 monospace;letter-spacing:.24em;color:#9ce0bd}
.duel-outcome.lost small{color:#f7a583}
.duel-outcome h3{margin:9px 0 4px;font:900 20px/1.1 Arial,sans-serif;letter-spacing:-.02em;color:#f2fff7}
.duel-outcome.lost h3{color:#fff1e8}
.duel-outcome strong{display:block;font:900 34px/1.1 Consolas,monospace;color:#8ff0bd;margin:2px 0 7px}
.duel-outcome.lost strong{color:#ff9c74}
.duel-outcome.pending strong{color:#9fb6c2}
.duel-outcome p{margin:0;font:11px/1.6 Arial,sans-serif;color:#c7dbd1}
.duel-outcome.lost p{color:#e0b7a8}
.duel-outcome span{display:block;margin-top:9px;font:700 8px/1.5 monospace;letter-spacing:.14em;color:#8fa9a0}
@keyframes duel-drop{from{opacity:0;transform:translate(-50%,-22px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

.duel-inbox{position:fixed;inset:0;z-index:41;display:grid;align-content:center;justify-items:center;gap:11px;
  padding:22px 16px;overflow:auto;background:#061018e8;backdrop-filter:blur(9px)}
.duel-alert{width:min(440px,100%);padding:17px 18px;border-radius:12px;
  background:linear-gradient(150deg,#2a1109f2,#140705f7);border:1px solid #f2653d55;
  box-shadow:0 16px 44px #2c0b0355}
.duel-alert.held{background:linear-gradient(150deg,#10261ff2,#07140ff7);border-color:#4fd49a55}
.duel-alert small{display:block;font:800 8px/1 monospace;letter-spacing:.22em;color:#f7a583}
.duel-alert.held small{color:#9ce0bd}
.duel-alert h4{margin:9px 0 5px;font:900 17px/1.2 Arial,sans-serif;letter-spacing:-.02em;color:#fff1e8}
.duel-alert strong{display:block;font:900 27px/1.1 Consolas,monospace;color:#ff9c74;margin-bottom:7px}
.duel-alert.held strong{color:#8ff0bd}
.duel-alert p{margin:0;font:11px/1.65 Arial,sans-serif;color:#dcbcae}
.duel-alert.held p{color:#c7dbd1}
.duel-rematch{width:100%;margin-top:13px;min-height:46px;border-radius:9px;cursor:pointer;
  background:linear-gradient(130deg,#f2793d,#c6421f);border:1px solid #ffa374;color:#1b0d06;
  font:900 11px/1 Arial,sans-serif;letter-spacing:.09em}
.duel-rematch:disabled{opacity:.6;cursor:progress}
.duel-inbox-close{min-width:150px;min-height:44px;border-radius:9px;border:1px solid #ffffff28;
  background:#16242ce8;color:#dfeaef;font:800 10px/1 Arial,sans-serif;letter-spacing:.12em;cursor:pointer}
@media(prefers-reduced-motion:reduce){.duel-outcome{animation:none}}

/* ------------------------------------------------- end-of-run result modal
   The alpine and freeride result card was wider than the phone it was read
   on: 420px on a 390px screen, hanging 123px off the right and 93 off the
   left, at every phone size tested.
   
   The width rule was already honest - min(420px,100%) - but #overlay is a
   grid whose single column sizes to the card's min-content. A long result
   row or the action buttons pushed that column past the viewport, so "100%"
   was resolving against a ~600px grid area rather than against the screen.
   Pinning the column to minmax(0,1fr) is what makes the percentage mean what
   it says. */
#overlay{grid-template-columns:minmax(0,1fr)}
#overlay .modal{
  max-width:100%;min-width:0;justify-self:center;
  /* A long result list on a short phone has to scroll rather than run off the
     bottom - measured 24px past the fold at 320x568. */
  max-height:calc(100dvh - 44px);overflow-y:auto;overscroll-behavior:contain;
}
@media(max-width:520px){
  #overlay .modal{padding:22px 18px}
  #overlay .modal h2{font-size:27px}

  #overlay .overlay-actions{display:grid;grid-template-columns:1fr;gap:8px}
}
/* Results wrap instead of being squashed. The row is a flex line by default -
   six figures side by side - which overflows a 420px card on a phone AND in
   landscape. Auto-fit gives four columns on a wide card and two on a narrow
   one, which is the same information in a shape that fits either. */
#overlay .result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));
  gap:13px 14px;margin:20px 0}
#overlay .result-grid>div{min-width:0;overflow-wrap:anywhere}
#overlay .result-grid b{font-size:22px;margin-top:4px}
@media(max-width:520px){#overlay .result-grid{gap:12px 13px;margin:18px 0}
  #overlay .result-grid b{font-size:21px}}
@media(max-height:620px){
  #overlay .modal{padding:16px 16px}
  #overlay .modal h2{font-size:22px;margin:6px 0}
  #overlay .modal>p{font-size:11px;line-height:1.5}
}



/* Credits on the masthead, beside the name of the game. Every path that can
   move money already refreshes the service card, so this rides along with it
   rather than becoming a second thing to remember to update. */
.masthead-credits{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:5px 11px;border-radius:7px;background:#0d1a2359;border:1px solid #9ec4d426}
.masthead-credits small{font:800 6.5px/1 monospace;letter-spacing:.2em;color:#8fb6c6}
.masthead-credits strong{font:800 14px/1.1 Consolas,monospace;color:#f3d6a4;white-space:nowrap}
.masthead-credits strong::after{content:' CR';font-size:8px;color:#b89a73}
@media(max-width:650px){
  .masthead-credits{padding:4px 8px}
  .masthead-credits strong{font-size:12px}
}
/* The rider id has to be selectable and readable: it gets pasted into SQL to
   reclaim a name, and a UUID that cannot be copied is no use at all. */
.name-rider-id{display:inline-block;margin-top:4px;padding:3px 6px;border-radius:4px;background:#0b1b24;color:#9fe6c8;font:700 10px/1.5 Consolas,monospace;letter-spacing:.02em;user-select:all;-webkit-user-select:all;word-break:break-all}
/* Shown only when a rider is reclaiming their own name. */
#nameReclaim{margin-top:10px}
.name-reclaim-sql{display:block;width:100%;height:120px;margin-top:8px;padding:8px;border:1px solid #6d8a9a66;border-radius:6px;background:#0b1b24;color:#9fe6c8;font:600 10px/1.45 Consolas,monospace;resize:vertical}

/* The rider code. It has to be readable off a screen and then written down by
   hand, so it is monospace, widely spaced, and selectable in one gesture. */
.rider-code-card{margin-top:14px;padding:12px;border:1px solid #6d8a9a66;border-radius:8px;background:#0b1b24}
.rider-code-card>small{display:block;font:8px/1.6 monospace;letter-spacing:.18em;color:#8fb4c6}
.rider-code{display:block;margin:6px 0 8px;font:700 17px/1.5 Consolas,monospace;letter-spacing:.14em;color:#9fe6c8;
  user-select:all;-webkit-user-select:all;word-break:break-all}
.rider-code-card p{margin:0 0 10px;font-size:10px;line-height:1.65;color:#bcd2de}
.rider-code-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#nameHaveRider{margin-top:8px}
#signInCode{letter-spacing:.14em;font-family:Consolas,monospace}
/* The account gate reuses the name gate's card. Only the extra note and the
   stacked secondary doors are new. */
#accountGate input{display:block;width:100%;margin:0 0 10px;min-height:48px;padding:12px;border:1px solid #6d8a9a;border-radius:8px;background:#0b1b24;color:#eaf3f6;font:600 14px/1.4 Arial,sans-serif}
#accountGate input::placeholder{color:#7fa0b2;letter-spacing:.08em;font-size:12px}
#accountSwap,#accountSkip{margin-top:8px}
.account-note{margin:12px 0 0;font-size:10px;line-height:1.7;color:#9bb8c8}
/* The beta thank-you. Shown once, and it should feel like a gift rather
   than a notification. */
.beta-gift-card .beta-gift-amount{margin:16px 0 4px;padding:14px;border:1px solid #c3df82;border-radius:10px;background:linear-gradient(130deg,#183a35,#162b39);text-align:center}
.beta-gift-card .beta-gift-amount strong{display:block;font:900 34px/1 system-ui,sans-serif;color:#eaffc4;letter-spacing:-1px}
.beta-gift-card .beta-gift-amount small{display:block;margin-top:7px;font:800 9px/1.5 monospace;letter-spacing:.14em;color:#cfe6a8}
/* When you were raced. Quiet, but the first thing you look for. */
.duel-when{display:block;margin-top:8px;font:700 9px/1.5 monospace;letter-spacing:.1em;color:#9fc0d2}
.duel-alert.beaten .duel-when{color:#f0b89a}
/* Bounties. Reuses the board window; only the rows and the posting form
   are new. */
.bounty-window{max-width:620px}
.bounty-post{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:8px;align-items:end;margin:14px 0 4px}
.bounty-post label{display:grid;gap:5px;font:800 8px/1.4 monospace;letter-spacing:.14em;color:#9fc0d2}
.bounty-post select,.bounty-post input{min-height:44px;padding:9px;border:1px solid #6d8a9a;border-radius:7px;background:#0b1b24;color:#eaf3f6;font:700 12px/1.3 Arial,sans-serif;width:100%;min-width:0}
.bounty-post button{min-height:44px;white-space:nowrap}
.bounty-error{margin:8px 0 0;min-height:14px;font:700 10px/1.5 monospace;letter-spacing:.06em;color:#ffad8a}
.bounty-rows{display:grid;gap:10px;padding:4px 0}
.bounty-row{position:relative;padding:14px;border:1px solid #5a7689;border-radius:10px;background:#0d2433}
.bounty-row.on-me{border-color:#e0a46a;background:#2a1f16}
.bounty-row.mine{border-color:#8fb8d6}
.bounty-row strong{display:block;font:900 22px/1 system-ui,sans-serif;color:#eaffc4;letter-spacing:-.5px}
.bounty-row h4{margin:8px 0 4px;font:800 13px/1.3 system-ui,sans-serif;color:#fff}
.bounty-row p{margin:0;font:11px/1.65 system-ui,sans-serif;color:#c3dbe9}
.bounty-row .small-btn{margin-top:10px;min-height:44px;width:100%}
.bounty-claim{border-color:#b5ef91;color:#e6ffcf}
.bounty-empty{margin:10px 0;font:11px/1.7 system-ui,sans-serif;color:#9fc0d2}
.bounty-nobody{margin:12px 0 0;font:11px/1.7 system-ui,sans-serif;color:#9fc0d2}
/* Workshop school. Playful, but every bar is a measured number. */
.learn-more{display:block;width:100%;margin-top:10px;min-height:44px;border:1px dashed #7fb0c8;border-radius:8px;background:#0e2a3acc;color:#bfe6ff;font:800 10px/1.3 system-ui,sans-serif;letter-spacing:.08em;cursor:pointer}
.learn-more:hover{border-style:solid;border-color:#ffd98a;color:#ffe9bd}
/* The workshop window is light by default and this panel's text is not,
   which made the body white-on-white: measured at 1.05 contrast where 4.5
   is the floor for readable text. The panel owns its background. */
.learn-window{max-width:680px;background:#0b1b24;color:#dcebf4}
.learn-window footer{background:#0e2434;color:#9fc0d2;border-top:1px solid #35566a}
.learn-window h2{font-size:30px;letter-spacing:-.5px}
.learn-window header p{font:13px/1.65 system-ui,sans-serif;color:#cfe3ee;margin:8px 0 0;letter-spacing:0}
.learn-body{padding:20px 30px 26px;display:grid;gap:18px}
.learn-chip{justify-self:start;padding:7px 14px;border-radius:999px;background:linear-gradient(120deg,#d8ff9b,#8fe0a8);color:#10251a;font:900 11px/1 system-ui,sans-serif;letter-spacing:.12em}
.learn-bars-box h3,.learn-point h3{margin:0 0 6px;font:900 12px/1.3 system-ui,sans-serif;letter-spacing:.08em;color:#ffdca1}
.learn-measured{margin:0 0 12px;font:10px/1.6 system-ui,sans-serif;color:#9fc0d2}
.learn-point p{margin:0;font:13px/1.75 system-ui,sans-serif;color:#dcebf4}
.learn-logic{padding:14px;border-left:3px solid #ffd98a;background:#0e2434;border-radius:0 8px 8px 0}
.learn-bar-group{margin-bottom:16px}
.learn-bar-group h4{margin:0 0 7px;font:800 9px/1.4 monospace;letter-spacing:.16em;color:#9fc0d2}
.learn-bar{display:grid;grid-template-columns:minmax(0,1fr) 46% 58px;gap:9px;align-items:center;margin-bottom:5px}
.learn-bar-name{font:700 11px/1.4 system-ui,sans-serif;color:#cfe3ee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.learn-bar i{display:block;height:13px;background:#13303f;border-radius:7px;overflow:hidden}
.learn-bar b{display:block;height:100%;background:linear-gradient(90deg,#4b86a6,#8fd3ef);border-radius:7px;transition:width .35s}
.learn-bar strong{font:800 12px/1 system-ui,sans-serif;color:#eaf6ff;text-align:right}
.learn-bar.best b{background:linear-gradient(90deg,#8fc95f,#dcff9b)}
.learn-bar.fitted .learn-bar-name{color:#ffdca1}
.learn-bar.fitted b{box-shadow:inset 0 0 0 1px #ffd98a}
.learn-effects{margin-top:12px;padding-top:12px;border-top:1px solid #35566a}
.learn-effects h4{margin:0 0 7px;font:800 9px/1.4 monospace;letter-spacing:.16em;color:#9fc0d2}
.learn-effect-line{margin:0 0 5px;font:11px/1.6 system-ui,sans-serif;color:#bcd6e4}
.learn-effect-line.fitted{color:#ffdca1}
@media(max-width:650px){.learn-body{padding:16px 16px 20px}.learn-window h2{font-size:23px}.learn-bar{grid-template-columns:minmax(0,1fr) 34% 48px;gap:6px}.learn-bar-name{font-size:10px}}


/* ---------------------------------------------------------- the front door */
/* One panel, on arrival: the name, and an optional email and password. The
   account half is boxed and visibly secondary - it is the part a rider is
   allowed to skip, and it has to look skippable without looking unimportant. */
.welcome-card h2 { font-size: clamp(26px, 8vw, 38px); }
.welcome-account {
  margin: 4px 0 2px; padding: 13px 13px 4px;
  border: 1px solid rgba(126, 168, 190, .32); border-radius: 9px;
  background: rgba(10, 24, 32, .72);
}
.welcome-account-head {
  display: block; margin-bottom: 7px;
  font: 900 9px/1.5 inherit; letter-spacing: 2px; color: #ffb15e;
}
.welcome-account p { margin: 0 0 11px; font-size: 11px; line-height: 1.65; color: #9fc0cd; }
/* The third door. Present, and plainly the quietest thing on the panel. */
.welcome-card .ghost-btn { border-color: rgba(126, 168, 190, .22); color: #7795a4; }
.welcome-card .ghost-btn:hover { background: rgba(126, 168, 190, .12); color: #bcd2de; }
.rider-code-actions { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }

/* The ban. No way out of this one on purpose, so it gets no dismiss control. */
.banned-card { border-color: rgba(214, 84, 68, .55); }
.banned-card .name-kicker { color: #e8795f; }
.banned-card h2 em { color: #e8795f; }
.banned-card > p { color: #d9b4ab; }