/*! Fly Roadster — © 2026 NewDevs (Omordia Wisdom). All rights reserved. Official build 5fac3cd — flyroadster.xyz */
/* Fly Roadster UI — "neon night": the biomes' night skies (launch blue, dusk violet, aurora teal) behind glassy cards.
   The colour meanings never change: gold = money and Cores, orange-red = danger only, cyan = energy (battery, Fuel
   Cells), magenta = boosts (pickups, Overdrive). Each match type has its own accent (blue, gold, violet, mint).
   Gameplay colours live in src/render/palette.ts (ROLE); these tokens mirror them for the UI. Every text colour here
   keeps WCAG AA contrast (4.5:1) on the darkest and lightest card it sits on. */
:root {
  --sky: #0b1026;
  --sky-2: #1b2350;
  --night-violet: #1a1048;
  --plate: rgba(12, 14, 38, 0.8);
  --plate-strong: rgba(9, 11, 30, 0.93);
  --card-bg: linear-gradient(180deg, rgba(31, 38, 86, 0.74), rgba(13, 15, 40, 0.86));
  --surface: #151b38;
  --surface-2: #1f2754;
  --line: #2c3460;
  --line-2: #414c84;
  --text: #ffffff;
  --text-2: #cfd5ee;
  --muted: #9aa3c9;
  --car: #f4f6fa;
  --gold: #ffc83d;
  --gold-rim: #fff1b8;
  --gold-rgb: 255, 200, 61;
  --cyan: #35e0ff;
  --cyan-rgb: 53, 224, 255;
  --hazard: #ff5a1f;
  --hazard-text: #ff8a5c;
  --boost: #fd5de2;
  --boost-rim: #ffd9f7;
  --boost-rgb: 253, 93, 226;
  --accent: #6fa8ff;
  --violet: #9c86ff;
  --up: #3ddc84;
  --down: #ff6b5a;
  --bolt: #bcc8ff;
  --bolt-rgb: 188, 200, 255;
  /* match types: Daily Run, Core Run, Duel, Free Run */
  --m-daily: #62a4ff;
  --m-daily-text: #92c1ff;
  --m-daily-rgb: 98, 164, 255;
  --m-core: #ffc83d;
  --m-core-rgb: 255, 200, 61;
  --m-duel: #b49bff;
  --m-duel-text: #cbb8ff;
  --m-duel-rgb: 180, 155, 255;
  --m-practice: #45e6b5;
  --m-practice-rgb: 69, 230, 181;
  --f-display: 'Orbitron', 'Chakra Petch', system-ui, sans-serif;
  --f-ui: 'Chakra Petch', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-led: 'Share Tech Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r: 14px;
  --gap: 12px;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  background: var(--sky);
  color: var(--text);
  font: 15px/1.45 var(--f-ui);
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
#safe {
  position: fixed;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
  padding: var(--sa-top) var(--sa-right) var(--sa-bottom) var(--sa-left);
}
#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#ui > * {
  pointer-events: auto;
}
/* The match layer (docs/OVERHAUL_V3.md §11): everything a match shows sits in #layer. On a phone held upright with
   "Landscape in matches" on, html.rotate-match turns it +90° (the phone on its left side, notch on the left), sized
   from the visual viewport (--vvw, --vvh, set by game/landscape.ts; 100dvh leaves a gap on iOS). position: fixed
   children are placed in the turned layer. Safe areas: env() is always in device coordinates, so every inset reads
   --sa-*, which the turn maps to the layer's own edges. */
:root {
  --sai-top: env(safe-area-inset-top, 0px);
  --sai-right: env(safe-area-inset-right, 0px);
  --sai-bottom: env(safe-area-inset-bottom, 0px);
  --sai-left: env(safe-area-inset-left, 0px);
  --sa-top: var(--sai-top);
  --sa-right: var(--sai-right);
  --sa-bottom: var(--sai-bottom);
  --sa-left: var(--sai-left);
}
html.rotate-match {
  --sa-top: var(--sai-right);
  --sa-right: var(--sai-bottom);
  --sa-bottom: var(--sai-left);
  --sa-left: var(--sai-top);
}
#layer {
  position: fixed;
  inset: 0;
}
html.rotate-match #layer {
  inset: auto;
  top: 0;
  left: 0;
  width: var(--vvh);
  height: var(--vvw);
  transform-origin: 0 0;
  transform: translateX(var(--vvw)) rotate(90deg);
}
input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
  -webkit-user-select: text;
  user-select: text;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
a {
  color: var(--accent);
}

