* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Generic visibility toggle — covers any element using class="hidden",
   so a missing per-ID rule can't silently leave something stuck on screen. */
.hidden {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0d10;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overscroll-behavior: none;
  touch-action: none;
}

#game {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#gpu-warning {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, 92vw);
  padding: 10px 14px;
  background: rgba(90, 60, 0, 0.94);
  border: 1px solid rgba(255, 196, 0, 0.5);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
}

#gpu-warning b {
  color: #ffc400;
}

#gpu-warning-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 2px 4px;
}

#gpu-warning-close:hover {
  opacity: 1;
}

#webgl-fatal-error {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0d10;
  color: #fff;
  padding: 24px;
  text-align: center;
}

#webgl-fatal-error > div {
  max-width: 480px;
}

#webgl-fatal-error h1 {
  font-size: 22px;
  margin: 0 0 12px;
}

#webgl-fatal-error p {
  opacity: 0.85;
  line-height: 1.6;
  margin: 0 0 10px;
}

#webgl-fatal-error b {
  color: #ffc400;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  color: #fff;
  user-select: none;
}

#hud-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

#weather-status {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

#weather-status.hidden {
  display: none;
}

#sponsor-badge {
  position: fixed;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: auto;
  opacity: 0.92;
  transition: opacity 0.15s ease;
  cursor: default;
}

#sponsor-badge[href] {
  cursor: pointer;
}

#sponsor-badge:hover {
  opacity: 1;
}

#sponsor-badge.hidden {
  display: none;
}

#sponsor-logo {
  display: block;
  max-height: 40px;
  max-width: 160px;
  height: auto;
  width: auto;
  border-radius: 8px;
}

@media (max-width: 899px) {
  #sponsor-logo {
    max-height: 30px;
    max-width: 120px;
  }

  /* The very bottom edge collides with the PUSH TO PASS panel, and centered horizontally
     it would also sit too close to the touch-control clusters at the screen's bottom
     corners — so instead it sits just above the row of control buttons (78px tall
     accel/nitro + the HUD's own bottom padding + a small gap), still centered, clear of
     both. */
  #sponsor-badge {
    bottom: 106px;
  }
}

#kart-tag {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  z-index: 5;
}

#kart-tag-draft {
  font-size: 11px;
  font-weight: 500;
  color: #3fd0ff;
  text-shadow: 0 0 6px rgba(63, 208, 255, 0.9);
  opacity: 0;
  transition: opacity 0.2s ease;
}

#kart-tag-draft.active {
  opacity: 1;
}

#kart-tag-drift {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: #ffc400;
  text-shadow: 0 0 6px rgba(255, 196, 0, 0.9);
  opacity: 0;
  transition: opacity 0.2s ease;
}

#kart-tag-drift.active {
  opacity: 1;
  animation: drift-wiggle 0.5s ease-in-out infinite alternate;
}

#kart-tag-speed {
  background: rgba(10, 12, 16, 0.72);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#kart-tag-speed.drafting {
  border-color: rgba(63, 208, 255, 0.5);
  box-shadow: 0 0 8px rgba(63, 208, 255, 0.5);
}

.panel {
  background: rgba(10, 12, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 14px;
  backdrop-filter: blur(4px);
}

#lap-panel {
  text-align: center;
  min-width: 64px;
}

.lap-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.65;
}

.lap-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

#position-display {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#position-display .lap-value {
  color: #ff4d4d;
}

#time-panel {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 150px;
}

/* Race-mode live standings — a scaled-down version of a pro racing timing tower (POS /
   NOME / GAP), fixed to the left edge below the top HUD row. */
#standings-panel {
  position: fixed;
  left: 16px;
  top: 142px;
  width: 220px;
  max-height: 60vh;
  overflow: hidden;
  padding: 8px 0;
}

#standings-panel.hidden {
  display: none;
}

#standings-header {
  display: grid;
  grid-template-columns: 28px 1fr 56px;
  gap: 6px;
  padding: 0 12px 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.55;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

#standings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: calc(60vh - 30px);
  overflow-y: auto;
}

.standings-row {
  display: grid;
  grid-template-columns: 28px 1fr 56px;
  gap: 6px;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.standings-row.is-self {
  background: rgba(255, 196, 0, 0.14);
  opacity: 1;
  font-weight: 700;
}

.standings-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}

.standings-name {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standings-gap {
  text-align: right;
  opacity: 0.7;
}

.standings-row.is-self .standings-gap {
  color: #ffc400;
  opacity: 1;
}

/* Phones: keep only the top 5 plus your own row, wherever it is — a full 19-row table
   doesn't fit, but "how far off the podium am I" still needs to be visible at a glance. */
@media (max-width: 899px) {
  #standings-panel {
    width: 168px;
    top: 140px;
  }

  .standings-row:nth-child(n + 6):not(.is-self) {
    display: none;
  }
}

