:root {
  --pink: #1ff0c8;
  --cyan: #4f8cff;
  --purple: #7a2bff;
}
:root {
  /* one source of truth for the screen inset AND the hero offset: #login
     (a .screen) and #loading (not one) must land their logo identically,
     so both vars live here where both can inherit them. */
  --screen-pad-t: calc(24px + env(safe-area-inset-top));
  --hero-top: 75px;

  /* CENTRED HUD STACK — #milestone, #race-timer and #combo are all
     absolutely centred and can be on screen at the same moment (hit nitro
     mid-combo during a timed race and all three fire). One row each, from
     one source of truth, so they can never print on top of each other. */
  --hud-row-1: 96px; /* #milestone */
  --hud-row-2: 134px; /* #race-timer */
  --hud-row-3: 172px; /* #combo     */
}

@media (max-width: 640px) {
  :root {
    --screen-pad-t: calc(52px + env(safe-area-inset-top));
    --hero-top: 70px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #05010f;
}

body {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

#app {
  position: fixed;
  inset: 0;
}

canvas {
  display: block;
}

/* ---------- HUD ---------- */
body.menu #hud {
  display: none;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.corner {
  position: absolute;
  top: calc(22px + env(safe-area-inset-top));
  padding: 0 24px;
  text-shadow: 0 0 12px currentColor;
}

#score-wrap {
  left: 0;
  padding-left: calc(24px + env(safe-area-inset-left));
  color: var(--cyan);
}

#speed-wrap {
  right: 0;
  padding-right: calc(24px + env(safe-area-inset-right));
  text-align: right;
  color: var(--pink);
}

.label {
  font-size: 12px;
  letter-spacing: 4px;
  opacity: 0.65;
  font-weight: 600;
}

.value {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#score-wrap .value::after {
  content: " m";
  font-size: 18px;
  opacity: 0.6;
}

#best-wrap {
  left: 0;
  padding-left: calc(24px + env(safe-area-inset-left));
  top: 110px;
  color: #c9a4ff;
}

#best-wrap .label {
  opacity: 0.85;
}

#best-wrap .value {
  text-shadow:
    0 0 10px var(--purple),
    0 1px 3px rgba(0, 0, 0, 0.9);
}

#best-wrap .value::after {
  content: " m";
  font-size: 18px;
  opacity: 0.6;
}

#nitro-wrap {
  margin-top: 8px;
}

#nitro-bar {
  width: 130px;
  height: 7px;
  margin-left: auto;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

#nitro-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 5px;
  background: linear-gradient(90deg, #13f1ff, #7a2bff);
  transition: width 0.15s;
}

#nitro-bar.burn i {
  background: linear-gradient(90deg, #ffe600, #ff2e88);
}

/* points at the TOP, fixed in place — only fades, never moves.
   Sits one line BELOW #milestone so a combo and a milestone flash
   (e.g. "⚡ NITRO") that overlap in time never stack on each other. */
#combo {
  position: absolute;
  top: var(--hud-row-3);
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(15px, 3.2vw, 22px);
  font-weight: 800;
  color: #fff;
  opacity: 0;
  text-shadow: 0 0 14px var(--pink);
  transition: opacity 0.2s;
  letter-spacing: 2px;
  white-space: nowrap;
}

#milestone {
  position: absolute;
  top: var(--hud-row-1);
  left: 50%;
  transform: translateX(-50%);
  /* longest string is "MANUAL — ↑ GAS · ↓ BRAKE"; scale it down rather
     than let it run off the sides of a phone */
  font-size: clamp(15px, 4.2vw, 30px);
  max-width: 92vw;
  font-weight: 900;
  color: #fff;
  opacity: 0;
  letter-spacing: 3px;
  text-shadow: 0 0 22px var(--cyan);
  transition: opacity 0.25s;
  white-space: nowrap;
}

/* Phones and short landscape: the top-centre band is only ~a finger wide
   between #best-wrap (left) and #leaderboard (right), so the two flash
   texts move to their own band at the bottom — clear of both columns and
   of the horn/nitro row. #race-timer stays up top; it is never wide. */
@media (max-width: 640px), (orientation: landscape) and (max-height: 560px) {
  #milestone {
    top: auto;
    bottom: calc(126px + env(safe-area-inset-bottom));
  }

  #combo {
    top: auto;
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
}

/* ---------- live leaderboard (multiplayer) ---------- */
#leaderboard {
  position: absolute;
  top: 120px;
  right: 18px;
  width: 210px;
  pointer-events: none;
  display: none;
  flex-direction: column;
  gap: 5px;
  z-index: 11;
}

#leaderboard.show {
  display: flex;
}

.lb-title {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cyan);
  opacity: 0.7;
  margin-bottom: 2px;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(20, 4, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}

.lb-row.me {
  border-color: var(--pink);
  box-shadow: 0 0 14px rgba(31, 240, 200, 0.35);
}

.lb-row.dead {
  opacity: 0.4;
}

.lb-rank {
  width: 16px;
  opacity: 0.6;
  font-weight: 700;
}

.lb-name {
  flex: 1;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-dist {
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  font-weight: 700;
}

.lb-gap {
  font-size: 10px;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- theme bar (top center) ---------- */
#theme-bar {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 30px;
  background: rgba(12, 2, 28, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#theme-bar .tlabel {
  font-size: 10px;
  letter-spacing: 3px;
  opacity: 0.5;
  margin-right: 2px;
}

.sw {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  border: 2px solid transparent;
  transition:
    transform 0.12s,
    border-color 0.15s;
}

.sw:hover {
  transform: scale(1.18);
}

.sw.active {
  border-color: #fff;
  box-shadow: 0 0 12px currentColor;
}

/* ---------- screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 20px;
  text-align: center;
  pointer-events: auto;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  /* one source of truth for the screen inset: #login-footer bleeds
     edge-to-edge by cancelling exactly these values, so a breakpoint that
     retunes the padding must not leave the footer's margins behind. */
  --screen-pad-r: max(16px, env(safe-area-inset-right));
  --screen-pad-b: calc(24px + env(safe-area-inset-bottom));
  --screen-pad-l: max(16px, env(safe-area-inset-left));
  padding: var(--screen-pad-t) var(--screen-pad-r) var(--screen-pad-b)
    var(--screen-pad-l);
  scrollbar-width: none;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.014) 0 2px,
      transparent 2px 9px
    ),
    radial-gradient(
      130% 110% at 50% 0%,
      rgba(10, 6, 30, 0.38) 0%,
      rgba(3, 2, 12, 0.78) 82%
    );
  transition: opacity 0.5s ease;
  z-index: 20;
}

/* keep buttons from compressing when a screen's content overflows
   (e.g. the title screen with the settings panel open) */
.screen > * {
  flex-shrink: 0;
}

.screen::-webkit-scrollbar {
  display: none;
}

.screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.screen.hidden,
.screen.hidden * {
  pointer-events: none !important;
}

.title {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  transform: skewX(-6deg);
  font-size: clamp(46px, 11vw, 112px);
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 0.9;
  background: linear-gradient(
    175deg,
    #ffffff 0%,
    #e8edff 40%,
    #8fb6ff 68%,
    #5a48ff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 34px rgba(90, 72, 255, 0.5));
  position: relative;
}

.title::after {
  content: "";
  display: block;
  height: 7px;
  margin-top: 10px;
  background: linear-gradient(
    90deg,
    transparent 0,
    #ff3d2e 12%,
    #ff9d2e 50%,
    transparent 88%
  );
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
}

.tagline {
  font-size: 11px;
  letter-spacing: 9px;
  color: #aeb8dd;
  opacity: 0.85;
  font-weight: 700;
  font-style: italic;
}

.name-in {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(160, 180, 255, 0.3);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
  padding: 12px 20px;
  border-radius: 14px;
  width: 240px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.name-in:focus {
  border-color: #7ef7ff;
  box-shadow: 0 0 0 3px rgba(126, 247, 255, 0.15);
}

.name-in::placeholder {
  color: #6b6088;
  letter-spacing: 2px;
}

.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  pointer-events: auto;
  cursor: pointer;
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 15px 40px;
  color: #04040e;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: none;
  /* NOTE: the slant lives on ::before, not on .btn itself.
     clip-path also clips hit-testing, so clipping the button box
     made its angled corners unclickable. Default focus outlines
     trace this unclipped box too, showing as a stray square around
     the slanted button — suppressed here and replaced below. */
  transition:
    filter 0.18s,
    transform 0.14s;
}

.btn:focus-visible {
  filter: brightness(1.12);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  background: linear-gradient(100deg, #8ff8ff 0%, #4f8cff 52%, #6a3bff 115%);
}

/* sheen: a second layer on the SAME clipped element, so it stays
   inside the slanted silhouette without clipping .btn itself */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  background-image: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  background-repeat: no-repeat;
  background-size: 220% 100%;
  animation: sheen 3.4s ease-in-out infinite;
}

@keyframes sheen {
  0%,
  55% {
    background-position: 130% 0;
  }

  78%,
  100% {
    background-position: -130% 0;
  }
}

.btn:hover {
  filter: brightness(1.12);
}

.btn.alt {
  color: #e9edff;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* fill + inset border ride on the clipped layer, not on .btn */
.btn.alt::before {
  background: rgba(16, 18, 40, 0.55);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px rgba(150, 170, 255, 0.35);
}

.btn.alt::after {
  display: none;
}

.btn.alt .ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn.alt:hover::before {
  box-shadow: inset 0 0 0 1.5px rgba(150, 170, 255, 0.8);
  background: rgba(26, 30, 60, 0.7);
}

/* ---------- modal ---------- */
#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 2, 12, 0.72);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  transition:
    opacity 0.18s ease,
    visibility 0s linear 0s;
}

/* NOTE: pointer-events:none on the overlay is NOT enough on its own.
   .btn / inputs inside it declare `pointer-events: auto`, which
   re-enables hit-testing on those descendants even while the dialog is
   invisible — so the faded-out CONFIRM/CANCEL pair kept sitting in the
   middle of the screen swallowing clicks on whatever real button was
   underneath. That's why buttons all over the app were only clickable
   on the parts that stuck out past the invisible dialog. Force the
   whole subtree inert, and drop it out of hit-testing/tab order once
   the fade finishes. */
#modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    visibility 0s linear 0.18s;
}

#modal-overlay.hidden * {
  pointer-events: none !important;
}

.modal-box {
  width: min(340px, 88vw);
  padding: 28px 26px;
  border-radius: 18px;
  text-align: center;
  background: rgba(16, 18, 40, 0.9);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 0 0 1.5px rgba(150, 170, 255, 0.35),
    0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-title {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #e9edff;
  margin-bottom: 18px;
}

.modal-in {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(160, 180, 255, 0.3);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  padding: 12px 16px;
  border-radius: 14px;
  width: 100%;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.modal-in:focus {
  border-color: #7ef7ff;
  box-shadow: 0 0 0 3px rgba(126, 247, 255, 0.15);
}

.modal-btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.btn.bet {
  color: #eafff6;
  text-shadow: 0 0 10px #14f195;
}

.btn.bet::before {
  box-shadow:
    0 0 20px rgba(20, 241, 149, 0.5),
    inset 0 0 16px rgba(20, 241, 149, 0.25);
}

.tier-btn.on {
  color: #eafff6;
  text-shadow: 0 0 10px #14f195;
}

.btn.tier-btn.on::before {
  box-shadow:
    inset 0 0 0 1.5px #14f195,
    inset 0 0 18px rgba(20, 241, 149, 0.35);
}

.bet-line {
  font-size: 14px;
  letter-spacing: 2px;
  color: #14f195;
  text-shadow: 0 0 12px rgba(20, 241, 149, 0.5);
}

#payout {
  font-size: 15px;
  letter-spacing: 2px;
  color: #14f195;
  text-shadow: 0 0 14px #14f195;
  font-weight: 700;
  min-height: 22px;
}

#payout a {
  color: #9fffe0;
}

.btn:hover {
  transform: scale(1.06);
}

.btn:active {
  transform: scale(0.97);
}

.hint {
  font-size: 13px;
  letter-spacing: 2px;
  color: #9a8fb5;
}

.hint b {
  color: #fff;
}

/* lobby */
#lobby .big {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-size: clamp(30px, 7vw, 64px);
  font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(100deg, #8ff8ff 0%, #4f8cff 52%, #6a3bff 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#car-bar,
#map-bar,
#dur-bar,
#acc-bar,
#solo-acc,
#gfx-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#solo-acc,
#gfx-bar {
  flex-direction: row;
  gap: 8px;
}