/* ---------- screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: calc(16px + var(--sa-top)) calc(16px + var(--sa-bottom));
  padding-left: max(16px, var(--sa-left));
  padding-right: max(16px, var(--sa-right));
  background:
    radial-gradient(90% 55% at 0% 0%, rgba(var(--boost-rgb), 0.13), transparent 70%),
    radial-gradient(80% 50% at 100% 8%, rgba(var(--cyan-rgb), 0.1), transparent 70%),
    linear-gradient(180deg, rgba(11, 16, 38, 0.5), rgba(16, 12, 48, 0.93) 62%);
  touch-action: pan-y;
}
.screen.has-tabs {
  padding-bottom: calc(88px + var(--sa-bottom));
}
.wrap {
  width: min(560px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wrap.center {
  margin-block: auto;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.topbar h2 {
  margin: 0;
  font: 800 18px/1.1 var(--f-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.back {
  background: none;
  border: 0;
  color: var(--text-2);
  min-height: 44px;
  min-width: 44px;
  padding: 8px 4px;
  font-weight: 600;
}

.wordmark {
  margin: 0;
  font: 900 clamp(38px, min(11vw, 11vh), 72px)/0.92 var(--f-display);
  letter-spacing: 0.02em;
  color: var(--car);
  text-wrap: balance;
}
.wordmark span {
  display: block;
  color: var(--gold);
  background: linear-gradient(90deg, #ffe08a, var(--gold) 45%, #ff9f4a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wordmark.small {
  font-size: clamp(30px, 8vw, 46px);
}
.tagline {
  margin: 0;
  font: 600 16px/1.3 var(--f-ui);
  color: var(--text-2);
}
.eyebrow {
  font: 400 12px/1 var(--f-led);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.fine {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 60ch;
}
.err {
  color: var(--down);
  font-size: 13px;
  margin: 0;
}
.ok {
  color: var(--up);
  font-size: 13px;
  margin: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--r);
  border: 1.5px solid transparent;
  font: 700 15px/1 var(--f-ui);
  letter-spacing: 0.04em;
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.btn:not([disabled]):active {
  transform: translateY(1px) scale(0.985);
}
@media (hover: hover) {
  .btn:not([disabled]):hover {
    filter: brightness(1.07);
  }
}
.btn-primary {
  background: linear-gradient(180deg, #ffffff, #dde5ff);
  color: #0b1026;
  box-shadow: 0 6px 22px rgba(var(--m-daily-rgb), 0.32);
}
.btn-secondary {
  background: rgba(111, 168, 255, 0.08);
  color: var(--text);
  border-color: var(--accent);
}
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--line-2);
}
.btn-gold {
  background: linear-gradient(180deg, #ffdb6e, #ffb72e);
  color: #241800;
  box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.28);
}
.btn-fuel {
  background: linear-gradient(180deg, #74ecff, #2cc9ee);
  color: #03222c;
}
.btn-bolts {
  background: linear-gradient(180deg, #e2e8ff, #aab8f4);
  color: #10163a;
}
.btn-danger {
  background: transparent;
  color: var(--down);
  border-color: var(--down);
}
.btn[disabled] {
  opacity: 0.45;
  cursor: default;
}
.btn.block {
  width: 100%;
}
a.btn {
  text-decoration: none;
}
.row {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}
.row > .btn {
  flex: 1 1 140px;
}
.linkbtn {
  background: none;
  border: 0;
  color: var(--accent);
  /* a full-size tap target, even inside a line of text */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 2px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- forms ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.field input {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  outline: none;
  font-size: 16px;
}
.field input:focus {
  border-color: var(--accent);
}
.field.invalid input {
  border-color: var(--down);
}
.field .hint {
  font-size: 12px;
  color: var(--muted);
}
.field .hint.bad {
  color: var(--down);
}
.field .hint.good {
  color: var(--up);
}
.check {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px; /* the whole label is the tap target */
  font-size: 14px;
  color: var(--text-2);
}
.check input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--accent);
  flex: none;
}
.range {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 46%);
  gap: 12px;
  align-items: center;
  font-size: 14px;
  color: var(--text-2);
  padding-left: 37px; /* lines up with the checkbox labels above (20px box, its margins, 10px gap) */
}
.range input {
  width: 100%;
  min-height: 44px;
  accent-color: var(--accent);
}
.range input:disabled {
  opacity: 0.4;
}
.meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.meter i {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.meter i.on {
  background: var(--cyan);
}
.meter.s1 i.on {
  background: var(--hazard);
}
.meter.s2 i.on {
  background: var(--gold);
}

/* ---------- cards & plates ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  box-shadow:
    0 10px 28px rgba(2, 3, 12, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.card.glass {
  background: linear-gradient(
    160deg,
    rgba(var(--boost-rgb), 0.12),
    rgba(var(--cyan-rgb), 0.06) 45%,
    rgba(13, 15, 40, 0.86)
  );
  border-color: rgba(var(--boost-rgb), 0.3);
}
.card h3 {
  margin: 0;
  font: 800 14px/1.2 var(--f-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card p {
  margin: 0;
  color: var(--text-2);
}
.card p.err {
  color: var(--down);
}
.card p.ok {
  color: var(--up);
}
.card p.note {
  color: var(--gold-rim);
}
.card.gold {
  border-color: rgba(var(--gold-rgb), 0.45);
}
.card.mode {
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  position: relative;
  overflow: hidden;
  border-color: rgba(var(--m-rgb), 0.38);
  background:
    linear-gradient(135deg, rgba(var(--m-rgb), 0.12), rgba(var(--m-rgb), 0.03) 48%, transparent 70%), var(--card-bg);
  transition:
    transform 0.15s ease,
    border-color 0.2s ease;
}
.card.mode::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--m);
}
.card.mode:active {
  transform: translateY(1px) scale(0.995);
}
@media (hover: hover) {
  .card.mode:hover {
    border-color: rgba(var(--m-rgb), 0.7);
  }
}
.card.locked {
  opacity: 0.8;
}
.card.mode.locked {
  filter: saturate(0.6);
}
.kicker {
  font: 400 11px/1 var(--f-led);
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.pill.gold {
  color: var(--gold);
  border-color: rgba(255, 200, 61, 0.5);
}
.pill.cyan {
  color: var(--cyan);
  border-color: rgba(53, 224, 255, 0.45);
}
.pill.hazard {
  color: var(--hazard);
  border-color: rgba(255, 90, 31, 0.5);
}
.pill.up {
  color: var(--up);
  border-color: rgba(61, 220, 132, 0.45);
}
.pill.boost {
  color: var(--boost);
  border-color: rgba(var(--boost-rgb), 0.5);
}
.pill.hazard {
  color: var(--hazard-text);
}
.pill.tiny {
  padding: 1px 6px;
  font-size: 11px;
  margin-left: 6px;
  vertical-align: 1px;
}
.swatch-strip {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
}
.swatch-strip i {
  flex: 1;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.stat b {
  display: block;
  font: 400 clamp(15px, 4.4vw, 20px)/1.2 var(--f-led);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat small {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat.gold b {
  color: var(--gold);
}
.amount {
  font: 400 28px/1.1 var(--f-led);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.amount small {
  font-size: 14px;
  color: var(--text-2);
}
.num {
  font-family: var(--f-led);
  font-variant-numeric: tabular-nums;
}
.hexicon {
  display: inline-block;
  width: 14px;
  height: 16px;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  vertical-align: -2px;
}

/* ---------- lists ---------- */
.list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lrow {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  min-width: 0;
}
.lrow.me {
  border-color: var(--accent);
}
.lrow .rank {
  font: 800 14px var(--f-display);
  color: var(--muted);
}
.lrow .who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.lrow .dist {
  font: 400 16px var(--f-led);
  font-variant-numeric: tabular-nums;
}
.ledger {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  font-size: 13px;
}
.ledger .when {
  color: var(--muted);
}

/* ---------- tab bar ---------- */
.tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px max(8px, var(--sa-right)) calc(6px + var(--sa-bottom)) max(8px, var(--sa-left));
  background: var(--plate-strong);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.tab {
  background: none;
  border: 0;
  color: var(--muted);
  padding: 8px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: 600 11px/1 var(--f-ui);
  letter-spacing: 0.04em;
}
.tab svg {
  width: 22px;
  height: 22px;
}
.tab {
  position: relative;
  --tab: var(--gold);
}
.tab-home {
  --tab: var(--m-daily);
}
.tab-duels {
  --tab: var(--m-duel);
}
.tab-board {
  --tab: var(--m-practice);
}
.tab-garage {
  --tab: #d9b8ff;
}
.tab-wallet {
  --tab: var(--gold);
}
.tab[aria-current='page'] {
  color: var(--text);
}
.tab[aria-current='page'] svg {
  color: var(--tab);
  filter: drop-shadow(0 0 6px var(--tab));
}
.tab[aria-current='page']::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 28%;
  right: 28%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--tab);
}