.time-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

.time-row span:first-child {
  opacity: 0.6;
  font-size: 11px;
  letter-spacing: 0.05em;
}

#speedo {
  align-self: flex-end;
  text-align: right;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

#mute-btn,
#reset-btn,
#menu-btn {
  pointer-events: auto;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 8px 10px;
  color: #fff;
  margin-bottom: 8px;
}

#reset-btn,
#menu-btn {
  margin-right: 8px;
}

#mute-btn.active {
  opacity: 0.6;
}

#gamepad-indicator {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  padding: 8px 9px;
  margin-bottom: 8px;
  margin-left: 8px;
}

#gamepad-indicator.hidden {
  display: none;
}

#draft-indicator {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #3fd0ff;
  text-shadow: 0 0 8px rgba(63, 208, 255, 0.85);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#draft-indicator.active {
  opacity: 1;
  transform: translateY(0);
  animation: draft-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes draft-pulse {
  from {
    text-shadow: 0 0 6px rgba(63, 208, 255, 0.6);
  }
  to {
    text-shadow: 0 0 14px rgba(63, 208, 255, 1);
  }
}

#drift-indicator {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffc400;
  text-shadow: 0 0 8px rgba(255, 196, 0, 0.85);
  opacity: 0;
  transform: translateY(4px) rotate(0deg);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#drift-indicator.active {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  animation: drift-wiggle 0.5s ease-in-out infinite alternate;
}

@keyframes drift-wiggle {
  from {
    transform: translateY(0) rotate(-3deg);
    text-shadow: 0 0 6px rgba(255, 196, 0, 0.6);
  }
  to {
    transform: translateY(0) rotate(3deg);
    text-shadow: 0 0 14px rgba(255, 196, 0, 1);
  }
}

#speed-gauge {
  position: relative;
  width: 132px;
  height: 132px;
  margin-left: auto;
}

#speed-gauge-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gauge-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 7;
  stroke-linecap: round;
}

.gauge-redline {
  fill: none;
  stroke: rgba(255, 77, 77, 0.55);
  stroke-width: 7;
  stroke-linecap: round;
}

.gauge-tick-major {
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2.5;
}

.gauge-tick-minor {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5;
}

.gauge-label {
  fill: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}

.gauge-needle {
  transition: transform 0.08s linear;
}

.gauge-needle polygon {
  fill: #ff4d4d;
}

.gauge-pivot {
  fill: #1a1c20;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2;
}

#speed-gauge-svg.drafting .gauge-needle polygon {
  fill: #3fd0ff;
  filter: drop-shadow(0 0 6px rgba(63, 208, 255, 0.9));
}

#speed-gauge-svg.boosting .gauge-needle polygon {
  fill: #ffc400;
  filter: drop-shadow(0 0 6px rgba(255, 196, 0, 0.9));
}

#speed-gauge-digital {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

#speed-value {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: text-shadow 0.2s ease;
}

#speed-value.drafting {
  text-shadow: 0 0 16px rgba(63, 208, 255, 0.9);
}

#speed-value.boosting {
  text-shadow: 0 0 16px rgba(255, 196, 0, 0.9);
}

#speed-unit {
  display: block;
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 0.08em;
}

@media (max-width: 899px) {
  #speed-gauge {
    width: 104px;
    height: 104px;
  }

  #speed-value {
    font-size: 22px;
  }

  /* Mobile only: the velocímetro + Push to Pass move up to sit right under Atual/Melhor/
     Média (instead of floating mid-screen via #hud's flex space-between), and the three
     icon buttons drop down to just above the nitro button — same thumb reach as the pedals,
     instead of stacking above a gauge that's no longer there. Desktop is untouched: neither
     override applies above this breakpoint. */
  #speedo {
    align-self: initial;
    /* filter creates a containing block for fixed-position descendants, which would make
       #speedo-readout/#speedo-icons "fixed" relative to this (still flex-positioned) box
       instead of the real viewport — dropped here so their fixed positioning below actually
       anchors to the screen. */
    filter: none;
  }

  #speedo-readout {
    position: fixed;
    top: 100px;
    right: max(16px, env(safe-area-inset-right));
    text-align: right;
  }

  #speedo-icons {
    position: fixed;
    bottom: 176px;
    right: max(16px, env(safe-area-inset-right));
    display: flex;
    align-items: center;
  }
}

