/* Boost Lab Turbo Run. Industrial, clean, styled like a dyno sheet. */

:root {
  --bl-orange: #d61e3b;
  --bl-orange-dark: #a3122b;
  /* The panel's name for the same color. Six rules in here reach for it -
     the unread count on a bar tile, the shop's version line, the take-a-line
     -down cross, the index rerun, the burndown figure - and every one of them
     was falling back to whatever it inherited, because only panel.css ever
     declared it. */
  --bl-red: #d61e3b;
  --bl-black: #101216;
  --bl-ink: #1a1d23;
  --bl-panel: #20242b;
  --bl-panel-2: #2a2f37;
  --bl-line: #3a3f47;
  --bl-text: #f2f2f2;
  --bl-muted: #9aa3ad;
  --bl-warn: #e02828;
  --bl-ok: #34c759;
  --bl-paper: #f4f1ea;
  --bl-paper-ink: #1b1d22;
  --safe-top: env(safe-area-inset-top, 0px);
  /* The music button is pinned to the top right corner of every screen. This is
     the room a header leaves it: the button, plus a gap you can see. It was
     forty six, which cleared the button by four pixels and read as touching. */
  --bl-corner: 58px;
  /* How much of the garage the car gets. One height for the whole garage: it
     is one window, and a panel that moved as you went from tab to tab was
     something to keep up with rather than a layout. Dragged from the bar at the
     top of the panel, and this is only where it starts. */
  --garage-stage: 32vh;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Numbers. NOT the monospace stack, which is what they used to be.
     In a typewriter face every character gets the same cell, so a decimal
     point and a comma float in the middle of one and the space before a unit
     is as wide as a digit. Kirk, from a screenshot of the drag strip board:
     the numbers read weird, there is a space between the number and the unit,
     like 6. 658 s, and the credits too. There was no space in the string; the
     font was putting one there.
     The UI font with tabular figures gives the thing monospace was picked for
     - digits that line up in a column, so a time does not jitter as it counts
     - without the wide punctuation. Anything that is genuinely a code rather
     than a number keeps --mono: part numbers, room codes, the time slip. */
  --nums: var(--font);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: var(--bl-black); color: var(--bl-text); font-family: var(--font); overscroll-behavior: none; touch-action: none; }
body { position: fixed; inset: 0; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--bl-orange); }
b, strong { font-weight: 700; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#shimmer {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,120,40,0.18), transparent 60%);
  transition: opacity 200ms linear;
  animation: shimmer 1.1s ease-in-out infinite alternate;
}
@keyframes shimmer { from { transform: translateY(0) scaleX(1); } to { transform: translateY(-4px) scaleX(1.015); } }
/* The top end. The edges of the picture close in and go cold as the speed
   comes up, so a trap at two hundred does not look like a run to the shops.
   Opacity is driven per frame from the camera, so nothing animates here. */
#rush {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse 62% 52% at 50% 50%, transparent 38%, rgba(6,8,14,0.55) 100%),
    radial-gradient(ellipse 120% 40% at 50% 50%, transparent 55%, rgba(90,150,255,0.10) 100%);
}

/* Screens

   Screens toggle hidden, so every move between them was a hard cut. A short
   fade, and a small rise on the things inside a sheet, is enough to read as one
   screen replacing another rather than the page being swapped underneath you.

   Opacity only on the screen itself: a transform there would make a containing
   block, and the pads and the music button are positioned against the window.
   The strip gets none of it, because a pass starting with an animation is an
   animation over the tree. */
@keyframes bl-sheet-rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
/* The screen itself never fades. Fading it made its own background see through
   for the length of the fade, and what is behind every screen is the garage,
   still on the last car: leaving the garage flashed it for a sixth of a second
   on the way to wherever you were going. The contents arrive instead, over a
   background that is opaque from the first frame. */
.screen.sheet:not([hidden]) > * { animation: bl-sheet-rise 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
/* The head arrives first and the body just behind it. */
.screen.sheet:not([hidden]) > .sheet-head { animation-duration: 180ms; }
.screen.sheet:not([hidden]) > *:not(.sheet-head) { animation-delay: 40ms; }
@media (prefers-reduced-motion: reduce) {
  .screen.sheet:not([hidden]) > * { animation: none; }
  .turntable, .garage-panel { transition: none; }
}

/* Screens */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 10px) calc(var(--safe-right) + 14px) calc(var(--safe-bottom) + 14px) calc(var(--safe-left) + 14px); overflow: hidden; }
/* No top padding on a sheet: its header carries the notch and the gap
   itself and sticks to the top of the glass. It used to be pulled up over
   the padding with a negative margin, and Chrome clamps a sticky element to
   its parent's content box, so on a phone with a status bar the header sat
   an inch down with the page showing above it. Kirk: cannot press the tabs
   on Settings, the top bar is in the way. The title screen, which has no
   header, keeps the padding below. */
.screen.sheet { background: linear-gradient(180deg, #14171c 0%, #0f1115 100%); overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding-top: 0; }
#screen-title { padding-top: calc(var(--safe-top) + 10px); }
.screen.sheet::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 4px; background: var(--bl-orange); }
/* A sheet is a scrolling column. Its panels keep their own height: as flex
   items they used to shrink to fit the screen instead, and a tall one (the
   results slip after a long pass) had its foot cut off with nothing to
   scroll, because the panel had shrunk rather than the sheet overflowed. */
.screen.sheet > * { flex: none; }
/* The music button is pinned to this corner on every screen, so a header runs
   its last thing, usually the credit balance, straight underneath it. The room
   it needs is reserved here rather than being found out one screen at a time. */
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 12px; border-bottom: 1px solid var(--bl-line); margin-bottom: 12px; min-height: 52px; }
/* On a sheet the header stays at the top of the glass while the sheet
   scrolls, like the bar on the menu: back, the screen's name, the credits.
   It reaches the edges and the notch so nothing scrolls past behind it. */
.screen.sheet > .sheet-head:not(.overlay) { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * (var(--safe-right) + 14px)) 12px calc(-1 * (var(--safe-left) + 14px)); padding: calc(var(--safe-top) + 6px) calc(var(--safe-right) + 14px) 6px calc(var(--safe-left) + 14px); min-height: 0; background: rgba(16,18,22,0.92); }
/* Kirk: the top bar is tall. The back button sets its height; nothing else in it needs more. */
.screen.sheet > .sheet-head:not(.overlay) .btn.icon { width: 40px; min-height: 40px; }
/* On a phone the pill says the number; the unit is the one thing the row can do without when a tag sits beside the name. */
@media (max-width: 480px) { .screen.sheet > .sheet-head .credits .cr-suffix { display: none; } .sheet-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
#app:not([data-music="hide"]) .screen.sheet > .sheet-head:not(.overlay) { padding-right: calc(var(--safe-right) + 62px); }
.sheet-head .credits { margin-left: auto; color: rgba(255,255,255,0.72); font-size: 12px; gap: 5px; padding: 5px 9px; border: 1px solid var(--bl-line-2, #333a44); border-radius: 999px; background: var(--bl-panel); }
.sheet-head .credits b { font-size: 13px; }
.sheet-head.overlay .credits { background: rgba(16,18,22,0.7); }
.sheet-head.overlay { border: 0; margin: 0; position: absolute; left: calc(var(--safe-left) + 14px); right: calc(var(--safe-right) + 14px); top: calc(var(--safe-top) + 10px); z-index: 3; }
/* A scrim behind it. This header sits straight on the 3D scene, so what is
   under it is whatever the turntable happens to be showing: the shop's ceiling
   lights are directly behind the title on a garage in portrait, and the mark
   and the credits wash out against them. Drawn behind the row and wider than
   it, so it reads as the top of the picture darkening rather than as a bar. */
.sheet-head.overlay::before {
  content: ""; position: absolute; left: -14px; right: -14px; top: -28px; bottom: -16px;
  background: linear-gradient(180deg, rgba(8,10,13,0.78) 0%, rgba(8,10,13,0.5) 55%, rgba(8,10,13,0) 100%);
  pointer-events: none; z-index: -1;
}
.sheet-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px; }
.sheet-head > .sheet-brand:last-child { margin-right: auto; }
.sheet-brand img { border-radius: 8px; }
.credits { font-size: 13px; color: var(--bl-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.credits b { color: var(--bl-text); font-family: var(--nums); font-variant-numeric: tabular-nums; }
.source-tag { font-size: 11px; color: var(--bl-muted); border: 1px solid var(--bl-line); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.fine { font-size: 12px; color: var(--bl-muted); line-height: 1.45; }
.fine.center { text-align: center; margin-top: auto; padding-top: 14px; }
.fine.warn { color: var(--bl-warn); }
.loadout { margin-bottom: 12px; }
/* The car on the line, as a card rather than a sentence. */
.loadout-card { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "paint body garage" "paint chips chips" "paint note note"; gap: 6px 12px; align-items: center; padding: 10px 12px 10px 10px; border: 1px solid var(--bl-line); border-radius: 12px; background: linear-gradient(180deg, #1b1f26, #14171c); }
.loadout-card .lo-paint { grid-area: paint; align-self: stretch; width: 6px; border-radius: 3px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) inset; }
.loadout-card .lo-body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.loadout-card .lo-body small { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-orange); font-weight: 700; }
/* Wrapped, never cut off (Kirk: names are never truncated). */
.loadout-card .lo-body b { font-size: 16px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.15; overflow-wrap: anywhere; }
.loadout-card .lo-body span { font-size: 12px; color: var(--bl-muted); overflow-wrap: anywhere; }
.loadout-card .lo-garage { grid-area: garage; min-height: 32px; padding: 4px 8px; font-size: 12px; font-weight: 700; background: transparent; border: 0; color: #9db7ff; letter-spacing: 0; }
.loadout-card .lo-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 5px; }
.loadout-card .lo-chips em { font-style: normal; font-size: 10.5px; letter-spacing: 0.02em; font-weight: 800; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--bl-line-2, #333a44); background: rgba(255,255,255,0.03); color: var(--bl-muted); }
.loadout-card .lo-chips em.cls { border-color: rgba(214, 30, 59, 0.45); background: rgba(214, 30, 59, 0.08); color: #ff8595; }
.loadout-card .lo-note { grid-area: note; margin: 0; font-size: 11px; color: var(--bl-muted); }
.loadout-card .lo-chips:empty, .loadout-card .lo-note:empty { display: none; }
.sheet-head .info-btn { margin-left: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--bl-line);
  background: var(--bl-panel); color: var(--bl-text); font-weight: 700; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer; touch-action: manipulation; transition: transform 90ms ease, background 120ms ease;
}
.btn:active { transform: scale(0.97); background: var(--bl-panel-2); }
.btn.primary { background: linear-gradient(180deg, var(--bl-orange) 0%, var(--bl-orange-dark) 100%); border-color: transparent; color: #fff; }
.btn.big { font-size: 18px; min-height: 58px; padding: 14px 40px; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.btn.icon { width: 44px; min-height: 44px; padding: 0; }
.btn.icon.round { border-radius: 50%; background: rgba(16,18,22,0.7); }
.btn.locked { opacity: 0.55; }
/* Something that cannot be taken back: read before tapping. */
.btn.danger, .btn.primary.danger { background: linear-gradient(180deg, #8f1420 0%, #5d0c15 100%); border-color: #b3202f; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Buttons on a card line up or they stack, and either way they are the same
   width. Kirk: stop stacking buttons where there looks like there is no
   order. They were flex children sized to their own words, so a Cancel next
   to a Buy in the Toyota GR Supra was a short box beside a long one, and a
   third button wrapped underneath at a width of its own. Two sit side by
   side in equal halves; three or more stack full width, in the order they
   are meant to be read: what you came to do, the way round it, the way out. */
.modal-card .btn-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; }
.modal-card .btn-row:has(> .btn:nth-of-type(3)) { grid-auto-flow: row; grid-auto-columns: auto; }
.modal-card .btn-row > .btn { width: 100%; justify-content: center; text-align: center; }
/* And they read in the order somebody decides in, whatever order the markup
   puts them in: the thing you came to do, the way round it, the way out.
   Cancel sat in the middle of the three, which is nobody's idea of an order. */
#modal-sure .btn-row > #sure-yes { order: 0; }
#modal-sure .btn-row > .sure-extra { order: 1; }
#modal-sure .btn-row > #sure-no { order: 2; }
.btn:disabled { opacity: 0.45; pointer-events: none; }

/* Title */
#screen-title { justify-content: flex-end; align-items: center; text-align: center; background: #0f1115; overflow: hidden; padding-bottom: calc(var(--safe-bottom) + 34px); }
/* The hero: two cars leaving the line, slowly pushing in behind the title. */
.title-hero { position: absolute; inset: 0; z-index: 0; }
.title-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; animation: hero-push 18s ease-in-out infinite alternate; }
/* The reel: eight passes stacked on each other, one lit at a time. Only the
   first has a src in the page, so the front screen still paints on one image
   and the rest arrive as their turn comes round. */
.title-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease-in-out; }
.title-shot.on { opacity: 1; }
.title-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,17,21,0.15) 0%, rgba(15,17,21,0) 30%, rgba(15,17,21,0.55) 62%, rgba(15,17,21,0.96) 100%); }
@keyframes hero-push { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.title-wrap { position: relative; z-index: 1; }
.title-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.logo { width: 120px; height: 120px; border-radius: 24px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.wordmark { width: min(86vw, 360px); height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.6)); }
.sheet-brand img { border-radius: 8px; }
.title { margin: 0; line-height: 0; position: relative; display: inline-block; }
/* No filter on this image, at any point, animated or still. An iPhone rasterises
   a filtered layer of this size badly and what it draws instead is a white
   panel exactly where the logo goes: the game's own name, gone, on the first
   screen anybody sees. The glow behind it does the same job and costs nothing. */
.title-logo { display: block; width: min(86vw, 460px); height: auto; }

/* ------------------------------------------------------------- The intro
   The logo arrives rather than simply being there: it drops in as a glow blooms
   out behind it, and the line and the button follow it up. It runs for a second
   and a half and never blocks the button, which is live from the first frame.
   Opacity and transform only: those are the two things a phone can animate
   without redrawing the picture, and every attempt at anything richer here has
   ended with an iPhone painting a white box where the logo should be. */
@keyframes title-land {
  0%   { opacity: 0; transform: scale(1.24) translateY(-12px); }
  55%  { opacity: 1; transform: scale(0.982) translateY(0); }
  76%  { transform: scale(1.011); }
  100% { transform: scale(1); }
}
@keyframes title-bloom { 0% { opacity: 0; transform: scale(0.45); } 22% { opacity: 0.9; } 100% { opacity: 0; transform: scale(2); } }
@keyframes title-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.title-logo { animation: title-land 900ms cubic-bezier(0.16, 0.9, 0.28, 1) both; }
.title-bloom {
  position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(214,30,59,0.55) 0%, rgba(214,30,59,0.14) 42%, rgba(214,30,59,0) 68%);
  animation: title-bloom 1100ms ease-out 120ms both;
}
#app.intro #screen-title .powered { animation: title-rise 600ms ease-out 620ms both; }
#app.intro #screen-title #btn-start { animation: title-rise 600ms ease-out 780ms both; }
#app.intro #screen-title #title-version { animation: title-rise 600ms ease-out 900ms both; }
.powered { color: var(--bl-muted); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Menu */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-links { display: flex; justify-content: flex-end; margin: 6px 0 0; }
.menu-links .btn { color: var(--bl-muted); }
.btn.menu { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 16px; text-align: left; overflow: hidden; }
.btn.menu > * { max-width: 100%; }
.menu-title { font-size: 17px; }
/* One line, whatever is in it. A long car and a long setup name together ran
   to three lines under each event and took the bottom of the menu off the
   screen; the panel says which car and which setup, and the garage says the
   rest. */
.menu-sub { font-size: 12px; color: var(--bl-muted); font-weight: 500; letter-spacing: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.menu.primary .menu-sub { color: rgba(255,255,255,0.8); }

/* ---------------------------------------------------------------- Menu
   A hero band with the car that is in the garage, then the two events as
   big tiles, then everything else. The hero breaks out of the screen
   padding so the picture runs to the edges of the phone. */
.screen.menu { padding-top: 0; padding-left: 0; padding-right: 0; }
.screen.menu > *:not(.menu-hero) { margin-left: calc(var(--safe-left) + 14px); margin-right: calc(var(--safe-right) + 14px); }
.menu-hero { flex: none; position: relative; overflow: hidden; background: radial-gradient(115% 95% at 80% 12%, rgba(214,30,59,0.4) 0%, rgba(214,30,59,0.06) 52%, rgba(214,30,59,0) 72%), linear-gradient(158deg, #1e232b 0%, #12161c 56%, #0d0f13 100%); padding: 12px calc(var(--safe-right) + 16px) 14px calc(var(--safe-left) + 16px); margin-bottom: 12px; border-bottom: 3px solid var(--bl-orange); border-radius: 0 0 20px 20px; min-height: 176px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 16px; }
/* The mark, oversized and low, as a watermark. It drifts a little so the band is not dead still. */
.menu-hero-img { position: absolute; left: 50%; top: 52%; width: 62%; height: auto; opacity: 0.09; transform: translate(-50%, -50%) rotate(-9deg); animation: menu-drift 26s ease-in-out infinite alternate; }
/* Fine diagonal lines, the way a workshop floor or a race livery is scored. */
.menu-hero::before { content: ''; position: absolute; inset: 0; opacity: 0.5; background: repeating-linear-gradient(118deg, rgba(255,255,255,0.035) 0 2px, rgba(255,255,255,0) 2px 13px); }
.menu-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,15,19,0) 46%, rgba(13,15,19,0.55) 100%); }
.menu-hero > *:not(.menu-hero-img) { position: relative; z-index: 1; }
/* The logo and the credits share a row in the markup. The row dissolves so
   both become items of the band itself: the logo centered on the screen rather
   than on whatever space the credits leave it, and the credits out of the flow
   in the corner. It reads the same on a phone and on a monitor. */
.menu-hero-top { display: contents; }
/* Same picture, same rule as the title: no filter on it. */
.menu-logo { order: -1; width: min(50vw, 230px); height: auto; }
/* The purse goes in the top left corner of the band, and only the number: on
   the right it was under the music button, in the middle of the band it was
   across the greeting, and spelled out it was across the logo. */
.menu-hero-car { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; max-width: 100%; min-width: 0; }
.menu-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bl-orange); }
/* A car with a long name and a supercharger kit with a longer one used to
   take four lines between them and push the bottom row of the menu off the
   screen. The name gets two lines at most and the setup gets one, so the band
   is the same height whatever is parked in it. */
.menu-car-name { font-size: clamp(19px, 6.6vw, 27px); line-height: 1.04; max-width: 100%; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 3px 14px rgba(0,0,0,0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-car-spec { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12.5px; color: rgba(255,255,255,0.82); letter-spacing: 0.02em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-greeting { margin: 6px 0 0; font-size: 12px; color: rgba(255,255,255,0.6); }
/* The greeting is a button: face, name, and the way to your own profile. */
button.menu-greeting { display: inline-flex; align-items: center; gap: 7px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 2px 10px 2px 2px; font: inherit; font-size: 12px; line-height: 1; color: rgba(255,255,255,0.8); cursor: pointer; max-width: 100%; }
.menu-greeting .avatar.greet { width: 22px; height: 22px; margin: 0; }
.menu-greeting small { color: var(--bl-orange); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
/* Somebody with a real game and no email keeping it. One strip under the
   hero, there until an email and a password are on the account, and the way
   to add them is the strip itself. */
.menu-newhere { display: flex; align-items: stretch; gap: 0; margin-top: -4px; margin-bottom: 10px; border: 1px solid rgba(63,210,255,0.5); border-radius: 12px; background: linear-gradient(90deg, rgba(63,210,255,0.16), rgba(0,0,0,0.35)); overflow: hidden; }
.menu-newhere[hidden] { display: none; }
.menu-newhere-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; color: #fff; font: inherit; font-size: 12.5px; line-height: 1.3; text-align: left; cursor: pointer; }
.menu-newhere-go svg { width: 22px; height: 22px; flex: none; color: #3fd2ff; }
.menu-newhere-go span { flex: 1; min-width: 0; color: rgba(255,255,255,0.86); }
.menu-newhere-go b { color: #fff; }
.menu-newhere-go em { font-style: normal; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; padding: 5px 10px; border-radius: 999px; background: #3fd2ff; color: #06202a; }
.menu-newhere-x { flex: none; width: 40px; border: 0; border-left: 1px solid rgba(255,255,255,0.08); background: none; color: var(--bl-muted); font-size: 20px; cursor: pointer; }
/* The FAQ page. */
.faq-page { display: flex; flex-direction: column; gap: 12px; padding: 4px calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 90px) calc(var(--safe-left) + 16px); max-width: 820px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.faq-head h2 { margin: 0 0 4px; font-family: var(--game); font-weight: 900; font-style: italic; font-size: 26px; text-transform: uppercase; color: #fff; }
.faq-head p { margin: 0 0 10px; font-size: 14px; color: var(--bl-muted); line-height: 1.45; }
.faq-search { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--bl-line); background: rgba(255,255,255,0.05); color: #fff; font: inherit; font-size: 15px; }
.faq-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.faq-sec { display: flex; flex-direction: column; gap: 6px; scroll-margin-top: calc(var(--safe-top) + 64px); }
.faq-sec[hidden], .faq-item[hidden] { display: none; }
.faq-sec .menu-eyebrow { margin: 8px 2px 2px; }
.faq-item { border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--bl-line); }
.faq-item > summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.35; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: ''; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--bl-muted); border-bottom: 2px solid var(--bl-muted); transform: rotate(45deg); transition: transform 0.15s; }
.faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-item[open] { border-color: rgba(63,210,255,0.45); }
.faq-a { padding: 0 14px 14px; }
.faq-a p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--bl-text); }
.faq-a .btn { margin-top: 2px; }
.menu-keep { display: flex; align-items: center; gap: 10px; margin-top: -4px; margin-bottom: 10px; padding: 9px 12px; background: linear-gradient(90deg, rgba(255,106,0,0.2), rgba(0,0,0,0.35)); border: 1px solid rgba(255,140,40,0.55); border-radius: 12px; color: #fff; font: inherit; font-size: 12.5px; line-height: 1.3; text-align: left; cursor: pointer; }
/* Track Day on the menu: the first thing under the bar on race day, and
   red with a beating light once the track is hot. */
.screen.menu > .menu-trackday { margin-top: 10px; margin-bottom: 10px; }
.menu-trackday { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255,140,40,0.55); border-radius: 12px; background: linear-gradient(90deg, rgba(255,106,0,0.2), rgba(0,0,0,0.35)); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.menu-trackday[hidden] { display: none; }
.menu-trackday .menu-td-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #ff8c28; }
.menu-trackday .menu-td-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-trackday b { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.menu-trackday small { font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,0.86); }
.menu-trackday em { flex: none; font-style: normal; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; background: #ff8c28; color: #000; }
.menu-trackday[data-state="hot"] { border-color: rgba(255,90,110,0.85); background: linear-gradient(100deg, #d61e3b 0%, #8f1228 60%, #4a0a16 100%); box-shadow: 0 8px 24px rgba(214,30,59,0.35); }
.menu-trackday[data-state="hot"] b { font-size: 17px; }
.menu-trackday[data-state="hot"] .menu-td-dot { background: #fff; animation: rec-breathe 1.2s ease-in-out infinite; }
.menu-trackday[data-state="hot"] em { background: #fff; color: #a3122b; }
.menu-keep svg { width: 20px; height: 20px; flex: none; color: var(--bl-orange); }
.menu-keep span { flex: 1; min-width: 0; color: rgba(255,255,255,0.86); }
.menu-keep b { color: #fff; }
.menu-keep small { flex: none; background: var(--bl-orange); color: #000; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 999px; }
/* Tonight at the strip (js/conditions.js): the air and the prep under the two doors to a race. */
.menu-conditions { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 8px; margin-bottom: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(120, 190, 255, 0.35); background: linear-gradient(90deg, rgba(40, 110, 200, 0.18), rgba(0, 0, 0, 0.3)); color: #fff; font: inherit; font-size: 12.5px; line-height: 1.3; text-align: left; cursor: pointer; }
.menu-conditions svg { width: 20px; height: 20px; flex: none; color: #8cc8ff; }
.menu-conditions .mc-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-conditions .mc-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8cc8ff; }
.menu-conditions b { color: #fff; font-weight: 700; }
.menu-conditions small { color: rgba(255, 255, 255, 0.72); }
.menu-conditions .mc-go { flex: none; font-style: normal; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 999px; background: rgba(140, 200, 255, 0.16); color: #cfe7ff; }
.menu-conditions.prep-prime { border-color: rgba(80, 220, 140, 0.5); }
.menu-conditions.prep-slick { border-color: rgba(255, 150, 60, 0.55); }
/* The week's crowns on the This week tab. */
.crowns { margin-top: 16px; }
.crowns h4 small { font-weight: 600; opacity: 0.7; }
.crown-list { list-style: none; margin: 8px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crown-row { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.crown-row.me { border-color: rgba(242, 194, 48, 0.6); background: rgba(242, 194, 48, 0.08); }
.crown-row .cr-car { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.crown-row .cr-who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 6px; cursor: pointer; }
.crown-row .cr-who .crown { align-self: center; }
.crown-row .cr-who b { overflow-wrap: anywhere; }
.crown-row .cr-who i { font-style: normal; font-variant-numeric: tabular-nums; opacity: 0.85; }
.crown-row .cr-who small { margin-left: auto; font-size: 11.5px; opacity: 0.65; }
.crown-row:not(.pays) .cr-who small { color: #ffb44d; opacity: 0.9; }
.crown-row .cr-all { font-size: 11.5px; opacity: 0.6; }
.crown { width: 15px; height: 15px; flex: none; }

/* The bar along the top: who you are, on the way to your profile, and what
   you have. It stays put while the menu scrolls, and leaves the corner to
   the music button, which is fixed there on every screen. The greeting was
   a pill in the band and the credits sat in the band's corner; both used
   to scroll away with it. */
.screen.menu > .menu-top { position: sticky; top: 0; z-index: 5; margin: 0; display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-top) + 6px) calc(var(--safe-right) + 62px) 6px calc(var(--safe-left) + 14px); background: rgba(16,18,22,0.92); border-bottom: 1px solid var(--bl-line); min-height: calc(var(--safe-top) + 52px); }
#app[data-music="hide"] .screen.menu > .menu-top { padding-right: calc(var(--safe-right) + 14px); }
.menu-top .menu-greeting, .menu-top button.menu-greeting { margin: 0; background: none; border: 0; padding: 0; font-size: 13.5px; color: var(--bl-text); font-weight: 700; min-width: 0; }
.menu-top .menu-greeting .avatar.greet { width: 30px; height: 30px; }
.menu-top .menu-greeting span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-top .menu-greeting span i { display: block; font-style: normal; font-weight: 600; font-size: 10.5px; color: var(--bl-muted); line-height: 1.1; }
.menu-top .menu-greeting small { font-size: 9.5px; }
.menu-top .credits { margin-left: auto; color: rgba(255,255,255,0.72); font-size: 12px; gap: 5px; padding: 5px 9px; border: 1px solid var(--bl-line-2, #333a44); border-radius: 999px; background: var(--bl-panel); }
.menu-top .credits b { font-size: 13px; }
.menu-top .credits svg { width: 14px; height: 14px; }
.menu-top .menu-gear, .menu-top .menu-faq { width: 40px; min-height: 40px; background: var(--bl-panel); border-color: var(--bl-line-2, #333a44); color: var(--bl-text); }
/* Under the car, the way to a different one. The band is the car; the
   garage is where the cars are. */
.menu-change { margin-top: 2px; background: none; border: 0; color: #9db7ff; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 8px; cursor: pointer; border-radius: 6px; }
/* Today, this week, the garage: a heading over each group, so the eye
   knows where an event lives and how long it lasts. */
.menu-section { flex: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.menu-section .menu-tiles { margin-top: 0; }
.menu-eyebrow { margin: 0 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
/* Next up: one row per thing waiting, the whole row a button, the word on
   the right saying what the tap does. */
.menu-next { display: flex; flex-direction: column; background: linear-gradient(180deg, #2a1c22 0%, var(--bl-panel) 100%); border: 1px solid #5a2a35; border-radius: 12px; overflow: hidden; }
.menu-next:empty { display: none; }
.next-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; text-align: left; background: none; border: 0; border-top: 1px solid var(--bl-line); color: var(--bl-text); font: inherit; cursor: pointer; }
.next-row:first-child { border-top: 0; }
.next-row:active { background: rgba(255,255,255,0.04); }
.next-row .avatar { width: 34px; height: 34px; margin: 0; }
.next-row > svg { width: 22px; height: 22px; color: var(--bl-orange); margin: 0 6px; }
.next-row .t { display: block; font-size: 14px; font-weight: 800; line-height: 1.2; }
.next-row .s { display: block; font-size: 12px; color: var(--bl-muted); line-height: 1.3; }
.next-row .s em { font-style: normal; font-weight: 700; color: #f0b429; }
.next-row .go { justify-self: end; font-weight: 800; font-size: 12.5px; line-height: 1; padding: 9px 12px; border-radius: 9px; background: linear-gradient(180deg, #e0243f, #a3122b); border: 1px solid rgba(255,255,255,0.18); color: #fff; white-space: nowrap; }
.next-row .go.quiet { background: var(--bl-panel-2); border-color: var(--bl-line); }
/* The three garage doors in a row, the sentence under each one short. */
.menu-tiles.quad { grid-template-columns: 1fr 1fr; }
.menu-tiles.quad .btn.tile.small { min-height: 78px; padding: 12px 6px 10px; }
.menu-tiles.quad .btn.tile.small .tile-sub { text-align: center; font-size: 11px; }
@keyframes menu-drift { from { transform: translate(-50%, -50%) rotate(-9deg) scale(1); } to { transform: translate(-50%, -52%) rotate(-6deg) scale(1.07); } }

/* A phone is not as tall as a desk monitor and the menu has to be one screen:
   everything on it is reachable without scrolling, so the band, the event
   panels and the tiles all give ground as the screen gets shorter. */
@media (max-height: 900px) {
  .menu-hero { min-height: 150px; gap: 8px; padding-top: 10px; padding-bottom: 12px; margin-bottom: 10px; }
  .menu-logo { width: min(46vw, 210px); }
  .menu-car-name { font-size: 22px; }
  .screen.menu .btn.menu.primary { min-height: 76px; padding: 12px 16px; }
  .screen.menu .btn.menu.primary .menu-title { font-size: 23px; }
  .btn.tile { min-height: 84px; }
  .menu-tiles { margin-top: 8px; gap: 8px; }
  .menu-grid { gap: 8px; }
}
@media (max-height: 740px) {
  .menu-hero { min-height: 112px; gap: 4px; padding-top: 8px; padding-bottom: 10px; margin-bottom: 8px; }
  .menu-logo { width: min(40vw, 170px); }
  .menu-car-name { font-size: 18px; }
  .menu-car-spec { font-size: 11.5px; }
  .screen.menu .btn.menu.primary { min-height: 58px; padding: 9px 14px; }
  .screen.menu .btn.menu.primary .menu-title { font-size: 19px; }
  .btn.tile { min-height: 62px; padding: 10px 12px; }
  .btn.tile svg { width: 20px; height: 20px; }
  .btn.tile.small { min-height: 52px; }
  .btn.tile.wide { min-height: 48px; }
  .menu-tiles, .menu-grid { gap: 7px; }
  .menu-tiles { margin-top: 7px; }
  .screen.menu > p.fine.center { display: none; }
}
/* The smallest phone still in use. The band keeps the logo and the name of the
   car and gives up everything else, and nothing drops below a thumb sized
   target on the way. */
@media (max-height: 690px) {
  .menu-hero { min-height: 80px; }
  .menu-logo { width: min(36vw, 150px); }
  .menu-car-spec, .menu-hero .menu-kicker { display: none; }
  .screen.menu .btn.menu.primary { min-height: 50px; }
  .btn.tile { min-height: 50px; }
  .btn.tile.small { min-height: 44px; }
  .btn.tile.wide { min-height: 44px; }
  .menu-tiles, .menu-grid { gap: 5px; }
  .menu-tiles { margin-top: 5px; }
  .screen.menu { padding-bottom: calc(var(--safe-bottom) + 4px); }
  .menu-hero { min-height: 72px; margin-bottom: 6px; padding-top: 6px; padding-bottom: 8px; }
  .menu-car-name { font-size: 17px; -webkit-line-clamp: 1; }
}

/* The two events. A red panel with a sheen that crosses it now and then. */
.screen.menu .btn.menu.primary { position: relative; overflow: hidden; min-height: 86px; padding: 14px 18px; gap: 3px; background: linear-gradient(118deg, #e0263f 0%, #b31732 46%, #6f0f22 100%); border-color: rgba(255,255,255,0.16); box-shadow: 0 10px 26px rgba(160,18,40,0.3); }
.screen.menu .btn.menu.primary .menu-kicker { color: rgba(255,255,255,0.82); }
.screen.menu .btn.menu.primary .menu-title { font-size: clamp(17px, 4.8vw, 25px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.05; }
.screen.menu .btn.menu.primary::after { content: ''; position: absolute; top: -60%; bottom: -60%; width: 40%; left: -55%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: menu-sheen 7s ease-in-out infinite; }
.screen.menu .btn.menu.primary:nth-child(2)::after { animation-delay: 3.5s; }
@keyframes menu-sheen { 0%, 62% { left: -55%; } 88%, 100% { left: 125%; } }

/* Everything else: tiles with an icon, two across, three for the small ones. */
.menu-tiles { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.screen.menu .menu-grid { flex: none; }
.menu-tiles.three { grid-template-columns: repeat(3, 1fr); }
.menu-tiles.four, .menu-tiles.menu-bar { grid-template-columns: repeat(5, 1fr); }
.menu-tiles.four .btn.tile.small, .menu-tiles.menu-bar .btn.tile.small { padding: 12px 4px; }
/* The four at the bottom: the icon, the title, and whatever sits under the
   title (The Lanes' online count). Each tile is its own three row grid with
   the icon and the title in rows of a fixed size, so the titles line up
   across all four whether or not there is a line under one of them. As a
   centered column, the tile with the extra line pushed its title up. */
.menu-tiles.four .btn.tile.small, .menu-tiles.menu-bar .btn.tile.small { display: grid; grid-template-rows: 24px auto minmax(0, 1fr); align-content: start; align-items: start; justify-items: center; gap: 4px; text-align: center; }
.menu-tiles.four .btn.tile.small svg, .menu-tiles.menu-bar .btn.tile.small svg { margin: 0; align-self: center; }
.menu-tiles.four .btn.tile.small .tile-title, .menu-tiles.menu-bar .btn.tile.small .tile-title { justify-content: center; font-size: 11.5px; }
.btn.tile { flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 13px 14px; min-height: 96px; background: linear-gradient(160deg, #1c2028 0%, #14171c 100%); border-color: var(--bl-line); }
.btn.tile svg { width: 24px; height: 24px; color: var(--bl-orange); margin-bottom: 2px; }
.tile-title { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Daily or weekly, on the title of every event tile, so the home screen
   says at a glance what turns over at midnight and what runs to Monday. */
.tile-when { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--bl-line); color: var(--bl-muted); font-style: normal; line-height: 1.3; }
.tile-when.daily { border-color: rgba(240, 180, 41, 0.45); color: #f0b429; background: rgba(240,180,41,0.07); }
.tile-when.weekly { border-color: rgba(120, 160, 255, 0.45); color: #9db7ff; background: rgba(120,160,255,0.07); }
.tile-sub { font-size: 11.5px; color: var(--bl-muted); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
#menu-index b { color: var(--bl-ok); font-weight: 700; }
.tile-sub.on { color: #6ee89b; font-weight: 700; }
.tile-sub.on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bl-ok); box-shadow: 0 0 6px var(--bl-ok); margin-right: 5px; vertical-align: 1px; }
.tile-sub:empty { display: none; }
/* The wide tile: the icon beside the title, the sub under the title. As a
   wrapping flex row the title centered itself on line one and the sub sat left
   on line two, which read as a mistake rather than a layout. */
.btn.tile.wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon sub"; align-content: center; justify-content: start; gap: 1px 12px; min-height: 68px; }
.btn.tile.wide svg { grid-area: icon; align-self: center; margin: 0; }
.btn.tile.wide .tile-title { grid-area: title; align-self: end; }
.btn.tile.wide .tile-sub { grid-area: sub; align-self: start; margin: 0; }
.btn.tile.small { min-height: 74px; align-items: center; text-align: center; justify-content: center; gap: 6px; padding: 12px 6px; }
.btn.tile.small .tile-title { font-size: 13px; }
.screen.menu .fine.center { margin-top: auto; padding-top: 16px; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) {
  .menu-hero-img { animation: none; }
  .screen.menu .btn.menu.primary::after { animation: none; opacity: 0; }
  /* The intro is the first thing anybody sees, so it is also the first thing
     to go for somebody who has asked for less movement. */
  .title-logo, .title-bloom,
  #screen-title .powered, #screen-title #btn-start, #screen-title #title-version { animation: none; }
  .title-bloom { opacity: 0; }
}

/* Garage */
.screen.garage { padding: 0; }
/* No transition on this one. It is an invisible region the camera measures
   rather than anything anybody sees, and animating its height made a run of
   quick changes stall part way, leaving the split reading one number and
   measuring another. The panel below is what is actually seen to move. */
.turntable { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 70px); height: var(--garage-stage); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--safe-right) + 14px) 0 calc(var(--safe-left) + 14px); pointer-events: auto; touch-action: none; cursor: grab; }
/* This car on the dyno, in the turntable's corner under the car. */
.garage-dyno-go { position: absolute; right: 14px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: 13px; background: var(--bl-ink, #15171b); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.25); cursor: pointer; }
.garage-dyno-go.locked { background: rgba(21,23,27,0.72); }
.garage-dyno-go svg { flex: none; }
/* On the dyno: what a dyno tune is for, and the race map in one tap. */
.dyno-race-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--bl-muted, #8a909a); }
.dyno-race-note .btn { margin-top: 6px; display: inline-flex; }
.turntable .btn { pointer-events: auto; }
.garage-panel { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--safe-top) + 70px + var(--garage-stage)); transition: top 220ms ease; background: var(--bl-ink); border-top: 3px solid var(--bl-orange); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; }
/* The lip of the panel is a handle: drag it and the split moves, and where it
   is left is remembered for that tab. How much of the garage the car is worth
   is a matter of taste and it changes with what you are doing, so it is set
   rather than decided here. */
.panel-grip { display: block; width: 100%; height: 22px; padding: 0; margin: 0; border: 0; background: transparent; cursor: ns-resize; touch-action: none; flex: none; }
.panel-grip span { display: block; width: 44px; height: 4px; margin: 9px auto; border-radius: 2px; background: var(--bl-line); transition: background 120ms ease; }
.panel-grip:active span, .panel-grip:hover span { background: var(--bl-orange); }
#app[data-gripping="1"] .turntable, #app[data-gripping="1"] .garage-panel { transition: none; }

/* Every tab strip is a row of chips, the way the strip's modes and the
   garage's class filter are: the one you are on filled red, the rest quiet
   pills. They were underlined tabs, a third style beside the chips. */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; border-bottom: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; min-height: 34px; padding: 0 13px; white-space: nowrap; border: 1px solid var(--bl-line-2, #333a44); border-radius: 999px; background: var(--bl-panel); color: var(--bl-muted); font-weight: 700; text-transform: none; letter-spacing: 0.02em; font-size: 12.5px; cursor: pointer; }
.tab.active { background: var(--bl-orange); border-color: transparent; color: #fff; box-shadow: none; }
#garage-tabs { padding: 0 14px 10px; }
/* Six tabs on a phone: Wheels sat off the right edge as a W, and nothing
   said the row scrolled. Narrower, they all fit. */
@media (max-width: 560px) {
  #screen-garage #garage-tabs { gap: 4px; }
  #screen-garage #garage-tabs .tab { flex: 1 1 auto; padding: 0 7px; font-size: 14px; letter-spacing: 0; }
}
.tab-body { flex: 1; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 12px 14px 14px; }
.garage-actions { padding: 10px 14px calc(var(--safe-bottom) + 10px); border-top: 1px solid var(--bl-line); display: flex; gap: 8px; }
.garage-actions .btn { flex: 1; }
/* Each strip's button with its test and tune joined on to it, one row for
   both strips: a solo pass that posts nothing, for setting a car up before an
   index or a race. It was a second row under the first, two buttons reading
   Test and tune stacked under two that did not say which was whose. */
.garage-go { flex: 1; display: flex; flex-direction: row; gap: 3px; min-width: 0; }
.garage-go .btn { flex: 1 1 auto; min-width: 0; }
.garage-go .btn.garage-test { flex: none; width: 64px; min-height: 0; padding: 2px 6px; font-size: 11px; line-height: 1.05; white-space: normal; background: transparent; border-color: var(--bl-line-2, #333a44); color: var(--bl-muted); border-radius: 999px; }
.garage-go .btn.garage-test:hover { color: var(--bl-text); border-color: var(--bl-muted); }
.garage-go .btn.garage-test[hidden] { display: none; }

/* Spec sheets */
.spec { background: var(--bl-paper); color: var(--bl-paper-ink); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); position: relative; overflow: hidden; }
.spec::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--bl-orange); }
.spec.oem::before { background: #6b7280; }
.spec.locked { opacity: 0.8; }
.spec.selected { outline: 3px solid var(--bl-orange); }
/* The name gets the room and the engine's designation drops under it when it
   will not fit beside it. Side by side without this, "Ferrari F120A 2.9 twin
   turbo V8" took three quarters of a phone and squeezed FERRARI F40 LB WORKS
   into three lines of one word each. */
.spec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 8px; margin-bottom: 6px; }
.spec-head > div:first-child { flex: 1 1 58%; min-width: 0; }
.spec-title { font-weight: 900; font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
.spec-brand { font-size: 11px; color: #5b616b; text-transform: uppercase; letter-spacing: 0.1em; }
.spec-sku { flex: 0 1 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 11px; background: #1b1d22; color: #fff; padding: 3px 7px; border-radius: 4px; white-space: nowrap; }
.spec-desc { font-size: 12.5px; line-height: 1.4; color: #3a3f47; margin: 4px 0 8px; }
/* What a wheel figure on the card above means, said once under it. */
.spec-foot { font-size: 11px; line-height: 1.35; color: #6b7178; margin: 6px 0 0; }
/* The three figures the card is really for, at the head of it and a size up.
   The unit stays small beside the number so the eye lands on the number. */
.spec-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; margin: 10px 0 12px; }
.spec-hero div { border-top: 2px solid var(--bl-ink); padding-top: 5px; }
.spec-hero span { display: block; color: #6b7280; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.spec-hero b { display: block; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 25px; font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; }
.spec-hero b i { font-style: normal; font-size: 11px; font-weight: 700; color: #6b7280; margin-left: 3px; letter-spacing: 0.04em; }
.spec-fine { margin: 8px 0 0; font-size: 11px; color: #6b7280; }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; font-size: 12px; }
/* A cell that needs the room. Without this the class was doing nothing at all
   and the gearbox was wrapping to three lines inside a third of a phone. */
.spec-grid .wide { grid-column: span 2; }
/* A cell that gets a line to itself. The engine and the gearbox are both
   sentences rather than figures, and two of them at span 2 in a 3 column grid
   leave an empty cell between them. */
.spec-grid .full { grid-column: 1 / -1; }
.spec-grid div { border-top: 1px solid #d5d0c4; padding-top: 4px; }
.spec-grid span { display: block; color: #6b7280; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.spec-grid b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 13px; }
.spec-graph { width: 100%; height: 110px; display: block; margin-top: 8px; border-radius: 6px; background: #ebe6db; }
.spec-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.spec-actions .btn { min-height: 38px; padding: 6px 12px; font-size: 13px; }
/* The link to the real unit. It sits at the far end of the row from the buy
   button on purpose: one of those spends credits in a game and the other one
   leaves for a shop, and they should not look like a pair. */
.spec-link { font-size: 12px; font-weight: 700; color: var(--bl-orange-dark); margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
/* What a unit is for, worked out from its own curve. Set apart from the maker's
   description above it, because one is a blurb and the other is an opinion. */
.spec-advice { border-left: 3px solid var(--bl-orange); padding: 2px 0 2px 10px; margin: 8px 0 10px; }
.spec-advice h4 { margin: 0 0 3px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-orange-dark); }
.spec-advice p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.45; color: #3a3f47; }
.spec-advice p:last-child { margin-bottom: 0; }
.difficulty { display: inline-flex; gap: 2px; }
.difficulty i { width: 8px; height: 8px; border-radius: 2px; background: #cfc9bc; }
.difficulty i.on { background: var(--bl-orange); }
.car-spec .spec-title { font-size: 20px; }
/* Wear and tear, as a bar. Green while it is fresh, amber once it is costing
   power, red when it wants a rebuild. */
/* Moving a game to another browser: two halves, one for each end of it. */
.move-half { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bl-line); text-align: left; }
.move-half:first-of-type { border-top: 0; padding-top: 0; }
.move-half h3 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-orange); }
.move-half .fine { margin: 4px 0 10px; }
.move-half .row { display: flex; gap: 8px; }
.move-half input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--bl-line); background: #0e1116; color: var(--bl-text); font: inherit; font-family: var(--mono); font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; }
/* A line of text that is a button: asking where the code comes from should
   not look like another thing to press before the code arrives. */
.btn.link { display: inline; min-height: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--bl-orange); text-decoration: underline; letter-spacing: inherit; }
.btn.link:active { transform: none; background: none; }
/* The drawing on a how to card: a screen with the thing to press marked. */
.howto-art { margin: 2px 0 4px; }
.howto-art svg { display: block; width: 100%; height: auto; }
/* The shop's own small print: ids and counts, where the shape matters. */
.fine.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0; color: var(--bl-muted); }
/* Picking between two saved games: two buttons, each saying what it holds. */
.garage-pick { display: flex; flex-direction: column; gap: 8px; }
.garage-pick .btn { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 62px; text-align: left; }
.garage-pick .btn small { font-weight: 600; letter-spacing: 0; color: var(--bl-muted); font-size: 12px; }
.move-code { margin-top: 10px; font-family: var(--mono); font-size: 30px; font-weight: 800; letter-spacing: 0.22em; color: var(--bl-text); text-align: center; }
#modal-move .btn-row { margin-top: 14px; }
/* A short card of steps, for the things a browser will not do for us. */
#howto-steps, .howto-steps { margin: 12px 0 4px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
#howto-steps li, .howto-steps li { font-size: 14px; line-height: 1.45; }
.howto-steps[hidden] { display: none; }
/* About: the model credits, folded away until somebody wants them. */
.credits-block { margin-top: 16px; border-top: 1px solid rgba(0,0,0,0.12); padding-top: 10px; }
.credits-block summary { cursor: pointer; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; list-style: none; display: flex; align-items: center; gap: 8px; }
.credits-block summary::-webkit-details-marker { display: none; }
.credits-block summary::after { content: '+'; margin-left: auto; font-size: 16px; font-weight: 700; opacity: 0.6; }
.credits-block[open] summary::after { content: '\2013'; }
.credit-list { margin: 8px 0 2px; padding-left: 18px; }
.credit-list li { font-size: 11.5px; line-height: 1.5; color: #55606d; }
/* A pass somebody ran against your garage, in the card that greets you. */
.bout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--bl-line); text-align: left; }
.bout:first-child { border-top: 0; }
/* Name and verdict on the first line, the car and the two times under it. */
.bout b { grid-area: 1 / 1; font-size: 14px; font-weight: 800; }
.bout em { grid-area: 1 / 2; font-style: normal; font-size: 12px; font-weight: 800; color: #d61e3b; text-align: right; white-space: nowrap; }
.bout.held em { color: #4ec06a; }
.bout span { grid-area: 2 / 1; font-size: 12px; color: var(--bl-muted); }
.bout i { grid-area: 2 / 2; font-style: normal; font-size: 12px; color: var(--bl-muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#bouts-list { margin: 10px 0 4px; }
/* The card behind this is paper white, so the panel says what its own colors
   are rather than inheriting ink meant for a light background. */
.health { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bl-line); background: #14171c; color: #f2f2f3; }
.health-head { display: flex; align-items: baseline; gap: 8px; }
.health-head b { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #f2f2f3; }
.health-head span { flex: 1; font-size: 12px; color: #9aa3ad; }
.health-head em { font-style: normal; font-size: 13px; font-weight: 800; color: #f2f2f3; }
.health .fine { color: #9aa3ad; }
.meter { height: 7px; margin-top: 7px; border-radius: 4px; background: #23272e; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; background: #f2b64c; transition: width 200ms ease; }
.health.good .meter i { background: #4ec06a; }
.health.warn .meter i { background: #d61e3b; }
.health .fine { margin-top: 6px; }
.health .btn { margin-top: 8px; }
.car-note { font-size: 11px; color: #6b7280; margin-top: 6px; font-style: italic; }
/* A turbo maker's own artwork on the spec card, in place of their name. */
.spec-brand .brand-logo { display: block; height: 22px; width: auto; max-width: 190px; object-fit: contain; margin-bottom: 3px; }
.spec-brand .spec-housing { display: block; font-size: 10px; opacity: 0.75; }
.car-gate { width: 100%; border: 1px solid var(--bl-line); border-radius: 8px; padding: 9px 11px; background: var(--bl-ink); }
.car-gate .gate-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #f2b64c; }
.car-gate ul { margin: 7px 0 0; padding-left: 16px; }
.car-gate li { font-size: 11px; color: var(--bl-muted); line-height: 1.5; }
/* Boost past what the unit is rated for: said on the slider, not in the bill. */
.tune-warn { grid-column: 1 / -1; margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: #f2b64c; }

.car-note.warn, .estimate-warn { color: #f2b64c; font-style: normal; font-size: 11px; margin-top: 6px; grid-column: 1 / -1; }

/* Tune sliders */
.tune-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bl-line); }
.tune-row label { font-size: 13px; font-weight: 700; }
.tune-row small { display: block; color: var(--bl-muted); font-weight: 400; font-size: 11px; margin-top: 2px; }
.tune-row output { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--bl-orange); min-width: 64px; text-align: right; }
/* A row of small numbers: one psi per gear, or per second off the line. */
.psi-table { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.psi-table label { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--bl-muted); }
.psi-table input { width: 58px; padding: 6px 4px; text-align: center; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 13px; color: #fff; background: rgba(0,0,0,0.3); border: 1px solid var(--bl-line); border-radius: 6px; }
.psi-table input:disabled { opacity: 0.4; }
.tune-row input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--bl-orange); height: 32px; }
/* A vertical swipe over a slider scrolls the sheet; only a sideways drag moves it. */
.tune-row input[type="range"], .gear-row input[type="range"], .field.inline input[type="range"] { touch-action: pan-y; }
/* The Tune tab keeps a clear lane down its right edge to scroll by, dotted like a grip. */
#garage-tune { position: relative; padding-right: 62px; }
#garage-tune::after { content: ''; position: absolute; top: 0; right: 8px; bottom: 0; width: 40px; border-radius: 8px; background: radial-gradient(circle, rgba(255,255,255,0.22) 1.6px, transparent 2.2px) 50% 0 / 12px 12px repeat-y; pointer-events: none; }
.tune-row .switch { justify-self: end; }
.switch { position: relative; width: 48px; height: 28px; border-radius: 14px; background: var(--bl-line); border: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 120ms ease; }
.switch.on { background: var(--bl-orange); }
.switch.on::after { transform: translateX(20px); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.presets .btn { min-height: 34px; padding: 4px 12px; font-size: 12px; }
/* Setups kept by name: the tune on the page can be filed, and any filed one
   loaded back over it. A row is the name, what it was built on and how it
   simulated, then Load and a small remove. */
.saved-tunes { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.saved-tune { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bl-line); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.saved-tune .saved-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.saved-tune .saved-name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-tune .saved-name small { color: var(--bl-muted); font-size: 11px; }
.saved-tune .btn.small { min-height: 30px; padding: 2px 10px; }
.saved-tune .saved-x { min-height: 30px; min-width: 30px; padding: 0 8px; font-size: 16px; line-height: 1; opacity: 0.7; }
.saved-empty { color: var(--bl-muted); font-size: 12px; margin: 2px 0 6px; }
#tunename-input { font-family: var(--font, system-ui, sans-serif); font-size: 18px; font-weight: 700; text-align: center; }
.tune-graph { width: 100%; height: 120px; background: var(--bl-panel); border-radius: 8px; margin-top: 10px; display: block; }
.section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bl-muted); margin: 14px 2px 6px; }

/* Track list */
.track-list { display: flex; flex-direction: column; gap: 10px; }
.track-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 12px; padding: 12px 14px; text-align: left; align-items: center; }
.track-card.locked { opacity: 0.6; }
.track-card h3 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; }
.track-card p { font-size: 12px; color: var(--bl-muted); grid-column: 1 / -1; line-height: 1.4; }
.track-card .meta { font-size: 11px; color: var(--bl-muted); font-family: var(--nums); font-variant-numeric: tabular-nums; text-align: right; }
.track-card .best { grid-column: 1 / -1; font-size: 12px; font-family: var(--nums); font-variant-numeric: tabular-nums; color: var(--bl-orange); }
.track-card .env { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bl-muted); }

/* Race HUD */
.screen.race { padding: 0; pointer-events: none; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud-top { position: absolute; left: calc(var(--safe-left) + 10px); right: calc(var(--safe-right) + 10px); top: calc(var(--safe-top) + 8px); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.hud-block { background: rgba(12,14,18,0.72); border: 1px solid var(--bl-line); border-radius: 8px; padding: 6px 10px; min-width: 88px; }
.hud-block.center { text-align: center; flex: 1; max-width: 190px; }
.hud-label { display: block; font-size: 10px; letter-spacing: 0.12em; color: var(--bl-muted); }
.hud-block b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 18px; display: block; white-space: nowrap; }
.hud-block b.long { font-size: 14px; letter-spacing: -0.02em; }
.hud-best { font-size: 10px; color: var(--bl-muted); letter-spacing: 0.08em; }
.hud-best i { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; color: var(--bl-orange); }
#minimap { width: 96px; height: 96px; background: rgba(12,14,18,0.6); border: 1px solid var(--bl-line); border-radius: 8px; }
/* Above the tree, under the lane card, and painted over every gauge and bar
   whatever the order they come in: the status banner sat early in the HUD
   and the tires bar drawn after it covered COMPRESSOR SURGE. Kirk. */
/* The floor is what stops this landing on the lane card.
   The banner is placed as a share of the viewport height and the lane card at
   a fixed offset from the top, which means the two are in different units and
   are guaranteed to meet at SOME height. On a 430x930 phone they did: the
   card sits 172 to 198 and the banner was at 169 to 199, so every warning the
   game can raise - surge, limp mode, EGT, waiting for the other lane - was
   printed straight over the name of whoever you were racing. Landscape never
   showed it because the card moves to the top left there.
   max() keeps the intended placement wherever there is room for it and drops
   the banner just under the card where there is not. */
.hud-status { position: absolute; left: 50%; top: max(calc(27% - 41px), calc(var(--safe-top) + 206px)); z-index: 6; transform: translate(-50%, 0); background: rgba(12,14,18,0.8); border: 1px solid var(--bl-line); color: var(--bl-text); padding: 6px 14px; border-radius: 6px; font-weight: 800; letter-spacing: 0.1em; font-size: 14px; opacity: 0; transition: opacity 150ms; white-space: nowrap; }
.hud-status.show { opacity: 1; }
.hud-status.warn { border-color: var(--bl-warn); color: #ff6b6b; }
.hud-status.good { border-color: var(--bl-ok); color: #6ee89b; }
.hud-drift { position: absolute; right: 16px; top: 34%; font-family: var(--nums); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; color: var(--bl-orange); opacity: 0; transition: opacity 120ms; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.hud-drift.show { opacity: 1; }
.hud-egt { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 78px); display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.12em; color: var(--bl-muted); }
.egt-track { position: relative; width: 120px; height: 8px; background: rgba(12,14,18,0.7); border: 1px solid var(--bl-line); border-radius: 4px; overflow: hidden; }
/* The window the compound wants to be in, drawn on the track so a burnout is
   something to judge rather than something to hold until the bar stops. */
.egt-band { position: absolute; top: 0; bottom: 0; background: rgba(52,199,89,0.28); box-shadow: inset 1px 0 0 rgba(52,199,89,0.9), inset -1px 0 0 rgba(52,199,89,0.9); pointer-events: none; }
.egt-bar { height: 100%; width: 0; background: #ffb020; transition: width 100ms linear; }
.egt-bar.on { background: #ff8a1f; }
.egt-bar.hot { background: var(--bl-warn); }
.hud-egt.tires { top: calc(var(--safe-top) + 100px); }
/* In the burnout the tire gauge is the whole game, so it gets big: the window
   to hit and the needle to hold in it, readable with a thumb over the pad. */
.hud-egt.tires, .hud-egt.tires .egt-track { transition: width 220ms ease, height 220ms ease, font-size 220ms ease; }
/* Anchored between the left gutter and the track map rather than centered on
   the screen: centered, a wide bar reaches under the map, and the map is 96px
   hard against the right edge. Bounded by the map's own gutter, it cannot
   touch it at any width. */
.hud-egt.tires.burnout { left: calc(var(--safe-left) + 10px); right: calc(var(--safe-right) + 112px); transform: none; font-size: 14px; letter-spacing: 0.16em; gap: 12px; }
.hud-egt.tires.burnout .egt-track { width: auto; flex: 1; max-width: 320px; height: 18px; border-radius: 9px; border-color: rgba(255,255,255,0.35); }
.egt-bar.tires { background: #8fd0ff; }
.egt-bar.tires.on { background: #34c759; }
/* Past the window: going off, and on a soft compound going off hard. */
.egt-bar.tires.cooked { background: var(--bl-warn); }
.tune-row .seg { justify-self: end; }
.hud-gauges { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 182px); display: flex; justify-content: space-between; align-items: flex-end; padding: 0 8px; }
.gauge { width: calc(118px * var(--gauge-scale, 1)); height: calc(118px * var(--gauge-scale, 1)); }
/* The speed, the unit and the gear, stacked and centered on each other.
   Letter spacing puts a gap after the last letter as well as between them, so
   MPH used to hang left of the number above it even though its box was dead
   center. The same indent is put back on the front, which is the only way to
   center spaced text on anything. A column rather than three blocks, so the
   three of them are centered on one another rather than each on the box. */
.hud-speed { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 6px; }
.hud-speed b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: calc(44px * var(--gauge-scale, 1)); line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.7); display: block; font-variant-numeric: tabular-nums; }
.hud-speed span { font-size: 11px; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--bl-muted); }
.hud-speed em { display: block; font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: calc(20px * var(--gauge-scale, 1)); color: var(--bl-orange); margin-top: 2px; font-variant-numeric: tabular-nums; }
.debug-panel { position: absolute; left: 10px; top: calc(var(--safe-top) + 110px); background: rgba(12,14,18,0.85); border: 1px solid var(--bl-orange); border-radius: 8px; padding: 6px 8px; font-family: var(--mono); font-size: 11px; width: 190px; }
.debug-panel div { display: flex; justify-content: space-between; gap: 6px; }
.debug-panel span { color: var(--bl-muted); }
.countdown { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 96px; font-weight: 900; font-family: var(--nums); font-variant-numeric: tabular-nums; color: var(--bl-orange); text-shadow: 0 4px 24px rgba(0,0,0,0.8); }
.countdown.go { color: var(--bl-ok); }
/* The card that says what to do on the line. It was nowrap with no width, so
   the sentence under BURNOUT ran off both edges of a phone and off both edges
   harder on a small one. The title is short; the sentence wraps. */
/* Who is in the other lane, for the whole pass: under the distance chip. */
.lane-card { position: absolute; left: 50%; z-index: 5; transform: translateX(-50%); top: calc(var(--safe-top) + 172px); display: flex; gap: 6px; align-items: center; background: rgba(12,14,18,0.7); border: 1px solid var(--bl-line); border-radius: 999px; padding: 3px 10px 3px 4px; font-size: 11px; color: var(--bl-muted); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.lane-card #lane-card-face:empty { display: none; }
.lane-card #lane-card-face:empty + b { margin-left: 6px; }
.lane-card .avatar.lane { width: 20px; height: 20px; margin: 0; }
.lane-intro .avatar.intro { width: 64px; height: 64px; margin: 2px 0 4px; border-color: var(--bl-orange); }
.lane-card b { color: var(--bl-text); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.lane-card em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; }
/* The lower third under the opening sweep. */
.lane-intro { position: absolute; left: calc(var(--safe-left) + 16px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-left: 3px solid var(--bl-orange); background: linear-gradient(90deg, rgba(12,14,18,0.9), rgba(12,14,18,0.4)); max-width: 78vw; animation: lane-in 260ms ease-out; }
.lane-intro small { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-orange); font-weight: 700; }
.lane-intro b { font-size: 26px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; }
.lane-intro span { font-size: 14px; color: var(--bl-text); }
.lane-intro em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--bl-muted); }
.lane-intro i { font-style: normal; font-size: 10px; color: var(--bl-muted); margin-top: 6px; letter-spacing: 0.08em; text-transform: uppercase; }
@keyframes lane-in { from { transform: translate(-16px, -50%); } to { transform: translate(0, -50%); } }
/* The burnout and stage instructions: a bar under the tree, never over it.
   The card they used to be sat at mid screen, which is where the tree's
   green lamps are. The tree is 148px tall from 27% down; the gauges and the
   pads take the bottom 300px, so on a short phone the bar tucks up to
   clear them instead. */
.race-msg { position: absolute; left: 50%; top: min(calc(27% + 154px), calc(100% - 348px)); z-index: 6; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: rgba(12,14,18,0.85); border: 1px solid var(--bl-line); padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-align: left; white-space: normal; width: min(92vw, 420px); box-sizing: border-box; }
/* On Highway Shutdown's flagged start the bar goes up in the sky, between the
   distance chip and the light, clear of the flagger (main.js showRaceMessage). */
.race-msg.sky { top: calc(var(--safe-top) + 170px); }
/* Past the learning passes a how-to bar is only its word: a small tag over
   the tree, not a sentence across the screen (main.js showRaceMessage). */
.race-msg.brief { width: auto; padding: 5px 14px; font-size: 13px; letter-spacing: 0.12em; }
.race-msg small { display: block; flex: 1; font-size: 11px; color: var(--bl-muted); font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; text-wrap: pretty; }
.drag-tree { position: absolute; left: 50%; top: 27%; transform: translateX(-50%) scale(0.72); transform-origin: top center; opacity: 0.95; transition: opacity 0.6s; display: flex; flex-direction: column; gap: 6px; background: rgba(12,14,18,0.85); padding: 8px; border-radius: 10px; border: 1px solid var(--bl-line); }
.drag-tree.fade { opacity: 0; }
.drag-tree i { width: 26px; height: 26px; border-radius: 50%; background: #2a2e35; display: block; }
.drag-tree i.on[data-light="stage"] { background: #f2f2f2; box-shadow: 0 0 12px #fff; }
.drag-tree i.on[data-light^="amber"] { background: #ffb020; box-shadow: 0 0 12px #ffb020; }
.drag-tree i.on[data-light="green"] { background: #30ff60; box-shadow: 0 0 14px #30ff60; }
.drag-tree i.on[data-light="red"] { background: #ff2020; box-shadow: 0 0 14px #ff2020; }
.btn.pause { position: absolute; right: calc(var(--safe-right) + 10px); top: calc(var(--safe-top) + 112px); pointer-events: auto; background: rgba(12,14,18,0.7); }

/* Touch controls */
.controls { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--safe-bottom) + 176px); pointer-events: none; }
.steer-zones { position: absolute; left: calc(var(--safe-left) + 8px); bottom: calc(var(--safe-bottom) + 10px); display: flex; gap: 8px; pointer-events: auto; }
.zone { width: 78px; height: 150px; border-radius: 14px; background: rgba(32,36,43,0.72); border: 1px solid var(--bl-line); display: flex; align-items: center; justify-content: center; color: var(--bl-muted); touch-action: none; }
.zone.active { background: rgba(255,90,31,0.5); color: #fff; }
.steer-slider { position: absolute; left: calc(var(--safe-left) + 10px); bottom: calc(var(--safe-bottom) + 10px); width: 40%; height: 64px; pointer-events: auto; display: none; touch-action: none; }
.slider-track { position: absolute; left: 0; right: 0; top: 22px; height: 20px; border-radius: 10px; background: rgba(32,36,43,0.8); border: 1px solid var(--bl-line); }
.slider-track i { position: absolute; left: 50%; top: -8px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: var(--bl-orange); }
#app[data-steer-mode="slider"] .steer-slider { display: block; }
#app[data-steer-mode="slider"] .steer-zones, #app[data-steer-mode="tilt"] .steer-zones { display: none; }
.pedals { position: absolute; right: calc(var(--safe-right) + 8px); bottom: calc(var(--safe-bottom) + 10px); display: flex; gap: 8px; align-items: flex-end; pointer-events: auto; }
.pedal { border-radius: 14px; border: 1px solid var(--bl-line); background: rgba(32,36,43,0.78); color: var(--bl-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: none; font-weight: 800; letter-spacing: 0.06em; }
.pedal span { font-size: 9px; color: var(--bl-muted); letter-spacing: 0.14em; }
/* The how-to line on the race pads goes once a player has the passes in (Game.tipsOn). */
.tips-off .drag-controls .pedal > span { display: none; }
.pedal b { font-size: 12px; }
.pedal.throttle { width: 86px; height: 150px; background: rgba(255,90,31,0.28); border-color: rgba(255,90,31,0.6); }
.pedal.brake { width: 64px; height: 110px; }
.pedal.kick { width: 60px; height: 84px; }
.pedal.active { background: rgba(255,90,31,0.75); color: #fff; }
/* The key on a pad, for anybody with a keyboard. Hidden on a phone: the page
   is marked keyboard=yes by a fine pointer with hover, or by a real keypress. */
.pedal kbd { display: none; margin-top: 3px; font: 700 9px var(--mono); letter-spacing: 0.08em; border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px; opacity: 0.75; }
[data-keyboard="yes"] .pedal kbd { display: inline-block; }
.keylist { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; font-size: 12px; }
.keylist kbd { font: 700 11px var(--mono); border: 1px solid var(--bl-line); border-radius: 4px; padding: 1px 6px; margin-right: 4px; color: var(--bl-text); }
.keylist small { display: block; color: var(--bl-muted); }
.keylist .keys { white-space: nowrap; }
.pedal.active span { color: #fff; }
.shift-col { display: none; flex-direction: column; gap: 6px; }
#app[data-manual="1"] .shift-col { display: flex; }
.pedal.small { width: 46px; height: 46px; font-size: 11px; }
/* Above the HUD. It had no stacking of its own, so the burnout banner and
   the staging card, which are on layer 6, painted straight over the pause
   card and buried Resume. Sits with the modals now, under the toasts. */
.pause-menu { position: absolute; inset: 0; background: rgba(8,10,14,0.78); display: flex; align-items: center; justify-content: center; pointer-events: auto; z-index: 20; }
.pause-card { background: var(--bl-ink); border: 1px solid var(--bl-line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; width: min(300px, 86vw); }
.pause-card h2 { text-align: center; text-transform: uppercase; letter-spacing: 0.1em; font-size: 18px; margin-bottom: 4px; }
/* A run that is bought and running says so before anybody walks out of it. */
.pause-warn { margin: 0 0 4px; padding: 10px 12px; border-left: 3px solid var(--bl-warn); background: rgba(214, 30, 59, 0.1); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.45; color: var(--bl-text); }

/* Results */
.results-card { background: var(--bl-paper); color: var(--bl-paper-ink); border-radius: 12px; padding: 16px; box-shadow: 0 8px 26px rgba(0,0,0,0.4); position: relative; overflow: hidden; }
.results-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--bl-orange) 0 20px, var(--bl-black) 20px 40px); }
.results-card h2 { font-size: 22px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
/* Who won and by how much, once, across the top. A slip is read for that one
   thing first and the card used to say it three times in three weights. */
.verdict { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  margin: 10px 0 2px; padding: 12px 14px; border-radius: 10px; border-left: 6px solid #9aa3ad; background: #ece8df; }
/* The one word the slip is read for, set big enough to be that. It was the
   same size as the track name above it, and the card read as a form. */
.verdict h2 { font-size: 30px; letter-spacing: 0.08em; line-height: 1; }
.verdict span { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; color: #4a5059; }
.verdict.win { border-left-color: #1f9d4d; background: #e6f3ea; }
.verdict.win h2 { color: #14612f; }
.verdict.lose { border-left-color: var(--bl-orange); background: #f7e6e8; }
.verdict.lose h2 { color: var(--bl-orange-dark); }
/* The header of a printed slip: the strip, the car and the unit set in a
   black band the way a real one carries the track's name, not a gray line. */
.results-card .sub { font-size: 11px; color: #d9d4c8; background: var(--bl-black); text-transform: uppercase; letter-spacing: 0.12em; padding: 9px 12px; margin: 2px -16px 0; font-weight: 700; }
.results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; margin-top: 12px; }
.results-grid div { border-top: 1px solid #d5d0c4; padding-top: 6px; }
.results-grid span { display: block; font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em; }
.results-grid b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 20px; }
/* One tone, one meaning. hl is the number the card is about, warn is what the
   pass cost you, good is what went your way. */
.results-grid b.hl { color: var(--bl-paper-ink); }
.results-grid b.warn { color: var(--bl-orange-dark); }
.results-grid b.good { color: #14612f; }
/* A heading inside the grid, so the block under the slip reads as how the pass
   went rather than as more result fields in the same weight. */
.results-head { border-top: none !important; padding-top: 10px !important; margin-top: 2px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #6b7280; font-weight: 800; }
/* A second line under a figure, for the cells where the number on its own does
   not say what it means. Kept off the mono face so it does not read as data. */
.results-grid b small { display: block; margin-top: 1px; font-family: var(--font); font-size: 11px; font-weight: 600; line-height: 1.35; color: #6b7280; letter-spacing: 0; }
.results-grid .wide { grid-column: 1 / -1; }
.results-grid .hbar span { text-transform: none; letter-spacing: 0; font-size: inherit; color: inherit; }
.results-grid .hbar .hbar-top { display: flex; align-items: baseline; justify-content: space-between; }
.results-grid .hbar .hbar-label { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em; }
.results-grid .hbar .hbar-pct { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; color: var(--bl-paper-ink); }
.results-grid .hbar.mid .hbar-pct { color: #9a5b00; }
.results-grid .hbar.low .hbar-pct { color: var(--bl-orange-dark); }
/* The bar: ten segments, the life left filled, the pass's bite in red. */
.results-grid .hbar .hbar-track { position: relative; display: block; height: 16px; margin: 4px 0 5px; border-radius: 4px; overflow: hidden; background: #e4dfd3; box-shadow: inset 0 1px 2px rgba(0,0,0,0.18); }
.results-grid .hbar .hbar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--now); border-radius: 4px 0 0 4px; background: linear-gradient(180deg, #3ad070, #1f9d55); animation: hbar-drain 0.9s 0.35s ease-out both; }
.results-grid .hbar.mid .hbar-fill { background: linear-gradient(180deg, #ffc44d, #e08a00); }
.results-grid .hbar.low .hbar-fill { background: linear-gradient(180deg, #ff5a6e, #c4162f); }
.results-grid .hbar .hbar-lost { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(214,30,59,0.85) 0 5px, rgba(214,30,59,0.55) 5px 10px); animation: hbar-hit 1.2s 1.2s ease-in-out 2; }
.results-grid .hbar .hbar-track::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(255,255,255,0.75) calc(10% - 2px) 10%); pointer-events: none; }
.results-grid .hbar .hbar-why { display: block; font-family: var(--font); font-size: 11.5px; font-weight: 600; line-height: 1.35; color: #6b7280; }
.results-grid .hbar .hbar-why b { font-family: inherit; font-size: inherit; color: var(--bl-orange-dark); }
/* The fix, on the slip: the garage's job and price, under the part's why. */
.results-grid .hbar .hbar-fix { display: flex; justify-content: flex-end; margin-top: 6px; }
.results-grid .hbar .hbar-fix .btn { min-height: 34px; }
.results-grid .hbar .hbar-done { font-family: var(--font); font-size: 12px; font-weight: 700; color: #1f9d55; }
.results-grid .hbar.fixed .hbar-why { opacity: 0.55; }
/* Where the pass leaves the player in this car alone. */
.results-card .car-rank { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,0.05); font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--bl-paper-ink); }
.results-card .car-rank.top { background: rgba(214,30,59,0.09); box-shadow: inset 3px 0 0 var(--bl-orange-dark); }
.results-card .car-rank[hidden] { display: none; }
@keyframes hbar-drain { from { width: var(--was); } to { width: var(--now); } }
@keyframes hbar-hit { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .results-grid .hbar .hbar-fill, .results-grid .hbar .hbar-lost { animation: none; } }
.slip { width: 100%; border-collapse: collapse; margin-top: 6px; font-family: var(--mono); font-size: 14px; }
.slip th { text-align: left; font-weight: 600; color: #6b7280; font-size: 11px; letter-spacing: 0.08em; padding: 3px 0; width: 22%; }
.slip td { text-align: right; padding: 4px 0 4px 8px; border-bottom: 1px dashed #d5d0c4; }
/* Every other row tinted, so the eye runs across a row and not down a column
   of near identical numbers, and the finish row set off with a solid rule. */
.slip tbody tr:nth-child(even) th, .slip tbody tr:nth-child(even) td { background: rgba(0,0,0,0.03); }
.slip tbody tr:has(b) th, .slip tbody tr:has(b) td { border-top: 2px solid #b9b3a6; border-bottom: 2px solid #b9b3a6; padding: 7px 0 7px 8px; }
.slip tbody tr:has(b) td { font-size: 22px; font-weight: 800; }
.slip .slip-car { display: block; font-size: 9px; letter-spacing: 0.04em; color: var(--bl-muted); text-transform: none; }
.slip thead td { font-size: 10px; letter-spacing: 0.1em; color: #6b7280; border-bottom: 2px solid #d5d0c4; }
.slip b.hl { color: var(--bl-orange-dark); }
/* The lane that won, marked on the column rather than on the numbers. Coloring
   numbers put the same red on the time you ran and the time that beat it. */
.slip td.lane-win { background: rgba(31, 157, 77, 0.10); }
.slip thead td.lane-win { color: #14612f; }
.slip tbody td.lane-win { font-weight: 700; }
.slip .lane-flag { display: block; font-size: 9px; letter-spacing: 0.12em; color: #1f9d4d; font-weight: 800; line-height: 1.2; }
.slip thead td { vertical-align: bottom; }
/* The night's weather, printed under the numbers the way a timing system
   prints it, and a sentence saying what kind of night it is. Wraps rather
   than cuts: every item stays whole on a narrow phone. */
.slip-wx { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #d5d0c4; font-family: var(--mono); }
.slip-wx-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; color: #374151; }
.slip-wx-line span { white-space: nowrap; }
.slip-wx-line i { font-style: normal; font-size: 10px; letter-spacing: 0.08em; color: #6b7280; }
.slip-wx-row { margin: 5px 0 0; font-family: var(--font); font-size: 12.5px; line-height: 1.35; color: #374151; }
.slip-wx-row b { display: inline-block; min-width: 58px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #111827; }
.slip-wx-how { display: block; margin: 8px 0 0; padding: 0; border: 0; background: none; font: 700 12px/1.3 var(--font); color: var(--bl-orange-dark, #b45309); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
.slip-wx-says { margin: 5px 0 0; font-family: inherit; font-size: 12px; line-height: 1.35; color: #4b5563; }
.slip-wx.slow .slip-wx-says { color: #9a3412; font-weight: 600; }
.slip-wx.quick .slip-wx-says { color: #14612f; font-weight: 600; }
.slip-wx.perfect .slip-wx-line { font-size: 11px; letter-spacing: 0.08em; color: #14612f; font-weight: 700; }
.results-card .earned { margin-top: 12px; font-weight: 800; color: var(--bl-orange-dark); font-family: var(--nums); font-variant-numeric: tabular-nums; }
.results-card .rank { margin-top: 6px; font-size: 13px; }
.results-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.results-actions .btn.wide { grid-column: 1 / -1; }
.results-links { display: flex; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.results-links .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; font-size: 13px; letter-spacing: 0; }
#garage-race.rerun { background: var(--bl-orange); }

/* Leaderboard */
/* Five of these in a row is a desktop shape. Split five ways a phone gives
   each one about 45px of text inside the select, which is where "All cars"
   became "All c" and "Quickest time" became "Quic" - and unlike a name there
   is no tooltip and no tapping through to find out what it said. A basis
   rather than a share means as many fit per row as actually fit: three on a
   phone, all five across once there is room for them. */
/* The board's filters: the home screen's eyebrow over a pill, two to a row
   on a phone rather than five boxes of different widths. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.filters label { flex: 1 1 130px; min-width: 0; font-size: 11px; font-weight: 800; color: var(--bl-muted); text-transform: uppercase; letter-spacing: 0.14em; display: flex; flex-direction: column; gap: 4px; }
.filters select { min-height: 40px; border-radius: 999px; padding: 8px 14px; border-color: var(--bl-line-2, #333a44); }
.filters select { text-overflow: ellipsis; }
select, input[type="text"], input[type="number"], textarea, input:not([type]) { width: 100%; background: var(--bl-panel); color: var(--bl-text); border: 1px solid var(--bl-line); border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 14px; }
.lb-table { display: flex; flex-direction: column; gap: 4px; }
.lb-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 12px; padding: 9px 11px; min-height: 46px; font-size: 13px; }
.lb-note { margin: 0 0 8px; }
.lb-row.head { background: transparent; border: 0; min-height: 0; color: var(--bl-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; }
.lb-row.me { border-color: var(--bl-orange); }
.lb-row .rank { font-family: var(--nums); font-variant-numeric: tabular-nums; color: var(--bl-muted); }
.lb-row .name { font-family: var(--nums); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: 0.1em; }
.lb-row .time { font-family: var(--nums); font-variant-numeric: tabular-nums; text-align: right; }
.lb-row .time small, .lb-mine .time small { display: block; font-size: 10px; color: var(--bl-muted); font-family: var(--font); }
/* The night a strip time was run on, under the time: the prep in a word and
   a color, so a slick night's time reads as the run it was. */
.lb-row .time .prep-tag, .lb-mine .time .prep-tag { display: block; margin-top: 2px; font: 700 9px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; color: var(--bl-muted); }
:is(.lb-row, .lb-mine) .time .prep-tag.prep-prime { color: #34d399; }
:is(.lb-row, .lb-mine) .time .prep-tag.prep-good { color: #a3c75a; }
:is(.lb-row, .lb-mine) .time .prep-tag.prep-fair { color: #f5b041; }
:is(.lb-row, .lb-mine) .time .prep-tag.prep-slick { color: #fb923c; }
.lb-row .time .prep-tag.air, .lb-mine .time .prep-tag.air { margin-top: 0; font-weight: 600; color: var(--bl-muted); }
.lb-empty { color: var(--bl-muted); font-size: 13px; padding: 20px 0; text-align: center; }

/* About */
.about-card { background: var(--bl-paper); color: var(--bl-paper-ink); border-radius: 12px; padding: 18px; box-shadow: 0 8px 26px rgba(0,0,0,0.4); }
.about-card h2 { font-size: 22px; text-transform: uppercase; letter-spacing: 0.06em; }
.about-card p { font-size: 14px; line-height: 1.5; margin-top: 10px; }
.about-card .addr { font-family: var(--mono); font-size: 14px; line-height: 1.6; margin-top: 12px; border-left: 4px solid var(--bl-orange); padding-left: 12px; }
.about-card .addr a { color: var(--bl-orange-dark); text-decoration: none; font-weight: 700; }
.about-card .btn { margin-top: 14px; width: 100%; }

/* The shop's three links, equal and on one row, rather than two and a half. */
.about-links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: 12px 0 4px; }
.about-links .btn { width: 100%; justify-content: center; gap: 6px; padding-left: 6px; padding-right: 6px; }

/* About: the rules, one mode a tap deep, shut until they are wanted. */
.rule-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.rule-block { border: 1px solid rgba(0,0,0,0.14); border-radius: 12px; background: rgba(0,0,0,0.025); overflow: hidden; }
.rule-block > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; cursor: pointer; list-style: none; min-height: 44px; }
.rule-block > summary::-webkit-details-marker { display: none; }
.rule-block > summary::after { content: ''; flex: none; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid rgba(0,0,0,0.45); border-bottom: 2px solid rgba(0,0,0,0.45); transform: rotate(45deg) translate(-2px, -2px); transition: transform 140ms ease; }
.rule-block[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.rule-block > summary b { font-size: 15px; font-weight: 800; color: var(--bl-paper-ink); }
.rule-block > summary span { font-size: 12.5px; color: rgba(27,29,34,0.6); }
.rule-block[open] > summary { border-bottom: 1px solid rgba(0,0,0,0.12); background: rgba(0,0,0,0.03); }
.about-rules { margin: 0; padding: 12px 16px 14px 30px; display: flex; flex-direction: column; gap: 9px; }
.about-rules li { font-size: 13.5px; line-height: 1.5; }
.about-rules li b { color: var(--bl-paper-ink); }

/* Settings */
.settings { display: flex; flex-direction: column; gap: 6px; }
/* Four tabs across the top of Settings, because one scroll of everything the
   game can be told to do was too much to read. The strip scrolls sideways on
   a narrow phone rather than wrapping into two rows. */
.settings-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--bl-line); scrollbar-width: none; }
.settings-tabs::-webkit-scrollbar { height: 0; }
.settings-tabs .btn { flex: 0 0 auto; min-height: 38px; padding: 6px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.settings-tabs .btn.on { background: var(--bl-orange); border-color: transparent; color: #fff; }
.settings-panel { display: flex; flex-direction: column; gap: 6px; }
.settings-panel[hidden] { display: none; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; padding: 10px 12px; min-height: 54px; }
.setting label { font-size: 14px; font-weight: 700; }
.setting small { display: block; font-size: 11px; color: var(--bl-muted); font-weight: 400; margin-top: 2px; }
.setting .seg { display: flex; gap: 4px; }
/* On a phone a row of three or four buttons left the words beside it a word
   or two wide, a dozen lines tall: the words take the width, the buttons go
   under them across the row. */
@media (max-width: 560px) {
  .setting:has(> .seg > :nth-child(3)) { flex-wrap: wrap; }
  .setting:has(> .seg > :nth-child(3)) > label { flex: 1 1 100%; }
  .setting:has(> .seg > :nth-child(3)) > .seg { flex: 1 1 100%; }
  .setting:has(> .seg > :nth-child(3)) > .seg > * { flex: 1 1 0; }
}
.seg .btn { min-height: 34px; padding: 4px 12px; font-size: 12px; border-radius: 999px; border-color: var(--bl-line-2, #333a44); }
.seg .btn.on { background: var(--bl-orange); border-color: transparent; color: #fff; }
.name-ways { display: flex; gap: 6px; }
.name-ways .btn { flex: 1; min-height: 40px; font-size: 13px; }
.name-ways[hidden] { display: none; }

/* Editor */
.screen.editor { background: #0f1115; overflow-y: auto; touch-action: pan-y; }
.editor-body { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .editor-body { grid-template-columns: 1.2fr 1fr; } }
.editor-graph-wrap { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; padding: 8px; }
#editor-graph { width: 100%; height: 280px; display: block; touch-action: none; border-radius: 6px; background: #14171c; }
.editor-estimates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.editor-estimates div { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 8px; padding: 6px 8px; }
.editor-estimates span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bl-muted); }
.editor-estimates b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 15px; }
.editor-tools { display: flex; flex-direction: column; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bl-muted); }
.field.inline { flex-direction: row; align-items: center; justify-content: space-between; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--bl-text); padding: 6px 0; border-bottom: 1px solid var(--bl-line); gap: 10px; }
.field.inline input, .field.inline select { width: 50%; }
.field.inline input[type="range"] { width: 45%; accent-color: var(--bl-orange); }
.field.inline output { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--bl-orange); min-width: 44px; text-align: right; }
.field.inline small { display: block; font-size: 10px; color: var(--bl-muted); }
.editor-right { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; padding: 10px 12px; }
.editor-right h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bl-orange); margin: 14px 0 2px; }
.editor-right h3:first-child { margin-top: 0; }
/* What a group of numbers decides, under its heading. */
.editor-about { margin: 0 0 6px; font-size: 11.5px; line-height: 1.4; }
/* A field is labeled the way you would say it; the key it carries in the file
   sits under it in small type for whoever is writing one. */
.field.inline span { flex: 1 1 auto; min-width: 0; }
.field.inline i { font-style: normal; color: var(--bl-muted); font-size: 11px; font-family: var(--nums); font-variant-numeric: tabular-nums; }
.field.inline code { display: block; font-family: var(--mono); font-size: 9.5px; color: #5c626b; letter-spacing: 0; margin-top: 1px; }
/* What the bench is, and what it is not, before anything is dragged. */
.editor-note { font-size: 12.5px; line-height: 1.5; color: var(--bl-muted); background: #14171c; border: 1px solid var(--bl-line); border-left: 3px solid var(--bl-orange); border-radius: 0 10px 10px 0; padding: 10px 14px; margin-bottom: 12px; }
.editor-note code { font-family: var(--mono); font-size: 11.5px; color: var(--bl-text); }
.editor-compare-list { display: flex; gap: 6px; flex-wrap: wrap; }
.editor-compare-list .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid; background: rgba(0,0,0,0.3); }
.editor-compare-list .chip button { background: none; border: 0; color: inherit; font-weight: 800; }
.editor-head-actions { display: flex; gap: 6px; }
.error-list { color: var(--bl-warn); font-size: 12px; }

/* The eye on a password field. A password typed blind on a phone keyboard that
   has already autocapitalized the first letter is a password nobody can tell
   is wrong, so every one of them can be looked at. The button sits inside the
   field's own box rather than beside it, so the row does not grow a column. */
.pw { position: relative; display: block; }
.pw > input { width: 100%; padding-right: 44px; }
.pw > .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--bl-muted); }
.pw > .eye:active { color: var(--bl-orange); }
.pw > .eye[aria-pressed="true"] { color: var(--bl-orange); }
.pw > .eye svg { width: 20px; height: 20px; display: block; }

/* Modal and toast */
/* A card is centered on what can be seen, not on what the page is.
   #app is fixed to the layout viewport, and on a phone that runs on behind
   the browser's own bar and the gesture bar at the foot of the screen. A card
   centered in it hangs below both, which is how the pre-race sheet ended with
   its last slider and its buttons somewhere under the chrome. 100dvh is the
   part that is actually on screen, and it follows the bar as it comes and
   goes. A browser that does not know dvh keeps the old behavior. */
.modal { position: absolute; inset: 0; background: rgba(8,10,14,0.8); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 20px; padding-top: max(20px, var(--safe-top)); padding-bottom: max(20px, var(--safe-bottom)); }
.modal { height: 100dvh; }
/* The face picker opens from the profile as well as from Settings, so it sits
   above every other card: it came before the profile in the markup and opened
   behind it, out of sight. */
#modal-avatar { z-index: 21; }
.modal-card { background: var(--bl-ink); border: 1px solid var(--bl-line); border-radius: 14px; padding: 20px; width: min(340px, 92vw); display: flex; flex-direction: column; gap: 10px; }
.modal-card h2 { font-size: 18px; text-transform: uppercase; letter-spacing: 0.08em; }
#name-input { font-family: var(--font, system-ui, sans-serif); font-size: 22px; font-weight: 700; text-align: center; letter-spacing: 0.02em; }
/* The email and password sit under the name as one block, so setting up a
   racer reads as one thing to do rather than three. */
#name-account { display: flex; flex-direction: column; gap: 8px; }
#name-account input { padding: 11px 12px; border-radius: 10px; border: 1px solid var(--bl-line); background: #0e1116; color: var(--bl-text); font: inherit; font-size: 16px; }
/* Under the header, where the eye is. It used to sit at the bottom, over
   the buttons, and a message about a motor that had let go went unread. */
.toast { position: absolute; left: 50%; top: calc(var(--safe-top) + 74px); transform: translateX(-50%); animation: toast-in 180ms ease-out; background: var(--bl-ink); border: 1px solid var(--bl-orange); color: var(--bl-text); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; z-index: 30; max-width: 90vw; text-align: center; }
/* A slide only, no fade: a phone that is busy drawing the garage can sit
   on an animation's first frame for a while, and the first frame of a fade
   is nothing. */
@keyframes toast-in { from { transform: translate(-50%, -8px); } to { transform: translate(-50%, 0); } }
@keyframes toast-in-left { from { transform: translate(0, -8px); } to { transform: translate(0, 0); } }
/* On the race screen a toast drops into the gap under the tree's message,
   clear of the clocks, the bars and the gauges. */
.toast.race { top: calc(27% + 230px); }
.toast.tappable { cursor: pointer; pointer-events: auto; background: var(--bl-orange); color: #101216; border-color: var(--bl-orange); }
.loading { position: absolute; inset: 0; background: var(--bl-black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 40; color: var(--bl-muted); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--bl-line); border-top-color: var(--bl-orange); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Landscape phones: tighten the vertical budget. */
@media (max-height: 460px) {
  .gauge { width: calc(84px * var(--gauge-scale, 1)); height: calc(84px * var(--gauge-scale, 1)); }
  .hud-gauges { bottom: calc(var(--safe-bottom) + 120px); }
  .controls { height: calc(var(--safe-bottom) + 118px); }
  .zone { height: 100px; width: 70px; }
  .pedal.throttle { height: 100px; }
  .pedal.brake { height: 80px; }
  .pedal.kick { height: 64px; }
  #app { --garage-stage: 24vh; }
}

/* Landscape: the garage panel becomes a side sheet so the turntable keeps the left half. */
@media (orientation: landscape) and (min-width: 640px) {
  .turntable { right: 54%; top: calc(var(--safe-top) + 60px); height: auto; bottom: 0; }
  /* Its contents keep clear of a notch on the right; the panel itself still
     runs to the edge. */
  .garage-panel { left: 46%; top: calc(var(--safe-top) + 60px); border-radius: 18px 0 0 0; border-left: 1px solid var(--bl-line); padding-right: var(--safe-right); }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  /* Centered at 900 at most, inside the menu's own side margins: width 100%
     on top of those margins ran 28 px past the right edge. */
  .screen.menu > .menu-grid, .screen.menu > .menu-conditions, .screen.menu > .menu-upnext { width: calc(100% - 28px - var(--safe-left) - var(--safe-right)); max-width: 900px; margin-left: auto; margin-right: auto; }
  .screen.sheet > .sheet-head, .track-list, .results-card, .results-actions, .results-links, .about-card, .settings, .filters, .lb-table, .loadout { max-width: 900px; margin-left: auto; margin-right: auto; width: 100%; }
  .screen.sheet > .sheet-head { margin-bottom: 12px; }
}

/* Drag strip layout: LAUNCH and SHIFT replace steering and pedals. */
.drag-controls { position: absolute; left: calc(var(--safe-left) + 10px); right: calc(var(--safe-right) + 10px); bottom: calc(var(--safe-bottom) + 12px); display: none; gap: 12px; pointer-events: auto; }
#app[data-layout="drag"] .drag-controls { display: flex; }
#app[data-layout="drag"] .steer-zones, #app[data-layout="drag"] .steer-slider, #app[data-layout="drag"] .pedals { display: none; }
/* A piece the player has placed: pinned to the window where they put it, and
   out of whatever row or centering the stylesheet had it in. */
.placed { position: absolute !important; right: auto !important; bottom: auto !important; margin: 0 !important; flex: none !important; z-index: 3; }
/* Placed pieces live in a layer of their own over the whole screen, so no
   container's own transform or row has a say in where they land. The pads
   keep taking touches there, and keep to the strip and stay out of a replay. */
#hud-placed { position: absolute; inset: 0; pointer-events: none; }
#hud-placed .pedal { pointer-events: auto; }
#app:not([data-layout="drag"]) #hud-placed .pedal { display: none !important; }
#app[data-replay="on"] #hud-placed { display: none; }
.arr-guide { position: fixed; background: var(--bl-orange); pointer-events: none; z-index: 22; box-shadow: 0 0 6px rgba(214,30,59,0.8); }
.arr-guide.v { width: 2px; top: 0; height: 100vh; }
.arr-guide.h { height: 2px; left: 0; width: 100vw; }
.hud-egt.tires.placed, .hud-egt.tires.burnout.placed { max-width: none; }
/* The arrange screen: the strip as it is, the pads switched off, a box round every piece. */
.arranging [data-control] { pointer-events: none !important; }
/* No pulsing on the arrange screen: a pad that breathes cannot be measured or placed. */
.arranging .pulse { animation: none !important; transform: none !important; }
.arranging .pause, .arranging .race-msg, .arranging .drag-info, .arranging .lane-card { display: none !important; }
.arrange { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.arrange-bar { position: absolute; left: 50%; top: calc(var(--safe-top) + 150px); transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: rgba(12,14,18,0.92); border: 1px solid var(--bl-orange); border-radius: 12px; padding: 10px 14px; pointer-events: auto; width: max-content; max-width: min(720px, calc(100vw - 24px)); z-index: 22; }
/* The words take the row and the buttons drop under them on a phone: side
   by side, three buttons left the words a column one word wide, and the
   card ran most of the way down the screen. */
.arrange-bar > div:first-child { flex: 1 1 240px; min-width: 0; }
.arrange-acts { margin-left: auto; }
.arrange-bar b { display: block; font-size: 14px; }
.arrange-bar small { display: block; font-size: 11px; color: var(--bl-muted); line-height: 1.35; }
.arrange-acts { display: flex; gap: 6px; flex: none; }
.arr-box { position: fixed; border: 2px dashed rgba(255,255,255,0.7); border-radius: 8px; box-sizing: border-box; pointer-events: auto; cursor: move; touch-action: none; z-index: 21; background: rgba(214,30,59,0.06); }
.arr-box:hover, .arr-box:active { border-color: var(--bl-orange); background: rgba(214,30,59,0.14); }
.arr-box span { position: absolute; left: 0; top: -18px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--bl-orange); border-radius: 4px; padding: 1px 6px; pointer-events: none; }
.arr-knob { position: absolute; right: -9px; bottom: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--bl-orange); border: 2px solid #fff; cursor: nwse-resize; touch-action: none; }
/* Index racing: three cards, and the ladder. */
.index-card { background: var(--bl-ink); border: 1px solid var(--bl-line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.index-head { display: flex; align-items: baseline; gap: 8px; }
.index-head b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; }
.index-head span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); }
.index-head em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--bl-orange); font-family: var(--nums); font-variant-numeric: tabular-nums; }
.index-card.done { border-color: rgba(52, 199, 89, 0.55); }
.index-card.in { border-color: rgba(214, 30, 59, 0.55); }
/* The state strip under the index: open, so many runs in, or done with a
   check. The pips are the three runs, filled as they go in. */
.index-strip { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; min-height: 20px; }
.index-state { display: inline-flex; align-items: center; gap: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
/* The gap belongs to the icon, not between every word. As a flex gap it split
   "Open, 10 in today" into three items with six pixels between each. */
.index-state svg { margin-right: 6px; }
.index-state.open { color: var(--bl-muted); font-weight: 600; }
.index-state.off { color: var(--bl-muted); font-weight: 600; }
.index-state.in { color: var(--bl-text); }
.index-state.done { color: var(--bl-ok); }
.index-state.done svg { width: 16px; height: 16px; }
/* The night's clock, on the day: read to the second, in the numbers face, and
   wide enough per digit that it does not jitter as it counts. */
.night-clock { font-family: var(--nums); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.index-state .night-clock { font-size: 14px; margin: 0 4px; }
.index-state.in .night-clock { color: var(--bl-accent, var(--bl-text)); }
.index-pips { display: inline-flex; gap: 4px; }
.index-pips i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bl-orange); box-sizing: border-box; }
.index-pips i.on { background: var(--bl-orange); }
.index-facts { font-size: 12px; color: var(--bl-muted); margin: 4px 0 8px; line-height: 1.4; }
/* The action on top, full width; the two boards as an even pair under it. */
.mode-card .row.index-actions { display: grid; grid-template-columns: 1fr; gap: 6px; }
.index-actions .btn { min-height: 38px; padding: 6px 10px; font-size: 13px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.index-boards .btn { font-size: 12px; padding: 6px 6px; }
.index-facts b { color: var(--bl-text); }
.index-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.index-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; background: var(--bl-ink); border: 1px solid var(--bl-line); border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.index-row.mine { border-color: var(--bl-orange); }
.index-row .place { font-family: var(--nums); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--bl-muted); }
.index-row .place.top { color: var(--bl-orange); }
.index-row small { display: block; color: var(--bl-muted); font-size: 10px; }
.index-row .entry { font-family: var(--nums); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* The ET and the light under the package, which is what a tie is settled on. */
.index-row .entry small { display: block; color: var(--bl-dim); font-size: 10px; margin-top: 1px; }
.index-row .entry.bad { color: #ff8a8a; }
.index-ladder { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0; }
.index-round { display: flex; flex-direction: column; justify-content: space-around; gap: 6px; min-width: 130px; }
.index-round h4 { margin: 0; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); }
.index-pair { background: var(--bl-ink); border: 1px solid var(--bl-line); border-radius: 6px; font-size: 11px; }
.index-pair span { display: block; padding: 3px 8px; color: var(--bl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.index-pair span.win { color: var(--bl-text); font-weight: 700; }
.index-pair span + span { border-top: 1px solid var(--bl-line); }
/* The latest races between friends. */
.match-list { display: flex; flex-direction: column; gap: 6px; }
.match-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: var(--bl-ink); border: 1px solid var(--bl-line); border-radius: 8px; padding: 6px 10px; }
.match-lane { display: flex; flex-direction: column; min-width: 0; }
.match-lane:last-child { text-align: right; }
.match-lane b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-lane small { font-size: 10px; color: var(--bl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-lane i { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--bl-muted); }
.match-lane.won b { color: var(--bl-orange); }
.match-lane.won i { color: var(--bl-text); }
.match-vs { display: flex; flex-direction: column; align-items: center; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-muted); }
.match-vs small { font-size: 9px; letter-spacing: 0; text-transform: none; }
/* Replay: the towers get a clean picture, so everything but the strip bar goes. */
#app[data-replay="on"] .hud-top, #app[data-replay="on"] .hud-gauges, #app[data-replay="on"] .hud-egt,
#app[data-replay="on"] .controls, #app[data-replay="on"] .drag-info, #app[data-replay="on"] .pause,
#app[data-replay="on"] .hud-status, #app[data-replay="on"] .drag-tree, #app[data-replay="on"] .drag-controls { display: none; }
/* The bar wraps rather than pushing its last button off the side of the phone.
   Kirk had a replay he could not get out of, because Close had been shoved off
   the right edge by everything in front of it. Nothing in here refuses to
   shrink now, and if it still will not fit on one line it takes two. */
/* The view from the stands (game.openStands): what is racing, the camera,
   and both lanes as they run, then their slips. */
.stands-bar { position: absolute; left: calc(var(--safe-left) + 10px); right: calc(var(--safe-right) + 10px); bottom: calc(var(--safe-bottom) + 14px); display: flex; flex-direction: column; gap: 6px; background: rgba(12,14,18,0.84); border: 1px solid var(--bl-line); border-radius: 10px; padding: 8px 10px; pointer-events: auto; max-width: 560px; margin: 0 auto; }
.stands-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stands-head b { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stands-head #stands-station { font-size: 10px; letter-spacing: 0.12em; color: var(--bl-muted); white-space: nowrap; }
.stands-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; color: #fff; background: var(--bl-red); border-radius: 4px; padding: 3px 6px; }
.stands-lanes { display: flex; flex-direction: column; gap: 4px; }
.stands-lane { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,0.04); }
.stands-lane i { font-style: normal; font-size: 10px; font-weight: 800; color: var(--bl-muted); width: 12px; text-align: center; }
.stands-lane span { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.stands-lane b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stands-lane small { font-size: 11px; color: var(--bl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stands-lane em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.stands-lane.won { background: rgba(34,197,94,0.16); box-shadow: inset 2px 0 0 #22c55e; }
.stands-lane.won b { color: #4ade80; }
.stands-bar #stands-leave { align-self: flex-end; padding: 6px 12px; }
.replay-bar { position: absolute; left: calc(var(--safe-left) + 10px); right: calc(var(--safe-right) + 10px); bottom: calc(var(--safe-bottom) + 14px); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 10px; background: rgba(12,14,18,0.82); border: 1px solid var(--bl-line); border-radius: 10px; padding: 8px 10px; pointer-events: auto; }
/* The station name gives way first: it is the one thing here that is only a
   label, so it shrinks and ellipses instead of holding the buttons out. */
.replay-bar b { font-size: 12px; letter-spacing: 0.1em; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-bar .replay-tag, .replay-bar .replay-read, .replay-bar .btn { flex: 0 0 auto; }
.replay-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; color: #fff; background: var(--bl-orange); border-radius: 4px; padding: 3px 6px; }
.replay-read { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; }
.replay-read i { font-style: normal; }
.replay-read i:last-child { color: var(--bl-muted); font-size: 10px; }
.replay-bar .btn { padding: 6px 12px; }
.replay-bar .btn.icon { padding: 5px 8px; }
/* Scrubbing a pass: wide enough to find a moment, and it gives the bar its
   whole width on a phone rather than squeezing the readout. */
.replay-scrub { flex: 1 1 120px; min-width: 90px; accent-color: var(--bl-orange); height: 26px; }
@media (max-width: 520px) { .replay-scrub { flex-basis: 70px; min-width: 60px; } }
/* Recording: a red tag that breathes, in place of the Save button. */
/* The shop's angle row: every station as a chip, scrolling sideways on a phone,
   the one in use lit. It takes the whole width under the bar's own row. */
.replay-cams { flex: 1 1 100%; display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-top: 2px; }
.replay-cams::-webkit-scrollbar { display: none; }
.replay-cams .btn { flex: 0 0 auto; padding: 5px 10px; font-size: 11px; letter-spacing: 0.08em; }
.replay-cams .btn[aria-pressed="true"] { background: var(--bl-orange); border-color: var(--bl-orange); color: #fff; }
.replay-bar #replay-cam { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.replay-rec { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; color: #fff; background: #c8102e; border-radius: 4px; padding: 3px 6px; animation: rec-breathe 1.2s ease-in-out infinite; }
@keyframes rec-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
#video-preview { width: 100%; max-height: 42vh; border-radius: 10px; background: #000; margin: 10px 0 4px; }
.pedal.launch, .pedal.shift { flex: 1; height: 150px; font-size: 22px; }
.pedal.launch { background: rgba(214,30,59,0.32); border-color: rgba(214,30,59,0.75); }
.pedal.shift { background: rgba(52,199,89,0.22); border-color: rgba(52,199,89,0.6); }
.pedal.launch b, .pedal.shift b { font-size: 24px; }
/* Pressed.
   A thumb covers the middle of the pad, so a signal put on the label is a
   signal nobody sees: only the letters lit up, and on the launch and shift pads
   not even that, because their own color was declared after the pressed one
   and quietly won. The whole pad lights instead, from the edges in, and shrinks
   under the finger the way a real button does. */
.pedal.active { background: rgba(255,90,31,0.9); border-color: rgba(255,170,120,0.95); color: #fff; transform: scale(0.965); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8), 0 0 22px rgba(255,120,50,0.6); }
.pedal.active span, .pedal.active b { color: #fff; }
.pedal.launch.active { background: rgba(214,30,59,0.95); border-color: rgba(255,150,170,0.95); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85), 0 0 26px rgba(214,30,59,0.75); }
.pedal.shift.active { background: rgba(52,199,89,0.92); border-color: rgba(170,255,195,0.95); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85), 0 0 26px rgba(52,199,89,0.7); }
.pedal.brake.active { background: rgba(214,30,59,0.85); border-color: rgba(255,150,170,0.9); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8), 0 0 22px rgba(214,30,59,0.6); }
.drag-tree b { display: flex; gap: 4px; justify-content: center; }
.drag-tree b i { width: 11px; height: 11px; }
.drag-tree i.on[data-light="prestage"], .drag-tree i.on[data-light="stage"] { background: #ffd020; box-shadow: 0 0 8px #ffd020; }
/* Kept clear of the pause button in the corner, and allowed to wrap rather than
   run out under it: a career event name and a rival's name together are longer
   than a phone is wide. */
.drag-info { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 128px); background: rgba(12,14,18,0.8); border: 1px solid var(--bl-line); border-radius: 8px; padding: 6px 12px; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--bl-muted); white-space: normal; text-align: center; line-height: 1.4; max-width: calc(100vw - var(--bl-corner) * 2 - 16px); box-sizing: border-box; }
.drag-info b { color: var(--bl-text); }
.drag-modes { display: flex; flex-direction: column; gap: 10px; }
/* The mode tabs: one row that scrolls sideways rather than wrapping, so six
   of them fit a phone without stacking. */
/* The modes as a row of chips rather than underlined tabs: the same pill
   the garage's class filter and the menu's chips use, the one you are on
   filled red. It scrolls sideways when there are more than fit. */
.drag-tabs { flex: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 2px 0 10px; padding: 2px 0; border-bottom: 0; }
.drag-tabs::-webkit-scrollbar { display: none; }
.drag-tabs .tab { flex: none; min-height: 34px; padding: 0 13px; white-space: nowrap; border: 1px solid var(--bl-line-2, #333a44); border-radius: 999px; background: var(--bl-panel); color: var(--bl-muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; }
.drag-tabs .tab.active { background: var(--bl-orange); border-color: transparent; color: #fff; box-shadow: none; }
/* Where the strip is raced: two tiles side by side above the modes, each a
   little painted sky so the pick is visible before it is read. */
/* The place a career rung is raced at, beside its class. */
.venue-chip { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--bl-muted); border: 1px solid var(--bl-line-2, #333a44); border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.champ-list { display: flex; flex-direction: column; gap: 10px; }
.venue-pick { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 8px; }
.venue-tile { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 10px; text-align: left; border: 1px solid var(--bl-line-2, #333a44); border-radius: 12px; background: var(--bl-panel); color: var(--bl-text); cursor: pointer; font: inherit; }
.venue-tile span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.venue-tile b { font-size: 13px; font-weight: 800; line-height: 1.2; }
.venue-tile small { font-size: 11px; color: var(--bl-muted); line-height: 1.3; }
.venue-tile.on { border-color: var(--bl-orange); box-shadow: inset 0 0 0 1px var(--bl-orange); }
.venue-swatch { flex: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); }
.venue-swatch[data-look="redstone"] { background: radial-gradient(circle at 30% 30%, #fff6d8 0 3px, transparent 4px), radial-gradient(circle at 72% 30%, #fff6d8 0 3px, transparent 4px), linear-gradient(180deg, #1d2148 0%, #3b3466 55%, #d9744f 78%, #2a2d33 80%, #1a1c20 100%); }
.venue-swatch[data-look="sundown"] { background: radial-gradient(circle at 26% 58%, #fff3d6 0 4px, rgba(255,214,150,0.6) 6px, transparent 11px), linear-gradient(180deg, transparent 52%, #b85a3b 52%, #b85a3b 64%, transparent 64%) right 3px top 0 / 55% 100% no-repeat, linear-gradient(180deg, #4a6fa8 0%, #c9a0a0 42%, #f2b27a 62%, #c99b6b 66%, #a9784f 100%); }
.venue-swatch[data-look="timber"] { background: radial-gradient(circle at 70% 26%, #eef1f8 0 3px, rgba(200,215,255,0.35) 5px, transparent 9px), radial-gradient(ellipse at 22% 84%, #ffb050 0 2px, rgba(255,140,50,0.55) 4px, transparent 9px), radial-gradient(ellipse at 18% 60%, #0a0f0a 0 9px, transparent 10px), radial-gradient(ellipse at 42% 56%, #0a0f0a 0 8px, transparent 9px), radial-gradient(ellipse at 88% 62%, #0a0f0a 0 9px, transparent 10px), linear-gradient(180deg, #04060c 0%, #0c1119 58%, #0a0f0a 60%, #1a2012 100%); }
/* Three across on a phone is too narrow for a picture beside the words: the
   picture goes on top and the tagline goes, the names stay in one row. */
@media (max-width: 560px) {
  .venue-tile { flex-direction: column; align-items: flex-start; gap: 6px; }
  .venue-swatch { width: 100%; height: 34px; }
  .venue-tile small { display: none; }
  /* Four is two rows of two, picture beside the name again. */
  .venue-pick.many { grid-template-columns: 1fr 1fr; }
  /* An odd one out at the end takes the row, not half of it. */
  .venue-pick.many .venue-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .venue-pick.many .venue-tile { flex-direction: row; align-items: center; min-height: 52px; }
  .venue-pick.many .venue-swatch { width: 36px; height: 36px; }
}
.venue-swatch[data-look="cape"] { background: radial-gradient(circle at 26% 30%, #f2f4fa 0 3px, rgba(200,215,255,0.4) 5px, transparent 8px), linear-gradient(90deg, transparent 66%, #f4f4f0 66%, #f4f4f0 74%, transparent 74%) 0 0 / 100% 72% no-repeat, linear-gradient(90deg, transparent 69%, #e0782e 69%, #e0782e 71%, transparent 71%) 0 0 / 100% 72% no-repeat, radial-gradient(ellipse at 70% 12%, rgba(255,255,255,0.9) 0 1px, transparent 2px), linear-gradient(180deg, #030612 0%, #0f1b36 64%, #1a2542 70%, #3b3f45 72%, #22262b 100%); }
.venue-swatch[data-look="highway"] { background: radial-gradient(circle at 24% 34%, #ffb066 0 2px, rgba(255,160,70,0.5) 4px, transparent 8px), radial-gradient(circle at 76% 34%, #ffb066 0 2px, rgba(255,160,70,0.5) 4px, transparent 8px), radial-gradient(circle at 82% 62%, #2a6bff 0 2px, transparent 5px), radial-gradient(circle at 88% 62%, #ff2a2a 0 2px, transparent 5px), linear-gradient(180deg, #05060c 0%, #2a1c16 54%, #6b6a64 56%, #6b6a64 60%, #26272a 61%, #1a1b1e 100%); }
.venue-swatch[data-look="airfield"] { background: radial-gradient(circle at 30% 30%, #fff6d8 0 3px, transparent 4px), radial-gradient(circle at 72% 30%, #fff6d8 0 3px, transparent 4px), linear-gradient(180deg, #1d2148 0%, #3b3466 55%, #d9744f 78%, #4a4c50 80%, #3a3c40 100%); }
.mode-card { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 12px; padding: 12px 14px; }
.mode-card h3 { font-size: 15.5px; font-weight: 800; text-transform: none; letter-spacing: 0.01em; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mode-card h3 span { font-size: 10.5px; color: var(--bl-muted); font-family: var(--nums); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-transform: none; font-weight: 800; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--bl-line-2, #333a44); background: rgba(255,255,255,0.03); white-space: nowrap; margin-left: auto; }
.mode-card p { font-size: 12px; color: var(--bl-muted); line-height: 1.4; margin: 4px 0 8px; }
.mode-card .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mode-card .row .btn { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.mode-card .row.test-air { margin-top: 8px; }
.mode-card .test-air-label { margin-right: 4px; }
.mode-card .test-air-say { margin: 4px 0 8px; }
.mode-card .row .btn.on { background: var(--bl-orange); border-color: transparent; color: #fff; }
.mode-card input[type="number"] { width: 110px; font-family: var(--nums); font-variant-numeric: tabular-nums; }
.ladder { display: flex; flex-direction: column; gap: 0; margin: 4px 0 10px; border: 1px solid var(--bl-line); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.12); }
.ladder div { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; font-size: 13px; align-items: center; min-height: 46px; padding: 7px 10px; border-bottom: 1px solid var(--bl-line); }
.ladder div:last-child { border-bottom: 0; }
.ladder div.next { background: linear-gradient(90deg, rgba(214,30,59,0.12), rgba(214,30,59,0)); }
.ladder .avatar.rung { width: 20px; height: 20px; margin-right: 5px; }
.ladder div.done { color: var(--bl-muted); }
/* A rung already won is run again for the time: it reads as a button. */
.ladder div.done[data-rerun] { cursor: pointer; }
.ladder div.done[data-rerun]:active { color: var(--bl-text); }
.ladder div.done[data-rerun] small { color: var(--bl-orange); font-family: var(--nums); font-variant-numeric: tabular-nums; }
/* On a won rung the rival's line stays quiet; the best time on the right is the orange that says tap to run it again. */
.ladder div.done[data-rerun] > span:nth-child(2) small { color: var(--bl-muted); font-family: inherit; }
.ladder div.next { color: var(--bl-orange); font-weight: 700; }
.ladder div.locked { opacity: 0.45; }
.ladder span:first-child { font-family: var(--nums); font-variant-numeric: tabular-nums; }
.gear-row { display: grid; grid-template-columns: 18px 34px 1fr 34px 104px; gap: 6px; align-items: center; padding: 4px 0; font-size: 12px; }
/* A thumb cannot find one hundredth of a ratio on a slider. These can. */
.nudge {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: none;
  border: 1px solid var(--bl-line); border-radius: 8px;
  background: var(--bl-panel); color: var(--bl-text);
  font-size: 18px; font-weight: 700; line-height: 1;
  cursor: pointer; touch-action: manipulation; user-select: none;
}
.nudge:active { background: var(--bl-panel-2); transform: scale(0.94); }
/* The final drive keeps its own row, so its pair sits either side of the track. */
.slider-nudge { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.slider-nudge input[type="range"] { flex: 1; min-width: 0; }
.gear-row input[type="range"] { accent-color: var(--bl-orange); height: 28px; }
.gear-row output { font-family: var(--nums); font-variant-numeric: tabular-nums; color: var(--bl-orange); text-align: right; font-size: 11px; white-space: nowrap; }
.gear-row span { font-family: var(--nums); font-variant-numeric: tabular-nums; color: var(--bl-muted); }
.dyno-sheet { background: var(--bl-paper); color: var(--bl-paper-ink); border-radius: 10px; padding: 12px 14px; }
.dyno-sheet canvas { width: 100%; height: 190px; display: block; background: #ebe6db; border-radius: 6px; }
.dyno-sheet .spec-grid { margin-top: 8px; }
.dyno-sheet h3 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; }
.dyno-sheet .sub { font-size: 11px; color: #5b616b; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }

/* Paint shop */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--bl-line); cursor: pointer; padding: 0; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--bl-orange); }
.swatch.custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); position: relative; overflow: hidden; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.seg.wrap { flex-wrap: wrap; }
/* The wheel menu's groups: what kind of wheel each row is. */
.wheel-group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); margin: 10px 2px 4px; opacity: 0.85; }
/* The wheels of the kind picked, set apart from the row that picks the kind. */
.seg.wheel-list { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bl-line); }
.paint-preview { font-size: 12px; color: var(--bl-muted); }

.garage-loading { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(12,14,18,0.8); border: 1px solid var(--bl-line); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-text); z-index: 3; pointer-events: none; }
.garage-loading span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); border-top-color: var(--bl-orange); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


.lb-row .name { overflow: hidden; }

/* Leaderboard rows open on a tap to show the setup and offer to race it. */
.lb-row { color: inherit; font: inherit; text-align: left; width: 100%; cursor: pointer; }
.lb-row:not(.head):hover { border-color: var(--bl-muted); }
.lb-row .lb-detail { display: none; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--bl-line); font-size: 12px; }
.lb-row.open .lb-detail { display: grid; }
.lb-row .lb-detail i { display: block; font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); }
.lb-row .lb-actions { grid-column: 1 / -1; }
/* inline-block here dropped the centering every other button gets from .btn,
   so the label sat at the top of a box kept 36px tall by its own min-height. */
.lb-row .btn.small { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; font-size: 12px; background: var(--bl-orange); color: #fff; border-radius: 999px; font-weight: 800; }
/* This week's rule on the daily. It goes first and it is the loudest thing on
   the tile, because it is the only part that changes what to do. */
.rule-chip { display: inline-block; background: var(--bl-orange); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; margin-right: 2px; vertical-align: 1px; }
/* That the daily's car is lent, under the car it is lending. */
.daily-lent { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--bl-muted); }
.daily-next { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(214,30,59,0.55); background: rgba(214,30,59,0.14); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; }
.daily-next svg { flex: none; color: var(--bl-orange); }
.daily-next b { font-weight: 800; font-size: 14px; color: #fff; }

/* Why half the other lane's column is dashes. */
.slip-note { margin: 6px 0 0; line-height: 1.4; }

/* What the pass cost, on the slip. The rest of it is numbers; this is the one
   part that says what to do differently, so it reads as a sentence. */
.coach { margin-top: 12px; padding-top: 10px; border-top: 1px solid #d5d0c4; }
.coach b { display: block; font-size: 13px; font-weight: 800; }
.coach ul { margin: 6px 0 0; padding: 0; list-style: none; }
.coach li { position: relative; padding-left: 14px; margin-top: 4px; font-size: 12px; line-height: 1.45; color: #4b5563; }
.coach li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--bl-orange); }

/* This week, above the all time order. A board that only ever shows an all
   time order stops being somewhere to look once the top of it is settled. */
.week-card { border: 1px solid var(--bl-line); border-radius: 12px; background: var(--bl-panel); margin: 0 0 8px; overflow: hidden; }
.week-card summary { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 13px; }
.week-card summary::-webkit-details-marker { display: none; }
.week-card summary b { letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; font-weight: 800; color: var(--bl-muted); }
.week-card summary span { color: var(--bl-muted); font-size: 11px; }
.week-card summary::after { content: '+'; margin-left: auto; font-size: 16px; color: var(--bl-muted); }
.week-card[open] summary::after { content: '\2212'; }
.week-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; padding: 0 12px 10px; }
/* The faces made the two lists wider than the card on a phone: the number
   columns ran off its edge. Small faces, columns that can shrink, and on a
   phone the two lists stack. */
.week-grid li b .avatar { width: 20px; height: 20px; margin-right: 4px; }
@media (max-width: 520px) { .week-grid { grid-template-columns: minmax(0, 1fr); } }
.week-grid h4 { margin: 0 0 4px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); font-weight: 800; }
.week-grid ol { margin: 0; padding: 0; list-style: none; }
.week-grid li { display: flex; align-items: baseline; gap: 6px; font-size: 12px; padding: 3px 0; border-top: 1px solid var(--bl-line); }
.week-grid li:first-child { border-top: 0; }
.week-grid li b { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-grid li { align-items: center; }
.week-grid li b[data-profile] { display: flex; align-items: center; gap: 2px; overflow: visible; white-space: normal; }
.week-grid li .who { display: flex; flex-direction: column; min-width: 0; }
.week-grid li .wk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-grid li .crew-line { display: flex; align-items: center; gap: 6px; margin: 2px 0 1px; min-width: 0; line-height: 1; }
.week-grid li .crew-line .crew-tag { margin-left: 2px; vertical-align: 0; max-width: 100%; min-width: 0; font-size: 9.5px; padding: 1px 5px 0; }
.week-grid li .crew-line .play-flame { margin-left: 0; flex: none; }
.week-grid li i { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; color: var(--bl-orange); white-space: nowrap; }
/* Which board the quickest column is reading, and the trap beside the clock.
   A time on its own does not say whether it was an eighth or a half. */
.week-grid h4 small { font-weight: 700; letter-spacing: 0.04em; text-transform: none; color: var(--bl-dim, #6b7280); }
.week-grid li i em { font-style: normal; color: var(--bl-muted); font-size: 10.5px; margin-left: 5px; }
.week-grid li.me b { color: var(--bl-orange); }
.week-grid .none { color: var(--bl-muted); font-size: 12px; padding: 3px 0; }

.lb-mine { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid #5a2a35; border-radius: 12px; background: linear-gradient(180deg, #2a1c22 0%, var(--bl-panel) 100%); font-size: 13px; }
.lb-mine .chip { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: var(--bl-orange); color: #fff; padding: 3px 9px; border-radius: 999px; }
.lb-mine b { font-family: var(--nums); font-variant-numeric: tabular-nums; }
/* What it would take to move up: the row in front, and the top of the board.
   It wraps to its own line on a phone rather than squeezing the time. */
.lb-mine { flex-wrap: wrap; }
.lb-mine .lb-gap { flex: 1 0 100%; font-size: 11px; color: #f2b64c; font-variant-numeric: tabular-nums; }
.lb-mine .lb-gap.top { color: #4ec06a; }
.lb-mine .lb-gap s { text-decoration: none; opacity: 0.5; }

/* Build section: engine and drivetrain swaps. */
.swap-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.swap-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 8px; padding: 8px 10px; }
.swap-card.fitted { border-color: var(--bl-orange); }
.swap-card b { display: block; font-size: 13px; }
/* A maker's mark on a part they build. Capped by height so a wide wordmark and
   a square badge sit the same, and never wider than the card on a phone. */
.swap-card .swap-logo { display: block; height: 15px; width: auto; max-width: 60%; margin: 0 0 4px; object-fit: contain; }
.swap-card .meta { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-muted); margin-top: 2px; }
.swap-card p { font-size: 11px; color: var(--bl-muted); margin: 4px 0 0; }
.swap-card .btn.small { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.swap-card .chip.on { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--bl-orange); color: #fff; padding: 3px 7px; border-radius: 4px; white-space: nowrap; }

.replay-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.replay-fade.on { opacity: 1; }

.setting .chip.on { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--bl-orange); color: #fff; padding: 3px 7px; border-radius: 4px; white-space: nowrap; }

.ladder small { display: block; font-size: 11.5px; color: var(--bl-muted); font-weight: 400; margin-top: 1px; }

/* Coach: the pad to press pulses on the first passes. */
.pedal.pulse { animation: pad-pulse 0.7s ease-in-out infinite; }
@keyframes pad-pulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.035); filter: brightness(1.35); } }

/* Landscape phones and tablets: gauges in the middle, the pads in the corners, the tree small and high.
   Kirk, on a phone held sideways: the gauges were over the LAUNCH and SHIFT
   pads, and the EGT and TIRES bars over the time. Everything was placed by a
   fixed distance from somewhere else, and none of it knew how wide the phone
   was, what size the gauges had been set to or where the notch was. Now each
   piece has a place of its own (tools/landscapefit.mjs measures all of them on
   seven phones at every gauge size):
     the top band     distance, time, map and pause, as upright
     under the time   EGT and TIRES side by side, one row
     left column      the strip info and the lane card under the distance box,
                      the race message under those, above the LAUNCH pad
     right column     toasts, under the pause button, above the SHIFT pad
     the middle       the tree, small, with its status line under it
     the bottom       LAUNCH, the gauges and SHIFT, the gauges only as big as
                      fits between the pads and under the tree. */
@media (orientation: landscape) and (max-height: 560px) {
  .hud-gauges { bottom: calc(var(--safe-bottom) + 6px); padding: 0 calc(var(--safe-right) + 178px) 0 calc(var(--safe-left) + 178px); }
  /* A gauge is its chosen size until it would reach a pad or the tree. */
  .gauge {
    --g: min(calc(92px * var(--gauge-scale, 1)), calc((100vw - var(--safe-left) - var(--safe-right) - 372px - 60px * var(--gauge-scale, 1)) / 2), calc(100vh - var(--safe-bottom) - 238px));
    width: var(--g); height: var(--g);
  }
  .hud-speed b { font-size: min(calc(32px * var(--gauge-scale, 1)), calc(100vh - var(--safe-bottom) - 300px)); }
  .hud-speed em { font-size: calc(15px * var(--gauge-scale, 1)); }
  .drag-controls { justify-content: space-between; bottom: calc(var(--safe-bottom) + 8px); }
  .pedal.launch, .pedal.shift { flex: 0 0 160px; height: 92px; font-size: 15px; }
  .pedal.launch b, .pedal.shift b { font-size: 18px; }
  .drag-tree { top: calc(var(--safe-top) + 102px); transform: translateX(-50%) scale(0.42); }
  /* EGT and TIRES under the time box, side by side. The burnout's big tire
     bar stays in its place on that row rather than spreading over the top. */
  .hud-egt, .hud-egt.tires, .hud-egt.tires.burnout { top: calc(var(--safe-top) + 78px); transform: none; font-size: 10px; letter-spacing: 0.12em; gap: 6px; }
  .hud-egt { left: auto; right: calc(50% + 6px); }
  .hud-egt.tires, .hud-egt.tires.burnout { left: calc(50% + 6px); right: auto; }
  .hud-egt .egt-track, .hud-egt.tires.burnout .egt-track { width: min(100px, calc(50vw - 180px)); flex: none; height: 10px; max-width: none; }
  /* The left column, under the distance box. */
  .drag-info { top: calc(var(--safe-top) + 100px); left: calc(var(--safe-left) + 10px); transform: none; max-width: min(240px, calc(50vw - 40px)); text-align: left; }
  .lane-card { left: calc(var(--safe-left) + 10px); transform: none; top: calc(var(--safe-top) + 136px); max-width: min(240px, calc(50vw - 40px)); }
  .race-msg { left: calc(var(--safe-left) + 10px); transform: none; top: calc(var(--safe-top) + 168px); width: min(240px, calc(50vw - 40px)); max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 280px); overflow: hidden; }
  /* The flagger stands left of the middle from the driver's seat: his bar goes to the sky on the right. */
  .race-msg.sky { left: auto; right: calc(var(--safe-right) + 10px); top: calc(var(--safe-top) + 168px); }
  .hud-status { top: calc(var(--safe-top) + 196px); }
  /* The right column, under the pause button. */
  .toast.race { left: auto; right: calc(var(--safe-right) + 10px); transform: none; animation-name: toast-in-left; top: calc(var(--safe-top) + 164px); max-width: min(240px, 30vw); text-align: left; }
  .controls { height: calc(var(--safe-bottom) + 120px); }
  .pedals { bottom: calc(var(--safe-bottom) + 8px); }
  .pedal.throttle { height: 100px; }
  .replay-bar { bottom: calc(var(--safe-bottom) + 6px); }
  #screen-title { padding-bottom: calc(var(--safe-bottom) + 12px); }
  .title-wrap { gap: 6px; }
  .title-wrap .wordmark { width: 200px; height: auto; }
  .title { font-size: 24px; }
}

/* Race a friend: the room code big enough to read across a room. */
.online { display: flex; flex-direction: column; gap: 10px; }
.online .mode-card .row { display: flex; gap: 8px; align-items: center; }
.online .code { font-family: var(--mono); font-size: 44px; letter-spacing: 0.3em; font-weight: 800; text-align: center; padding: 12px 0 6px; color: var(--bl-orange); }
.online input.code-input { font-family: var(--mono); font-size: 28px; letter-spacing: 0.25em; text-transform: uppercase; text-align: center; width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--bl-line); background: var(--bl-panel); color: var(--bl-text); }
.online .peer { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.online .peer.me { border-color: var(--bl-orange); }
/* How far down the track somebody watching a race can see each car is. */
.online .watch-bar { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: #2a2e35; overflow: hidden; }
.online .watch-bar i { display: block; height: 100%; background: var(--bl-orange); transition: width 120ms linear; }
.online .peer .chip { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: #2a2e35; color: var(--bl-muted); }
.online .peer .chip.on { background: var(--bl-ok, #2e8b57); color: #fff; }
.online .peer .class-chip { font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: #2a2e35; color: #dfe3e8; margin-left: 6px; vertical-align: 1px; }
.online .peer.far .class-chip { background: rgba(214,30,59,0.25); color: #ff9aa8; }
.lobby-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.lobby-filter input { width: 18px; height: 18px; accent-color: var(--bl-orange); }

/* A unit the current block cannot run: listed, dimmed, with the build it needs. */
.spec.needs-build { opacity: 0.78; }
.spec.needs-build .spec-graph { display: none; }
.spec-need { margin: 6px 0 2px; font-size: 13px; font-weight: 700; color: var(--bl-orange); display: flex; gap: 6px; align-items: center; }
.spec-need svg { flex: none; width: 14px; height: 14px; }
.swap-need { margin: 6px 0 0; font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--bl-orange); display: flex; gap: 6px; align-items: flex-start; }
.swap-need svg { flex: none; width: 13px; height: 13px; margin-top: 1px; }
.swap-card.blocked { opacity: 0.72; }
/* The Build list, split by the kind of part. */
.swap-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bl-orange); margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--bl-line); }
.swap-head small { font-size: 10px; font-weight: 400; letter-spacing: 0.06em; text-transform: none; color: var(--bl-muted); }
.swap-card.blocked .chip { display: flex; gap: 5px; align-items: center; }

/* The Lanes: everybody's garage, open to everybody. */
.lane-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
/* A row is a face, a name with anything that needs acting on beside it, and
   one line of facts under it, with the cars behind a button on the end.
   
   It used to be three stacked rows with the build on a line of its own, about
   two hundred pixels a name, so four of three hundred and fifty one fitted on
   a phone. Kirk asked for more per screen. Two lines and the same information:
   the build and the last seen moved into the facts line where they belong, and
   only a waiting gift or an old build is still a chip, because those are the
   two the shop has to do something about. */
.lane {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "face who when cars" "face meta meta cars";
  gap: 1px 10px; width: 100%;
  padding: 9px 11px; border-radius: 12px; border: 1px solid var(--bl-line);
  background: #14171c; color: inherit; text-align: left; align-items: center;
  cursor: pointer; font: inherit; box-sizing: border-box;
}
.lane:active { background: #191d23; }
.lane.live { border-color: rgba(61, 220, 132, 0.35); }
.lane .avatar.lane-face { grid-area: face; width: 30px; height: 30px; margin: 0; }
.lane .lane-who { grid-area: who; display: flex; align-items: center; gap: 6px; min-width: 0; }
.lane > em { grid-area: when; justify-self: end; font-style: normal; font-size: 11px; color: var(--bl-dim); white-space: nowrap; }
.lane > em:empty { display: none; }
.lane .meta { grid-area: meta; font-size: 11px; color: var(--bl-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane .lane-cars { grid-area: cars; align-self: center; background: transparent; border-color: var(--bl-line-2, #333a44); border-radius: 999px; color: var(--bl-muted); min-height: 30px; padding: 2px 12px; font-size: 11.5px; }
.lane .lane-cars:active { color: var(--bl-text); }
.lane b { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane .flags { display: flex; gap: 4px; flex: 0 0 auto; }
.lane .flags:empty { display: none; }
.lane .flags i { font-style: normal; font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: #22262e; color: var(--bl-muted); white-space: nowrap; }
.lane .flags i.tag { background: rgba(214,30,59,0.18); color: #f0a3ae; }
.lane .flags i.warn { background: rgba(214,30,59,0.9); color: #fff; }
.lane .meta s { text-decoration: none; opacity: 0.45; padding: 0 3px; }
/* Search and sort, one row, both reachable with a thumb. */
.lane-tools { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lane-tools input, .lane-tools select { flex: 1; min-width: 0; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bl-line-2, #333a44); background: #0e1116; color: var(--bl-text); font: inherit; font-size: 14px; }
.lane-tools select { flex: 0 0 38%; }
/* The On now switch: the same green as the dot on a live row, a pill that
   fills when it is filtering. The whole top row of tools is one line. */
.lane-tools .lane-live { flex: 1 1 100%; margin: 0; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bl-line); background: #0e1116; color: var(--bl-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.lane-tools .lane-live.on { background: rgba(61, 220, 132, 0.14); border-color: rgba(61, 220, 132, 0.5); color: #8ff0b8; }
.lane-tools .lane-live i.off { background: var(--bl-muted); box-shadow: none; }
.lane-count { margin: 10px 2px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
#lane-count { margin: 8px 2px 0; }
.lane-live { margin: 10px 2px 0; display: flex; align-items: center; gap: 8px; }
.lane-live i { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; flex: 0 0 auto; }
.lane-live i { box-shadow: 0 0 6px rgba(61, 220, 132, 0.7); }
/* The green dot goes on the row rather than in front of the name: inside the
   name cell it was being clipped by the ellipsis that keeps long names in. */
.lane.live .lane-who::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px rgba(61, 220, 132, 0.7); flex: 0 0 auto; }
.lane-note { margin-top: 4px; }
.lane-note summary { cursor: pointer; font-size: 12px; color: var(--bl-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.lane-note p { margin-top: 6px; }
.lane-garage { padding: 4px 6px 10px; display: flex; flex-direction: column; gap: 4px; }
/* A color chip, the car over what is fitted, and the button to race it. The
   cells are named rather than left to auto placement, which put the setup line
   in the button's column and pushed the button onto a row of its own. */
.lane-car { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "chip name race" "chip spec race"; gap: 2px 10px; align-items: center; padding: 9px 11px; border-radius: 10px; background: #101318; }
.lane-car i { grid-area: chip; align-self: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); }
.lane-car b { grid-area: name; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.lane-car span { grid-area: spec; font-size: 11.5px; color: var(--bl-muted); line-height: 1.3; }
.lane-car .btn { grid-area: race; align-self: center; white-space: nowrap; }
.lane-gift { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-top: 6px; border-radius: 12px; border: 1px solid var(--bl-line); background: #14171c; }
.lane-gift h3 { margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-muted); }
.lane-gift .row { display: flex; gap: 8px; }
.lane-gift .row .btn { flex: none; }
.lane-gift input, .lane-gift select { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bl-line); background: #0e1116; color: var(--bl-text); font: inherit; font-size: 14px; }
/* One job per block, each with its heading and its explanation above the
   buttons it is about. The panel grew a section at a time and read like it. */
.lane-gift .gift-part { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--bl-line); }
.lane-gift .gift-part h4 { margin: 0; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bl-muted); font-weight: 700; }
.lane-gift .gift-part .fine { margin: 0; }
/* The address an account signs in with. Monospaced because the whole point of
   showing it is reading it back to somebody character by character, and a
   lowercase l next to a one in the body font is how that goes wrong. */
/* A shop event on the tile: the name of the thing, before the rule. */
.rule-chip.event { background: #f2f2f2; color: #101216; }
/* The same box the signup log sits in, so it reads as a thing to open rather
   than a heading: it was a bare line and nobody would have tapped it. */
.lane-events { border: 1px solid var(--bl-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: rgba(214,30,59,0.06); }
.lane-events > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bl-muted); list-style: none; }
.lane-events > summary::-webkit-details-marker { display: none; }
.lane-events > summary b { color: var(--bl-orange); }
.lane-events > summary span { color: var(--bl-muted); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.lane-events > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--bl-muted); border-bottom: 2px solid var(--bl-muted); transform: rotate(45deg); margin-left: 6px; flex: none; transition: transform 120ms; }
.lane-events[open] > summary::after { transform: rotate(-135deg); }
.lane-everyone > p.fine { margin-top: 8px; }
.lane-everyone-form { margin-top: 8px; }
.lane-everyone-form .row { display: flex; gap: 8px; align-items: center; }
.lane-everyone-form .row input, .lane-everyone-form .row select { flex: 1; min-width: 0; }
.lane-everyone-form .row button { flex: 1; }
.lane-event { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--bl-line); font-size: 13px; }
.lane-event span { color: var(--bl-muted); font-size: 12px; }
.lane-event small { color: var(--bl-muted); }
.lane-event.on b { color: var(--bl-orange); }
.lane-event.past { opacity: 0.6; }
.lane-event .btn { align-self: flex-start; margin-top: 4px; }
.lane-event-form { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.lane-event-form h4 { margin: 0; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bl-muted); }
.lane-event-form .row { display: flex; gap: 8px; flex-wrap: wrap; }
.lane-event-form .row > * { flex: 1 1 auto; min-width: 0; }
.lane-event-form label.fine { display: flex; align-items: center; gap: 6px; }
.lane-event-form label.fine input { flex: 1 1 auto; min-width: 0; }
.lane-gift .signin-email { font-family: var(--mono); font-size: 12px; color: var(--bl-text); word-break: break-all; }
.lane-gift .row input { flex: 1 1 auto; min-width: 0; }
/* The car list beside the credits box. Flexing from nothing next to an input
   that flexes from its own width left it a chevron with no name in it. */
.lane-gift .row .gift-credits { flex: 1 1 0; }
.lane-gift .row .gift-car { flex: 1.4 1 0; min-width: 45%; }
/* The one block that takes something away is marked as such before it is read. */
.lane-gift .danger-part { border-top-color: rgba(214, 40, 57, 0.35); }
.lane-gift .danger-part h4 { color: #d97782; }
/* Two account ids and a couple of counts: worth having, not worth the top of
   the panel, so they sit under the sentence that says the same thing in words. */
.gift-facts summary { cursor: pointer; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bl-muted); }
.gift-facts .mono { margin: 6px 0 0; }

/* About: what the shop does, and where to find it. */
.about-h { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); margin: 16px 0 6px; }
/* The BL8685R at the top of About: the shop's own artwork, cut off the black
   it was drawn on so it sits on the card rather than in a box on it. */
.about-hero { display: flex; justify-content: center; margin: -8px 0 2px; }
.about-hero img { width: min(300px, 64%); height: auto; filter: drop-shadow(0 16px 30px rgba(214,30,59,0.3)); }
@media (max-width: 420px) { .about-hero img { width: 70%; } }
.about-list { margin: 0 0 4px; padding-left: 18px; }
.about-list li { font-size: 13.5px; line-height: 1.5; margin-bottom: 5px; }
.about-card .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* The links sit side by side; the full width rule above is for a lone button. */
.about-card .row .btn { margin-top: 0; width: auto; flex: 1 1 auto; min-width: 108px; }
a.btn { text-decoration: none; }

/* Setup: the ladder as a list, least power first, any rung opened in place. */
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
/* The same row above the car card, choosing what the arrows walk through. */
.setup-head.car-view { margin-bottom: 10px; }
.setup-item { margin-bottom: 8px; }
.setup-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--bl-line); background: #14171c; color: inherit; cursor: pointer; }
.setup-row b { font-size: 14.5px; font-weight: 700; }
.setup-row em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; text-align: right; }
.setup-row span { font-size: 11.5px; color: var(--bl-muted); }
.setup-row i { font-style: normal; font-size: 11.5px; color: var(--bl-muted); text-align: right; white-space: nowrap; }
.setup-row.on { border-color: var(--bl-orange); }
.setup-row.on i { color: var(--bl-orange); }
.setup-row.blocked { opacity: 0.72; }
.setup-row.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.setup-row.open + .spec { border-top-left-radius: 0; border-top-right-radius: 0; margin-bottom: 0; }

/* ------------------------------------------------------- The music button
   Pinned to the corner and above every screen, because wanting the music off
   is a thing that happens where you are, not in Settings. It moves out of the
   way of whatever else lives in that corner, and it is not there at all on the
   strip, where the music is not playing anyway. */
.music-toggle {
  position: fixed; z-index: 25;
  /* Level with the row in the bar beside it: the bar pads six above a forty
     pixel button, so this sits six down too. Kirk: the music button should
     center itself in the bar. */
  top: calc(var(--safe-top) + 5px); right: calc(var(--safe-right) + 12px);
  width: 40px; min-height: 40px; padding: 0;
  /* Deliberately no backdrop-filter: on a fixed element above every screen it
     is a known way to blow up compositing on some phone GPUs, and a solid
     panel looks the same. */
  background: rgba(16,18,22,0.86); border-color: rgba(255,255,255,0.14); color: var(--bl-text);
}
.music-toggle .music-off { display: none; }
.music-toggle[aria-pressed="false"] { color: var(--bl-muted); }
.music-toggle[aria-pressed="false"] .music-on { display: none; }
.music-toggle[aria-pressed="false"] .music-off { display: block; }
#app[data-music="hide"] .music-toggle { display: none; }
/* A popup covers the screen, and its own Close sits in that corner. */
#app:has(.modal:not([hidden])) .music-toggle { display: none; }
/* Whatever else sits in that corner steps aside for it. */
#app:not([data-music="hide"]) .sheet-head { padding-right: var(--bl-corner); }
/* In the garage the panel's tab strip runs under the corner, so the last tab
   steps aside too. */
#app:not([data-music="hide"]) .garage-panel .tabs { padding-right: 44px; }
/* The garage's bar is the main menu's bar: full width, flush with the top
   of the screen, one 40 pixel row with the music button in its right end. It
   was a separate bar floated inside the scene, 64 pixels tall and padded
   unevenly, with the music button hanging off its corner. Kirk: can't you
   just use the same bar you have on the main menu for the garage? */
.screen.garage .sheet-head.overlay { top: 0; left: 0; right: 0; min-height: calc(var(--safe-top) + 52px); padding: calc(var(--safe-top) + 6px) calc(var(--safe-right) + 62px) 6px calc(var(--safe-left) + 14px); background: rgba(11,12,15,0.9); box-shadow: 0 1px 0 rgba(255,255,255,0.05); }
#app[data-music="hide"] .screen.garage .sheet-head.overlay { padding-right: calc(var(--safe-right) + 14px); }
/* See-through over the shop, though: a solid bar that deep on a tall phone
   (the status bar's height and the row) sat over the Boost Lab banners on
   the back wall. Kirk: the top bar hangs really low on my phone so it covers
   all the Boost Lab banners in the garage. The buttons keep their own dark
   chips, the title a shadow, and only a light fade stays behind the status
   bar so the clock is readable. */
#screen-garage.screen.garage > .sheet-head.overlay { background: linear-gradient(180deg, rgba(8,10,13,0.55) 0%, rgba(8,10,13,0.18) 70%, rgba(8,10,13,0) 100%); box-shadow: none; }
#screen-garage .sheet-head.overlay .sheet-brand span { text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.screen.garage .sheet-head.overlay::before { display: none; }
.screen.garage .sheet-head.overlay .sheet-brand img { width: 30px; height: 30px; }
@media (min-width: 1024px) {
  .music-toggle { top: calc(var(--safe-top) + 5px); right: calc(var(--safe-right) + 20px); }
  #app:not([data-music="hide"]) .screen.garage .sheet-head.overlay { padding-right: 14px; }
  #app:not([data-music="hide"]) .garage-panel .tabs { padding-right: 52px; }
}

/* The account card: two fields and the two things you can do with them. */
#modal-account .field { margin-top: 2px; }
#modal-account input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bl-line); background: #0e1116; color: var(--bl-text); font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; }
/* One primary and one way out on the same line, and the two things you can do
   to the account you are already in kept apart under a rule of their own. They
   were five buttons in a stack: a red one, a gray one, an underlined red link
   and two more full width buttons, in no order that said which was the point. */
/* The setup sheet in front of a race. Tall enough to hold the rows that change
   a pass and scrolled rather than squeezed, because a phone is not tall. */
/* The tree on its own, for practice. It reuses the strip's own bulbs and its
   own timing, so a light cut in here is worth exactly what it is worth out
   there; only the car is missing. */
.rt-card { align-items: center; text-align: center; }
.rt-card .rt-tree { position: static; transform: none; opacity: 1; margin: 2px 0; }
.rt-read { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rt-read b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 40px; line-height: 1; }
.rt-read span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.rt-read.good b { color: #6ee89b; }
.rt-read.foul b { color: var(--bl-warn); }
.rt-pad { width: 100%; min-height: 64px; font-size: 16px; letter-spacing: 0.08em; touch-action: none; user-select: none; -webkit-user-select: none; }
.rt-pad.held { background: var(--bl-orange); color: #fff; }
.rt-kind { display: flex; gap: 6px; justify-content: center; }
.rt-rollout { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--bl-muted); flex-wrap: wrap; }
/* The select takes the row's own size, not the form default's full width, and
   the two-step switch stays one line: it was three lines tall beside a select
   that ran the width of the card. */
.rt-rollout select { width: auto; flex: 0 0 auto; min-height: 36px; padding: 6px 8px; font-size: 13px; font-family: var(--nums); font-variant-numeric: tabular-nums; }
.rt-rollout .btn.small { white-space: nowrap; flex: none; }
.rt-rollout .btn.small.on { border-color: var(--bl-orange); color: var(--bl-text); }
.rt-kind .btn.on { border-color: var(--bl-orange); color: var(--bl-text); }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; background: #14171c; border: 1px solid var(--bl-line); flex: none; }
.lb-row .name { display: flex; align-items: center; min-width: 0; }
.lb-row .name .avatar { width: 24px; height: 24px; }
.lb-week li b .avatar { width: 20px; height: 20px; margin-right: 4px; }
.lane b .avatar { width: 22px; height: 22px; }
.profile-head { display: flex; align-items: center; gap: 12px; }
.profile-head .avatar { width: 56px; height: 56px; margin: 0; }
/* Your own profile is a portrait: the face big and centered, the name under it. */
.profile-head.own { flex-direction: column; gap: 6px; text-align: center; }
.profile-head.own .avatar { width: 120px; height: 120px; }
.profile-head.own h2 { margin: 0; }
.face-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; display: block; }
#profile-hint { margin: 0; }
.setting .avatar.own { width: 32px; height: 32px; margin: 0 8px 0 0; }
.modal-card.avatar-card { width: min(420px, 94vw); max-height: 88vh; overflow-y: auto; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.avatar-grid button { background: var(--bl-panel); border: 2px solid var(--bl-line); border-radius: 10px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--bl-muted); font-size: 10px; cursor: pointer; }
.avatar-grid button img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; margin: 0; border: 0; }
.avatar-grid button.on { border-color: var(--bl-orange); color: var(--bl-text); }
.avatar-grid button.shop { box-shadow: inset 0 0 0 1px var(--bl-orange); }
.modal-card.profile-card { width: min(520px, 94vw); max-height: 88vh; overflow-y: auto; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.profile-stats .profile-note { grid-column: 1 / -1; margin: 0; }
.profile-stats div { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 8px; padding: 8px; }
.profile-stats i { display: block; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bl-muted); }
.profile-stats b { display: block; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 16px; margin-top: 2px; }
.profile-bests h4, .profile-cars h4 { margin: 6px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bl-muted); }
.profile-bests div { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--bl-line); font-size: 12px; }
.profile-bests div small { display: block; color: var(--bl-muted); }
.profile-bests div b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; }
.profile-bests div b small { font-size: 10px; }
.profile-cars p { font-size: 12px; color: var(--bl-muted); margin: 0; line-height: 1.5; }
/* The shop's controls on somebody's card. It borrows the lot's box wholesale,
   so a field looks and behaves the same in both places, and is ruled off from
   what everybody sees above it. */
.profile-shop { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bl-line); }
.profile-shop[hidden] { display: none; }
.profile-shop h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bl-muted); }
.profile-shop .lane-gift { margin-top: 0; }
.profile-shop > .row { display: flex; gap: 8px; }
.profile-shop > .row .btn { flex: 1 1 auto; }
.profile-shop > .fine { margin: 0; }
/* The dotted underline means "this is a person, tap it". It belongs to the
   name and nothing else: put it on .name and the car line under it inherits
   it, which offers a tap that does nothing and reads as a second link. */
.lb-row .name[data-profile] { cursor: pointer; }
.lb-row .name[data-profile] .who b, .lb-week li b[data-profile] .wk-name { text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.lb-week li b[data-profile] { cursor: pointer; }
/* A board where everybody is in the same car: the daily, which lends one, and
   the Owners' Cup, which is run in the week's. The Setup column there was the
   same car name on every row while the names were cut off after six letters,
   so the column goes and the car moves under the name. */
/* What a thing is, above the board or the ladder it belongs to, with the i for
   the rest of it sitting in the line rather than on a row of its own. */
/* How the daily is scored, said where somebody looking at the numbers will
   see it: above them, in its own box, not as a footnote under the board. */
.daily-scoring { margin: 8px 0 0; padding: 8px 11px; border: 1px solid var(--bl-line); border-left: 3px solid var(--bl-orange); border-radius: 8px; background: var(--bl-panel); font-size: 12.5px; line-height: 1.45; color: var(--bl-muted); }
.daily-scoring b { color: var(--bl-text); letter-spacing: 0.02em; }
/* The part that says it moves, set apart from the part that says what it is
   today: a player who reads one line has to read the right one. */
.daily-scoring em { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; color: #f0b429; }
/* The Owners' Cup card. The i rides on the title, where it is always in the
   same place: trailing a paragraph whose last line is full, it wrapped onto a
   row of its own and read as an unlabelled button. */
#index-title .info-btn { display: inline-flex; vertical-align: middle; width: 24px; height: 24px; margin-left: 6px; position: relative; top: -2px; }
#index-title .info-btn svg { width: 14px; height: 14px; }
.owners-spec { color: var(--bl-muted); margin: 0 0 6px; }
.owners-spec s { text-decoration: none; color: var(--bl-dim); margin: 0 2px; }
.owners-stats { margin: 10px 0 6px; }
/* Today and this week on a strip, above the modes. Two rows, so it reads at a
   glance and never competes with the Race button for the eye. */
.strip-board { margin: 0 0 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; overflow: hidden; }
.strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--bl-line); }
.strip-head b { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
.strip-head span { font-size: 10.5px; color: var(--bl-dim); }
.strip-row { display: grid; grid-template-columns: 62px auto 1fr; grid-template-areas: "when time who" "when mine mine"; gap: 1px 8px; align-items: baseline; padding: 7px 11px; }
.strip-row + .strip-row { border-top: 1px solid var(--bl-line); }
.strip-row i { grid-area: when; font-style: normal; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bl-dim); }
.strip-row b { grid-area: time; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 15px; }
.strip-row span { grid-area: who; font-size: 12px; color: var(--bl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-row em { grid-area: mine; font-style: normal; font-size: 11px; color: var(--bl-orange); }
.strip-row.empty span { grid-area: time / time / who / who; color: var(--bl-muted); font-size: 12px; }

/* One racer a day, on the menu. */
.spotlight { grid-column: 1 / -1; margin: 0; background: var(--bl-panel); border: 1px solid var(--bl-line); border-left: 3px solid var(--bl-orange); border-radius: 10px; padding: 9px 11px; }
.spot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.spot-head b { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-orange); }
.spot-head span { font-size: 10.5px; color: var(--bl-dim); }
.spot-body { display: flex; align-items: center; gap: 10px; margin: 7px 0 5px; }
.spot-body .avatar.spot { width: 38px; height: 38px; flex: 0 0 auto; }
.spot-who { min-width: 0; flex: 1 1 auto; }
.spot-who b { display: block; font-family: var(--nums); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: 0.06em; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-who small { display: block; font-size: 11px; color: var(--bl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-time { text-align: right; flex: 0 0 auto; }
/* The week behind whoever is drawn, as a row of small facts. The card carried
   one number before and on a quiet day that number was 1. */
/* What a car has actually run, on its card in the garage. The numbers above
   it are an estimate of the tune it is wearing now and move with every slider;
   these are passes, and they do not. */
/* What went to this index last time, and a tap back to it. A whole line only
   when it has something to say: it is not shown for a car already picked, one
   that has been sold, or an index already entered. */
.index-again { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; width: 100%; margin-top: 8px; padding: 7px 10px; border: 1px dashed var(--bl-line-2, #333a44); border-radius: 9px; background: transparent; color: var(--bl-muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.index-again:hover, .index-again:focus-visible { border-color: var(--bl-red); color: var(--bl-text); }
.index-again > span { flex: 1 1 auto; min-width: 0; }
.index-again b { color: var(--bl-text); font-weight: 700; }
.index-again em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--bl-red); white-space: nowrap; }

.car-bests { margin-top: 12px; border-top: 1px solid var(--bl-line); padding-top: 11px; }
.car-bests .cb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.car-bests .cb-head b { font-size: 13px; }
.car-bests .cb-head span { font-size: 11px; color: var(--bl-muted); text-align: right; }
.car-bests .cb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.car-bests .cb { background: var(--bl-panel-3, #2a3039); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.car-bests .cb > span { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
/* The boxes are dark, and on the garage's paper spec sheet the text inside
   them took the sheet's ink, which left the times dark on dark. Kirk: too
   dark, hard to read. They say their own colors. */
.car-bests .cb > span { color: #aab2bf; }
.car-bests .cb > b { font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: #fff; }
.car-bests .cb > i { font-style: normal; font-size: 11.5px; color: #d3d8e0; font-variant-numeric: tabular-nums; }
.car-bests .cb > em { font-style: normal; font-size: 10.5px; color: #ff8a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-bests .cb.none > b { color: #7d8693; }
@media (min-width: 620px) { .car-bests .cb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.spotlight .spot-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.spotlight .spot-facts span { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--bl-panel-3, #2a3039); color: var(--bl-muted, #8b95a3); }
.spot-time b { display: block; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 16px; }
.spot-time small { display: block; font-size: 10.5px; color: var(--bl-dim); }
.spotlight .fine { margin: 0; }
.says-what { margin: 0 0 8px; }
.says-what .info-btn { width: 22px; height: 22px; margin-left: 4px; }
.says-what .info-btn svg { width: 13px; height: 13px; }
/* The name over the car, on every board. .who is what gives the ellipsis
   something it can act on: .name itself is a flex row holding the avatar, and
   text-overflow does nothing to a flex container's own text, which is why a
   long name used to be sliced through a glyph rather than trailed off. */
.lb-row .name .who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; }
.lb-row .name .who b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .name .who small { max-width: 100%; font-family: var(--font); font-weight: 500; letter-spacing: 0; font-size: 10.5px; color: var(--bl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .name .who .crew-line { display: flex; align-items: center; gap: 8px; margin: 2px 0 1px; line-height: 1; min-width: 0; }
.lb-row .name .who .crew-line .play-flame { margin-left: 0; flex: none; }
.lb-row .name .who .crew-line .crew-tag { min-width: 0; }
.lb-row .name .who .crew-line .crew-tag { margin: 0 0 0 2px; vertical-align: 0; max-width: 100%; font-size: 9.5px; padding: 1px 5px 0; }
.lb-row .name .who small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
/* The sheet never grows past the screen, and the title and the buttons keep
   their place while the middle scrolls. It used to be as tall as its contents
   wanted: with the daily's board on it, Line it up was off the bottom of a
   short phone and there was no way to reach it. */
.modal-card.pretune { width: min(420px, 94vw); max-height: 100%; }
.modal-card.pretune > h2, .modal-card.pretune > .btn-row { flex: none; }
/* A line above the buttons, so a sheet cut off mid row reads as a bar with
   more above it rather than as content that ran out. */
.modal-card.pretune > .btn-row { border-top: 1px solid var(--bl-line); padding-top: 12px; }
/* Room on the right for the scrollbar: a phone draws it over the content
   rather than beside it, and it landed on the value column. */
.pretune-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-right: 14px; padding-bottom: 4px; }
/* Jump straight to a car. Sits under the My cars / All row and is meant to
   read as part of the panel rather than as a browser control: the chevron is
   drawn rather than native, and the whole thing is the width of the card. */
.car-jump { display: block; position: relative; margin: 6px 0 2px; }
.car-jump::after { content: ""; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--bl-text); border-bottom: 2px solid var(--bl-text); transform: rotate(45deg); pointer-events: none; z-index: 2; opacity: 0.85; }
.car-jump select { position: relative; z-index: 1; width: 100%; appearance: none; -webkit-appearance: none; background: #0e1116; color: var(--bl-text); border: 1px solid var(--bl-line); border-radius: 10px; padding: 10px 34px 10px 12px; font: inherit; font-size: 14px; }
.car-jump select:focus-visible { outline: 2px solid var(--bl-orange); outline-offset: 1px; }

/* The board on the pre-race sheet: what there is to beat, and whose it is.
   Reads as a strip of rows rather than a table, because three rows and your
   own line is all it ever shows. */
.pretune-board { margin: 8px 0 2px; border: 1px solid var(--bl-line); border-radius: 12px; background: var(--bl-panel); overflow: hidden; }
.pretune-board .pb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 10px 5px; border-bottom: 1px solid var(--bl-line); }
.pretune-board .pb-head b { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
.pretune-board .pb-head span { font-size: 12px; color: var(--bl-dim); font-family: var(--nums); font-variant-numeric: tabular-nums; }
.pretune-board ol { list-style: none; margin: 0; padding: 0; }
.pretune-board li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 10px; font-size: 13px; }
.pretune-board li + li { border-top: 1px solid rgba(255,255,255,0.05); }
.pretune-board li i { font-style: normal; color: var(--bl-dim); font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; }
.pretune-board li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pretune-board li em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; }
.pretune-board li.mine { background: rgba(214,30,59,0.12); }
.pretune-board li.mine b { color: var(--bl-orange); }
.pretune-board .pb-note { padding: 7px 10px; font-size: 12px; color: var(--bl-dim); }

.pretune-tabs { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.pretune-tabs .btn { flex: 0 0 auto; min-height: 34px; font-size: 12.5px; padding: 0 14px; border-radius: 999px; border-color: var(--bl-line-2, #333a44); color: var(--bl-muted); letter-spacing: 0.02em; }
/* The tab you are on. These two carried the class all along and nothing here
   drew it, so both tabs looked the same and the only way to tell which one was
   open was to read the rows under it. Same treatment a picked segment gets
   everywhere else in the game, so it reads the way the rest of it does. */
.pretune-tabs .btn.on { background: var(--bl-orange); border-color: transparent; color: #fff; }
/* 3.90 read 3.9 and 154 mph lost its h when the scrollbar sat on them. The
   padding that keeps the numbers clear of it is on .pretune-body now, which
   is what scrolls. */
.pretune-rows { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; }
/* The same minus and plus the Tune tab has, either side of each slider: a
   ratio is a two decimal number and a thumb on a phone is not that precise. */
.pretune-rows .gear-row { display: grid; grid-template-columns: 20px auto 1fr auto auto; align-items: center; gap: 6px; padding: 5px 0; }
.pretune-rows .gear-row input[type="range"] { min-width: 0; }
.pretune-rows .tune-row .slider-nudge { grid-column: 1 / -1; }
.pretune-rows .gear-row > span { font-size: 11px; font-weight: 800; color: var(--bl-muted); }
.pretune-rows .gear-row output { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--bl-orange); text-align: right; min-width: 92px; }
.pretune-rows .tune-row { padding: 8px 0; }
.pretune-rows .tune-row.locked { opacity: 0.55; }
.pretune-rows .tune-row.locked input, .pretune-rows .tune-row.locked .seg { pointer-events: none; }
.pretune-rows .lock-why { display: block; font-size: 10px; text-transform: none; letter-spacing: 0; color: var(--bl-warn); margin-top: 2px; }
/* The shop's signup log on The Lanes: who claimed a name, and on what day.
   Scrolled, because the useful shape of it is a long list of quiet days with
   the odd good one in it. */
.lane-signups { border: 1px solid var(--bl-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: rgba(214,30,59,0.06); }
.lane-signups > summary { cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bl-muted); list-style: none; }
.lane-signups > summary::-webkit-details-marker { display: none; }
.lane-signups > summary b { color: var(--bl-orange); font-size: 15px; font-family: var(--nums); font-variant-numeric: tabular-nums; }
.signup-days { max-height: 220px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.signup-day { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; border-top: 1px solid var(--bl-line); padding-top: 6px; }
.signup-day span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bl-text); }
.signup-day b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--bl-orange); text-align: right; }
.signup-day p { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--bl-muted); word-break: break-word; }
#modal-account .btn-row { gap: 8px; }
#modal-account .btn-row .btn { flex: 1 1 0; min-width: 0; font-size: 14px; padding: 12px 8px; white-space: nowrap; }
#modal-account #account-forgot { display: inline-block; align-self: flex-end; margin: -4px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--bl-muted); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.22); }
#modal-account #account-forgot:active { color: var(--bl-text); }
#modal-account .account-more { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--bl-line); display: flex; flex-direction: column; gap: 8px; }
#modal-account .account-more > span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bl-muted); }

/* Turbo bench: our units side by side on a car of the customer's choosing. */
.bench-pickers { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 4px; }
@media (min-width: 560px) { .bench-pickers { grid-template-columns: 1fr 1fr; } }
.bench-pickers select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bl-line); background: #0e1116; color: var(--bl-text); font: inherit; font-size: 14px; }
.section-title small { text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--bl-line); margin-left: 6px; }
.bench-lanes { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 10px; }
@media (min-width: 560px) { .bench-lanes { grid-template-columns: repeat(3, 1fr); } }
.bench-lane { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--bl-line); background: #14171c; color: var(--bl-muted); text-align: left; font: inherit; }
.bench-lane i { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--bench); }
.bench-lane b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-lane.filled b { color: var(--bl-text); }
.bench-lane em { flex: none; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bl-muted); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--bl-line); }
.bench-lane.on { border-color: var(--bench); box-shadow: inset 0 0 0 1px var(--bench); }
.bench-units .btn { min-height: 38px; padding: 6px 12px; font-size: 12.5px; }
.bench-graph { width: 100%; height: 200px; display: block; border-radius: 8px; background: #ebe6db; }
@media (min-width: 1024px) { .bench-graph { height: 260px; } }
.bench-cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
@media (min-width: 760px) { .bench-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
/* The stripe down the card is the color that unit carries on the graphs. */
.bench-cards .spec { margin-bottom: 0; }
.bench-cards .spec::before { background: var(--bench, var(--bl-orange)); }

/* A delivery from the shop: it stays on screen until it is read. */
/* A podium paid: the place big and colored for the step, the event named
   above it, the credits under. A payout used to come as a parcel slip. */
.gift-card.podium { border-color: var(--bl-orange); box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.25), 0 18px 48px rgba(0, 0, 0, 0.6); }
.gift-card.podium h2 { font-size: 22px; }
.podium-place { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; color: var(--bl-orange); }
.podium-place svg { align-self: center; }
.podium-place b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.podium-place small { font-size: 13px; color: var(--bl-muted); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gift-card.podium.gold .podium-place { color: #ffc23d; }
.gift-card.podium.silver .podium-place { color: #d8dde6; }
.gift-card.podium.bronze .podium-place { color: #d58a52; }
.gift-card .gift-from { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bl-orange); }
.gift-card h2 { margin: 0; }
.gift-card p { font-size: 14px; line-height: 1.5; }
.gift-card blockquote { margin: 2px 0 0; padding: 10px 12px; border-left: 3px solid var(--bl-orange); background: #14171c; border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.5; font-style: italic; }

/* What changed since this garage was last opened: shown once, then remembered. */
.news-card .gift-from { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bl-orange); }
.news-card h2 { margin: 0; }
.news-card .news-rel { margin-top: 12px; }
.news-card .news-rel:first-child { margin-top: 4px; }
.news-card .news-ver { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); }
/* A notice from the shop is not tied to a release, so it says where it came
   from where the version number would be. */
.news-card .news-ver.shop { color: var(--bl-red); }
.news-card .news-head { margin: 1px 0 6px; font-size: 15px; font-weight: 800; }
.news-card ul { margin: 0; padding: 0; list-style: none; }
.news-card li { position: relative; padding: 0 0 0 16px; margin-bottom: 6px; font-size: 14px; line-height: 1.45; text-align: left; }
.news-card li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--bl-orange); }
/* A rules card with two halves: what the thing is, and how to actually do it.
   Kirk, about index racing: "we have a lot of new people that don't really
   understand" it. The rules were all there and the method was not, and the
   two want telling apart rather than running into one list of thirteen. */
.news-card .news-rel h3 { margin: 18px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bl-orange); text-align: left; }
.news-card .news-rel > p.fine { margin: 0 0 10px; text-align: left; }
.news-card .news-cars { color: var(--bl-orange); font-weight: 800; }
.news-card #news-body { max-height: 46vh; overflow-y: auto; }
/* A crew of eight over a board of many, or a long rule card, runs past a
   phone: the body scrolls and the buttons stay in reach. */
.modal-card.news-card { max-height: 90vh; }
#crews-body, #index-body, #rules-body { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }

/* A worn motor: the note carries its own repair button. */
.car-note .btn { margin-top: 8px; }

/* ------------------------------------------------------------- Desktop
   The game is built for a phone held upright, and on a wide monitor that
   layout came apart: menu rows ran the full 1920 with the wordmark small in
   a corner, the garage gave half the screen to a spec sheet, and every sheet
   stretched its text to the width of the glass.
   
   So above a laptop's width the whole thing becomes a centered column with the
   proportions it has on a phone, the menu gets a proper title stage with the
   logo big in the middle, and the garage keeps the car large on the left with
   the panel a fixed column on the right. Nothing is added or taken away: it
   is the same game, laid out for the screen it is on. */
@media (min-width: 1024px) {
  :root { --sheet-max: 940px; --menu-max: 1160px; }

  /* Every sheet screen: one centered column instead of full bleed text. */
  .screen.sheet { align-items: center; padding-left: calc(var(--safe-left) + 24px); padding-right: calc(var(--safe-right) + 24px); }
  .screen.sheet > * { width: 100%; max-width: var(--sheet-max); }
  .screen.sheet > .title-hero { max-width: none; }
  /* The header runs the full width of the glass like the menu's bar; the sheet's column sits under it. */
  .screen.sheet > .sheet-head:not(.overlay) { max-width: none; margin-left: calc(-1 * (var(--safe-left) + 24px)); margin-right: calc(-1 * (var(--safe-right) + 24px)); padding-left: 32px; padding-right: 32px; }
  #app:not([data-music="hide"]) .screen.sheet > .sheet-head:not(.overlay) { padding-right: 76px; }

  /* Title: the logo carries the screen. */
  .title-logo { width: min(58vw, 720px); }
  .title-wrap { gap: 20px; }
  #screen-title { padding-bottom: calc(var(--safe-bottom) + 64px); }

  /* ------------------------------------------------------------ Menu
     The band runs the full width of the glass, like the title card of a game;
     everything under it is a centered column. */
  .screen.menu { align-items: center; padding-left: 0; padding-right: 0; }
  .screen.menu > *:not(.menu-hero) { max-width: var(--menu-max); margin-left: auto; margin-right: auto; }
  /* The bar runs the full width of the glass like the band; its contents sit in from the edges. */
  .screen.menu > .menu-top { max-width: none; margin: 0; padding-left: 32px; padding-right: 76px; }
  #app[data-music="hide"] .screen.menu > .menu-top { padding-right: 32px; }
  .screen.menu > .menu-hero { max-width: none; width: 100%; min-height: 230px; border-radius: 0 0 28px 28px; padding: 18px 32px 26px; margin-bottom: 20px; justify-content: center; align-items: center; text-align: center; gap: 26px; }
  /* The watermark grows with the band. */
  .menu-hero-img { width: 460px; opacity: 0.07; }
  /* The same centered lockup, scaled up for the room. */
  .menu-logo { width: min(30vw, 400px); filter: drop-shadow(0 8px 26px rgba(0,0,0,0.7)); }
  .menu-hero-car { gap: 5px; }
  .menu-car-name { font-size: 34px; }
  .menu-car-spec { font-size: 14px; }
  .menu-greeting { font-size: 13px; }
  .menu-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .screen.menu .btn.menu.primary { min-height: 108px; padding: 18px 24px; }
  .screen.menu .btn.menu.primary .menu-title { font-size: 30px; }
  .menu-tiles { gap: 14px; margin-top: 14px; }
  .btn.tile { min-height: 108px; padding: 16px 18px; }
  .btn.tile svg { width: 26px; height: 26px; }
  .btn.tile.wide { min-height: 78px; }
  .btn.tile.small { min-height: 84px; }
  /* Hover: a mouse expects something to happen under it. */
  .btn:hover { background: var(--bl-panel-2); }
  .btn.primary:hover { filter: brightness(1.08); }
  .btn.tile:hover { border-color: var(--bl-orange); }
  .lane:hover, .tab:hover { border-color: var(--bl-orange); color: var(--bl-text); }

  /* ---------------------------------------------------------- Garage
     The car gets the room; the panel is a column of a readable width. */
  .turntable { right: 560px; top: calc(var(--safe-top) + 74px); height: auto; bottom: 0; padding: 0 34px; }
  .garage-panel { left: auto; width: 560px; right: 0; top: 0; bottom: 0; border-radius: 0; border-top: 0; border-left: 3px solid var(--bl-orange); }
  .garage-panel .tabs { padding-top: calc(var(--safe-top) + 4px); }
  .tab-body { padding: 16px 20px 18px; }
  .garage-actions { padding: 12px 20px calc(var(--safe-bottom) + 12px); }
  /* The head sits over the car, not over the panel. */
  .screen.garage .sheet-head.overlay { right: 560px; padding-right: 14px; }
  .garage-loading { left: calc(50% - 280px); }
  .dyno-sheet canvas { height: 230px; }

  /* Race: the pads belong under a thumb on a phone. On a monitor they are a
     keyboard's job, so they shrink out of the way rather than filling a
     quarter of a 1080 screen. */
  .drag-controls { left: 50%; right: auto; transform: translateX(-50%); width: min(720px, 70vw); }
}

/* Very wide monitors: stop the garage from putting the car a meter from the panel. */
@media (min-width: 1700px) {
  .turntable { right: 620px; }
  .garage-panel { width: 620px; }
  .screen.garage .sheet-head.overlay { right: 620px; padding-right: 14px; }
  .garage-loading { left: calc(50% - 310px); }
}

/* Grudge Night: the week's card on the strip and its tile on the menu. The
   card borrows the index card's bones; the grid is the week at a glance. */
#menu-night b { color: var(--bl-ok); font-weight: 700; }
/* The same tile the daily's numbers sit in, so a fact reads the same
   wherever it is: on the night, in an index, on the cup's card. */
.night-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; align-items: start; }
.night-grid > div { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 12px; padding: 10px 11px; min-width: 0; }
.night-grid span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-dim); }
.night-grid b { display: block; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 15px; margin-top: 2px; overflow-wrap: anywhere; line-height: 1.2; }
.night-grid small { display: block; font-size: 10.5px; color: var(--bl-muted); margin-top: 2px; overflow-wrap: anywhere; line-height: 1.25; }
.night-grid .muted { color: var(--bl-muted); font-family: var(--font); font-size: 12px; }
/* Track Day: the night, a row per class, the car picker and who is in. */
.td-where { font-size: 12px; color: var(--bl-muted); margin-top: 2px; }
.td-where .class-chip { margin-left: 4px; }
.td-classes { display: grid; gap: 6px; margin: 4px 0 8px; }
.td-class { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; padding: 8px 10px; }
.td-class.mine { border-color: rgba(52, 199, 89, 0.45); }
.td-class-head { display: flex; align-items: baseline; gap: 8px; }
.td-class-head b { font-size: 15px; }
.td-class-head span { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--bl-muted); }
.td-class-head em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--bl-orange); font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 13px; }
.td-rule { font-size: 11.5px; color: var(--bl-muted); margin: 3px 0 0; line-height: 1.35; }
.td-mine { font-size: 12.5px; margin: 4px 0 0; }
.td-mine.muted { color: var(--bl-muted); }
.td-mine svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--bl-ok); }
.td-class .index-boards { margin-top: 6px; }
.td-class .index-boards .btn { min-height: 34px; }
.td-class .index-boards .btn:only-child, .td-shop .btn:only-child { grid-column: 1 / -1; }
.td-foot { margin-bottom: 4px; }
.td-shop-label { margin: 8px 0 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-dim); }
.td-picks { display: grid; gap: 6px; margin-top: 8px; }
.td-pick { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; padding: 6px 10px; color: var(--bl-text); font: inherit; cursor: pointer; }
.td-pick.on { border-color: rgba(52, 199, 89, 0.55); }
.td-pick:disabled { opacity: 0.45; cursor: default; }
.td-pick span { display: flex; flex-direction: column; min-width: 0; }
.td-pick b { font-size: 14px; }
.td-pick small { font-size: 11.5px; color: var(--bl-muted); }
.td-pick .car-art.td-pick-art { width: 76px; height: 38px; max-width: none; margin: 0; object-fit: contain; flex: none; aspect-ratio: auto; }
.td-who-head { display: flex; justify-content: space-between; margin: 10px 0 4px; font-size: 14px; }
.td-who-head span { font-family: var(--nums); color: var(--bl-muted); font-size: 12px; }
.td-who { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }

/* Track Day, live: the bleachers and the call. */
.td-live { display: grid; gap: 6px; margin: 2px 0 8px; }
.td-you { display: grid; gap: 2px; background: var(--bl-panel); border: 1px solid var(--bl-line); border-left: 3px solid var(--bl-muted); border-radius: 10px; padding: 8px 10px; }
.td-you > b { font-size: 15px; }
.td-you > span { font-size: 12.5px; color: var(--bl-muted); line-height: 1.35; }
.td-you > span b { color: var(--bl-text); }
.td-you.on { border-left-color: var(--bl-ok); }
.td-you.called { border-color: var(--bl-orange); border-left-color: var(--bl-orange); background: linear-gradient(160deg, rgba(214, 30, 59, 0.22), var(--bl-panel) 70%); }
.td-you.called > b { color: #fff; font-family: var(--game); font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; font-size: 18px; }
.td-you .btn { margin-top: 6px; }
.td-line { background: #0d0f13; border: 1px solid var(--bl-line); border-radius: 10px; padding: 8px 10px; }
.td-line-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.td-line-head span, .td-next > span, .td-feed > span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-orange); }
.td-line-head b { font-size: 13px; }
.td-line-head em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--bl-muted); }
.td-line-head em b { color: var(--bl-text); font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 14px; }
.td-line.idle .td-line-head b { color: var(--bl-muted); font-weight: 600; }
.td-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.td-lane { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: var(--bl-panel); border: 1px solid var(--bl-line); min-width: 0; }
.td-lane small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-dim, var(--bl-muted)); }
.td-lane b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-lane span { font-size: 11.5px; color: var(--bl-muted); font-family: var(--nums); font-variant-numeric: tabular-nums; }
.td-lane.staged { border-color: rgba(255, 194, 26, 0.6); }
.td-lane.staged span { color: #ffc21a; }
.td-lane.single { opacity: 0.55; }
.td-next, .td-feed { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; padding: 7px 10px; display: grid; gap: 3px; }
.td-next p { margin: 0; font-size: 13px; display: flex; gap: 6px; align-items: baseline; }
.td-next p i, .td-round p i { font-style: normal; font-size: 11px; color: var(--bl-muted); }
.td-next p small { margin-left: auto; font-size: 11px; color: var(--bl-muted); }
.td-next p.mine, .td-round p.mine { color: var(--bl-ok); }
.td-board { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; padding: 7px 10px; }
.td-board-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.td-board-head b { font-size: 14px; }
.td-board-head span { font-size: 11.5px; color: var(--bl-muted); }
.td-board table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.td-board th { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-muted); text-align: left; padding: 2px 4px; }
.td-board td { padding: 3px 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-family: var(--nums); font-variant-numeric: tabular-nums; }
.td-board td:nth-child(2) { font-family: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; width: 50%; }
.td-board td:first-child { width: 22px; color: var(--bl-muted); }
.td-board tr.mine td { color: var(--bl-ok); }
.td-round { display: grid; gap: 2px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.td-round:first-of-type { border-top: 0; }
.td-round small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); }
.td-round p { margin: 0; font-size: 13px; display: flex; gap: 6px; align-items: baseline; }
.td-round span.won { font-weight: 800; }
.td-round span.lost { color: var(--bl-muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.25); }
.td-ran { display: grid; grid-template-columns: 1fr; gap: 1px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.td-ran:first-of-type { border-top: 0; }
.td-ran > i { font-style: normal; font-size: 10.5px; color: var(--bl-muted); }
.td-ran p { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.td-ran p em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; color: var(--bl-muted); }
.td-ran p.won b { color: var(--bl-ok); }
.td-ran p.won b::after { content: ' W'; font-size: 10px; }
.td-ran small { font-size: 11px; color: var(--bl-muted); }
.td-dial { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.td-dial label { font-size: 12.5px; }
.td-dial input { width: 84px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--bl-line); background: #0e1116; color: var(--bl-text); font-family: var(--nums); font-size: 16px; }
.td-call { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 8, 0.78); backdrop-filter: blur(3px); }
.td-call[hidden] { display: none; }
.td-call-card { width: min(360px, 100%); text-align: center; background: linear-gradient(170deg, #3a0c16, var(--bl-ink) 65%); border: 2px solid var(--bl-orange); border-radius: 14px; padding: 18px 16px 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); animation: td-call-in 0.25s ease-out; }
.td-call-kick { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.td-call-card h2 { margin: 4px 0 2px; font-family: var(--game); font-style: italic; text-transform: uppercase; font-size: 30px; letter-spacing: 0.02em; color: #fff; }
.td-call-card p { margin: 4px 0; font-size: 14px; }
.td-call-clock { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 56px; font-weight: 800; line-height: 1; margin: 8px 0 12px; color: #ffc21a; }
.td-call-card .btn { width: 100%; min-height: 50px; font-size: 18px; }
.td-call-card .fine { color: var(--bl-muted); font-size: 12px; margin-top: 8px; }
.td-watch { margin-top: 8px; width: 100%; }
.td-tower { background: #17110a; border: 1px solid rgba(255, 194, 26, 0.45); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; }
.td-tower-head { display: flex; align-items: baseline; gap: 8px; }
.td-tower-head span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ffc21a; }
.td-tower-head em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--bl-muted); }
.td-tower-pair { margin: 0; font-size: 13px; }
.td-tower-pair i { font-style: normal; color: var(--bl-muted); font-size: 11px; }
.td-tower-pair small { display: block; font-size: 11px; color: var(--bl-muted); }
.td-tower-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.td-tower-btns .btn { flex: 1 1 auto; min-height: 34px; }
.td-tower-btns .btn.danger { border-color: rgba(214, 30, 59, 0.6); color: #ff8a9a; }
.td-tower-sub { margin: 2px 0 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); }
.td-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.td-flags small { display: block; color: var(--bl-muted); font-family: var(--nums); font-variant-numeric: tabular-nums; }
.td-lanes-vs { margin: 4px 0 6px; font-size: 18px; }
.td-lanes-vs i { font-style: normal; font-size: 12px; color: var(--bl-muted); margin: 0 6px; }
.earned.td-earned { font-size: 15px; color: var(--bl-muted); }
@keyframes td-call-in { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.td-who li { display: grid; grid-template-columns: 1fr 1.3fr auto auto; gap: 8px; align-items: baseline; font-size: 12.5px; }
.td-who li.mine b { color: var(--bl-ok); }
.td-who span { color: var(--bl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-who em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; }
.td-who i { font-style: normal; font-size: 11px; color: var(--bl-dim); }
.chat-notice { margin: 8px 4px; padding: 10px 12px; border: 1px solid rgba(214, 30, 59, 0.55); border-radius: 12px; background: linear-gradient(180deg, rgba(214, 30, 59, 0.16), rgba(214, 30, 59, 0.06)); text-align: center; }
.chat-notice b { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-accent, #ff4d5e); }
.chat-notice p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.35; }
.chat-notice .btn { margin-top: 8px; }
.td-rules h4 { margin: 14px 0 4px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bl-accent, #ff4d5e); }
.td-rules ul { margin: 0; padding-left: 18px; }
.td-rules li { font-size: 13.5px; line-height: 1.4; margin: 3px 0; }
.td-rules li.td-eg { list-style: none; margin-left: -18px; padding: 6px 9px; border-radius: 8px; background: var(--bl-panel); color: var(--bl-muted); font-size: 12.5px; }
.td-rules li.td-eg::before { display: none; }
.td-rules .td-when { margin: 0 0 4px; font-size: 13.5px; line-height: 1.4; }
.chat-bot { display: inline-flex; align-items: center; gap: 6px; }
.chat-bot img { width: 22px; height: 22px; border-radius: 6px; }
.chat-bot b { display: inline; font-size: 13px; letter-spacing: 0.02em; text-transform: none; color: var(--bl-text); }
.chat-bot em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; padding: 1px 5px; border-radius: 4px; background: var(--bl-accent, #d61e3b); color: #fff; }
.night-match { background: var(--bl-ink); border: 1px solid var(--bl-orange); border-radius: 10px; padding: 10px 12px; margin: 2px 0 6px; }
.night-match b { font-size: 15px; }
.night-match .fine { margin-top: 4px; }
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 8px; padding: 0; border-radius: 50%; border: 1px solid var(--bl-line); background: var(--bl-panel); color: var(--bl-muted); cursor: pointer; vertical-align: middle; flex: none; }
.info-btn:active { background: var(--bl-panel-2); transform: scale(0.94); }
.mode-card h3 .info-btn { margin-left: 8px; }
.index-pair.won span:first-child, .index-pair span.won { color: var(--bl-ok); font-weight: 700; }
.index-pair span.mine { color: var(--bl-text); }

/* Crews: the team rivalry. The modal, the board rows, the code and the chip by a name. */
#menu-crews b { color: var(--bl-ok); font-weight: 700; }
.crew-chip { display: inline-block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: rgba(214, 30, 59, 0.16); color: #ff8595; margin-left: 6px; vertical-align: 1px; font-style: normal; font-weight: 700; }
.crew-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crew-head b { font-size: 18px; }
.crew-head .chip { margin-left: 0; }
.crew-code { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.crew-code .code { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 800; letter-spacing: 0.18em; }
.crew-code .fine { flex: 1; }
.crew-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.crew-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; background: var(--bl-ink); border: 1px solid var(--bl-line); border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.crew-row.mine { border-color: var(--bl-orange); }
.crew-row.member { grid-template-columns: 1fr auto; }
.crew-row .place { font-family: var(--nums); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--bl-muted); }
.crew-chip.you { background: rgba(255, 255, 255, 0.08); color: var(--bl-muted); }
.crew-standing { margin-bottom: 2px; }
.crew-standing b { color: var(--bl-text); }
.crew-row .place.top { color: var(--bl-orange); }
.crew-row small { display: block; color: var(--bl-muted); font-size: 10px; }
.crew-row .score { font-family: var(--nums); font-variant-numeric: tabular-nums; text-align: right; }
.crew-row .score.short { color: var(--bl-muted); font-family: var(--font); font-size: 11px; }
.crew-row .btn.small { min-height: 26px; padding: 2px 8px; font-size: 11px; }
.crew-forms { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.crew-forms .row { display: flex; gap: 6px; align-items: center; }
.crew-forms input { flex: 1; min-width: 0; }
.crew-forms .code-input { max-width: 120px; }
/* The code and its button one height, on one line. */
.crew-forms .row:has(> .code-input) { align-items: stretch; }
.crew-forms .row:has(> .code-input) > .btn { display: flex; align-items: center; }
.trophy-go { width: 100%; margin-top: 12px; }
.crew-section { margin-top: 12px; }
.crew-section h3 { margin: 0 0 6px; }
#lb-crews-body .crew-list { margin: 6px 0 2px; }
/* The crews page. The card it grew out of had one column and no room; the
   page has tabs, so a row can carry the way into a crew as well as its time. */
.crews-page h2 { margin-bottom: 2px; }
.crews-page #crews-standing { margin: 0 0 8px; }
.crews-page #crews-standing b { color: var(--bl-text); }
.crew-tabs { margin-bottom: 10px; position: sticky; top: 0; z-index: 2; background: var(--bl-bg); }
.tab-badge { display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 4px; border-radius: 8px; background: var(--bl-orange); color: #12100f; font-size: 10px; font-style: normal; font-weight: 800; line-height: 16px; text-align: center; vertical-align: 1px; }
.crew-row .crew-way { text-align: right; }
.crews-page .crew-row { grid-template-columns: 24px 1fr auto auto; }
.crews-page .crew-row.member, .crews-page .crew-row.ask { grid-template-columns: 1fr auto; }
.crews-page .crew-row.noplace { grid-template-columns: 1fr auto auto; }
.crew-row.ask { border-color: rgba(255, 138, 0, 0.35); }
.crew-answer { display: flex; gap: 6px; }
.crew-door { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.crew-door .btn.small.on { border-color: var(--bl-orange); color: var(--bl-text); }
.crew-section h3 .crew-chip { vertical-align: 2px; }

/* The number on the Room tile. Beside the name, not in the corner: the
   corner is the Shop tag's, and the two landed on top of each other there. */
.tile-new { min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--bl-red); color: #fff; font-style: normal; font-weight: 800;
  font-size: 11px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.tile-new[hidden] { display: none; }

/* Nods. The count belongs to the pass, so it sits with the time, and the
   whole thing is deliberately quiet: this is a nod across a pit lane, not a
   score. There is no style in here for a per-player total because there is
   no such number anywhere in the game. */
.nod-count { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px 1px 5px;
  border-radius: 999px; border: 1px solid var(--bl-line); color: var(--bl-muted);
  font-style: normal; font-weight: 700; font-size: 10.5px; line-height: 15px; vertical-align: 2px; }
.nod-count.mine { border-color: var(--bl-orange); color: #ff8595; }
.nod-count svg { opacity: 0.9; }
.lb-nod { display: block; grid-column: 1 / -1; margin-top: 6px; }
.nod-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Outlined, not filled. .lb-row .btn.small fills every button in an opened
   row orange for Race this pass, and a nod is not that kind of button: it is
   a quiet thing you do on the way past, and four red blocks said otherwise. */
.nod-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px;
  border-radius: 8px; border: 1px solid var(--bl-line); background: transparent; color: var(--bl-text);
  font-size: 12px; font-weight: 700; cursor: pointer; }
.nod-btn:hover { border-color: var(--bl-muted); }
.nod-btn.on { border-color: var(--bl-orange); color: #ff8595; background: rgba(214, 30, 59, 0.1); }
.nod-btn s { text-decoration: none; margin-left: 2px; padding-left: 7px; border-left: 1px solid var(--bl-line);
  font-variant-numeric: tabular-nums; opacity: 0.8; }
.nod-say { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.nod-say i { font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); }
.nod-word { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--bl-line);
  color: var(--bl-muted); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.nod-word:hover { border-color: var(--bl-orange); color: #ff8595; }
.nod-left { color: var(--bl-muted); font-size: 10.5px; }

.index-row .entry small { display: block; font-family: var(--font); font-size: 10px; color: var(--bl-muted); text-align: right; }
.night-actions .btn.on, .index-actions .btn.on { border-color: rgba(52, 199, 89, 0.5); color: #6ee89b; }

/* The daily challenge page. A page rather than a card so the whole day fits:
   what it is, what it pays, who has beaten it, who took it yesterday, and the
   setup, with the button that starts it held at the foot of the screen. */
.daily-page { padding-bottom: 0; }
/* The daily in the home screen's language: a sentence case title, the clock as a chip under it, the rule in the amber the menu uses for a rule, eyebrows over the board and the setup, chips for the setup's tabs. */
.daily-page h2 { font-size: 19px; font-weight: 800; text-transform: none; letter-spacing: -0.01em; line-height: 1.15; margin: 4px 0 2px; text-wrap: balance; }
.daily-page .daily-sub { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); margin: 16px 2px 4px; }
.daily-when { margin: 6px 0 0; }
.daily-clock { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #f0b429; white-space: normal; line-height: 1.35; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(240,180,41,0.45); background: rgba(240,180,41,0.07); font-variant-numeric: tabular-nums; max-width: 100%; }
/* It says the turn on this phone's clock too since 3.67.242, which is longer
   than a phone's width: it wraps to a second line rather than losing the end. */
.daily-clock svg { flex: none; }
.daily-clock b { color: #f0b429; font-weight: 800; }
/* The rule as a banner. Kirk: a modifier like capped boost should be more
   obvious; the small yellow text blended in. */
.rule-banner { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 4px; padding: 12px 14px; color: #f0b429; background: linear-gradient(90deg, rgba(240,180,41,0.2), rgba(240,180,41,0.06)); border: 1px solid rgba(240,180,41,0.55); border-left: 5px solid #f0b429; clip-path: var(--cut, none); }
.rule-banner[hidden] { display: none; }
.rule-banner > svg { flex: none; width: 30px; height: 30px; margin-top: 2px; }
.rule-banner > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rule-banner small { font-family: var(--game, inherit); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #f0b429; }
.rule-banner b { font-family: var(--game, inherit); font-weight: 900; font-style: italic; font-size: 26px; line-height: 1.05; text-transform: uppercase; color: #fff; letter-spacing: 0.01em; }
.rule-banner span { font-size: 13px; line-height: 1.4; color: #e9d9b0; }
.rule-banner.off { color: #9aa0aa; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); border-left-color: #9aa0aa; }
.rule-banner.off small, .rule-banner.off span { color: #b7bcc4; }
.rule-banner.open { color: #3ecf8e; background: linear-gradient(90deg, rgba(62,207,142,0.14), rgba(62,207,142,0.03)); border-color: rgba(62,207,142,0.4); border-left-color: #3ecf8e; }
.rule-banner.open small { color: #3ecf8e; }
.rule-banner.open b { font-size: 22px; }
.rule-banner.open span { color: #c9e9d8; }
/* What the day is worth, at a glance: four small tiles rather than a sentence
   nobody reads before a run. */
.daily-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 2px; }
.daily-stats .dstat { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.daily-stats .dstat small { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-dim); }
.daily-stats .dstat b { display: block; font-size: 17px; font-family: var(--nums); font-variant-numeric: tabular-nums; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-stats .dstat span { display: block; font-size: 11px; color: var(--bl-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Yesterday's three, and what they were paid for it. */
.daily-past { margin: 10px 0 2px; border: 1px solid var(--bl-line); border-radius: 12px; background: var(--bl-panel); overflow: hidden; }
.daily-past .pb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 10px 5px; border-bottom: 1px solid var(--bl-line); }
.daily-past .pb-head b { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
.daily-past .pb-head span { font-size: 12px; color: var(--bl-dim); font-family: var(--nums); font-variant-numeric: tabular-nums; }
.daily-past ol { list-style: none; margin: 0; padding: 0; }
.daily-past li { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 8px; align-items: baseline; padding: 6px 10px; font-size: 13px; }
.daily-past li + li { border-top: 1px solid rgba(255,255,255,0.05); }
.daily-past li i { font-style: normal; color: var(--bl-dim); font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; }
.daily-past li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-past li em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; }
.daily-past li u { text-decoration: none; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--bl-orange); }
.daily-past li.mine { background: rgba(214,30,59,0.12); }
.daily-past li.mine b { color: var(--bl-orange); }
.daily-past .pb-note { padding: 7px 10px; font-size: 12px; color: var(--bl-dim); }
/* The page scrolls; this does not. Whatever the screen and however long the
   setup runs, the way to start the run is at the foot of it. */
/* The three at the top are the three; the rest of the day is a tap away. */
.daily-full { width: 100%; margin-top: 4px; background: none; border: 0; color: #9db7ff; font-size: 12.5px; font-weight: 700; letter-spacing: 0; min-height: 36px; }
.daily-page .go-bar { position: sticky; bottom: 0; z-index: 3; margin-top: 12px; padding: 12px 0 calc(14px + var(--safe-bottom)); background: linear-gradient(180deg, rgba(15,17,21,0) 0%, #0f1115 22%); }
.daily-page .go-bar .btn { width: 100%; font-size: 16px; padding: 14px 18px; }
.daily-page .pretune-rows { max-height: none; overflow: visible; padding-right: 0; }

/* The trophy case. What this game has won rather than how quick it has been:
   the three metals at the top, then where they came from, then the recent
   ones with the day on them. */
.trophy-who { color: var(--bl-muted); font-size: 13px; margin: 2px 0 10px; }
.trophy-empty { color: var(--bl-muted); font-size: 14px; line-height: 1.5; margin-top: 10px; }
.trophy-note { color: var(--bl-dim); margin: 14px 0 20px; line-height: 1.5; }
.medals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.medal { background: #0e1116; border: 1px solid var(--bl-line); border-radius: 12px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.medal b { font-size: 26px; font-family: var(--nums); font-variant-numeric: tabular-nums; }
.medal small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-dim); }
.medal.p1 { border-color: rgba(232,185,35,0.45); }
.medal.p2 { border-color: rgba(194,204,214,0.35); }
.medal.p3 { border-color: rgba(193,120,60,0.4); }
.trophy-rows { display: flex; flex-direction: column; gap: 6px; }
.trophy-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #0e1116; border: 1px solid var(--bl-line); border-radius: 10px; padding: 10px 12px; }
.trophy-row .tr-what b { display: block; font-size: 14px; }
.trophy-row .tr-what small { display: block; font-size: 11.5px; color: var(--bl-dim); margin-top: 1px; }
.trophy-row .tr-count { display: flex; align-items: center; gap: 4px; flex: none; }
.trophy-row .tr-count em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 13px; margin-right: 6px; }
.trophy-recent { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.trophy-recent li { display: grid; grid-template-columns: 20px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
.trophy-recent li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trophy-recent li span { color: var(--bl-dim); font-size: 11.5px; }
.trophy-recent li em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--bl-orange); }
#trophy-canvas { position: absolute; left: -10000px; }

/* The strip along the foot of the menu on a phone.
   Five tiles in a four wide grid put the fifth on a row of its own, which
   looks like something went wrong rather than like a row of buttons. On a
   phone they are pinned to the bottom of the screen instead, where they stay
   while the menu scrolls, and the sentence under each one becomes a count in
   the corner because there is no room for a sentence. */
/* The five doors: a strip along the foot of every hub screen, at every
   width, where they stay put while the screen scrolls. Each hub sheet ends
   clear of it; show() measures the strip. Screens with a foot of their own
   (the garage's race doors, the daily's Line it up, the room's composer, the
   strip itself) do not carry it. */
#app[data-bar="on"] .screen.sheet { padding-bottom: max(88px, calc(var(--menu-bar-h, 0px) + 14px)); }
#app:not([data-bar="on"]) #app-bar { display: none; }
.menu-tiles.menu-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  margin: 0; gap: 2px; padding: 6px max(6px, calc(50% - 360px)) calc(6px + var(--safe-bottom));
  background: rgba(16,18,22,0.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--bl-line);
}
.menu-tiles.menu-bar .btn.tile.small {
  min-height: 54px; padding: 7px 2px 6px; background: none; border: 0; border-radius: 10px;
  grid-template-rows: 22px auto; gap: 3px; color: var(--bl-muted);
}
.menu-tiles.menu-bar .btn.tile.small svg { width: 21px; height: 21px; color: var(--bl-muted); }
.menu-tiles.menu-bar .btn.tile.small .tile-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0; }
/* The door you are behind is lit. */
.menu-tiles.menu-bar .btn.tile.small.on { color: var(--bl-text); }
.menu-tiles.menu-bar .btn.tile.small.on svg { color: var(--bl-orange); }
/* The sentence under the title has nowhere to go here: the number it was
   carrying sits on the icon instead. */
.menu-tiles.menu-bar .btn.tile.small .tile-sub { display: none; }
.menu-tiles.menu-bar .btn.tile.small { position: relative; }
.menu-tiles.menu-bar .btn.tile.small[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge);
  position: absolute; top: 3px; left: calc(50% + 5px);
  font-size: 9.5px; font-weight: 800; line-height: 14px; padding: 0 5px;
  border-radius: 999px; background: var(--bl-red); color: #fff; font-variant-numeric: tabular-nums;
}
.menu-tiles.menu-bar .btn.tile.small[data-badge="on"]::after { background: var(--bl-ok); }

/* A car the shop hands out rather than one on the lot. Said on the car and in
   the jump list, because on the shop account every car is owned and there was
   nothing to tell one kind from the other. */
.spec-brand .chip.gift { display: inline-block; margin-left: 8px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(214,30,59,0.16); color: #ff8595; border: 1px solid rgba(214,30,59,0.4); vertical-align: 1px; }

/* Under the name on a profile: where they race out of and the shop they run
   with. The badge is the shop's to give, so it is drawn as one rather than as
   more of their own text. */
.profile-who { font-size: 13px; color: var(--bl-muted); margin: 2px 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-who .sep { color: var(--bl-line-2); }
.profile-who .chip.verified { margin-left: 6px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(52,199,89,0.16); color: #6ee89b; border: 1px solid rgba(52,199,89,0.4); }

/* The room: a conversation with callouts in it. The stream scrolls and the
   line you type stays at the foot of the screen, the way every other room
   anybody has used works. */
/* The page itself does not scroll: the head is fixed, the talk scrolls inside
   its own pane, and the line you type sits on the floor of the screen where
   every messaging app anybody has used puts it. */
/* The keyboard is drawn over the bottom of the page rather than shortening it,
   so the room sits above whatever it is covering. --keyboard is zero until a
   keyboard is actually up, and on a browser with no visual viewport it stays
   zero and nothing moves. */
.chat-page { overflow: hidden; padding-bottom: calc(var(--safe-bottom) + 10px + var(--keyboard, 0px)); }
/* With the keyboard up the safe area at the foot is behind it, so counting it
   twice would leave a gap the size of a home bar under the box you type in. */
.keyboard-up .chat-page { padding-bottom: calc(10px + var(--keyboard, 0px)); }
.chat-page > .sheet-head { flex: none; }
.chat-page > .chat-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
/* Kirk: replying to somebody with the keyboard up, the callouts took most of
   what was left of the screen and the reply bar sat over them. With the
   keyboard up, or on a screen this short, each card on the board folds to a
   chip: the tag, who, the distance, the stake and the button, one line, so
   the talk gets the room back. The cards come back when the keyboard goes. */
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board { gap: 6px; padding-bottom: 0; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .chat-line.callout { flex: 0 0 auto; max-width: none; display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 9px; border-radius: 999px; border-left-width: 3px; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-top { margin: 0; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-top > span:not(.co-tag), :is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-top .chat-drop { display: none; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-main { margin: 0; gap: 6px; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-main b { font-size: 13px; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-main em { font-size: 12px; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-main small { display: none; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-who { flex-wrap: nowrap; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-who small, :is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-who .chat-face { display: none; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-who i { white-space: nowrap; }
/* The tag already says open, taken or ran; the sentence under it is for the card. */
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-pass, :is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .chat-card-result, :is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-state { display: none; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-act { margin: 0; gap: 6px; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .btn.small { padding: 4px 10px; font-size: 12px; min-height: 0; }
.chat-board { flex: none; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.chat-board::-webkit-scrollbar { height: 0; }
.chat-board .chat-line { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; margin: 0; }
.chat-stream { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 4px; overscroll-behavior: contain; }
/* A short conversation sits on the floor by the box you type in rather than
   floating at the top of an empty pane. A spacer that grows into the gap and
   shrinks to nothing once the talk fills the pane, because justify-content
   here would put the oldest lines above the scroll and out of reach. */
.chat-stream::before { content: ''; flex: 1 1 0; min-height: 0; }
.chat-line { background: #0e1116; border: 1px solid var(--bl-line); border-radius: 12px; padding: 9px 11px; }
/* A conversation reads the way a phone draws one: bubbles, yours down the
   right in the game's red and theirs down the left in gray, the corner nearest
   you squared off on the last of a run so each side has a shape as well as a
   color. A run of lines from one person sits close together and carries the
   name once, because it is one person talking rather than two taking turns. */
.chat-stream > .chat-line { position: relative; max-width: 82%; border: 0; border-radius: 18px; padding: 7px 11px 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.35); -webkit-tap-highlight-color: transparent; cursor: pointer; }
.chat-stream > .chat-line.theirs { align-self: flex-start; background: #232932; color: var(--bl-text); }
.chat-stream > .chat-line.mine { align-self: flex-end; background: linear-gradient(160deg, #d8203f, #a3162f); color: #fff; }
.chat-stream > .chat-line.theirs.last { border-bottom-left-radius: 5px; }
.chat-stream > .chat-line.mine.last { border-bottom-right-radius: 5px; }
.chat-stream > .chat-line.run-on { margin-top: -3px; }
.chat-stream > .chat-line.gone { opacity: 0.55; cursor: default; }
.chat-stream > .chat-line.gone p { font-style: italic; }
.chat-stream > .chat-line.held { filter: brightness(1.18); }
.chat-stream > .chat-line.flash { animation: chat-flash 1.4s ease-out; }
@keyframes chat-flash { 0% { box-shadow: 0 0 0 3px rgba(232,185,35,0.9); } 100% { box-shadow: 0 0 0 0 rgba(232,185,35,0); } }
/* A line that names you stands out on the way past. */
.chat-stream > .chat-line.mentioned { box-shadow: 0 0 0 1.5px rgba(232,185,35,0.75), 0 1px 2px rgba(0,0,0,0.35); }
.chat-line em.at { font-style: normal; font-weight: 800; color: #ffd24a; }
.chat-stream > .chat-line.mine em.at { color: #ffe08a; }
/* Nothing but emojis is drawn big and without a bubble, the way a phone does. */
.chat-stream > .chat-line.big { background: transparent; box-shadow: none; padding-top: 2px; }
.chat-stream > .chat-line.big > p { font-size: 40px; line-height: 1.15; }
.chat-stream > .chat-line.big.mentioned { box-shadow: none; }
.chat-stream > .chat-line.mine .chat-head { justify-content: flex-end; }
/* A callout card: a tag, the offer as the headline, who from and in what,
   then one line of state colored by whether it still wants anything. The
   color lives on a bar down the left and the tag rather than a border all
   the way round, which is what made the first one look like a warning. */
.chat-line.callout { border: 0; border-left: 4px solid #e8b923; background: #161a21; border-radius: 14px; padding: 8px 12px 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.chat-line.callout.taken { border-left-color: #6ea8ff; }
.chat-line.callout.done { border-left-color: #34c759; }
.co-top { margin-bottom: 4px; }
.co-left { font-style: normal; font-size: 10.5px; color: var(--bl-dim); margin-left: 6px; white-space: nowrap; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-left { display: none; }
.co-tag { font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #ffd24a; padding: 2px 7px; border-radius: 999px; background: rgba(232,185,35,0.14); }
.callout.taken .co-tag { color: #9ec4ff; background: rgba(110,168,255,0.14); }
.callout.done .co-tag { color: #6ee89b; background: rgba(52,199,89,0.14); }
.co-main { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 6px; }
.co-main b { font-size: 20px; font-weight: 900; letter-spacing: 0.01em; color: var(--bl-text); }
.co-main em { font-family: var(--nums); font-style: normal; font-size: 14px; font-weight: 700; color: #ffd24a; }
.co-main small { font-size: 11px; color: var(--bl-dim); margin-left: auto; white-space: nowrap; }
.co-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--bl-muted); }
.co-who b { color: var(--bl-text); }
.co-who small { font-size: 11.5px; color: var(--bl-dim); padding: 1px 6px; border-radius: 6px; border: 1px solid var(--bl-line); white-space: nowrap; }
.co-who i { font-style: normal; font-size: 11.5px; color: var(--bl-dim); }
.chat-line .co-state { margin: 8px 0 0; font-size: 12.5px; color: var(--bl-muted); }
.chat-line .co-state.open { color: #ffd24a; font-weight: 700; }
.chat-line .co-state.taken { color: #9ec4ff; }
.co-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.co-act .co-state { margin: 0; }
/* The pass to beat, on the card: the ghost's time and speed. */
.co-pass { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--bl-muted); }
.co-pass b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--bl-text); }
.co-pass i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9ec4ff; }
/* The callout sheet: three short sections, and it scrolls inside itself on a short phone. */
.modal-card.co-card { gap: 8px; max-height: min(92vh, 860px); overflow-y: auto; }
.co-sec { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 2px; border-top: 1px solid var(--bl-line); }
.co-sec h3 { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #9ec4ff; }
.co-carrow { display: flex; gap: 8px; align-items: stretch; }
.co-carrow select { flex: 1 1 auto; min-width: 0; }
.co-carrow .btn.small { flex: none; }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-search { position: relative; }
.co-search input { padding-right: 36px; }
.co-clear { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #1b2028; color: var(--bl-muted); font-size: 18px; line-height: 1; }
.co-clear[hidden] { display: none; }
.co-names { display: flex; flex-wrap: wrap; gap: 6px; }
.co-names[hidden] { display: none; }
.co-names button { border: 1px solid var(--bl-line); background: #14171c; color: var(--bl-text); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 13px; font-weight: 700; }
.co-names button.here { border-color: rgba(110,232,155,0.4); }
.co-names button.here::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bl-ok); margin-right: 6px; vertical-align: 1px; }
.co-names .fine { width: 100%; margin: 0; }

/* The pass on the callout dialog: attached, or the way to run one. */
.callout-pass { margin: 4px 0 8px; padding: 9px 11px; border-radius: 10px; background: #12161c; border: 1px solid var(--bl-line); }
.callout-pass p { margin: 0 0 6px; font-size: 13px; }
.callout-pass p b { font-family: var(--nums); font-variant-numeric: tabular-nums; }
.callout-pass .btn-row { margin: 0; }
.chat-line.result { border-color: rgba(52,199,89,0.35); background: rgba(52,199,89,0.06); }
/* A callout that has been run is settled: it stays on the board so the
   night reads back, but it stops asking for anything. */
.chat-line.callout.done .co-main b { color: var(--bl-muted); }
.chat-line p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-stream > .chat-line > p { margin: 0; }
/* A picture in the room: the shop's update, tap for full size. */
.chat-stream > .chat-line.photo { padding: 4px 4px 5px; max-width: 78%; }
.chat-stream > .chat-line.photo > .chat-head { padding: 3px 7px 0; }
.chat-stream > .chat-line.photo > p { padding: 4px 7px 0; }
.chat-stream > .chat-line.photo > .chat-foot { padding: 0 7px; }
.chat-img { display: block; width: 100%; max-height: 60vh; border-radius: 14px; overflow: hidden; background: #0e1116; }
.chat-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat-photo { flex: none; }
.chat-photo-view { position: fixed; inset: 0; z-index: 60; background: rgba(6,7,9,0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: calc(var(--safe-top, 0px) + 12px) 12px calc(var(--safe-bottom, 0px) + 12px); }
.chat-photo-view[hidden] { display: none; }
.chat-photo-view img { max-width: 100%; max-height: 82vh; border-radius: 10px; object-fit: contain; }
.chat-photo-view p { margin: 0; color: var(--bl-muted); text-align: center; }
.chat-line .fine { margin-top: 4px; }
.chat-line .row { margin-top: 7px; }
.chat-head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--bl-dim); }
/* The face and the name are one button: whose line it is. */
.chat-whois { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 2px 6px 2px 2px; margin: -2px -6px -2px -2px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.chat-whois:active { background: rgba(255,255,255,0.06); }
/* The Tuning School shield sits in its own slot after the name, so it got the
   row's gap and its own margin on top: 11 px off the check that sits inside
   the name 4 px from it. Kirk: why is there a weird space between the badges.
   The slot takes the gap back, so the two badges sit as close as the check
   sits to the name. */
.chat-whois .cert-slot { display: inline-flex; margin-left: -4px; }
.chat-whois .cert-slot .cert-mark { margin-left: 0; }
.chat-whois b { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.3); }
.chat-stream > .chat-line > .chat-head { margin: 0 0 3px; }
/* Every line is painted with its name on it. In a column of bubbles the side
   and the color already say whose a line is, and a name over every one of
   your own would be noise, so the repeats are put away here and taken back
   out on a desk, where the talk reads as a log instead. */
.chat-stream > .chat-line > .chat-head.quiet { display: none; }
/* The face beside a name, the same one that goes everywhere else a name shows. */
.chat-face { width: 20px; height: 20px; border-radius: 50%; flex: none; object-fit: cover; background: #0b0d11; border: 1px solid var(--bl-line); }
.who-row .chat-face { width: 24px; height: 24px; align-self: center; }
.chat-board .chat-face { width: 22px; height: 22px; }
/* The name gives way before the time and the cross do: on a callout card
   there is not room for a face, a long name and both, and the time is the part
   that cannot be guessed from context. */
.chat-head b { font-size: 12.5px; color: var(--bl-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-stream > .chat-line > .chat-head b { color: #ffb3bf; font-weight: 800; }
.chat-head span { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 11px; }
/* The clock in the corner of a bubble, small and out of the way. */
.chat-foot { display: flex; justify-content: flex-end; margin-top: 1px; }
.chat-time { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 10px; color: var(--bl-dim); line-height: 1; }
.chat-edited { font-size: 10px; font-style: italic; color: var(--bl-dim); line-height: 1; margin-right: 6px; }
.chat-stream > .chat-line.mine .chat-edited { color: rgba(255,255,255,0.72); }
.chat-stream > .chat-line.mine .chat-time { color: rgba(255,255,255,0.72); }
.chat-stream > .chat-line.big .chat-foot { display: none; }
/* The stamp between groups of lines: today just the clock, yesterday says
   so, then the day, then the date. */
.chat-day { align-self: center; flex: none; margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--bl-dim); }
/* The line a reply answers, quoted at the top of it. A tap goes to it. */
.chat-quote { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 5px; padding: 4px 8px 5px; border-left: 3px solid #ffd24a; border-radius: 8px; background: rgba(255,255,255,0.08); font-size: 12px; line-height: 1.3; cursor: pointer; }
.chat-stream > .chat-line.mine .chat-quote { background: rgba(0,0,0,0.22); border-left-color: #ffe08a; }
.chat-quote i { font-style: normal; font-weight: 800; color: #ffd24a; }
.chat-stream > .chat-line.mine .chat-quote i { color: #ffe08a; }
.chat-quote span { color: inherit; opacity: 0.85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The emojis people have put on a line, as chips under it. Yours is lit. */
.chat-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px -4px -9px; position: relative; z-index: 1; }
.chat-reacts .react { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; border: 1px solid var(--bl-line); background: #12161c; color: var(--bl-text); font: inherit; font-size: 13px; line-height: 1.5; cursor: pointer; }
.chat-reacts .react i { font-family: var(--nums); font-style: normal; font-size: 11px; font-weight: 700; color: var(--bl-muted); }
.chat-reacts .react.me { border-color: rgba(232,185,35,0.8); background: rgba(232,185,35,0.18); }
.chat-reacts .react.me i { color: #ffd24a; }
.chat-stream > .chat-line:has(.chat-reacts) { margin-bottom: 9px; }
.chat-drop { margin-left: auto; background: none; border: 0; color: var(--bl-dim); font-size: 17px; line-height: 1; padding: 0 2px; cursor: pointer; }
/* On your own lines the head is just a time and a cross, so the cross sits
   beside the time rather than being pushed the width of the bubble away. */
.chat-line.mine .chat-drop { margin-left: 4px; }
.chat-drop:hover { color: var(--bl-red); }
/* The pill for lines that landed below where you are reading. */
.chat-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(214,30,59,0.6); background: rgba(20,12,14,0.94); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,0.5); cursor: pointer; }
.chat-jump::before { content: '\2193'; margin-right: 6px; color: #ff7b93; }
.chat-jump[hidden] { display: none; }
/* Who is typing, with the dots a phone shows. */
.chat-typing { flex: none; margin: 0; padding: 4px 4px 0; font-size: 11.5px; color: var(--bl-dim); display: flex; align-items: center; gap: 6px; }
.chat-typing[hidden] { display: none; }
.chat-typing .dots { display: inline-flex; gap: 3px; align-items: center; }
.chat-typing .dots b { width: 5px; height: 5px; border-radius: 50%; background: var(--bl-dim); animation: chat-dot 1.2s infinite ease-in-out; }
.chat-typing .dots b:nth-child(2) { animation-delay: 0.2s; }
.chat-typing .dots b:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* The line being answered, above the box. */
.chat-reply { flex: none; display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 8px 6px 10px; border-left: 3px solid var(--bl-red); border-radius: 8px; background: rgba(255,255,255,0.06); }
.chat-reply[hidden] { display: none; }
.chat-reply-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; line-height: 1.3; }
.chat-reply-what i { font-style: normal; font-weight: 800; color: #ff7b93; }
.chat-reply-what span { color: var(--bl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply .chat-drop { margin-left: 0; }
/* The quick row of emojis over the box, and the grid behind the plus. */
/* The names offered while an @ is being typed: a row of chips over the
   emojis, the people in the room first, scrolling sideways past the edge. */
.chat-at { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 0; scrollbar-width: none; }
.chat-at::-webkit-scrollbar { height: 0; }
.chat-at[hidden] { display: none; }
.chat-at button { flex: none; border: 1px solid var(--bl-line); border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--bl-text); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-at button::before { content: '@'; color: #ffd24a; margin-right: 1px; }
.chat-at button.here { border-color: rgba(255,210,74,0.5); }
.chat-at button:active { background: rgba(255,255,255,0.14); }
.chat-emoji { flex: none; display: flex; gap: 2px; overflow-x: auto; padding: 6px 0 0; scrollbar-width: none; }
.chat-emoji::-webkit-scrollbar { height: 0; }
.chat-emoji button, .chat-emoji-more button { flex: none; width: 36px; height: 34px; border: 0; border-radius: 9px; background: transparent; font-size: 21px; line-height: 1; cursor: pointer; padding: 0; color: var(--bl-text); -webkit-tap-highlight-color: transparent; }
.chat-emoji button:active, .chat-emoji-more button:active { background: rgba(255,255,255,0.1); }
.chat-emoji button.more { font-size: 20px; font-weight: 700; color: var(--bl-dim); border: 1px solid var(--bl-line); margin-left: auto; }
.chat-emoji button.more.on { color: var(--bl-text); background: rgba(255,255,255,0.08); }
.chat-emoji-more { flex: none; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 4px 0 0; max-height: 152px; overflow-y: auto; }
.chat-emoji-more[hidden] { display: none; }
.chat-emoji-more button { width: auto; }
.chat-say { flex: none; display: flex; gap: 8px; padding: 8px 0 0; border-top: 0; background: transparent; }
/* The card that opens on a line: the emojis, then what else can be done. */
.chat-pop { position: fixed; z-index: 40; min-width: 240px; padding: 7px; border-radius: 16px; background: #161a21; border: 1px solid var(--bl-line); box-shadow: 0 10px 30px rgba(0,0,0,0.6); animation: chat-pop-in 0.14s ease-out; }
.chat-pop[hidden] { display: none; }
@keyframes chat-pop-in { from { opacity: 0; transform: translateY(4px) scale(0.97); } to { opacity: 1; transform: none; } }
.chat-pop .emojis { display: flex; gap: 1px; }
.chat-pop .emojis button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; font-size: 23px; line-height: 1; padding: 0; cursor: pointer; transition: transform 0.12s; }
.chat-pop .emojis button:hover, .chat-pop .emojis button:active { transform: scale(1.25); }
.chat-pop .emojis button.on { background: rgba(232,185,35,0.22); box-shadow: 0 0 0 1px rgba(232,185,35,0.7) inset; }
.chat-pop .acts { display: flex; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bl-line); }
.chat-pop .acts .btn { flex: 1 1 0; }
/* A card carrying its own result reads as one thing, so the result is drawn
   inside the callout rather than under it. */
.chat-card-result { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(52,199,89,0.3); }
.chat-card-result b { color: #6ee89b; }
.chat-board-empty { flex: none; margin: 0; }
/* Nothing up: what the board is for, and the button that puts one up. */
.chat-board.empty { scroll-padding-left: 0; }
.chat-board-cta { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.03); }
.chat-board-cta p { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.35; color: var(--bl-muted); }
.chat-board-cta b { color: var(--bl-text); font-size: 13px; }
.chat-board-cta .btn { flex: none; }
:is(html.keyboard-up, html.room-short) .chat-board.empty { display: none; }
/* A line that asks for a race, held: the callout offered instead. */
.chat-race-hint { flex: none; margin-top: 8px; padding: 9px 10px 9px 12px; border-left: 3px solid var(--bl-red); border-radius: 8px; background: rgba(255,255,255,0.06); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.chat-race-hint[hidden] { display: none; }
.chat-race-hint p { flex: 1 1 260px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.35; color: var(--bl-muted); }
.chat-race-hint b { color: var(--bl-text); font-size: 13px; }
.chat-race-acts { flex: none; display: flex; gap: 8px; margin-left: auto; }
/* Wide enough for two columns: the cards stand beside the talk instead of
   over it, which is what a board is for. */
@media (min-width: 900px) {
  .chat-page > .chat-body { flex-direction: row-reverse; gap: 14px; align-items: stretch; }
  .chat-board { flex: 0 0 330px; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 0 2px 0 0; }
  .chat-board .chat-line { flex: none; max-width: none; }
  .chat-board-cta { flex: none; }
  .chat-page > .chat-body > .chat-stream { border-right: 1px solid var(--bl-line); padding-right: 14px; }
  /* A share of the width is right on a phone and wrong on a desk: two thirds
     of a thousand pixels is a banner, and the photo went to 720 px. Capped,
     a line reads as a line and a picture as a picture. */
  .chat-stream > .chat-line { max-width: min(66%, 560px); }
  .chat-stream > .chat-line.photo { max-width: min(78%, 400px); }
  /* Nothing on the board: the talk keeps a column a conversation can be read
     down rather than spreading a thousand pixels, with one voice at the far
     left and the next at the far right and a gulf between them. */
  .chat-page > .chat-body:not(:has(.chat-board:not([hidden]))) > .chat-stream { max-width: 820px; margin-inline: auto; border-right: 0; padding-right: 0; }
}

/* The room on a desktop: who is in it down the left, the talk beside them.
   Kirk: there is a lot more real estate on a desktop than a phone, any way to
   have a list of the players in the chat on the left hand side. Make it look
   like a legit chat room, like the AOL days.

   So: a member list that is always up rather than behind a button, and the
   talk given the width it was being denied. The rail is the last thing in the
   markup and the first thing on the row, because a phone should reach the
   talk first and a screen reader should hear the room before the roster. */
.chat-rail { display: none; }
/* A sheet screen is a centered column of reading width, which is right for a
   page of text and wrong for a room: a roster, a log and a card board want
   the glass. Kirk: there is a lot more real estate on a desktop than a phone. */
@media (min-width: 1000px) {
  .screen.sheet.chat-page > * { max-width: none; }
}
@media (min-width: 1000px) {
  .chat-page > .chat-body { align-items: stretch; }
  /* The body is row-reverse from 900px up, so the board can sit to the right
     of the talk. A higher order is therefore further left, which is where
     Kirk asked for the roster. */
  .chat-rail {
    display: flex; flex-direction: column; gap: 8px; order: 2;
    flex: 0 0 210px; min-height: 0; overflow-y: auto;
    padding: 10px; border: 1px solid var(--bl-line); border-radius: 14px; background: #10131a;
  }
  .chat-rail h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bl-dim); font-weight: 700; }
  .chat-rail h3 em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--bl-muted); }
  .chat-rail .who-list { display: flex; flex-direction: column; gap: 2px; }
  /* A name in the rail is a row, not a card: an hour of them has to fit. */
  .chat-rail .who-row { padding: 5px 6px; border: 0; background: transparent; border-radius: 8px; gap: 7px; }
  .chat-rail .who-row:hover { background: #171b23; }
  .chat-rail .who-row.mine { background: rgba(214,30,59,0.10); }
  /* Two lines, not four columns: a name has to be readable and a 210px rail
     cannot hold a name, a car and a status side by side without cutting all
     three. The name and the light on the top line, the car under it. */
  .chat-rail .who-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "face name" "face car"; row-gap: 0; align-items: center; }
  .chat-rail .who-row .avatar, .chat-rail .who-row .chat-face { grid-area: face; }
  .chat-rail .who-row .dot { display: none; }
  .chat-rail .who-row b { grid-area: name; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-rail .who-row small { grid-area: car; font-size: 10.5px; color: var(--bl-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-rail .who-row em { display: none; }
  /* Racing or in the garage is a color on the name, not a word there is no
     room for. */
  .chat-rail .who-row:has(em:not(:empty)) b { position: relative; }
  /* The talk keeps its bubbles, and the pane it sits in takes what the
     roster leaves. Kirk asked for a room that reads like the AOL days and
     then, having lived with it: put the bubbles back on desktop. So the log
     is gone and what is left of the desktop work is the roster beside a
     conversation that looks the way it has always looked, on a phone and on
     a desk alike. Only the pane changes, and the cap that keeps two people
     talking near each other rather than a thousand pixels apart is the one
     already in the 900px block above, widened here to hold whether or not
     the board is up: given thirteen hundred pixels of pane the left bubble
     and the right one are half a screen apart and two people talking stop
     reading as one conversation. The rule at the foot of the roster is
     enough of a line between the talk and what is beside it. */
  .chat-page > .chat-body > .chat-stream { flex: 1 1 auto; min-width: 0; max-width: 820px; margin-inline: auto; border-right: 0; padding-right: 0; }
}
.chat-say textarea { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border-radius: 22px; border: 1px solid var(--bl-line); background: #0e1116; color: var(--bl-text); font: inherit; font-size: 16px; line-height: 22px; height: 46px; max-height: 120px; resize: none; overflow-y: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-say { align-items: flex-end; }
.chat-line p a.chat-link { color: #5cb8ff; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.chat-line.mine p a.chat-link { color: #fff; }
.chat-say .btn { flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 0; justify-content: center; }

/* The burndown: who is in the beams, who is not, and how long the one holding
   back has before the run is called off. It sits under the tree, where the
   driver is already looking. */
.burndown { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 190px); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; border-radius: 12px; background: rgba(12,14,18,0.82); border: 1px solid rgba(232,185,35,0.5); box-shadow: 0 6px 20px rgba(0,0,0,0.45); pointer-events: none; text-align: center; max-width: min(88vw, 420px); }
.burndown b { font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd24a; }
.burndown span { font-size: 12px; color: var(--bl-muted); line-height: 1.3; }
.burndown em { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; font-style: normal; font-weight: 700; color: var(--bl-red); }
.burndown[hidden] { display: none; }

/* The room's header doubles as the who button: the title, and under it how
   many people have the room open. */
/* The room's header: back at the left, the name and who is in it dead
   center, the controls in one group at the right. Kirk: the name and how
   many people are there should be centered, fix the menu buttons. They were
   five children of a space-between bar, so the name floated wherever the
   spare width put it (168 px left of center on a desk) and the two icons sat
   marooned in a gap of their own. Three columns with the sides the same
   width puts the middle one in the middle, whatever is in the other two. */
.sheet-head.chat-head { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.chat-head > [data-back] { grid-column: 1; }
.chat-head > .chat-who-btn { grid-column: 2; justify-self: center; }
.chat-head-tools { grid-column: 3; display: flex; align-items: center; gap: 6px; }
/* On a phone the name sits in the middle of what the two groups leave, which
   is the most center there is: the strip keeps clear of the music button in
   the corner, and three controls on the right of a 430 px screen leave no
   room to have it both ways. Given the width, it goes on the middle of the
   bar itself. */
@media (min-width: 700px) {
  /* grid-column auto on purpose: a grid child with a definite column takes
     that column as its containing block, which put the name on the middle of
     the gap between the two groups instead of the middle of the bar. With no
     placement the containing block is the bar's padding box. */
  .chat-head > .chat-who-btn { position: absolute; grid-column: auto; justify-self: auto; left: 50%; transform: translateX(-50%); }
}
/* Short of room the name gives way rather than shoving the controls off the
   bar: the shop carries a third one and a small phone has no spare width. */
.chat-who-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 560px) {
  .chat-head { gap: 6px; }
  .chat-head-tools { gap: 4px; }
  .chat-head-tools .btn.icon { width: 38px; min-height: 38px; }
  .chat-head-tools .btn.small { padding: 7px 11px; }
}
.chat-who-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.chat-who-btn span { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px; }
.chat-who-btn em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--bl-dim); }
.chat-who-btn em.live { color: #6ee89b; }
.chat-who-btn em.live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6ee89b; margin-right: 5px; vertical-align: middle; box-shadow: 0 0 6px rgba(110,232,155,0.8); }
.who-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; max-height: 44vh; overflow-y: auto; }
.who-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #0e1116; border: 1px solid var(--bl-line); cursor: pointer; }
.who-row:active { background: #161a21; }
.who-row b { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.3); }
.who-row.mine { background: rgba(214,30,59,0.1); border-color: rgba(214,30,59,0.3); }
.who-row .dot { width: 7px; height: 7px; border-radius: 50%; background: #6ee89b; flex: none; align-self: center; }
.who-row b { font-size: 13.5px; }
.who-row small { font-size: 11.5px; color: var(--bl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-row em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--bl-dim); white-space: nowrap; }

/* The photo, before you decide what to do with it. Shown at the shape it was
   taken at, which on a phone is tall, so it is held to a height rather than a
   width or it fills the card and pushes the buttons off. */
.photo-preview { display: block; width: auto; max-width: 100%; max-height: 46vh; margin: 10px auto 8px; border-radius: 10px; border: 1px solid var(--bl-line); background: #0b0d11; }

/* The Lot: every car in the game, cheapest first.
   A list rather than a grid of pictures, because there are no car pictures -
   the cars are models, and rendering forty thumbnails to open a screen is not
   a trade worth making on a phone. What a list can do that a turntable cannot
   is show twenty at once, which is the whole point of this screen. */
.lot-count { margin: 10px 14px 4px; font-size: 13px; color: var(--bl-muted); }
.lot-count b { color: var(--bl-text); font-variant-numeric: tabular-nums; }
.lot-count em { font-style: normal; color: var(--bl-orange); font-weight: 700; }
#lot-rows { padding: 4px 12px 24px; display: grid; gap: 8px; }
.lot-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 9px; align-items: center;
  background: var(--bl-ink); border: 1px solid var(--bl-line); border-radius: 10px;
  padding: 9px 11px; min-height: 44px;
}
/* The card body is the button; the action beside it is its own. A button
   inside a button does not survive the parser. */
.lot-open {
  display: grid; gap: 1px; text-align: left; min-width: 0;
  background: none; border: 0; padding: 0; margin: 0; color: var(--bl-text); font: inherit;
}
.lot-row .lot-when { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-dim); }
.lot-row .lot-name { font-size: 15px; font-weight: 800; line-height: 1.15; }
/* One line. With a picture taking a column the text has less room, and a
   two line engine-and-weight under a two line name is four lines for a row
   that is meant to be scanned. */
.lot-row .lot-spec { font-size: 11.5px; color: var(--bl-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lot-row .lot-act { display: flex; align-items: center; }
/* The car, cropped to the middle of its own photograph so every row shows the
   car rather than the shop around it. A row whose picture never arrives, or a
   car with no model yet, closes the column up instead of holding a gap. */
.lot-shot { width: 64px; height: 40px; object-fit: cover; object-position: 50% 58%; border-radius: 6px; background: #14171c; display: block; }
.lot-row.noshot { grid-template-columns: 1fr auto; }
/* A car you own is not the thing this screen is for, so it steps back. */
.lot-row.mine { opacity: 0.68; }
.lot-row.afford { border-color: rgba(214, 30, 59, 0.5); }
.lot-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--bl-line); color: var(--bl-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lot-chip.mine { color: var(--bl-ok); border-color: rgba(52, 199, 89, 0.5); }
.lot-chip.gift { color: var(--bl-orange); border-color: rgba(214, 30, 59, 0.45); }
.lot-chip svg { width: 13px; height: 13px; flex: none; }
/* Selling is a quiet action, not a red one: it is the way out of a car, not
   the thing the screen is urging. */
.lot-sell { color: var(--bl-muted); }
/* An extra choice on the guard card: a full width button above the row, so a
   short menu reads as a list of decisions rather than a wall of equals. */
.modal-card .sure-extra { width: 100%; margin-top: 8px; }

/* The room's own two strips: who it is open to, and why you cannot type. */
.chat-room-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--bl-line); font-size: 12px; color: var(--bl-muted); }
.chat-room-bar span { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.chat-room-bar span.on { color: var(--bl-ok); }
.chat-room-bar .btn { margin-left: auto; }
.chat-room-bar .btn + .btn { margin-left: 0; }
.chat-muted { margin: 0; padding: 9px 12px; background: rgba(214, 30, 59, 0.12); border-bottom: 1px solid rgba(214, 30, 59, 0.45); color: #f2c3cb; font-size: 12.5px; }
/* The same shape as the silenced line above it and none of the alarm: this is
   an offer, not a telling off, so it is the room's own gray with a gold edge
   rather than red. */
.chat-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 8px 12px; background: #14171c; border-bottom: 1px solid rgba(232,185,35,0.45); color: var(--bl-muted); font-size: 12.5px; }
/* On a phone the sentence and the button do not share a line without the
   sentence being squeezed into three: the text takes the row, the button and
   the cross sit under it at the right. */
@media (max-width: 560px) {
  .chat-nudge > span { flex: 1 1 100%; }
  .chat-nudge .btn { margin-left: auto; }
}
.chat-nudge[hidden] { display: none; }
.chat-nudge > span { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.chat-nudge .btn { flex: none; }
.chat-nudge-x { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--bl-dim); font-size: 18px; line-height: 1; cursor: pointer; }
.chat-nudge-x:hover { color: var(--bl-text); background: rgba(255,255,255,0.06); }
/* The dots on somebody else's line, for the shop. Quieter than the cross on
   your own, because it opens a decision rather than making one. */
.chat-drop.chat-mod { letter-spacing: 0.06em; }
.lot-head { display: flex; align-items: baseline; gap: 10px; }
.lot-head .lot-count { flex: 1; min-width: 0; }
.lot-sort { flex: none; margin: 10px 14px 4px 0; display: flex; align-items: center; }
.lot-sort select { font: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--bl-text); background: var(--bl-ink); border: 1px solid var(--bl-line); border-radius: 8px; padding: 6px 8px; min-height: 34px; }

/* The wide menu tiles: what it is, one small line of what that means, and the
   numbers on a row. They had grown into paragraphs with the live figures
   buried mid-sentence - Kirk: it seems like a lot of text, see how you can
   clean it up so it looks organized. A value with a word under it is scanned;
   the same value inside a sentence is read. */
.tile-what { display: block; font-size: 14px; font-weight: 800; color: var(--bl-text); line-height: 1.2; }
.tile-stats { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; }
.tile-stats i { font-style: normal; display: flex; align-items: baseline; gap: 5px; }
.tile-stats b { font-size: 14px; font-weight: 800; color: var(--bl-text); font-variant-numeric: tabular-nums; }
.tile-stats em { font-style: normal; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-dim); }
.btn.tile.live .tile-stats b { color: var(--bl-orange); }
/* The line under an index card's figures: which car it is in and what happens
   next, which is context for the numbers rather than the numbers themselves. */
.index-mine { display: block; margin-top: 5px; font-size: 11.5px; color: var(--bl-muted); line-height: 1.35; }
.index-card .tile-stats { margin-top: 2px; }
/* A tab strip inside a card: smaller than the page level one, because it is
   choosing between two ladders rather than between screens. */
.tabs.sub { margin: 4px 0 2px; border-bottom: 0; }
.tabs.sub .tab { min-height: 38px; font-size: 11.5px; letter-spacing: 0.06em; }
.tabs.sub .tab.active { background: var(--bl-orange); color: #fff; box-shadow: none; }

/* Classes on the career ladders and in the garage. The lobby had a chip of
   its own, scoped to a peer row; this is the same chip anywhere. */
.class-chip { font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: #2a2e35; color: #dfe3e8; margin-left: 6px; vertical-align: 1px; font-weight: 700; }
.ladder div.locked .class-chip { opacity: 0.9; }
.chip.class-tag { margin-left: 8px; background: rgba(255,127,0,0.14); color: var(--bl-orange); border: 1px solid rgba(255,127,0,0.35); text-transform: none; letter-spacing: 0.02em; font-size: 11px; }
.rung-gate { display: block; flex-basis: 100%; color: var(--bl-muted); line-height: 1.4; margin-bottom: 4px; }
.setup-head.class-view { flex-wrap: wrap; gap: 6px 10px; margin-top: -2px; }
.class-seg { flex-wrap: wrap; }
.class-seg .btn { min-height: 28px; padding: 2px 9px; font-size: 11px; }
/* The i beside the class tag in the garage: inline with the tag, small. */
.spec-brand .info-btn { display: inline-flex; vertical-align: middle; width: 20px; height: 20px; margin-left: 4px; position: relative; top: -1px; }
.spec-brand .info-btn svg { width: 12px; height: 12px; }

/* The shop's bench on the Tune tab: every kept tune through every distance. */
.bench-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0; }
.bench-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.bench-table th, .bench-table td { padding: 6px 6px; border-bottom: 1px solid var(--bl-line); text-align: left; white-space: nowrap; }
.bench-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bl-muted); }
.bench-table .num { text-align: right; font-family: var(--nums); font-variant-numeric: tabular-nums; }
.bench-table td.num small { display: block; font-size: 10px; color: var(--bl-muted); font-family: inherit; }
.bench-table td.best { color: #6ee89b; font-weight: 700; }

.night-match .night-clock { display: block; margin: 4px 0 2px; font-size: 13px; color: var(--bl-muted); }
.night-match .night-clock b { color: var(--bl-text); }

/* Talk: the room's lines under the lanes, and a crew's under its list. */
.talk { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 4px 0; }
.talk-line { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.35; }
.talk-line b { color: var(--bl-accent, #ff5a1f); font-weight: 700; white-space: nowrap; max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
.talk-line.mine b { color: var(--bl-muted); }
.talk-line span { overflow-wrap: anywhere; }
.talk-line small { color: var(--bl-muted); font-size: 11px; white-space: nowrap; }
.talk-form { display: flex; gap: 8px; margin-top: 8px; }
.talk-form input { flex: 1; min-width: 0; background: #0e1116; border: 1px solid var(--bl-line); border-radius: 10px; color: inherit; padding: 9px 11px; font: inherit; font-size: 15px; }

/* The turbo bench: the setup up top, the units as small cards, the numbers in one table. */
.bench-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 2px 0 10px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #171b22, #0f1216); border: 1px solid var(--bl-line); }
.bench-kicker { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bl-muted); margin-bottom: 2px; }
.bench-head-car b { display: block; font-size: 18px; font-weight: 900; letter-spacing: 0.01em; line-height: 1.15; }
.bench-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bench-pickers.three { grid-template-columns: 1fr; }
@media (min-width: 560px) { .bench-pickers.three { grid-template-columns: 1fr 1fr 1fr; } }
.bench-blurb { margin: 2px 0 6px; }
.bench-units { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 560px) { .bench-units { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .bench-units { grid-template-columns: repeat(4, 1fr); } }
.bench-unit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bl-line); background: #14171c; color: var(--bl-text); text-align: left; font: inherit; }
.bench-unit b { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.bench-unit span { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--bl-muted); }
.bench-unit span em { font-style: normal; font-family: var(--mono); font-size: 10px; margin-left: 4px; opacity: 0.8; }
.bench-unit.oem { border-style: dashed; }
.bench-unit.on { border-color: var(--bench); box-shadow: inset 0 0 0 1px var(--bench); background: color-mix(in srgb, var(--bench) 14%, #14171c); }
.bench-unit.on span { color: var(--bl-text); }
.bench-compare td.num small { display: inline; margin-left: 3px; }
.bench-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--bench); margin-right: 7px; vertical-align: -1px; }
.bench-chips .chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--bl-line); color: var(--bl-muted); background: #0e1116; }
.bench-chips .chip.on { color: #6ee89b; border-color: rgba(110,232,155,0.4); }

/* The callouts so far: a month of them in rows, scrolling inside the card. */
.co-hist { max-height: min(62vh, 560px); overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
/* The names get the whole first line, with the winner in green; the second
   line is what it was on the left and the two times, or the state, on the
   right. Two names beside a result was "Grant Ro..." on a phone. */
.co-hist .bout b { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.co-hist .bout b u.w { text-decoration: none; color: #4ec06a; font-weight: 800; }
.co-hist .bout em { grid-area: 2 / 2; }
.co-hist .bout em:empty { display: none; }
.co-hist .bout.other em { color: var(--bl-muted); }
.co-hist .bout.open em { color: #ffd24a; }
.co-hist .bout.taken em { color: #9ec4ff; }
.co-hist .bout span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-hist .lb-empty { padding: 14px 0; }

/* The fold: a narrow pill at the head of the callout board. It stays at the
   left while the board scrolls, so it is never swiped out of reach. */
.chat-board .co-fold { position: sticky; left: 0; z-index: 2; }
/* The cards snap to the start of the board, and the pill stays there: without
   room left for it the first card snapped under the pill and lost its left
   edge behind it. */
.chat-board { scroll-padding-left: 52px; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board { scroll-padding-left: 0; }
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-fold { position: static; }
.chat-board .co-fold { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; min-height: 44px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--bl-line); background: #14171c; color: var(--bl-muted); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.chat-board .co-fold small { font-size: 11px; font-weight: 800; color: var(--bl-text); }
/* Beside chips the pill is a chip too, whether the board was folded by hand, by the keyboard or by a short screen. */
:is(html.keyboard-up, html.room-short, html.room-folded) .chat-board .co-fold { writing-mode: horizontal-tb; transform: none; flex-direction: row; gap: 5px; min-height: 0; border-radius: 999px; padding: 5px 10px; }
/* On a wide screen the board is a column beside the talk, so the pill at the
   head of it reads across like everything under it rather than standing on
   its end, which is only right when the board runs off the side of a phone. */
@media (min-width: 900px) {
  .chat-board .co-fold { writing-mode: horizontal-tb; transform: none; flex-direction: row; gap: 5px; align-self: stretch; justify-content: center; min-height: 0; border-radius: 999px; padding: 6px 12px; top: 0; }
}

/* The shop's room gear: lit green while the room is open to everybody; the bar under it is the menu it opens. */
#chat-room-settings.on { color: var(--bl-ok); border-color: rgba(110,232,155,0.45); }
.chat-room-bar { flex-wrap: wrap; }

/* The Room in the foot bar: a small tile with its unread count as a badge, nothing else said. */
.menu-tiles.menu-bar #menu-room .tile-sub, .menu-tiles.menu-bar #menu-room .tile-when { display: none; }
.menu-tiles.menu-bar #menu-room { position: relative; }
/* On a phone the unread count is on the icon as a badge like the other tiles'
   numbers, so the pill in the title stays off there: both showed, doubled and
   askew. Wider than a phone the bar is not a bar and the badge rule does not
   apply, and this rule was still hiding the pill: on a computer the number
   never showed at all. Kirk: "on desktop the room notification number doesn't
   show." Scoped to the phone width now, with the badge rule. */
.menu-tiles.menu-bar #menu-room .tile-new { display: none; }
/* With the room closed to this phone its tile is off the bar, and the bar is four across rather than four and a hole. */
.menu-tiles.menu-bar:has(#menu-room[hidden]) { grid-template-columns: repeat(4, 1fr); }

/* A button that reads as a link inside a sentence: the season's rule on the
   career card, which opens the card that explains it again. */
.link-btn { display: inline; padding: 0; margin: 0; border: 0; background: none; color: #ffd24a; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: #ffe08a; }


/* ---------------------------------------------------------------- car art
   Kirk: the illustrations of the cars should be used in the menus, the game
   looks like a lot of text. Every car rendered cut out, lit, on nothing
   (tools/carart.mjs), in a 2:1 frame, so it sits on a card the same way
   whatever the car. */
.car-art { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.car-art[hidden] { display: none; }
/* The hero: the car in the garage, big, above its name. */
.menu-hero-art { width: min(86vw, 420px); margin: -4px auto -14px; filter: drop-shadow(0 14px 18px rgba(0,0,0,0.45)); animation: art-in 0.5s ease-out both; }
.menu-hero:has(.menu-hero-art:not([hidden])) { gap: 6px; }
@keyframes art-in { from { opacity: 0; transform: translateX(18px) scale(0.98); } to { opacity: 1; transform: none; } }
/* Next up: the rival's car with the rival's face on it. */
.next-row .next-art { position: relative; display: block; width: 84px; flex: none; }
.next-row .next-art .car-art { width: 84px; margin: -6px 0 -8px; }
.next-row .next-art .avatar { position: absolute; left: -4px; bottom: -6px; width: 24px; height: 24px; border: 2px solid var(--bl-panel); border-radius: 50%; }
/* The day's car and the week's car, in the bottom right of their cards: the
   title row keeps the whole width for its clock, and the words under it make
   room for the car. */
.btn.tile.wide:has(.tile-art:not([hidden])) { position: relative; overflow: hidden; min-height: 112px; align-content: start; }
.btn.tile.wide:has(.tile-art:not([hidden])) .tile-sub { padding-right: min(40%, 300px); }
/* Sized by the band under the title row, not by the card's width: on a wide
   screen a width share made the car taller than the card and it ran up over
   the clock on the right. */
.btn.tile.wide .tile-art { position: absolute; right: 6px; top: 40px; bottom: 0; height: calc(100% - 40px); width: auto; max-width: 42%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.45)); }
.btn.tile.wide .tile-title { position: relative; z-index: 1; }
@media (min-width: 720px) {
  .btn.tile.wide:has(.tile-art:not([hidden])) { min-height: 150px; }
  .btn.tile.wide .tile-art { top: 46px; height: calc(100% - 50px); right: 14px; }
  .menu-tiles.quad .btn.tile.small .quad-art { max-width: 300px; }
}
/* The garage tile carries the car that is in it; the Lot a spread of three. */
.menu-tiles.quad .btn.tile.small .quad-art { width: 78%; margin: -2px auto -6px; order: -1; }
.menu-tiles.quad .btn.tile.small:has(.quad-art:not([hidden])) > svg,
.menu-tiles.quad .btn.tile.small:has(.lot-stack .car-art) > svg { display: none; }
.lot-stack { order: -1; position: relative; display: block; width: 86%; max-width: 340px; aspect-ratio: 100 / 31; margin: -2px auto -2px; }
.lot-stack:empty { display: none; }
.lot-stack .car-art { position: absolute; bottom: 0; width: 62%; }
.lot-stack .car-art:nth-child(1) { left: 0; transform: scale(0.86); transform-origin: bottom left; opacity: 0.8; }
.lot-stack .car-art:nth-child(2) { right: 0; transform: scale(0.86); transform-origin: bottom right; opacity: 0.8; }
.lot-stack .car-art:nth-child(3) { left: 19%; z-index: 1; }

/* Venue scenes: the door to each race wears the place it goes to, and the
   venue picker shows each place rather than a painted swatch of it. */
.screen.menu .btn.menu.primary > span { position: relative; z-index: 2; }
.door-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; pointer-events: none; z-index: 0; animation: scene-in 0.5s ease-out; }
@keyframes scene-in { from { opacity: 0; } to { opacity: 1; } }
.screen.menu .btn.menu.primary:has(.door-scene:not([hidden]))::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(196,24,52,0.9) 0%, rgba(150,16,40,0.5) 36%, rgba(40,6,14,0) 78%); }
.screen.menu .btn.menu.primary .menu-sub, .screen.menu .btn.menu.primary .menu-title { text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.venue-tile { position: relative; overflow: hidden; }
.venue-tile > span { position: relative; z-index: 1; }
.venue-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; pointer-events: none; opacity: 0.55; transition: opacity 0.2s; }
.venue-tile:has(.venue-scene)::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(14,16,20,0.9) 0%, rgba(14,16,20,0.55) 60%, rgba(14,16,20,0.2) 100%); }
.venue-tile:has(.venue-scene) { min-height: 64px; }
.venue-tile:has(.venue-scene) .venue-swatch { display: none; }
.venue-tile:has(.venue-scene) small { color: rgba(236,238,242,0.78); }
.venue-tile.on .venue-scene { opacity: 0.9; }
.venue-tile.on:has(.venue-scene)::after { background: linear-gradient(90deg, rgba(14,16,20,0.82) 0%, rgba(14,16,20,0.35) 60%, rgba(14,16,20,0) 100%); }
.venue-tile b, .venue-tile small { text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

/* The car on the line, drawn: its art is the door to the garage. */
.loadout-card .lo-garage.has-art { grid-row: 1 / span 2; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 2px; min-height: 0; }
.loadout-card .lo-garage .lo-art { display: block; width: 128px; height: 64px; object-fit: contain; margin: -6px 0 -4px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45)); animation: art-in 0.35s ease-out; }
.loadout-card .lo-garage.has-art span { font-size: 11px; }
.loadout-card .lo-garage.has-art:not(:has(.lo-art)) { grid-row: auto; }
@media (min-width: 720px) { .loadout-card .lo-garage .lo-art { width: 168px; height: 84px; } }

/* Each rung shows the rival's car, so the ladder reads as the cars it climbs through. */
.ladder div:has(> .rung-art) { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
.ladder .rung-art { width: 72px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); }
.ladder div.next .rung-art { width: 84px; height: 42px; }
.ladder div.done .rung-art { filter: grayscale(0.6) drop-shadow(0 3px 4px rgba(0,0,0,0.45)); opacity: 0.8; }
@media (max-width: 360px) { .ladder .rung-art { width: 56px; height: 28px; } .ladder div.next .rung-art { width: 72px; height: 36px; } }

/* The tiles with no car to show carry a picture of what they are: the tree
   for Grudge Night, the dial-in board for Index, the helmets for Crews, two
   phones for a friend, the cup for Trophies. Trimmed to the object, so they
   are sized by height and sit lower in the card than a car does. */
.btn.tile.wide:has(.tile-illus:not([hidden])) { min-height: 100px; }
.btn.tile.wide .tile-illus { max-width: 34%; aspect-ratio: auto; }
/* A card with no clock on it has nothing to keep clear: the picture takes the height. */
.btn.tile.wide:not(:has(.tile-when)) .tile-illus { top: 8px; height: calc(100% - 8px); }
.menu-tiles.quad .btn.tile.small .quad-art.tile-illus { width: auto; height: 58px; margin: -2px auto -2px; }
.menu-tiles.quad .btn.tile.small:has(.tile-illus:not([hidden])) > svg { display: none; }
@media (min-width: 720px) {
  /* On a wide card there is room beside the clock rather than under it. */
  .btn.tile.wide:has(.tile-illus:not([hidden])) { min-height: 112px; }
  .btn.tile.wide .tile-illus { top: 10px; height: calc(100% - 10px); right: 150px; max-width: 30%; }
  .btn.tile.wide:not(:has(.tile-when)) .tile-illus { right: 24px; }
  .menu-tiles.quad .btn.tile.small .quad-art.tile-illus { height: 96px; }
}

/* No prep, under the two doors to a race: a thin strip across both, Bunker
   Hill behind it. */
.menu-noprep { grid-column: 1 / -1; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 14px 8px 16px; border-radius: 14px; border: 1px solid rgba(255, 184, 77, 0.28); background: linear-gradient(100deg, #1a1a12 0%, #0e110c 100%); color: #fff; text-align: left; cursor: pointer; font: inherit; }
.menu-noprep .np-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: brightness(1.45) saturate(1.1); pointer-events: none; z-index: 0; animation: scene-in 0.5s ease-out; }
.menu-noprep:has(.np-scene:not([hidden]))::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10,12,8,0.9) 0%, rgba(10,12,8,0.55) 38%, rgba(10,12,8,0) 85%); }
.menu-noprep .np-words, .menu-noprep .np-go { position: relative; z-index: 2; }
.menu-noprep .np-words { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; }
.menu-noprep .np-title { font-size: 17px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; color: #ffb84d; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.menu-noprep .np-sub { font-size: 12px; color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.menu-noprep .np-go { width: 20px; height: 20px; flex: none; color: rgba(255,255,255,0.85); }
.menu-noprep:active { transform: scale(0.99); }
@media (min-width: 720px) { .menu-noprep { min-height: 58px; padding: 10px 20px 10px 24px; } .menu-noprep .np-title { font-size: 20px; } .menu-noprep .np-sub { font-size: 13px; } }

/* ================================================================
   The home screen as a game: a condensed racing face for the titles, a
   tall one for the numbers, cut corners, and one line a card.
   Kirk picked it from three mockups ("I like the first one"). Barlow
   Condensed and Teko, SIL Open Font License, in assets/fonts with their
   licenses. */
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: italic; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-700-italic.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: italic; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-800-italic.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 900; font-style: italic; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-900-italic.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Teko'; font-weight: 500; font-display: swap; src: url(assets/fonts/teko-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Teko'; font-weight: 600; font-display: swap; src: url(assets/fonts/teko-latin-600-normal.woff2) format('woff2'); }
:root { --game: 'Barlow Condensed', var(--font); --gnum: 'Teko', var(--nums); --cut: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); --gmute: #9aa0aa; }

#screen-menu { background: radial-gradient(120% 55% at 50% 0%, #2a0d14 0%, rgba(11,12,15,0) 60%), var(--bl-black); }

/* The bar along the top. */
#screen-menu > .menu-top { background: rgba(11,12,15,0.9); border-bottom: 0; box-shadow: 0 1px 0 rgba(255,255,255,0.05); }
#screen-menu .menu-top .menu-greeting span { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
#screen-menu .menu-top .menu-greeting small { font-family: var(--game); font-weight: 700; font-style: normal; font-size: 11px; letter-spacing: 0.14em; color: #ffb84d; }
#screen-menu .menu-top .menu-greeting .avatar.greet { width: 34px; height: 34px; border: 2px solid var(--bl-orange); border-radius: 50%; }
#screen-menu .menu-top .credits { border-radius: 0; transform: skewX(-12deg); background: rgba(0,0,0,0.5); padding: 4px 12px 3px; color: #ffb84d; }
#screen-menu .menu-top .credits > * { transform: skewX(12deg); }
#screen-menu .menu-top .credits b { font-family: var(--gnum); font-weight: 600; font-size: 22px; line-height: 1; color: #fff; letter-spacing: 0.02em; }
#screen-menu .menu-top .credits .cr-suffix { display: none; }
#screen-menu .menu-top .menu-gear, #screen-menu .menu-top .menu-faq { border-radius: 0; transform: skewX(-12deg); background: rgba(0,0,0,0.5); }
#screen-menu .menu-top .menu-gear svg, #screen-menu .menu-top .menu-faq svg { transform: skewX(12deg); }
/* The play streak's flame, before the credits: gray until today's pass is in. */
.menu-top .menu-streak { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 10px 3px; border: 1px solid var(--bl-line-2, #333a44); border-radius: 0; transform: skewX(-12deg); background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.4); font: inherit; cursor: pointer; }
.menu-top .menu-streak > * { transform: skewX(12deg); }
.menu-top .menu-streak b { font-family: var(--gnum); font-weight: 600; font-size: 22px; line-height: 1; color: rgba(255,255,255,0.55); }
.menu-top .menu-streak.lit { color: #ff8a1f; }
.menu-top .menu-streak.lit b { color: #fff; }
.menu-top .menu-streak:not([hidden]) + .credits { margin-left: 0; }
@media (max-width: 380px) { .menu-top .menu-streak { padding: 4px 7px 3px; } .menu-top .menu-streak b { font-size: 19px; } }
/* The streak card's week: a dot a day, lit when a pass went down. */
.streak-week { display: flex; justify-content: space-between; gap: 6px; margin: 10px 0 6px; }
.streak-day { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.streak-day i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.streak-day.on i { border-color: #ff8a1f; background: radial-gradient(circle at 50% 60%, #ffb84d, #ff6a00); }
.streak-day.frozen i { border-color: #6fc3ff; background: rgba(111,195,255,0.25); }
.streak-day.today i { border-style: dashed; border-color: #ff8a1f; }
.streak-day small { font-size: 11px; font-weight: 700; color: var(--bl-muted); }
/* The streak growing: a card of its own over whatever is up. */
.streak-burst { z-index: 40; background: radial-gradient(60% 45% at 50% 35%, rgba(255,106,0,0.28), rgba(8,10,14,0.92) 70%); }
.streak-burst .sb-card { align-items: center; text-align: center; gap: 6px; padding: 18px 18px 16px; background: rgba(16,18,22,0.96); }
.sb-flame { position: relative; width: 120px; height: 150px; margin-top: -4px; }
.sb-flame svg { width: 100%; height: 100%; overflow: visible; transform: scale(0.2); opacity: 0; transform-origin: 50% 90%; filter: drop-shadow(0 0 18px rgba(255,120,30,0.65)); }
.streak-burst.go .sb-flame svg { animation: sb-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
.sb-flame .sb-f1, .sb-flame .sb-f2, .sb-flame .sb-f3 { transform-origin: 50% 100%; transform-box: fill-box; }
.streak-burst.go .sb-f1 { animation: sb-flick 1.3s ease-in-out 0.7s infinite alternate; }
.streak-burst.go .sb-f2 { animation: sb-flick 0.9s ease-in-out 0.7s infinite alternate-reverse; }
.streak-burst.go .sb-f3 { animation: sb-flick 0.6s ease-in-out 0.7s infinite alternate; }
.streak-burst.repairing .sb-flame svg { filter: drop-shadow(0 0 14px rgba(111,195,255,0.5)) saturate(0.55); }
.sb-sparks { position: absolute; left: 50%; top: 60%; width: 0; height: 0; }
.sb-sparks i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffd84d; box-shadow: 0 0 8px #ff8a1f; opacity: 0; }
.streak-burst.go .sb-sparks i { animation: sb-spark 0.9s ease-out var(--d) forwards; }
.streak-burst.milestone .sb-sparks i { width: 8px; height: 8px; background: #fff3b0; }
.sb-count { height: 64px; overflow: hidden; line-height: 64px; }
.sb-roll { display: flex; flex-direction: column; transform: translateY(0); }
.sb-roll b { font-family: var(--gnum); font-weight: 600; font-size: 60px; height: 64px; color: #fff; letter-spacing: 0.02em; }
.streak-burst.go .sb-roll { animation: sb-roll 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) 0.45s forwards; }
.streak-burst.milestone .sb-roll b:last-child { color: #ffb84d; }
.sb-label { font-family: var(--game); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #ff8a1f; font-size: 18px; margin-top: -4px; }
.sb-week { width: 100%; margin: 8px 0 2px; }
.sb-week .streak-day.fill i { border-color: #ff8a1f; background: rgba(255,255,255,0.04); }
.streak-burst.go .sb-week .streak-day.fill i { animation: sb-fill 0.5s ease-out 0.9s forwards; }
.sb-line { margin: 4px 0 0; font-size: 14px; color: var(--bl-text); line-height: 1.4; }
.sb-pips { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.sb-pips i { width: 34px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.14); }
.sb-pips i.on { background: #6fc3ff; }
.sb-goal { width: 100%; }
.sb-hit { margin: 6px 0 0; font-weight: 800; color: #ffb84d; }
.sb-ask { margin: 8px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.sb-opts { display: flex; gap: 8px; justify-content: center; }
.sb-opt { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; border: 1px solid var(--bl-line-2, #333a44); background: rgba(0,0,0,0.35); color: var(--bl-text); font: inherit; cursor: pointer; transform: skewX(-8deg); }
.sb-opt > * { transform: skewX(8deg); }
.sb-opt b { font-family: var(--gnum); font-weight: 600; font-size: 26px; line-height: 1; }
.sb-opt small { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); }
.sb-opt.on { border-color: #ff8a1f; background: rgba(255,138,31,0.18); }
.sb-bar { width: 100%; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; margin: 10px 0 4px; }
.sb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff6a00, #ffb84d); border-radius: 4px; }
.sb-goal-line { margin: 0; font-size: 12px; color: var(--bl-muted); }
.streak-burst .btn-row { width: 100%; margin-top: 8px; }
@keyframes sb-pop { 0% { transform: scale(0.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sb-flick { 0% { transform: scaleY(1) skewX(0deg); } 50% { transform: scaleY(1.06) skewX(-2deg); } 100% { transform: scaleY(0.96) skewX(2deg); } }
@keyframes sb-spark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); } }
@keyframes sb-roll { to { transform: translateY(-64px); } }
@keyframes sb-fill { to { background: radial-gradient(circle at 50% 60%, #ffb84d, #ff6a00); } }
@media (prefers-reduced-motion: reduce) {
  .streak-burst.go .sb-flame svg { animation: none; transform: none; opacity: 1; }
  .streak-burst.go .sb-f1, .streak-burst.go .sb-f2, .streak-burst.go .sb-f3, .streak-burst.go .sb-sparks i { animation: none; }
  .streak-burst.go .sb-roll { animation: none; transform: translateY(-64px); }
}

/* The car, on a lit floor, with its numbers on plates. */
#screen-menu .menu-hero { background: none; border-bottom: 0; border-radius: 0; margin-bottom: 4px; }
#screen-menu .menu-hero::before, #screen-menu .menu-hero::after { display: none; }
#screen-menu .menu-hero-img { opacity: 0.05; }
#screen-menu .menu-hero-car { position: relative; }
#screen-menu .menu-hero-car::before { content: ''; position: absolute; left: 8%; right: 8%; top: 30%; height: 44%; background: radial-gradient(50% 50% at 50% 55%, rgba(227,38,63,0.34), rgba(227,38,63,0) 72%); pointer-events: none; }
#screen-menu .menu-hero-car > * { position: relative; }
#screen-menu .menu-hero-car .menu-kicker { font-family: var(--game); font-weight: 700; font-style: normal; font-size: 12px; letter-spacing: 0.32em; color: var(--bl-orange); }
#screen-menu .menu-car-name { font-family: var(--game); font-weight: 900; font-style: italic; font-size: clamp(28px, 9vw, 40px); line-height: 0.95; letter-spacing: 0.01em; }
#screen-menu .menu-car-spec { display: flex; justify-content: center; gap: 6px; margin-top: 6px; overflow: visible; }
.stat-plate { display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 4px 10px 3px; background: rgba(0,0,0,0.5); border-top: 2px solid var(--bl-orange); clip-path: var(--cut); }
.stat-plate b { font-family: var(--gnum); font-weight: 600; font-size: 25px; line-height: 1; letter-spacing: 0.02em; color: #fff; text-transform: uppercase; }
.stat-plate em { font-family: var(--game); font-weight: 700; font-style: normal; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gmute); }
#screen-menu .menu-change { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; }

/* The doors to a race: cut corners, the title in the racing face. */
#screen-menu .btn.menu.primary { border-radius: 0; clip-path: var(--cut); border: 0; box-shadow: none; }
#screen-menu .btn.menu.primary .menu-kicker { font-family: var(--game); font-weight: 700; font-style: normal; font-size: 11px; letter-spacing: 0.24em; }
#screen-menu .btn.menu.primary .menu-title { font-family: var(--game); font-weight: 900; font-style: italic; font-size: clamp(26px, 8vw, 38px); line-height: 0.95; letter-spacing: 0.01em; }
#screen-menu .btn.menu.primary .menu-sub { font-family: var(--game); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; }
#screen-menu .menu-noprep { border-radius: 0; clip-path: var(--cut); border: 0; }
#screen-menu .menu-noprep .np-title { font-family: var(--game); font-weight: 900; font-style: italic; font-size: 26px; letter-spacing: 0.01em; }
#screen-menu .menu-noprep .np-sub { font-family: var(--game); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }
/* No prep's own page: where it is raced, under the car, before the board. */
.np-where { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 104px; padding: 12px 16px; margin: 0 0 12px; clip-path: var(--cut); background: linear-gradient(100deg, #1a1a12 0%, #0e110c 100%); }
.np-where .np-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: brightness(1.45) saturate(1.1); pointer-events: none; z-index: 0; animation: scene-in 0.5s ease-out; }
.np-where::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(10,12,8,0.88) 0%, rgba(10,12,8,0.35) 60%, rgba(10,12,8,0) 100%); }
.np-where .np-words { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.np-where .np-title { font-family: var(--game); font-weight: 900; font-style: italic; font-size: 26px; text-transform: uppercase; color: #ffb84d; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.np-where .np-sub { font-family: var(--game); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.86); text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
/* The strip's door to it, at the foot of the modes. */
.drag-modes .np-door { width: 100%; margin-top: 14px; border-radius: 0; clip-path: var(--cut); border: 0; }
.drag-modes .np-door .np-title { font-family: var(--game); font-weight: 900; font-style: italic; font-size: 22px; }
.drag-modes .np-door .np-sub { font-family: var(--game); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
/* Race a Friend, a strip like no prep's. */
#screen-menu #menu-online { border-radius: 0; clip-path: var(--cut); border: 0; min-height: 60px; background: linear-gradient(90deg, rgba(227,38,63,0.16), rgba(255,255,255,0.03)); }
#screen-menu #menu-online .tile-title { font-family: var(--game); font-weight: 900; font-style: italic; font-size: 22px; text-transform: uppercase; letter-spacing: 0.01em; }
#screen-menu #menu-online .tile-sub { font-family: var(--game); font-weight: 600; font-size: 13px; }
#screen-menu #menu-online > svg { display: none; }
#screen-menu #menu-online { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "sub"; }

/* Section heads: a red slash, the word, a rule to the edge. */
#screen-menu .menu-eyebrow { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 19px; letter-spacing: 0.08em; color: #fff; }
#screen-menu .menu-eyebrow::before { content: ''; width: 16px; height: 16px; flex: none; background: var(--bl-orange); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
#screen-menu .menu-eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0)); }

/* Career: a strip a ladder. */
#screen-menu .menu-next { background: none; border: 0; border-radius: 0; gap: 6px; overflow: visible; }
#screen-menu .next-row { border: 0; border-left: 3px solid var(--bl-orange); padding: 8px 10px 8px 6px; background: linear-gradient(90deg, rgba(227,38,63,0.15), rgba(255,255,255,0.03)); clip-path: var(--cut); }
#screen-menu .next-row .t { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 19px; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; }
#screen-menu .next-row .s { font-family: var(--game); font-weight: 600; font-size: 13.5px; line-height: 1.2; }
#screen-menu .next-row .s b { color: #ffb84d; }
#screen-menu .next-row .go { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 17px; text-transform: uppercase; letter-spacing: 0.02em; border: 0; border-radius: 0; padding: 8px 16px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }

/* The event cards: the picture, the name, one line, the clock on a badge. */
#screen-menu .menu-tiles.cards { display: grid; gap: 8px; }
#screen-menu .menu-tiles.cards.two { grid-template-columns: 1fr 1fr; }
#screen-menu .menu-tiles.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#screen-menu .menu-tiles.cards > .spotlight { grid-column: 1 / -1; }
#screen-menu .menu-tiles.cards .btn.tile.wide { grid-column: auto; position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; min-height: 156px; padding: 0 10px 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); border-radius: 0; clip-path: var(--cut); background: radial-gradient(70% 45% at 50% 30%, rgba(227,38,63,0.2), rgba(227,38,63,0) 72%), linear-gradient(180deg, #1d2027, #14161b); }
#screen-menu .menu-tiles.cards .btn.tile.wide > svg { display: none; }
#screen-menu .menu-tiles.cards .btn.tile.wide .tile-art { order: -1; position: static; align-self: center; width: 100%; max-width: 100%; height: 88px; margin: 22px 0 4px; object-fit: contain; object-position: center bottom; }
#screen-menu .menu-tiles.cards .btn.tile.wide .tile-title { display: block; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 19px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
#screen-menu .menu-tiles.cards .btn.tile.wide .tile-when { position: absolute; top: 7px; right: 7px; margin: 0; border: 0; border-radius: 0; transform: skewX(-12deg); padding: 2px 8px 0; font-family: var(--gnum); font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: 0.03em; background: rgba(0,0,0,0.6); color: #cfd6ff; }
#screen-menu .menu-tiles.cards .btn.tile.wide .tile-when.daily { background: var(--bl-orange); color: #fff; }
#screen-menu .menu-tiles.cards [data-nav="index"] .tile-when { background: #ffb84d; color: #1b1300; }
#screen-menu .menu-tiles.cards .btn.tile.wide .tile-sub { padding: 0; margin: 2px 0 0; font-family: var(--game); font-weight: 600; font-size: 13.5px; line-height: 1.2; color: var(--gmute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-menu .menu-tiles.cards .tile-sub .daily-lent, #screen-menu .menu-tiles.cards .tile-sub .stat-row, #screen-menu .menu-tiles.cards .tile-sub #daily-next { display: none; }
#screen-menu .menu-tiles.cards .tile-sub b, #screen-menu .menu-tiles.cards .tile-sub .tile-what { color: var(--gmute); font-weight: 600; }
#screen-menu .menu-tiles.cards .tile-sub .tile-where { display: none; }
#screen-menu .menu-tiles.cards .tile-sub .rule-chip { font-size: 10px; padding: 1px 5px; }
#screen-menu .menu-tiles.cards .tile-sub .tile-ask { color: #ffb84d; }
#screen-menu .menu-tiles.cards.three .btn.tile.wide .tile-title { font-size: 17px; }

/* The garage row: the car, the lot, the bench, the case. */
#screen-menu .menu-tiles.cards.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#screen-menu .menu-tiles.cards.g4 .btn.tile.small { min-height: 104px; padding: 8px 4px 8px; gap: 2px; border-radius: 0; clip-path: var(--cut); border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, #1b1e24, #14161b); }
#screen-menu .menu-tiles.cards.g4 .btn.tile.small .tile-title { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 15px; text-transform: uppercase; letter-spacing: 0.01em; justify-content: center; white-space: nowrap; }
#screen-menu .menu-tiles.cards.g4 .btn.tile.small .tile-sub { font-family: var(--game); font-weight: 600; font-size: 12px; line-height: 1.15; color: var(--gmute); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#screen-menu .menu-tiles.cards.g4 .btn.tile.small > svg { width: 30px; height: 30px; margin: 10px 0 8px; }
#screen-menu .menu-tiles.cards.g4 .quad-art { width: 92%; margin: 4px auto 2px; }
#screen-menu .menu-tiles.cards.g4 .quad-art.tile-illus { height: 52px; width: auto; }
#screen-menu .menu-tiles.cards.g4 .lot-stack { width: 96%; margin: 4px auto 2px; }
#screen-menu > p.fine.center { font-family: var(--game); font-weight: 600; letter-spacing: 0.08em; }

@media (max-width: 380px) {
  #screen-menu .menu-tiles.cards.three .btn.tile.wide { padding: 0 7px 8px; }
  #screen-menu .menu-tiles.cards.three .btn.tile.wide .tile-title { font-size: 15px; }
  #screen-menu .menu-tiles.cards .btn.tile.wide .tile-when { font-size: 14px; padding: 2px 6px 0; }
  #screen-menu .menu-tiles.cards.g4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  #screen-menu .menu-tiles.cards .btn.tile.wide { min-height: 190px; }
  #screen-menu .menu-tiles.cards .btn.tile.wide .tile-art { height: 116px; }
  #screen-menu .menu-tiles.cards .btn.tile.wide .tile-title { font-size: 22px; }
  #screen-menu .menu-tiles.cards.g4 .btn.tile.small { min-height: 150px; }
  #screen-menu .menu-tiles.cards.g4 .btn.tile.small .tile-title { font-size: 19px; }
  #screen-menu .menu-tiles.cards.g4 .quad-art.tile-illus { height: 84px; }
  .stat-plate { min-width: 96px; } .stat-plate b { font-size: 30px; }
}
#screen-menu .menu-tiles.cards .btn.tile.wide .tile-title { position: static; }
#screen-menu .menu-tiles.cards .btn.tile.wide .tile-title, #screen-menu .menu-tiles.cards .btn.tile.wide .tile-sub { text-align: left; align-self: stretch; }
#screen-menu .menu-tiles.cards.g4 .btn.tile.small { display: grid; grid-template-rows: 58px auto auto; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; }
#screen-menu .menu-tiles.cards.g4 .btn.tile.small > svg, #screen-menu .menu-tiles.cards.g4 .quad-art, #screen-menu .menu-tiles.cards.g4 .lot-stack { grid-row: 1; align-self: end; order: 0; margin: 0 auto 4px; }
#screen-menu .menu-tiles.cards.g4 .quad-art { width: auto; max-width: 96%; height: 50px; object-fit: contain; }
/* Stretched across the tile rather than a share of it: centered, the
   stack's width was worked out from its own contents, which are all
   absolutely placed, and the three cars came out forty pixels wide on a
   desktop. */
#screen-menu .menu-tiles.cards.g4 .lot-stack { height: 48px; justify-self: stretch; width: 100%; max-width: 150px; aspect-ratio: auto; }
#screen-menu .menu-tiles.cards.g4 .btn.tile.small > svg { width: 30px; height: 30px; margin-bottom: 10px; }
#screen-menu .menu-tiles.cards.g4 .btn.tile.small .tile-title { grid-row: 2; }
#screen-menu .menu-tiles.cards.g4 .btn.tile.small .tile-sub { grid-row: 3; }
@media (min-width: 720px) {
  #screen-menu .menu-tiles.cards.g4 .btn.tile.small { grid-template-rows: 92px auto auto; }
  #screen-menu .menu-tiles.cards.g4 .quad-art { height: 84px; }
  #screen-menu .menu-tiles.cards.g4 .lot-stack { height: 84px; max-width: 260px; }
}
#screen-menu .menu-tiles.cards .btn.tile.wide[data-nav="index"] .tile-when.daily { background: #ffb84d; color: #1b1300; }
@media (min-width: 900px) { #screen-menu .menu-hero-art { width: min(520px, 46vw); max-width: none; } }

/* ---------------------------------------------------------------------------
   The game skin on every other screen: the same racing face, cut corners,
   parallelogram tabs and Teko numbers the home screen wears. */
:root { --para: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); --cut8: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.screen.sheet:not(#screen-menu) { background: radial-gradient(120% 420px at 50% 0%, #2a0d14 0%, rgba(11,12,15,0) 100%) no-repeat, var(--bl-black); }

/* The bar along the top: the name in the racing face, credits and icons on an angle. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) > .sheet-head { background: rgba(11,12,15,0.92); border-bottom: 0; box-shadow: 0 1px 0 rgba(255,255,255,0.05); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .sheet-brand { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 21px; letter-spacing: 0.03em; line-height: 1; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .sheet-head .credits { border: 0; border-radius: 0; transform: skewX(-12deg); background: rgba(0,0,0,0.5); padding: 4px 12px 3px; color: #ffb84d; margin-right: 6px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .sheet-head .credits > * { display: inline-block; transform: skewX(12deg); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .sheet-head .credits b { font-family: var(--gnum); font-weight: 600; font-size: 22px; line-height: 1; color: #fff; letter-spacing: 0.02em; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .sheet-head .credits .cr-suffix { display: none; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .sheet-head .btn.icon:not(.info-btn) { border: 0; border-radius: 0; transform: skewX(-12deg); background: rgba(0,0,0,0.5); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .sheet-head .btn.icon:not(.info-btn) > * { transform: skewX(12deg); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .sheet-head .btn.icon:not(.info-btn):active { transform: skewX(-12deg) scale(0.95); }

/* Page titles and section heads. */
.screen.sheet:not(#screen-menu) > h2, .screen.sheet:not(#screen-menu) > .daily-head h2, .about-card h2 { font-family: var(--game); font-weight: 900; font-style: italic; font-size: clamp(28px, 8vw, 36px); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.section-title, h3.daily-sub, h3.about-h) { display: flex; align-items: center; gap: 8px; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.section-title, h3.daily-sub, h3.about-h)::before { content: ''; width: 12px; height: 12px; flex: none; background: var(--bl-orange); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.section-title, h3.daily-sub, h3.about-h)::after { content: ''; flex: 1; min-width: 12px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0)); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .section-title small { font-family: var(--font); font-style: normal; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--gmute); order: 2; }

/* Small labels inside cards: the plate's letter-spaced caption. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.strip-head b, .pb-head b, .dstat small, .lb-row.head, .filters label, .bench-kicker, .loadout-card .lo-body small, .spec-housing, .lo-kicker) { font-family: var(--game); font-weight: 700; font-style: normal; letter-spacing: 0.2em; text-transform: uppercase; }

/* Tabs and two way choices: parallelograms, the lit one red. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.tab, .drag-tabs .tab, .tabs.sub .tab) { border: 0; border-radius: 0; clip-path: var(--para); padding: 0 16px; min-height: 36px; background: rgba(255,255,255,0.07); color: #c5cad3; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 16px; letter-spacing: 0.03em; text-transform: uppercase; box-shadow: none; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.tab, .drag-tabs .tab, .tabs.sub .tab).active { background: var(--bl-orange); color: #fff; }
:is(.screen.sheet:not(#screen-menu), #screen-garage, .modal) .seg .btn { border: 0; border-radius: 0; clip-path: var(--para); padding: 4px 14px; background: rgba(255,255,255,0.07); color: #c5cad3; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; }
:is(.screen.sheet:not(#screen-menu), #screen-garage, .modal) .seg .btn.on { background: var(--bl-orange); color: #fff; }

/* Buttons: cut corners, the racing face; the one that goes is red and big. */
:is(.screen.sheet:not(#screen-menu), #screen-garage, .modal) .btn:not(.icon):not(.tile):not(.lo-garage):not(.linkish) { border-radius: 0; clip-path: var(--cut8); font-family: var(--game); font-weight: 800; font-style: italic; font-size: 16px; letter-spacing: 0.03em; text-transform: uppercase; }
:is(.screen.sheet:not(#screen-menu), #screen-garage, .modal) .btn.primary:not(.icon):not(.tile) { clip-path: var(--cut); border: 0; font-weight: 900; font-size: 19px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage, .modal) .btn.big.primary { font-size: 24px; }
#screen-garage .garage-go .btn:not(.garage-test) { font-size: 20px; white-space: nowrap; }
#screen-garage .garage-go .btn.garage-test { clip-path: var(--para); border: 0; background: rgba(255,255,255,0.09); color: #d3d8e0; font-size: 11px; line-height: 1.05; letter-spacing: 0.02em; }

/* Cards: cut corners, no rounding. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.mode-card, .strip-board, .venue-tile, .dstat, .pretune-board, .daily-past, .lot-row, .bench-unit, .setting, .about-card, .loadout-card, .lb-row:not(.head), .health, .online .card, .crew-card, .daily-rule) { border-radius: 0; clip-path: var(--cut); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .venue-tile.on { box-shadow: inset 0 0 0 2px var(--bl-orange); }
.modal .modal-card { border-radius: 0; clip-path: var(--cut); }
.modal .modal-card h2, .modal .modal-card h3 { font-family: var(--game); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; }

/* Card titles in the racing face. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.mode-card h3, .venue-tile b, .setting label, .lot-row .lot-name, .bench-unit b, .bench-head-car b, .loadout-card .lo-body b) { font-family: var(--game); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .mode-card h3 { font-size: 22px; line-height: 1; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .venue-tile b { font-size: 16px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .setting label { font-size: 17px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .lot-row .lot-name { font-size: 19px; line-height: 1; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .bench-unit b { font-size: 15px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .loadout-card .lo-body b { font-weight: 900; font-size: 22px; line-height: 1; }

/* Figures on badges, numbers in Teko. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.mode-card h3 span, .loadout-card .lo-chips em, em.class-chip) { border: 0; border-radius: 0; clip-path: var(--para); padding: 2px 9px 1px; background: rgba(0,0,0,0.5); font-family: var(--gnum); font-style: normal; font-weight: 500; font-size: 15px; line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .loadout-card .lo-chips em.cls { background: rgba(214, 30, 59, 0.3); color: #ffb0ba; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.dstat b, .lb-row .time, .lb-row .rank) { font-family: var(--gnum); font-weight: 500; letter-spacing: 0.02em; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .dstat b { font-size: 26px; line-height: 1.05; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .lb-row .time { font-size: 20px; line-height: 1; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .lb-row .rank { font-size: 20px; }

/* Selects and the code box: cut corners, the racing face. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) select { border-radius: 0; clip-path: var(--cut8); font-family: var(--game); font-weight: 800; font-style: italic; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) input.code-input { border-radius: 0; clip-path: var(--cut); font-family: var(--gnum); font-size: 36px; }

/* The bar along the bottom: the racing face, a red bar over the door you are behind. */
.menu-tiles.menu-bar .btn.tile.small .tile-title { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.menu-tiles.menu-bar .btn.tile.small { position: relative; border-radius: 0; }
.menu-tiles.menu-bar .btn.tile.small.on::before { content: ''; position: absolute; top: -6px; left: 22%; right: 22%; height: 3px; background: var(--bl-orange); clip-path: var(--para); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .setting label small { font-family: var(--font); font-style: normal; font-weight: 400; font-size: 11px; letter-spacing: 0; text-transform: none; }
@media (max-width: 480px) { :is(.screen.sheet:not(#screen-menu), #screen-garage) .sheet-brand { font-size: 19px; letter-spacing: 0.01em; } }
/* Pick the distance, then the red one goes: on its own line, the width of the card. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) .mode-card .row > .btn.primary { flex: 1 0 100%; min-height: 48px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .pretune-tabs .btn { border: 0; clip-path: var(--para); padding: 0 16px; background: rgba(255,255,255,0.07); color: #c5cad3; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .pretune-tabs .btn.on { background: var(--bl-orange); color: #fff; }
/* The ladder: each rung named in the racing face. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) .ladder { border-radius: 0; clip-path: var(--cut); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .ladder div > span:first-child { font-family: var(--gnum); font-weight: 600; font-size: 22px; line-height: 1; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .ladder div > span:nth-child(2) { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 17px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .ladder div > span:nth-child(2) small { font-family: var(--font); font-style: normal; font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .ladder div > span:last-child { font-family: var(--gnum); font-weight: 500; font-size: 19px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .ladder em.venue-chip { font-family: var(--game); font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 0; clip-path: var(--para); }
/* The bench, the boards' week and crews cards, the daily's notes. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.bench-head, .bench-lane, .week-card, .daily-scoring, .daily-past, .rule-block) { border-radius: 0; clip-path: var(--cut); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .bench-head-car b { font-weight: 900; font-size: 24px; line-height: 1; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.bench-chips .chip, .daily-clock) { border-radius: 0; clip-path: var(--para); padding-left: 11px; padding-right: 11px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .bench-lane b { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 16px; text-transform: uppercase; letter-spacing: 0.01em; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .week-card summary b { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 16px; letter-spacing: 0.08em; color: #fff; }
/* The spec sheet in the garage: the name in the racing face, the numbers in Teko. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) .spec { border-radius: 0; clip-path: var(--cut); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .spec-title { font-family: var(--game); font-weight: 900; font-style: italic; letter-spacing: 0.01em; line-height: 1; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .car-spec .spec-title { font-size: 30px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .spec-hero b { font-family: var(--gnum); font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: 0.01em; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .spec-hero b i { font-family: var(--game); font-weight: 700; font-size: 12px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.spec-hero span, .spec-grid span) { font-family: var(--game); font-weight: 700; letter-spacing: 0.18em; font-size: 11px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .cb { border-radius: 0; clip-path: var(--cut8); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .cb b { font-family: var(--gnum); font-weight: 500; font-size: 22px; }
/* On paper (About, the spec sheets) the section heads are ink, not white. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.about-card, .spec, .dyno-sheet) :is(h3.about-h, .section-title) { color: var(--bl-paper-ink); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.setup-row, .index-card, .index-row, .dyno-sheet) { border-radius: 0; clip-path: var(--cut); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .index-row { clip-path: var(--cut8); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .index-head b { font-family: var(--gnum); font-weight: 600; font-size: 32px; line-height: 1; letter-spacing: 0.01em; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .index-head span { font-family: var(--game); font-weight: 700; letter-spacing: 0.2em; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .index-head em { font-family: var(--gnum); font-weight: 500; font-size: 20px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .setup-row b:first-child { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 17px; text-transform: uppercase; letter-spacing: 0.01em; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .setup-row em { font-family: var(--gnum); font-weight: 500; font-size: 21px; line-height: 1; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .setup-row.open { clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .setup-row.open + .spec { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
/* The board's own row, The Lanes' rows and its search. */
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(.lb-mine, .lane) { border-radius: 0; clip-path: var(--cut); }
:is(.screen.sheet:not(#screen-menu), #screen-garage) .lb-mine .chip { border-radius: 0; clip-path: var(--para); padding-left: 11px; padding-right: 11px; }
:is(.screen.sheet:not(#screen-menu), #screen-garage) :is(input[type="search"], input[type="text"], input:not([type])):not(.code-input) { border-radius: 0; clip-path: var(--cut8); }
/* The bench's own art: the Boost Lab turbo, its black ground melting into the card. */
.bench-head { position: relative; overflow: hidden; }
.bench-head-car { position: relative; z-index: 1; min-width: 0; }
.bench-art { flex: none; width: 132px; height: 132px; margin: -18px -14px -22px 0; object-fit: contain; mix-blend-mode: screen; pointer-events: none; }
@media (min-width: 720px) { .bench-art { width: 170px; height: 170px; } }
/* Who reacted: the chip says it on hover, the card a tap opens lists them. */
.chat-pop .who { list-style: none; margin: 6px 0 0; padding: 6px 4px 0; border-top: 1px solid var(--bl-line); max-width: 280px; max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.chat-pop .who li { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; line-height: 1.3; color: var(--bl-text); }
.chat-pop .who b { flex: none; font-size: 15px; font-weight: 400; }
.chat-pop .who span { min-width: 0; overflow-wrap: anywhere; }
.chat-reacts .react { position: relative; }
@media (hover: hover) {
  .chat-reacts .react[data-who]:hover::after {
    content: attr(data-who); position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5;
    padding: 4px 8px; border-radius: 6px; background: #0b0d10; border: 1px solid var(--bl-line); box-shadow: 0 6px 16px rgba(0,0,0,0.5);
    color: var(--bl-text); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none;
  }
  /* Your own lines sit on the right, so the label reads leftward from the chip. */
  .chat-line.mine .chat-reacts .react[data-who]:hover::after { left: auto; right: 0; }
}
/* The desktop column rules size every child of a sheet screen, and the line
   card is one: it came out the width of the window. It is a card, sized to
   what is on it. */
.chat-pop, .screen.sheet.chat-page > .chat-pop { width: auto; max-width: min(340px, calc(100vw - 16px)); }
/* Sending another player credits, on their card. */
.profile-send { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bl-line); }
.profile-send[hidden], .profile-send .send-form[hidden], .profile-send [hidden] { display: none; }
.profile-send .send-form { display: flex; flex-direction: column; gap: 8px; }
.profile-send h4 { margin: 0; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.profile-send .row { display: flex; gap: 6px; }
.profile-send .row input { flex: 1 1 0; min-width: 0; }
.profile-send .send-amount { flex: 0 0 38%; }
/* Bounties on a board: the amount big, the time to beat, who and how long. */
.bounties { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 10px 12px; background: linear-gradient(90deg, rgba(255,184,77,0.12), rgba(255,255,255,0.03)); border-left: 3px solid #ffb84d; clip-path: var(--cut); }
.bounties[hidden], .bounties [hidden] { display: none; }
.bounties-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bounties-head h3 { margin: 0; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: #ffb84d; }
.bounty { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.bounty-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bounty-top .btn { margin-left: auto; }
.bounty-amt { font-family: var(--gnum); font-weight: 600; font-size: 26px; line-height: 1; color: #fff; }
.bounty-amt::after { content: ' cr'; font-family: var(--game); font-size: 13px; color: var(--gmute); }
.bounty-time { font-family: var(--gnum); font-weight: 500; font-size: 20px; color: #ffb84d; }
.bounty small { color: var(--gmute); font-size: 12px; }
.bounty-terms { font-family: var(--game); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: #f2f2f3; }
.bounty-form .field select { width: 100%; min-width: 0; }
.bounty-form .bounty-best { margin: 0; }
.bounty.hit .bounty-amt { color: #ffb84d; }
.bounty.paid { opacity: 0.7; }
.garage-bounty { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 12px 14px; background: linear-gradient(90deg, #3a2a10, #1b1712 70%); border: 1px solid rgba(255,184,77,0.5); border-left: 5px solid #ffb84d; clip-path: var(--cut); }
.garage-bounty[hidden] { display: none; }
.garage-bounty .gb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.garage-bounty small { font-family: var(--game); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #ffb84d; }
.garage-bounty small em { font-style: normal; color: #f2f2f3; letter-spacing: 0.08em; }
.garage-bounty b { font-family: var(--game); font-weight: 900; font-style: italic; font-size: 22px; line-height: 1.05; text-transform: uppercase; color: #fff; }
.garage-bounty span { font-size: 12.5px; line-height: 1.4; color: #e7d8b8; }
.garage-bounty .btn { flex: none; }
.bounty-tries { font-family: var(--game); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #ffb84d; }
/* What state a bounty is in, as a chip at the front of it. */
.bounty-chip { align-self: center; padding: 2px 7px 1px; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; clip-path: var(--cut); background: #2c7a4b; color: #fff; }
.bounty.hit .bounty-chip { background: #ffb84d; color: #1a1206; }
.bounty.paid .bounty-chip { background: #3a3f47; color: #cfd3d8; }
.bounty.hit { background: rgba(255,184,77,0.06); padding: 8px; }
.bounty.hit small { color: #e7d8b8; }
/* The rules, three lines at the top of every list. */
.bounty-rules { margin: 2px 0 4px; padding: 8px 10px 8px 28px; background: rgba(0,0,0,0.28); font-size: 12.5px; line-height: 1.45; color: var(--gmute); }
.bounty-rules li { margin: 2px 0; }
.bounty-rules b { color: #f2f2f3; }
.bounty-group h4 { margin: 6px 0 2px; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #ffb84d; }
.bounty-group h4 i { font-style: normal; color: #f2f2f3; }
.bounty-form { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); }
.bounty-form .row { display: flex; gap: 6px; flex-wrap: wrap; }
/* Going through your cars on the home screen: arrows either side of the car. */
#screen-menu .menu-hero-car > .hero-step { position: absolute; top: 24%; z-index: 2; width: 38px; height: 38px; min-height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; background: rgba(12,14,18,0.6); color: #fff; cursor: pointer; }
#screen-menu .menu-hero-car > .hero-step[hidden] { display: none; }
#screen-menu .menu-hero-car > .hero-step.prev { left: 2px; }
#screen-menu .menu-hero-car > .hero-step.next { right: 2px; }
.hero-count { font-style: normal; color: var(--gmute, #9aa3af); margin-left: 4px; }
.menu-hero-art.swap-l { animation: hero-in-l 220ms ease-out; }
.menu-hero-art.swap-r { animation: hero-in-r 220ms ease-out; }
.menu-hero-art.leave-l, .menu-hero-art.leave-r { animation: none; opacity: 0.25; transition: transform 160ms ease-in, opacity 160ms ease-in; }
.menu-hero-art.leave-l { transform: translateX(-12%); }
.menu-hero-art.leave-r { transform: translateX(12%); }
@keyframes hero-in-l { from { transform: translateX(18%); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes hero-in-r { from { transform: translateX(-18%); opacity: 0.2; } to { transform: none; opacity: 1; } }
/* How many are in a challenge, the same line on every challenge tile. */
.tile-count { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-family: var(--game); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gmute, #9aa3af); }
.tile-count[hidden] { display: none; }
.tile-count svg { width: 16px; height: 16px; flex: none; color: #ffb84d; }
.tile-count b { font-family: var(--gnum); font-weight: 600; font-size: 18px; line-height: 1; color: #fff; letter-spacing: 0.02em; }
.tile-count.none b { color: var(--gmute, #9aa3af); }
#screen-menu .menu-tiles.cards .btn.tile.wide .tile-count { margin-top: auto; padding-top: 6px; }
/* The crew a name runs for, beside it on the boards. */
.crew-tag { display: inline-block; margin-left: 6px; padding: 1px 6px 0; vertical-align: 2px; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--game); font-style: italic; font-weight: 800; font-size: 10.5px; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; color: #111; background: #ffb84d; transform: skewX(-12deg); }
/* A day that pays more than the base, on the Daily tile. */
.rule-chip.purse { background: #ffb84d; color: #111; border-color: transparent; }
/* The leaderboard in tabs: the board, its bounties, the week, the crews. */
.lb-tabs { margin: 0 0 8px; }
.lb-tabs .tab[hidden] { display: none; }
.lb-count { font-style: normal; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #ffb84d; color: #111; font-size: 11px; font-weight: 800; line-height: 18px; display: inline-block; text-align: center; transform: skewX(12deg); }
.lb-count[hidden] { display: none; }
#lb-filters[hidden] { display: none; }
#lb-filters .lb-off { display: none; }
.lb-pane[hidden] { display: none; }
.week-card.lb-open { padding: 10px 12px; }
.lb-pane-sub { margin: 0 0 8px; }
.lb-pane-sub:empty { display: none; }
.bounty-paid { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 6px; }
.bounty-paid > summary { cursor: pointer; list-style: none; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gmute); display: flex; align-items: center; gap: 8px; }
.bounty-paid > summary::-webkit-details-marker { display: none; }
.bounty-paid > summary i { font-style: normal; color: #f2f2f3; }
.bounty-paid > summary::after { content: '+'; margin-left: auto; font-size: 16px; }
.bounty-paid[open] > summary::after { content: '\2212'; }
.bounty-form .field { flex: 1 1 90px; min-width: 0; }
/* The turbo and the tread, beside the motor. */
.health.parts { display: flex; flex-direction: column; gap: 10px; }
.health.parts .part + .part { padding-top: 10px; border-top: 1px solid var(--bl-line); }
.health.parts .part.warn .meter i { background: #ffb84d; }
.health.parts .part.good .meter i { background: #3ecf6e; }
.health.parts .health-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Saved tunes on the car tab: a row of chips, one tap each, the one on the car lit. */
.health.setups .health-head { align-items: center; }
.health.setups .health-head .btn { margin-top: 0; }
.tune-chips { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; scrollbar-width: thin; }
.setup-chip { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; min-width: 120px; max-width: 220px; padding: 8px 12px; text-align: left; color: #f2f2f3; background: #1b1f26; border: 1px solid var(--bl-line); border-radius: 0; clip-path: var(--cut); cursor: pointer; font: inherit; }
.setup-chip b { grid-column: 2; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-chip small { grid-column: 2; font-size: 11px; color: #9aa3ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-chip .setup-paint { grid-row: 1 / span 2; width: 12px; height: 26px; border: 1px solid rgba(255, 255, 255, 0.25); }
.setup-chip:hover { border-color: #3a414c; }
.setup-chip.on { border-color: var(--bl-red, #d61e3b); background: #2a1519; }
.setup-chip.on small { color: #f2c4cb; }

/* Health: one card, a meter per part. Green is fresh, amber is tired, red needs work. */
.vitals-head { display: flex; align-items: center; gap: 8px; }
.vitals-head b { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: #f2f2f3; }
.vitals-head span { flex: 1; font-size: 12px; color: #9aa3ad; }
.health.parts .part.bad .meter i, .vitals-strip .vital.bad .meter i { background: #d61e3b; }
.health.parts .part.bad .health-head em { color: #ff5a6e; }
.health.parts .part.warn .health-head em { color: #ffb84d; }
.part-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: #9aa3ad; }
.part-foot span { flex: 1 1 0; min-width: 0; }
.part-foot .btn { flex: 0 0 auto; margin-top: 0; }
/* Some wear and nothing to worry about: a plain bar, so amber means tired and red means act. */
.health.parts .part:not(.good):not(.warn):not(.bad) .meter i, .vitals-strip .vital:not(.good):not(.warn):not(.bad) .meter i { background: #c9d2dc; }
.health .vitals-rule { margin: 0; }
.health .vitals-rule .link-btn { font-size: inherit; }
.pretune-health[hidden] { display: none; }
.pretune-health { margin: 6px 0 4px; }
.vitals-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vitals-strip .vital { display: grid; grid-template-columns: 1fr auto; column-gap: 6px; align-items: baseline; padding: 6px 8px; background: #14171c; border: 1px solid var(--bl-line); clip-path: var(--cut); }
.vitals-strip .vital span { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa3ad; }
.vitals-strip .vital b { font-size: 13px; font-weight: 800; color: #f2f2f3; }
.vitals-strip .vital .meter { grid-column: 1 / -1; height: 5px; margin-top: 4px; }
.vitals-strip .vital.good .meter i { background: #3ecf6e; }
.vitals-strip .vital.warn .meter i { background: #ffb84d; }
.vitals-strip .vital.warn b { color: #ffb84d; }
.vitals-strip .vital.bad b { color: #ff5a6e; }
.pretune-health .vitals-warn { margin: 6px 0 0; }

/* On the street the tree is a traffic light: the staging bulbs on top, then
   red, yellow and green in a housing. Yellow never lights; the ambers are gone. */
.drag-tree.signal { background: #1c1e0f; border-color: #3a3c22; border-radius: 8px; padding: 8px 10px; }
.drag-tree.signal i[data-light="amber1"], .drag-tree.signal i[data-light="amber3"] { display: none; }
.drag-tree.signal b { order: 0; }
.drag-tree.signal i[data-light="red"] { order: 1; }
.drag-tree.signal i[data-light="amber2"] { order: 2; background: #3a2a08; }
.drag-tree.signal i[data-light="green"] { order: 3; }
.drag-tree.signal i:not(b i) { width: 30px; height: 30px; }
/* The bench's turbo on its tile: the picture is drawn on black, and lighten
   drops the black into the tile so the turbo sits on the card the way the
   trophy and the cars do. */
#screen-menu .menu-tiles.cards.g4 [data-nav="bench"] .quad-art { mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); }

/* The Lanes: what an ask is for, picked before asking. */
.lobby-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.lobby-kind .seg { display: flex; gap: 4px; }
.lobby-kind p { flex-basis: 100%; margin: 0; }
.class-chip.np-chip { background: rgba(255, 122, 40, 0.18); color: #ffb27a; }

/* The dyno cell (shop only): the car on the rollers up top with the live
   readings and the three gauges over it, the pull button and the sheet and
   log underneath. Laid out like the garage, so the camera finds the car in
   the same way: the stage is the region it measures. */
/* The dyno is a Pro feature now; it used to say Shop to everybody who got in. */
.screen.dyno .dyno-shop { margin-left: auto; font-family: var(--game, var(--font)); font-weight: 800; font-style: italic; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--bl-red); padding: 3px 10px; transform: skewX(-12deg); }
#screen-dyno { --dyno-top: calc(var(--safe-top) + 52px + 50vh); --dyno-left: 46%; }
.dyno-stage { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 52px); height: calc(var(--dyno-top) - var(--safe-top) - 52px); touch-action: none; cursor: grab; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px 6px; pointer-events: auto; }
.dyno-live { display: flex; gap: 6px; flex-wrap: wrap; }
.dyno-chip { background: rgba(10,12,15,0.78); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 3px 8px; display: flex; flex-direction: column; min-width: 50px; }
.dyno-chip span { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
.dyno-chip b { font-family: var(--gnum, var(--font)); font-size: 16px; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.dyno-chip.knock.on { background: rgba(224,40,40,0.9); border-color: #ff6a6a; }
/* Each reading is as wide as the widest it can show, so a digit coming or
   going does not push the boxes along. Kirk: they bounce around as the numbers
   go up. Measured in em, the widest each has to show at its own size (1,648 F,
   12.5 deg, 1,487, 100%), so they hold at every size below. Not ch: the
   bold Teko draws its digits wider than the 0 that ch is taken from. */
.dyno-chip { flex: none; }
.dyno-chip b { display: block; white-space: nowrap; }
#dyno-gear b { min-width: 0.85em; }
#dyno-mph b { min-width: 1.35em; }
#dyno-whp b { min-width: 2em; }
#dyno-egt b { min-width: 2.6em; }
#dyno-knock b { min-width: 3em; }
#dyno-timing b { min-width: 1.9em; }
#dyno-health b { min-width: 2.1em; }
.dyno-chip.knock.on span { color: #fff; }
.dyno-gauges { display: flex; justify-content: center; gap: 6px; }
.dyno-gauge { width: min(28vw, 124px); height: min(28vw, 124px); }
.dyno-panel { position: absolute; left: 0; right: 0; bottom: 0; top: var(--dyno-top); background: var(--bl-ink); border-top: 3px solid var(--bl-orange); border-radius: 18px 18px 0 0; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
/* The panel scrolls above the dock, never under it: Kirk could not read what
   was under the tables or the last pulls with the dock laid over them. */
.dyno-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 12px calc(var(--safe-right) + 14px) 16px calc(var(--safe-left) + 14px); display: flex; flex-direction: column; gap: 10px; }
.dyno-scroll > * { flex: none; }
.dyno-head h3 { margin: 0; font-size: 18px; }
.dyno-head .sub { margin: 2px 0 0; font-size: 12px; color: var(--bl-muted); }
.dyno-go { min-height: 52px; font-size: 20px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.dyno-go:disabled { opacity: 0.55; }
.dyno-go.pulling { background: linear-gradient(180deg, #3a3f47 0%, #262a31 100%); }
.dyno-phase { margin: -4px 0 0; font-size: 12px; color: var(--bl-muted); text-align: center; }
.dyno-peaks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* Kirk: on the desktop all the readouts blend in, with no borders or
   organization. Each reading is a tile with an edge, the three groups have
   a heading and a rule between them, the headline numbers carry the red
   along their top, and a reading in trouble is lit red, not just its digits. */
.dyno-peaks div { background: #1b2028; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 7px 9px; display: flex; flex-direction: column; }
.dyno-peaks:not(.small) div { border-top: 2px solid var(--bl-red); }
.dyno-peaks div:has(b.warn) { border-color: rgba(255,90,90,0.7); background: rgba(255,90,90,0.09); }
.dyno-group { display: flex; align-items: center; gap: 8px; margin: 10px 2px 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
.dyno-group::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
#dyno-summary > .dyno-group:first-child { margin-top: 0; }
.dyno-peaks span { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
.dyno-peaks b { font-family: var(--gnum, var(--font)); font-size: 22px; line-height: 1.1; color: #fff; }
.dyno-peaks b.warn { color: #ff5a5a; }
.dyno-peaks small { font-size: 10px; color: var(--bl-muted); }
.dyno-empty, .dyno-note { margin: 0; font-size: 13px; color: var(--bl-muted); }
.dyno-view { align-self: flex-start; }
.dyno-channels { display: flex; flex-wrap: wrap; gap: 5px; }
.dyno-chan { border: 1px solid var(--c); background: transparent; color: var(--c); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700; opacity: 0.45; }
.dyno-chan.on { background: color-mix(in srgb, var(--c) 18%, transparent); opacity: 1; }
.dyno-graph { width: 100%; height: 250px; touch-action: pan-y; border-radius: 8px; }
.dyno-cursor { margin: -4px 0 0; min-height: 16px; font-size: 13px; color: var(--bl-muted); line-height: 1.5; }
.dyno-cursor span { margin-right: 6px; white-space: nowrap; }
.dyno-pulls { display: flex; flex-direction: column; gap: 5px; }
.dyno-pull { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 8px; text-align: left; background: rgba(255,255,255,0.04); border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; color: var(--bl-text); font-size: 12px; }
.dyno-pull.active { border-color: var(--bl-orange); background: rgba(214,30,59,0.1); }
.dyno-pull .swatch { width: 12px; height: 12px; border-radius: 3px; }
.dyno-pull span:last-child { color: var(--bl-muted); }
.dyno-cell-open { width: 100%; margin-bottom: 4px; }
.dyno-tunebar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--bl-line); }
.dyno-tunename { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dyno-tunename span { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
.dyno-tunename b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dyno-tunename em { font-style: normal; font-size: 11px; font-weight: 700; color: #ffb020; white-space: nowrap; }
.dyno-tunebar .btn.on { background: var(--bl-orange); color: #fff; }
.tune-new { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.tune-new input, .tune-rename { min-width: 0; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--bl-line); background: rgba(0,0,0,0.3); color: var(--bl-text); font: inherit; font-size: 14px; }
.tune-list { display: flex; flex-direction: column; gap: 5px; }
.tune-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid transparent; }
.tune-row.on { border-color: var(--bl-orange); background: rgba(214,30,59,0.1); }
.tune-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tune-info b { font-size: 14px; }
.tune-info small { font-size: 11px; color: var(--bl-muted); }
.tune-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tune-acts .btn.warn { background: #6b1420; color: #fff; }
.tune-loaded { font-size: 12px; font-weight: 700; color: var(--bl-orange); margin-right: auto; }
.dyno-curve { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.dyno-curve > div { display: flex; flex-direction: column; background: #1b2028; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 7px 10px; }
.dyno-curve span { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
.dyno-curve b { font-family: var(--gnum, var(--font)); font-size: 20px; line-height: 1.1; color: #fff; }
.dyno-curve small { font-size: 10px; color: var(--bl-muted); }
.dyno-challenge { margin: 6px 0 0; padding: 6px 9px; border-radius: 8px; background: rgba(255,208,32,0.1); border: 1px solid rgba(255,208,32,0.35); font-size: 12px; line-height: 1.4; color: #ffe07a; }
.dyno-verdict { margin: 0; font-size: 13px; font-weight: 700; color: var(--bl-muted); min-height: 0; }
.dyno-verdict.good { color: #34c759; }
.dyno-verdict.bad { color: #ff5a5a; }
.dyno-board { display: flex; flex-direction: column; gap: 4px; }
.dyno-board-row { display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "place name whp" "place meta meta"; align-items: baseline; column-gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid transparent; font-size: 13px; }
.dyno-board-row.mine { border-color: var(--bl-orange); background: rgba(214,30,59,0.1); }
.dyno-board-row .place { grid-area: place; font-family: var(--gnum, var(--font)); font-size: 16px; color: var(--bl-muted); align-self: center; }
.dyno-board-row .name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dyno-board-row .whp { grid-area: whp; font-family: var(--gnum, var(--font)); font-size: 16px; color: #fff; }
.dyno-board-row .whp small { font-size: 10px; color: var(--bl-muted); }
.dyno-board-row .meta { grid-area: meta; font-size: 11px; color: var(--bl-muted); }
.dyno-challenge-card { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255,208,32,0.08); border: 1px solid rgba(255,208,32,0.3); }
.dyno-challenge-card h4 { margin: 0; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.dyno-challenge-card .car-note { margin: 0; }
@media (orientation: landscape) and (min-width: 640px) {
  .dyno-stage { right: calc(100% - var(--dyno-left)); height: auto; bottom: 0; }
  .dyno-panel { left: var(--dyno-left); top: calc(var(--safe-top) + 52px); border-radius: 18px 0 0 0; border-left: 1px solid var(--bl-line); }
  .dyno-grip { top: calc(var(--safe-top) + 52px); bottom: 0; left: var(--dyno-left); right: auto; width: 24px; height: auto; transform: translateX(-12px); cursor: ew-resize; }
  .dyno-grip span { width: 5px; height: 56px; }
  .dyno-gauge { width: min(14vw, 132px); height: min(14vw, 132px); }
}

/* The standalone's tables and setup (shop only, in the dyno cell). */
.dyno-tabs { align-self: stretch; display: flex; }
.dyno-tabs .btn { flex: 1; }
.dyno-pane { display: flex; flex-direction: column; gap: 10px; }
.dyno-pane[hidden] { display: none; }
.dyno-peaks.small b { font-size: 18px; }
.dyno-chip.warn { background: rgba(224,40,40,0.85); }
.map-tools { display: flex; flex-direction: column; gap: 6px; }
.map-sel { font-size: 12px; color: var(--bl-text); min-height: 16px; }
.map-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.map-main { display: grid; grid-template-columns: 52px 52px 1fr 1fr; gap: 6px; }
.map-main .map-btn { min-height: 42px; font-size: 14px; padding: 4px 6px; }
.map-more { display: grid; grid-template-columns: auto auto auto 1fr; gap: 6px; }
.map-more .map-btn { padding: 4px 8px; }
.map-set { display: flex; gap: 4px; justify-content: flex-end; min-width: 0; }
.map-tools .map-set .map-input { width: 100%; min-width: 44px; max-width: 72px; flex: 1 1 auto; }
.map-sel.note { color: #ffb020; }
.map-table td, .map-table th { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.map-table.dragging td.sel { outline-color: #ffd020; }
.map-group { display: flex; gap: 4px; align-items: center; background: rgba(255,255,255,0.04); border-radius: 8px; padding: 3px; }
.map-btn { min-height: 34px; padding: 4px 10px; font-size: 13px; font-weight: 700; }
.map-btn.on { background: var(--bl-orange); color: #fff; border-color: transparent; }
.map-input { width: 64px; min-height: 32px; border-radius: 6px; border: 1px solid var(--bl-line); background: #0f1115; color: #fff; padding: 2px 6px; font-size: 14px; }
.map-scroll { overflow: auto; max-height: 46vh; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.map-table { border-collapse: separate; border-spacing: 1px; font-variant-numeric: tabular-nums; font-size: 11px; background: #0b0d10; }
.map-table th { position: sticky; background: #15181d; color: var(--bl-muted); font-weight: 700; padding: 4px 5px; white-space: nowrap; cursor: pointer; z-index: 1; }
.map-table thead th { top: 0; z-index: 2; }
.map-table tbody th { left: 0; text-align: right; }
.map-table th.corner { left: 0; z-index: 3; font-size: 9px; }
.map-table td { min-width: 34px; text-align: center; padding: 5px 2px; color: #fff; cursor: pointer; position: relative; }
.map-table td.ch { font-weight: 800; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.5); }
/* Kirk: when it highlights the cells during a pull it should make them easier
   to find, the white/gray is hard to see. The cells a pull went through were a
   35% white line, lost on the pale greens and the blues. They are an amber ring
   and a lift now, the live cell the same yellow at full weight with a glow so
   it stands out of its own trail, and the cell being edited a heavier white
   with a dark edge so it reads on any color. */
.map-table td.sel { outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 4px rgba(0,0,0,0.6); }
.map-table td.trail { box-shadow: inset 0 0 0 2px #ffb020, inset 0 0 0 4px rgba(0,0,0,0.35); filter: brightness(1.18); }
.map-table td.live { outline: 3px solid #ffd020; outline-offset: -3px; box-shadow: inset 0 0 0 5px rgba(0,0,0,0.45), 0 0 12px 3px rgba(255,208,32,0.85); filter: brightness(1.25); z-index: 2; }
.map-table td.knock::after { content: ''; position: absolute; inset: 2px; border: 2px solid #ff3030; border-radius: 50%; pointer-events: none; }
.map-legend { margin: 0; font-size: 12px; color: var(--bl-muted); }
.ecu-card { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ecu-card h4 { margin: 0; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.ecu-card .car-note { margin: 0; }
.ecu-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); }
.ecu-slider { display: flex; align-items: center; gap: 10px; }
.ecu-slider input { flex: 1; }
.ecu-slider b { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.ecu-card .btn.warn { background: #6b1420; color: #fff; }
.map-tools .map-input { width: 72px; flex: none; }
.map-tools .map-group { flex: none; }
.dyno-live { gap: 4px; }
.dyno-chip { min-width: 0; padding: 2px 6px; }
.dyno-chip span { font-size: 8px; letter-spacing: 0.1em; }
.dyno-chip b { font-size: 14px; }

/* ECU mode on the strip (shop only): the standalone's readings over the pass. */
.ecu-hud { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 96px); display: flex; gap: 4px; z-index: 4; pointer-events: none; }
.ecu-hud[hidden] { display: none; }
.ecu-hud > div { background: rgba(10,12,15,0.8); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 2px 8px; display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.ecu-hud span { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; color: var(--bl-muted); }
.ecu-hud b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
/* Held to their widest, the same as the cell's: the row is centered, so one
   reading growing a digit would shift all four. */
.ecu-hud b { display: block; text-align: center; white-space: nowrap; }
#ecu-hud-afr { min-width: 2.6em; }
#ecu-hud-timing { min-width: 3em; }
#ecu-hud-knock { min-width: 1.5em; }
#ecu-hud-egt { min-width: 2.9em; }
.ecu-hud .k.on { background: rgba(224,40,40,0.9); }
.dyno-sub { margin: 6px 0 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.ecu-bests { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ecu-bests div { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 6px 8px; }
.ecu-bests span { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.ecu-bests b { font-size: 18px; }

.dyno-dock { position: relative; flex: none; z-index: 6; margin: 0; padding: 8px calc(var(--safe-right) + 14px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 14px); background: var(--bl-ink); border-top: 1px solid var(--bl-line); box-shadow: 0 -10px 24px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 6px; }
.dock-main { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.dock-main .dock-holdbtn[hidden] + .dock-keybtn { grid-column: 3; }
.dock-keybtn { min-width: 86px; padding: 0 12px; }
.dock-keybtn.off { background: #1f9d55; border-color: #1f9d55; color: #fff; }
#screen-dyno.key-off .dyno-gauges { opacity: 0.45; }
.dock-main .dyno-go { min-height: 50px; }
.dock-holdbtn { min-width: 96px; min-height: 50px; font-weight: 800; }
.dock-holdbtn.on { background: var(--bl-orange); color: #fff; border-color: transparent; }
.dock-hold { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dock-hold[hidden], .dock-cell[hidden] { display: none; }
.dock-knob { display: grid; grid-template-columns: 42px 1fr 42px; align-items: stretch; gap: 4px; }
.dock-btn { min-height: 42px; min-width: 0; padding: 0; font-size: 22px; font-weight: 800; line-height: 1; }
.dock-val { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 0; border-radius: 8px; color: var(--bl-text); padding: 2px 4px; font: inherit; min-width: 0; }
.dock-val b { font-family: var(--gnum, var(--font)); font-size: 18px; line-height: 1.05; }
.dock-val small { font-size: 9px; color: var(--bl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dock-cell { display: grid; grid-template-columns: 1fr 52px 52px; gap: 6px; align-items: stretch; }
.dock-cell-read { display: flex; flex-direction: column; justify-content: center; padding: 3px 10px; border-radius: 8px; background: rgba(255,208,32,0.1); border: 1px solid rgba(255,208,32,0.35); min-width: 0; }
.dock-cell-read span { font-size: 11px; color: #ffe07a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-cell-read b { font-family: var(--gnum, var(--font)); font-size: 18px; line-height: 1.1; }
.dock-cell-read b small { font-size: 11px; color: var(--bl-muted); margin-left: 4px; }

/* The cursor on the tables: where the motor is between the cells. */
.map-scroll { position: relative; }
.map-cursor { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #ffd020; border: 2px solid #111; box-shadow: 0 0 0 2px rgba(255,208,32,0.45), 0 0 10px rgba(255,208,32,0.8); pointer-events: none; z-index: 4; transition: transform 60ms linear; }
.map-cursor[hidden] { display: none; }
.map-table th.hot { background: #ffd020; color: #111; }
.map-cursor { z-index: 1; }
.map-table tbody th { z-index: 2; }
.map-table thead th { z-index: 3; }
.map-table th.corner { z-index: 4; }

/* The tables as a graph or a surface. */
.map-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.map-head .map-sel { flex: 1; min-width: 0; }
.map-view .btn, .map-lines .btn { min-height: 30px; padding: 2px 10px; font-size: 12px; }
.map-graph { display: flex; flex-direction: column; gap: 6px; }
.map-graph[hidden] { display: none; }
.map-graph canvas { width: 100%; height: min(46vh, 340px); border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); touch-action: pan-y; display: block; }
.map-graph-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.map-graph-bar[hidden] { display: none; }
.map-graph-hint { font-size: 11px; color: var(--bl-muted); }

/* On a desktop there is room: the readouts read from across the desk. */
@media (orientation: landscape) and (min-width: 1000px) {
  .dyno-live { gap: 8px; }
  .dyno-chip { padding: 6px 12px; min-width: 84px; border-radius: 8px; }
  .dyno-chip span { font-size: 11px; letter-spacing: 0.12em; }
  .dyno-chip b { font-size: 26px; }
  .dyno-gauges { gap: 14px; }
  .dyno-gauge { width: min(13vw, 230px); height: min(13vw, 230px); }
  .dyno-head h3 { font-size: 22px; }
  .dyno-head .sub, .dyno-phase { font-size: 14px; }
  .dyno-tunename b { font-size: 17px; }
  .map-sel { font-size: 14px; }
  .map-table { font-size: 14px; }
  .map-table td { min-width: 46px; padding: 7px 4px; }
  .map-table th { padding: 6px 7px; }
  .map-graph canvas { height: min(52vh, 460px); }
  .dock-cell-read span { font-size: 14px; }
  .dock-cell-read b { font-size: 26px; }
  .dock-val b { font-size: 24px; }
  .dock-val small { font-size: 11px; }
  .dyno-peaks b { font-size: 28px; }
  .dyno-peaks { gap: 10px; }
  .dyno-peaks div, .dyno-curve > div { padding: 10px 14px; }
  .dyno-curve { gap: 10px; }
  .dyno-group { font-size: 11.5px; margin: 14px 2px 8px; }
  .dyno-peaks span, .dyno-curve span { font-size: 11px; }
  .dyno-curve b { font-size: 26px; }
  .dyno-graph { height: 340px; }
}

/* The sheet read at the rpm under a finger. */
.dyno-read { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.dyno-read > div { display: flex; flex-direction: column; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 5px 7px; min-width: 0; }
.dyno-read span { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.dyno-read b { font-family: var(--gnum, var(--font)); font-size: 19px; line-height: 1.1; color: #fff; }
.dyno-read small { font-size: 10px; color: var(--bl-muted); }
.dyno-read-note { font-size: 13px; line-height: 1.45; color: var(--bl-text); }
@media (orientation: landscape) and (min-width: 1000px) {
  .dyno-cursor { font-size: 15px; }
  .dyno-read b { font-size: 28px; }
  .dyno-read span { font-size: 11px; }
  .dyno-read small { font-size: 12px; }
  .dyno-read-note { font-size: 15px; }
}

/* The panel's grip: drag it to give the tables more of the screen. */
.dyno-grip { position: absolute; left: 0; right: 0; top: var(--dyno-top); height: 26px; transform: translateY(-13px); z-index: 8; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: ns-resize; }
.dyno-grip span { width: 56px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.55); box-shadow: 0 0 0 3px rgba(11,13,17,0.6); }
.dyno-grip.dragging span { background: var(--bl-orange); }
/* Gauges give way when the panel is pulled up over them; the dock carries the live numbers instead. */
#screen-dyno.tall .dyno-gauges { display: none; }
.dock-cell-read em { font-style: normal; font-size: 11px; color: var(--bl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dyno-pane .map-scroll { max-height: var(--map-h, 46vh); }
.dyno-pane .map-graph canvas { height: var(--map-h, min(46vh, 340px)); }


/* Table and surface side by side, the way MoTeC lays them out, where there is the width. */
.map-views { display: flex; flex-direction: column; gap: 8px; }
.map-views.both { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.map-views.both .map-graph canvas { height: var(--map-h, 46vh); }
.map-both-btn[hidden] { display: none; }

/* The VE table's error view and its correction. */
.map-extra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.map-show .btn { min-height: 34px; padding: 4px 10px; font-size: 12px; }
.map-table.overlay td { font-weight: 700; }

/* The coach: what a pull says, and what a reading is. */
.dyno-report { background: rgba(255,255,255,0.03); border: 1px solid var(--bl-line); border-radius: 10px; padding: 8px 10px; }
.dyno-report h5 { margin: 0 0 6px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
.dyno-report ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dyno-report li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--bl-text); }
.dyno-report li i { font-style: normal; font-weight: 900; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; }
.dyno-report li.bad i { background: #c8102e; color: #fff; }
.dyno-report li.warn i { background: #ffb020; color: #111; }
.dyno-report li.good i { background: #1f9d55; color: #fff; }
[data-explain] { cursor: help; }
.dyno-explain { position: fixed; z-index: 30; background: #1b1e24; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.dyno-explain b { display: block; font-size: 14px; margin-bottom: 4px; color: #fff; }
.dyno-explain p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--bl-text); }
@media (orientation: landscape) and (min-width: 1000px) {
  .dyno-report li { font-size: 15px; }
  .dyno-explain p { font-size: 15px; }
}
.dyno-graph.with-delta { height: 320px; }
@media (orientation: landscape) and (min-width: 1000px) { .dyno-graph.with-delta { height: 430px; } }

/* The timing sweep. */
.dock-cell:has(.dock-sweep:not([hidden])) { grid-template-columns: 1fr 48px 48px auto; }
.dock-sweep { padding: 0 10px; font-size: 14px; }
.dyno-sweep { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,208,32,0.35); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.dyno-sweep h5 { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #ffe07a; }
.dyno-sweep p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--bl-text); }
.dyno-sweep canvas { width: 100%; height: 170px; display: block; border-radius: 8px; }
.dyno-sweep .row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tuning School: the lesson over the tables, and its door in the garage. */
.dyno-lesson { background: rgba(63,210,255,0.06); border: 1px solid rgba(63,210,255,0.35); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.dyno-lesson .lesson-head { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.dyno-lesson .lesson-head span { grid-column: 1; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #7fdcff; }
.dyno-lesson .lesson-head b { grid-column: 1; font-size: 15px; color: #fff; }
.dyno-lesson .lesson-head .btn { grid-column: 2; grid-row: 1 / span 2; }
.dyno-lesson .lesson-intro { margin: 0; font-size: 13px; line-height: 1.45; color: var(--bl-muted); }
.dyno-lesson .lesson-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dyno-lesson .lesson-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--bl-muted); }
.dyno-lesson .lesson-steps li i { font-style: normal; font-weight: 900; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; border: 1px solid rgba(255,255,255,0.25); }
.dyno-lesson .lesson-steps li.now { color: #fff; }
.dyno-lesson .lesson-steps li.now i { background: #3fd2ff; border-color: #3fd2ff; color: #06202a; }
.dyno-lesson .lesson-steps li.done i { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.dyno-lesson .lesson-done { margin: 0; font-size: 14px; font-weight: 700; color: #7cf29a; }
.dyno-lesson .row { display: flex; gap: 8px; flex-wrap: wrap; }
.school-list { display: flex; flex-direction: column; gap: 6px; }
.school-lesson { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--bl-line); color: var(--bl-text); font: inherit; cursor: pointer; }
.school-lesson:hover { border-color: rgba(255,255,255,0.3); }
.school-lesson i { font-style: normal; font-weight: 900; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 1px solid rgba(255,255,255,0.3); color: #fff; }
.school-lesson.done i { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.school-lesson.next { border-color: rgba(63,210,255,0.55); background: rgba(63,210,255,0.07); }
.school-lesson.next i { background: #3fd2ff; border-color: #3fd2ff; color: #06202a; }
.school-lesson b { display: block; font-size: 15px; color: #fff; }
.school-lesson small { display: block; font-size: 13px; color: var(--bl-muted); line-height: 1.4; margin-top: 2px; }
.school-lesson.exam { border-color: rgba(255,208,32,0.45); background: rgba(255,208,32,0.06); }
.school-lesson.exam i { border-color: #ffd020; color: #ffd020; }
.school-lesson.exam.done i { background: #1f9d55; border-color: #1f9d55; color: #fff; }
#school-page { display: flex; flex-direction: column; gap: 10px; padding: 12px calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 90px) calc(var(--safe-left) + 16px); max-width: 860px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.school-head { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(63,210,255,0.06); border: 1px solid rgba(63,210,255,0.3); }
.school-head h3 { margin: 0 0 4px; font-size: 18px; }
.school-head .car-note { margin: 0 0 8px; }
.school-head .school-art { width: 100%; height: auto; }
.school-progress { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.school-progress span { display: block; height: 100%; background: #3fd2ff; }
@media (max-width: 560px) { .school-head { grid-template-columns: 1fr; } .school-head .school-art { max-width: 260px; } }
/* The school's three parts: Lessons, Handbook, Certification. One row,
   even widths, the count under each name, held under the header while the
   page scrolls so the handbook is always a tap away. */
.school-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px -2px 0; padding: 6px 2px; position: sticky; top: calc(var(--safe-top) + 52px); z-index: 4; background: rgb(15,17,21); box-shadow: 0 -12px 0 rgb(15,17,21); }
.school-tabs .btn { min-height: 46px; padding: 6px 8px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 13px; font-weight: 800; line-height: 1.1; }
.school-tabs .btn small { font-size: 11px; font-weight: 600; opacity: 0.75; font-variant-numeric: tabular-nums; }
/* Four tabs (the Turbos tab joined them): two rows of two on a phone, so none sits alone. */
@media (max-width: 560px) { .school-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .school-tabs .btn { min-height: 40px; } }
.school-pane { display: flex; flex-direction: column; gap: 10px; }
.school-pane[hidden] { display: none; }
/* A chapter folds to one line once it is done; the one under way stays open. */
.school-ch { border-radius: 12px; }
.school-ch > summary { display: flex; align-items: center; gap: 10px; padding: 10px 2px 8px; cursor: pointer; list-style: none; }
.school-ch > summary::-webkit-details-marker { display: none; }
.school-ch > summary .menu-eyebrow { flex: 1; min-width: 0; }
.school-ch > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--bl-muted); border-bottom: 2px solid var(--bl-muted); transform: rotate(45deg); margin: 0 6px 4px 0; transition: transform 0.15s; }
.school-ch[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.school-ch-count { font-size: 12px; font-weight: 700; color: var(--bl-muted); font-variant-numeric: tabular-nums; }
.school-ch-count.done { color: #7cf29a; }
/* The handbook's contents: a card a page, with a still of its diagram. */
.book-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.book-tile { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; text-align: left; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--bl-line); color: var(--bl-text); font: inherit; cursor: pointer; }
.book-tile:hover { border-color: rgba(127,220,255,0.55); }
.book-thumb { display: block; width: 100%; aspect-ratio: 320 / 180; background: #0e1014; border-bottom: 1px solid var(--bl-line); pointer-events: none; }
.book-tile-text { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.book-tile-text em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #7fdcff; }
.book-tile-text b { font-size: 15px; color: #fff; }
.book-tile-text small { font-size: 13px; line-height: 1.4; color: var(--bl-muted); }
@media (max-width: 560px) {
  .book-menu { grid-template-columns: 1fr 1fr; gap: 8px; }
  .book-tile-text { padding: 8px 9px 10px; }
  .book-tile-text b { font-size: 13.5px; }
  .book-tile-text small { display: none; }
}
.dyno-elsewhere { margin-top: 6px; }
/* Tuning School's certificates and quizzes (js/schoolquiz.js). Bronze,
   silver and gold for the three levels; a quiz row reads like a lesson. */
.cert-mark { display: inline-block; width: 1em; height: 1em; min-width: 13px; min-height: 13px; max-width: 17px; max-height: 17px; margin-left: 4px; vertical-align: -0.14em; flex: none; }
.cert-slot:empty { display: none; }
.cert-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cert-level { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--bl-line); }
.cert-level .cert-mark { width: 34px; height: 34px; max-width: none; max-height: none; margin: 0; }
.cert-level small { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.cert-level b { display: block; font-size: 16px; color: #fff; }
.cert-level span { display: block; font-size: 12.5px; color: var(--bl-muted); line-height: 1.5; margin-top: 4px; }
.cert-level .btn { grid-column: 1 / -1; margin-top: 4px; }
.cert-level.held { border-color: rgba(255,194,26,0.5); background: rgba(255,194,26,0.07); }
.cert-level.held span { color: #ffd35c; }
.cert-note { margin: 0; }
/* The dyno tune on the strip, said where people look for it. */
.dyno-strip-cta { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: rgba(214,30,59,0.08); border: 1px solid rgba(214,30,59,0.45); }
.dyno-strip-cta p { margin: 0; flex: 1; font-size: 13px; line-height: 1.4; color: var(--bl-text); }
.dyno-strip-cta .btn { flex: none; }
@media (max-width: 520px) { .dyno-strip-cta { flex-direction: column; align-items: stretch; } }
.dyno-tuned-door { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bl-line); }
.dyno-tuned-door p { margin: 0 0 8px; }
@media (max-width: 620px) { .cert-levels { grid-template-columns: 1fr; } .cert-level .btn { grid-column: 2; justify-self: start; } }
.school-lesson.quiz { border-color: rgba(255,184,77,0.45); background: rgba(255,184,77,0.06); }
.school-lesson.quiz i { border-color: #ffb84d; color: #ffb84d; }
.school-lesson.quiz.done i { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.school-lesson.quiz.locked { opacity: 0.6; }
/* Finding the fault: a step that asks, its answer, and why. */
.dyno-lesson .lesson-ask { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dyno-lesson .lesson-ask .btn { justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.3; padding: 6px 9px; min-height: 0; font: 600 12.5px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; letter-spacing: 0; text-transform: none; }
.dyno-lesson .lesson-ask .btn.wrong { border-color: rgba(255,90,110,0.7); color: #ff9aa6; }
.dyno-lesson .lesson-wrong { display: block; margin-top: 2px; font-size: 12px; color: #ff9aa6; }
.dyno-lesson .lesson-why { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(52,199,89,0.1); border: 1px solid rgba(52,199,89,0.35); font-size: 12.5px; line-height: 1.45; color: var(--bl-text); }
.dyno-lesson .lesson-why b { color: #7cf29a; }
/* Shop work on the Setup tab: the parts, one under the other. */
#shop-work .shop-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#shop-work .shop-parts .btn { white-space: normal; line-height: 1.25; min-height: 40px; }
#shop-work .shop-parts .btn.done { border-color: rgba(52,199,89,0.5); color: #7cf29a; opacity: 1; }
/* The practical: its clock, and every check the school makes. */
.dyno-lesson .practical-clock { font-variant-numeric: tabular-nums; color: #7fdcff; }
.dyno-lesson .practical-clock.low { color: #ff5a6e; }
.dyno-lesson .practical-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.dyno-lesson .practical-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 6px; align-items: start; font-size: 12.5px; line-height: 1.35; }
.dyno-lesson .practical-checks li.ok small { display: none; }
.dyno-lesson .practical-checks li.no { grid-column: 1 / -1; }
.dyno-lesson .practical-checks li i { font-style: normal; font-weight: 900; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.dyno-lesson .practical-checks li.ok i { background: #1f9d55; color: #fff; }
.dyno-lesson .practical-checks li.no i { background: #c62a3f; color: #fff; }
.dyno-lesson .practical-checks li b { display: block; color: #fff; font-size: 12.5px; }
.dyno-lesson .practical-checks li small { display: block; color: var(--bl-muted); font-size: 12px; }
.school-lesson.practical { border-color: rgba(214,30,59,0.55); background: rgba(214,30,59,0.07); }
.school-lesson.practical i { border-color: #ff5a6e; color: #ff5a6e; }
.school-lesson.practical.done i { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.school-lesson.practical.armed { border-color: #ff5a6e; background: rgba(214,30,59,0.16); }
.quiz-head .quiz-clock { margin-left: 8px; font-variant-numeric: tabular-nums; color: #7fdcff; }
.quiz-head .quiz-clock.low { color: #ff5a6e; }
.profile-cert { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 6px; font-size: 13px; color: #ffd35c; }
.profile-cert .cert-mark { width: 20px; height: 20px; max-width: none; max-height: none; margin: 0; }
.quiz-card { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; text-align: left; }
.quiz-head { display: flex; align-items: center; gap: 10px; }
.quiz-head span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #ffb84d; font-weight: 800; }
.quiz-head b { margin-left: auto; font-size: 13px; color: var(--bl-muted); font-weight: 700; }
.quiz-head .btn { margin-left: 8px; }
.quiz-head span + .btn { margin-left: auto; }
.quiz-dots { display: flex; gap: 5px; margin: 12px 0 4px; }
.quiz-dots i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.12); }
.quiz-dots i.now { background: #ffb84d; }
.quiz-dots i.right { background: #1f9d55; }
.quiz-dots i.wrong { background: var(--bl-red); }
.quiz-q { margin: 12px 0; font-size: 19px; line-height: 1.35; color: #fff; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--bl-line); color: var(--bl-text); font: inherit; font-size: 15px; line-height: 1.35; cursor: pointer; }
.quiz-option:hover:not(:disabled) { border-color: rgba(255,255,255,0.4); }
.quiz-option i { font-style: normal; font-weight: 900; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; border: 1px solid rgba(255,255,255,0.3); }
.quiz-option:disabled { cursor: default; }
.quiz-option.picked { border-color: #ffb84d; }
.quiz-option.right { border-color: #1f9d55; background: rgba(31,157,85,0.16); }
.quiz-option.right i { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.quiz-option.wrong { border-color: var(--bl-red); background: rgba(214,30,59,0.14); }
.quiz-option.wrong i { background: var(--bl-red); border-color: var(--bl-red); color: #fff; }
.quiz-after { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--bl-line); }
.quiz-verdict { margin: 0 0 4px; font-weight: 900; font-size: 16px; }
.quiz-verdict.right { color: #34c759; }
.quiz-verdict.wrong { color: #ff5a6e; }
.quiz-why { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--bl-text); }
.quiz-wait, .quiz-error { margin: 18px 0; font-size: 15px; color: var(--bl-muted); }
.quiz-error { color: #ff8a98; }
.quiz-score { display: flex; flex-direction: column; gap: 4px; margin: 16px 0; padding: 16px; border-radius: 12px; text-align: center; }
.quiz-score b { font-size: 40px; line-height: 1; font-family: var(--gnum); font-weight: 600; }
.quiz-score span { font-size: 14px; line-height: 1.45; color: var(--bl-text); }
.quiz-score.pass { background: rgba(31,157,85,0.14); border: 1px solid rgba(31,157,85,0.6); }
.quiz-score.pass b { color: #34c759; }
.quiz-score.miss { background: rgba(255,184,77,0.08); border: 1px solid rgba(255,184,77,0.4); }
.quiz-score.miss b { color: #ffb84d; }
.quiz-cert { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,194,26,0.08); border: 1px solid rgba(255,194,26,0.55); }
.quiz-cert .cert-mark { width: 44px; height: 44px; max-width: none; max-height: none; margin: 0; }
.quiz-cert small { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #ffd35c; }
.quiz-cert b { display: block; font-size: 17px; color: #fff; }
.quiz-cert span { display: block; font-size: 12px; color: var(--bl-muted); }
@media (max-width: 520px) { .quiz-cert { grid-template-columns: 44px 1fr; } .quiz-cert .btn { grid-column: 1 / -1; } }

/* Pulls to compare: each row with its Compare switch, and the compared pulls' readings under the scrub. */
.dyno-pull-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; }
.dyno-vs { min-width: 92px; font-size: 12px; }
.dyno-vs.on { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); color: #fff; }
.dyno-vs.shown { display: flex; align-items: center; justify-content: center; color: var(--bl-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.dyno-read-vs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--bl-text); margin-top: 6px; }
.dyno-read-vs .swatch { width: 10px; height: 10px; border-radius: 2px; }
.dyno-read-vs em { font-style: normal; font-weight: 700; }
.dyno-read-vs em.up { color: #7cf29a; }
.dyno-read-vs em.down { color: #ff7a7a; }

/* Help: the ? in the cell's header, and the cell while it is on. */
.dyno-help-btn { font-weight: 900; font-size: 18px; margin-left: 8px; }
.dyno-help-btn.on { background: #3fd2ff; border-color: #3fd2ff; color: #06202a; }
#screen-dyno.help-on .dyno-panel { box-shadow: inset 0 0 0 2px rgba(63,210,255,0.55); }
#screen-dyno.help-on button, #screen-dyno.help-on [data-explain], #screen-dyno.help-on .map-table { cursor: help; }

/* Change setup: the car's name with the button by it, and the motors and units as chips. */
.dyno-carline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dyno-carline h3 { margin: 0; }
.setup-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.setup-chip.on { background: var(--bl-orange, #d61e3b); border-color: transparent; color: #fff; opacity: 1; }

/* The shop's Find a tune card. */
.ecu-card.shop-find { border-color: rgba(255,184,77,0.5); background: rgba(255,184,77,0.06); }
.ecu-card.shop-find h4 small { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #ffb84d; margin-left: 6px; }

/* The home screen's Dyno: the cars in the garage the dyno takes, in a row to swipe. */
.menu-dyno { display: flex; flex-direction: column; gap: 10px; }
.dyno-car-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.dyno-car-tile { scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px 10px; text-align: left; min-height: 0; }
.dyno-car-tile .dyno-car-art { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
/* Every car goes on the dyno: the one you are in, and the way to the others. */
.dyno-one { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; margin-bottom: 10px; }
.dyno-one .dyno-car-tile { grid-row: span 2; }
.dyno-one .fine { margin: 0; align-self: end; text-align: left; }
.dyno-one [data-nav-garage] { justify-self: start; align-self: start; }
.dyno-car-name { font-weight: 800; font-size: 14px; line-height: 1.2; }
.dyno-car-sub { font-size: 11px; color: var(--bl-muted); }
.dyno-car-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--bl-muted); }
.dyno-car-arrows { display: flex; gap: 6px; }
.dyno-car-arrows.none { visibility: hidden; }
@media (hover: none) and (pointer: coarse) { .dyno-car-arrows { display: none; } }
.dyno-car-row { scrollbar-width: thin; --fade: 28px; }
.dyno-car-row.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent); }
.dyno-car-row.more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade)); mask-image: linear-gradient(to right, transparent, #000 var(--fade)); }
.dyno-car-row.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }

/* The lesson on the stage, under the live chips: in sight all the time. */
.dyno-stage .dyno-lesson { margin: 6px 0 auto; align-self: flex-start; width: min(100%, 520px); max-height: 46%; overflow-y: auto; background: rgba(8,14,20,0.86); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 8px 10px; gap: 6px; cursor: default; touch-action: pan-y; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.dyno-stage .dyno-lesson.tall { max-height: 74%; }
.dyno-stage .dyno-lesson .lesson-head b { font-size: 14px; }
.dyno-stage .dyno-lesson .lesson-intro, .dyno-stage .dyno-lesson .lesson-steps li { font-size: 12.5px; }
.dyno-stage .dyno-lesson .lesson-steps li.now { font-size: 13.5px; }
@media (orientation: landscape) and (min-width: 1000px) {
  .dyno-stage .dyno-lesson .lesson-steps li, .dyno-stage .dyno-lesson .lesson-intro { font-size: 14px; }
  .dyno-stage .dyno-lesson .lesson-steps li.now { font-size: 15px; }
}

/* The control a lesson's step is done with, lit and pulsing, and what ticks the step. */
@keyframes lessonPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(63,210,255,0.95), 0 0 0 6px rgba(63,210,255,0.0); } 50% { box-shadow: 0 0 0 2px rgba(63,210,255,0.95), 0 0 14px 6px rgba(63,210,255,0.45); } }
#screen-dyno .lesson-target { animation: lessonPulse 1.3s ease-in-out infinite; position: relative; z-index: 2; border-radius: 8px; }
#screen-dyno canvas.lesson-target { border-radius: 10px; }
.dyno-lesson .lesson-tick { display: block; margin-top: 3px; font-size: 11.5px; color: #7fdcff; font-style: italic; }
@media (prefers-reduced-motion: reduce) { #screen-dyno .lesson-target { animation: none; box-shadow: 0 0 0 2px rgba(63,210,255,0.95); } }

/* The cell's setup cards: a card's switch on its title's line, and a
   label, its slider and its value on one line, so a phone is not scrolling
   past a row for every word. */
.ecu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.ecu-head h4 { flex: 1; min-width: 0; }
.ecu-head .seg .btn { min-height: 28px; padding: 2px 12px; }
.ecu-tag { font-size: 11px; color: var(--bl-muted); white-space: nowrap; }
.ecu-row { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 8px; }
.ecu-row .ecu-slider b { min-width: 70px; font-size: 13px; }
.ecu-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ecu-pair .btn { min-height: 36px; padding: 4px 8px; font-size: 13px; }

/* On a phone the panel has half the screen, and the header, the tabs and the
   dock were taking most of it before any table or card showed. Kirk: some
   buttons are taking up a lot of vertical space. Smaller rows throughout,
   the spec on one line, the tabs held at the top while the page scrolls
   under them, and the car's half of the screen a little shorter. */
@media (max-width: 700px) {
  #screen-dyno { --dyno-top: calc(var(--safe-top) + 52px + 42vh); }
  .dyno-scroll { padding-top: 8px; gap: 8px; }
  .dyno-carline h3 { font-size: 16px; }
  .dyno-carline .btn { min-height: 28px; padding: 2px 10px; font-size: 12px; }
  .dyno-head .sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dyno-head .sub.open { white-space: normal; }
  .dyno-phase { font-size: 11px; margin: -6px 0 0; }
  .dyno-tunebar { padding: 3px 4px 3px 10px; }
  .dyno-tunebar .btn { min-height: 28px; padding: 2px 10px; font-size: 12px; }
  .dyno-tabs { position: sticky; top: -8px; z-index: 5; background: var(--bl-ink); padding: 4px 0; }
  .dyno-tabs .btn { min-height: 30px; padding: 2px 4px; font-size: 12px; white-space: nowrap; }
  .dyno-dock { padding-top: 6px; gap: 5px; padding-bottom: calc(var(--safe-bottom) + 6px); }
  .dock-btn { min-height: 34px; font-size: 20px; }
  .dock-knob { grid-template-columns: 36px 1fr 36px; }
  .dock-val b { font-size: 16px; }
  .dock-main .dyno-go, .dock-holdbtn, .dock-keybtn { min-height: 42px; }
  .dyno-go { font-size: 18px; }
  .dock-cell-read { padding: 2px 8px; }
  .dock-cell-read b { font-size: 16px; }
  .ecu-card { padding: 8px 10px; gap: 6px; }
  .ecu-card h4 { font-size: 13px; }
  .ecu-card > .btn { min-height: 34px; padding: 4px 12px; font-size: 13px; }
  .ecu-card .car-note { font-size: 11px; line-height: 1.35; }
  .ecu-row { grid-template-columns: 92px 1fr; }
  .ecu-row .ecu-label { font-size: 10px; letter-spacing: 0.05em; }
  /* The table's tools: the four that are used on every cell stay a row of
     their own, the rest share one row that slides sideways. */
  .map-sel { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-view .btn { min-height: 28px; }
  .map-main { grid-template-columns: 46px 46px 1fr 1fr; }
  .map-main .map-btn { min-height: 34px; font-size: 13px; }
  .map-more { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .map-more::-webkit-scrollbar { display: none; }
  .map-more .map-btn, .map-extra .btn { min-height: 30px; font-size: 12px; white-space: nowrap; flex: none; }
  .map-more .map-set { flex: none; }
  .dock-cell { grid-template-columns: 1fr 44px 44px; }
  .dock-cell-read span, .dock-cell-read em { font-size: 10px; }
  .dock-cell-read b { font-size: 15px; }
}

/* Chipping in: a quiet strip at the foot of the menu, and its page. */
/* Kirk: the Keep Turbo Run running button is sized wrong for phone and easy
   to miss. It was width 100% with 14px margins on each side, so on a phone it
   ran 28px past the screen and pushed the page sideways; it now lines up with
   the tiles above it. And it was gray on gray at the bottom of the page: it
   carries the shop's red, the menu's own type and a Chip in button now. */
.support-strip { display: flex; align-items: center; gap: 12px; width: calc(100% - 28px - var(--safe-left) - var(--safe-right)); max-width: 720px; margin: 18px auto 6px; padding: 14px 14px 14px 16px; text-align: left; border-radius: 12px; background: linear-gradient(100deg, rgba(214,30,59,0.2) 0%, rgba(214,30,59,0.06) 70%, rgba(214,30,59,0.03) 100%); border: 1px solid rgba(214,30,59,0.5); color: var(--bl-text); letter-spacing: normal; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.support-strip[hidden] { display: none; }
.support-strip svg { width: 28px; height: 28px; flex: none; color: #ff4d67; }
.support-strip span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.support-strip b { font-family: 'Barlow Condensed', system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 19px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; }
.support-strip small { font-size: 12.5px; line-height: 1.3; color: var(--bl-muted); font-weight: 600; }
.support-strip .strip-go { flex: none; font-style: normal; font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 14px; border-radius: 8px; background: var(--bl-red); color: #fff; white-space: nowrap; }
.support-card h2 { margin-bottom: 4px; }
.support-amounts { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 8px; margin-top: 10px; }
.support-amt { min-height: 42px; font-size: 16px; font-weight: 800; }
.support-amt.on { background: var(--bl-orange); border-color: transparent; color: #fff; }
.support-other { display: flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.2); background: rgba(255,255,255,0.6); }
.support-other span { font-weight: 800; }
.support-other input { width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 8px 0; color: inherit; }
.support-pays { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.support-pay { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.support-go { display: flex; align-items: center; gap: 12px; justify-content: flex-start; min-height: 52px; padding: 6px 14px; text-decoration: none; color: #fff; border: 0; }
.support-go svg { width: 24px; height: 24px; flex: none; }
.support-go span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.support-go b { font-size: 16px; }
.support-go small { font-size: 13px; text-transform: none; font-style: normal; font-family: var(--font); letter-spacing: 0; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.support-go.cash { background: #00b843; }
.support-go.venmo { background: #008cff; }
.support-go.paypal { background: #003087; }
.support-copy { min-width: 64px; }
/* Customer jobs: the rank, the tiers, the cards, and the stars. */
#jobs-page { display: flex; flex-direction: column; gap: 12px; padding: 12px calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 90px) calc(var(--safe-left) + 16px); max-width: 980px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.jobs-rank { padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(214,30,59,0.16), rgba(214,30,59,0.04)); border: 1px solid rgba(214,30,59,0.45); display: flex; flex-direction: column; gap: 8px; }
.jobs-rank-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.jobs-rank-badge { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bl-red); color: #fff; font-family: 'Barlow Condensed', var(--font); font-style: italic; font-weight: 800; font-size: 26px; }
.jobs-rank-top small { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-muted); }
.jobs-rank-top b { font-family: 'Barlow Condensed', var(--font); font-style: italic; font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1.05; }
.jobs-rank-pts { text-align: right; }
.jobs-rank .school-progress span { background: var(--bl-red); }
.jobs-rank .fine { margin: 0; }
.jobs-view { align-self: flex-start; }
.jobs-tier { display: flex; flex-direction: column; gap: 6px; }
.jobs-tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.jobs-tier-head .menu-eyebrow { margin: 0; }
.jobs-tier .car-note { margin: 0; }
.jobs-tier.locked .jobs-grid { opacity: 0.45; }
/* One compact row a job on a phone: the car on the left, the job beside it. */
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.job-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-auto-rows: auto; column-gap: 10px; row-gap: 1px; align-items: center; justify-items: start; text-align: left; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--bl-line); color: var(--bl-text); min-height: 0; }
.job-card > :not(.job-art) { grid-column: 2; }
.job-card:disabled { cursor: not-allowed; }
.job-card.done { border-color: rgba(255,208,32,0.5); }
.jobs-today { padding: 10px; border-radius: 14px; border: 1px solid rgba(225,29,72,0.35); background: linear-gradient(180deg, rgba(225,29,72,0.10), rgba(225,29,72,0.02)); }
.job-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #ff7b93; }
.job-card .job-art { grid-column: 1; grid-row: 1 / span 4; width: 96px; height: 56px; object-fit: contain; }
.job-who { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 6px; }
.job-who b { font-size: 15px; }
.job-car { font-size: 13px; font-weight: 700; }
.job-unit, .job-goal { font-size: 12px; color: var(--bl-muted); }
.job-goal em { font-style: normal; color: #fff; font-weight: 700; margin-left: 4px; }
.job-stars { color: #ffd020; letter-spacing: 1px; white-space: nowrap; }
.job-stars i { font-style: normal; color: rgba(255,255,255,0.18); }
.dyno-challenge.job { background: rgba(214,30,59,0.1); border-color: rgba(214,30,59,0.4); color: #ffd6dd; }
.tuner-board .dyno-board-row.top1 .place { color: #ffd020; }
.tuner-board .dyno-board-row.top2 .place { color: #d9d9d9; }
.tuner-board .dyno-board-row.top3 .place { color: #d49a5a; }

/* A Pro member's chip on their profile, in the game's red. */
.sup-chip.pro-chip { background: rgba(214,30,59,0.12); border-color: rgba(214,30,59,0.45); color: #ff5a73; }
.tiers td .sup-mark { width: 16px; height: 16px; max-width: none; max-height: none; margin: 0; vertical-align: middle; }

/* Free, Supporter and Pro side by side on the support page. */
.tiers { width: 100%; border-collapse: separate; border-spacing: 0; margin: 14px 0 4px; font-size: 13px; table-layout: fixed; }
.tiers th, .tiers td { padding: 7px 4px; text-align: center; vertical-align: middle; border-bottom: 1px solid rgba(0,0,0,0.08); }
.tiers thead th { font-family: 'Barlow Condensed', var(--font); font-style: italic; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; padding-bottom: 6px; }
.tiers thead th small { display: block; font-size: 10px; font-weight: 800; color: #1d9bf0; letter-spacing: 0.06em; }
.tiers tbody th { text-align: left; font-weight: 600; width: 38%; line-height: 1.25; }
.tiers th:first-child { width: 38%; }
.tiers .pro { background: rgba(29,155,240,0.07); }
.tiers .mine { box-shadow: inset 2px 0 0 #1d9bf0, inset -2px 0 0 #1d9bf0; }
.tiers thead .mine { box-shadow: inset 2px 0 0 #1d9bf0, inset -2px 0 0 #1d9bf0, inset 0 2px 0 #1d9bf0; border-radius: 8px 8px 0 0; }
.tiers .tier-go .mine { box-shadow: inset 2px 0 0 #1d9bf0, inset -2px 0 0 #1d9bf0, inset 0 -2px 0 #1d9bf0; border-radius: 0 0 8px 8px; }
.tiers .tier-yes { width: 16px; height: 16px; color: #1d9bf0; vertical-align: middle; }
.tiers .tier-no { opacity: 0.35; }
.tiers .tier-price td { font-size: 12px; font-weight: 700; line-height: 1.3; }
.tiers .tier-go td, .tiers .tier-go th { border-bottom: 0; }
.tiers .tier-go .btn { width: 100%; min-height: 34px; padding: 4px 6px; font-size: 12px; }

/* Pro: the same strip in blue where something Pro opens is shut, and its page. */
.pro-strip { border-color: rgba(29,155,240,0.45); background: rgba(29,155,240,0.08); }
.pro-strip svg { color: #4db5ff; }
.menu-dyno .pro-strip { width: 100%; margin: 0; max-width: none; }
/* The dyno for those without Pro: a look inside (ui.proTeaserHtml). A dyno
   sheet, stock against tuned; their own cars that go on; what is in there;
   one way to Pro. Blue like the rest of Pro. */
.dyno-tease { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(29,155,240,0.45); background: linear-gradient(180deg, rgba(29,155,240,0.12), rgba(29,155,240,0.03)); }
.dyno-tease-sheet { position: relative; border-radius: 10px; background: #0b1118; border: 1px solid rgba(255,255,255,0.08); padding: 8px 8px 22px; }
.dyno-tease-sheet svg { display: block; width: 100%; height: 104px; }
.dyno-tease-sheet path { fill: none; vector-effect: non-scaling-stroke; }
.dts-grid path { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.dts-gain { fill: rgba(29,155,240,0.18) !important; stroke: none; }
.dts-stock { stroke: rgba(255,255,255,0.45); stroke-width: 2; }
.dts-tuned { stroke: #4db5ff; stroke-width: 3; }
.dyno-tease-sheet .tq { stroke-dasharray: 5 4; stroke-width: 1.6; }
.dyno-tease-key { position: absolute; left: 12px; bottom: 5px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--bl-muted); }
.dyno-tease-key i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.45); }
.dyno-tease-key i.tuned { background: #4db5ff; margin-left: 6px; }
.dyno-tease-pro { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: #1d9bf0; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.dyno-tease-pro svg { width: 14px; height: 14px; color: #fff; }
.dyno-tease-over { margin: 0; font-size: 13px; color: #4db5ff; font-weight: 700; }
.dyno-tease-cars { display: flex; align-items: center; gap: 4px; min-height: 36px; }
.dyno-tease-cars .dyno-tease-art { width: 72px; height: 36px; object-fit: contain; flex: none; margin-right: -14px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.dyno-tease-cars span { margin-left: 18px; font-size: 13px; font-weight: 700; line-height: 1.25; }
.dyno-tease-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dyno-tease-feats li { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,0.05); }
.dyno-tease-feats b { font-size: 13px; }
.dyno-tease-feats span { font-size: 11px; color: var(--bl-muted); line-height: 1.25; }
.dyno-tease-go { width: 100%; background: #1d9bf0; border-color: #1d9bf0; color: #fff; }
.dyno-tease-price { margin: -4px 0 0; text-align: center; font-size: 12px; color: var(--bl-muted); }
/* The dyno section shut: what a Pro member has, every card in its place,
   dimmed, with a padlock, and each one saying what is behind it. */
.dyno-locked { display: flex; flex-direction: column; gap: 10px; }
.dyno-lock { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(8,10,14,0.82); border: 1px solid rgba(29,155,240,0.7); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.dyno-lock svg, .dyno-lock-head > svg { width: 13px; height: 13px; color: #4db5ff; flex: none; }
.dyno-lock-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-align: left; border: 1px solid rgba(29,155,240,0.55); background: linear-gradient(90deg, rgba(29,155,240,0.16), rgba(29,155,240,0.04)); color: var(--bl-text); }
.dyno-lock-head > svg { width: 26px; height: 26px; }
.dyno-lock-head b { display: block; font-size: 15px; color: #fff; }
.dyno-lock-head small { display: block; font-size: 13px; line-height: 1.4; color: var(--bl-muted); margin-top: 2px; }
.dyno-locked .locked { position: relative; }
.dyno-locked .locked .car-art, .dyno-locked .locked .school-feature-art, .dyno-locked .locked .dyno-tease-sheet svg { filter: grayscale(0.55) brightness(0.62); }
.dyno-locked .dyno-car-tile .dyno-lock { top: 6px; right: 6px; padding: 2px 5px; font-size: 0; gap: 0; }
.dyno-locked .dyno-car-tile .dyno-lock svg { width: 12px; height: 12px; }
.dyno-cell-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; text-align: left; border-radius: 14px; border: 1px solid var(--bl-line); background: rgba(255,255,255,0.03); color: var(--bl-text); }
.dyno-cell-card .dyno-tease-sheet { border: 0; border-radius: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.dyno-cell-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.dyno-cell-title { font-family: var(--game); font-weight: 900; font-style: italic; font-size: 22px; text-transform: uppercase; color: #fff; line-height: 1; }
.dyno-cell-sub { font-size: 13.5px; line-height: 1.45; color: var(--bl-text); }
.dyno-cell-list { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.dyno-cell-list span { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 1.4; color: var(--bl-muted); }
.dyno-cell-list span::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #4db5ff; }
.dyno-locked .school-feature.locked .school-feature-sub { -webkit-line-clamp: unset; display: block; }
.dyno-lock-go { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
#screen-menu .dyno-locked.compact .menu-tiles.cards .btn.tile.wide { min-height: 0; }
#screen-menu .dyno-locked.compact .menu-tiles.cards .btn.tile.wide .tile-sub { font-size: 12px; line-height: 1.35; }
.dyno-lock-go .dyno-tease-price { margin: 0; }
/* The locked cards say all of what is behind them, not one clipped line. */
#screen-menu .dyno-locked .menu-tiles.cards .btn.tile.wide .tile-sub { white-space: normal; overflow: visible; text-overflow: clip; font-family: inherit; font-weight: 500; font-size: 13px; line-height: 1.4; }
#screen-menu .dyno-locked .menu-tiles.cards .btn.tile.wide { justify-content: flex-start; }
.dyno-locked .btn .dyno-lock { border-color: rgba(29,155,240,0.7); background: rgba(8,10,14,0.82); color: #fff; }
.dyno-locked .btn .dyno-lock svg { color: #4db5ff; }
.dyno-lock-head span, .dyno-cell-sub, .dyno-cell-list span { letter-spacing: normal; text-transform: none; }
.dyno-lock-head small, .dyno-cell-sub, .dyno-cell-list span { font-weight: 500; }
@media (max-width: 560px) {
  .dyno-cell-card { grid-template-columns: 1fr; }
  #screen-menu .dyno-locked .menu-tiles.cards.three { grid-template-columns: 1fr; }
  .dyno-locked.compact .dyno-cell-card { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .dyno-locked.compact .dyno-cell-card .dyno-tease-sheet { min-height: 0; }
  #screen-menu .dyno-locked.compact .menu-tiles.cards .btn.tile.wide .tile-art { height: 64px; margin-top: 26px; }
  #screen-menu .dyno-locked .menu-tiles.cards .btn.tile.wide .tile-art { height: 72px; margin-top: 30px; }
  .dyno-cell-card .dyno-tease-sheet { min-height: 120px; }
}
.menu-dyno .pro-strip.slim { margin-top: 10px; padding: 10px 12px; gap: 10px; }
.pro-strip.slim svg { width: 22px; height: 22px; }
.pro-strip.slim b { font-size: 16px; }
.pro-strip.slim small { font-size: 12px; }
.support-card .pro-strip { width: 100%; margin: 0 0 14px; max-width: none; }
.pro-status { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bl-line); }
.pro-status.on { border-color: rgba(29,155,240,0.5); background: rgba(29,155,240,0.08); }
.pro-status .sup-mark { width: 22px; height: 22px; max-width: none; max-height: none; margin: 0; flex: none; }
.pro-status span { display: flex; flex-direction: column; gap: 2px; }
.pro-status small { color: var(--bl-muted); font-size: 13px; }
.pro-perks { margin: 12px 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.pro-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pro-plans.three { grid-template-columns: repeat(3, 1fr); }
.pro-plan { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 8px; position: relative; }
.pro-plan b { font-size: 20px; }
.pro-plan span { font-size: 12px; text-transform: none; letter-spacing: 0; }
.pro-plan em { font-style: normal; font-size: 11px; font-weight: 800; color: #1d9bf0; }
/* The plan picked, in the game's red so it cannot be missed; the other one
   steps back. Kirk: highlight it in red, it is barely noticeable. */
.pro-plan { opacity: 0.7; }
.pro-plan.on { opacity: 1; background: var(--bl-red); border-color: var(--bl-red); color: #fff; box-shadow: 0 0 0 3px rgba(214,30,59,0.35); }
.pro-plan.on em { color: #fff; }
.pro-paypal { margin: 12px 0 4px; min-height: 50px; max-width: 480px; }
@media (max-width: 480px) {
  .support-amounts { grid-template-columns: repeat(4, 1fr); }
  .support-other { grid-column: 1 / -1; }
}

/* The supporter badge: a small blue check by the name, wherever it is, the
   way a verified account is marked. */
.sup-mark { display: inline-block; width: 1em; height: 1em; min-width: 12px; min-height: 12px; max-width: 16px; max-height: 16px; margin-left: 4px; vertical-align: -0.12em; flex: none; }
.sup-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(29,155,240,0.14); color: #4db5ff; border-color: rgba(29,155,240,0.45); font-weight: 700; }
.sup-chip .sup-mark { margin-left: 0; }

/* The dyno preview's cards (ui.showDynoTrial): its start, big and plain about
   the clock; its end, with the three ways to keep it. Blue like the rest of Pro. */
.trial-card { border-top: 4px solid #1d9bf0; }
.trial-card .gift-from { color: #4db5ff; }
.trial-card #trial-body p { margin: 10px 0 0; font-size: 14px; line-height: 1.45; text-align: left; }
.trial-card .trial-clock { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 12px 0 14px !important; padding: 12px; border-radius: 12px; background: rgba(29,155,240,0.12); border: 1px solid rgba(29,155,240,0.45); text-align: center !important; }
.trial-card .trial-clock b { font-family: 'Barlow Condensed', system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 40px; line-height: 1; text-transform: uppercase; color: #fff; }
.trial-card .trial-clock span { font-size: 13px; font-weight: 700; color: #4db5ff; }
.trial-card li::before { background: #1d9bf0; }
.trial-card .pro-plan { opacity: 1; }
.trial-card .pro-plans { margin-top: 12px; }
.trial-card .trial-more { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.05); }
.trial-card .trial-more b { color: #4db5ff; }
.trial-card .btn-row { margin-top: 14px; }
.trial-strip b { color: #fff; }
.menu-dyno .pro-strip.slim.trial-strip { margin: 0 0 10px; }

/* The Dyno tab on the leaderboard: its three boards, the top three's places
   in gold, silver and bronze like the tuner board, and the way onto it. */
.lb-dyno-seg { display: flex; gap: 6px; margin: 0 0 10px; }
#lb-dyno .lb-pane-sub { margin: 0 0 10px; }
#lb-dyno .dyno-board-row .name { cursor: pointer; }
#lb-dyno .dyno-board-row.top1 .place { color: #ffd020; }
#lb-dyno .dyno-board-row.top2 .place { color: #d9d9d9; }
#lb-dyno .dyno-board-row.top3 .place { color: #d49a5a; }
#lb-dyno .lb-dyno-go { display: flex; gap: 8px; margin-top: 12px; }
/* The dyno section's way to its boards, at the end of its heading. */
#screen-menu .menu-eyebrow .eyebrow-link { margin-left: auto; font-family: var(--font); font-style: normal; font-size: 12px; letter-spacing: 0.04em; min-height: 30px; padding: 4px 12px; }
/* Seven tabs on the leaderboard now (Classes, 3.67.268): on a phone they
   wrap into two even rows rather than the last ones sitting off the edge
   where nobody sees them. */
@media (max-width: 520px) {
  #screen-leaderboard #lb-tabs { gap: 4px; flex-wrap: wrap; overflow: visible; }
  #screen-leaderboard #lb-tabs .tab { flex: 1 1 22%; padding: 0 7px; font-size: 13.5px; letter-spacing: 0.01em; }
}
/* The shop's DEV tag: wider than the round checks, gold. */
.sup-mark.dev-mark { width: 1.9em; max-width: 30px; min-width: 22px; }
.sup-chip.dev-chip { background: rgba(255,194,26,0.12); border-color: rgba(255,194,26,0.5); color: #ffd35c; }
/* Four boards with longer names: two rows of two on a phone, in order. */
@media (max-width: 520px) {
  .lb-dyno-seg { display: grid; grid-template-columns: 1fr 1fr; }
  .lb-dyno-seg .btn { justify-content: center; text-align: center; }
}
/* The dyno streak on the daily's tile and on its boards. */
.tile-streak { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #ffb066; text-transform: none; letter-spacing: 0; font-style: normal; }
.tile-streak.cold { color: var(--bl-muted); }
.tile-streak .flame, .streak-chip .flame { width: 15px; height: 15px; flex: none; }
.tile-streak b { color: #fff; }
.streak-chip { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 11px; font-weight: 800; color: #ffb066; vertical-align: middle; }

/* The support page. Kirk: the donation page on mobile is super stretched
   out, make it attractive. Dark like the rest of the game rather than the
   paper card, a short hero, three tier cards instead of a table, and the
   chip in section tight enough to see whole on a phone. Scoped to the page,
   since the Pro page shares the card classes. */
#support-card { background: linear-gradient(180deg, #1c1f25 0%, #14161a 100%); color: var(--bl-text); border: 1px solid var(--bl-line); padding: 0; overflow: hidden; }
#support-card p { color: var(--bl-muted); }
#support-card .btn { margin-top: 0; }
#support-card .sup-hero { padding: 18px 16px 14px; background: radial-gradient(120% 100% at 0% 0%, rgba(214, 30, 59, 0.32) 0%, rgba(214, 30, 59, 0) 62%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
#support-card .sup-heart { width: 26px; height: 26px; color: var(--bl-orange); display: block; margin-bottom: 6px; }
#support-card .sup-hero h2 { color: #fff; font-size: clamp(24px, 7vw, 32px); margin: 0; }
#support-card .sup-hero p { margin-top: 8px; font-size: 14px; line-height: 1.45; color: #c9cfd6; }
#support-card .sup-hero .sup-never { font-size: 12.5px; color: var(--bl-muted); margin-top: 6px; }
#support-card .tier-cards { display: grid; gap: 8px; padding: 14px 12px 0; }
#support-card .tier-card { position: relative; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 12px; padding: 10px 12px 12px; }
#support-card .tier-card.pro { border-color: rgba(214, 30, 59, 0.65); background: linear-gradient(160deg, rgba(214, 30, 59, 0.16), rgba(214, 30, 59, 0.02) 70%), var(--bl-panel); }
#support-card .tier-card.mine { box-shadow: 0 0 0 2px #1d9bf0; }
#support-card .tier-top { display: flex; align-items: center; gap: 8px; }
#support-card .tier-top h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--game); font-weight: 900; font-style: italic; font-size: 19px; text-transform: uppercase; color: #fff; }
#support-card .tier-top h4 .sup-mark { width: 17px; height: 17px; max-width: none; max-height: none; margin: 0; order: 2; }
#support-card .tier-you { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: #1d9bf0; padding: 2px 7px; border-radius: 999px; }
#support-card .tier-cost { margin: 3px 0 0; font-size: 13px; color: var(--bl-muted); }
#support-card .tier-cost b { color: #fff; font-family: var(--nums); font-variant-numeric: tabular-nums; }
#support-card .tier-cost i { font-style: normal; opacity: 0.7; padding: 0 1px; }
#support-card .tier-card ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
#support-card .tier-card li { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.35; color: #dfe3e8; }
#support-card .tier-card li::before { display: none; }
#support-card .tier-yes { width: 15px; height: 15px; flex: none; margin-top: 1px; color: #1d9bf0; }
#support-card .tier-card.pro .tier-yes { color: var(--bl-orange); }
#support-card .tier-card .btn { width: 100%; margin-top: 10px; min-height: 40px; }
#support-card .tier-card.supporter .btn { background: linear-gradient(180deg, #2ba6f5 0%, #1580c9 100%); border-color: transparent; color: #fff; }
#support-card .tier-card.free ul { margin-top: 6px; }
#support-card .sup-give { padding: 4px 12px 2px; }
#screen-support #support-card .sup-give h3.about-h { color: #fff; margin: 14px 0 8px; }
#support-card .support-amounts { margin-top: 0; }
#support-card .support-amt { min-height: 44px; }
#support-card .support-other { border-color: var(--bl-line); background: rgba(255, 255, 255, 0.05); color: var(--bl-text); min-height: 44px; }
#support-card .support-other input { color: var(--bl-text); }
#support-card .support-pays { gap: 8px; margin-top: 10px; }
#support-card .support-pay { grid-template-columns: 1fr 50px; }
#support-card .support-go { min-height: 50px; border-radius: 10px; }
#support-card .support-copy { width: 50px; min-width: 0; padding: 0; display: grid; place-items: center; }
#support-card .support-copy svg { width: 20px; height: 20px; }
#support-card .sup-picked { margin: 8px 0 0; font-size: 12.5px; }
#support-card .sup-name { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; background: rgba(29, 155, 240, 0.1); border: 1px solid rgba(29, 155, 240, 0.35); color: #cfe8fb; font-size: 13px; line-height: 1.35; }
#support-card .sup-name b { color: #fff; }
#support-card .sup-name .sup-mark { width: 18px; height: 18px; max-width: none; max-height: none; margin: 0; }
#support-card .sup-fine { margin: 12px 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 10px; }
#support-card .sup-fine summary { cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-muted); }
#support-card .sup-fine ul { margin: 8px 0 0; padding-left: 18px; }
#support-card .sup-fine li { font-size: 12.5px; line-height: 1.45; color: var(--bl-muted); margin: 3px 0; }
@media (min-width: 760px) {
  #support-card .tier-cards { grid-template-columns: 0.8fr 1fr 1.25fr; align-items: stretch; }
  #support-card .tier-card { display: flex; flex-direction: column; }
  #support-card .tier-card .btn { margin-top: auto; }
  #support-card .tier-card ul { margin-bottom: 10px; }
  #support-card .sup-hero, #support-card .sup-give { padding-left: 18px; padding-right: 18px; }
  #support-card .tier-cards { padding-left: 18px; padding-right: 18px; }
  #support-card .sup-fine { margin-left: 18px; margin-right: 18px; }
  #support-card .support-pays { display: grid; grid-template-columns: repeat(3, 1fr); }
}
/* The fuel mode bar over the fuel tables: speed density, Alpha-N or blend. */
.fuel-mode { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.fuel-mode[hidden] { display: none; }
.fuel-mode-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fuel-mode-label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bl-muted); }
.fuel-mode-seg .btn { padding: 6px 12px; min-height: 0; font-size: 13px; }
.fuel-blend { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bl-muted); }
.fuel-blend b { color: var(--bl-text); min-width: 72px; text-align: center; }
.fuel-blend .btn { padding: 4px 10px; min-height: 0; }
.fuel-mode-note { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--bl-muted); }

/* Tuning School's big card on the home screen: its own picture, the title
   over its fade, how far along, and the way in. On a phone the picture is on
   top and the words under it; wide, the words sit over the picture's dark side. */
#screen-menu .btn.school-feature { position: relative; display: flex; flex-direction: column; width: 100%; margin: 0 0 8px; padding: 0; overflow: hidden; text-align: left; border: 1px solid rgba(227,38,63,0.45); border-radius: 0; clip-path: var(--cut); background: linear-gradient(180deg, #121318, #0d0e12); box-shadow: 0 10px 30px rgba(227,38,63,0.18); }
#screen-menu .school-feature-art { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 55% 45%; transition: transform 0.4s ease; }
#screen-menu .btn.school-feature::before { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 2 / 1; z-index: 1; pointer-events: none; background: linear-gradient(0deg, #121318 0%, rgba(18,19,24,0.55) 22%, rgba(18,19,24,0) 48%); }
#screen-menu .school-feature-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 7px; padding: 0 14px 13px; margin-top: -44px; }
#screen-menu .school-feature-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-family: var(--gnum); font-weight: 500; font-size: 15px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px 1px; color: #fff; background: var(--bl-orange); transform: skewX(-12deg); }
#screen-menu .school-feature-tag .cert-mark { width: 15px; height: 15px; transform: skewX(12deg); }
#screen-menu .school-feature-title { font-family: var(--game); font-weight: 900; font-style: italic; font-size: 34px; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.7); }
#screen-menu .school-feature-sub { font-family: var(--game); font-weight: 600; font-size: 14.5px; line-height: 1.25; color: #c9ced6; }
#screen-menu .school-feature-sub:empty { display: none; }
#screen-menu .school-feature-bar { display: block; height: 5px; margin-top: 2px; background: rgba(255,255,255,0.12); transform: skewX(-12deg); }
#screen-menu .school-feature-bar > span { display: block; height: 100%; min-width: 3px; background: linear-gradient(90deg, #e3263f, #ff5a6e); box-shadow: 0 0 8px rgba(227,38,63,0.7); }
#screen-menu .school-feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--game); font-weight: 600; font-size: 13.5px; color: var(--gmute); }
#screen-menu .school-feature-foot b { font-weight: 800; font-style: italic; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; padding: 4px 12px 3px; background: rgba(227,38,63,0.92); transform: skewX(-12deg); white-space: nowrap; }
#screen-menu .school-feature-foot b::after { content: " \203A"; }
#screen-menu .btn.school-feature:hover .school-feature-art, #screen-menu .btn.school-feature:focus-visible .school-feature-art { transform: scale(1.03); }
@media (max-width: 380px) {
  #screen-menu .school-feature-body { padding: 0 11px 11px; }
  #screen-menu .school-feature-title { font-size: 30px; }
  #screen-menu .school-feature-sub { font-size: 13.5px; }
}
@media (min-width: 720px) {
  #screen-menu .btn.school-feature { display: block; min-height: 300px; background: radial-gradient(60% 90% at 20% 100%, rgba(227,38,63,0.16), rgba(227,38,63,0) 70%), #0d0e12; }
  #screen-menu .school-feature-art { position: absolute; top: 0; bottom: 0; right: 0; left: auto; width: min(66%, 1000px); height: 100%; aspect-ratio: auto; object-position: 50% 55%; }
  #screen-menu .btn.school-feature::before { inset: 0; aspect-ratio: auto; background: linear-gradient(90deg, #0d0e12 0%, #0d0e12 max(34%, calc(100% - 1000px)), rgba(13,14,18,0.55) calc(max(34%, calc(100% - 1000px)) + 120px), rgba(13,14,18,0) calc(max(34%, calc(100% - 1000px)) + 260px)); }
  #screen-menu .school-feature-body { margin: 0; min-height: 300px; justify-content: flex-end; max-width: max(40%, 420px); padding: 22px 24px 20px; }
  #screen-menu .school-feature-title { font-size: 46px; }
  #screen-menu .school-feature-sub { font-size: 15.5px; }
}

/* The tuner's handbook and the reading lessons: a page, its diagram and its controls. */
.book-card { width: min(720px, calc(100vw - 24px)); }
.book-lead { margin: 10px 0 12px; font-size: 14px; line-height: 1.5; color: var(--bl-muted); }
.book-list { display: flex; flex-direction: column; gap: 8px; }
.book-title { margin: 14px 0 8px; font-family: var(--game); font-weight: 900; font-style: italic; font-size: 24px; line-height: 1.05; text-transform: uppercase; color: #fff; }
.book-p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--bl-text); }
.book-fig { margin: 8px 0 6px; padding: 10px 10px 8px; background: #0e1014; border: 1px solid var(--bl-line); border-radius: 10px; }
.book-canvas { display: block; width: 100%; height: 190px; }
.book-read { margin: 8px 2px 6px; min-height: 2.6em; font-size: 13.5px; line-height: 1.45; color: #ffd27a; }
.book-controls { display: flex; flex-direction: column; gap: 6px; }
.book-slider { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr) 4ch; align-items: center; gap: 10px; font-size: 13px; color: var(--bl-muted); }
.book-slider input[type="range"] { width: 100%; min-width: 0; margin: 0; accent-color: var(--bl-orange); touch-action: pan-y; }
.book-slider b { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.book-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.book-seg .btn.on { background: var(--bl-orange); border-color: transparent; color: #fff; }
.read-ask { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bl-line); }
.book-q { margin: 0 0 10px; font-size: 16px; font-weight: 800; line-height: 1.4; color: #fff; }
.read-next { margin-top: 14px; justify-content: flex-end; }
@media (min-width: 720px) { .book-canvas { height: 230px; } }
/* The 3D plug on a lit bench gray, so a sooted or oil black one still reads,
   and tall enough to turn with a finger. */
.book-fig.fig-plug .book-canvas { height: 250px; border-radius: 8px; background: radial-gradient(ellipse at 50% 40%, #6a707a 0%, #474c55 55%, #2f333a 100%); cursor: grab; }
.book-fig.fig-plug .book-canvas:active { cursor: grabbing; }
@media (min-width: 720px) { .book-fig.fig-plug .book-canvas { height: 300px; } }
.school-list.book-rows .school-lesson i { color: #7fdcff; border-color: rgba(127,220,255,0.45); }
.review-tag { margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ff8a98; }
div.quiz-option { cursor: default; }

/* Lessons in the cell: the handbook link, the fuel system and corrections cards. */
.dyno-lesson .lesson-book { margin: 6px 0 0; display: inline-flex; min-height: 28px; font-size: 12px; }
#shop-work .btn.did { border-color: rgba(52,199,89,0.55); }
#fuel-sys .seg .btn { min-height: 28px; padding: 2px 10px; }
.warm-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 6px 0 2px; }
.warm-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--bl-line); }
.warm-cell small { font-size: 11px; color: var(--bl-muted); }
.warm-cell b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.warm-cell em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--bl-muted); font-variant-numeric: tabular-nums; }
.warm-cell em.ok { color: #34c759; }
.warm-cell em.off { color: #ff8a98; }

/* The racer's profile: a header, one row of things to do, and three views
   (Overview, Times, Garage) instead of every car named in one paragraph. */
.profile-actions[hidden] { display: none; }
.profile-send [data-send-open] { display: none; }
.profile-pane { display: flex; flex-direction: column; gap: 10px; }
.profile-pane[hidden] { display: none; }
.profile-top { display: flex; flex-direction: column; gap: 10px; }
.profile-top:empty { display: none; }
.profile-top h4, .profile-cars h4 { margin: 2px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bl-muted); display: flex; justify-content: space-between; gap: 8px; }
.profile-cars h4 span { text-transform: none; letter-spacing: 0; font-weight: 600; color: #3fd2ff; }
.pf-most { display: grid; grid-template-columns: minmax(0, 46%) 1fr; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid var(--bl-line); }
.pf-most .pf-most-art { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.pf-most i { display: block; font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bl-muted); }
.pf-most b { display: block; font-size: 16px; color: #fff; line-height: 1.2; margin: 2px 0; }
.pf-most small { font-size: 12.5px; color: var(--bl-muted); }
.pf-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-times div { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); min-width: 0; }
.pf-times span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-times b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 18px; color: #fff; }
.pf-times b small { font-size: 11px; color: var(--bl-muted); }
.pf-times em { font-style: normal; font-size: 11.5px; color: var(--bl-muted); }
.pf-cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-cars[hidden] { display: none; }
.pf-car { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px 8px; border-radius: 10px; border: 1px solid var(--bl-line); background: rgba(255,255,255,0.03); color: var(--bl-text); font: inherit; text-align: left; min-width: 0; }
.pf-car.callable { cursor: pointer; }
.pf-car.callable:hover { border-color: rgba(63,210,255,0.6); }
.pf-car:disabled { opacity: 1; cursor: default; }
.pf-car .pf-car-art { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.pf-car b { font-size: 12px; line-height: 1.25; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-car small { font-size: 10.5px; color: var(--bl-muted); line-height: 1.25; }
.pf-more { align-self: center; margin-top: 2px; }
.pf-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 420px) {
  .pf-cars { grid-template-columns: 1fr 1fr; }
  .pf-times div { padding: 8px; }
  .pf-times b { font-size: 16px; }
}

/* The Room's FAQ bar for new racers, one slim line under the header. */
.chat-faq { display: flex; align-items: stretch; margin: 0 0 8px; border: 1px solid rgba(63,210,255,0.45); border-radius: 10px; background: rgba(63,210,255,0.08); overflow: hidden; }
.chat-faq[hidden] { display: none; }
.chat-faq-go { flex: 1; min-width: 0; padding: 8px 12px; border: 0; background: none; color: rgba(255,255,255,0.86); font: inherit; font-size: 13px; line-height: 1.3; text-align: left; cursor: pointer; }
.chat-faq-go b { color: #3fd2ff; }
.chat-faq-go i { font-style: normal; color: #3fd2ff; margin-left: 2px; }
.chat-faq-x { flex: none; width: 38px; border: 0; border-left: 1px solid rgba(255,255,255,0.08); background: none; color: var(--bl-muted); font-size: 18px; cursor: pointer; }

/* The Lanes, made over. Kirk: a lot of vertical space used on the top, maybe a
   menu button to consolidate; the list needs to look cleaner and more
   professional. One bar (search and a menu button), one quiet line under it,
   and flat rows divided by a hairline rather than a stack of boxed cards. The
   sheet-wide racing face (cut corners, italic selects) is held off here: this
   is a roster, read a line at a time. */
#screen-players.screen.sheet .lanes-bar { display: flex; gap: 8px; align-items: center; padding: 8px 0 6px; }
#screen-players.screen.sheet .lanes-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--bl-line); background: #11141a; color: var(--bl-muted); clip-path: none; }
#screen-players.screen.sheet .lanes-search:focus-within { border-color: rgba(214,30,59,0.7); color: var(--bl-text); }
#screen-players.screen.sheet .lanes-search svg { width: 18px; height: 18px; flex: none; }
#screen-players.screen.sheet .lanes-search input#lane-search { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--bl-text); font: inherit; font-size: 15px; outline: none; clip-path: none; border-radius: 0; }
#screen-players.screen.sheet .lanes-menu-btn { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--bl-line); background: #11141a; color: var(--bl-muted); cursor: pointer; padding: 0; clip-path: none; }
#screen-players.screen.sheet .lanes-menu-btn svg { width: 20px; height: 20px; }
#screen-players.screen.sheet .lanes-menu-btn.on { color: #fff; border-color: rgba(214,30,59,0.7); background: rgba(214,30,59,0.16); }
#screen-players.screen.sheet .lanes-menu[hidden] { display: none; }
#screen-players.screen.sheet .lanes-menu { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--bl-line); background: #0f1217; }
#screen-players.screen.sheet .lanes-menu > * { margin: 0; }
#screen-players.screen.sheet .lanes-menu .lane-note summary { padding: 4px 2px; }
#screen-players.screen.sheet .lanes-sub { display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; min-height: 30px; }
#screen-players.screen.sheet .lanes-sub .lane-count { flex: 1; min-width: 0; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-players.screen.sheet .lanes-sub .lane-live { flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 0; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--bl-line); background: transparent; color: var(--bl-text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; clip-path: none; }
#screen-players.screen.sheet .lanes-sub .lane-live.on { background: rgba(61, 220, 132, 0.14); border-color: rgba(61, 220, 132, 0.5); color: #8ff0b8; }
#screen-players.screen.sheet .lanes-sub .lane-live i { width: 7px; height: 7px; }
#screen-players.screen.sheet .lanes-sort { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 10px; border-radius: 999px; border: 1px solid var(--bl-line); color: var(--bl-muted); font-size: 12px; }
#screen-players.screen.sheet .lanes-sort select { height: 28px; padding: 0 4px; border: 0; background: transparent; color: var(--bl-text); font-family: var(--font); font-style: normal; font-weight: 700; font-size: 12.5px; letter-spacing: 0; text-transform: none; clip-path: none; border-radius: 0; cursor: pointer; }
#screen-players.screen.sheet .lanes-sort select option { background: #11141a; color: var(--bl-text); }
#screen-players.screen.sheet .lane-list { gap: 0; margin-top: 0; border-top: 1px solid var(--bl-line); }
#screen-players.screen.sheet .lane {
  grid-template-columns: auto minmax(0, 1fr) auto 40px;
  grid-template-areas: "face who when cars" "face meta meta cars";
  gap: 2px 12px; padding: 10px 4px 10px 2px;
  border: 0; border-bottom: 1px solid var(--bl-line); border-radius: 0; clip-path: none;
  background: transparent;
}
#screen-players.screen.sheet .lane:hover { background: rgba(255,255,255,0.025); color: inherit; }
#screen-players.screen.sheet .lane:active { background: rgba(255,255,255,0.05); }
#screen-players.screen.sheet .lane.live { border-color: var(--bl-line); }
#screen-players.screen.sheet .lane.live .lane-who::before { display: none; }
#screen-players.screen.sheet .lane-face-wrap { grid-area: face; position: relative; width: 40px; height: 40px; }
#screen-players.screen.sheet .lane .avatar.lane-face { width: 40px; height: 40px; }
#screen-players.screen.sheet .lane-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #3ddc84; border: 2px solid var(--bl-bg, #0b0d10); }
#screen-players.screen.sheet .lane b { font-family: var(--font); font-style: normal; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
#screen-players.screen.sheet .lane > em { font-size: 11.5px; color: var(--bl-muted); }
#screen-players.screen.sheet .lane.live > em { color: #8ff0b8; font-weight: 600; }
#screen-players.screen.sheet .lane .meta { font-size: 12px; color: var(--bl-muted); }
#screen-players.screen.sheet .lane .flags i { font-size: 9.5px; padding: 1px 6px; border-radius: 4px; clip-path: none; }
#screen-players.screen.sheet .lane .lane-cars { grid-area: cars; justify-self: end; width: 36px; height: 36px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--bl-line); background: transparent; color: var(--bl-muted); cursor: pointer; clip-path: none; }
#screen-players.screen.sheet .lane .lane-cars svg { width: 20px; height: 20px; }
#screen-players.screen.sheet .lane .lane-cars:hover, #screen-players.screen.sheet .lane .lane-cars:active { color: #fff; border-color: rgba(214,30,59,0.7); }
#screen-players.screen.sheet .lane-garage { padding: 8px 2px 12px 54px; border-bottom: 1px solid var(--bl-line); }
#screen-players.screen.sheet .lane-waiting .lane { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "meta"; padding-left: 4px; }

/* ---------------------------------------------------------------------------
   The room, refined. Kirk: make the chat room look professional, like you
   would see in an expensive app. The bones were already a messaging app;
   this is the finish: names in their own colors, bubbles with room to
   breathe, reactions that sit on the edge of the bubble, a card on a line
   that is a capsule of emojis over a menu, and a box with the emojis behind
   a smiley instead of a row standing over it.
   --------------------------------------------------------------------------- */
.chat-stream { gap: 4px; padding: 6px 4px; }
.chat-stream > .chat-line { border-radius: 20px; padding: 8px 13px 6px; box-shadow: none; }
.chat-stream > .chat-line.theirs { background: #252b34; }
.chat-stream > .chat-line.mine { background: linear-gradient(165deg, #e2294a 0%, #b0182f 100%); }
.chat-stream > .chat-line.theirs.last { border-bottom-left-radius: 6px; }
.chat-stream > .chat-line.mine.last { border-bottom-right-radius: 6px; }
.chat-stream > .chat-line:not(.run-on) { margin-top: 6px; }
.chat-stream > .chat-line.run-on { margin-top: 0; }
.chat-stream > .chat-line > p { font-size: 15px; line-height: 1.38; }
.chat-stream > .chat-line > .chat-head b { color: var(--who, #ff8fa3); font-weight: 700; text-decoration: none; }
.chat-stream > .chat-line > .chat-head { margin-bottom: 2px; }
.chat-stream > .chat-line .chat-face { width: 18px; height: 18px; }
.chat-stream > .chat-line .chat-time { font-size: 10.5px; opacity: 0.85; }
.chat-stream > .chat-line.held { filter: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.22); }
.chat-day { margin: 12px 0 4px; padding: 3px 11px; border-radius: 999px; background: rgba(255,255,255,0.06); font-weight: 600; letter-spacing: 0.02em; color: var(--bl-muted); }

/* Reactions on the bubble's lower edge, cut out of it with the page's own
   color, yours lit in blue. */
.chat-reacts { gap: 4px; margin: 4px -4px -16px; }
.chat-stream > .chat-line.mine .chat-reacts { justify-content: flex-end; }
.chat-reacts .react { height: 26px; padding: 0 8px 0 6px; gap: 4px; border: 2px solid var(--bl-black); background: #2d343e; font-size: 14px; }
.chat-reacts .react i { font-size: 11.5px; color: rgba(255,255,255,0.8); }
.chat-reacts .react.me { border-color: var(--bl-black); background: #1c4f8a; }
.chat-reacts .react.me i { color: #fff; }
.chat-stream > .chat-line:has(.chat-reacts) { margin-bottom: 16px; }

/* A double tap's heart, popping where the line is. */
.chat-heart-pop { position: absolute; left: 50%; top: 50%; z-index: 3; font-size: 44px; line-height: 1; pointer-events: none; animation: chat-heart 0.85s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes chat-heart { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 45% { transform: translate(-50%, -50%) scale(0.95); } 70% { opacity: 1; transform: translate(-50%, -60%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -110%) scale(0.9); } }

/* The card on a line: a capsule of emojis, every emoji behind the plus, who
   put what, and a menu. Each its own surface, floating. */
.chat-pop { min-width: 0; width: max-content; max-width: calc(100vw - 16px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: flex; flex-direction: column; gap: 8px; }
.chat-pop.mine { align-items: flex-end; }
.chat-pop .emojis { gap: 2px; padding: 5px 6px; border-radius: 999px; background: #262c35; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 32px rgba(0,0,0,0.55); }
.chat-pop .emojis button { width: 40px; height: 40px; font-size: 25px; }
.chat-pop .emojis button.on { background: rgba(28,79,138,0.9); box-shadow: none; }
.chat-pop .emojis button.more { color: var(--bl-muted); background: rgba(255,255,255,0.08); }
.chat-pop.open .emojis button.more { color: #fff; background: rgba(255,255,255,0.18); transform: rotate(45deg); }
.chat-pop .pop-grid, .chat-pop .who, .chat-pop .acts { width: 100%; max-width: 340px; border-radius: 16px; background: #1e232b; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 32px rgba(0,0,0,0.55); }
.chat-pop .pop-grid { max-height: 34vh; overflow-y: auto; padding: 6px 8px 8px; }
.chat-pop .pop-grid[hidden] { display: none; }
.chat-pop .pop-grid p, .chat-emoji-more p { margin: 8px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bl-muted); }
.chat-pop .pop-grid > div { display: grid; grid-template-columns: repeat(7, 1fr); }
.chat-pop .pop-grid button { width: 100%; height: 40px; border: 0; border-radius: 10px; background: none; font-size: 24px; padding: 0; cursor: pointer; }
.chat-pop .pop-grid button:active { background: rgba(255,255,255,0.1); }
.chat-pop .pop-grid button.on { background: rgba(28,79,138,0.9); }
.chat-pop .who { margin: 0; padding: 6px 12px; list-style: none; }
.chat-pop .acts { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 4px 0; border-top: 0; overflow: hidden; }
.chat-pop .acts button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: 0; background: none; color: var(--bl-text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.chat-pop .acts button + button { border-top: 1px solid rgba(255,255,255,0.06); }
.chat-pop .acts button svg { flex: none; color: var(--bl-muted); }
.chat-pop .acts button:active { background: rgba(255,255,255,0.06); }
.chat-pop .acts button.danger, .chat-pop .acts button.danger svg { color: #ff6b7f; }

/* The box: the words, the smiley inside it, and the send button round. */
.chat-say { gap: 8px; align-items: flex-end; }
.chat-say .chat-box { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.chat-say .chat-box textarea { width: 100%; padding-right: 46px; border-radius: 23px; background: #1a1f26; border-color: rgba(255,255,255,0.1); }
.chat-say .chat-box textarea:focus { outline: none; border-color: rgba(255,255,255,0.28); }
.chat-emoji-btn { position: absolute; right: 5px; bottom: 5px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--bl-muted); cursor: pointer; padding: 0; }
.chat-emoji-btn.on, .chat-emoji-btn:active { color: #fff; background: rgba(255,255,255,0.1); }
.chat-say #chat-send { border-radius: 50%; clip-path: none; }
.chat-say .chat-photo { border-radius: 50%; background: #1a1f26; border: 1px solid rgba(255,255,255,0.1); }
.chat-emoji-more { display: block; max-height: 230px; margin-top: 8px; padding: 2px 8px 8px; border-radius: 16px; background: #1a1f26; border: 1px solid rgba(255,255,255,0.08); }
.chat-emoji-more[hidden] { display: none; }
.chat-emoji-more > div { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.chat-emoji-more > div button { width: 100%; height: 40px; border: 0; border-radius: 10px; background: none; font-size: 24px; padding: 0; cursor: pointer; }
.chat-emoji-more > div button:active { background: rgba(255,255,255,0.1); }

/* Nothing up: one quiet line, not a card. */
.chat-board.empty .chat-board-cta { padding: 6px 6px 6px 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; background: #1a1f26; }
.chat-board.empty .chat-board-cta p { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-board.empty .chat-board-cta .btn { border-radius: 999px; }
/* The room's own controls are an app's, not the garage's cut buttons. */
#screen-chat .chat-say #chat-send { width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; clip-path: none; }
#screen-chat .chat-board.empty .chat-board-cta .btn { clip-path: none; border-radius: 999px; font-size: 14px; padding: 6px 16px; min-height: 36px; }
#screen-chat .chat-board.empty .chat-board-cta { flex: 1 1 auto; min-width: 0; max-width: 100%; box-sizing: border-box; }
#screen-chat .chat-board.empty .chat-board-cta p { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) { #screen-chat .chat-board.empty .chat-board-cta p span { display: none; } }
.chat-stream > .chat-line.big.theirs, .chat-stream > .chat-line.big.mine { background: transparent; }

/* ---------------------------------------------------------------------------
   The dyno, finished like the tuning software it stands beside. Kirk: we have
   professional tuners using the dyno, and it has to look like an expensive
   and accurate tuning application on the phone and on the desktop. A status
   light on the cell's state, readouts as instrument tiles with even digits,
   the chart and the notes on framed panels, and the strip offer one quiet
   line rather than a red banner across the middle of the sheet.
   --------------------------------------------------------------------------- */
.dyno-phase { display: flex; align-items: center; justify-content: center; gap: 8px; }
.dyno-phase::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5d6570; box-shadow: 0 0 0 3px rgba(93,101,112,0.18); }
.dyno-phase:is([data-phase="holding"], [data-phase="steady"], [data-phase="idle"])::before { background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,0.2), 0 0 8px rgba(52,199,89,0.7); }
.dyno-phase:is([data-phase="pull"], [data-phase="staging"], [data-phase="crank"], [data-phase="coast"])::before { background: #ffb020; box-shadow: 0 0 0 3px rgba(255,176,32,0.2), 0 0 8px rgba(255,176,32,0.7); animation: rec-breathe 0.8s ease-in-out infinite; }
.dyno-phase[data-phase="blown"]::before { background: #ff3b4f; box-shadow: 0 0 0 3px rgba(255,59,79,0.25), 0 0 10px rgba(255,59,79,0.8); }
.dyno-peaks b, .dyno-curve b { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.dyno-peaks span, .dyno-curve span { color: #aab3be; }
.dyno-peaks div, .dyno-curve > div { background: linear-gradient(180deg, #1d222a 0%, #171b21 100%); }
.dyno-graph { background: #12161b; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; }
.dyno-report { background: #171b21; border-color: rgba(255,255,255,0.1); }
.dyno-strip-cta { padding: 8px 10px 8px 12px; background: #171b21; border: 1px solid rgba(255,255,255,0.1); border-left: 3px solid var(--bl-red); }
.dyno-strip-cta p { font-size: 12.5px; color: var(--bl-muted); }
.dyno-strip-cta p b { color: var(--bl-text); }
.dyno-strip-cta { flex-direction: column; align-items: stretch; gap: 8px; }
.dyno-strip-cta .test-air { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dyno-strip-cta .test-air .btn { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.dyno-strip-cta .test-air-label { margin-right: 4px; }
.dyno-strip-cta .test-air .btn.on { background: var(--bl-red); border-color: var(--bl-red); color: #fff; }
.dyno-strip-cta p.test-air-say { flex: none; margin: 0; }

/* ---------------------------------------------------------------------------
   Private messages (js/dms.js). The room's bubbles and box, a list of
   conversations like any messaging app's, side by side with the open one on
   a desk; the banner, the line in a race, the chip and the reply card.
   --------------------------------------------------------------------------- */
.dms-page { overflow: hidden; padding-bottom: calc(var(--safe-bottom) + 10px + var(--keyboard, 0px)); }
.dms-page > .sheet-head { flex: none; }
.dm-head { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.dm-title { justify-self: center; display: flex; flex-direction: column; align-items: center; background: none; border: 0; color: var(--bl-text); font: inherit; cursor: pointer; padding: 0; }
.dm-title em { font-style: normal; font-size: 0; }
.dm-head-tools { display: flex; gap: 6px; }
.dm-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; overflow: hidden; }
.dm-list { flex: 1 1 auto; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.dm-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: none; color: var(--bl-text); font: inherit; text-align: left; cursor: pointer; }
.dm-row:hover, .dm-row:active, .dm-row.on { background: #1d222a; }
.dm-row .chat-face { width: 44px; height: 44px; }
.dm-row-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dm-row-words b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row-words small { font-size: 13px; color: var(--bl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row.unread .dm-row-words small { color: var(--bl-text); font-weight: 600; }
.dm-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.dm-row-side time { font-size: 11.5px; color: var(--bl-muted); }
.dm-row.unread .dm-row-side time { color: #5aa9ff; }
.dm-count, .dm-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #2f80ed; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 800; line-height: 1; }
.dm-badge[hidden] { display: none; }
.menu-dms, .chat-dms { position: relative; }
.menu-dms .dm-badge, .chat-dms .dm-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; font-size: 10.5px; border: 2px solid var(--bl-black); }
.dm-empty { margin: auto; padding: 24px 16px; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--bl-muted); font-size: 14px; }
.dm-empty b { color: var(--bl-text); font-size: 16px; }
.dm-hello .chat-face { width: 64px; height: 64px; }
.dm-thread { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dm-thread[hidden] { display: none; }
.dm-stream { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dm-stream > .chat-line.gone p { font-style: italic; opacity: 0.7; }
.dm-take { margin-left: 8px; padding: 0; border: 0; background: none; color: rgba(255,255,255,0.55); font: inherit; font-size: 10.5px; cursor: pointer; }
.dm-stream > .chat-line:not(:hover) .dm-take { display: none; }
.dm-read { align-self: flex-end; margin: -2px 6px 4px 0; font-size: 11px; color: var(--bl-muted); }
.dm-credits-line { align-self: center; display: flex; align-items: center; gap: 10px; max-width: 90%; margin: 8px 0; padding: 10px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(52,199,89,0.16), rgba(52,199,89,0.05)); border: 1px solid rgba(52,199,89,0.4); }
.dm-credits-line i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #34c759; color: #04220f; font-style: normal; font-weight: 900; }
.dm-credits-line span { display: flex; flex-direction: column; gap: 2px; }
.dm-credits-line b { font-size: 14px; }
.dm-credits-line small { font-size: 12.5px; color: var(--bl-muted); }
.dm-credits-line time { font-size: 10.5px; color: var(--bl-muted); }
.dm-say-note { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.05); color: var(--bl-muted); font-size: 13px; text-align: center; }
.dm-say { flex: none; padding-top: 8px; }
#screen-dms .chat-say #dm-send { width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; clip-path: none; }
#screen-dms .chat-say .chat-box textarea { height: 46px; }
/* On a phone the conversation is the screen once it is open; on a desk the
   list stays beside it. */
@media (max-width: 899px) {
  #screen-dms.in-thread .dm-side { display: none; }
}
@media (min-width: 900px) {
  .dm-side { flex: 0 0 360px; border-right: 1px solid var(--bl-line); padding-right: 10px; }
  #screen-dms:not(.in-thread) .dm-body::after { content: 'Pick a conversation, or start one with the pencil.'; flex: 1; align-self: center; text-align: center; color: var(--bl-muted); font-size: 14px; }
}

/* The banner across the top, off a race. */
.dm-banner { position: fixed; z-index: 90; left: 50%; top: calc(var(--safe-top) + 10px); width: min(440px, calc(100vw - 20px)); transform: translateX(-50%); display: grid; grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 10px 10px 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; background: rgba(32,37,45,0.97); box-shadow: 0 16px 40px rgba(0,0,0,0.55); color: var(--bl-text); font: inherit; text-align: left; cursor: pointer; backdrop-filter: blur(10px); }
.dm-banner[hidden] { display: none; }
.dm-banner.go { animation: dm-drop 0.32s cubic-bezier(.2,.9,.3,1.2); }
@keyframes dm-drop { from { opacity: 0; transform: translate(-50%, -24px); } to { opacity: 1; transform: translate(-50%, 0); } }
.dm-banner .chat-face { width: 40px; height: 40px; }
.dm-banner-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-banner-words b { font-size: 14px; }
.dm-banner-words small { font-size: 13px; color: rgba(255,255,255,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-banner em { font-style: normal; font-weight: 800; font-size: 12.5px; padding: 7px 12px; border-radius: 999px; background: #2f80ed; color: #fff; }
.dm-banner-x { border: 0; background: none; color: var(--bl-muted); font-size: 20px; padding: 0 4px; cursor: pointer; }

/* In a race: one line, easy to read, that takes no tap. */
.dm-ticker { position: fixed; z-index: 85; left: 50%; top: calc(var(--safe-top) + 64px); max-width: min(520px, calc(100vw - 24px)); transform: translateX(-50%); display: flex; gap: 8px; align-items: baseline; padding: 8px 14px; border-radius: 999px; background: rgba(10,12,16,0.82); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 15px; pointer-events: none; white-space: nowrap; }
.dm-ticker[hidden] { display: none; }
.dm-ticker b { color: #7cc4ff; flex: none; }
.dm-ticker span { overflow: hidden; text-overflow: ellipsis; }
.dm-ticker.go { animation: dm-tick 6s ease forwards; }
@keyframes dm-tick { 0% { opacity: 0; transform: translate(-50%, -10px); } 6% { opacity: 1; transform: translate(-50%, 0); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* The chip: at the line and on the results, the way to the reply card. */
.dm-chip { position: fixed; z-index: 86; right: calc(var(--safe-right) + 12px); top: calc(var(--safe-top) + 64px); display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid rgba(47,128,237,0.6); border-radius: 999px; background: rgba(20,32,52,0.95); color: #fff; font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.dm-chip[hidden] { display: none; }
.dm-chip i { width: 8px; height: 8px; border-radius: 50%; background: #5aa9ff; animation: rec-breathe 1.2s ease-in-out infinite; }
.dm-chip em { font-style: normal; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: #2f80ed; }

/* The reply card. */
.dm-quick-card { width: min(440px, calc(100vw - 20px)); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.dm-quick-head { display: flex; align-items: center; gap: 8px; }
.dm-quick-head b { flex: 1; font-size: 16px; }
.dm-quick-x { border: 0; background: none; color: var(--bl-muted); font-size: 24px; cursor: pointer; }
.dm-quick-lines { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.dm-quick-lines p { margin: 0; max-width: 82%; padding: 7px 11px; border-radius: 16px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.dm-quick-lines p.theirs { align-self: flex-start; background: #252b34; }
.dm-quick-lines p.mine { align-self: flex-end; background: linear-gradient(165deg, #e2294a, #b0182f); }
.dm-quick-lines p.credits { align-self: center; background: rgba(52,199,89,0.14); border: 1px solid rgba(52,199,89,0.4); }
.dm-quick .chat-say button[type="submit"] { width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; clip-path: none; }
.dm-ask-choices { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #1e232b; }
.dm-ask-choices:empty { display: none; }
.dm-ask-choices button { padding: 13px 16px; border: 0; background: none; color: var(--bl-text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.dm-ask-choices button + button { border-top: 1px solid rgba(255,255,255,0.06); }
.dm-ask-choices button.danger { color: #ff6b7f; }
#dm-ask-input { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--bl-line); background: #0e1116; color: var(--bl-text); font: inherit; font-size: 16px; }
#dm-ask-input[hidden] { display: none; }
#dm-quick #dm-quick-form button[type="submit"] { width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; clip-path: none; }
#dm-quick#dm-quick .dm-quick-head .btn { clip-path: none; border-radius: 999px; min-height: 34px; padding: 4px 14px; font-family: var(--font); font-style: normal; font-size: 13px; text-transform: none; letter-spacing: 0; }
#dm-quick .dm-quick-card, #dm-ask .modal-card { clip-path: none; border-radius: 20px; }
#dm-ask#dm-ask .btn { clip-path: none; border-radius: 12px; font-family: var(--font); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 15px; }

/* Chats and Friends, over the list. */
.dm-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.dm-tabs { flex: none; display: flex; gap: 4px; padding: 4px; margin: 2px 0 6px; border-radius: 12px; background: #171b21; }
.dm-tabs button { flex: 1; padding: 8px 0; border: 0; border-radius: 9px; background: none; color: var(--bl-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.dm-tabs button.on { background: #2a313b; color: #fff; }

/* Cards in a conversation: a race invite, a tune, a slip, a dyno sheet, a car. */
.dm-card { align-self: flex-start; width: min(340px, 86%); margin: 6px 0; padding: 12px 14px; border-radius: 18px; background: #1d2229; border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 10px; }
.dm-card.mine { align-self: flex-end; }
.dm-card-top { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.dm-card-top span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-card-top b { font-size: 15px; }
.dm-card-top small { font-size: 12.5px; color: var(--bl-muted); }
.dm-card-top time { font-size: 10.5px; color: var(--bl-muted); align-self: start; }
.dm-card-ico { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 12px; font-style: normal; font-weight: 900; font-size: 11px; letter-spacing: 0.06em; color: #fff; background: #2f80ed; }
.dm-card.k-race .dm-card-ico { background: linear-gradient(160deg, #e2294a, #8f1228); }
.dm-card.k-tune .dm-card-ico { background: linear-gradient(160deg, #7c5cff, #4a2fc2); }
.dm-card.k-slip .dm-card-ico { background: linear-gradient(160deg, #f0b429, #b07d0f); color: #1a1200; }
.dm-card.k-sheet .dm-card-ico { background: linear-gradient(160deg, #19b88a, #0d7a5b); }
.dm-card.k-car .dm-card-ico { background: linear-gradient(160deg, #ff7a1a, #b84a00); }
#screen-dms#screen-dms .dm-card .btn { align-self: stretch; clip-path: none; border-radius: 12px; font-family: var(--font); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 14px; min-height: 40px; }
.dm-card-note { margin: 0; font-size: 13px; color: var(--bl-muted); line-height: 1.35; }
.dm-slip, .dm-sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 6px; }
.dm-slip div, .dm-sheet div { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 10px; background: #13171c; border: 1px solid rgba(255,255,255,0.07); }
.dm-slip span, .dm-sheet span { font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.dm-slip b, .dm-sheet b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 16px; color: #fff; }
.dm-sheet small { font-size: 10.5px; color: var(--bl-muted); }
.dm-curve { width: 100%; height: 84px; border-radius: 10px; background: #13171c; border: 1px solid rgba(255,255,255,0.07); }

/* Friends: who is on, and their new bests. */
.dm-friends-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 8px; color: var(--bl-muted); font-size: 13px; }
#screen-dms#screen-dms .dm-friends-head .btn, #screen-dms#screen-dms .dm-friend .btn { clip-path: none; border-radius: 999px; font-family: var(--font); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 13px; min-height: 34px; padding: 4px 14px; }
.dm-friend { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 14px; }
.dm-friend + .dm-friend { border-top: 1px solid rgba(255,255,255,0.05); }
.dm-friend-who { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.dm-friend-who .chat-face { width: 44px; height: 44px; }
.dm-dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #34c759; border: 2px solid var(--bl-black); }
.dm-on { font-style: normal; color: #34c759; font-weight: 700; }
.dm-mutual { font-size: 10.5px; font-weight: 800; color: #7cc4ff; margin-left: 4px; }
.dm-friend-acts { display: flex; gap: 6px; }
.dm-feed-h { margin: 14px 6px 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.dm-feed { list-style: none; margin: 0; padding: 0 6px; display: flex; flex-direction: column; gap: 8px; }
.dm-feed li { display: block; padding: 10px 12px; border-radius: 12px; background: #171b21; font-size: 13.5px; line-height: 1.35; }
.dm-feed li time { float: right; color: var(--bl-muted); font-size: 11px; margin-left: 8px; }
#screen-dms .chat-say .dm-attach { width: 46px; height: 46px; border-radius: 50%; background: #1a1f26; border: 1px solid rgba(255,255,255,0.1); color: #fff; }
.dm-quick-lines p .btn { clip-path: none; border-radius: 999px; min-height: 28px; padding: 2px 12px; font-family: var(--font); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 12.5px; margin-left: 6px; }
#profile-actions [data-pf-friend].on { border-color: rgba(52,199,89,0.6); color: #6ee89b; }
#screen-dms#screen-dms .dm-card .btn.primary { background: #2f80ed; border: 0; }
.dm-friend .dm-row-words small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dm-card-top span, .dm-card-top b, .dm-card-top small { font-family: var(--font); letter-spacing: 0; }

/* The menu's top bar, one set of controls. Kirk: "Top bar looks busy and not
   uniform." The envelope came in round, help and settings were slanted
   plates, and the music button was a circle pinned in the corner: three
   shapes in one row. Now every button in the bar is the same slanted plate,
   the same forty pixels, the same dark fill and edge, eight apart, and the
   credits plate is the same height as they are. On a phone the word Profile
   goes (the ringed face says it opens), so the name has the room and is not
   cut to a letter. */
#screen-menu .menu-top { gap: 8px; }
#screen-menu .menu-top .menu-dms,
#screen-menu .menu-top .menu-faq,
#screen-menu .menu-top .menu-gear,
#app:has(#screen-menu:not([hidden])) .music-toggle {
  width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0;
  border-radius: 0; transform: skewX(-12deg);
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.16); color: var(--bl-text);
  clip-path: none; box-shadow: none;
}
#screen-menu .menu-top .menu-dms svg,
#screen-menu .menu-top .menu-faq svg,
#screen-menu .menu-top .menu-gear svg,
#app:has(#screen-menu:not([hidden])) .music-toggle svg { transform: skewX(12deg); width: 18px; height: 18px; }
#screen-menu .menu-top .menu-dms .dm-badge { transform: skewX(12deg); }
#screen-menu .menu-top .credits { height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; border-color: rgba(255,255,255,0.16); }
#screen-menu .menu-top .menu-greeting { flex: 1 1 auto; min-width: 36px; margin-right: 6px; overflow: hidden; }
/* Too little room for a name to read: the face alone, rather than a letter
   and a sliver. */
#screen-menu .menu-top .menu-greeting { container-type: inline-size; }
@container (max-width: 58px) { #screen-menu .menu-top .menu-greeting span { display: none; } }
#screen-menu .menu-top .menu-greeting span { min-width: 0; }
#screen-menu .menu-top .credits { flex: 0 0 auto; }
@media (max-width: 520px) {
  #screen-menu .menu-top .menu-greeting small { display: none; }
}
/* A narrow phone: the balance is never cut, so it steps down a size, and the
   name gives way to it before it does. */
@media (max-width: 440px) {
  #screen-menu .menu-top { gap: 6px; }
  #screen-menu .menu-top .credits { padding: 4px 9px 3px; }
  #screen-menu .menu-top .credits b { font-size: 18px; }
  #screen-menu .menu-top .menu-greeting span { min-width: 0; }
}

/* The Grudge Night card's boxes, even. Kirk, on the night: the window is
   cluttered and the buttons don't look even. Three columns held two boxes
   with a hole where the third would be, each box only as tall as its own
   words, and a label long enough to wrap made its box taller than the one
   beside it. Now the boxes share the row between them, stand the same
   height, and a label stays on one line. */
#drag-night .night-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; }
#drag-night .night-grid span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#drag-night .night-grid b { font-size: 18px; }
#drag-night .index-boards .btn { min-height: 42px; }
/* Grudge Night's strip on the home screen: the Track Day strip, in the
   night's red once it is racing and orange while check-in is open. */
.menu-grudge[data-state="checkin"] em { background: #ffb84d; }

/* The names that match what is typed in a name box, under it. */
.dm-ask-choices .dm-name-pick { display: flex; align-items: center; gap: 10px; }
.dm-name-pick span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dm-name-pick small { font-size: 12px; color: #6ee89b; }
.dm-name-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.dm-name-dot.on { background: #34c759; }
.dm-ask .modal-card { max-height: calc(100dvh - 24px); overflow-y: auto; }

/* ---------------------------------------------------------------- Profile card
   Kirk: when I click on a user's name their profile does not look like a
   profile, just a mess of buttons. A header that says who this is, one row of
   things to do with them, tabs, and for the shop an Account tab. */
.modal-card.profile-card { padding: 0; gap: 0; width: min(540px, 94vw); }
.profile-card > :not(.pf-hero):not(.pf-close) { margin-left: 18px; margin-right: 18px; }
.pf-hero { position: relative; padding: 18px 18px 14px; overflow: hidden; background: linear-gradient(135deg, #1a1d23 0%, #23272f 55%, #2b1218 100%); border-bottom: 1px solid var(--bl-line); }
.pf-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--bl-red), #ff7a3d 60%, transparent); }
.pf-hero-art { position: absolute; right: -6%; top: 50%; width: 62%; aspect-ratio: 2 / 1; transform: translateY(-50%); background: center / contain no-repeat; opacity: 0.32; filter: saturate(1.15); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); pointer-events: none; }
.pf-hero > :not(.pf-hero-art) { position: relative; }
.pf-close { position: sticky; top: 10px; align-self: flex-end; margin: 10px 10px -44px 0 !important; z-index: 3; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(10,12,16,0.55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.pf-close:hover { border-color: rgba(255,255,255,0.45); }
.pf-kicker { display: block; font-family: var(--game); font-weight: 700; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: #ffb84d; margin-bottom: 8px; }
.pf-hero .profile-head { gap: 14px; }
.pf-hero .profile-head .avatar { width: 72px; height: 72px; box-shadow: 0 0 0 2px rgba(255,255,255,0.12), 0 6px 18px rgba(0,0,0,0.45); }
.pf-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-streak { position: relative; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: 8px 0 0; padding: 4px 12px 3px 10px; transform: skewX(-12deg); background: rgba(0,0,0,0.55); border: 1px solid var(--bl-line-2, #333a44); color: rgba(255,255,255,0.45); }
.pf-streak > * { transform: skewX(12deg); }
.pf-streak b { font-family: var(--game); font-style: italic; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.7); }
.pf-streak small { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-muted); }
.pf-streak.lit { color: #ff8a1f; border-color: rgba(255,138,31,0.55); }
.pf-streak.lit b { color: #fff; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.td-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 3px 10px; transform: skewX(-12deg); font-family: var(--game); font-style: italic; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.td-badge > * { transform: skewX(12deg); }
.td-badge .trophy { width: 17px; height: 17px; }
.td-badge i { font-style: normal; font-family: var(--gnum); font-size: 17px; line-height: 1; margin-left: 2px; }
.td-badge.gold { color: #2a1a00; background: linear-gradient(135deg, #ffe08a, #f5b82e 55%, #d18f12); }
.td-badge.silver { color: #1d2128; background: linear-gradient(135deg, #f4f6f9, #c4cad3 55%, #9aa3ae); }
.td-cup { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; font-weight: 800; flex: none; }
.td-cup .trophy { width: 14px; height: 14px; }
.td-cup.gold { color: #f5b82e; }
.td-cup.silver { color: #c4cad3; }
.lane-who .flags .play-flame { margin-left: 0; font-size: 12px; }
.lane-who .flags .td-cup { font-size: 12px; }
.pf-hero h2#profile-name { margin: 0; font-family: var(--game); font-weight: 900; font-style: italic; font-size: clamp(26px, 7vw, 34px); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.pf-hero .profile-who { margin: 0; font-size: 12.5px; }
/* The badge on its own line, then who they are, a slash between parts and never at a line's end. */
.profile-who .who-chip { flex-basis: 100%; display: flex; }
.profile-who .who-line { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.profile-who .who-bit { display: inline-flex; align-items: center; white-space: nowrap; }
.profile-who .who-bit + .who-bit::before { content: '/'; color: var(--bl-line-2); margin: 0 8px; }
/* The card scrolls as one: nothing in it is squeezed to fit, so the header is never cut off. */
.modal-card.profile-card > * { flex-shrink: 0; }
/* Your own: the hint on a line under the face, not floating over the car. */
.pf-hero .profile-head.own { flex-wrap: wrap; }
.pf-hero .profile-head .pf-id { flex: 1 1 0; }
.pf-hero .profile-head.own #profile-hint { flex-basis: 100%; margin: -6px 0 0; text-align: left; }
.pf-hero .profile-cert { justify-content: flex-start; margin: 10px 0 0; }
.pf-since { margin: 10px 0 0; font-size: 12px; color: var(--bl-muted); letter-spacing: 0.01em; }
.pf-since:empty { display: none; }
.profile-head.own { flex-direction: row; text-align: left; }
.pf-hero .profile-head.own .avatar { width: 108px; height: 108px; }

/* One row of tiles the same size, in one order. */
.profile-actions { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.profile-actions[hidden] { display: none; }
.pf-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 66px; padding: 10px 4px 9px; border-radius: 10px; border: 1px solid var(--bl-line); background: var(--bl-panel); color: #e9edf2; cursor: pointer; font-family: var(--game); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.pf-act:hover { border-color: #5a616b; background: var(--bl-panel-2); }
.pf-act:active { transform: translateY(1px); }
.pf-act .pf-ico { width: 22px; height: 22px; }
.pf-act span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pf-act.primary { background: linear-gradient(180deg, #e3253f, #b5152d); border-color: #ff4a62; color: #fff; box-shadow: 0 6px 16px rgba(214,30,59,0.28); }
.pf-act.primary:hover { background: linear-gradient(180deg, #ef2d48, #c01933); }
.pf-act.on { border-color: rgba(63,210,255,0.55); color: #3fd2ff; }

/* Their best passes, to race. */
.pf-race { margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(214,30,59,0.45); background: linear-gradient(180deg, rgba(214,30,59,0.10), rgba(214,30,59,0.02)); }
.pf-race[hidden] { display: none; }
.pf-race h4 { margin: 0; font-family: var(--game); font-weight: 800; font-style: italic; font-size: 17px; text-transform: uppercase; letter-spacing: 0.03em; }
.pf-race > .fine { margin: 2px 0 10px; }
.pf-race-list { display: flex; flex-direction: column; gap: 8px; }
.pf-race-row { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bl-line); background: var(--bl-panel); color: inherit; cursor: pointer; text-align: left; }
.pf-race-row:hover { border-color: #ff4a62; }
.pf-race-row:disabled { opacity: 0.6; }
.pf-race-art { width: 74px; height: 37px; object-fit: contain; }
.pf-race-what { display: flex; flex-direction: column; min-width: 0; }
.pf-race-what i { font-style: normal; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.pf-race-what b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 19px; color: #fff; line-height: 1.1; }
.pf-race-what b small { font-size: 11px; color: var(--bl-muted); }
.pf-race-what > small { font-size: 11.5px; color: var(--bl-muted); line-height: 1.3; }
.pf-race-go { font-family: var(--game); font-weight: 800; font-style: italic; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; padding: 8px 14px; border-radius: 8px; background: var(--bl-red); }

/* Tabs as a strip with an underline, not a second row of buttons. */
.profile-tabs { display: flex; gap: 0; margin-top: 16px; border-bottom: 1px solid var(--bl-line); }
.pf-tab { flex: 1 1 0; min-width: 0; padding: 10px 4px 9px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--bl-muted); font-family: var(--game); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tab:hover { color: #e9edf2; }
.pf-tab.on { color: #fff; border-bottom-color: var(--bl-red); }
.pf-tab[hidden] { display: none; }
.profile-card .profile-pane { padding-top: 14px; }
.profile-card .profile-pane:last-of-type, .profile-card > .profile-send { padding-bottom: 18px; }
.profile-card > .profile-send { margin-top: 0; }
.pf-more-link { align-self: flex-start; background: none; border: 0; padding: 2px 0; color: #3fd2ff; font-size: 13px; font-weight: 600; cursor: pointer; }
.pf-more-link:hover { text-decoration: underline; }

/* The shop's look at the account. */
.pf-acct-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pf-acct-chips .chip.bad { background: rgba(214,30,59,0.18); color: #ff6b7f; border-color: rgba(214,30,59,0.5); }
.pf-acct { display: flex; flex-direction: column; border: 1px solid var(--bl-line); border-radius: 12px; overflow: hidden; background: var(--bl-panel); }
.pf-acct-row { display: grid; grid-template-columns: 118px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--bl-line); font-size: 13px; }
.pf-acct-row:first-child { border-top: 0; }
.pf-acct-row i { font-style: normal; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-muted); }
.pf-acct-row b { font-weight: 600; color: #e9edf2; min-width: 0; overflow-wrap: anywhere; }
.pf-acct-row b a { color: #3fd2ff; text-decoration: none; }
.pf-acct-row b .muted { color: var(--bl-muted); font-weight: 400; }
.pf-acct-row small { font-size: 11.5px; color: var(--bl-muted); text-align: right; }
.pf-acct-row .btn.small { min-height: 28px; padding: 2px 10px; font-size: 12px; }
.profile-card .profile-shop { margin-top: 14px; }
.profile-actions[data-n="5"] .pf-act { font-size: 11px; letter-spacing: 0.02em; }
@media (max-width: 420px) {
  .pf-act { min-height: 60px; font-size: 11px; letter-spacing: 0.03em; gap: 5px; }
  .pf-act .pf-ico { width: 20px; height: 20px; }
  .pf-acct-row { grid-template-columns: 96px 1fr auto; }
}
/* The send box draws nothing until its form is open: the Send tile opens it. */
.profile-card > .profile-send { border-top: 0; padding-top: 0; }
.profile-card > .profile-send:has(.send-form:not([hidden])) { border-top: 1px solid var(--bl-line); padding-top: 14px; margin-top: 4px; }

/* The performance meter on the results sheet (UI.splitsCard): a GPS box's
   readout, each split big with the car's best beside it, and the speed trace. */
.perf-meter { margin: 12px 0 4px; padding: 12px 14px 10px; border-radius: 12px; background: linear-gradient(180deg, #0b1016, #0e141c); border: 1px solid rgba(80, 200, 255, 0.22); }
.perf-meter header { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #7fd6ff; }
.perf-meter .pm-dot { width: 8px; height: 8px; border-radius: 50%; background: #39d98a; box-shadow: 0 0 0 3px rgba(57, 217, 138, 0.2); }
.perf-meter .pm-rows { display: grid; gap: 6px; margin-top: 8px; }
.perf-meter .pm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label time" "side side"; align-items: baseline; column-gap: 10px; width: 100%; padding: 6px 8px; margin: 0 -8px; box-sizing: content-box; background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.perf-meter .pm-row:first-child { border-top-color: transparent; }
.perf-meter .pm-row.on { background: rgba(90, 184, 255, 0.12); box-shadow: inset 3px 0 0 #5ab8ff; }
.perf-meter .pm-row span { grid-area: label; font-size: 13px; color: var(--bl-muted, #a4abb6); letter-spacing: 0.04em; }
.perf-meter .pm-row b { grid-area: time; font: 700 28px/1 'Teko', 'Barlow Condensed', system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.perf-meter .pm-row b small { font-size: 14px; margin-left: 2px; color: var(--bl-muted, #a4abb6); }
.perf-meter .pm-row em { grid-area: side; font-style: normal; font-size: 12px; color: var(--bl-muted, #a4abb6); }
.perf-meter .pm-row.new b { color: #39d98a; }
.perf-meter .pm-row em.pm-pb { color: #39d98a; font-weight: 700; }
/* The chart, drawn at its own shape (never stretched), like a GPS box's report. */
.perf-meter .pm-chart-box { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.perf-meter .pm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--bl-muted, #a4abb6); margin-bottom: 4px; }
.perf-meter .pm-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.perf-meter .pm-legend .pm-k-v::before { background: #5ab8ff; }
.perf-meter .pm-legend .pm-k-g::before { background: #ffa860; }
.perf-meter .pm-legend .pm-k-tap { margin-left: auto; font-size: 11px; opacity: 0.8; }
.perf-meter .pm-legend .pm-k-tap::before { display: none; }
.perf-meter .pm-chart { display: block; width: 100%; height: auto; }
.perf-meter .pm-frame { fill: none; stroke: rgba(255, 255, 255, 0.14); }
.perf-meter .pm-grid { stroke: rgba(255, 255, 255, 0.08); }
.perf-meter .pm-tick { fill: rgba(255, 255, 255, 0.55); font-size: 10px; font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.perf-meter .pm-tick.pm-v { fill: #8fcfff; }
.perf-meter .pm-tick.pm-g { fill: #ffbf8a; }
.perf-meter .pm-line { fill: none; stroke: #5ab8ff; stroke-width: 2.4; stroke-linejoin: round; }
.perf-meter .pm-gline { fill: none; stroke: #ffa860; stroke-width: 1.6; stroke-linejoin: round; opacity: 0.9; }
.perf-meter .pm-band { fill: rgba(90, 184, 255, 0.16); }
.perf-meter .pm-band-bar { fill: #5ab8ff; }
.perf-meter .pm-pill rect { fill: #0b1016; stroke: #5ab8ff; }
.perf-meter .pm-pill text { fill: #cfe9ff; font: 700 11px system-ui, sans-serif; }
.perf-meter .pm-call rect { fill: #2a3240; }
.perf-meter .pm-call text { fill: #fff; font: 700 11px system-ui, sans-serif; }
.perf-meter .pm-call .pm-call-v { fill: #fff; }
.perf-meter .pm-call .pm-call-vt { fill: #1b2230; font: 800 9.5px system-ui, sans-serif; }
.perf-meter .pm-lead { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
.perf-meter .pm-dotm { fill: #1b2230; stroke: #fff; stroke-width: 1.6; }

/* Up next (js/nextup.js): one thing to do now, under the race doors and under a result. */
.menu-upnext { flex: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.menu-upnext .upnext-go, .results-next { position: relative; display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px 44px 12px 14px; border-radius: 12px; border: 1px solid rgba(57, 217, 138, 0.45); background: linear-gradient(180deg, rgba(57, 217, 138, 0.14), rgba(57, 217, 138, 0.05)); color: var(--bl-text, #f2f2f3); cursor: pointer; font: inherit; }
.upnext-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #39d98a; }
.menu-upnext .upnext-go b, .results-next b { font-size: 17px; font-weight: 800; line-height: 1.2; }
.menu-upnext .upnext-go small, .results-next small { font-size: 13px; line-height: 1.35; color: var(--bl-muted, #a4abb6); }
.menu-upnext .upnext-arrow { position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: #39d98a; }
.menu-upnext .upnext-other { align-self: flex-end; background: none; border: 0; padding: 2px 4px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--bl-muted, #a4abb6); text-decoration: underline; cursor: pointer; }
.results-next { margin: 10px 0 0; }
/* Staging help on the slip: what it did, and the button that stops it. */
.results-stagehelp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(240, 180, 41, 0.4); background: rgba(240, 180, 41, 0.08); font-size: 13px; color: var(--bl-muted, #a4abb6); }
.results-stagehelp[hidden] { display: none; }
.results-stagehelp span { flex: 1 1 180px; }
.results-stagehelp .btn { flex: none; }

/* The Performance tab (UI.renderPerfBoard): a split at a time, the quickest per racer and car. */
.lb-perf-split { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-perf-split .btn { flex: 1 1 auto; min-width: 64px; font-variant-numeric: tabular-nums; }
.lb-perf-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.lb-perf-pick label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.lb-perf-pick select { max-width: 100%; }
.perf-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.perf-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.perf-row.me { border-color: rgba(57, 217, 138, 0.6); background: rgba(57, 217, 138, 0.08); }
.perf-row .pr-n { font-weight: 800; color: var(--bl-muted, #a4abb6); text-align: center; }
.perf-row .pr-who { display: flex; flex-direction: column; min-width: 0; }
.perf-row .pr-who b, .perf-row .pr-who small { overflow-wrap: anywhere; }
.perf-row .pr-who small { color: var(--bl-muted, #a4abb6); }
.perf-row .pr-t { font: 700 24px/1 'Teko', 'Barlow Condensed', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.perf-row .pr-t small { font-size: 13px; margin-left: 2px; color: var(--bl-muted, #a4abb6); }

/* A sheet's title is never cut off (Kirk): on a phone the board's source tag
   gives way instead, smaller and over two lines, and on the narrowest it goes. */
@media (max-width: 480px) {
  .screen.sheet > .sheet-head .sheet-brand { flex: 0 0 auto; overflow: visible; text-overflow: clip; }
  .screen.sheet > .sheet-head .source-tag { flex: 0 1 auto; min-width: 0; font-size: 9.5px; line-height: 1.15; padding: 3px 7px; white-space: normal; overflow: hidden; }
}
@media (max-width: 370px) { .screen.sheet > .sheet-head .source-tag { display: none; } }
/* The drivetrain row on the Board and the Performance tab: four even buttons, one row. */
.lb-drive { display: flex; gap: 6px; margin: 0 0 10px; }
.lb-drive[hidden] { display: none; }
.lb-drive .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
#lb-perf-drive { margin: 10px 0 0; }
/* The five splits on one row. */
.lb-perf-split .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 13px; white-space: nowrap; }

/* Tunes in a file (UI.openTuneBackup): the restore picker and the paste box. */
.tunes-restore { display: grid; gap: 8px; margin: 4px 0 14px; }
.tunes-restore textarea { width: 100%; box-sizing: border-box; min-height: 84px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: inherit; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.tunes-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
.tunes-card #tunes-body { overflow-wrap: anywhere; }
.tunes-note { display: grid; gap: 6px; margin: 0 0 12px; }
.tunes-note label { font-weight: 700; }
.tunes-note label small { display: block; font-weight: 400; opacity: 0.7; }
.tunes-note textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; resize: vertical; }
.tunes-note-show { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid #ffd24a; border-radius: 6px; background: rgba(255, 210, 74, 0.08); white-space: pre-wrap; overflow-wrap: anywhere; }
.tunes-note-show span { display: block; margin-bottom: 4px; font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.tunes-list { max-height: 34vh; overflow-y: auto; margin: 0 0 14px; padding: 4px 10px 8px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: rgba(0, 0, 0, 0.18); }
.tunes-list-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; background: #1b1e24; font-size: 0.85em; }
.tunes-car h4 { margin: 10px 0 4px; font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.tunes-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.tunes-item input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #d61e3b; }
.tunes-item span { display: grid; gap: 1px; min-width: 0; }
.tunes-item small { opacity: 0.7; }
.tunes-item em { font-style: normal; font-size: 0.85em; opacity: 0.85; overflow-wrap: anywhere; }
.tunes-item.off { opacity: 0.5; cursor: default; }
.tune-backup-line { margin: 8px 0 14px; }
/* Track Day: the tune a car goes in on, with a saved tune's note under it. */
.td-pick.td-tune em { font-style: normal; font-size: 11.5px; color: var(--bl-muted); opacity: 0.85; overflow-wrap: anywhere; }
/* Track Day: in place of the track picker, the night's track, the same for every driver. */
.venue-fixed { margin: 0; padding: 10px 12px; border: 1px solid var(--bl-line); border-radius: 10px; background: var(--bl-panel); color: var(--bl-text); font-size: 0.92em; line-height: 1.4; }
/* Track Day lobby: the field under each class, who is in and where they are. */
.td-field { list-style: none; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px solid var(--bl-line); display: grid; gap: 4px; }
.td-field li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name best tag" "car car car"; column-gap: 8px; align-items: baseline; font-size: 12.5px; }
.td-field li b { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
.td-field li span { grid-area: car; color: var(--bl-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.td-field li em { grid-area: best; font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; }
.td-field li i { grid-area: tag; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bl-muted); white-space: nowrap; }
.td-field li i.here, .td-field li i.in { color: var(--bl-ok); }
.td-field li i.here::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--bl-ok); box-shadow: 0 0 6px var(--bl-ok); vertical-align: 1px; }
.td-field li i.warn { color: var(--bl-orange); }
.td-field li i.out { color: var(--bl-muted); text-decoration: line-through; }
.td-field li.mine b { color: var(--bl-ok); }
.td-field-empty { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--bl-line); font-size: 12px; color: var(--bl-muted); }
.td-locked { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(52, 199, 89, 0.14); color: var(--bl-ok); font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 1px; }
.td-locked svg { width: 11px; height: 11px; }
.index-actions .td-go { flex: 1; font-size: 16px; min-height: 48px; }
.td-at-track { flex: 1; align-self: center; font-size: 13px; color: var(--bl-ok); }

/* The highway roll's line-up meter (Game.honkHud): the roll and end speed,
   what to do next, where you sit against the other car, and the honks. */
.honk-meter { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 112px); transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); padding: 8px 12px 10px; border-radius: 12px; background: rgba(12, 13, 17, 0.78); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-family: 'Barlow Condensed', sans-serif; z-index: 6; pointer-events: none; }
.honk-meter[hidden] { display: none; }
.honk-lights { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 212px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 7; pointer-events: none; }
.honk-lights[hidden] { display: none; }
.honk-lights .hl-row { display: flex; gap: 18px; padding: 12px 18px; border-radius: 18px; background: rgba(12, 13, 17, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); }
.honk-lights .hl-row i { width: 46px; height: 46px; border-radius: 50%; background: #2a2620; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08); transition: background 80ms, box-shadow 80ms; }
.honk-lights .hl-row i.on { background: #ffb21a; box-shadow: 0 0 22px 6px rgba(255, 178, 26, 0.7); }
.honk-lights .hl-row i.go.on { background: #2fe06d; box-shadow: 0 0 26px 8px rgba(47, 224, 109, 0.75); }
.honk-lights .hl-word { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 34px; letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.honk-lights .hl-word.pop { animation: hl-pop 260ms ease-out; }
@keyframes hl-pop { from { transform: scale(1.5); } to { transform: scale(1); } }
.screen.race.honk #hud-time-box, .screen.race.honk #hud-lap-box { visibility: hidden; }
.honk-meter .hm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 800; font-style: italic; letter-spacing: 0.04em; }
.honk-meter .hm-roll { font-size: 15px; color: #c9ced6; }
.honk-meter .hm-say { font-size: 20px; }
.honk-meter.lined .hm-say { color: #3ddc84; }
.honk-meter .hm-bar { position: relative; height: 10px; margin: 6px 0; border-radius: 5px; background: rgba(255, 255, 255, 0.12); }
.honk-meter .hm-zone { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 5px; background: rgba(61, 220, 132, 0.35); }
.honk-meter .hm-mark { position: absolute; top: -4px; width: 6px; height: 18px; margin-left: -3px; border-radius: 3px; background: #d61e3b; box-shadow: 0 0 6px rgba(214, 30, 59, 0.8); }
.honk-meter.lined .hm-mark { background: #3ddc84; box-shadow: 0 0 6px rgba(61, 220, 132, 0.8); }
.honk-meter .hm-row { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; color: #c9ced6; }
.honk-meter .hm-honks { display: flex; gap: 6px; }
.honk-meter .hm-honks i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 196, 0, 0.6); }
.honk-meter .hm-honks i.on { background: #ffc400; border-color: #ffc400; }
.honk-result h2 { margin: 0 0 6px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 40px; }
.honk-result.won h2 { color: #3ddc84; }
.honk-result.lost h2 { color: #ff3b57; }
.honk-result .spec-grid { margin-top: 10px; }
.honk-qt { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.honk-qt h4 { margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; color: #5b616c; }
.honk-qt .hq-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.honk-qt .hq-row > span { width: 52px; font-weight: 700; color: #2a2e36; }
.honk-qt .hq-row b { min-width: 72px; text-align: center; font-size: 18px; color: #15181d; }
.honk-qt .hq-row .btn { min-width: 64px; }
.honk-qt .hq-row .btn.on { background: #d61e3b; border-color: #d61e3b; color: #fff; }
.honk-qt .fine { margin: 2px 0 0; color: #5b616c; }
.hroll-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.hroll-pick > span { min-width: 34px; font-weight: 700; color: #c9ced6; }
.hroll-pick .btn.on { background: #d61e3b; border-color: #d61e3b; color: #fff; }
.hroll-gear-note { margin: 0 0 8px; color: #aab1bc; }
.honk-qt .hq-row { flex-wrap: wrap; }
.honk-qt .hq-row [data-hroll-gear] { min-width: 52px; }
.honk-qt .hq-row .btn[data-hroll-gear].on { background: #d61e3b; border-color: #d61e3b; color: #fff; }
.honk-qt .hroll-gear-note { color: #5b616c; }
.honk-result .honk-king { margin: 0 0 6px; font-weight: 800; color: #b8860b; letter-spacing: 0.02em; }
.honk-result .honk-verdict { margin: 8px 0 4px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 24px; color: #15181d; }
.honk-result .honk-story { margin: 8px 0 0; padding-left: 18px; color: #2a2e36; font-size: 14px; line-height: 1.4; }
.honk-result .honk-story li { margin: 0 0 5px; }
.honk-result .honk-who { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.05); color: #2a2e36; font-size: 13.5px; line-height: 1.4; }
.honk-result .honk-who span { margin-left: 4px; padding: 1px 7px; border-radius: 10px; background: #15181d; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.honk-chart { margin: 6px 0 0; }
.honk-chart svg { display: block; width: 100%; max-width: 520px; height: auto; }
.honk-chart .hc-legend { max-width: 520px; }
.honk-chart .hc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: #5b616c; margin-bottom: 2px; }
.honk-chart .hc-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.honk-chart .k-me::before { background: #d61e3b; }
.honk-chart .k-them::before { background: #7d8592; }
.honk-chart .k-spin::before { background: rgba(255, 150, 30, 0.45); }
.honk-chart .k-gap::before { background: linear-gradient(#2fb36d 50%, #e0475e 50%); }
.honk-chart .hc-grid { stroke: rgba(0, 0, 0, 0.08); }
.honk-chart .hc-frame { fill: none; stroke: rgba(0, 0, 0, 0.12); }
.honk-chart .hc-tick { fill: #6b7280; font-size: 9.5px; font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.honk-chart .hc-word { fill: #6b7280; font-size: 9.5px; font-weight: 700; font-family: system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.honk-chart .hc-word.me { fill: #d61e3b; }
.honk-chart .hc-me { fill: none; stroke: #d61e3b; stroke-width: 2.4; stroke-linejoin: round; }
.honk-chart .hc-them { fill: none; stroke: #7d8592; stroke-width: 2; stroke-dasharray: 5 3; stroke-linejoin: round; }
.honk-chart .hc-spin { fill: rgba(255, 150, 30, 0.28); }
.honk-chart .hc-hit { stroke: #15181d; stroke-width: 1; stroke-dasharray: 2 3; }
.honk-chart .hc-go { stroke-width: 1.2; }
.honk-chart .hc-go.me { stroke: #d61e3b; }
.honk-chart .hc-go.them { stroke: #7d8592; }
.honk-chart .hc-shift { fill: #fff; stroke: #d61e3b; stroke-width: 1.6; }
.honk-chart .hc-gear { fill: #d61e3b; font-size: 9px; font-weight: 800; font-family: system-ui, sans-serif; }
.honk-chart .hc-ahead { fill: rgba(47, 179, 109, 0.55); }
.honk-chart .hc-behind { fill: rgba(224, 71, 94, 0.55); }
.honk-chart .hc-zero { stroke: rgba(0, 0, 0, 0.35); }
.hking-card .hking-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.hking-card .hking-row > b { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 22px; color: #c9ced6; text-align: center; }
.hking-card .hking-row.done > b { color: #3ddc84; }
.hking-card .hking-row.next > b { color: #ffcc33; }
.hking-card .hking-row.locked { opacity: 0.55; }
.hking-card .hking-name { font-weight: 800; color: #fff; overflow-wrap: anywhere; }
/* The highway board: a name opens the racer, the band and week chips sit above. */
.hwy-board .hwy-who-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.hwy-board .hwy-board-rows { margin-top: 8px; }
.hwy-board .hwy-crowns:not(:empty) { margin-top: 10px; }
/* A dark timing board on the light slip. Kirk: the time in the slip is white so
   you can't read it; it was laid out for a dark slip. */
.honk-pull { margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: #15181d; color: #c9ced6; }
.honk-pull .honk-pull-time { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.honk-pull .honk-pull-time span { color: #c9ced6; font-weight: 700; }
.honk-pull .honk-pull-time b { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 26px; color: #fff; }
.honk-pull .honk-pull-time em { font-style: normal; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #3ddc84; }
.honk-pull > span { display: block; margin-top: 2px; color: #c9ced6; }
.honk-pull small { display: block; margin-top: 4px; color: #9aa3ad; }
.hking-card .hking-name span { margin-left: 4px; padding: 1px 7px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #c9ced6; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.chat-line.video .chat-img video { display: block; width: 100%; height: 100%; border-radius: inherit; background: #000; }

/* Highway Shutdown's door on the home screen, and its own page. */
.menu-highway { border-color: rgba(214, 30, 59, 0.45); min-height: 64px; }
.menu-highway .np-scene { object-position: 50% 62%; filter: brightness(1.25) saturate(1.15); }
.menu-highway .np-words { flex-direction: column; align-items: flex-start; gap: 2px; }
.menu-highway .np-title { color: #ff4d64; display: flex; align-items: center; gap: 8px; }
.menu-highway .np-sub { white-space: normal; overflow: visible; }
.menu-highway .hw-new { font-style: normal; font-family: system-ui, sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 9px; background: #ff4d64; color: #fff; text-shadow: none; }
.hwy-page { display: grid; gap: 12px; padding: 0 12px 24px; }
.hwy-hero { position: relative; overflow: hidden; border-radius: 14px; background: #0b0d12; color: #fff; }
.hwy-hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0.55; }
.hwy-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,10,14,0.35) 0%, rgba(8,10,14,0.85) 55%, rgba(8,10,14,0.96) 100%); }
.hwy-hero-body { position: relative; z-index: 2; padding: 16px 16px 14px; display: grid; gap: 8px; }
.hwy-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ffcc33; }
.hwy-who { display: flex; align-items: center; gap: 12px; }
.hwy-who .hwy-face { width: 56px; height: 56px; flex: none; }
.hwy-who b { display: block; font-family: var(--game, 'Barlow Condensed', sans-serif); font-style: italic; font-weight: 900; font-size: 30px; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.hwy-chip { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,0.14); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.hwy-hero q { font-size: 16px; font-style: italic; color: #fff; }
.hwy-hero p { margin: 0; font-size: 13.5px; color: #c9ced6; }
.hwy-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 700; color: #fff; }
.hwy-go { width: 100%; min-height: 54px; font-size: 20px; margin-top: 4px; }
.hwy-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hwy-how > div { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.hwy-how svg { width: 34px; height: 34px; color: #ff4d64; }
.hwy-how b { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }
.hwy-how span { font-size: 12px; line-height: 1.35; color: #aab1bc; }
.hwy-pointer { display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(214, 30, 59, 0.45); background: rgba(214, 30, 59, 0.12); color: #fff; }
.hwy-pointer b { font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
.hwy-pointer span { font-size: 12.5px; color: #c9ced6; }
.honk-result .hwy-back { width: 100%; margin-top: 10px; }
.honk-result .honk-who { display: flex; gap: 10px; align-items: flex-start; }
.honk-result .honk-who .honk-face { width: 40px; height: 40px; flex: none; }
.honk-result .honk-who q { display: block; margin: 3px 0; font-style: italic; color: #15181d; font-weight: 600; }
.honk-result .honk-who small { display: block; color: #5b616c; font-size: 12.5px; }

/* On the road: what the other driver says rolling up, and the coached first race's steps. */
.honk-talk { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 262px); z-index: 30; max-width: min(88vw, 420px); padding: 8px 12px; border-radius: 12px; background: rgba(10, 12, 16, 0.82); color: #fff; font-size: 14px; line-height: 1.35; pointer-events: none; text-align: center; }
.honk-talk b { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #ff8a9a; }
.honk-talk.low { top: calc(env(safe-area-inset-top, 0px) + 340px); }
.honk-coach { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 300px); z-index: 31; width: min(90vw, 440px); box-sizing: border-box; padding: 12px 14px; border-radius: 14px; background: rgba(255, 204, 51, 0.95); color: #15181d; font-size: 17px; font-weight: 800; line-height: 1.3; text-align: center; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.honk-coach.pop { animation: coach-pop 0.35s ease-out; }
/* Once the car is away it sits where the honk lights were, clear of the car. */
.honk-coach.up { top: calc(env(safe-area-inset-top, 0px) + 212px); bottom: auto; }
@keyframes coach-pop { from { transform: translateX(-50%) scale(0.92); opacity: 0.4; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* The highway held sideways (tools/landscapefit.mjs). Upright these stack
   down the middle of the screen; sideways that middle is the gauges, and the
   coaching step sat above the top of the screen. So: the line-up meter takes
   the left column, the lights the middle under the time, the other driver's
   line the right column, and a coaching step the top band, which steps aside
   for it while it is up (the clock has not started during the line-up). */
@media (orientation: landscape) and (max-height: 560px) {
  .honk-meter { left: calc(var(--safe-left) + 10px); transform: none; top: calc(var(--safe-top) + 100px); width: min(300px, 36vw); padding: 6px 10px 8px; }
  .honk-lights { top: calc(var(--safe-top) + 100px); gap: 4px; }
  .honk-lights .hl-row { gap: 10px; padding: 8px 12px; border-radius: 14px; }
  .honk-lights .hl-row i { width: 34px; height: 34px; }
  .honk-lights .hl-word { font-size: 22px; }
  /* Level with the meter and the lights, not under them: a longer line from
     the other driver than the sample ran down onto the tach at the larger
     gauge sizes. */
  /* The name on the line with what they say, and the box a little wider: on
     the larger gauge sizes a third line ran down onto the tach. */
  .honk-talk, .honk-talk.low { left: auto; right: calc(var(--safe-right) + 10px); transform: none; top: calc(var(--safe-top) + 164px); max-width: min(300px, 40vw); font-size: 12px; line-height: 1.3; padding: 6px 10px; text-align: left; }
  .honk-talk b { display: inline; margin-right: 6px; }
  .honk-coach, .honk-coach.up { top: calc(var(--safe-top) + 6px); bottom: auto; width: min(440px, calc(100vw - var(--safe-left) - var(--safe-right) - 240px)); font-size: 15px; padding: 8px 12px; }
  #app:has(#honk-coach:not([hidden])) #hud-time-box, #app:has(#honk-coach:not([hidden])) .hud-egt { visibility: hidden; }
}
/* One notice strip at a time on the home screen, the first that has
   something to say: keeping the game, the in-app browser, then New here.
   Three of them stacked above the race doors read as a wall of warnings. */
#screen-menu .menu-strip:not([hidden]) ~ .menu-strip { display: none !important; }
#screen-menu.menu-fresh #menu-week-section,
#screen-menu.menu-fresh #menu-dyno-section,

/* The kinds read as tabs over the list: the one on show underlined, not
   filled, so the only filled button is the wheel on the car. At the end of the
   file, and one attribute heavier than the garage's :is(...) .seg .btn.on. */
#screen-garage .seg.wheel-kinds .btn[data-wheel-kind] { background: transparent; box-shadow: none; color: var(--bl-muted); }
#screen-garage .seg.wheel-kinds .btn.on[data-wheel-kind] { background: rgba(255,255,255,0.08); color: #fff; box-shadow: inset 0 -3px 0 var(--bl-orange); }

/* A picture of the car on the pre-race sheet (Donk Roll: the donk in its theme). */
/* The Donk Roll showroom on the tune sheet: the car under a spotlight on a
   glossy floor, its theme's color glowing behind it, and a name plate in the
   theme's own lettering. Swipe, the arrows or the dots move along the floor. */
.pretune-show { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pretune-show[hidden] { display: none; }
.show-stage { --glow: #d61e3b; position: relative; width: 100%; max-width: min(400px, 76vh); aspect-ratio: 2 / 1; border-radius: 14px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  background: radial-gradient(120% 70% at 50% 0%, #2a2f3a 0%, #14171d 55%, #0b0d11 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 -30px 40px rgba(0,0,0,0.5); }
.show-stage.dragging { cursor: grabbing; }
.show-light { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38% 34% at 50% 58%, var(--glow-soft, rgba(214,30,59,0.42)) 0%, transparent 100%),
    conic-gradient(from 180deg at 50% -8%, transparent 0deg 160deg, rgba(255,255,255,0.10) 172deg, rgba(255,255,255,0.16) 180deg, rgba(255,255,255,0.10) 188deg, transparent 200deg 360deg);
  transition: background 0.35s ease; }
.show-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 30%, transparent 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 48px);
  border-top: 1px solid rgba(255,255,255,0.10); }
.show-floor::after { content: ''; position: absolute; left: 18%; right: 18%; top: 4%; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,0.13), transparent); }
.show-track { position: absolute; inset: 0; display: flex; transition: transform 0.35s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.show-stage.dragging .show-track { transition: none; }
.show-slide { flex: 0 0 100%; position: relative; }
.show-slide img { position: absolute; left: 1%; width: 98%; bottom: -4%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
/* The floor's reflection: the same picture turned over at the tires (74% of
   the way down the art) and faded out away from them. */
.show-slide img.mirror { transform: scaleY(-1); transform-origin: 50% 74.5%; opacity: 0.9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.34) 74.5%); mask-image: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.34) 74.5%); }
.show-count { position: absolute; top: 8px; right: 10px; font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); font-family: var(--nums); font-variant-numeric: tabular-nums; pointer-events: none; }
.show-plate { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; width: 100%; max-width: min(400px, 76vh); min-height: 40px; }
.show-plate b { font-size: 26px; font-weight: 400; line-height: 1.1; letter-spacing: 0.02em; text-align: center; overflow-wrap: anywhere; }
.show-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; padding: 0 0 3px; cursor: pointer; }
.show-dots { display: flex; gap: 6px; justify-content: center; }
.show-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,0.22); cursor: pointer; }
.show-dots button.on { background: var(--glow, #fff); box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
.pretune-art { display: block; width: 100%; max-width: 380px; height: auto; aspect-ratio: 2 / 1; object-fit: contain; margin: 0 auto 4px; }

/* The tire picker (js/ui.js pickTires) and the tire on the Tune tab. Each
   tire is drawn front on, to one scale, so a 235 reads skinny beside a
   33x10.5 without a word said. */
.modal-card.tires-card { width: min(460px, 94vw); max-height: 88vh; overflow-y: auto; }
.modal-card.tires-card > * { flex-shrink: 0; }
.tire-kinds { display: grid; grid-template-columns: repeat(3, 1fr); }
.tire-grid { display: flex; flex-direction: column; gap: 6px; }
.tire-group { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-muted); margin: 6px 2px 0; }
.tire-tile { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; text-align: left; background: var(--bl-panel); border: 2px solid var(--bl-line); border-radius: 10px; padding: 6px 10px; color: var(--bl-text); font: inherit; cursor: pointer; }
.tire-tile.on { border-color: var(--bl-orange); }
.tire-tile svg { grid-row: span 2; width: 30px; height: 56px; justify-self: center; }
.tire-tile b { font-family: var(--nums); font-size: 15px; line-height: 1.15; white-space: nowrap; }
.tire-tile .tire-line { grid-column: 2; font-size: 11px; color: var(--bl-muted); line-height: 1.25; }
.tire-tile .tire-line .hot { color: #ff8a9b; font-weight: 700; }
.tire-chips { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tire-chips span { font-family: var(--nums); font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.07); color: var(--bl-text); white-space: nowrap; }
.tire-pick { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.tire-pick span { font-family: var(--nums); font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.07); }
.tire-pick span.gear { background: rgba(52,199,89,0.14); color: #7fe39a; }
.tire-now { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; width: 100%; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; padding: 6px 10px; color: var(--bl-text); font: inherit; text-align: left; cursor: pointer; }
.tire-now svg { width: 30px; height: 52px; }
.tire-now b { display: block; font-family: var(--nums); font-size: 14px; }
.tire-now small { display: block; color: var(--bl-muted); font-size: 11px; margin-top: 2px; }
.tire-now em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--bl-orange); }
.tire-now.static { cursor: default; grid-template-columns: 30px 1fr; }
.tire-fit { font-size: 12px; color: var(--bl-muted); margin: 4px 2px 0; }

/* The Tune tab (Kirk: no clutter, like a high end game). The live numbers
   and the four parts stay pinned at the top of the page; each setting is its
   name, its number and its control, and what it does is a tap on the name
   away. */
#garage-tune .tune-head { position: sticky; top: -12px; z-index: 3; margin: -12px -14px 10px; padding: 10px 14px 8px; background: var(--bl-ink); border-bottom: 1px solid var(--bl-line); display: grid; grid-template-columns: 1fr auto; gap: 8px; }
#garage-tune .tune-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#garage-tune .tune-stats > div { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 5px 8px; border-radius: 8px; background: var(--bl-panel); border: 1px solid var(--bl-line); }
#garage-tune .tune-stats span { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
#garage-tune .tune-stats b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 17px; line-height: 1.15; color: var(--bl-text); }
#garage-tune .tune-stats i { font-style: normal; font-family: var(--nums); font-size: 10px; font-weight: 700; line-height: 1; }
#garage-tune .tune-stats i.up { color: #57d97a; }
#garage-tune .tune-stats i.down { color: #ff6b7f; }
#garage-tune .tune-stats .estimate-warn { grid-column: 1 / -1; min-height: 0; font-size: 12px; color: #ffb020; background: rgba(255,176,32,0.1); border-color: rgba(255,176,32,0.35); }
#garage-tune .tune-setups-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 58px; border-radius: 8px; border: 1px solid var(--bl-line); background: var(--bl-panel); color: var(--bl-text); font: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
#garage-tune .tune-setups-btn.on { border-color: var(--bl-orange); color: #fff; background: rgba(214,30,59,0.16); }
#garage-tune .tune-subs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); }
#garage-tune .tune-setups { margin: 0 0 12px; padding: 10px 12px 12px; border-radius: 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); }
#garage-tune .tune-setups .section-title { margin-top: 4px; }
#garage-tune .tune-panel { display: flex; flex-direction: column; gap: 6px; }
#garage-tune .tune-panel[hidden] { display: none; }
#garage-tune .tune-panel .tune-row.has-help > label { cursor: pointer; }
#garage-tune .tune-panel .tune-row.has-help > label > small:not(.keep) { display: none; }
#garage-tune .tune-panel .tune-row.has-help.help > label > small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--bl-muted); }
#garage-tune .hint-i { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--bl-line); font-family: Georgia, serif; font-style: italic; font-size: 10px; font-weight: 700; line-height: 1; color: var(--bl-muted); vertical-align: 1px; }
#garage-tune .tune-row.help .hint-i { border-color: var(--bl-orange); color: var(--bl-orange); }
#garage-tune .tune-graph { margin: 0 0 4px; }
/* A page of settings wants the room more than the car does: the stage is
   smaller on the Tune and Setup tabs, unless the panel has been dragged to a
   size of the player's own (an inline --garage-stage wins). */
#app[data-gtab="tune"], #app[data-gtab="turbo"] { --garage-stage: 18vh; }
/* The Car tab, in parts like the Tune tab: a slim car picker with the list's
   filter folded behind one button, then Overview / Build / Health / Setups
   with the tabs pinned while the part under them scrolls. */
#garage-car .car-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; margin-bottom: 8px; }
#garage-car .car-pick .car-jump { margin: 0; }
#garage-car .car-pick .car-jump select { height: 100%; }
#garage-car .car-filter-btn { display: flex; align-items: center; gap: 7px; min-width: 104px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--bl-line); background: #0e1116; color: var(--bl-text); font: inherit; text-align: left; cursor: pointer; }
#garage-car .car-filter-btn svg { flex: none; color: var(--bl-muted); }
#garage-car .car-filter-btn span { display: flex; flex-direction: column; line-height: 1.15; }
#garage-car .car-filter-btn b { font-size: 12px; white-space: nowrap; }
#garage-car .car-filter-btn small { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--bl-muted); white-space: nowrap; }
#garage-car .car-filter-btn.on { border-color: var(--bl-orange); background: rgba(214,30,59,0.16); }
#garage-car .car-filter-btn.on svg { color: var(--bl-orange); }
#garage-car .car-filter { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); }
#garage-car .car-filter[hidden] { display: none; }
#garage-car .car-filter .setup-head.class-view { margin: 4px 0 0; }
#garage-car .car-subs { position: sticky; top: -12px; z-index: 3; display: grid; grid-template-columns: repeat(var(--subs, 4), minmax(0, 1fr)); margin: 0 -14px 10px; padding: 8px 14px; background: var(--bl-ink); border-bottom: 1px solid var(--bl-line); }
#garage-car .car-subs .btn { position: relative; padding: 4px 6px; }
#garage-car .sub-dot { position: absolute; top: 5px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #ffb84d; box-shadow: 0 0 0 2px var(--bl-ink); }
#garage-car .sub-dot.bad { background: #ff4d63; }
#garage-car .car-panel[hidden] { display: none; }
#garage-car .car-panel > .health:first-child { margin-top: 0; }
/* The build's numbers over the parts, with how far the parts moved them. */
#garage-car .car-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
#garage-car .car-stats > div { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 5px 8px; border-radius: 8px; background: var(--bl-panel); border: 1px solid var(--bl-line); }
#garage-car .car-stats span { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
#garage-car .car-stats b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 16px; line-height: 1.15; color: var(--bl-text); white-space: nowrap; }
#garage-car .car-stats b small { font-size: 9.5px; font-weight: 700; color: var(--bl-muted); margin-left: 2px; }
#garage-car .car-stats i { font-style: normal; font-family: var(--nums); font-size: 10px; font-weight: 700; line-height: 1; }
#garage-car .car-stats i.up { color: #57d97a; }
#garage-car .car-stats i.down { color: #ff6b7f; }
/* Each kind of part is one row saying what is in the car; a tap opens it. */
#garage-car .swap-parts { display: flex; flex-direction: column; border-radius: 10px; border: 1px solid var(--bl-line); background: var(--bl-panel); overflow: hidden; }
#garage-car .swap-head { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 12px 12px; border: 0; border-top: 1px solid var(--bl-line); background: none; font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-orange); text-align: left; cursor: pointer; }
#garage-car .swap-head:first-child { border-top: 0; }
#garage-car .swap-head::after { content: ''; width: 7px; height: 7px; margin-top: -4px; justify-self: center; border-right: 2px solid var(--bl-muted); border-bottom: 2px solid var(--bl-muted); transform: rotate(45deg); transition: transform 160ms ease; }
#garage-car .swap-head.open { background: rgba(255,255,255,0.03); }
#garage-car .swap-head.open::after { margin-top: 3px; transform: rotate(-135deg); border-color: var(--bl-orange); }
#garage-car .swap-head .swap-now { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--bl-text); line-height: 1.25; }
#garage-car .swap-head small { font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--bl-muted); white-space: nowrap; }
#garage-car .swap-list { margin: 0; padding: 2px 10px 12px; gap: 6px; background: rgba(255,255,255,0.03); }
#garage-car .swap-list[hidden] { display: none; }
#garage-car .swap-card { background: #14171c; }
#garage-car .swap-body { min-width: 0; flex: 1; }
#garage-car .swap-body[data-swap-more] { cursor: pointer; }
#garage-car .swap-body[data-swap-more] > b::after { content: 'i'; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--bl-line); font-family: Georgia, serif; font-style: italic; font-size: 9.5px; font-weight: 700; line-height: 1; color: var(--bl-muted); vertical-align: 1px; }
#garage-car .swap-card.more .swap-body > b::after { border-color: var(--bl-orange); color: var(--bl-orange); }
#garage-car .swap-card .swap-body > p { display: none; font-size: 12px; line-height: 1.4; }
#garage-car .swap-card.more .swap-body > p { display: block; margin-top: 6px; }
#garage-car .build-foot { margin-top: 10px; }
/* The car keeps the room on the overview and gives it up to the lists. */
#app[data-gtab="car"]:not([data-csub="overview"]) { --garage-stage: 18vh; }
/* A donk's Paint and Wheels tabs: themes as pictures of the car in each, its
   30s as a list. Two across on a phone, so a picture is big enough to read. */
.donk-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .donk-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.donk-theme { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--bl-line); border-radius: 10px; background: #14171c; color: var(--bl-text); font: inherit; text-align: left; overflow: hidden; cursor: pointer; }
.donk-theme img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0e1116; }
.donk-theme span { display: flex; align-items: center; gap: 5px; padding: 7px 9px; }
.donk-theme b { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.2; }
.donk-theme i { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.donk-theme.on { border-color: var(--bl-orange); box-shadow: inset 0 0 0 1px var(--bl-orange); }
.donk-wheels { display: flex; flex-direction: column; border: 1px solid var(--bl-line); border-radius: 10px; background: var(--bl-panel); overflow: hidden; }
.donk-wheel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 0; border-top: 1px solid var(--bl-line); background: none; color: var(--bl-text); font: inherit; text-align: left; cursor: pointer; }
.donk-wheel:first-child { border-top: 0; }
.donk-wheel b { font-size: 14px; }
.donk-wheel small { font-size: 11px; color: var(--bl-muted); }
.donk-wheel.on { background: rgba(214,30,59,0.14); box-shadow: inset 3px 0 0 var(--bl-orange); }
.donk-wheel-note { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--bl-muted); }
.donk-wheel-note i { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.donk-wheel-note b { color: var(--bl-text); }
/* The nitrous sheet (js/ui.js pickNitrous): the three numbers a tuner
   watches pinned on top, then the kit in sections, each a few controls and
   one line of why. Off, the sections dim but stay readable. */
.modal-card.n2o-card { width: min(480px, 94vw); max-height: 90vh; overflow-y: auto; gap: 10px; }
.modal-card.n2o-card > * { flex-shrink: 0; }
.n2o-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.n2o-top h2 { margin: 0; }
/* Pinned over the card's own 20px padding, so nothing scrolls past above it. */
.n2o-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; position: sticky; top: -20px; z-index: 2; background: var(--bl-ink, #0f1115); margin: -14px -20px 0; padding: 14px 20px 8px; box-shadow: 0 6px 10px -8px rgba(0,0,0,0.6); }
.n2o-live > div { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 9px; background: var(--bl-panel); border: 1px solid var(--bl-line); min-width: 0; }
.n2o-live span { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.n2o-live b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 19px; line-height: 1.1; color: var(--bl-text); white-space: nowrap; }
.n2o-live b small { font-size: 10px; color: var(--bl-muted); margin-left: 3px; }
.n2o-live em { font-style: normal; font-size: 11px; color: var(--bl-muted); line-height: 1.3; }
.n2o-chip { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.07); color: var(--bl-muted); }
.n2o-chip.good { background: rgba(52,199,89,0.14); color: #7fe39a; }
.n2o-chip.warn { background: rgba(255,176,32,0.14); color: #ffc45a; }
.n2o-chip.bad { background: rgba(255,77,99,0.16); color: #ff8a9b; }
.n2o-sec { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); }
.n2o-sec.off { opacity: 0.55; }
.n2o-sec h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-orange); }
.n2o-sec .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.n2o-say { margin: 0; font-size: 12px; line-height: 1.45; color: var(--bl-muted); }
.n2o-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; }
.n2o-row label { font-size: 13px; color: var(--bl-text); }
.n2o-row output { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--bl-text); }
.n2o-row input[type=range] { grid-column: 1 / -1; width: 100%; }
.n2o-graph { width: 100%; height: 75px; border-radius: 8px; background: #0e1116; }
.n2o-gauge { height: 8px; border-radius: 999px; background: #0e1116; border: 1px solid var(--bl-line); overflow: hidden; }
.n2o-gauge i { display: block; height: 100%; background: linear-gradient(90deg, #2f7fd0, #4aa8ff); }
.n2o-sec .btn.small { align-self: flex-start; }
.tire-now.n2o-now em.bad { color: #ff8a9b; }

/* Real heads-up classes (js/classrules.js): the bar on the Tune tab and the
   sheet behind it. One line says the class and whether the car is legal in
   it; the sheet lists every class, and a class opens as its tech card. */
#garage-tune .cls-bar { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; width: 100%; margin: 0 0 10px; padding: 8px 12px; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; color: var(--bl-text); font: inherit; text-align: left; cursor: pointer; }
.cls-bar .cls-k { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.cls-bar .cls-v { min-width: 0; }
.cls-bar .cls-v b { display: block; font-size: 15px; line-height: 1.2; }
.cls-bar .cls-v small { display: block; font-size: 11px; color: var(--bl-muted); margin-top: 1px; }
.cls-bar .cls-chev { color: var(--bl-muted); }
.cls-pill { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.cls-pill.ok { color: #57d97a; background: rgba(87, 217, 122, 0.12); border-color: rgba(87, 217, 122, 0.35); }
.cls-pill.fix { color: #ffb547; background: rgba(255, 181, 71, 0.12); border-color: rgba(255, 181, 71, 0.35); }
.cls-pill.no { color: var(--bl-muted); background: rgba(255, 255, 255, 0.04); border-color: var(--bl-line); }
.modal-card.cls-card { width: min(480px, 94vw); max-height: 90vh; overflow-y: auto; gap: 10px; }
.modal-card.cls-card > * { flex-shrink: 0; }
.cls-body { display: flex; flex-direction: column; gap: 10px; }
.cls-lede { margin: 0; font-size: 13px; line-height: 1.45; color: var(--bl-muted); }
.cls-list { display: flex; flex-direction: column; gap: 6px; }
.cls-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 10px; color: var(--bl-text); font: inherit; text-align: left; cursor: pointer; }
.cls-row.on { border-color: var(--bl-orange); }
.cls-row .cls-name b { display: block; font-size: 15px; }
.cls-row .cls-name small { display: block; font-size: 11px; color: var(--bl-muted); margin-top: 2px; }
.cls-row .cls-name em { font-style: normal; color: var(--bl-orange); font-weight: 700; }
.cls-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13px; }
.cls-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cls-head b { display: block; font-size: 18px; line-height: 1.2; }
.cls-head small { display: block; font-size: 12px; color: var(--bl-muted); }
.cls-blurb { margin: 0; font-size: 13px; line-height: 1.45; }
.cls-et { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); }
.cls-et span { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.cls-et b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 18px; }
.cls-et small { font-size: 11px; color: var(--bl-muted); margin-top: 1px; }
.cls-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--bl-line); border-radius: 10px; overflow: hidden; }
.cls-checks li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; row-gap: 6px; align-items: start; padding: 9px 12px; background: var(--bl-panel); }
.cls-checks li + li { border-top: 1px solid var(--bl-line); }
.cls-checks .cls-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; }
.cls-checks li.ok .cls-ic { color: #57d97a; background: rgba(87, 217, 122, 0.12); }
.cls-checks li.bad .cls-ic { color: #ff6b7f; background: rgba(255, 107, 127, 0.12); }
.cls-checks b { display: block; font-size: 13px; }
.cls-checks small { display: block; font-size: 12px; line-height: 1.4; color: var(--bl-muted); margin-top: 2px; overflow-wrap: anywhere; }
.cls-checks small em { font-style: normal; color: var(--bl-text); }
.cls-checks .btn.small { grid-column: 2; justify-self: start; }
.cls-action .btn.primary { width: 100%; }
.cls-on, .cls-off { display: flex; align-items: center; gap: 6px; margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.cls-on { color: #57d97a; background: rgba(87, 217, 122, 0.08); border: 1px solid rgba(87, 217, 122, 0.3); }
.cls-off { color: var(--bl-muted); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--bl-line); }
.cls-more { font-size: 12px; color: var(--bl-muted); }
.cls-more summary { cursor: pointer; font-weight: 700; color: var(--bl-text); }
.cls-more ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
.cls-src { margin: 0; }

/* The class boards on the leaderboard (renderClassBoard): the classes in one
   row, the class against the real thing, the player's own car in it, and a
   row per racer with the build it ran on. */
.lb-cls { display: flex; flex-direction: column; gap: 10px; }
.lb-cls-pick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; -webkit-overflow-scrolling: touch; }
.lb-cls-pick::-webkit-scrollbar { display: none; }
.lb-cls-pick .btn { flex: 0 0 auto; white-space: nowrap; min-height: 34px; padding: 6px 12px; font-size: 13px; }
.lb-cls-pick .btn.on { background: var(--bl-orange); border-color: var(--bl-orange); color: #fff; }
.lb-cls-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bl-panel); border: 1px solid var(--bl-line); }
.lb-cls-name { min-width: 0; }
.lb-cls-name b { display: block; font-size: 17px; line-height: 1.2; }
.lb-cls-name small { display: block; font-size: 12px; color: var(--bl-muted); margin-top: 1px; }
.lb-cls-real { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.lb-cls-real i { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-muted); }
.lb-cls-real b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 20px; line-height: 1.1; }
.lb-cls-real small { font-size: 10px; color: var(--bl-muted); }
.lb-cls-mine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--bl-line); }
.lb-cls-me { min-width: 0; }
.lb-cls-car { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 3px; }
.lb-cls-mine b { font-size: 14px; }
.lb-cls-mine small { display: block; font-size: 12px; line-height: 1.35; color: var(--bl-muted); }
.lb-cls .lb-perf-pick { margin: 0; }
.lb-cls .lb-pane-sub { margin: 0; }
.cls-board { margin: 0; }
.cls-brow { align-items: start; }
.cls-brow .pr-n { padding-top: 2px; }
.cls-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cls-chips i { font-style: normal; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; color: var(--bl-text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; }
.cls-brow .pr-t { display: flex; flex-direction: column; align-items: flex-end; font: 700 24px/1 'Teko', 'Barlow Condensed', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.cls-brow .pr-t small { font-size: 13px; margin-left: 2px; color: var(--bl-muted, #a4abb6); }
.cls-brow .pr-t em { font: 600 11px/1.2 var(--font, system-ui); font-style: normal; color: var(--bl-muted); margin-top: 3px; white-space: nowrap; }
.lb-cls-empty { list-style: none; padding: 14px 12px; border-radius: 10px; border: 1px dashed var(--bl-line); text-align: center; }
.lb-cls-empty b { display: block; font-size: 14px; }
.lb-cls-empty small { display: block; font-size: 12px; color: var(--bl-muted); margin-top: 4px; line-height: 1.4; }
/* After a pass run in a class: legal and on its board, or what was not. */
/* On the paper slip, in the slip's own ink, like the car's rank under it. */
.results-card .cls-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,0.05); color: var(--bl-paper-ink); text-align: left; }
.results-card .cls-result.ok { box-shadow: inset 3px 0 0 #1e9e55; }
.results-card .cls-result.bad { box-shadow: inset 3px 0 0 #b07a12; }
.results-card .cls-result b { display: block; font-size: 15px; line-height: 1.2; }
.results-card .cls-result small { display: block; font-size: 12px; line-height: 1.35; opacity: 0.75; }
.results-card .cls-result .cls-pill.ok { color: #13703b; background: rgba(30, 158, 85, 0.14); border-color: rgba(30, 158, 85, 0.45); }
.results-card .cls-result .cls-pill.no { color: #7a5408; background: rgba(176, 122, 18, 0.14); border-color: rgba(176, 122, 18, 0.45); }
.results-card .cls-result .btn.small { color: var(--bl-paper-ink); border-color: rgba(0,0,0,0.25); background: transparent; }

/* The slip's folds (renderResults): how the pass went, what it wore and the
   performance meter, each a line saying what is in it, open on a tap. Kirk:
   the results slip is super busy now, some of it collapsible or condensed. */
.results-card .slip-folds { margin-top: 12px; border-top: 1px solid rgba(0,0,0,0.12); }
.results-card .slip-fold { border-bottom: 1px solid rgba(0,0,0,0.12); }
.results-card .slip-fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 10px; align-items: center; min-height: 50px; padding: 9px 2px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.results-card .slip-fold .sf-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.results-card .slip-fold > summary::-webkit-details-marker { display: none; }
.results-card .slip-fold .sf-t { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-paper-ink); opacity: 0.7; white-space: nowrap; }
.results-card .slip-fold .sf-d { font-size: 14px; font-weight: 700; color: var(--bl-paper-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.results-card .slip-fold .sf-d .low { color: #c4182f; }
.results-card .slip-fold .sf-d .good { color: #13703b; }
.results-card .slip-fold .sf-chev { color: var(--bl-paper-ink); opacity: 0.55; transition: transform 160ms ease; }
.results-card .slip-fold[open] .sf-chev { transform: rotate(180deg); }
.results-card .slip-fold.warn .sf-t { color: #c4182f; opacity: 1; }
.results-card .slip-fold .sf-body { padding: 0 0 12px; }
.results-card .slip-fold .sf-body .results-grid { margin-top: 0; }
.results-card .slip-fold .perf-meter { margin-top: 0; }
.results-card .slip-fold .perf-meter > header { display: none; }

/* ---- The room on a desk: three panes ----
   Kirk: the chat room on desktop looks cheesy, like a poorly vibe coded app.
   It was a phone layout stretched: the talk floated in a capped column with
   dead glass either side, the box you type in ran the whole width under the
   roster and the callouts, an empty callout board was a pill blown up to the
   height of the screen, and the browser drew its own scrollbar down the
   middle. So from 900px the room is laid out the way a desktop messenger is:
   the conversation with its box at the foot of it, and the callouts as a
   column of their own on the right; from 1200px, with the width for it, the
   roster down the left as well. Each is a pane with a heading, the same
   finish on all of them. The markup is the phone's, untouched; the panes are
   a grid over it. */
.co-panel-head, .co-empty-ico { display: none; }
@media (min-width: 900px) {
  #screen-chat.chat-page {
    display: grid;
    grid-template-columns: [talk-start] minmax(0, 1fr) [talk-end board-start] minmax(290px, 330px) [board-end];
    /* Head, FAQ, the shop's bar, silenced, the nudge; the panes; then what
       sits over the box (typing, the race hint, the reply, the @ list, the
       emoji drawer) and the box. A row with nothing in it is no height. */
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto auto auto auto auto;
    column-gap: 16px; row-gap: 0;
    align-items: stretch; justify-items: stretch;
  }
  #screen-chat > * { grid-column: 1 / -1; min-width: 0; }
  #screen-chat > .sheet-head { grid-row: 1; }
  #screen-chat > .chat-faq { grid-row: 2; }
  #screen-chat > #chat-room-bar { grid-row: 3; }
  #screen-chat > #chat-muted { grid-row: 4; }
  #screen-chat > #chat-nudge { grid-row: 5; }
  #screen-chat > .chat-body { display: contents; }
  #screen-chat > #chat-typing { grid-row: 7; }
  #screen-chat > #chat-race-hint { grid-row: 8; }
  #screen-chat > #chat-reply { grid-row: 9; }
  #screen-chat > #chat-at { grid-row: 10; }
  #screen-chat > #chat-emoji-more { grid-row: 11; }
  #screen-chat > #chat-form { grid-row: 12; }
  #screen-chat > :is(#chat-typing, #chat-race-hint, #chat-reply, #chat-at, #chat-emoji-more, #chat-form) { grid-column: talk; position: relative; z-index: 1; }

  /* The three panes, one finish. The middle one is drawn by the page itself
     behind the talk and the box, so the two read as one pane. */
  #screen-chat::after {
    content: ''; grid-column: talk; grid-row: 6 / 13; z-index: 0;
    border: 1px solid rgba(255,255,255,0.07); border-radius: 14px;
    background: rgba(11,13,17,0.82);
  }
  #screen-chat #chat-rail, #screen-chat #chat-board {
    grid-row: 6 / 13; min-height: 0; margin: 0;
    border: 1px solid rgba(255,255,255,0.07); border-radius: 14px;
    background: rgba(11,13,17,0.82);
  }

  /* The roster. */
  #screen-chat #chat-rail { grid-column: rail; order: 0; display: none; flex-direction: column; gap: 0; padding: 0; overflow-y: auto; }
  #screen-chat #chat-rail h3 { position: sticky; top: 0; z-index: 1; padding: 14px 14px 10px; background: rgba(11,13,17,0.96); border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 11px; letter-spacing: 0.14em; color: var(--bl-muted); }
  #screen-chat #chat-rail h3 em { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.07); color: var(--bl-text); font-size: 11px; font-weight: 700; letter-spacing: 0; text-align: center; }
  #screen-chat #chat-rail .who-list { padding: 8px; gap: 2px; }
  #screen-chat #chat-rail .who-row { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; padding: 7px 8px; border-radius: 10px; }
  #screen-chat #chat-rail .who-row:hover { background: rgba(255,255,255,0.05); }
  #screen-chat #chat-rail .who-row.mine { background: rgba(214,30,59,0.12); }
  #screen-chat #chat-rail .who-row .avatar, #screen-chat #chat-rail .who-row .chat-face { width: 32px; height: 32px; }
  /* A name is never cut off: it takes a second line if it has to. */
  #screen-chat #chat-rail .who-row b { font-size: 13.5px; font-weight: 700; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  #screen-chat #chat-rail .who-row small { font-size: 11.5px; line-height: 1.3; color: var(--bl-dim); }
  #screen-chat #chat-rail .fine { padding: 4px 8px; }

  /* The conversation: the whole middle pane, the box at its foot. */
  #screen-chat #chat-stream { grid-column: talk; grid-row: 6; position: relative; z-index: 1; max-width: none; margin: 0; border: 0; padding: 18px 24px 10px; }
  #screen-chat .chat-stream > .chat-line { max-width: min(62%, 620px); }
  #screen-chat .chat-stream > .chat-line.photo { max-width: min(62%, 420px); }
  #screen-chat #chat-jump { grid-column: talk; grid-row: 6; z-index: 3; position: relative; left: auto; bottom: auto; transform: none; align-self: end; justify-self: center; margin-bottom: 12px; }
  #screen-chat > #chat-typing { padding: 0 24px 4px; }
  #screen-chat > :is(#chat-race-hint, #chat-reply, #chat-at, #chat-emoji-more) { margin: 0 16px 8px; }
  #screen-chat > #chat-form { padding: 12px 16px 14px; border-top: 1px solid rgba(255,255,255,0.06); }
  #screen-chat .chat-say .chat-box textarea { background: #161a21; }

  /* The callouts: a pane with a heading and the one way to put one up. */
  #screen-chat #chat-board { grid-column: board; display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; }
  #screen-chat #chat-board[hidden] { display: flex; }
  #screen-chat #chat-board .co-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 3; flex: none; margin: 0 -12px; padding: 10px 12px 10px 14px; min-height: 52px; box-sizing: border-box;
    background: rgba(11,13,17,0.96); border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  #screen-chat #chat-board .co-panel-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-muted); }
  #screen-chat #chat-board .co-panel-head h3 em { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: rgba(214,30,59,0.18); color: #ff8fa3; font-style: normal; font-size: 11px; letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; }
  #screen-chat #chat-board .co-panel-head .btn { min-height: 32px; padding: 5px 14px; font-size: 13px; }
  #screen-chat #chat-board .co-fold { display: none; }
  #screen-chat #chat-board .chat-line { flex: none; max-width: none; margin: 0; }
  /* A card read down a column: the tag and the clock across the top, the
     distance and the stake on one line, what the winner takes under them. */
  #screen-chat #chat-board .co-top { flex-wrap: nowrap; }
  #screen-chat #chat-board .co-top > span:not(.co-tag) { margin-right: auto; }
  #screen-chat #chat-board .co-main { flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 1px; margin: 4px 0 8px; }
  #screen-chat #chat-board .co-main b, #screen-chat #chat-board .co-main em { white-space: nowrap; }
  #screen-chat #chat-board .co-main small { flex-basis: 100%; margin-left: 0; white-space: normal; }
  /* Nothing up: an empty state, not a pill stretched to the floor. */
  #screen-chat #chat-board.empty .chat-board-cta {
    flex: none; flex-direction: column; align-items: center; text-align: center; gap: 12px;
    margin: 28px 4px 0; padding: 26px 18px 22px; max-width: none;
    border: 1px dashed rgba(255,255,255,0.12); border-radius: 12px; background: rgba(255,255,255,0.02);
  }
  #screen-chat #chat-board.empty .co-empty-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(214,30,59,0.14); color: #ff6f88; }
  #screen-chat #chat-board.empty .chat-board-cta p { display: flex; flex-direction: column; gap: 4px; flex: none; white-space: normal; overflow: visible; }
  #screen-chat #chat-board.empty .chat-board-cta p b { font-size: 15px; }
  #screen-chat #chat-board.empty .chat-board-cta p span { display: block; font-size: 13px; line-height: 1.45; color: var(--bl-muted); }
  #screen-chat #chat-board.empty .chat-board-cta .btn { padding: 7px 20px; }

  /* The header's Call out lives on the callout pane here: one button for it
     on the screen, where the callouts are, not two. */
  #screen-chat #chat-callout { display: none; }

  /* Scrollbars that belong to the room rather than to the browser. */
  #screen-chat :is(#chat-stream, #chat-rail, #chat-board) { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
  #screen-chat :is(#chat-stream, #chat-rail, #chat-board)::-webkit-scrollbar { width: 8px; height: 8px; }
  #screen-chat :is(#chat-stream, #chat-rail, #chat-board)::-webkit-scrollbar-track { background: transparent; }
  #screen-chat :is(#chat-stream, #chat-rail, #chat-board)::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
  #screen-chat :is(#chat-stream, #chat-rail, #chat-board)::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.24); }
}
/* The roster, once there is the width for three panes. */
@media (min-width: 1200px) {
  #screen-chat.chat-page { grid-template-columns: [rail-start] minmax(210px, 250px) [rail-end talk-start] minmax(0, 1fr) [talk-end board-start] minmax(300px, 350px) [board-end]; }
  #screen-chat #chat-rail { display: flex; }
}

/* ---- Carbon: the finish on every button ----
   Kirk: all of the buttons just seem so plain Jane. Would it be worth redoing
   all the buttons to give it a much better feel and look like a professional
   video game. Of three looks drawn on his results screen he took Carbon, with
   the corners cut as they are. So a button keeps its shape and gets a build:
   the one to press is lit from the top with a speed stripe at its tail, a big
   one beside it is carbon with a lit edge and a red bar down its leading side,
   a small one is carbon with the lit edge alone, and a press sinks.

   These sit at the specificity of .btn itself on purpose. Anything that styles
   a particular button (a lit tab, a switch, a danger button, the menu's art
   tiles) is more specific and keeps its own look; this replaces only the flat
   gray that was under everything else. The bar and the stripe are layers of
   the background, not pseudo-elements, so they cannot collide with a button
   that already draws something of its own. */
:root {
  --carbon: linear-gradient(180deg, #2a2f38 0%, #1b1e24 100%);
  --carbon-press: linear-gradient(180deg, #1b1e24 0%, #16191e 100%);
  --carbon-bar: linear-gradient(var(--bl-orange), var(--bl-orange)) left 0 top 10px / 3px calc(100% - 20px) no-repeat;
  --lit: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 46%);
  --redline: linear-gradient(100deg, #ef2a49 0%, #c4162f 55%, #8f0f22 100%);
  --stripe: repeating-linear-gradient(110deg, rgba(255,255,255,0.5) 0 4px, rgba(255,255,255,0) 4px 10px) right 16px center / 44px 18px no-repeat;
}
/* A button in a row of tabs or a switch is a choice, not an action: carbon,
   but no bar down its side. */
.btn:where(:not(.primary, .icon, .tile, .link, .linkish, .danger, .ghost, .on)) {
  background: var(--carbon-bar), var(--carbon);
  border-color: rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn.small:where(:not(.primary, .icon, .tile, .link, .linkish, .danger, .ghost, .on)),
.btn:where(:is(.seg, [class*="tabs"], [role="tablist"]) *):where(:not(.primary, .icon, .tile, .link, .linkish, .danger, .ghost, .on)) { background: var(--carbon); }
.btn:where(:not(.primary, .icon, .tile, .link, .linkish, .danger, .ghost, .on)):active { background: var(--carbon-press); box-shadow: inset 0 2px 4px rgba(0,0,0,0.35); }
.btn.primary { background: var(--lit), var(--redline); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -3px 0 rgba(0,0,0,0.22); }
/* The stripe wants room: on a narrow button it runs into the name. So it is
   for the wide ones, the way on across the foot of a sheet. */
.btn.primary:where(.wide, .big):where(:not(.small, .icon, .tile)) { background: var(--stripe), var(--lit), var(--redline); }
.btn.primary:active { background: linear-gradient(100deg, #c81f3e 0%, #9d1328 100%); box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); }

/* ---- Carbon on the results sheet: each button says what it is ----
   The way on is lit with an arrow; the rest are a red icon, the name, and a
   short line under it. The icon and the line are drawn from the stylesheet
   and a data-sub attribute, because the names are rewritten from code (Next
   run, 2 of 3; Back to the bleachers, 5) and anything inside the button
   would go with them. The places to go are a row of tabs, not more buttons. */
#btn-next-event { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h11l-2 4 2 4H5'/%3E%3C/svg%3E"); }
#btn-rematch { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3-3M20 16H6l3 3'/%3E%3C/svg%3E"); }
#btn-results-index { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h0M4 12h0M4 18h0'/%3E%3C/svg%3E"); }
#btn-results-dyno { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16a8 8 0 1 1 16 0'/%3E%3Cpath d='M12 16l4-5'/%3E%3C/svg%3E"); }
#btn-results-room { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
#btn-retry { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7M4 4v4h4'/%3E%3C/svg%3E"); }
#btn-tune { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
#btn-replay { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7M4 4v4h4'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E"); }
#btn-video { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3'/%3E%3C/svg%3E"); }
#btn-share { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 8l5-5 5 5M5 14v5h14v-5'/%3E%3C/svg%3E"); }
#btn-results-garage { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-6 9 6v9H3z'/%3E%3Cpath d='M8 20v-5h8v5'/%3E%3C/svg%3E"); }
#btn-garage-turbos { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.5 12h-13z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
#btn-results-leaderboard { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0zM6 5H4v2a3 3 0 0 0 4 3M18 5h2v2a3 3 0 0 1-4 3M12 13v4M8 20h8'/%3E%3C/svg%3E"); }
#screen-results#screen-results .results-actions .btn::before {
  content: ''; flex: none; width: 20px; height: 20px; background: #ff5a73;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
#screen-results#screen-results .results-actions .btn.primary::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); width: 22px; height: 22px; background: #fff; }
#screen-results#screen-results .results-actions .btn:not(.primary) {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "ico name" "ico sub";
  column-gap: 12px; row-gap: 2px; align-content: center; justify-content: stretch; justify-items: start;
  min-height: 62px; padding: 10px 12px 10px 16px; text-align: left; line-height: 1.05;
}
#screen-results#screen-results .results-actions .btn:not(.primary)::before { grid-area: ico; align-self: center; }
#screen-results#screen-results .results-actions .btn:not(.primary)[data-sub]::after {
  content: attr(data-sub); grid-area: sub;
  font-family: var(--game); font-style: normal; font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em; text-transform: none; color: var(--gmute, #9aa0aa);
}
#screen-results#screen-results .results-links { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 10px; }
#screen-results#screen-results .results-links .btn {
  flex-direction: column; gap: 5px; min-height: 58px; padding: 6px 2px; clip-path: none; border: 0; border-radius: 10px;
  background: none; box-shadow: none; color: #aeb4bd;
  font-style: normal; font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em;
}
#screen-results#screen-results .results-links .btn::before {
  content: ''; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
#screen-results#screen-results .results-links [data-nav="menu"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
#screen-results#screen-results .results-links .btn:active { background: rgba(255,255,255,0.06); color: #fff; }

/* ---- Live Track ----
   Kirk: how can we create a live track that players could join and race each
   other live? The screen is a stack of cards in the order a racer reads it:
   anything waiting on them (a call-out), the pair on the track, their own
   place, who is next, the pits, and tonight. Every card the same finish as
   the rest of the game; the one thing to press on each is the lit button. */
.live, .live-main, .live-side { display: flex; flex-direction: column; gap: 10px; }
/* On a desk: what to do down the left, who is here and tonight down the right. */
@media (min-width: 1100px) {
  #screen-live.screen.sheet > :is(.loadout, .live) { max-width: 1180px; width: 100%; }
  .live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: start; gap: 12px; }
}
.live-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.live-card header h3 { margin: 0; font-family: var(--game); font-style: italic; font-weight: 900; font-size: 19px; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.live-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); font-family: var(--game); font-weight: 800; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gmute, #9aa0aa); white-space: nowrap; }
.live-state b { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0; color: #ffc21a; }
.live-state.called { color: #ffc21a; border-color: rgba(255,194,26,0.4); background: rgba(255,194,26,0.08); }
.live-state.racing { color: #fff; border-color: transparent; background: var(--bl-orange); }
.live-track { border-color: rgba(214,30,59,0.35); background: linear-gradient(180deg, rgba(214,30,59,0.12), rgba(214,30,59,0) 60%), var(--bl-panel); }
.live-track.clear { border-color: var(--bl-line); background: var(--bl-panel); }
.live-track.mine { border-color: var(--bl-orange); box-shadow: 0 0 0 1px rgba(214,30,59,0.35), 0 10px 30px rgba(214,30,59,0.15); }
.live-lane { display: grid; grid-template-columns: 26px 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,0.25); }
.live-lane > i { font-style: normal; font-family: var(--game); font-weight: 900; font-size: 13px; color: var(--gmute, #9aa0aa); }
.live-lane .chat-face { width: 28px; height: 28px; }
.live-lane span { display: flex; flex-direction: column; min-width: 0; }
.live-lane b { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.live-lane small { font-size: 12px; color: var(--bl-muted); }
.live-lane em { font-style: normal; font-family: var(--game); font-weight: 800; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-ok, #6ee89b); }
.live-lane.staged { box-shadow: inset 3px 0 0 var(--bl-ok, #6ee89b); }
.live-vs { margin: 4px 0; text-align: center; font-family: var(--game); font-style: italic; font-weight: 900; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gmute, #9aa0aa); }
.live-act { display: flex; gap: 8px; margin-top: 10px; }
.live-act .btn { flex: 1 1 0; }
.live-act .fine { margin: 0; }
.live-big { margin: 2px 0 6px; font-size: 16px; }
.live-big b { font-weight: 800; }
.live-callout { border-color: rgba(255,194,26,0.5); background: linear-gradient(180deg, rgba(255,194,26,0.10), rgba(255,194,26,0) 60%), var(--bl-panel); }
.live-pits, .live-queue, .live-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.live-pits li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.live-pits li.mine { background: rgba(214,30,59,0.10); }
.live-pits .chat-face { width: 28px; height: 28px; }
.live-pits span { display: flex; flex-direction: column; min-width: 0; }
.live-pits b { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.live-pits small { font-size: 12px; color: var(--bl-muted); }
.live-pits em { font-style: normal; font-size: 12px; color: var(--gmute, #9aa0aa); white-space: nowrap; }
.live-pits em.live-wait { color: #ffc21a; }
.live-pits .btn.small { min-height: 34px; padding: 4px 14px; font-size: 14px; }
.live-queue li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,0.2); font-size: 14px; }
.live-queue li i { font-style: normal; font-family: var(--nums); font-weight: 800; color: var(--gmute, #9aa0aa); }
.live-queue li em, .live-recent li > i { font-style: normal; font-size: 11.5px; color: var(--gmute, #9aa0aa); }
.live-recent li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; background: rgba(0,0,0,0.2); }
.live-recent li span { display: flex; flex-direction: column; min-width: 0; }
.live-recent li span:last-child { text-align: right; }
.live-recent li b { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; color: var(--bl-muted); }
.live-recent li small { font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--gmute, #9aa0aa); }
.live-recent li span.won b { color: #fff; }
.live-recent li span.won b::after { content: ' W'; font-family: var(--game); font-weight: 900; font-size: 11px; color: var(--bl-ok, #6ee89b); }
.live-shop .seg { display: flex; gap: 6px; }
.live-shop .seg .btn { flex: 1 1 0; }
#screen-live .sheet-brand { display: flex; flex-direction: column; align-items: center; }
#screen-live .sheet-brand em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--bl-muted); }
.live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(214,30,59,0.16); border: 1px solid rgba(214,30,59,0.5); font-family: var(--game); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #ff8fa3; }
.live-badge i, .menu-live .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bl-orange); box-shadow: 0 0 0 0 rgba(214,30,59,0.6); animation: live-pulse 1.6s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(214,30,59,0.6); } 70% { box-shadow: 0 0 0 8px rgba(214,30,59,0); } 100% { box-shadow: 0 0 0 0 rgba(214,30,59,0); } }
@media (prefers-reduced-motion: reduce) { .live-badge i, .menu-live .live-dot { animation: none; } }
/* The door on the menu, a row like No Prep and Highway, with the light on it. */
.menu-live { border-color: rgba(214,30,59,0.45); background: linear-gradient(90deg, rgba(214,30,59,0.18), rgba(214,30,59,0.04) 70%), #15171c; }
.menu-live .live-dot { flex: none; position: relative; z-index: 2; }
.menu-live:not(.hot) .live-dot { animation: none; background: var(--gmute, #9aa0aa); }
.menu-live .np-words { flex-direction: column; align-items: flex-start; gap: 2px; }
.menu-live .np-title { color: #fff; }
.menu-live .np-sub { white-space: normal; overflow: visible; }

/* ---- Live Track, phase two: classes, streaks, tonight, talk ----
   Kirk: keep it fair, you don't line up an unlimited car against a street
   car. A racer's class is a tag beside their car wherever their name is, the
   rule a pair runs to is said over it, and a call-out across classes says so
   in amber before the yes. */
.live-cls { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-family: var(--game); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; vertical-align: 1px; border: 1px solid currentColor; }
.live-cls.cls-street { color: #9ec4ff; }
.live-cls.cls-sport { color: #6ee89b; }
.live-cls.cls-pro { color: #ffc21a; }
.live-cls.cls-outlaw { color: #ff9f43; }
.live-cls.cls-unlimited { color: #ff6f88; }
.live-rule { margin: -2px 0 8px; font-family: var(--game); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gmute, #9aa0aa); }
.live-class { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font-size: 13.5px; line-height: 1.4; color: var(--bl-muted); }
.live-class .live-cls { flex: none; margin-top: 1px; }
.live-warn { margin: 2px 0 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,194,26,0.10); border: 1px solid rgba(255,194,26,0.35); color: #ffd56b; font-size: 13.5px; }
.live-streak { font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(214,30,59,0.18); color: #ff8fa3; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.live-standings { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.live-standings li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,0.2); font-size: 14px; }
.live-standings li i { font-style: normal; font-family: var(--nums); font-weight: 800; color: var(--gmute, #9aa0aa); }
.live-standings li:first-child i { color: #ffc21a; }
.live-standings li b { font-weight: 700; overflow-wrap: anywhere; }
.live-standings li span { font-family: var(--nums); font-weight: 800; font-size: 13px; }
.live-standings li em { font-style: normal; font-family: var(--nums); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--gmute, #9aa0aa); }
.live-talk-lines { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.live-talk-lines li { position: relative; padding: 6px 30px 6px 10px; border-radius: 10px; background: rgba(0,0,0,0.22); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.live-talk-lines li.mine { background: rgba(214,30,59,0.12); }
.live-talk-lines li b { margin-right: 6px; font-weight: 800; }
.live-talk-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--bl-muted); font-size: 15px; line-height: 1; cursor: pointer; }
.live-talk-form { display: flex; gap: 8px; }
.live-talk-form input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: #14171c; color: var(--bl-text); font: inherit; font-size: 15px; }
.live-talk-form .btn { flex: none; }