/* ---------- garage & shop ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.tile {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  color: inherit;
  min-width: 0;
}
.tile[aria-pressed='true'] {
  border-color: var(--gold);
}
.tile .chip {
  height: 34px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.tile .name {
  font-weight: 700;
}
.tile .sub {
  font-size: 12px;
  color: var(--muted);
}
.price {
  font: 400 15px var(--f-led);
}

/* ---------- in-game overlays ---------- */
.hudbtn {
  position: absolute;
  top: calc(10px + var(--sa-top));
  right: calc(10px + var(--sa-right));
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--plate);
  color: var(--text);
  display: grid;
  place-items: center;
  font: 700 13px var(--f-ui);
}
.prompt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* the side insets too: in a landscape match the notch is on a side, and no card may start under it */
  padding: calc(16px + var(--sa-top)) max(16px, var(--sa-right)) calc(16px + var(--sa-bottom)) max(16px, var(--sa-left));
  background: rgba(5, 7, 18, 0.62);
  touch-action: pan-y;
}
/* auto margins centre the card but never push its top off-screen when it's taller than the viewport */
.prompt .card {
  width: min(420px, 100%);
  margin: auto;
}
.countdown {
  font: 900 44px/1 var(--f-display);
  color: var(--gold);
  text-align: center;
}
/* A house ad (ads/house.ts) can open over a menu (the Shop's +1 Fuel Cell) or a sheet: it covers them, solidly. */
.prompt.adcard {
  z-index: 7;
  background: rgba(5, 7, 18, 0.9);
}
/* focused when it opens (so keys never reach the button it covers); its buttons keep their own focus rings */
.prompt.adcard:focus {
  outline: none;
}
.prompt.adcard .card {
  background: var(--plate-strong);
}
.adframe {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: 12px;
  border: 1px dashed var(--line-2);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  color: var(--text-2);
  background: repeating-linear-gradient(
    135deg,
    var(--surface),
    var(--surface) 12px,
    var(--surface-2) 12px,
    var(--surface-2) 24px
  );
}
.sponsor {
  font: 400 11px var(--f-led);
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
}

/* ---------- toasts ---------- */
#toasts {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(12px + var(--sa-top));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 20;
  padding-inline: 16px;
}
.toast {
  pointer-events: auto;
  background: var(--plate-strong);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  max-width: min(460px, 100%);
  animation: toast-in 0.18s ease-out;
}
.toast.gold {
  border-color: rgba(255, 200, 61, 0.6);
  color: var(--gold-rim);
}
.toast.bad {
  border-color: rgba(255, 107, 90, 0.6);
}
body.in-run #toasts {
  top: calc(78px + var(--sa-top));
}
@keyframes toast-in {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
/* ---------- shared bits for the earning screens ---------- */
.between {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* text colour helpers (not .gold alone: .card.gold only tints the border) */
.num.gold,
.tgold {
  color: var(--gold);
}
.num.muted,
.muted {
  color: var(--muted);
}
.small {
  font-size: 13px;
}
.strike {
  text-decoration: line-through;
  color: var(--muted);
}
.note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 200, 61, 0.35);
  background: rgba(255, 200, 61, 0.07);
  color: var(--gold-rim);
  font-size: 13px;
}
.callout {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: 14px;
}
.callout b {
  color: var(--text);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chips .pill {
  white-space: normal;
}
details.more {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
details.more > summary {
  cursor: pointer;
  color: var(--text-2);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 0; /* 44 px tall */
}
details.more[open] > summary {
  margin-bottom: 8px;
}
details.more > :not(summary) + :not(summary) {
  margin-top: 10px;
}

/* segmented switch (Garage | Shop, Daily | Championship) */
.switch {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--plate);
  border: 1px solid var(--line);
}
.switch button {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font: 700 14px/1 var(--f-ui);
  letter-spacing: 0.03em;
}
.switch button[aria-pressed='true'] {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* thin progress bars */
.bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}
.bar.cyan i {
  background: var(--cyan);
}

/* Home: compact pool strip */
.poolstrip {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(255, 200, 61, 0.4);
  background: var(--plate);
  color: inherit;
  text-align: left;
  font: inherit;
}
.ps-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ps-cell.grow {
  flex: 1;
}
.ps-cell small {
  font: 400 10px/1.1 var(--f-led);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ps-cell b {
  font: 400 18px/1.1 var(--f-led);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ps-cell em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}
.ps-cell .bar {
  margin-top: 3px;
}
/* Narrow phones: today's pool and the countdown on top, the world pool and its meter full width below. */
@media (max-width: 440px) {
  .poolstrip {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
  }
  .ps-cell.grow {
    order: 3;
    flex-basis: 100%;
  }
}

/* categories (60 / 25 / 15) */
.cats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.catrow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}
.catrow.cat-duels {
  border-left-color: rgba(255, 200, 61, 0.65);
}
.catrow.cat-championship {
  border-left-color: rgba(255, 200, 61, 0.35);
}
.cat-head,
.cat-mine {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}
.cat-name {
  font-weight: 700;
}
.cat-name em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
}
.cat-mine {
  font-size: 13px;
  color: var(--text-2);
}
.cat-head .num em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}
.cat-mine.fine {
  display: block;
}
span.cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  white-space: nowrap;
}

/* quests and check-in */
.quests {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quests.compact {
  gap: 8px;
}
.quest {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.q-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
}
.q-title {
  min-width: 0;
  color: var(--text);
}
.quest.done .q-title {
  color: var(--text-2);
}
.q-prog {
  font: 400 11px var(--f-led);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.checkin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.checkin .btn {
  min-height: 44px;
  padding: 10px 16px;
}
.duelsum {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 14px;
}

/* run-over: points from this run */
.awards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid rgba(255, 200, 61, 0.35);
}
.award {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}
.award .what {
  min-width: 0;
  overflow-wrap: anywhere;
}
.award b {
  color: var(--gold);
  font-weight: 400;
  font-size: 16px;
  text-align: right;
  min-width: 56px;
}
.award.total {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  margin-top: 2px;
  color: var(--text-2);
}
.est {
  margin: 0;
  color: var(--text-2);
}
.est b {
  color: var(--gold);
  font-weight: 400;
}
.duelbox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
}