/* Push-to-pass battery — shared by the corner HUD and the floating kart tag. */
.battery {
  position: relative;
  width: 34px;
  height: 13px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  padding: 1.5px;
  box-sizing: border-box;
}

.battery::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 3px;
  width: 3px;
  height: 5px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 0 2px 2px 0;
}

.battery-fill {
  height: 100%;
  width: 100%;
  background: #ffc400;
  border-radius: 1px;
  transition: width 0.1s linear;
}

#p2p-panel {
  margin-top: 8px;
  padding: 6px 10px;
  text-align: left;
}

#p2p-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-bottom: 4px;
  white-space: nowrap;
}

.p2p-key {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 2px;
}

.p2p-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

#p2p-charges {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#kart-tag-battery {
  width: 26px;
  height: 10px;
}

#intro,
#finish {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  background: radial-gradient(circle at 50% 40%, rgba(20, 24, 30, 0.92), rgba(6, 7, 9, 0.96));
  pointer-events: auto;
  padding: 24px;
  overflow-y: auto;
}

/* On a short mobile viewport this content is routinely taller than the screen — centering
   it then clips equal amounts off BOTH the top and bottom by default (that's how an
   overflowing centered flexbox behaves) instead of just letting you scroll down from the
   top, which is why the charm-kart badge at the very top was getting cut off. Top-aligning
   on narrow screens makes it scroll like a normal page instead. */
@media (max-width: 899px) {
  #intro,
  #finish {
    justify-content: flex-start;
    padding-top: max(28px, env(safe-area-inset-top));
  }
}

#intro h1,
#finish h1 {
  margin: 0 0 4px;
  font-size: clamp(28px, 6vw, 42px);
}

#start-lights {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(6, 7, 9, 0.55);
  pointer-events: none;
}

#start-lights.hidden {
  display: none;
}

#start-lights-row {
  display: flex;
  gap: 16px;
  padding: 18px 26px;
  background: rgba(10, 12, 16, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
}

.start-light {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2a1010;
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.start-light.on {
  background: #ff2d2d;
  box-shadow: 0 0 22px 6px rgba(255, 45, 45, 0.85), inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.start-light.go {
  background: #2dff5e;
  box-shadow: 0 0 26px 8px rgba(45, 255, 94, 0.9), inset 0 0 8px rgba(0, 0, 0, 0.2);
}

#start-lights-label {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

#start-lights-label.go {
  color: #2dff5e;
  text-shadow: 0 0 14px rgba(45, 255, 94, 0.9);
}

#charm-kart {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 2px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.08), rgba(10, 12, 16, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.14);
}

#intro p,
#finish p {
  margin: 0;
  opacity: 0.85;
  max-width: 420px;
  line-height: 1.5;
}

.controls-desc {
  font-size: 14px;
  opacity: 0.75 !important;
}

#finish-stats {
  margin-top: 8px;
  min-width: 220px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

#finish-stats .time-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  opacity: 0.9;
}

#track-select {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: min(520px, 92vw);
  margin-top: 4px;
}

.track-card {
  flex: 1 1 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}

.track-card-icon {
  font-size: 22px;
}

.track-card-name {
  font-size: 14px;
  font-weight: 700;
}

.track-card-detail {
  font-size: 11px;
  opacity: 0.7;
}

.track-card.is-active {
  border-color: #ffc400;
  background: rgba(255, 196, 0, 0.14);
}

#mode-select {
  display: flex;
  gap: 10px;
  width: min(320px, 88vw);
  margin-top: 10px;
}

.mode-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
}

.mode-card-icon {
  font-size: 15px;
}

.mode-card.is-active {
  border-color: #ff4d4d;
  background: rgba(255, 77, 77, 0.14);
}

#mode-desc {
  margin-top: 2px;
  font-size: 12px !important;
}

#player-identity {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  width: min(320px, 88vw);
}

#player-name {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  outline: none;
}

#player-name:focus {
  border-color: #ffc400;
}

#player-name::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

#player-country {
  flex-shrink: 0;
  max-width: 128px;
  padding: 12px 10px;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  outline: none;
}

#player-country:focus {
  border-color: #ffc400;
}

#player-country option {
  color: #101216;
}

.visually-hidden {
  display: none;
}

.country-picker {
  position: relative;
  flex-shrink: 0;
}

.country-picker-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 128px;
  padding: 12px 10px;
  font-size: 15px;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.country-picker-btn:focus,
.country-picker-btn[aria-expanded="true"] {
  border-color: #ffc400;
}

.country-picker-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.country-picker-caret {
  opacity: 0.6;
  font-size: 12px;
  flex-shrink: 0;
}