/* label sits centered on its own line, options wrap to the next line */
#solo-acc .tlabel,
#gfx-bar .tlabel,
#map-bar .tlabel,
#dur-bar .tlabel,
#acc-bar .tlabel {
  width: 100%;
  text-align: center;
  order: -1;
  margin-bottom: 2px;
}

.tlabel {
  font-size: 10px;
  letter-spacing: 3px;
  opacity: 0.5;
}

/* ---- neon HUD pills ----
   Title screen: DRIVE ASSIST + GRAPHICS (fixed widths below).
   Lobby: MAP / RACE TIME / SPEED (widths hug their labels). */
#solo-acc .dur-chip,
#gfx-bar .dur-chip,
#map-bar .dur-chip,
#dur-bar .dur-chip,
#acc-bar .dur-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  height: 35px;
  padding: 0 14px;

  border: 1px solid rgba(25, 232, 255, 0.32);
  border-radius: 9999px;

  background: rgba(5, 12, 22, 0.9);

  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  white-space: nowrap;

  cursor: pointer;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/* widths per the reference proportions */
#solo-acc .dur-chip[data-mode="auto"] {
  width: 136px;
}

#solo-acc .dur-chip[data-mode="manual"] {
  width: 125px;
}

#gfx-bar .dur-chip {
  width: 120px;
}

/* lobby bars: let each pill size to its own label */
#map-bar .dur-chip,
#dur-bar .dur-chip,
#acc-bar .dur-chip {
  padding: 0 18px;
}

#solo-acc .dur-chip:hover,
#gfx-bar .dur-chip:hover,
#map-bar .dur-chip:hover,
#dur-bar .dur-chip:hover,
#acc-bar .dur-chip:hover {
  border-color: rgba(25, 232, 255, 0.7);
  box-shadow:
    0 0 6px rgba(25, 232, 255, 0.35),
    inset 0 0 8px rgba(25, 232, 255, 0.1);
}

#solo-acc .dur-chip.active,
#gfx-bar .dur-chip.active,
#map-bar .dur-chip.active,
#dur-bar .dur-chip.active,
#acc-bar .dur-chip.active {
  border-color: #19e8ff;
}

/* keep both rows on one line and inside the viewport on phones */
@media (max-width: 560px) {
  #solo-acc,
  #gfx-bar {
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 8px;
  }

  #solo-acc .dur-chip,
  #gfx-bar .dur-chip {
    height: 32px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.6px;
  }

  #solo-acc .dur-chip[data-mode="auto"],
  #solo-acc .dur-chip[data-mode="manual"] {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 48%;
    padding: 0 14px;
  }

  #gfx-bar .dur-chip {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 96px;
  }
}

#env-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 2px 0;
}

#env-bar .tlabel {
  font-size: 10px;
  letter-spacing: 3px;
  opacity: 0.5;
  margin-right: 2px;
  padding: 6px;
}

.env-chip {
  pointer-events: auto;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 8px 18px;
  color: #fff;
  background: rgba(20, 4, 40, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  transition: border-color 0.15s;
}

.env-chip.active {
  border-color: var(--pink);
  box-shadow: 0 0 12px rgba(31, 240, 200, 0.4);
}

/* ---------- weather dropdown (title + multiplayer menu) ---------- */
.dd {
  position: relative;
  pointer-events: auto;
}

.dd-btn {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(160, 180, 255, 0.3);
  border-radius: 20px;
  padding: 9px 16px;
  transition: border-color 0.15s;
}

.dd-btn:hover {
  border-color: rgba(160, 180, 255, 0.6);
}

.dd-chev {
  opacity: 0.6;
  font-size: 11px;
  transition: transform 0.15s;
}

.dd.open .dd-chev {
  transform: rotate(180deg);
}

#env-bar {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  min-width: 220px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(10, 8, 24, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(160, 180, 255, 0.25);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  display: none;
}

.dd.open #env-bar {
  display: flex;
}

#env-bar .tlabel {
  display: none;
}

/* multiplayer race-settings panel + settings screen MAP section: show every
   map chip inline instead of behind the collapsed dropdown button */
#weather-slot-mp .dd-btn,
#weather-slot-settings .dd-btn {
  display: none;
}

#weather-slot-mp #env-bar,
#weather-slot-settings #env-bar {
  display: flex;
  position: static;
  transform: none;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  background: none;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ---------- lobby MAP / RACE TIME / SPEED dropdowns (mobile only —
   see the @media block below for the collapsed/expandable look;
   on desktop this wrapper is invisible and the chip row shows as
   it always has) ---------- */
.chip-dd {
  position: relative;
}

.chip-dd-btn {
  display: none;
}

/* desktop default for markup shared with the mobile lobby cards
   (invite-code row) — inline, so it still reads as one sentence
   until the mobile media query turns it into a stacked card */
.chip-dd-icon {
  display: none;
}

.back-chev {
  display: none;
}

.chip-dd-text {
  display: inline;
}

.chip-dd-caption {
  display: none;
}

.chip-dd-cur {
  display: inline;
}

/* ---------- invite card: copyable/shareable room-code card shown in
   the battle lobby, same size at every viewport ---------- */
.invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  text-align: left;
  background: rgba(18, 16, 34, 0.6);
  border: 1px solid rgba(160, 180, 255, 0.2);
  border-radius: 14px;
  padding: 12px 16px;
}

.invite-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.invite-card-label {
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.55;
  font-weight: 700;
}

.invite-card-code {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 6px;
  color: #fff;
  text-shadow: 0 0 14px rgba(79, 140, 255, 0.5);
}

.invite-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.invite-card-btn {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(160, 180, 255, 0.3);
  border-radius: 10px;
  padding: 8px 12px;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.invite-card-btn:hover {
  border-color: rgba(160, 180, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

.invite-card-btn.copied {
  border-color: var(--cyan, #4f8cff);
  color: var(--cyan, #4f8cff);
}

.invite-card-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #fff;
  opacity: 0.95;
}

/* ---------- back button (top-left, matches wallet-chip's top-right corner) ---------- */
.corner-back {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  z-index: 40;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #eafff6;
  background: rgba(10, 8, 20, 0.72);
  border: 1px solid rgba(160, 180, 255, 0.35);
  border-radius: 20px;
  padding: 8px 16px 8px 12px;
  transition: border-color 0.15s;
}

.corner-back:hover {
  border-color: #14f195;
}

/* ---------- multiplayer mode-select menu ---------- */
.mp-heading {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 3px;
  font-size: clamp(26px, 5vw, 40px);
  background: linear-gradient(100deg, #8ff8ff 0%, #4f8cff 52%, #6a3bff 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mp-sub {
  font-size: 11px;
  letter-spacing: 4px;
  color: #9a8fb5;
  margin-top: -12px;
}

.mp-net-status {
  font-size: 11px;
  letter-spacing: 2px;
  color: #9a8fb5;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mp-net-status .dot {
  color: #ff5c5c;
}

.mp-net-status.is-online .dot {
  color: #39ff8f;
}

.mp-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
}

.mp-card {
  cursor: pointer;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(16, 18, 40, 0.55);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  transition:
    border-color 0.15s,
    transform 0.12s,
    box-shadow 0.15s;
}

.mp-card:hover {
  transform: translateY(-2px);
}

.mp-card .mp-icon {
  font-size: 28px;
}

.mp-card .mp-card-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
}

.mp-card .mp-card-desc {
  font-size: 11px;
  line-height: 1.5;
  color: #9a8fb5;
}

.mp-card[data-mode="create"].active {
  border-color: var(--cyan);
  box-shadow: 0 0 20px rgba(79, 140, 255, 0.35);
}

.mp-card[data-mode="join"].active {
  border-color: #a78bfa;
  box-shadow: 0 0 20px rgba(122, 43, 255, 0.35);
}

.mp-card[data-mode="private"].active {
  border-color: #ffd166;
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.35);
}

.mp-wide-btn {
  width: 220px;
  text-align: center;
}

.mp-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

@media (min-width: 641px) {
  .mp-actions {
    display: grid;
    grid-template-columns: repeat(2, 220px);
    gap: 12px;
  }

  .mp-actions .mp-wide-btn {
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

#mp-confirm:disabled,
#mp-confirm.disabled {
  opacity: 0.35;
  filter: grayscale(0.4);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- race settings (full-screen) ---------- */
#race-settings {
  gap: 26px;
}

.rs-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.rs-title {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 3px;
  font-size: clamp(26px, 5vw, 40px);
  background: linear-gradient(100deg, #8ff8ff 0%, #4f8cff 52%, #6a3bff 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rs-sub {
  font-size: 11px;
  letter-spacing: 4px;
  color: #9a8fb5;
}

.rs-body {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  pointer-events: auto;
}

.rs-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px 22px;
  border-radius: 18px;
  background: rgba(16, 18, 40, 0.55);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
}

.rs-card-label {
  font-size: 11px;
  letter-spacing: 3px;
  color: #9a8fb5;
  font-weight: 700;
}

/* upsize the shared weather chips into full option cards on this page */
#race-settings #weather-slot-mp #env-bar {
  gap: 12px;
}

#race-settings #weather-slot-mp .env-chip {
  padding: 14px 22px;
  font-size: 13px;
  border-radius: 14px;
}

#race-settings #weather-slot-mp .env-chip.active {
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(79, 140, 255, 0.45);
}

.rs-confirm:focus-visible,
#mp-back:focus-visible,
#rs-open-btn:focus-visible,
#rs-back:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.car-card {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 4, 40, 0.55);
  transition:
    transform 0.12s,
    border-color 0.15s;
}

.car-card:hover {
  transform: scale(1.08);
}

.car-card.active {
  border-color: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}

.cc-body {
  width: 46px;
  height: 12px;
  border-radius: 5px;
}

.cc-trim {
  width: 30px;
  height: 4px;
  border-radius: 2px;
}

.cc-name {
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.7;
  font-weight: 700;
}

.cc-stat {
  font-size: 8px;
  letter-spacing: 1px;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.dur-chip {
  pointer-events: auto;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 8px 18px;
  color: #fff;
  background: rgba(20, 4, 40, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  transition: border-color 0.15s;
}

.dur-chip.active {
  border-color: var(--pink);
}

.pl-num {
  color: var(--cyan);
}

.res-bal {
  font-size: 12px;
  color: #14f195;
  font-variant-numeric: tabular-nums;
}

#race-timer {
  position: absolute;
  top: var(--hud-row-2);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 16px var(--cyan);
  font-variant-numeric: tabular-nums;
}

#race-timer.urgent {
  color: #ff5e5e;
  text-shadow: 0 0 18px #ff5e5e;
}

#countdown {
  font-size: 80px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 30px var(--pink);
  font-variant-numeric: tabular-nums;
}

#countdown.waiting-text {
  font-size: 22px;
  letter-spacing: 3px;
  text-shadow: 0 0 16px var(--cyan);
}

#lobby-sub {
  font-size: 14px;
  letter-spacing: 3px;
  color: #9a8fb5;
}

#lobby-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
  max-height: 220px;
  overflow: auto;
  touch-action: pan-y;
}

.pl-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(20, 4, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 700;
  letter-spacing: 1px;
}

.pl-row.me {
  border-color: var(--pink);
}

/* crash / results */
#crash .big,
#results .big {
  font-size: clamp(36px, 8vw, 84px);
  font-weight: 900;
  color: var(--pink);
  text-shadow: 0 0 28px var(--pink);
  letter-spacing: 4px;
}

#new-best {
  color: #ffe600;
  text-shadow: 0 0 18px #ffe600;
  font-weight: 800;
  letter-spacing: 3px;
  font-size: 15px;
  opacity: 0;
}

.stat-row {
  display: flex;
  gap: 48px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat .k {
  font-size: 12px;
  letter-spacing: 3px;
  opacity: 0.6;
}

.stat .v {
  font-size: 36px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#crash .stat:nth-child(1) .v {
  color: var(--cyan);
}

#crash .stat:nth-child(2) .v {
  color: var(--purple);
}

#spectate {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--cyan);
  opacity: 0;
}

#results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 300px;
  max-height: 260px;
  overflow: auto;
  touch-action: pan-y;
}

.res-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-radius: 10px;
  background: rgba(20, 4, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 700;
}

.res-row.me {
  border-color: var(--pink);
  box-shadow: 0 0 14px rgba(31, 240, 200, 0.3);
}

.res-row.win {
  border-color: #ffe600;
  box-shadow: 0 0 16px rgba(255, 230, 0, 0.4);
}

.res-rank {
  width: 28px;
  font-weight: 900;
  opacity: 0.8;
}