/* leaderboard: championship rows */
.lrow.champ {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  text-align: left;
  color: inherit;
  font: inherit;
}
.lrow {
  color: inherit;
  font: inherit;
  text-align: left;
}
.lrow.champ .who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lrow.champ .who .name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.lrow.champ .who small,
.lrow .pay small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.lrow .pay {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.lrow .pay b {
  font-weight: 400;
}
.lrow .pay small.gold {
  color: var(--gold);
}

/* duels and crates */
.drow,
.crow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.d-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.d-who {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 600;
  min-width: 0;
}
.d-main small {
  font-size: 12px;
  color: var(--muted);
}
.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid #fff;
  margin-right: 6px;
  vertical-align: -1px;
}
.crow .btn {
  min-height: 44px;
  padding: 8px 16px;
}
.crate-icon {
  width: 30px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid var(--gold);
  background:
    linear-gradient(var(--gold), var(--gold)) center 9px / 100% 2px no-repeat,
    rgba(255, 200, 61, 0.12);
}
.crate-icon.open {
  border-color: var(--line-2);
  background:
    linear-gradient(var(--line-2), var(--line-2)) center 9px / 100% 2px no-repeat,
    transparent;
}
.card.match {
  border-color: var(--accent);
}
.vs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vs-name {
  font: 800 20px/1.2 var(--f-display);
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}
.vs-x {
  color: var(--gold);
  font-size: 18px;
}

/* wallet */
.wallets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wbtn {
  justify-content: flex-start;
}
.wbtn img,
.wicon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex: none;
}
.wicon {
  border: 1.5px solid currentColor;
  opacity: 0.6;
}
.card h3.addr {
  font: 400 18px/1.2 var(--f-led);
  letter-spacing: 0.04em;
  text-transform: none; /* base58 is case-sensitive */
}
.world {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.flow.ok b {
  color: var(--up);
}
.flow-now {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.flow-now b {
  font-weight: 700;
}
.spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--cyan);
  animation: spin 0.9s linear infinite;
  flex: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
ol.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  counter-reset: st;
}
ol.steps li {
  counter-increment: st;
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
  padding-top: 6px;
  border-top: 3px solid var(--line-2);
}
ol.steps li::before {
  content: counter(st) '. ';
}
ol.steps li.done {
  border-top-color: var(--up);
  color: var(--text-2);
}
ol.steps li.now {
  border-top-color: var(--cyan);
  color: var(--text);
  font-weight: 700;
}
.amount-row {
  display: flex;
  gap: 8px;
}
.amount-row input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  outline: none;
  font: 400 22px var(--f-led);
  font-variant-numeric: tabular-nums;
}
.amount-row input:focus {
  border-color: var(--gold);
}
.amount-row .max {
  flex: none;
  min-height: 52px;
}
.flow .hint {
  font-size: 12.5px;
  color: var(--muted);
}
.flow .hint.bad {
  color: var(--down);
}
.picker {
  display: flex;
  align-items: center;
  gap: 10px;
}
.picker select {
  flex: 1;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  padding: 8px 10px;
}
.kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.kv > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.kv > div:last-child {
  border-bottom: 0;
}
.kv dt {
  color: var(--text-2);
  font-size: 14px;
}
.kv dd {
  margin: 0;
  font: 400 17px/1.2 var(--f-led);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hday {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.hrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}
.hrow .h-what {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
.hrow .h-amt {
  text-align: right;
  white-space: nowrap;
}
.wrow {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.mint {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mint code {
  font-size: 15px;
}
.card.demo {
  border-style: dashed;
  border-color: var(--line-2);
}

@media (max-height: 520px) and (min-width: 640px) {
  .wrap.split {
    width: min(900px, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 28px;
  }
}
@media (max-width: 380px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* An inline text button (looks like a link, behaves like a button). */
.linkish {
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 2px;
  font: inherit;
  color: var(--accent, #6fa8ff);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:focus-visible {
  outline: 2px solid var(--accent, #6fa8ff);
  outline-offset: 3px;
}

/* =====================================================================================================================
   v3: match types, the purse, the Vault, sheets, boards, the revive prompt and the run-over card
   ===================================================================================================================== */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.center {
  text-align: center;
  margin-inline: auto;
}

/* per-mode accent: anything inside .m-<mode> can use var(--m) and rgba(var(--m-rgb), a) */
.m-daily {
  --m: var(--m-daily);
  --m-text: var(--m-daily-text);
  --m-rgb: var(--m-daily-rgb);
}
.m-core {
  --m: var(--m-core);
  --m-rgb: var(--m-core-rgb);
}
.m-duel {
  --m: var(--m-duel);
  --m-text: var(--m-duel-text);
  --m-rgb: var(--m-duel-rgb);
}
.m-practice {
  --m: var(--m-practice);
  --m-rgb: var(--m-practice-rgb);
}
.mode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.mode-head .kicker {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 4px;
  border-radius: 8px;
  font: 800 13px/1 var(--f-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-text, var(--m, var(--text)));
  background: rgba(var(--m-rgb, 255, 255, 255), 0.14);
  border: 1px solid rgba(var(--m-rgb, 255, 255, 255), 0.45);
  white-space: nowrap;
}
.mode-badge em {
  font: 400 11px var(--f-led);
  font-style: normal;
  color: var(--text-2);
  letter-spacing: 0.1em;
}
.modes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 680px) {
  .modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.card.mode .rule {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}
.pays {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pays-label {
  font: 400 10px/1 var(--f-led);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.pay-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}
.pay-chip.money {
  color: var(--gold);
  border-color: rgba(var(--gold-rgb), 0.5);
  background: rgba(var(--gold-rgb), 0.08);
}
.pay-chip.board {
  color: #9cc4ff;
  border-color: rgba(111, 168, 255, 0.5);
}
.pay-chip.soft {
  color: var(--bolt);
  border-color: rgba(var(--bolt-rgb), 0.45);
}
.pay-chip.rev.on {
  color: var(--cyan);
  border-color: rgba(var(--cyan-rgb), 0.45);
}
.pay-chip.rev.off {
  color: var(--muted);
  border-style: dashed;
}

/* the purse: Vault, Fuel Cells, Bolts */
.purse {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: 600 14px/1 var(--f-ui);
  white-space: nowrap;
}
button.chip {
  cursor: pointer;
  min-height: 44px;
}
.chip b {
  font-weight: 400;
  font-size: 15px;
}
.fuel-chip {
  color: var(--cyan);
  border-color: rgba(var(--cyan-rgb), 0.45);
  background: rgba(var(--cyan-rgb), 0.08);
}
.bolt-chip {
  color: var(--bolt);
  border-color: rgba(var(--bolt-rgb), 0.4);
  background: rgba(var(--bolt-rgb), 0.07);
}
.vault-chip {
  color: var(--gold-rim);
  border-color: rgba(var(--gold-rgb), 0.65);
  background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.2), rgba(var(--gold-rgb), 0.06));
  box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.18);
}
.vault-chip b {
  color: var(--gold);
}
.vault-chip em {
  font: 700 10px/1 var(--f-ui);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #241800;
  background: var(--gold);
  padding: 3px 6px;
  border-radius: 6px;
}
.purse.big .chip {
  min-height: 44px;
  font-size: 15px;
}
.purse.big .chip b {
  font-size: 20px;
}
/* a Bolt: a hex nut */
.bolticon {
  display: inline-block;
  width: 14px;
  height: 16px;
  flex: none;
  background: radial-gradient(circle at 50% 50%, transparent 0 2.6px, currentColor 3.1px);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  vertical-align: -2px;
}

/* the Vault */
.card.vault,
.vaultbox,
.card.starter {
  border-color: rgba(var(--gold-rgb), 0.55);
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--gold-rgb), 0.14), transparent 60%), var(--card-bg);
}
.vaultbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), 0.55);
}
.vaultbox .btn {
  min-height: 44px;
}
.vaultmini {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  background: rgba(var(--gold-rgb), 0.08);
}
.vaultmini b {
  color: var(--gold);
  font-size: 20px;
  font-weight: 400;
}
.vaultmini small {
  color: var(--text-2);
  font-size: 12px;
}
.steps-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
  color: var(--text-2);
}
.steps-check li::before {
  content: '○';
  display: inline-block;
  width: 1.4em;
  color: var(--muted);
}
.steps-check li.done {
  color: var(--text);
}
.steps-check li.done::before {
  content: '✓';
  color: var(--up);
}
.earn-nudge .btn {
  align-self: flex-start;
}