.country-picker-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  max-width: calc(100vw - 32px);
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #16181d;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.country-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.country-picker-option:hover,
.country-picker-option.is-active {
  background: rgba(255, 196, 0, 0.16);
}

.country-picker-flag {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.country-picker-flag-none {
  width: 18px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

#start-btn,
#restart-btn {
  margin-top: 18px;
  padding: 14px 32px;
  font-size: 17px;
  font-weight: 700;
  color: #101216;
  background: linear-gradient(180deg, #ffe14d, #ffc400);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 196, 0, 0.35);
}

#start-btn:active,
#restart-btn:active {
  transform: translateY(1px);
}

#start-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

#intro.hidden,
#finish.hidden {
  display: none;
}

#online-panel {
  margin-top: 10px;
}

#online-toggle-btn {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  cursor: pointer;
}

#online-toggle-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#online-toggle-btn.is-active {
  background: rgba(255, 90, 90, 0.16);
  border-color: rgba(255, 110, 110, 0.5);
  color: #ff9a9a;
}

#online-lobby {
  margin-top: 10px;
  width: min(320px, 88vw);
}

.online-lobby-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  max-height: 140px;
  overflow-y: auto;
}

.online-lobby-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.online-lobby-list li:last-child {
  border-bottom: none;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 6px rgba(53, 208, 127, 0.8);
  flex-shrink: 0;
}

#online-countdown {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 800;
  color: #ffc400;
}

.online-standings {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11px;
  text-align: left;
  min-width: 96px;
}

.online-standings li {
  display: flex;
  gap: 6px;
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.online-standings li.is-self {
  color: #ffc400;
  font-weight: 700;
}

.os-rank {
  opacity: 0.6;
  width: 16px;
  flex-shrink: 0;
}

.os-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-panel {
  margin-top: 10px;
  width: min(360px, 85vw);
}

.leaderboard-panel h2 {
  margin: 0 0 8px;
  font-size: 15px;
  opacity: 0.8;
  font-weight: 600;
}

.leaderboard-status {
  font-size: 13px;
  opacity: 0.65;
  padding: 6px 0;
}

.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.legacy-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: #ffc400;
  text-decoration: none;
  opacity: 0.85;
}

.legacy-link:hover {
  text-decoration: underline;
  opacity: 1;
}

.leaderboard-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.leaderboard-list li:last-child {
  border-bottom: none;
}

.lb-rank {
  width: 28px;
  opacity: 0.6;
  flex-shrink: 0;
}

.lb-name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-flag {
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: -1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.lb-time {
  opacity: 0.9;
}

.leaderboard-list li.lb-has-laps {
  cursor: help;
}

.lb-tooltip {
  position: fixed;
  z-index: 500;
  background: rgba(10, 12, 16, 0.97);
  border: 1px solid rgba(255, 196, 0, 0.4);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
  font-size: 12px;
  line-height: 1.7;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  min-width: 130px;
}

.lb-tooltip.hidden {
  display: none;
}

.lb-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  opacity: 0.8;
}

.lb-tooltip-best {
  color: #ffc400;
  font-weight: 700;
  opacity: 1;
}

.lb-tooltip-speed {
  color: #5fd0ff;
  font-weight: 700;
  opacity: 1;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#touch-controls {
  position: relative;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

body.is-touch #touch-controls {
  display: flex;
}

.touch-cluster {
  display: flex;
  gap: 14px;
  pointer-events: auto;
}

.touch-btn {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  touch-action: none;
  user-select: none;
}

.touch-btn:active,
.touch-btn.active {
  background: rgba(255, 196, 0, 0.55);
  border-color: rgba(255, 196, 0, 0.8);
}

#btn-accel {
  width: 78px;
  height: 78px;
  font-size: 28px;
}

/* Sits directly above the pedal cluster (not inside it — #touch-controls uses
   space-between, so a 3rd flex child there would shove the pedal cluster to the middle
   of the screen instead of the right edge) so the same thumb that's on the gas can flick
   up to it without having to move across the screen. */
.touch-btn-nitro {
  position: absolute;
  right: 0;
  bottom: 92px;
  width: 62px;
  height: 62px;
  font-size: 24px;
  background: rgba(255, 255, 255, 0.92);
  color: #7a3a00;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.35);
  pointer-events: auto;
}

.touch-btn-nitro:active,
.touch-btn-nitro.active {
  background: rgba(255, 196, 0, 0.95);
  border-color: rgba(255, 196, 0, 1);
}

.touch-btn-nitro.depleted {
  opacity: 0.35;
  box-shadow: none;
}

@media (min-width: 900px) {
  #touch-controls {
    display: none !important;
  }
}