.res-name {
  flex: 1;
  letter-spacing: 1px;
}

.res-dist {
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

#wallet-chip {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  z-index: 45;
  font-size: 12px;
  letter-spacing: 1px;
  color: #eafff6;
  background: rgba(10, 8, 20, 0.72);
  border: 1px solid #14f19555;
  border-radius: 20px;
  padding: 7px 14px;
  cursor: pointer;
  user-select: none;
}

/* it's a rounded pill, not a slanted .btn — drop the inherited
   clipped layer and its sheen so the whole pill stays clickable */
#wallet-chip::before,
#wallet-chip::after {
  display: none;
}

#login-back-btn {
  min-width: 120px;
  padding: 11px 28px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  color: #eafff6;

  background: none;
  border: none;
  border-radius: 0;

  position: relative;
  isolation: isolate;

  cursor: pointer;
  user-select: none;

  /* slant on ::before so the button box stays fully clickable */

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
/* Default: hidden on login */
#login .auth-info {
  display: none;
}

/* Show information when signup form is active */
#login.signup-active .auth-info {
  display: block;
}
#login-back-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);

  background: linear-gradient(
    135deg,
    rgba(25, 18, 45, 0.95),
    rgba(20, 15, 38, 0.95)
  );

  box-shadow:
    inset 0 0 0 1px #14f195,
    0 0 8px rgba(20, 241, 149, 0.25),
    inset 0 0 12px rgba(20, 241, 149, 0.08);

  transition:
    box-shadow 0.2s ease,
    background 0.2s ease;
}

#login-back-btn:hover::before {
  box-shadow:
    inset 0 0 0 1px #14f195,
    0 0 14px rgba(20, 241, 149, 0.45),
    inset 0 0 14px rgba(20, 241, 149, 0.12);

  background: linear-gradient(
    135deg,
    rgba(30, 22, 55, 0.98),
    rgba(24, 18, 45, 0.98)
  );
}

#login-back-btn:active {
  transform: translateY(1px);
}

#wallet-chip:hover {
  border-color: #14f195;
  box-shadow: 0 0 14px rgba(20, 241, 149, 0.25);
}

body:has(#login:not(.hidden)) #wallet-chip,
body:has(#loading:not(.hidden)) #wallet-chip {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #3355ff;
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid rgba(51, 85, 255, 0.55);
  box-shadow: 0 6px 18px rgba(20, 30, 80, 0.14);
}

body:has(#login:not(.hidden)) #wallet-chip:hover,
body:has(#loading:not(.hidden)) #wallet-chip:hover {
  border-color: #3355ff;
  box-shadow: 0 6px 20px rgba(51, 85, 255, 0.3);
}

body:has(#login:not(.hidden)) #wallet-chip .wa,
body:has(#loading:not(.hidden)) #wallet-chip .wa {
  color: #7480a0;
}

body:has(#login:not(.hidden)) #wallet-chip b,
body:has(#loading:not(.hidden)) #wallet-chip b {
  color: #0e9e63;
}

#wallet-chip .wa {
  color: #7a6f95;
  margin-left: 6px;
}

#wallet-chip b {
  color: #14f195;
  font-weight: 600;
}

#toast-stack {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(10, 8, 20, 0.92);
  border: 1px solid #ffb02e55;
  border-radius: 10px;
  color: #eafff6;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-ico {
  color: #ffb02e;
  font-size: 13px;
  line-height: 1;
}

#wallet-menu {
  position: absolute;
  top: calc(48px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  z-index: 40;
  min-width: 260px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #eafff6;
  background: rgba(10, 8, 20, 0.92);
  border: 1px solid #14f19555;
  border-radius: 12px;
  padding: 10px;
}

#wallet-tokens {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  max-height: 200px;
  overflow-y: auto;
  touch-action: pan-y;
}

.wt-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(20, 241, 149, 0.06);
}

.wt-row.wt-max {
  background: rgba(20, 241, 149, 0.16);
  border: 1px solid #14f19555;
}

.wt-label {
  color: #7a6f95;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wt-mint {
  font-family: monospace;
  color: #eafff6;
}

.wt-amt {
  color: #14f195;
  font-weight: 600;
  white-space: nowrap;
}

#wallet-logout-btn {
  width: 100%;
}

body:has(#garage:not(.hidden)) #mute,
body:has(#garage:not(.hidden)) #wallet-chip {
  display: none;
}

/* same chip treatment as #wallet-chip: dark translucent fill with a
   green-tinted hairline border, sized square around the glyph */
#mute {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom));
  right: calc(20px + env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(10, 8, 20, 0.72);
  border: 1px solid #14f19555;
  border-radius: 20px;
  color: #eafff6;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  opacity: 0.75;
  font-size: 16px;
  line-height: 1;
  transition: opacity 0.2s;
  z-index: 30;
}

#horn-btn {
  display: none;
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: calc(50% - 12px);
  transform: translateX(-100%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 30;
  user-select: none;
  -webkit-user-select: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  padding: 12px 26px;
  border-radius: 40px;
  border: 2px solid #ffcf33;
  background: rgba(30, 20, 0, 0.35);
  text-shadow: 0 0 10px #ffcf33;
  box-shadow: 0 0 18px rgba(255, 207, 51, 0.4);
  transition:
    transform 0.08s,
    box-shadow 0.1s;
}

#horn-btn:active {
  transform: translateX(-100%) scale(0.94);
  box-shadow: 0 0 28px rgba(255, 207, 51, 0.9);
}

#nitro-btn {
  display: none;
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: calc(50% + 12px);
  pointer-events: auto;
  cursor: pointer;
  z-index: 30;
  user-select: none;
  -webkit-user-select: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  padding: 12px 22px;
  border-radius: 40px;
  border: 2px solid #13f1ff;
  background: rgba(0, 20, 30, 0.35);
  text-shadow: 0 0 10px #13f1ff;
  box-shadow: 0 0 18px rgba(19, 241, 255, 0.4);
  transition: transform 0.08s;
}

#nitro-btn:active {
  transform: scale(0.94);
}

#rankings .big {
  color: var(--cyan);
}

#rk-personal,
#rk-alltime {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: min(420px, 86vw);
  max-height: 30vh;
  overflow: auto;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#rk-personal::-webkit-scrollbar,
#rk-alltime::-webkit-scrollbar {
  display: none;
}

.rk-title {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--cyan);
  opacity: 0.7;
  margin: 10px 0 2px;
  align-self: flex-start;
}

.rk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 9px;
  background: rgba(20, 4, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 700;
}

.rk-row.me {
  border-color: var(--pink);
  box-shadow: 0 0 12px rgba(31, 240, 200, 0.3);
}

.rk-rank {
  width: 60px;
  opacity: 0.7;
}

.rk-name {
  flex: 1;
  text-align: center;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rk-dist {
  width: 60px;
  text-align: right;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.rk-empty {
  opacity: 0.5;
  font-size: 13px;
  padding: 8px;
}

/* ---------- transaction history (inflow / outflow) ---------- */
#tx-totals {
  display: flex;
  gap: 10px;
  width: min(560px, 92vw);
  margin: 0;
}

.tx-total {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(20, 4, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.tx-total-label {
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.55;
}

.tx-total-amt {
  margin-top: 3px;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tx-total-amt.in {
  color: #14f195;
}

.tx-total-amt.out {
  color: #ff6b81;
}

#tx-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: min(560px, 92vw);
  max-height: 38vh;
  overflow: auto;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#tx-list::-webkit-scrollbar {
  display: none;
}

.tx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(20, 4, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.tx-row.pending {
  opacity: 0.75;
  border-style: dashed;
}

.tx-row.failed,
.tx-row.cancelled {
  opacity: 0.5;
}

.tx-arrow {
  width: 18px;
  font-weight: 900;
  font-size: 15px;
  text-align: center;
}

.tx-arrow.in {
  color: #14f195;
}

.tx-arrow.out {
  color: #ff6b81;
}

.tx-main {
  flex: 1;
  min-width: 0;
}

.tx-type {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.tx-sub {
  font-size: 10px;
  letter-spacing: 0.5px;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-sub a {
  color: var(--cyan);
}

.tx-amt {
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tx-amt.in {
  color: #14f195;
}

.tx-amt.out {
  color: #ff6b81;
}

.tx-status {
  font-size: 9px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.8;
}

.tx-status.confirmed {
  display: none;
}

.tx-empty {
  opacity: 0.5;
  font-size: 13px;
  padding: 10px;
}

#mute:hover {
  opacity: 1;
}

/* the gear is the icon-only fallback for the phone chip, where
   .settings-label is hidden — off on desktop, same as .wallet-ico */
#settings-btn .ico {
  display: none;
}

/* matches .wallet-ico .wallet-svg — sized off the chip's font-size */
#mute .mute-svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
}

#mute .mute-off,
#mute.is-muted .mute-on {
  display: none;
}

#mute.is-muted .mute-off {
  display: block;
}

.touch-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 15;
  display: none;
  touch-action: none;
}

#touch-left {
  left: 0;
}

#touch-right {
  right: 0;
}

body.touch .touch-zone {
  display: block;
}

#loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--screen-pad-t) + var(--hero-top))
    max(16px, env(safe-area-inset-right))
    calc(64px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  z-index: 40;
  overflow: hidden;
  color: #101a3a;
  background:
    url("firstScreen.jpg") center bottom / cover no-repeat,
    #cfe2f5;
  transition: opacity 0.4s ease;
}

#loading.hidden {
  display: none;
}
/* same daylight haze as #login::before — the two screens are one shot */
#loading::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.14) 26%,
    rgba(255, 255, 255, 0) 52%
  );
}

#loading > * {
  /* position: relative; */
  z-index: 1;
}

#loading-title {
  text-align: center;
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  transform: skewX(-6deg);
  font-size: clamp(40px, 9vw, 88px);
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 0.9;
  text-transform: uppercase;
  color: #101a3a;
  -webkit-text-fill-color: #101a3a;
  filter: drop-shadow(0 4px 18px rgba(255, 255, 255, 0.6));
  position: relative;
}

#loading-title::after {
  content: "";
  display: block;
  height: 5px;
  margin: 12px auto 0;
  width: min(78%, 360px);
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ff4d8f 11%,
    #4f7dff 46%,
    #7a3bff 79%,
    transparent 100%
  );
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
}

#loading-tagline {
  margin-top: 10px;
  font-size: clamp(10px, 1.6vw, 13px);
  font-weight: 700;
  letter-spacing: 3px;
  color: #33405e;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
}

#loading-ring {
  position: relative;
  width: clamp(140px, 22vw, 190px);
  height: clamp(140px, 22vw, 190px);
  margin: clamp(20px, 4vh, 36px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#loading-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

#loading-ring .ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 6;
}

#loading-ring .ring-fill {
  fill: none;
  stroke: url(#loading-ring-grad);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
  filter: drop-shadow(0 2px 6px rgba(64, 86, 226, 0.45));
}

#loading-pct {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  color: #101a3a;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.85);
}

#loading-steps {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 2.6vw, 22px);
  margin-top: clamp(16px, 3vh, 28px);
  width: min(92vw, 620px);
}

#loading-steps::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 20px;
  height: 1px;
  background: rgba(20, 32, 84, 0.18);
  z-index: -1;
}

#loading-steps .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px;
  flex: none;
  text-align: center;
}

#loading-steps .step .label {
  min-height: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#loading-steps .step .dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  border: 1.5px solid rgba(20, 32, 84, 0.14);
  background: rgba(255, 255, 255, 0.85);
  color: rgba(16, 26, 58, 0.4);
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

#loading-steps .step .label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(16, 26, 58, 0.45);
  transition: color 0.25s ease;
}

#loading-steps .step.done .dot {
  border-color: #3355ff;
  color: #3355ff;
  background: #fff;
  box-shadow: 0 4px 14px rgba(51, 85, 255, 0.28);
}

#loading-steps .step.done .label,
#loading-steps .step.active .label {
  color: #101a3a;
}

#loading-steps .step.active .dot {
  border-color: #8b3cf0;
  color: #101a3a;
  background: #fff;
  box-shadow: 0 4px 16px rgba(139, 60, 240, 0.4);
  animation: loading-pulse 1.1s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%,
  100% {
    box-shadow: 0 4px 16px rgba(139, 60, 240, 0.4);
  }
  50% {
    box-shadow: 0 6px 24px rgba(139, 60, 240, 0.7);
  }
}

#loading-tip {
  margin-top: clamp(18px, 4vh, 30px);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(88vw, 460px);
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 40px rgba(20, 32, 84, 0.2);
  backdrop-filter: blur(10px);
}