/* sheets */
.sheet-wrap {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 5, 16, 0.62);
  animation: fade-in 0.18s ease-out;
  touch-action: pan-y;
}
.sheet {
  width: min(520px, 100%);
  max-height: 94%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 16px calc(18px + var(--sa-bottom));
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--line-2);
  border-bottom: 0;
  background:
    radial-gradient(100% 60% at 0% 0%, rgba(var(--boost-rgb), 0.12), transparent 70%),
    linear-gradient(180deg, #1d2556, #10153a);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: sheet-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet.gold {
  border-color: rgba(var(--gold-rgb), 0.6);
  background:
    radial-gradient(100% 60% at 100% 0%, rgba(var(--gold-rgb), 0.18), transparent 70%),
    linear-gradient(180deg, #1d2556, #10153a);
}
.sheet-grip {
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-2);
  margin: 2px auto 0;
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sheet-head h3 {
  margin: 6px 0 0;
  font: 800 18px/1.2 var(--f-display);
  letter-spacing: 0.04em;
}
.sheet-x {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
}
.sheet-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sheet-body p {
  margin: 0;
  color: var(--text-2);
}
.promise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.promise span {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--up);
  border: 1px solid rgba(61, 220, 132, 0.45);
  background: rgba(61, 220, 132, 0.08);
}
.consent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
}
.consent.invalid {
  border-color: var(--down);
  animation: nudge 0.3s ease-in-out;
}
.wbtn {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
  font: inherit;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.wbtn.k-demo {
  border-color: rgba(var(--m-daily-rgb), 0.7);
  background: rgba(var(--m-daily-rgb), 0.1);
}
@media (hover: hover) {
  .wbtn:not([disabled]):hover {
    border-color: var(--accent);
  }
}
.wbtn[disabled] {
  opacity: 0.55;
}
.wbtn.working {
  opacity: 1;
  border-color: var(--cyan);
}
.wbtn img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.wbtn .wicon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px solid currentColor;
  opacity: 0.7;
}
.wbtn .wname {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wbtn .wname b {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wbtn .wname small {
  font-size: 12px;
  color: var(--muted);
}
.wbtn .chev {
  font-size: 22px;
  color: var(--muted);
}
.status:empty,
.err:empty {
  display: none;
}

/* the Welcome */
.hero-cta {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  font-size: 16px;
}
.hero-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shimmer 3.6s ease-in-out 1.2s infinite;
}
.promise-line {
  margin-top: -8px;
  color: var(--up);
}
.hero-chips .pill {
  background: rgba(8, 10, 24, 0.5);
}

/* onboarding */
.teach {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.teach li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-2);
}
.teach li b {
  font: 800 13px/1.2 var(--f-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.teach li span {
  color: var(--text-2);
  font-size: 14px;
}
.teach li.hz {
  border-left-color: var(--hazard);
}
.teach li.hz b {
  color: var(--hazard-text);
}
.teach li.bo {
  border-left-color: var(--boost);
}
.teach li.bo b {
  color: var(--boost);
}
.teach li.en {
  border-left-color: var(--cyan);
}
.teach li.en b {
  color: var(--cyan);
}
.teach li.gd {
  border-left-color: var(--gold);
}
.teach li.gd b {
  color: var(--gold);
}
.teach li.bt {
  border-left-color: var(--bolt);
}
.teach li.bt b {
  color: var(--bolt);
}
.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2);
  transition:
    width 0.2s ease,
    background 0.2s ease;
}
.dots i.on {
  width: 22px;
  border-radius: 4px;
  background: var(--gold);
}