#loading-tip .tip-badge {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(90deg, #2f6bff, #8b3cf0);
  border-radius: 6px;
  padding: 4px 8px;
}

#loading-tip .tip-text {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  color: #3b4763;
}

@media (max-width: 640px) {
  #loading-steps {
    gap: 4px;
    width: min(96vw, 420px);
  }

  #loading-steps::before {
    left: 10%;
    right: 10%;
    top: 16px;
  }

  #loading-steps .step {
    width: 56px;
    gap: 4px;
  }

  #loading-steps .step .dot {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  #loading-steps .step .label {
    font-size: 7.5px;
    letter-spacing: 0.5px;
    min-height: 18px;
  }
}

/* ---------- LOGIN (first page: name + PIN) ---------- */
/* login: daylight circuit photo behind a light "paper" sign-in card.
   This screen is the one light-themed surface in the app, so every
   colour below is set explicitly rather than inherited from the dark
   defaults the rest of the screens share. */
/* =========================================================
LOGIN ROAD MOTION
Creates the illusion that the road is rushing past
========================================================= */

#login {
  isolation: isolate;
}

#login .road-motion {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Make sure actual login content stays above animation */
#login > *:not(.road-motion) {
  position: relative;
  z-index: 2;
}

/* LEFT SIDE */
.road-arrows-left {
  position: absolute;
  left: -40px;
  top: 55%;
  display: flex;
  gap: 35px;

  font-family: Arial, sans-serif;
  font-size: 70px;
  font-weight: 900;

  color: #4f8cff;
  text-shadow:
    0 0 8px #4f8cff,
    0 0 20px #4f8cff,
    0 0 40px rgba(79, 140, 255, 0.8);

  animation: roadRushLeft 1.2s linear infinite;
}
/* =========================================================
   NEW RACE FOR SPEED LOGO
   No conflict with existing logo classes
   ========================================================= */

.speed-brand-logo {
  width: min(600px, 80vw);

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-weight: 900;

  transform: skewX(-5deg);
}

/* RACE */

.speed-brand-race {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.85;

  letter-spacing: 3px;

  color: #ffffff;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 16px rgba(255, 255, 255, 0.25);
}

/* FOR */

.speed-brand-for {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;
  margin: 7px 0;

  font-size: clamp(15px, 2vw, 24px);

  letter-spacing: 3px;

  color: #ffffff;

  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

/* Lines */

/* same tapered blade as the login hero's .rfs-for .line — flat gradient,
   no glow, clipped to the wedge */

.speed-brand-line {
  height: 3px;
  max-width: 110px;
  flex: 1;

  clip-path: polygon(0 20%, 100% 0, 96% 100%, 0 80%);
}

/* Left blue line */

.speed-brand-line-left {
  background: linear-gradient(90deg, transparent, #2f7cff);
}

/* Right pink line */

.speed-brand-line-right {
  background: linear-gradient(90deg, #ff3d6e, transparent);
}

/* SPEED */

.speed-brand-speed {
  font-size: clamp(46px, 7vw, 78px);
  line-height: 0.82;

  letter-spacing: 2px;

  background: linear-gradient(
    90deg,
    #249cff 0%,
    #416cff 35%,
    #873dff 65%,
    #ff3276 100%
  );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 4px 10px rgba(40, 100, 255, 0.5));
}
/* RIGHT SIDE */
.road-arrows-right {
  position: absolute;
  right: -40px;
  top: 55%;
  display: flex;
  gap: 35px;

  font-family: Arial, sans-serif;
  font-size: 70px;
  font-weight: 900;

  color: #ff3d9a;
  text-shadow:
    0 0 8px #ff3d9a,
    0 0 20px #ff3d9a,
    0 0 40px rgba(255, 61, 154, 0.8);

  animation: roadRushRight 1.2s linear infinite;
}

/* LEFT arrows rush outward */
@keyframes roadRushLeft {
  from {
    transform: translateX(0) scaleX(1);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  to {
    transform: translateX(-500px) scaleX(1.25);
    opacity: 0;
  }
}

/* RIGHT arrows rush outward */
@keyframes roadRushRight {
  from {
    transform: translateX(0) scaleX(1);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  to {
    transform: translateX(500px) scaleX(1.25);
    opacity: 0;
  }
}
/* haze: lifts the sky a touch so the dark wordmark keeps its contrast
   against the brightest part of the photo. Deliberately much lighter
   than a normal scrim — the daylight shot is the look. */
#login::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.14) 26%,
    rgba(255, 255, 255, 0) 52%
  );
}

#login.hidden {
  display: none;
}

#login > * {
  position: relative;
  z-index: 1;
}

/* centering column: the title + sign-in card stay optically centred in
   whatever room is left between the top bar and the footer, on every
   viewport (phone, tablet, desktop, landscape). It grows to fill the
   free space but never shrinks, so when the content is taller than the
   screen it keeps its natural height and #login scrolls instead of
   clipping the card. */

/* wordmark: "RACE FOR" is solid ink, "SPEED" carries the blue->violet
   gradient. .title paints its own gradient through background-clip, so
   the base has to be reset to a plain fill before the accent span can
   set one of its own. */
#login .title {
  font-size: clamp(40px, 9vw, 88px);
  background: none;
  color: #101a3a;
  -webkit-text-fill-color: #101a3a;
  filter: drop-shadow(0 4px 18px rgba(255, 255, 255, 0.6));
}

#login .title .ttl-accent,
#loading-title .ttl-accent {
  background: linear-gradient(
    100deg,
    #2f6bff 0%,
    #4f7dff 28%,
    #7a3bff 76%,
    #9b2bff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#login .title::after {
  height: 5px;
  margin-top: 12px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ff4d8f 11%,
    #4f7dff 46%,
    #7a3bff 79%,
    transparent 100%
  );
}

#login-topbar {
  position: absolute;
  top: calc(24px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  right: calc(16px + env(safe-area-inset-right));
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 2;
}

#login-online {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #16263f;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(20, 241, 149, 0.45);
  border-radius: 20px;
  padding: 7px 14px;
  box-shadow: 0 6px 18px rgba(20, 30, 80, 0.14);
}

#login-online .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0ecb7f;
  box-shadow: 0 0 6px rgba(14, 203, 127, 0.8);
}

#login-online .sig {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 9px;
}

#login-online .sig i {
  display: block;
  width: 3px;
  background: #0ecb7f;
  border-radius: 1px;
  opacity: 0.95;
}

#login-online .sig i:nth-child(1) {
  height: 40%;
}
#login-online .sig i:nth-child(2) {
  height: 65%;
}
#login-online .sig i:nth-child(3) {
  height: 100%;
}

#login-wallet-btn {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: #3355ff;
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid rgba(51, 85, 255, 0.55);
  border-radius: 20px;
  padding: 7px 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20, 30, 80, 0.14);
}

#login-wallet-btn:hover {
  border-color: #3355ff;
  box-shadow: 0 6px 20px rgba(51, 85, 255, 0.3);
}

/* the wallet glyph is the icon-only fallback for narrow screens, where
   .wallet-label is hidden — off everywhere else */
#login-wallet-btn .wallet-ico {
  display: none;
}

/* line-art wallet mark; inherits the pill's text colour so it works
   on both the light login button and the dark in-game chip */
.wallet-ico .wallet-svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
}

#login .lg-card {
  pointer-events: auto;
  width: min(90vw, 380px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 30px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  border-radius: 24px;
  box-shadow:
    0 26px 60px rgba(20, 32, 84, 0.24),
    0 3px 10px rgba(20, 32, 84, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#login .lg-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #3355ff;
  opacity: 1;
  text-shadow: none;
}

#login label {
  text-align: left;
  font-size: 11px;
  letter-spacing: 2px;
  color: #101a3a;
  opacity: 0.8;
  font-weight: 800;
  margin-bottom: -8px;
}

#login input {
  pointer-events: auto;
  background: #fff;
  border: 1.5px solid #e2e6f1;
  color: #101a3a;
  box-shadow: inset 0 1px 2px rgba(20, 32, 84, 0.05);
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

#login input:focus {
  border-color: #3355ff;
  box-shadow: 0 0 0 3px rgba(51, 85, 255, 0.16);
}

#login input#pin-in {
  letter-spacing: 14px;
  font-size: 24px;
}

#login input::placeholder {
  color: #a9b2c9;
  letter-spacing: 2px;
}

/* the shared .btn gradient opens on cyan, which goes chalky on a white
   card — the sign-in button runs blue -> violet instead, in white ink */
#login #login-btn {
  color: #fff;
  margin-top: 2px;
  filter: drop-shadow(0 10px 20px rgba(64, 86, 226, 0.35));
}

#login #login-btn::before {
  background: linear-gradient(100deg, #2f6bff 0%, #5a5cff 46%, #8b3cf0 100%);
}

#login #login-btn:hover,
#login #login-btn:focus-visible {
  filter: drop-shadow(0 12px 24px rgba(64, 86, 226, 0.45)) brightness(1.08);
}

#lg-error {
  min-height: 16px;
  font-size: 12px;
  color: #e0245e;
  font-weight: 700;
  letter-spacing: 1px;
}

#lg-hint {
  font-size: 10px;
  color: #5b6683;
  opacity: 1;
  letter-spacing: 0.5px;
  line-height: 1.45;
  text-align: center;
}

#lg-hint .lg-hint-divider {
  margin: 6px 0;
  opacity: 0.45;
  color: #9aa5c0;
}

#lg-hint b {
  color: #101a3a;
  font-weight: 800;
  opacity: 1;
}

/* ---------- GARAGE (vehicle showroom) ---------- */
#garage {
  z-index: 30;
  background: #02030a;
  gap: 0;
  padding: 0;
  justify-content: flex-start;
}

#garage.hidden {
  display: none;
}

/* --- neon showroom backdrop: a single pre-rendered plate (garaze.png)
   that already contains the podium, its light ring and the wet floor. --- */
#garage-bg {
  /* How far the plate is lifted above the viewport's top edge. The box is
     grown upward (not translated) so `cover` still fills the screen —
     there is no bare strip left at the bottom. garage.js reads this box
     back with getBoundingClientRect(), so the podium (and the car parked
     on it) rides up with the plate. Tune this one number. */
  --garage-bg-lift: 140px;

  position: absolute;
  inset: calc(-1 * var(--garage-bg-lift)) 0 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;

  /* Desktop background */
  background: #04070f url("garaze.png") no-repeat 50% 50% / cover;
}

/* =========================
PORTRAIT (phones + tablets held upright)
=========================

Keyed on the viewport's shape, not its width: `cover` fits the plate by its
SHORT axis, so putting the landscape plate in a taller-than-wide box blows
the podium up far wider than the screen (an iPad in portrait rendered a
~1100px podium on an 820px viewport). The portrait plate is the one whose
aspect matches, so it keeps the podium on screen at a sane size.

No `scale` zoom here — garage.js reads this background-image and
background-position back to work out where the podium lands, and a zoom just
crops floor away for no gain. */

@media (max-aspect-ratio: 1 / 1) {
  #garage-bg {
    --garage-bg-lift: 0px; /* portrait plate already fits — no lift */

    background-image: url("garage-mobile.png");

    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

/* darken the edges so the tabs, stats and cards stay readable on top */
#garage-bg::after {
  content: "";
  position: absolute;
  /* pinned to the viewport, not the lifted plate, so the edge darkening
     still lands on the visible area */
  inset: var(--garage-bg-lift) 0 0 0;
  background:
    linear-gradient(
      180deg,
      rgba(2, 4, 12, 0.62) 0%,
      rgba(2, 4, 12, 0.12) 22%,
      transparent 45%,
      rgba(2, 4, 12, 0.35) 82%,
      rgba(2, 4, 12, 0.72) 100%
    ),
    radial-gradient(
      110% 85% at 50% 46%,
      transparent 45%,
      rgba(0, 0, 0, 0.3) 80%,
      rgba(0, 0, 0, 0.5) 100%
    );
}

#garage > *:not(#garage-bg) {
  position: relative;
  z-index: 1;
}

#garage-head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px clamp(20px, 4vw, 56px) 4px;
}

#garage-head .g-title {
  justify-self: start;
}

#garage-head #garage-tabs {
  justify-self: center;
}

#garage-head .g-title {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 900;
  letter-spacing: 6px;
  background: linear-gradient(100deg, #8ff8ff 0%, #4f8cff 52%, #6a3bff 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#garage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}

.gtab {
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font:
    700 13px/1 "Segoe UI",
    system-ui,
    sans-serif;
  letter-spacing: 2px;
  color: #cdd6ff;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  /* trimmed from 9px: the taller icon now sets the pill's height, so the
     old vertical padding would have made the row noticeably chunkier */
  padding: 7px 20px;
  transition: 0.15s;
}

/* stroke is currentColor, so the glyph inverts with the pill when active.
   The stroke is scaled down as the box grows so a bigger glyph does not
   read as a heavier one. */
.gtab-ico {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  stroke-width: 1.5;
  opacity: 0.9;
}

.gtab.active .gtab-ico {
  opacity: 1;
}

.gtab.active {
  color: #05010f;
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}

#garage-stage {
  position: relative;

  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;

  /*
* Keep the center area fixed and let the
* left/right areas take the remaining space.
*/
  grid-template-columns:
    minmax(220px, 1fr)
    minmax(0, 900px)
    minmax(220px, 1fr);

  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto
    auto;

  grid-template-areas:
    "name    name    name"
    "stats   canvas  paint"
    "stats   canvas  paint"
    ".       actions .";

  align-items: center;
  justify-items: center;

  column-gap: 20px;
  row-gap: 4px;

  padding: clamp(10px, 2.5vw, 24px) clamp(20px, 5vw, 70px) 10px;

  box-sizing: border-box;
}

#garage-canvas {
  grid-area: canvas;

  /* alignToPodium() translates the canvas down to seat the car on the
     painted podium, which pushes its box over the actions row. Nothing
     is bound to the canvas, so it stays out of hit-testing entirely. */
  pointer-events: none;

  width: 100%;
  max-width: 900px;

  height: 100%;
  max-height: min(50vh, 460px);

  align-self: center;
  justify-self: center;
  margin-top: 50px;
  display: block;

  /*
* Make sure the canvas itself stays centered
*/
  margin: 0 0;
}

@media (max-width: 640px) {
  /* No manual offsets here: garage.js measures the backdrop plate and
     slides the canvas onto the podium via an inline transform, so any
     margin/transform set here only fights it (and steals stage space). */
  #garage-canvas {
    width: 100%;
    height: 300px;
    max-width: 360px;
    max-height: none;
    display: block;
    margin: 0 auto;
  }
}

#garage-name {
  position: relative;
  grid-area: name;
  justify-self: center;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 900;
  letter-spacing: 4px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 10px;
}

#garage-name::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(90, 190, 255, 0.75) 22%,
    rgba(200, 235, 255, 0.95) 50%,
    rgba(190, 90, 255, 0.75) 78%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(120, 170, 255, 0.55);
}

#garage-paint {
  grid-area: paint;

  width: min(300px, 100%);

  justify-self: end;
  align-self: end;

  margin-right: 0;
}

#garage-stats {
  grid-area: stats;

  width: min(260px, 100%);

  justify-self: start;
  align-self: start;

  margin-top: clamp(6px, 3vh, 30px);
  margin-left: 0;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gstat {
  display: grid;
  grid-template-columns: clamp(58px, 8vw, 82px) minmax(40px, 1fr) clamp(
      48px,
      6vw,
      64px
    );
  align-items: center;
  gap: clamp(6px, 1.2vw, 10px);
}

.gstat .gk {
  font-size: clamp(8px, 0.8vw, 10px);
  letter-spacing: 1.5px;
  opacity: 0.65;
  font-weight: 700;
  white-space: nowrap;
}

.gstat .gbar {
  height: 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.gstat .gbar i {
  display: block;
  height: 100%;
  border-radius: 5px;
}

.gstat .gv {
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#garage-grid {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  gap: clamp(8px, 1.2vw, 14px);
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  padding: 0px 10px;
  margin-top: 6px;
  flex-wrap: nowrap;
  /* "safe" keeps the strip centered when the cars fit, but falls back to
     start-alignment on overflow — plain `center` pushes the first card
     into unreachable negative scroll space. */
  justify-content: safe center;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 30px,
    #000 calc(100% - 30px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 30px,
    #000 calc(100% - 30px),
    transparent 100%
  );
}

#garage-grid::-webkit-scrollbar {
  display: none;
}

#garage-grid.dragging {
  cursor: grabbing;
}

.gcard {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  width: clamp(108px, 10vw, 150px);
  height: clamp(108px, 10vw, 150px);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  /* The thumbnails used to bake in their own studio backdrop, which
     only covered the top ~60% of the square card and left a visible
     band of card colour under every car. They are transparent PNGs of
     the vehicle now (_gen_thumbs2.mjs), so the card paints one
     gradient across its whole face -- garage.js re-uses --gcard-bg as
     the layer under the car so nothing seams. */
  --gcard-bg: linear-gradient(180deg, #12131a 0%, #05050a 100%);

  background-color: #05050a;
  background-image: var(--gcard-bg);
  /* two background-image layers get set in garage.js (car PNG, then
     --gcard-bg) -- size/position/repeat below are matching
     comma-separated lists, car layer first, gradient layer second, so
     the car can be sized up independently of the backdrop. */
  background-size:
    165% auto,
    100% 100%;
  background-position:
    center -84%,
    center 0%;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid rgba(19, 241, 255, 0.35);
  border-radius: 14px;
  transition: 0.15s;
  box-shadow:
    0 0 10px rgba(19, 241, 255, 0.18),
    inset 0 0 18px rgba(19, 241, 255, 0.05),
    0 4px 14px rgba(0, 0, 8, 0.35);
  overflow: hidden;
  box-sizing: border-box;
}

/* dark gradient overlay behind the bottom text band — sits above the
   car image (background-image on .gcard) but below the text. */
.gcard::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.72) 45%,
    rgba(0, 0, 0, 0.96) 100%
  );
}

.gcard:hover {
  border-color: rgba(19, 241, 255, 0.65);
  box-shadow:
    0 0 16px rgba(19, 241, 255, 0.35),
    inset 0 0 18px rgba(19, 241, 255, 0.08),
    0 4px 14px rgba(0, 0, 8, 0.35);
  transform: translateY(-2px);
}

.gcard.active {
  border-color: var(--cyan);
  box-shadow:
    0 0 22px rgba(19, 241, 255, 0.55),
    inset 0 0 22px rgba(19, 241, 255, 0.12);
}

.gcard-text {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 6px 6px 6px;
  text-align: center;
}

.gcard-name {
  width: 100%;
  font-size: clamp(10px, 1.05vw, 12px);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.3;
  height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.gcard-stat {
  width: 100%;
  font-size: clamp(9px, 0.95vw, 10.5px);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--cyan);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#garage-actions {
  grid-area: actions;
  /* above the translated canvas, which is later in the DOM */
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* the buttons are slanted parallelograms and grow to 1.06 on hover,
     so a 14px gap let the hovered one slide under its neighbour --
     keep enough room for the slant plus the hover scale */
  gap: 34px;
  padding: 4px 0 4px;
}

#garage-actions .btn {
  font-size: 14px;
  padding: 11px 30px;
}

/* a hovered/pressed button scales up: lift it so it never renders
   beneath the button next to it */
#garage-actions .btn:hover,
#garage-actions .btn:active,
#garage-actions .btn:focus-visible {
  z-index: 1;
}

#garage-paints {
  grid-area: paint;
  justify-self: end;
  align-self: end;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(5px, 0.8vw, 7px);
  max-width: 100%;
  padding: 4px 0;
}

#garage-paints .gp-label {
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.55;
  font-weight: 700;
  margin-right: 4px;
  white-space: nowrap;
}

.gpaint {
  pointer-events: auto;
  cursor: pointer;
  flex: 0 0 auto;
  width: clamp(16px, 1.2vw, 22px);
  height: clamp(16px, 1.2vw, 22px);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  transition: 0.12s;
}

.gpaint:hover {
  transform: scale(1.15);
}

.gpaint.active {
  border-color: #fff;
  box-shadow: 0 0 12px currentColor;
  transform: scale(1.12);
}