/* in-run cards */
.run-card {
  border-top: 3px solid var(--m, var(--line-2));
  background:
    linear-gradient(180deg, rgba(var(--m-rgb, 255, 255, 255), 0.12), transparent 140px),
    linear-gradient(180deg, #1a2150, #0e1234);
}
.big-m {
  font-size: 34px;
  color: var(--text);
}
.stats.big .stat b {
  font-size: clamp(17px, 5.2vw, 24px);
}
.skills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
}
.skill {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  min-width: 0;
}
.skill b {
  font-size: 17px;
  font-weight: 400;
}
.skill small {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skill.boost b {
  color: var(--boost);
}
.skill.hazard b {
  color: var(--hazard-text);
}
.skill.gold b {
  color: var(--gold);
}
.skill.bolt b {
  color: var(--bolt);
}
.pill.pop {
  animation: pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.2s both;
}
@property --p {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
.ring {
  --p: 1;
  width: 92px;
  height: 92px;
  margin: 2px auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, #141a3e 78%, transparent 80% 100%),
    conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.1) 0);
  transition: --p 1s linear;
}
.ring b {
  font: 900 36px/1 var(--f-display);
  color: var(--gold);
}
.ring.stopped {
  opacity: 0.45;
}
.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.ladder li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.ladder li small {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ladder li b {
  font-weight: 400;
  font-size: 16px;
}
.ladder li.now {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(var(--cyan-rgb), 0.1);
  box-shadow: 0 0 14px rgba(var(--cyan-rgb), 0.25);
}
.ladder li.used {
  text-decoration: line-through;
  opacity: 0.55;
}
.badge-free {
  padding: 3px 8px;
  border-radius: 6px;
  font: 800 11px/1 var(--f-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #062418;
  background: var(--up);
}
.prompt.saving .card {
  gap: 12px;
}

/* boards */
.switch.scroll {
  grid-auto-columns: max-content;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  /* a soft edge says "there's more this way" */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
}
.switch.scroll::-webkit-scrollbar {
  display: none;
}
.switch.scroll button {
  padding-inline: 14px;
}
.switch.small {
  align-self: flex-start;
  grid-auto-columns: max-content;
}
.switch.small button {
  min-height: 44px;
  padding-inline: 14px;
  font-size: 13px;
}
.lrow .who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lrow .who .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lrow .who small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
button.lrow {
  cursor: pointer;
}
.lrow.top1 {
  border-color: rgba(var(--gold-rgb), 0.55);
  background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.14), var(--surface) 60%);
}
.lrow.top1 .rank {
  color: var(--gold);
}
.lrow.top2 .rank {
  color: #dfe6ff;
}
.lrow.top3 .rank {
  color: #ffb27a;
}
.lrow.me {
  border-color: var(--accent);
  background: linear-gradient(90deg, rgba(111, 168, 255, 0.18), var(--surface) 70%);
}
.near-head {
  margin-top: 8px;
}

/* garage & shop */
.tile .slot {
  font: 400 10px/1 var(--f-led);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 3px 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
}
.tile.fuel {
  border-color: rgba(var(--cyan-rgb), 0.35);
}
.tile.bolts {
  border-color: rgba(var(--bolt-rgb), 0.35);
}
.tile .btn {
  min-height: 44px;
  padding: 10px 12px;
}
.card.starter h3 {
  font-size: 16px;
}

/* "Tap for sound": a hint, not a button to aim for. Any tap anywhere brings the sound back, so taps go straight
   through it to whatever is underneath. */
.soundchip {
  position: fixed;
  z-index: 15;
  left: 50%;
  top: calc(8px + var(--sa-top));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--cyan-rgb), 0.6);
  background: var(--plate-strong);
  color: var(--cyan);
  font: 700 13px/1 var(--f-ui);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: fade-in 0.3s ease-out;
}

/* motion */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes sheet-in {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}
@keyframes pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  70% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: none;
  }
}
@keyframes shimmer {
  0%,
  60% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}
@keyframes nudge {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
/* No motion for players who ask for less (the system setting, or Settings › Reduce motion). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .spin {
    animation: spin 3s linear infinite !important;
  }
}
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}
body.reduce-motion .spin {
  animation: spin 3s linear infinite !important;
}
@media (max-width: 380px) {
  .card {
    padding: 14px;
  }
  .stats.big {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .stats.big .stat {
    padding: 8px;
  }
}

/* "Turn sideways for the full view": under the HUD's top row (and under in-run toasts), at run start on phones held
   upright. Taps go through it to the game; only its close button is a control. */
.rotatehint {
  position: fixed;
  z-index: 16;
  left: 50%;
  top: calc(128px + var(--sa-top));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  min-height: 36px;
  padding: 4px 4px 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--plate-strong);
  color: var(--text);
  font: 600 13px/1.2 var(--f-ui);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: fade-in 0.3s ease-out;
}
.rotatehint > svg {
  flex: none;
  color: var(--cyan);
}
.rotatehint-x {
  pointer-events: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -6px -4px -6px -4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.rotatehint-x:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -6px;
}
/* Nameplates (the Shop's "Gold nameplate"): a champagne name with a fine rule, never money gold. For board rows that
   carry the owner's plate (render/cosmetics.ts NAMEPLATES). */
.plate-gold {
  color: #f3e3b5;
  text-decoration: underline 1px rgba(243, 227, 181, 0.45);
  text-underline-offset: 3px;
}

/* ---------- two kinds of $FRS (docs/OVERHAUL_V3.md §9.12, §15 J) ----------
   "$FRS · withdrawable" is money gold; In-game $FRS carries a padlock and the bolt-grey of things that stay in the
   game, so the two never read as the same balance. A negative In-game balance (a reversed payment) is hazard text. */
.balpair {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.balpair .chip {
  flex: 1 1 140px;
  justify-content: flex-start;
  min-width: 0;
}
.balpair .chip small {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip.bal-won b {
  color: var(--gold);
}
.chip.bal-bought {
  border-style: dashed;
}
.chip.bal-bought svg,
.locknote svg,
.pack svg,
.kicker svg {
  vertical-align: -2px;
  color: var(--bolt);
  flex: none;
}
.chip.bal-bought.locked b,
.hazard {
  color: var(--hazard-text);
}
.infobtn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-2);
  font:
    italic 700 13px/1 Georgia,
    serif;
  cursor: pointer;
  vertical-align: middle;
}
.balrow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.balrow p {
  margin: 0;
}
.locknote {
  display: block;
}
details.spendable {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.03);
}
details.spendable > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
details.spendable > summary::after {
  content: '▾';
  color: var(--muted);
}
details.spendable[open] > summary::after {
  content: '▴';
}
details.spendable .parts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 12px;
}
details.spendable .parts p {
  margin: 0;
}
.paybox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.paybox p {
  margin: 0;
}
.btn.pay {
  flex-direction: column;
  gap: 4px;
  min-height: 52px;
  padding-block: 8px;
}
.btn.pay small.split {
  font: 600 11.5px/1.2 var(--f-ui);
  letter-spacing: 0;
  opacity: 0.85;
}
small.usd {
  color: var(--muted);
  font-size: 12px;
}
.fine.peg {
  color: var(--text-2);
}
.packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 84px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  position: relative;
}
.pack[aria-checked='true'] {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.35) inset;
}
.pack .pack-amt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
}
.pack small {
  color: var(--muted);
  font-size: 12px;
}
.pack .pack-price {
  font-weight: 700;
  color: var(--gold);
}
.pack .pill.tiny {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}
.card.ingame.locked {
  border-color: rgba(255, 90, 31, 0.5);
}
.orders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.num.cyan {
  color: var(--cyan);
}

/* ---------- rewarded offers (§9.8): the disclosure line always sits above the button ---------- */
.adoffer,
.topup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adoffer p,
.topup p {
  margin: 0;
}

/* ---------- the Daily's name and twists (§10.4), the Licensed badge, How to Play (§13) ---------- */
.col.tight {
  gap: 6px;
}
.pill.twist {
  color: var(--m-daily-text);
  border-color: rgba(var(--m-daily-rgb), 0.55);
}
.pill.licensed {
  vertical-align: middle;
  font-family: var(--f-ui);
  letter-spacing: 0;
}
.howto-card p {
  margin: 0;
}
.rules-index {
  margin-bottom: 4px;
}
.rules-index .pill {
  background: transparent;
  cursor: pointer;
  min-height: 32px;
  font: inherit;
  font-size: 12px;
}
details.rules-sec {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-bg);
  padding: 0 14px;
}
details.rules-sec > summary {
  font: 700 16px/1.2 var(--f-ui);
  padding: 13px 0;
  cursor: pointer;
}
details.rules-sec > p {
  margin: 0 0 8px;
}
.rules-list {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rules-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
  color: var(--text-2);
  font-size: 14px;
}
.rules-list li b {
  color: var(--text);
}
.rule-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.sheet details.rules-sec {
  margin-bottom: 8px;
}

/* ---------- the revive prompt and the run-over card in a landscape match (§11): two columns, so the choices fit the
   short side without scrolling. The left column (.lc) holds what happened, the right one (.rc) what to do next, and
   each stacks on its own: no shared rows, so a tall item on one side never stretches the other. Upright the columns
   melt away (display: contents) and the card is one column in the same order. A turned match (html.rotate-match) and
   a phone held sideways (landscape, under 520 px tall) get the same rules, never keyed off the viewport's width alone
   (a turned SE is 375 px wide to width media queries but 667 px across, like the same SE held sideways): fixed sizes,
   no vw, and compact spacing, so the card fits a 360 px layer with nothing cut off. ---------- */
.prompt .card.two-up > .lc,
.prompt .card.two-up > .rc {
  display: contents;
}
html.rotate-match .prompt {
  padding-block: calc(8px + var(--sa-top)) calc(8px + var(--sa-bottom));
}
html.rotate-match .prompt .card.two-up {
  width: min(780px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  padding: 12px 14px 14px;
}
html.rotate-match .prompt .card.two-up > .lc,
html.rotate-match .prompt .card.two-up > .rc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
html.rotate-match .two-up .chips {
  align-items: flex-start;
}
html.rotate-match .two-up .chips .pill {
  white-space: nowrap;
}
html.rotate-match .two-up .stats.big {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
html.rotate-match .two-up .stats.big .stat {
  padding: 6px 8px;
}
html.rotate-match .two-up .stats.big .stat b {
  font-size: 18px;
}
html.rotate-match .two-up .stat small {
  font-size: 11px;
  letter-spacing: 0.06em;
}
html.rotate-match .two-up .skills {
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* under the three stats, in line */
}
html.rotate-match .two-up .skill {
  padding: 4px 8px;
}
html.rotate-match .two-up .skill b {
  font-size: 15px;
  line-height: 1.25;
}
html.rotate-match .two-up .skill small {
  letter-spacing: 0.04em;
}
html.rotate-match .two-up .ring {
  width: 80px;
  height: 80px;
}
html.rotate-match .two-up .ring b {
  font-size: 32px;
}
html.rotate-match .two-up .row {
  flex-wrap: nowrap;
}
html.rotate-match .two-up .row > .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 10px;
}
@media (orientation: landscape) and (max-height: 520px) {
  .prompt {
    padding-block: calc(8px + var(--sa-top)) calc(8px + var(--sa-bottom));
  }
  .prompt .card.two-up {
    width: min(780px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    padding: 12px 14px 14px;
  }
  .prompt .card.two-up > .lc,
  .prompt .card.two-up > .rc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .two-up .chips {
    align-items: flex-start;
  }
  .two-up .chips .pill {
    white-space: nowrap;
  }
  .two-up .stats.big {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .two-up .stats.big .stat {
    padding: 6px 8px;
  }
  .two-up .stats.big .stat b {
    font-size: 18px;
  }
  .two-up .stat small {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .two-up .skills {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* under the three stats, in line */
  }
  .two-up .skill {
    padding: 4px 8px;
  }
  .two-up .skill b {
    font-size: 15px;
    line-height: 1.25;
  }
  .two-up .skill small {
    letter-spacing: 0.04em;
  }
  .two-up .ring {
    width: 80px;
    height: 80px;
  }
  .two-up .ring b {
    font-size: 32px;
  }
  .two-up .row {
    flex-wrap: nowrap;
  }
  .two-up .row > .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 10px;
  }
}
/* A short upright match (an iPhone SE in Safari with "Landscape in matches" off: 375×548): the same one-column cards,
   tighter, so the run-over card fits without scrolling. Not the turned layer (its viewport is upright too). */
@media (orientation: portrait) and (max-height: 600px) {
  html:not(.rotate-match) .prompt {
    padding-block: calc(8px + var(--sa-top)) calc(8px + var(--sa-bottom));
  }
  html:not(.rotate-match) .prompt .card.run-card {
    gap: 8px;
    padding: 12px 14px 14px;
  }
}
/* Settings › Screen shake (game/shakepref.ts): a radio group under its label, lined up with the switches' text. */
.choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 37px;
  font-size: 14px;
  color: var(--text-2);
}
.choice .row {
  gap: 0 20px;
}
.balpair .chip {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border-radius: 14px;
  padding: 8px 14px;
}
.balpair .bal-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.grid.frs {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.card.ingame .amount > span:first-child {
  color: var(--bolt);
}
.card.ingame .amount > span.hazard {
  color: var(--hazard-text);
}
/* The Free Run card and its Training speed switch (home.ts): the switch sits under the card, outside the card's own
   button, and the pair fills one cell of the modes grid. */
.mode-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mode-cell > .card.mode {
  flex: 1 1 auto;
  width: 100%;
}
.check.mode-switch {
  padding: 0 4px;
}

/* The wallet picker (ui/connect.ts, docs/research/robinhood-chain.md §2.1–§2.3, §2.10): installed wallets, the
   catalogue, the WalletConnect QR and deep-link hand-off, "Signing in as", the manual-add card, the claim radio list. */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sheet.wide {
  width: min(880px, 100%);
}
a.wbtn {
  text-decoration: none;
}
.wbtn[aria-disabled='true'] {
  opacity: 0.55;
}
.wbtn.preview {
  border-style: dashed;
}
.wbtn .wbadge {
  font-size: 11px;
  padding: 3px 8px;
}
.wbtn .wicon.k-mono,
.wbtn .wicon.k-other,
.wradio .wicon.k-mono {
  display: grid;
  place-items: center;
  border: 0;
  opacity: 1;
  background: var(--surface-2);
  color: var(--text);
  font: 800 14px/1 var(--f-display);
}
.wradio .wicon.k-mono {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.wrowbox {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.walso {
  margin: 0;
  padding-left: 54px;
  font-size: 13px;
}
.walso a {
  display: inline-block;
  padding: 10px 0; /* 44 px tall with the line */
}
.wgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 18px;
  align-items: start;
}
.wcol-list {
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 4px;
}
.qrpanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}
.qrpanel .qrtitle {
  font-weight: 700;
}
.qrpanel .row {
  justify-content: center;
}
.qrbox {
  display: grid;
  place-items: center;
  width: 236px;
  max-width: 100%;
  min-height: 236px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 12px;
  background: #ffffff;
}
.qrbox svg {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}
.qrwait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: #10153a;
  font-size: 13px;
}
.qrwait .spin {
  border-color: rgba(16, 21, 58, 0.18);
  border-top-color: #10153a;
}
.signas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.signas-who {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  overflow-wrap: anywhere;
}
.addr-inline {
  font-family: var(--f-led);
  letter-spacing: 0.02em;
}
.note.webview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note.webview p {
  color: var(--gold-rim);
}
.wcancel:empty {
  display: none;
}
.card.madd dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.maddrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'label copy' 'value copy';
  align-items: center;
  column-gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.maddrow dt {
  grid-area: label;
  font-size: 12px;
  color: var(--muted);
}
.maddrow dd {
  margin: 0;
  min-width: 0;
}
.maddrow dd:first-of-type {
  grid-area: value;
  overflow-wrap: anywhere;
}
.maddrow dd:last-of-type {
  grid-area: copy;
}
.maddrow .linkbtn {
  min-height: 44px;
}
.wradio {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wradio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
}
.wradio-row:has(input:checked) {
  border-color: var(--accent);
}
.wradio-row img {
  border-radius: 6px;
}
.flow .own {
  gap: 10px;
}
@media (max-width: 720px) {
  .wgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .wcol-list {
    max-height: none;
  }
}

/* =====================================================================================================================
   Identity (docs/OVERHAUL_V3.md §16.3; brand/about.ts): the boot splash and credit, About & Credits, the founder card,
   the credit lines, the run card's share line, and the easter eggs' badge, title and confetti. Cosmetic only.
   ===================================================================================================================== */
/* index.html's splash while the game loads: never takes a tap, gone once the first screen is up */
#boot {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px max(16px, var(--sa-right)) 24px max(16px, var(--sa-left));
  pointer-events: none;
  text-align: center;
  background: radial-gradient(120% 80% at 50% 40%, var(--sky-2), var(--sky) 70%);
  transition: opacity 0.35s ease;
}
#boot.gone {
  opacity: 0;
}
.boot-mark {
  font: 900 clamp(34px, 10vw, 60px)/0.95 var(--f-display);
  letter-spacing: 0.02em;
  color: var(--car);
}
.boot-mark span {
  color: var(--gold);
}
.bootcredit {
  margin: 0;
  font: 400 12px/1.4 var(--f-led);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
#boot .bootcredit {
  color: var(--muted);
}
.credit-line {
  margin-top: 6px;
}
.credit-line a {
  overflow-wrap: anywhere;
}
/* the run card's share line: last in the card upright (the columns melt into the card there), last in the left column
   in a landscape match */