.gpaint.stock {
  background: conic-gradient(#e33 0 25%, #3ae 0 50%, #ee3 0 75%, #3e5 0);
  font-size: 0;
}

/* ---------- MOBILE ---------- */
@media (max-width: 640px) {
  .screen {
    gap: 14px;
    /* extra top clearance: #wallet-chip is a fixed top-right pill shown
       on every screen, and would otherwise sit on top of each screen's
       heading on narrow devices */
    --screen-pad-r: 12px;
    --screen-pad-b: calc(12px + env(safe-area-inset-bottom));
    --screen-pad-l: 12px;
  }

  /* multiplayer mode cards: one small horizontal row instead of three
     full-width cards stacked (each was fixed 200px, so they wrapped
     into a tall vertical stack on phone) */
  .mp-cards {
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
  }

  .mp-card {
    width: 0;
    flex: 1 1 0;
    padding: 12px 8px;
    gap: 6px;
    border-radius: 12px;
  }

  .mp-card .mp-icon {
    font-size: 20px;
  }

  .mp-card .mp-card-title {
    font-size: 10px;
    letter-spacing: 0.5px;
  }

  /* description reads as a tap hint below the cards instead of
     repeating inside each cramped card */
  .mp-card .mp-card-desc {
    display: none;
  }

  /* lobby (BATCH STARTING / WAITING FOR PLAYERS): tighten text and
     chip sizing so the map/duration/speed rows plus player list fit
     without feeling cramped on a phone screen */
  #lobby .big {
    font-size: 22px;
    letter-spacing: 2px;
  }

  #countdown {
    font-size: 44px;
  }

  #countdown.waiting-text {
    font-size: 15px;
    letter-spacing: 1.5px;
  }

  #lobby-sub {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  /* race settings: single column, thumb-friendly, no heavy blur cost */
  .rs-header {
    margin-top: 30px;
  }

  .rs-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rs-card {
    padding: 18px 14px;
    border-radius: 14px;
    backdrop-filter: none;
  }

  #race-settings #weather-slot-mp .env-chip {
    padding: 12px 16px;
    flex: 1 1 auto;
  }

  .mp-wide-btn {
    width: 100%;
    max-width: 340px;
  }

  #lobby .dur-chip {
    font-size: 10px;
    height: 30px;
    padding: 0 14px;
    letter-spacing: 0.8px;
  }

  /* MAP / RACE TIME / SPEED become collapsible icon-led setting cards
     on phone — same collapsed-button-plus-panel pattern as the weather
     picker (.dd / .dd-btn / #env-bar) above, generalized so it can
     wire up any number of these via JS instead of one hardcoded
     dropdown, restyled as a stat-card row (icon · caption+value · chevron). */
  #lobby {
    gap: 10px;
  }

  .chip-dd {
    width: 100%;
    max-width: 340px;
  }

  .chip-dd-btn {
    display: flex;
    width: 100%;
    pointer-events: auto;
    cursor: pointer;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: rgba(18, 16, 34, 0.6);
    border: 1px solid rgba(160, 180, 255, 0.16);
    border-radius: 14px;
    padding: 11px 16px;
  }

  .chip-dd-icon {
    display: flex;
    font-size: 17px;
    flex-shrink: 0;
    color: #fff;
    opacity: 0.9;
  }

  .chip-dd-icon svg {
    width: 18px;
    height: 18px;
  }

  .chip-dd-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .chip-dd-caption {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #8a80a8;
  }

  .chip-dd-cur {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
  }

  .chip-dd .dd-chev {
    flex-shrink: 0;
    font-size: 13px;
    color: #8a80a8;
  }

  .chip-dd #map-bar,
  .chip-dd #dur-bar,
  .chip-dd #acc-bar {
    display: none !important;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 5;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 14px;
    background: rgba(10, 8, 24, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(160, 180, 255, 0.25);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  }

  .chip-dd.open #map-bar,
  .chip-dd.open #dur-bar,
  .chip-dd.open #acc-bar {
    display: flex !important;
  }

  .chip-dd #map-bar .tlabel,
  .chip-dd #dur-bar .tlabel,
  .chip-dd #acc-bar .tlabel {
    display: none;
  }

  .chip-dd.open .dd-chev {
    transform: rotate(180deg);
  }

  .invite-card {
    max-width: 300px;
    padding: 10px 12px;
  }

  .invite-card-code {
    font-size: 20px;
    letter-spacing: 5px;
  }

  .invite-card-btn {
    font-size: 10px;
    padding: 7px 8px;
  }

  /* BACK gets a leading chevron on phone, matching the card design */
  .back-chev {
    display: inline-block;
    font-size: 16px;
    margin-right: 2px;
  }

  #lobby-list {
    min-width: 0;
    width: 100%;
    max-width: 320px;
  }

  .pl-row {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* icon-only pills — the full "ONLINE" / "CONNECT WALLET" text was
     wide enough to overlap the title on narrow screens */
  .online-label,
  .wallet-label {
    display: none;
  }

  #login-online,
  #login-wallet-btn {
    padding: 7px 10px;
  }

  #login-online {
    gap: 4px;
    display: none;
  }

  #login-wallet-btn .wallet-ico,
  #wallet-chip .wallet-ico {
    display: inline-flex;
    align-items: center;
  }

  /* icon-only chip: only the disconnected state carries a
     .wallet-label, so a connected chip still shows its balance */
  #wallet-chip:has(.wallet-label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    font-size: 19px;
  }

  /* #wallet-chip is a global top-right pill shown on every screen
     (including login) whenever betting is enabled — its full text
     ("CONNECT WALLET" / balance+address) was wide enough to overlap
     the title on narrow screens. */
  #wallet-chip {
    top: calc(20px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    font-size: 10px;
    padding: 6px 10px;
    max-width: 40vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .title {
    font-size: clamp(40px, 14vw, 64px);
    letter-spacing: 3px;
  }

  /* the screen's --screen-pad-t already reserves 52px for the fixed
     wallet-chip pill, so the stack can stay vertically centred; `safe`
     keeps it pinned to the top (never clipped) when it overflows, e.g.
     with the settings panel open on a short device */
  #title {
    justify-content: safe center;
  }

  #login-main {
    gap: 14px;
  }

  .title::after {
    height: 5px;
    margin-top: 7px;
  }

  .tagline {
    font-size: 9px;
    letter-spacing: 5px;
  }

  .btn {
    font-size: 12px;
    padding: 12px 22px;
    letter-spacing: 1.5px;
  }

  .mp-wide-btn {
    width: 180px;
  }

  .btn-row {
    gap: 8px;
  }

  /* SETTINGS — icon-only, moved out of the button column and
     anchored next to the mute/speaker icon in the bottom-right
     corner on phones */
  /* matches #mute's chip treatment — same box, border and opacity,
     sitting immediately left of the speaker */
  #settings-btn {
    position: absolute;
    bottom: calc(18px + env(safe-area-inset-bottom));
    right: calc(70px + env(safe-area-inset-right));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(10, 8, 20, 0.72);
    border: 1px solid #14f19555;
    border-radius: 20px;
    box-shadow: none;
    color: #eafff6;
    opacity: 0.75;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    z-index: 30;
  }

  #settings-btn .ico {
    display: block;
    width: 20px;
    height: 20px;
  }

  #settings-btn::before,
  #settings-btn::after {
    display: none;
  }

  #settings-btn .settings-label {
    display: none;
  }

  #battle-btn {
    font-size: 15px !important;
    padding: 15px 34px !important;
  }

  .hint {
    font-size: 10px;
    letter-spacing: 1px;
    padding: 0 10px;
  }

  #env-bar {
    gap: 5px;
  }

  .env-chip {
    font-size: 9px;
    padding: 4px 9px;
  }

  .name-in {
    width: 200px;
    font-size: 14px;
  }

  #login .lg-card {
    padding: 18px 18px;
    gap: 8px;
  }

  #login label {
    font-size: 10px;
    margin-bottom: -4px;
  }

  #login input {
    font-size: 15px;
    padding: 9px 12px;
    border-radius: 12px;
  }

  #login input#pin-in {
    font-size: 18px;
    letter-spacing: 10px;
  }

  #lg-hint {
    font-size: 9px;
  }

  .corner {
    padding: 0 12px;
    top: 12px;
  }

  .value {
    font-size: 26px;
  }

  #best-wrap {
    top: 90px;
    z-index: 12;
  }

  #best-wrap .label,
  #best-wrap .value {
    opacity: 1;
    text-shadow:
      0 0 8px #000,
      0 0 4px #000;
  }

  #nitro-bar {
    width: 90px;
  }

  #leaderboard {
    width: 150px;
    top: 96px;
    right: 8px;
  }

  .lb-row {
    font-size: 11px;
    padding: 4px 7px;
  }

  #garage {
    overflow: hidden;
  }

  /* Zoom the backdrop plate so the podium (and the car aligned onto it
     by garage.js) reads as large and prominent as the desktop framing,
     instead of shrinking to fit the narrow portrait viewport. Anchored
     near the podium's own centre (PLATES["garage-mobile"].cy ~= 0.68)
     so it grows in place rather than drifting off-screen. garage.js's
     alignToPodium() re-measures this box every frame via
     getBoundingClientRect(), so the scale is picked up automatically. */
  #garage-bg {
    transform: scale(1.35);
    transform-origin: 50% 68%;
  }

  #garage-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: calc(10px + env(safe-area-inset-top)) 10px 2px;
    gap: 10px;
  }

  #garage-head .g-title,
  #garage-head #garage-tabs {
    justify-self: auto;
  }

  #garage-head .g-title {
    font-size: 18px;
    letter-spacing: 4px;
  }

  #garage-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .gtab {
    font-size: 11px;
    padding: 7px 14px;
    text-align: center;
    gap: 6px;
  }

  .gtab-ico {
    width: 20px;
    height: 20px;
  }

  /* phone: stack name / stats / turntable / paint in a single column
   so nothing ever has to share a row and overlap */
  #garage-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;

    grid-template-areas:
      "name"
      "actions"
      "stats"
      "canvas"
      "paint";

    row-gap: 14px;
  }
  #garage-canvas {
    max-width: 100%;
    max-height: 52vh;
    align-self: center;
  }

  #garage-name {
    font-size: 18px;
    letter-spacing: 1.5px;
  }

  #garage-stats {
    width: 100%;
    max-width: 320px;
    justify-self: center;
    margin-top: 4px;
  }

  .gstat {
    grid-template-columns: 64px 1fr 56px;
    gap: 6px;
  }

  #garage-paints {
    justify-self: center;
    justify-content: center;
    gap: 6px;
  }

  .gpaint {
    width: 19px;
    height: 19px;
  }

  #garage-grid {
    margin-top: 14px;
  }

  .gcard {
    width: 74px;
    height: 96px;
    padding: 6px 4px;
    background-size:
      120% auto,
      100% 100%;
    background-position:
      center 6%,
      center 0%;
  }

  #garage-actions {
    gap: 22px;
  }

  #garage-actions .btn {
    font-size: 12px;
    padding: 10px 22px;
  }

  #race-timer {
    font-size: 22px;
  }

  #horn-btn,
  #nitro-btn {
    font-size: 12px;
    padding: 10px 16px;
  }

  #nitro-btn {
    left: calc(50% + 8px);
    right: auto;
    transform: none;
  }

  #horn-btn {
    left: calc(50% - 8px);
    transform: translateX(-100%);
  }

  #horn-btn:active {
    transform: translateX(-100%) scale(0.94);
  }
}

/* =========================
TABLET HELD UPRIGHT (portrait, wider than a phone)
=========================

These screens take the portrait plate above but were still laid out by the
desktop 3-column stage, which parked the stats in the far top-left corner
and dropped the paint row on top of the podium. They also inherited the
desktop's vw-based type scale, which at ~820px collapses every clamp() to
its MINIMUM — the stat labels rendered at 8px. So: stack the stage like the
phone does, and pin the type to real sizes instead of viewport width. */

@media (min-width: 641px) and (max-aspect-ratio: 1 / 1) {
  #garage-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top)) 24px 6px;
  }

  #garage-head .g-title,
  #garage-head #garage-tabs {
    justify-self: auto;
  }

  #garage-tabs {
    justify-content: center;
  }

  #garage-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;

    grid-template-areas:
      "name"
      "actions"
      "stats"
      "canvas"
      "paint";

    row-gap: 10px;
    padding: 12px clamp(24px, 5vw, 64px) 8px;
  }

  #garage-name {
    font-size: 26px;
  }

  #garage-stats {
    width: 100%;
    max-width: 420px;
    justify-self: center;
    align-self: center;
    margin-top: 0;
    margin-left: 0;
  }

  .gstat {
    grid-template-columns: 92px minmax(40px, 1fr) 74px;
    gap: 10px;
  }

  .gstat .gk {
    font-size: 12px;
  }

  .gstat .gv {
    font-size: 15px;
  }

  #garage-canvas {
    max-width: 100%;
    max-height: 46vh;
    justify-self: center;
    align-self: center;
  }

  #garage-paints {
    justify-self: center;
    align-self: center;
    justify-content: center;
    gap: 10px;
  }

  #garage-paints .gp-label {
    font-size: 12px;
  }

  .gpaint {
    width: 24px;
    height: 24px;
  }

  #garage-actions .btn {
    font-size: 15px;
    padding: 12px 34px;
  }

  .gcard-name {
    font-size: 13px;
  }

  .gcard-stat {
    font-size: 11px;
  }
}

/* short landscape (phone on its side): stacked, the wordmark alone eats
   most of the height and pushed the sign-in button below the fold, so
   put the title beside the card and keep the pair centred. */
@media (orientation: landscape) and (max-height: 560px) {
  #loading-title {
    font-size: clamp(28px, 9vh, 60px);
  }

  #loading-ring {
    width: clamp(90px, 26vh, 140px);
    height: clamp(90px, 26vh, 140px);
    margin: clamp(10px, 3vh, 20px) 0;
  }

  #loading-tagline {
    margin-top: 6px;
  }

  #loading-tip {
    margin-top: clamp(10px, 3vh, 18px);
    padding: 7px 12px;
  }

  #login,
  #loading {
    --screen-pad-t: calc(14px + env(safe-area-inset-top));
    --screen-pad-b: calc(14px + env(safe-area-inset-bottom));
  }

  #login-main {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 28px;
  }

  #login .title {
    font-size: clamp(28px, 9vh, 60px);
  }

  #login .lg-card {
    width: min(52vw, 360px);
    padding: 14px 20px;
    gap: 7px;
  }

  #login .lg-sub {
    font-size: 11px;
    letter-spacing: 2px;
  }

  #login label {
    font-size: 10px;
    margin-bottom: -5px;
  }

  #login input {
    padding: 8px 12px;
    font-size: 15px;
    border-radius: 12px;
  }

  #login input#pin-in {
    font-size: 18px;
    letter-spacing: 10px;
  }

  #lg-error {
    min-height: 0;
  }

  #lg-hint {
    font-size: 9px;
    line-height: 1.3;
  }

  /* the PIN-reset warning is the tallest thing in the card; on a screen
     this short it is what pushed ENTER GARAGE off-screen. The rule still
     reads in full on every other size. */
  #lg-hint .lg-hint-divider,
  #lg-hint .lg-hint-long {
    display: none;
  }
}

/* =========================================================
SETTINGS PAGE
Cash Batch inspired layout
========================================================= */

#settings-screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  justify-content: center;
  align-items: center;
  padding: 40px 20px 34px;
}

#settings-screen .settings-page,
#help-screen .settings-page {
  width: min(760px, 94vw);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 30px 0;
}

/* ---------- heading ---------- */

#settings-screen .settings-header,
#help-screen .settings-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

#settings-screen .settings-title,
#help-screen .settings-title {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(42px, 7vw, 72px);
  line-height: 0.95;
  letter-spacing: 4px;
  text-transform: uppercase;

  background: linear-gradient(100deg, #8ff8ff 0%, #4f8cff 52%, #6a3bff 115%);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 8px 25px rgba(79, 140, 255, 0.28));

  transform: skewX(-6deg);
}

#settings-screen .settings-sub,
#help-screen .settings-sub {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 5px;
  color: #9a8fb5;
  text-transform: uppercase;
}

/* ---------- content ---------- */

#settings-screen .settings-content,
#help-screen .settings-content {
  width: min(620px, 100%);
  display: flex;
  flex-direction: column;
  gap: 34px;

  padding: 30px 24px;
  border-radius: 18px;
  background: rgba(8, 8, 22, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(120, 140, 220, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* ---------- individual section ---------- */

#settings-screen .settings-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#settings-screen .settings-section-title {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #e9edff;
  text-transform: uppercase;
}

#settings-screen .settings-section-line {
  width: 100%;
  max-width: 520px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(79, 140, 255, 0.65),
    rgba(122, 43, 255, 0.65),
    transparent
  );

  opacity: 0.7;
}

/* ---------- option container ---------- */

#settings-screen .settings-options {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*
Existing #solo-acc and #gfx-bar controls
are reused here.
*/

#settings-screen #solo-acc,
#settings-screen #gfx-bar,
#settings-screen #weather-slot-settings,
#settings-screen #theme-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* the theme bar normally floats fixed at the top of the screen — inside the
   settings page it has to sit in the flow like every other option row */
#settings-screen #theme-bar {
  position: static;
  transform: none;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border: none;
}

#settings-screen #theme-bar .sw {
  width: 28px;
  height: 28px;
}

#settings-screen #weather-slot-settings .env-chip {
  padding: 10px 18px;
  font-size: 12px;
  border-radius: 12px;
}

/* Hide the old DRIVE / GRAPHICS labels because
the new section already provides them */

#settings-screen #solo-acc .tlabel,
#settings-screen #gfx-bar .tlabel {
  display: none;
}

/* ---------- settings option buttons ---------- */

#settings-screen #solo-acc .dur-chip,
#settings-screen #gfx-bar .dur-chip {
  width: 150px;
  height: 48px;

  margin-top: 10px;
  align-self: center;

  position: relative;
  isolation: isolate;

  border: none;
  outline: none;
  background: none;

  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;

  color: #e9edff;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

/* slanted dark button */

#settings-screen #solo-acc .dur-chip::before,
#settings-screen #gfx-bar .dur-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);

  background: rgba(15, 17, 38, 0.9);

  box-shadow:
    inset 0 0 0 1.5px rgba(120, 170, 255, 0.55),
    0 0 12px rgba(79, 140, 255, 0.12),
    0 5px 18px rgba(0, 0, 0, 0.25);
}

/* hover */

#settings-screen #solo-acc .dur-chip:hover,
#settings-screen #gfx-bar .dur-chip:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

#settings-screen #solo-acc .dur-chip:hover::before,
#settings-screen #gfx-bar .dur-chip:hover::before {
  box-shadow:
    inset 0 0 0 1.5px rgba(79, 140, 255, 0.9),
    0 0 15px rgba(79, 140, 255, 0.3);
}

/* selected option — same dark glass as the back button, just with a
   brighter glowing border instead of a solid fill */

#settings-screen #solo-acc .dur-chip.active,
#settings-screen #gfx-bar .dur-chip.active {
  color: #e9edff;
  text-shadow: none;
}

#settings-screen #solo-acc .dur-chip.active::before,
#settings-screen #gfx-bar .dur-chip.active::before {
  background: rgba(15, 17, 38, 0.9);

  box-shadow:
    inset 0 0 0 1.5px #14f195,
    0 0 16px rgba(20, 241, 149, 0.35);
}

/* ---------- back button ---------- */

#settings-screen .settings-back-btn,
#help-screen .settings-back-btn {
  width: 150px;
  height: 48px;

  margin-top: 10px;
  align-self: center;

  position: relative;
  isolation: isolate;

  border: none;
  outline: none;
  background: none;

  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;

  color: #e9edff;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

#settings-screen .settings-back-btn::before,
#help-screen .settings-back-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);

  background: rgba(15, 17, 38, 0.9);

  box-shadow:
    inset 0 0 0 1px rgba(20, 241, 149, 0.65),
    0 0 10px rgba(20, 241, 149, 0.12);
}

#settings-screen .settings-back-btn:hover,
#help-screen .settings-back-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

#settings-screen .settings-back-btn:hover::before {
  box-shadow:
    inset 0 0 0 1px #14f195,
    0 0 16px rgba(20, 241, 149, 0.35);
}

#settings-screen .settings-back-btn:active,
#help-screen .settings-back-btn:active {
  transform: translateY(1px);
}

/* ---------- mobile ---------- */

@media (max-width: 560px) {
  #settings-screen {
    padding: calc(24px + env(safe-area-inset-top)) 14px
      calc(24px + env(safe-area-inset-bottom));
  }

  #settings-screen .settings-page,
#help-screen .settings-page {
    width: 100%;
    gap: 25px;
    padding: 20px 0;
  }

  #settings-screen .settings-title,
#help-screen .settings-title {
    font-size: clamp(38px, 12vw, 52px);
    letter-spacing: 3px;
  }

  #settings-screen .settings-sub,
#help-screen .settings-sub {
    font-size: 9px;
    letter-spacing: 3px;
  }

  #settings-screen .settings-content,
#help-screen .settings-content {
    width: 100%;
    gap: 28px;
  }

  #settings-screen .settings-section-title {
    font-size: 12px;
    letter-spacing: 3px;
  }

  #settings-screen #solo-acc,
  #settings-screen #gfx-bar {
    gap: 7px;
  }

  #settings-screen #solo-acc .dur-chip,
  #settings-screen #gfx-bar .dur-chip {
    height: 42px;
    min-width: 0;
    padding: 0 14px;
    font-size: 10px;
    letter-spacing: 1px;
  }

  #settings-screen #gfx-bar .dur-chip {
    flex: 1 1 calc(50% - 7px);
    max-width: 140px;
  }

  #settings-screen .settings-back-btn,
#help-screen .settings-back-btn {
    width: 135px;
    height: 44px;
  }
}

/* new login form */
/* =========================================================
FIRST SCREEN / AUTH LANDING PAGE
========================================================= */

#login {
  position: absolute;
  inset: 0;

  overflow: hidden;

  color: #101a3a;

  background:
    url("firstScreen.jpg") center bottom / cover no-repeat,
    #cfe2f5;

  z-index: 40;
}

/* ---------- LIGHT SKY OVERLAY ---------- */

#login::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(0, 20, 60, 0.12) 100%
  );

  z-index: 0;
}

/* ---------- TOP BAR ---------- */

#login > #login-topbar {
  position: absolute;

  top: calc(18px + env(safe-area-inset-top));
  left: 0;
  right: 0;

  padding: 0 22px;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  z-index: 10;
}

/* ONLINE */

#login-online {
  display: flex;
  align-items: center;
  gap: 7px;

  padding: 6px 10px;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.88);

  border: 1px solid rgba(255, 255, 255, 0.75);

  box-shadow: 0 5px 18px rgba(20, 30, 70, 0.12);

  color: #23314f;

  font-family: "Inter", sans-serif;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1px;
}

#login-online .dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #10c879;

  box-shadow: 0 0 7px rgba(16, 200, 121, 0.8);
}

#login-online .sig {
  display: flex;
  align-items: flex-end;

  gap: 2px;

  height: 10px;
}

#login-online .sig i {
  display: block;

  width: 3px;

  border-radius: 2px;

  background: #10c879;
}

#login-online .sig i:nth-child(1) {
  height: 40%;
}

#login-online .sig i:nth-child(2) {
  height: 70%;
}

#login-online .sig i:nth-child(3) {
  height: 100%;
}

/* ---------- WALLET ---------- */

#login-wallet-btn {
  pointer-events: auto;

  cursor: pointer;

  border: 1px solid rgba(70, 100, 220, 0.22);

  border-radius: 20px;

  padding: 8px 18px;

  background: rgba(255, 255, 255, 0.9);

  color: #315cff;

  font-family: "Orbitron", sans-serif;

  font-style: italic;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.3px;

  box-shadow: 0 5px 18px rgba(20, 30, 80, 0.13);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#login-wallet-btn:hover {
  transform: translateY(-1px);

  box-shadow: 0 7px 22px rgba(51, 85, 255, 0.25);
}

#login-wallet-btn .wallet-ico {
  display: none;
}

/* desktop has room for the words, so the pills are text-only there:
   the wallet glyph is dropped and "CONNECT WALLET" (or the balance)
   carries the meaning on its own. Phones flip it — the label goes and
   the mark stands alone in a round speaker-style chip. */
@media (min-width: 641px) {
  #login-wallet-btn .wallet-ico,
  #wallet-chip .wallet-ico {
    display: none;
  }
}

/* =========================================================
MAIN CONTENT
========================================================= */

#login-main {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  /* anchored from the top (not "center") on purpose: centering the whole
     group re-centers the logo every time .auth-card resizes (opening the
     form, showing an error, toggling auth-info) which made the logo visibly
     jump up/down. Top-anchoring keeps the logo's position fixed. */
  justify-content: flex-start;

  gap: 22px;

  padding: var(--hero-top) 20px calc(70px + env(safe-area-inset-bottom));
}

/* ---------- LOGO ---------- */

#login .login-game-title {
  font-family: "Orbitron", sans-serif;

  font-style: italic;

  font-weight: 900;

  font-size: clamp(48px, 7vw, 82px);

  line-height: 0.88;

  letter-spacing: 2px;

  text-align: center;

  text-transform: uppercase;

  color: #111c3b;

  transform: skewX(-7deg);

  text-shadow: 0 5px 15px rgba(255, 255, 255, 0.45);

  margin-bottom: 2px;
}

#login .login-game-title span {
  display: inline-block;

  color: #236cff;

  background: linear-gradient(180deg, #1678ff 0%, #3159e9 65%, #6b38ff 100%);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}

/* underline */

#login .login-game-title::after {
  content: "";

  display: block;

  width: 290px;
  max-width: 70vw;

  height: 4px;

  margin: 15px auto 0;

  background: linear-gradient(
    90deg,
    transparent,
    #ff426c 25%,
    #416bff 70%,
    transparent
  );

  transform: skewX(7deg);
}
.rfs-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(700px, 90vw);

  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-weight: 900;
  text-align: center;

  transform: skewX(-5deg);
}

/* RACE */
.rfs-race {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.85;
  letter-spacing: 4px;

  color: #101a3a;

  text-shadow:
    0 4px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.15);
}

/* FOR + lines */
.rfs-for {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 2vw, 26px);
  gap: 12px;
  margin: 5px 0;
  letter-spacing: 3px;
  color: #101a3a;
}

.rfs-for .line {
  height: 3px;
  max-width: 110px;
  flex: 1;

  background: linear-gradient(90deg, transparent, #2f7cff);

  clip-path: polygon(0 20%, 100% 0, 96% 100%, 0 80%);
}

.rfs-for .line:last-child {
  background: linear-gradient(90deg, #ff3d6e, transparent);
}

/* SPEED */
.rfs-speed {
  font-size: clamp(46px, 7vw, 78px);
  line-height: 0.82;
  letter-spacing: 2px;

  background: linear-gradient(
    100deg,
    #2f7cff 0%,
    #496cff 35%,
    #7a3bff 58%,
    #ff315c 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 5px 12px rgba(50, 100, 255, 0.35));
}

/* =========================================================
AUTH CARD
========================================================= */

#login .auth-card {
  width: min(330px, 88vw);

  padding: 22px 25px 24px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(255, 255, 255, 0.95);

  box-shadow:
    0 18px 55px rgba(20, 35, 80, 0.22),
    0 4px 15px rgba(20, 35, 80, 0.12);

  backdrop-filter: blur(14px);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  color: #182444;
}

/* ---------- CARD TITLE ---------- */

#login .auth-card-title {
  font-family: "Inter", sans-serif;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 3px;

  color: #3168d9;

  margin-bottom: 18px;

  text-transform: uppercase;
}

/* ---------- LABEL ---------- */

#login .auth-option-label {
  font-family: "Inter", sans-serif;

  font-size: 9px;

  font-weight: 700;

  color: #1d2945;

  margin-bottom: 8px;
}

/* =========================================================
SIGN UP BUTTON
========================================================= */

#login .auth-main-btn,
#login .auth-secondary-btn {
  width: 100%;

  height: 43px;

  border-radius: 9px;

  pointer-events: auto;

  cursor: pointer;

  font-family: "Orbitron", sans-serif;

  font-style: italic;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 2px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* SIGN UP */

#login .auth-main-btn {
  color: white;

  border: none;

  background: linear-gradient(100deg, #1689ff, #315fe9 55%, #7041ff);

  box-shadow: 0 7px 18px rgba(54, 93, 235, 0.28);
}

#login .auth-main-btn:hover {
  transform: translateY(-2px);

  filter: brightness(1.06);

  box-shadow: 0 10px 24px rgba(54, 93, 235, 0.34);
}

/* SIGN IN */

#login .auth-secondary-btn {
  color: #3168dc;

  background: rgba(255, 255, 255, 0.5);

  border: 1.5px solid rgba(75, 111, 205, 0.38);
}

#login .auth-secondary-btn:hover {
  transform: translateY(-2px);

  border-color: #416cff;

  box-shadow: 0 6px 18px rgba(65, 108, 255, 0.15);
}

/* ICON */

#login .auth-icon {
  font-family: "Inter", sans-serif;

  font-style: normal;

  font-size: 16px;

  line-height: 1;
}

/* =========================================================
DIVIDER
========================================================= */

#login .auth-divider {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 12px;

  margin: 14px 0;

  color: #7e88a3;
}

#login .auth-divider span {
  flex: 1;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(100, 115, 145, 0.28));
}

#login .auth-divider span:last-child {
  background: linear-gradient(90deg, rgba(100, 115, 145, 0.28), transparent);
}