.run-foot {
  order: 99;
  margin: 0;
  font: 400 11px/1.3 var(--f-led);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
/* a short upright match (an SE in Safari with "Landscape in matches" off, 375×548): the card is fitted without it */
@media (orientation: portrait) and (max-height: 600px) {
  html:not(.rotate-match) .run-foot {
    display: none;
  }
}

/* Settings › About & Credits */
.btn.btn-sm {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 14px;
}
.about-head {
  align-items: center;
}
.about-game {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.about-name {
  font: 900 20px/1.1 var(--f-display);
  letter-spacing: 0.04em;
}
.about-build {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.about-version {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: 400 13px/1.3 var(--f-led);
  color: var(--text-2);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.about-fp {
  font: 400 13px/1.3 var(--f-led);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.about-fp .linkbtn {
  font: inherit;
  min-height: 44px;
}
.founder {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}
.f-top {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.f-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.f-avatar.mono {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--line-2);
  background: var(--sky);
  font: 900 20px/1 var(--f-display);
  letter-spacing: 0.04em;
  color: var(--car);
}
.f-who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.f-name {
  font: 700 18px/1.2 var(--f-ui);
  overflow-wrap: anywhere;
}
.f-mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
}
.f-mail a {
  overflow-wrap: anywhere;
  min-width: 0;
}
.f-socials {
  gap: 8px;
}
.f-socials > .btn {
  flex: 0 1 auto;
}
.about-studio {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-report {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.credits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.credits dt {
  font: 400 11px/1.2 var(--f-led);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.credits dd {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--text-2);
}
.about-legal a {
  display: inline-block;
  padding-block: 4px;
}
.nd-badge {
  color: var(--cyan);
  border-color: rgba(var(--cyan-rgb), 0.5);
  font: 700 11px/1 var(--f-display);
  letter-spacing: 0.1em;
}

/* easter egg 2: Home's title for the session */
.egg-title {
  font: 900 15px/1.2 var(--f-display);
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--gold);
  background: linear-gradient(90deg, #ffe08a, var(--gold) 45%, #ff9f4a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* easter egg 1: ten seconds of neon confetti over everything, never in the way of a tap */
.confetti {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}
.confetti i {
  position: absolute;
  top: -5vh;
  left: var(--x);
  width: 7px;
  height: 13px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
  opacity: 0;
  animation: confetti-fall var(--d) linear var(--w) 1 both;
}
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), 112vh) rotate(var(--r));
  }
}
/* never over a match: a run started while the egg is still up hides it */
body.in-run .confetti,
body.in-run #toasts .toast.egg {
  display: none;
}
body.reduce-motion .confetti,
body.reduce-motion #boot {
  transition: none;
}
body.reduce-motion .confetti {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .confetti {
    display: none;
  }
  #boot {
    transition: none;
  }
}