#login .auth-divider b {
  font-family: "Orbitron", sans-serif;

  font-size: 9px;

  letter-spacing: 2px;
}

/* =========================================================
LOGIN FORM
========================================================= */

#login #auth-form {
  width: 100%;

  display: none;

  flex-direction: column;

  gap: 8px;

  margin-top: 15px;

  padding-top: 15px;

  border-top: 1px solid rgba(70, 90, 130, 0.12);
}

#login #auth-form.show {
  display: flex;
}

#login #auth-form label {
  align-self: flex-start;

  font-family: "Inter", sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.5px;

  color: #64708c;
}

#login #auth-form input {
  width: 100%;

  height: 38px;

  padding: 0 13px;

  border-radius: 8px;

  border: 1px solid rgba(80, 105, 170, 0.28);

  background: #f7f9ff;

  color: #172443;

  font-family: "Inter", sans-serif;

  font-size: 13px;

  font-weight: 700;

  outline: none;
}

#login #auth-form input:focus {
  border-color: #416cff;

  box-shadow: 0 0 0 3px rgba(65, 108, 255, 0.1);
}

#login #auth-form input::placeholder {
  color: #a1aac0;
}

#login .auth-cancel-btn {
  width: 100%;

  height: 32px;

  margin-top: 2px;

  border: none;

  background: transparent;

  color: #64708c;

  font-family: "Inter", sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1px;

  cursor: pointer;
}

#login .auth-cancel-btn:hover {
  color: #416cff;
}

/* SUBMIT */

#login .auth-submit-btn {
  width: 100%;

  height: 42px;

  margin-top: 5px;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  pointer-events: auto;

  background: linear-gradient(100deg, #1689ff, #315fe9, #7041ff);

  color: #fff;

  font-family: "Orbitron", sans-serif;

  font-style: italic;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

/* ERROR */

#login #lg-error {
  min-height: 15px;

  color: #e63d58;

  font-size: 9px;

  font-weight: 700;
}

/* =========================================================
INFORMATION
========================================================= */

#login .auth-info {
  width: 100%;

  margin-top: 17px;

  padding-top: 15px;

  border-top: 1px solid rgba(70, 90, 130, 0.12);

  font-family: "Inter", sans-serif;

  font-size: 8.5px;

  line-height: 1.55;

  color: #6b748b;
}

#login .auth-info b {
  color: #273555;
}

#login .auth-info-divider {
  margin: 8px 0;

  color: #a6aec0;

  font-size: 7px;
}

/* =========================================================
FOOTER
========================================================= */

#login #login-footer {
  position: absolute;
  bottom: 0;
  /* shrink-to-fit and centred, so the hairline is exactly as wide as the
     credit row and lands centred with it instead of running edge to edge */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 40px);
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));

  border-top: 1px solid rgba(255, 255, 255, 0.55);

  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #ffffff;
}

#login #login-footer .sep {
  opacity: 0.45;
}

/* a touch of extra air before the X links; nothing is pushed to an edge
   now that the row is centred */
#login #login-footer .spacer {
  flex: 0 0 6px;
}

#login #login-footer .ico {
  display: inline-flex;
  align-items: center;
}

#login #login-footer .ico .pad-svg {
  display: block;
  width: 16px;
  height: 16px;
}

#login #login-footer .x-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}

#login #login-footer .x-link svg {
  display: block;
  width: 14px;
  height: 14px;
}

#login #login-footer .x-link:hover {
  opacity: 0.65;
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {
  #login-topbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* bare icons on phones — the white pills read as UI chrome over the
     photo backdrop, so drop the plate and let the marks stand alone,
     scaled up to stay tappable. A soft light halo keeps them legible
     against the bright part of the sky. */
  #login-online,
  #login-wallet-btn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    color: #1b2440;
    filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.85));
  }

  #login-online {
    gap: 5px;
  }

  #login-online .dot {
    width: 11px;
    height: 11px;
  }

  #login-online .sig {
    height: 16px;
    gap: 3px;
  }

  #login-online .sig i {
    width: 4px;
  }

  #login-wallet-btn .wallet-ico .wallet-svg {
    width: 30px;
    height: 30px;
  }

  #login .login-game-title {
    font-size: clamp(40px, 12vw, 58px);
  }

  #login .login-game-title::after {
    width: 220px;
    margin-top: 10px;
  }

  #login .auth-card {
    width: min(340px, 92vw);

    padding: 19px 20px 21px;
  }

  #login-main {
    gap: 16px;
  }

  #login .auth-info {
    font-size: 12px;
  }
}

/* ---------- phone wallet chip ----------
   Same plate as the bottom-right #mute / #settings-btn pair: a 40px
   round chip, dark translucent fill, green hairline border. Lives at
   the end of the sheet so the login/loading white skins and the
   icon-only pill rules above can't repaint it. */
@media (max-width: 640px) {
  #login-wallet-btn,
  #wallet-chip:has(.wallet-label),
  body:has(#login:not(.hidden)) #wallet-chip:has(.wallet-label),
  body:has(#loading:not(.hidden)) #wallet-chip:has(.wallet-label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(10, 8, 20, 0.72);
    border: 1px solid #14f19555;
    border-radius: 20px;
    color: #eafff6;
    filter: none;
    box-shadow: none;
    opacity: 0.75;
    font-size: 16px;
    line-height: 1;
    transition: opacity 0.2s;
  }

  #login-wallet-btn:hover,
  #wallet-chip:has(.wallet-label):hover,
  body:has(#login:not(.hidden)) #wallet-chip:has(.wallet-label):hover,
  body:has(#loading:not(.hidden)) #wallet-chip:has(.wallet-label):hover {
    border-color: #14f19555;
    transform: none;
    opacity: 1;
    box-shadow: none;
  }

  /* matches #mute .mute-svg — sized off the chip's font-size */
  #login-wallet-btn .wallet-ico .wallet-svg,
  #wallet-chip .wallet-ico .wallet-svg {
    width: 1.25em;
    height: 1.25em;
  }
}

/* ---------- desktop login footer ----------
   The strip sits over the brightest part of the photo (wet road plus
   neon reflections), where 72%-opacity navy on a 1px white shadow lost
   its edges. Full-strength ink, a stronger white halo and a soft light
   veil fading upward give it a stable surface to sit on without
   turning into a solid bar. */
@media (min-width: 641px) {
  #login #login-footer {
    color: #ffffff;
  }

  #login #login-footer::before {
    content: "";
    position: absolute;
    inset: -18px 0 -30px;
    z-index: -1;
    pointer-events: none;
  }
}

/* ---------- phone login footer ----------
   At 7px in the dark ink it was set in, the strip disappeared into the
   road photo. It was also pinned absolutely to the viewport bottom while
   #login clipped its overflow, so the taller sign-in form grew straight
   over it. On phones the screen scrolls instead and the footer flows as
   the last row of the column, so it is pushed below the card rather than
   covered by it. */
@media (max-width: 640px) {
  #login {
    overflow-x: hidden;
    overflow-y: auto;
  }

  #login-main {
    height: auto;
    min-height: 0;
    flex: 1 0 auto;
    padding: var(--hero-top) 20px 18px;
  }

  /* relative, not static: the shade below is a z-index:-1 ::before and
     needs the footer itself to be the positioned/stacking parent, or it
     would size to #login and cover the whole screen */
  #login #login-footer {
    position: relative;
    inset: auto;
    transform: none;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px calc(4px + env(safe-area-inset-bottom));
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: #ffffff;
  }

  /* shade only behind the strip, fading upward so it doesn't read as a
     bar sitting on the photo */
  #login #login-footer::before {
    content: "";
    position: absolute;
    inset: -18px 0 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(6, 8, 20, 0.72),
      rgba(6, 8, 20, 0)
    );
  }
}

/* keyboard shortcut hint on the horn/nitro buttons */
#horn-btn small,
#nitro-btn small {
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0.65;
  vertical-align: middle;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 4px;
}
body.touch #horn-btn small,
body.touch #nitro-btn small {
  display: none;
}

/* ============================================================
   HELP SCREEN (searchable FAQ — shares the settings shell above)
   ============================================================ */

/* the help list is a plain column, not the centred section stack */
#help-screen .settings-content {
  gap: 18px;
}

/* --- button that opens it from SETTINGS --- */
#settings-screen .help-open-btn {
  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #e9edff;
  cursor: pointer;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid rgba(120, 140, 220, 0.45);
  background: rgba(20, 24, 55, 0.7);
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.08s;
}
#settings-screen .help-open-btn:hover {
  border-color: rgba(143, 248, 255, 0.8);
  box-shadow: 0 0 18px rgba(79, 140, 255, 0.35);
}
#settings-screen .help-open-btn:active {
  transform: scale(0.97);
}

/* --- search --- */
#help-screen .help-searchbar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
#help-screen .help-search-icon {
  position: absolute;
  left: 14px;
  font-size: 13px;
  opacity: 0.7;
  pointer-events: none;
}
#help-screen #help-search {
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #e9edff;
  padding: 12px 36px 12px 38px;
  border-radius: 12px;
  border: 1px solid rgba(120, 140, 220, 0.35);
  background: rgba(6, 8, 22, 0.85);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#help-screen #help-search::placeholder {
  color: #7b7595;
}
#help-screen #help-search:focus {
  border-color: rgba(143, 248, 255, 0.7);
  box-shadow: 0 0 16px rgba(79, 140, 255, 0.28);
}
#help-screen #help-search::-webkit-search-cancel-button {
  display: none;
}
#help-screen #help-search-clear {
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(120, 140, 220, 0.18);
  color: #c8d0f5;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

/* --- category chips --- */
#help-screen .help-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
#help-screen .help-cat {
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #a9b0d8;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(120, 140, 220, 0.3);
  background: rgba(16, 18, 42, 0.7);
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}
#help-screen .help-cat:hover {
  color: #e9edff;
  border-color: rgba(143, 248, 255, 0.6);
}
#help-screen .help-cat.active {
  color: #06101f;
  border-color: transparent;
  background: linear-gradient(100deg, #8ff8ff 0%, #4f8cff 60%, #6a3bff 120%);
}

/* --- list, groups, items --- */
#help-screen #help-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* the filter hides individual rows — .hidden is only a .screen rule elsewhere */
#help-screen #help-list .hidden {
  display: none !important;
}

#help-screen .help-group {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #8ff8ff;
  text-transform: uppercase;
  margin-top: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(79, 140, 255, 0.28);
}
#help-screen .help-group:first-child {
  margin-top: 0;
}

#help-screen .help-item {
  border-radius: 12px;
  border: 1px solid rgba(120, 140, 220, 0.2);
  background: rgba(14, 16, 38, 0.6);
  overflow: hidden;
}
#help-screen .help-item[open] {
  border-color: rgba(79, 140, 255, 0.5);
}
#help-screen .help-item summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 40px 13px 16px;
  position: relative;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #e9edff;
}
#help-screen .help-item summary::-webkit-details-marker {
  display: none;
}
#help-screen .help-item summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #8ff8ff;
}
#help-screen .help-item[open] summary::after {
  content: "\2212";
}
#help-screen .help-body {
  padding: 0 16px 14px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  line-height: 1.65;
  color: #c2c8e6;
}
#help-screen .help-body b {
  color: #e9edff;
}

#help-screen .help-list {
  margin: 0;
  padding-left: 18px;
}
#help-screen .help-list li {
  margin: 5px 0;
}

#help-screen .help-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid #ffcf33;
  background: rgba(255, 207, 51, 0.08);
  color: #ecdfb8;
  font-size: 12px;
}

#help-screen .help-keys {
  width: 100%;
  border-collapse: collapse;
}
#help-screen .help-keys td {
  padding: 6px 8px 6px 0;
  vertical-align: top;
  border-bottom: 1px solid rgba(120, 140, 220, 0.12);
}
#help-screen .help-keys td:first-child {
  white-space: nowrap;
  width: 42%;
  color: #e9edff;
  font-weight: 700;
}
#help-screen .help-keys kbd {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #06101f;
  background: linear-gradient(180deg, #cfe3ff, #9fbdf5);
  border-radius: 5px;
  padding: 2px 7px;
  margin-right: 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

#help-screen .help-empty {
  text-align: center;
  padding: 26px 10px;
  color: #7b7595;
  font-family: "Inter", sans-serif;
  font-size: 13px;
}

@media (max-width: 560px) {
  #help-screen .help-item summary {
    font-size: 12.5px;
  }
  #help-screen .help-keys td:first-child {
    width: 46%;
  }
}