/* Moto Game — retro pixel UI */

@font-face {
  font-family: 'PressStart';
  src: local('Press Start 2P');
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0a0a0a;
  font-family: 'Press Start 2P', 'PressStart', 'VT323', monospace;
  color: #fff;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  image-rendering: pixelated;
}

body.menu-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.18);
}

body.menu-open #hud-top,
body.menu-open #combo-meter,
body.menu-open #near-miss-flash {
  opacity: 0;
  visibility: hidden;
}

body.menu-open #touch-controls {
  display: none;
}

canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

canvas#speedo-canvas {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 12;
  image-rendering: pixelated;
}

/* UI */
#ui {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  z-index: 10;
}

#hud-top {
  display: flex;
  gap: 10px;
  padding: 14px;
  pointer-events: none;
  align-items: center;
}

/* --- Pixel Odometer --- */
#odometer {
  display: flex;
  gap: 3px;
  padding: 6px 8px;
  background: #000;
  border: 4px solid #555;
  box-shadow: inset 0 0 0 2px #222;
}

.odo-digit {
  width: 26px;
  height: 36px;
  background: #111;
  border: 3px solid #333;
  color: #0f0;
  font-family: 'Press Start 2P', 'PressStart', 'VT323', monospace;
  font-size: 20px;
  line-height: 36px;
  text-align: center;
  overflow: hidden;
  position: relative;
  text-shadow: none;
}

/* Hard scanline across digit center */
.odo-digit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0,255,0,0.12);
}

.odo-digit::after {
  display: none;
}

#highscore-display {
  pointer-events: none;
  font-size: 16px;
  padding: 8px 14px;
  background: #000;
  display: inline-block;
  border: 4px solid #ff0;
  color: #ff0;
  margin-left: auto;
  text-shadow: none;
  letter-spacing: 2px;
  box-shadow: none;
  white-space: nowrap;
}

/* Near-miss flash text */
#near-miss-flash {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #ff0;
  text-shadow: 3px 3px 0 #a60, -2px -2px 0 #a60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s steps(3);
  z-index: 15;
  letter-spacing: 4px;
}

#near-miss-flash.show {
  opacity: 1;
}

/* Screen-edge flash on near-miss */
#screen-flash {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9;
  border: 0px solid transparent;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s steps(4);
}

#screen-flash.pulse {
  border: 6px solid rgba(255,255,0,0.7);
  opacity: 1;
}

/* Directional light/wind sweep: the edge nearest the passing vehicle blooms
   harder, so a near miss communicates which side was dangerous without HUD. */
#screen-flash.near-left {
  box-shadow: inset calc(34vw * var(--near-strength, .5)) 0 70px -48px rgba(255,238,120,.9);
}

#screen-flash.near-right {
  box-shadow: inset calc(-34vw * var(--near-strength, .5)) 0 70px -48px rgba(255,238,120,.9);
}

body.combo-impact > canvas:not(#speedo-canvas) {
  filter: saturate(.35) brightness(1.16) contrast(1.08);
}

/* --- Main menu actions --- */
#mode-select {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 0;
}

.mode-btn {
  margin: 0;
  min-width: 170px;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 12px;
  text-transform: uppercase;
}

.mode-btn-primary {
  background: #0ff;
  border-color: #0ff;
  color: #000;
  text-shadow: none;
}

.mode-btn-primary:hover,
.mode-btn-primary:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #000;
}

.mode-btn-secondary {
  background: #000;
  border-color: #0ff;
  color: #0ff;
}

.mode-btn-secondary:hover,
.mode-btn-secondary:focus-visible {
  background: #0ff;
  color: #000;
}

#mode-desc {
  font-size: 8px;
  color: #777;
  min-height: 15px;
  margin: 10px 0 0;
  line-height: 1.8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- Shared overlay panel base --- */
.overlay-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #0a0a0a;
  border: 4px solid #0ff;
  padding: 20px;
  text-align: center;
  pointer-events: auto;
  color: #0ff;
  box-shadow: none;
  max-width: 94vw;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Superseded by the screen-wide CRT overlay at the end of this file. */
.overlay-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: none;
  pointer-events: none;
  z-index: 1;
}

.overlay-panel > * { position: relative; z-index: 2; }

.overlay-panel h2 {
  font-size: 22px;
  margin: 0 0 20px 0;
  color: #0ff;
  text-shadow: 2px 2px 0 #066;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* --- Bike select overlay --- */
#bike-overlay {
  width: 820px;
}

#bike-cards {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.bike-card {
  width: 140px;
  padding: 14px 10px;
  border: 3px solid #333;
  background: #0c0c0c;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.05s steps(1), background 0.05s steps(1), transform 0.1s steps(2);
  outline: none;
  position: relative;
}

.bike-card:hover,
.bike-card:focus {
  border-color: #0ff;
  box-shadow: none;
  background: #111;
}

.bike-card:hover:not(.locked),
.bike-card:focus:not(.locked) {
  transform: translateY(-4px) scale(1.03);
}

.bike-card:focus {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

.bike-card.selected {
  border-color: #0ff;
  background: #0a1a1a;
}

.bike-card .bike-preview-wrap {
  width: 100px;
  height: 100px;
  margin: 6px auto 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bike-card .bike-preview-canvas {
  width: 100px;
  height: 100px;
  image-rendering: pixelated;
}

.bike-card .bike-name {
  font-size: 12px;
  color: #0ff;
  margin: 0 0 4px 0;
  text-shadow: none;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.bike-card .bike-style {
  font-size: 8px;
  color: #777;
  margin: 0 0 10px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.bike-card .stat-row {
  display: flex;
  align-items: center;
  margin: 4px 0;
  gap: 6px;
}

.bike-card .stat-label {
  font-size: 8px;
  color: #888;
  width: 30px;
  text-align: right;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.bike-card .stat-bar-bg {
  flex: 1;
  height: 6px;
  background: #222;
  border: 1px solid #333;
  position: relative;
  image-rendering: pixelated;
}

.bike-card .stat-bar-fill {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  image-rendering: pixelated;
}

/* Stat bar colors by type */
.bike-card .stat-bar-fill.stat-spd { background: #0f0; }
.bike-card .stat-bar-fill.stat-acc { background: #ff0; }
.bike-card .stat-bar-fill.stat-hnd { background: #0ff; }
.bike-card .stat-bar-fill.stat-wgt { background: #f80; }

/* --- Powerup select overlay --- */
#powerup-overlay {
  width: 620px;
  z-index: 20;
}

#powerup-cards {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.powerup-card {
  width: 175px;
  padding: 18px 14px;
  border: 3px solid #333;
  background: #0c0c0c;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.05s steps(1), background 0.05s steps(1);
  outline: none;
  position: relative;
}

.powerup-card:hover,
.powerup-card:focus {
  border-color: #0ff;
  box-shadow: none;
  background: #111;
}

.powerup-card:focus {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

.powerup-card .pw-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px auto;
  border: 3px solid #444;
  background: #080808;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
  image-rendering: pixelated;
}

.powerup-card .pw-category {
  font-size: 8px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0 0 6px 0;
}

.powerup-card .pw-name {
  font-size: 13px;
  color: #0ff;
  margin: 6px 0 8px 0;
  text-shadow: none;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.powerup-card .pw-desc {
  font-size: 9px;
  color: #aaa;
  line-height: 1.7;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Category border accent color */
.powerup-card[data-cat="speed"] { border-bottom: 3px solid #f80; }
.powerup-card[data-cat="defense"] { border-bottom: 3px solid #888; }
.powerup-card[data-cat="traffic"] { border-bottom: 3px solid #0c0; }
.powerup-card[data-cat="visual"] { border-bottom: 3px solid #f0f; }

/* --- Rogue HUD --- */
#rogue-hud {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

#powerup-icons {
  display: flex;
  gap: 3px;
  align-items: center;
}

.pw-hud-icon {
  width: 32px;
  height: 32px;
  border: 3px solid #444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  background: #0a0a0a;
  text-shadow: none;
  box-shadow: none;
}

#shield-indicator {
  font-size: 14px;
  color: #ff0;
  text-shadow: none;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#rogue-progress {
  height: 5px;
  background: #0ff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  box-shadow: none;
  transition: width 0.3s linear;
}

/* --- Rogue powerup summary on game over --- */
#rogue-powerup-summary {
  margin-top: 10px;
}

#rogue-powerup-summary .pw-summary-icon {
  width: 24px;
  height: 24px;
  border: 2px solid #444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  margin: 3px;
  background: #0a0a0a;
  text-shadow: none;
}

/* --- Mobile responsive --- */
@media (max-width: 700px) {
  .overlay-panel {
    padding: 14px 10px;
    max-width: 98vw;
  }
  .overlay-panel h2 {
    font-size: 16px;
    margin-bottom: 14px;
  }
  #bike-overlay { width: auto; }
  #bike-cards {
    gap: 8px;
  }
  .bike-card {
    width: 110px;
    padding: 10px 8px;
  }
  .bike-card .bike-name { font-size: 9px; }
  .bike-card .bike-style { font-size: 7px; }
  .bike-card .stat-label { font-size: 6px; }
  .bike-card .bike-preview-wrap,
  .bike-card .bike-preview-canvas { width: 80px; height: 80px; }

  #powerup-overlay { width: auto; }
  #powerup-cards {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .powerup-card {
    width: 85%;
    max-width: 280px;
    padding: 14px 12px;
  }
  .powerup-card .pw-icon {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  .powerup-card .pw-name { font-size: 12px; }
  .powerup-card .pw-desc { font-size: 8px; }

  .mode-btn {
    min-width: 140px;
    font-size: 14px;
    padding: 14px 20px;
  }
  #mode-desc { font-size: 9px; }
}

/* overlays */
#game-over {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #000;
  border: 4px solid #0ff;
  padding: 24px 32px;
  text-align: center;
  pointer-events: auto;
  color: #0ff;
  box-shadow: none;
}

#start-overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  box-sizing: border-box;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  padding: 26px 28px 22px;
  border: 4px solid #0ff;
  background: #000;
  color: #0ff;
  text-align: center;
  pointer-events: auto;
  box-shadow: none;
}

#start-overlay::before {
  display: none;
}

#start-overlay h1 {
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1.2;
  margin: 0;
  color: #0ff;
  text-shadow: 3px 3px 0 #066;
  letter-spacing: 4px;
  text-transform: uppercase;
}

#start-overlay .menu-tagline {
  margin: 12px 0 16px;
  color: #aaa;
  font-size: 8px;
  line-height: 1.8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.menu-best {
  color: #ff0;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#menu-highscore {
  color: #ffdc22;
  font-size: 11px;
  letter-spacing: 2px;
  text-shadow: none;
}

.menu-controls {
  margin-top: 16px;
  color: #aaa;
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@keyframes neonFlicker {
  0% { opacity: 0; }
  9% { opacity: 1; }
  13% { opacity: 0.15; }
  19% { opacity: 1; }
  27% { opacity: 0.4; }
  36% { opacity: 1; }
  44% { opacity: 0.65; }
  52% { opacity: 1; }
  100% { opacity: 1; }
}

#game-over h2 {
  font-size: 28px;
  margin: 0 0 18px 0;
  color: #f44;
  text-shadow: 4px 4px 0 #600;
  letter-spacing: 5px;
  text-transform: uppercase;
}

#game-over div {
  font-size: 16px;
  margin: 10px 0;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
}

button {
  font-family: 'Press Start 2P', 'PressStart', 'VT323', monospace;
  font-size: 14px;
  padding: 14px 24px;
  cursor: pointer;
  border: 3px solid #0ff;
  background: #000;
  color: #0ff;
  text-shadow: none;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: background 0.1s steps(2), color 0.1s steps(2);
}

button:hover {
  background: #0ff;
  color: #000;
  text-shadow: none;
}

button:active {
  background: #088;
  border-color: #088;
}

/* Ride Again — the primary action on the game-over screen */
#ride-again {
  display: block;
  margin: 18px auto 10px;
  background: #0ff;
  color: #000;
  text-shadow: none;
  box-shadow: none;
}

#ride-again:hover {
  background: #fff;
  border-color: #fff;
}

#restart {
  display: block;
  margin: 0 auto;
  font-size: 11px;
  padding: 10px 18px;
}

/* Near-miss combo meter — appears while a streak is alive, bar drains
   over the combo window */
#combo-meter {
  position: fixed;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.15s steps(3);
}

#combo-meter.show {
  opacity: 1;
}

#combo-count {
  font-size: 22px;
  color: #ff0;
  text-shadow: 3px 3px 0 #640;
  letter-spacing: 2px;
}

#combo-bar {
  width: 130px;
  height: 7px;
  margin: 6px auto 0;
  background: #000;
  border: 2px solid #ff0;
  box-shadow: none;
}

#combo-bar-fill {
  height: 100%;
  width: 100%;
  background: #ff0;
}

#combo-count {
  display: inline-block;
}

#combo-meter.milestone #combo-count {
  animation: comboPop 0.45s steps(3);
}

@keyframes comboPop {
  30% { transform: scale(1.7); }
  100% { transform: scale(1); }
}

/* Cinematic letterbox bars during the crash cam */
#letterbox-top, #letterbox-bottom {
  position: fixed;
  left: 0;
  width: 100%;
  height: 0;
  background: #000;
  z-index: 14;
  pointer-events: none;
  transition: height 0.35s steps(5);
}
#letterbox-top { top: 0; }
#letterbox-bottom { bottom: 0; }
body.letterbox #letterbox-top,
body.letterbox #letterbox-bottom { height: 11%; }

/* The impact camera is the whole presentation while a crash plays. Keep the
   flash and letterbox visible, but remove every game/menu HUD surface so the
   shot is not competing with a speedometer, score, rival marker or controls. */
body.crash-cinematic #ui,
body.crash-cinematic #speedo-canvas,
body.crash-cinematic #touch-controls {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the result card isolated after the cinematic instead of bringing the
   instruments and touch deck back behind it for a single frozen frame. */
body.game-over-open #hud-top,
body.game-over-open #rogue-progress,
body.game-over-open #near-miss-flash,
body.game-over-open #combo-meter,
body.game-over-open #multiplayer-hud,
body.game-over-open #mp-rival-indicators,
body.game-over-open #speedo-canvas,
body.game-over-open #touch-controls {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* NEW BEST stamp on the game-over tally */
#new-best {
  font-size: 20px;
  color: #ff0;
  text-shadow: 3px 3px 0 #640;
  letter-spacing: 4px;
  animation: bestStamp 0.35s steps(4) both;
}

@keyframes bestStamp {
  0% { transform: scale(3) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(-3deg); opacity: 1; }
}

@media (max-width: 899px) {
  #combo-meter { top: 64px; }
  #combo-count { font-size: 16px; }
  #combo-bar { width: 100px; }
}

/* touch controls */
#touch-controls {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  display: flex;
  justify-content: space-between;
  pointer-events: auto;
  z-index: 11;
}

.touch {
  width: 23%;
  padding: 12px 0;
  font-size: 20px;
  background: rgba(0,0,0,0.7);
  border: 3px solid #0ff;
  color: #0ff;
  opacity: 0.85;
  text-shadow: none;
}

.touch:active {
  background: #0ff;
  color: #000;
}


/* Make touch controls invisible on desktop */
@media (min-width: 900px) {
  #touch-controls { display: none; }
}

/* Mobile: keep the speedometer clear of the touch buttons — it used to sit
   on top of the accelerate/right buttons, making them untappable. */
@media (max-width: 899px) {
  canvas#speedo-canvas {
    width: 120px;
    height: 120px;
    right: 8px;
    bottom: 96px;
  }
  #touch-controls {
    width: calc(100% - 16px);
    bottom: 10px;
  }
  .touch {
    padding: 18px 0;
  }
  #highscore-display {
    font-size: 12px;
    padding: 6px 8px;
    border-width: 3px;
  }
}

/* --- Options screen --- */
#options-overlay {
  width: min(560px, calc(100vw - 32px));
  padding: 22px;
  border-width: 4px;
  background: #000;
  z-index: 20;
}

.options-heading {
  text-align: center;
  margin-bottom: 18px;
}

.options-heading h2 {
  margin: 0;
  color: #0ff;
  font-size: 20px;
  text-shadow: 2px 2px 0 #066;
}

.options-sections {
  display: grid;
  gap: 0;
}

.options-section {
  padding: 12px 0 10px;
  border-top: 2px solid #222;
  background: #000;
}

.options-section h3 {
  margin: 0 0 8px;
  color: #ff0;
  font-size: 8px;
  letter-spacing: 2px;
  text-align: left;
  text-transform: uppercase;
}

.opt-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 45px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin: 3px 0;
}

.opt-label {
  color: #0ff;
  font-size: 8px;
  line-height: 1.4;
  text-align: left;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.opt-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  box-sizing: border-box;
  background: #222;
  border: 2px solid #0ff;
  outline: none;
  cursor: pointer;
}

.opt-slider:focus-visible {
  outline: 2px solid #ffdc22;
  outline-offset: 4px;
}

.opt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #0ff;
  border: 2px solid #066;
  cursor: pointer;
}

.opt-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #0ff;
  border: 2px solid #066;
  cursor: pointer;
}

.opt-val {
  font-size: 9px;
  color: #0ff;
  text-align: right;
}

.opt-radios {
  display: flex;
  grid-column: 2 / 4;
  gap: 5px;
}

.opt-radio {
  min-height: 30px;
  padding: 7px 8px;
  border: 2px solid #333;
  background: #000;
  color: #888;
  font-size: 7px;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
}

.opt-radio:hover {
  border-color: #0ff;
  color: #0ff;
  background: #000;
}

.opt-radio.selected {
  border-color: #0ff;
  background: #0ff;
  color: #001314;
  text-shadow: none;
}

.options-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.options-actions button {
  min-height: 40px;
  padding: 10px 16px;
  font-size: 8px;
  letter-spacing: 1.5px;
}

.options-actions #opt-back {
  min-width: 120px;
  background: #0ff;
  color: #000;
  text-shadow: none;
}

.button-quiet {
  border-color: #555;
  color: #888;
  text-shadow: none;
}

@media (max-width: 700px) {
  #start-overlay {
    width: calc(100vw - 24px);
    padding: 22px 14px 18px;
  }
  #start-overlay h1 {
    font-size: clamp(19px, 6vw, 25px);
    letter-spacing: 2px;
  }
  #start-overlay .menu-tagline { margin-bottom: 13px; }
  #mode-select { flex-direction: column; align-items: stretch; }
  .mode-btn { width: 100%; min-width: 0; min-height: 44px; }
  #options-overlay {
    width: calc(100vw - 24px);
    padding: 18px 12px 14px;
  }
  .options-section { padding: 10px 0 8px; }
  .opt-row {
    grid-template-columns: 110px minmax(0, 1fr) 40px;
    gap: 7px;
  }
  .opt-radios { gap: 3px; }
  .opt-radio { padding: 7px 4px; font-size: 6px; }
  .options-actions button { padding: 9px 10px; }
}

@media (max-height: 650px) {
  #start-overlay { padding-top: 19px; padding-bottom: 15px; }
  #start-overlay .menu-tagline { margin: 7px 0 11px; }
  .menu-controls { margin-top: 12px; }
  #mode-desc { margin-top: 8px; }
  #options-overlay { top: 10px; transform: translateX(-50%); max-height: calc(100vh - 20px); }
  .options-section { padding-top: 8px; padding-bottom: 7px; }
  .opt-row { min-height: 29px; }
}

body.screen-flash-reduced #screen-flash {
  opacity: 0.22 !important;
}

body.screen-flash-off #screen-flash {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .status-dot,
  #start-overlay h1 {
    animation: none;
  }
}

/* --- Shareable run result card ----------------------------------------- */
#game-over {
  width: min(610px, calc(100vw - 24px));
  max-height: calc(100vh - 18px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-cream);
  overflow-y: auto;
  scrollbar-width: thin;
  text-align: left;
}

#run-share-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 720px;
  padding: 22px;
  border: 2px solid var(--ui-line);
  box-sizing: border-box;
  background: #0b0b0c;
  color: var(--ui-cream);
}

#run-share-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #2d2c2a;
  pointer-events: none;
}

#game-over .result-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 2px solid var(--ui-line);
}

#game-over .result-brand {
  margin: 0;
}

#game-over .result-brand > span {
  display: block;
  margin-bottom: 7px;
  color: var(--ui-amber);
  font-size: 7px;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#game-over #result-card-title {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ui-cream);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 1px;
  text-align: left;
}

#result-outcome {
  display: inline-block;
  max-width: 190px;
  padding: 7px 8px 6px;
  border: 2px solid var(--ui-red);
  color: #dc5b45;
  font-size: 7px;
  line-height: 1.4;
  letter-spacing: .5px;
  text-align: center;
  text-transform: uppercase;
}

#game-over .result-score {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin: 0;
  padding: 18px 2px 17px;
  border-bottom: 1px solid var(--ui-line);
}

.result-score-label {
  grid-column: 1 / -1;
  margin-bottom: 7px;
  color: var(--ui-muted);
  font-size: 7px;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#game-over #final-score {
  color: var(--ui-cream);
  font-size: clamp(34px, 7vw, 50px);
  line-height: 1;
  letter-spacing: -1px;
}

#game-over #new-best {
  align-self: center;
  margin: 0 0 2px 14px;
  padding: 6px 7px 5px;
  border: 2px solid var(--ui-amber);
  color: var(--ui-amber);
  font-size: 6px;
  line-height: 1.3;
  letter-spacing: .5px;
  text-transform: uppercase;
  transform: none;
  animation: none;
}

#game-over .result-meta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 0;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-line);
}

#game-over .result-meta > div {
  min-width: 0;
  margin: 0;
  padding: 0 11px;
  border-left: 1px solid var(--ui-line);
  line-height: 1.4;
  letter-spacing: 0;
}

#game-over .result-meta > div:first-child {
  padding-left: 2px;
  border-left: 0;
}

#game-over .result-meta dt {
  margin: 0 0 5px;
  color: var(--ui-muted);
  font-size: 6px;
  line-height: 1.3;
  letter-spacing: .5px;
  text-transform: uppercase;
}

#game-over .result-meta dd {
  margin: 0;
  overflow: hidden;
  color: var(--ui-cream);
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#game-over #crash-diagnostic {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 14px 0 0;
  border-width: 2px;
}

#game-over .diagnostic-heading {
  border-bottom-width: 2px;
}

#unlock-notify,
#rogue-powerup-summary {
  position: relative;
  z-index: 1;
}

#game-over #unlock-notify {
  margin: 10px 0 0;
  padding: 8px;
  border: 1px solid var(--ui-amber-dark);
  background: #151209;
  color: var(--ui-amber);
  font-size: 7px;
  line-height: 1.6;
  letter-spacing: .5px;
  text-align: center;
}

#game-over .result-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--ui-line);
  color: #69665e;
  font-size: 6px;
  line-height: 1.5;
  letter-spacing: .5px;
  text-transform: uppercase;
}

#result-mode {
  color: var(--ui-amber);
}

#game-over .result-actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
}

#game-over .result-actions button,
#game-over #share-result,
#game-over #ride-again,
#game-over #restart {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 10px 8px;
  border-width: 2px;
  box-sizing: border-box;
  font-size: 7px;
  line-height: 1.4;
  letter-spacing: .5px;
}

#game-over #share-result {
  border-color: var(--ui-amber);
  background: var(--ui-amber);
  color: var(--ui-ink);
}

#game-over #ride-again {
  border-color: var(--ui-cream);
  background: var(--ui-panel-raised);
  color: var(--ui-cream);
}

#game-over #restart {
  border-color: var(--ui-line);
  background: var(--ui-panel);
  color: var(--ui-muted);
}

#share-status {
  min-height: 14px;
  margin: 7px 0 0;
  color: var(--ui-muted);
  font-size: 6px;
  line-height: 1.5;
  letter-spacing: .5px;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  #game-over {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 10px);
    padding: 0;
  }

  #run-share-card {
    min-height: 0;
    padding: 15px 13px;
  }

  #run-share-card::after {
    inset: 5px;
  }

  #game-over .result-card-header {
    min-height: 47px;
    padding-bottom: 10px;
  }

  #game-over #result-card-title {
    font-size: 13px;
  }

  #result-outcome {
    max-width: 148px;
    padding: 5px 6px 4px;
    font-size: 5px;
  }

  #game-over .result-score {
    padding: 12px 1px 11px;
  }

  #game-over #final-score {
    font-size: clamp(29px, 10vw, 39px);
  }

  #game-over .result-meta {
    padding: 9px 0;
  }

  #game-over .result-meta > div {
    padding: 0 7px;
  }

  #game-over #crash-diagnostic {
    margin-top: 10px;
  }

  #game-over .diagnostic-heading {
    padding: 7px 8px;
  }

  #game-over .diagnostic-layout {
    grid-template-columns: 118px minmax(0, 1fr);
  }

  #game-over .skeleton-frame {
    min-height: 196px;
  }

  #injury-skeleton {
    width: 104px;
    height: 190px;
  }

  #game-over .diagnostic-note {
    padding: 6px 8px;
    font-size: 5px;
  }

  #game-over .result-card-footer {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 5px;
  }

  #game-over .result-actions {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 8px;
  }

  #game-over #share-result {
    grid-column: 1 / -1;
  }

  #game-over .result-actions button,
  #game-over #share-result,
  #game-over #ride-again,
  #game-over #restart {
    min-height: 40px;
    font-size: 6px;
  }
}

/* Local multiplayer setup and shared-screen HUD. */
.mp-local-panel {
  margin-top: 18px;
  padding: 14px;
  border: 2px solid var(--ui-line);
  background: var(--ui-panel-raised);
}

.mp-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mp-section-heading h3 {
  margin: 0;
  color: var(--ui-cream);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mp-section-heading span,
.mp-local-rule {
  color: var(--ui-muted);
  font-size: 6px;
  line-height: 1.6;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.mp-local-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.mp-local-controls > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 6px 9px;
  border-left: 3px solid var(--ui-amber);
  background: var(--ui-panel);
  box-sizing: border-box;
}

.mp-local-controls > div:last-child {
  border-left-color: var(--ui-blue);
}

.mp-local-controls strong {
  color: var(--ui-cream);
  font-size: 7px;
}

.mp-local-controls span {
  color: var(--ui-muted);
  font-size: 6px;
  text-transform: uppercase;
}

.mp-local-bikes {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 7px 10px;
}

.mp-local-bikes label {
  color: var(--ui-muted);
  font-size: 6px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.mp-local-bikes .mp-input {
  min-height: 40px;
}

#mp-local-start {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
}

.mp-local-rule {
  margin: 9px 0 0;
  text-align: center;
}

body.local-multiplayer #speedo-canvas,
body.local-multiplayer #touch-controls,
body.local-multiplayer #highscore-display {
  display: none !important;
}

body.local-multiplayer #multiplayer-hud {
  width: 224px;
}

body.local-multiplayer #mp-hud-room {
  background: var(--ui-panel-raised);
  color: var(--ui-amber);
}

body.local-multiplayer .mp-hud-row:first-child {
  border-left: 4px solid var(--ui-amber);
}

body.local-multiplayer .mp-hud-row:last-child {
  border-left: 4px solid var(--ui-blue);
}

@media (max-width: 700px) {
  .mp-local-panel {
    padding: 11px;
  }

  .mp-local-controls {
    gap: 6px;
  }

  body.local-multiplayer #multiplayer-hud {
    top: 8px;
    width: 188px;
  }
}

/* --- Bike lock overlay --- */
.bike-lock-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.bike-card.locked {
  cursor: default;
  opacity: 0.6;
}

.bike-card.locked:hover,
.bike-card.locked:focus {
  border-color: #333;
  box-shadow: none;
  background: #0c0c0c;
}

/* --- Live elimination multiplayer --- */
.mode-btn-multi {
  background: #ffdc22;
  border-color: #ffdc22;
  box-shadow: none;
}

#start-overlay .mode-btn {
  min-width: 145px;
}

.mode-btn-multi:hover,
.mode-btn-multi:focus-visible {
  background: #fff6a0;
  border-color: #fff6a0;
}

#multiplayer-overlay,
#multiplayer-result {
  z-index: 32;
  width: min(560px, calc(100vw - 28px));
  padding: 24px 26px;
}

.mp-intro,
#mp-room-help,
#mp-status,
#mp-result-status {
  color: #999;
  font-size: 8px;
  line-height: 1.8;
  letter-spacing: 1px;
}

.mp-label {
  display: block;
  margin: 14px auto 6px;
  color: #7f8b8d;
  font-size: 7px;
  letter-spacing: 2px;
  text-align: left;
  text-transform: uppercase;
  width: min(330px, 100%);
}

.mp-input {
  display: block;
  width: min(330px, 100%);
  min-height: 42px;
  margin: 0 auto;
  padding: 9px 11px;
  box-sizing: border-box;
  border: 2px solid #355;
  border-radius: 0;
  outline: none;
  background: #020808;
  color: #fff;
  font: 10px 'Press Start 2P', 'PressStart', monospace;
  letter-spacing: 1px;
}

.mp-input:focus {
  border-color: #0ff;
  box-shadow: none;
}

#mp-create {
  display: block;
  width: min(330px, 100%);
  margin: 16px auto 0;
}

.mp-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(330px, 100%);
  margin: 18px auto;
  color: #555;
  font-size: 7px;
  text-transform: uppercase;
}

.mp-divider::before,
.mp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #244;
}

.mp-join-row {
  display: flex;
  gap: 8px;
  width: min(330px, 100%);
  margin: 0 auto;
}

.mp-code-input {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
  color: #ffdc22;
  font-size: 15px;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
}

#mp-join {
  flex: 0 0 86px;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  padding: 10px 7px;
  font-size: 8px;
  letter-spacing: 1px;
}

.mp-room-line {
  margin-bottom: 8px;
  color: #999;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#mp-room-code {
  margin-left: 8px;
  color: #ffdc22;
  font-size: 22px;
  letter-spacing: 5px;
  text-shadow: none;
}

#mp-player-list {
  display: grid;
  gap: 6px;
  margin: 18px 0;
}

.mp-player-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 105px 54px;
  align-items: center;
  min-height: 38px;
  padding: 0 9px;
  border: 2px solid #244;
  background: #040b0c;
  color: #aaa;
  font-size: 7px;
  text-align: left;
}

.mp-player-row.ready {
  border-color: #087;
  color: #fff;
}

.mp-player-row.empty {
  display: flex;
  color: #3f5050;
}

.mp-player-slot,
.mp-player-state {
  color: #0ff;
}

.mp-player-bike {
  color: #697777;
  font-size: 6px;
}

.mp-lobby-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

#mp-ready.selected {
  border-color: #0f0;
  color: #0f0;
}

#mp-start:disabled {
  border-color: #333;
  background: #191919;
  color: #555;
  cursor: default;
}

#mp-status {
  min-height: 16px;
  margin: 13px 0 9px;
}

#mp-status.error { color: #ff4b3e; }

#mp-back {
  min-height: 36px;
  margin: 0;
  padding: 8px 14px;
  font-size: 7px;
}

#mp-countdown {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0, 7, 10, .78);
  color: #0ff;
  text-align: center;
}

#mp-countdown-room {
  color: #ffdc22;
  font-size: 10px;
  letter-spacing: 3px;
}

#mp-countdown-value {
  margin: 22px 0;
  color: #fff;
  font-size: clamp(80px, 20vw, 180px);
  line-height: .85;
  text-shadow: 6px 6px 0 #066;
}

#mp-countdown span {
  font-size: 10px;
  letter-spacing: 4px;
}

#multiplayer-hud {
  position: fixed;
  top: 78px;
  right: 14px;
  z-index: 14;
  width: 190px;
  border: 2px solid rgba(0,255,255,.55);
  background: rgba(0,0,0,.72);
  color: #fff;
  pointer-events: none;
}

#mp-rival-indicators {
  position: fixed;
  inset: 0;
  z-index: 13;
  overflow: hidden;
  pointer-events: none;
}

.mp-rival-indicator {
  position: absolute;
  min-width: 92px;
  padding: 5px 7px;
  border: 1px solid rgba(0,255,255,.72);
  background: rgba(0,8,10,.78);
  color: #bfffff;
  font-size: 6px;
  line-height: 1.35;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: none;
  transform: translate(-50%, -50%);
}

.mp-rival-indicator.behind {
  border-color: rgba(255,220,34,.78);
  color: #ffe96b;
  text-shadow: none;
}

#mp-hud-room {
  padding: 7px 8px;
  border-bottom: 1px solid #255;
  color: #ffdc22;
  font-size: 7px;
  letter-spacing: 2px;
}

.mp-hud-row,
.mp-standing {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  color: #aef;
  font-size: 7px;
}

.mp-hud-row.eliminated {
  color: #666;
  text-decoration: line-through;
}

#mp-standings {
  display: grid;
  gap: 6px;
  margin: 16px 0;
}

.mp-standing {
  display: grid;
  grid-template-columns: 40px 1fr 70px;
  border: 2px solid #244;
  background: #030909;
  font-size: 8px;
  text-align: left;
}

.mp-standing.local {
  border-color: #ffdc22;
  color: #ffdc22;
}

#mp-rematch,
#mp-leave-result {
  margin: 6px;
}

@media (max-width: 700px) {
  #multiplayer-overlay,
  #multiplayer-result { padding: 17px 12px; }
  .mp-player-row { grid-template-columns: 22px minmax(0,1fr) 78px 48px; padding: 0 6px; }
  .mp-player-bike { overflow: hidden; white-space: nowrap; }
  #multiplayer-hud { top: 68px; right: 8px; width: 150px; }
  .mp-hud-row { font-size: 6px; padding: 6px; }
  .mp-rival-indicator { min-width: 78px; padding: 4px 6px; font-size: 5px; }
}

.lock-icon {
  font-size: 24px;
  color: #888;
  margin-bottom: 4px;
}

.lock-req {
  font-size: 8px;
  color: #ff0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- Unlock notification --- */
#unlock-notify {
  font-size: 12px;
  color: #0f0;
  text-shadow: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: unlockBlink 0.5s steps(2) infinite;
  margin: 8px 0;
}

@keyframes unlockBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* -------------------------------------------------------------------------
   Cabinet UI system
   A deliberately small, print-like palette and hard one-bit shadows replace
   the earlier neon treatment. These tokens are shared by every DOM screen.
   ------------------------------------------------------------------------- */
/* Palette: CRT phosphor on cabinet black. The previous set was a warm, muted
   editorial palette (cream on brown-grey) which read as a print layout in a
   pixel typeface rather than as an arcade screen. These are saturated primary
   hues at high contrast, the way a shadow-mask CRT actually renders. */
:root {
  --ui-ink: #04060d;
  --ui-panel: #080d1a;
  --ui-panel-raised: #132043;
  --ui-panel-soft: #1b2d55;
  --ui-cream: #eaf4ff;
  --ui-muted: #7f93bd;
  --ui-line: #2c4275;
  --ui-amber: #ffc31f;
  --ui-amber-dark: #8a5c00;
  --ui-red: #ff3b46;
  --ui-red-dark: #7a1119;
  --ui-green: #2fe38a;
  --ui-blue: #24e6ff;
  --ui-cyan: #24e6ff;
  --ui-cyan-dark: #0a6b85;
  --ui-magenta: #ff2f8e;
  --ui-magenta-dark: #8a0f45;
  --ui-shadow: rgba(0, 0, 0, .85);

  /* Cabinet plastic: a hard bevel, never a soft shadow or a rounded corner. */
  --bevel-raised:
    inset 3px 3px 0 rgba(255, 255, 255, .22),
    inset -3px -3px 0 rgba(0, 0, 0, .62);
  --bevel-sunk:
    inset -3px -3px 0 rgba(255, 255, 255, .14),
    inset 3px 3px 0 rgba(0, 0, 0, .7);
  --drop-hard: 5px 5px 0 rgba(0, 0, 0, .85);
}

html,
body {
  color: var(--ui-cream);
}

body.menu-open::after {
  background: rgba(4, 6, 13, .5);
}

button,
.bike-card,
.powerup-card,
.mp-input,
.opt-slider,
.opt-radio {
  border-radius: 0;
}

button {
  border: 2px solid var(--ui-cream);
  background: var(--ui-panel-raised);
  color: var(--ui-cream);
  box-shadow: 4px 4px 0 var(--ui-shadow);
  transition: none;
}

button:hover,
button:focus-visible {
  border-color: var(--ui-amber);
  background: var(--ui-cream);
  color: var(--ui-ink);
  outline: 2px solid var(--ui-ink);
  outline-offset: -5px;
}

button:active {
  border-color: var(--ui-amber);
  background: var(--ui-amber);
  color: var(--ui-ink);
  box-shadow: 1px 1px 0 var(--ui-shadow);
  transform: translate(3px, 3px);
}

.overlay-panel,
#start-overlay,
#game-over {
  border: 3px solid var(--ui-cream);
  background: var(--ui-panel);
  color: var(--ui-cream);
  box-shadow:
    inset 0 0 0 3px var(--ui-ink),
    8px 8px 0 var(--ui-shadow);
}

.overlay-panel::before,
#start-overlay::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 6px;
  right: 6px;
  bottom: auto;
  left: 6px;
  height: 8px;
  background: repeating-conic-gradient(
    var(--ui-cream) 0 25%,
    var(--ui-red) 0 50%,
    var(--ui-cream) 0 75%,
    var(--ui-red) 0
  ) 0 0 / 8px 8px;
  pointer-events: none;
}

.overlay-panel h2,
.options-heading h2,
#game-over.overlay-panel h2 {
  margin: 0 0 18px;
  padding: 8px 0 13px;
  border-bottom: 3px solid var(--ui-line);
  color: var(--ui-cream);
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: 2px;
  text-align: left;
  text-shadow: 3px 3px 0 var(--ui-red-dark);
}

.overlay-panel h2::before,
.options-heading h2::before,
#game-over.overlay-panel h2::before {
  content: "//";
  margin-right: 10px;
  color: var(--ui-red);
  text-shadow: none;
}

/* Main menu */
#start-overlay {
  width: min(660px, calc(100vw - 32px));
  padding: 22px 26px 24px;
  text-align: left;
}

.menu-statusline {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 18px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: 6px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.menu-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 22px;
  align-items: end;
}

#start-overlay h1 {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  color: var(--ui-cream);
  font-size: clamp(25px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: 2px;
  text-shadow: 4px 4px 0 var(--ui-red-dark);
}

#start-overlay h1 span:last-child {
  color: var(--ui-amber);
}

#start-overlay .menu-tagline {
  max-width: 370px;
  margin: 10px 0 0;
  color: var(--ui-muted);
  font-size: 7px;
  line-height: 1.8;
  letter-spacing: .5px;
}

.menu-best {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 62px;
  padding: 10px 12px;
  border: 2px solid var(--ui-line);
  background: var(--ui-panel-raised);
  color: var(--ui-muted);
  font-size: 6px;
  line-height: 1.6;
  letter-spacing: 1px;
  box-sizing: border-box;
}

#menu-highscore {
  display: block;
  margin-top: 7px;
  color: var(--ui-amber);
  font-size: 14px;
  letter-spacing: 3px;
}

#mode-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0 0;
}

#start-overlay .mode-btn {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 0 13px 0 0;
  text-align: left;
  letter-spacing: 0;
}

#start-overlay .mode-btn-secondary {
  grid-column: 1 / -1;
  min-height: 54px;
  background: var(--ui-panel-raised);
  border-color: var(--ui-line);
  color: var(--ui-cream);
}

.mode-btn-primary,
#mp-create,
#mp-start,
#mp-rematch,
#ride-again,
#opt-back {
  border-color: var(--ui-amber);
  background: var(--ui-amber);
  color: var(--ui-ink);
}

.mode-btn-multi {
  border-color: var(--ui-red);
  background: var(--ui-red);
  color: var(--ui-cream);
}

.mode-btn-primary:hover,
.mode-btn-primary:focus-visible,
.mode-btn-multi:hover,
.mode-btn-multi:focus-visible,
#mp-create:hover,
#mp-create:focus-visible,
#opt-back:hover,
#opt-back:focus-visible,
#ride-again:hover,
#ride-again:focus-visible {
  border-color: var(--ui-cream);
  background: var(--ui-cream);
  color: var(--ui-ink);
}

.menu-action-number {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  border-right: 2px solid currentColor;
  font-size: 7px;
  opacity: .64;
}

.menu-action-copy {
  display: block;
}

.menu-action-copy strong,
.menu-action-copy small {
  display: block;
}

.menu-action-copy strong {
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 1px;
}

.menu-action-copy small {
  margin-top: 5px;
  font-size: 5px;
  line-height: 1.4;
  letter-spacing: 1px;
  opacity: .7;
}

.menu-action-arrow {
  font-size: 13px;
}

.menu-controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 17px;
  padding-top: 11px;
  border-top: 2px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: 5px;
  letter-spacing: 1px;
}

.menu-controls b {
  color: var(--ui-cream);
  font-weight: normal;
}

/* Cards, pickers, and powerups */
.bike-card,
.powerup-card {
  border: 2px solid var(--ui-line);
  background: var(--ui-panel-raised);
  color: var(--ui-cream);
  box-shadow: 4px 4px 0 var(--ui-shadow);
}

#bike-overlay {
  width: min(980px, calc(100vw - 32px));
}

#powerup-overlay {
  width: min(740px, calc(100vw - 32px));
}

.bike-card:hover,
.bike-card:focus,
.powerup-card:hover,
.powerup-card:focus {
  border-color: var(--ui-amber);
  background: var(--ui-panel-soft);
}

.bike-card:focus,
.powerup-card:focus {
  outline-color: var(--ui-cream);
}

.bike-card.selected {
  border-color: var(--ui-amber);
  background: #2d2619;
  box-shadow: inset 0 -5px 0 var(--ui-amber), 4px 4px 0 var(--ui-shadow);
}

.bike-card .bike-name,
.powerup-card .pw-name {
  color: var(--ui-cream);
}

.bike-card .bike-style,
.bike-card .stat-label,
.powerup-card .pw-desc,
.powerup-card .pw-category {
  color: var(--ui-muted);
}

.bike-card .stat-bar-bg,
.powerup-card .pw-icon,
.pw-hud-icon,
#rogue-powerup-summary .pw-summary-icon {
  border-color: var(--ui-line);
  background: var(--ui-ink);
}

.bike-card .stat-bar-fill.stat-spd { background: var(--ui-red); }
.bike-card .stat-bar-fill.stat-acc { background: var(--ui-amber); }
.bike-card .stat-bar-fill.stat-hnd { background: var(--ui-blue); }
.bike-card .stat-bar-fill.stat-wgt { background: var(--ui-green); }

#bike-back {
  display: block;
  min-height: 36px;
  margin: 19px auto 0;
  padding: 8px 16px;
  font-size: 7px;
}

.powerup-card[data-cat] {
  border-bottom-color: var(--ui-amber);
}

.bike-lock-overlay {
  background: rgba(13, 12, 13, .88);
}

.lock-icon,
.lock-req {
  color: var(--ui-muted);
}

/* Inputs and settings */
.mp-label,
.opt-label {
  color: var(--ui-muted);
}

.mp-input {
  border: 2px solid var(--ui-line);
  background: var(--ui-ink);
  color: var(--ui-cream);
  box-shadow: inset 3px 3px 0 #050505;
}

.mp-input:focus {
  border-color: var(--ui-amber);
  outline: 2px solid var(--ui-ink);
  outline-offset: -5px;
}

.mp-input option {
  background: var(--ui-ink);
  color: var(--ui-cream);
}

.mp-divider {
  color: var(--ui-muted);
}

.mp-divider::before,
.mp-divider::after {
  height: 2px;
  background: var(--ui-line);
}

.options-heading {
  margin-bottom: 0;
}

.options-section {
  border-top: 0;
  border-bottom: 2px solid var(--ui-line);
  background: transparent;
}

.options-section h3 {
  color: var(--ui-amber);
}

.options-section h3::before {
  content: "[";
}

.options-section h3::after {
  content: "]";
}

.opt-label {
  color: var(--ui-cream);
}

.opt-slider {
  border-color: var(--ui-line);
  background: var(--ui-ink);
}

.opt-slider::-webkit-slider-thumb {
  border: 2px solid var(--ui-cream);
  background: var(--ui-red);
}

.opt-slider::-moz-range-thumb {
  border: 2px solid var(--ui-cream);
  background: var(--ui-red);
}

.opt-val {
  color: var(--ui-amber);
}

.opt-radio {
  border-color: var(--ui-line);
  background: var(--ui-ink);
  color: var(--ui-muted);
  box-shadow: none;
}

.opt-radio:hover,
.opt-radio:focus-visible {
  border-color: var(--ui-amber);
  background: var(--ui-panel-raised);
  color: var(--ui-cream);
  outline: none;
}

.opt-radio.selected {
  border-color: var(--ui-amber);
  background: var(--ui-amber);
  color: var(--ui-ink);
  box-shadow: inset 0 -3px 0 var(--ui-amber-dark);
}

.button-quiet {
  border-color: var(--ui-line);
  color: var(--ui-muted);
}

.options-actions #opt-back {
  border-color: var(--ui-amber);
  background: var(--ui-amber);
  color: var(--ui-ink);
}

.options-actions #opt-back:hover,
.options-actions #opt-back:focus-visible {
  border-color: var(--ui-cream);
  background: var(--ui-cream);
  color: var(--ui-ink);
}

/* Multiplayer */
.mp-intro,
#mp-room-help,
#mp-status,
#mp-result-status {
  color: var(--ui-muted);
}

.mp-code-input,
#mp-room-code {
  color: var(--ui-amber);
}

.mp-room-line {
  color: var(--ui-muted);
}

.mp-player-row,
.mp-standing {
  border-color: var(--ui-line);
  background: var(--ui-panel-raised);
  color: var(--ui-cream);
}

.mp-player-row.ready {
  border-color: var(--ui-green);
  box-shadow: inset 5px 0 0 var(--ui-green);
}

.mp-player-row.empty {
  color: var(--ui-line);
}

.mp-player-slot,
.mp-player-state {
  color: var(--ui-amber);
}

.mp-player-bike {
  color: var(--ui-muted);
}

#mp-ready.selected {
  border-color: var(--ui-green);
  background: var(--ui-green);
  color: var(--ui-ink);
}

#mp-start:disabled {
  border-color: var(--ui-line);
  background: var(--ui-panel-raised);
  color: var(--ui-line);
  box-shadow: none;
}

#mp-status.error {
  color: var(--ui-red);
}

#mp-countdown {
  background: rgba(4, 6, 13, .88);
  color: var(--ui-cream);
}

#mp-countdown::before,
#mp-countdown::after {
  content: "";
  width: min(520px, 80vw);
  height: 10px;
  background: repeating-conic-gradient(
    var(--ui-cream) 0 25%,
    var(--ui-red) 0 50%,
    var(--ui-cream) 0 75%,
    var(--ui-red) 0
  ) 0 0 / 10px 10px;
}

#mp-countdown-room {
  margin-top: 24px;
  color: var(--ui-amber);
}

#mp-countdown-value {
  color: var(--ui-cream);
  text-shadow: 8px 8px 0 var(--ui-red-dark);
}

#mp-countdown span {
  margin-bottom: 24px;
  color: var(--ui-muted);
}

#multiplayer-hud {
  border: 2px solid var(--ui-cream);
  background: rgba(23, 20, 22, .88);
  color: var(--ui-cream);
  box-shadow: 4px 4px 0 var(--ui-shadow);
}

#mp-hud-room {
  border-bottom-color: var(--ui-line);
  background: var(--ui-red);
  color: var(--ui-cream);
}

.mp-hud-row,
.mp-standing {
  color: var(--ui-cream);
}

.mp-rival-indicator {
  border: 2px solid var(--ui-cream);
  background: rgba(23, 20, 22, .9);
  color: var(--ui-cream);
  box-shadow: 3px 3px 0 var(--ui-shadow);
}

.mp-rival-indicator.behind {
  border-color: var(--ui-amber);
  color: var(--ui-amber);
}

.mp-standing.local {
  border-color: var(--ui-amber);
  color: var(--ui-amber);
}

/* In-game HUD and result screens */
#odometer {
  border: 3px solid var(--ui-cream);
  background: var(--ui-panel);
  box-shadow: inset 0 0 0 2px var(--ui-ink), 4px 4px 0 var(--ui-shadow);
}

.odo-digit {
  border-color: #35412e;
  background: #11170f;
  color: #a9d46f;
}

#highscore-display {
  border: 3px solid var(--ui-cream);
  background: var(--ui-panel);
  color: var(--ui-amber);
  box-shadow: 4px 4px 0 var(--ui-shadow);
}

#near-miss-flash,
#combo-count,
#new-best {
  color: var(--ui-amber);
  text-shadow: 3px 3px 0 var(--ui-red-dark);
}

#combo-bar {
  border-color: var(--ui-cream);
  background: var(--ui-panel);
}

#combo-bar-fill,
#rogue-progress {
  background: var(--ui-amber);
}

#shield-indicator,
#unlock-notify {
  color: var(--ui-green);
}

#game-over {
  width: min(500px, calc(100vw - 28px));
  padding: 22px 28px 26px;
  box-sizing: border-box;
}

#game-over div {
  color: var(--ui-cream);
}

#game-over #final-bike-hs {
  color: var(--ui-muted) !important;
}

#ride-again,
#restart {
  min-width: 210px;
}

.touch {
  border: 2px solid var(--ui-cream);
  background: rgba(23, 20, 22, .86);
  color: var(--ui-cream);
  box-shadow: 3px 3px 0 var(--ui-shadow);
}

.touch:active {
  border-color: var(--ui-amber);
  background: var(--ui-amber);
  color: var(--ui-ink);
}

@media (max-width: 700px) {
  .overlay-panel,
  #game-over {
    box-shadow: inset 0 0 0 3px var(--ui-ink), 5px 5px 0 var(--ui-shadow);
  }

  #start-overlay {
    width: calc(100vw - 18px);
    padding: 20px 13px 15px;
    box-shadow: inset 0 0 0 3px var(--ui-ink), 5px 5px 0 var(--ui-shadow);
  }

  .menu-statusline {
    margin-bottom: 12px;
  }

  .menu-heading {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
  }

  #start-overlay h1 {
    display: block;
    font-size: clamp(20px, 7vw, 27px);
    line-height: 1.22;
  }

  #start-overlay h1 span {
    display: block;
  }

  #start-overlay .menu-tagline {
    font-size: 5px;
  }

  .menu-best {
    min-height: 60px;
    padding: 8px;
    font-size: 5px;
  }

  #menu-highscore {
    font-size: 10px;
    letter-spacing: 2px;
  }

  #mode-select {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 14px;
  }

  #start-overlay .mode-btn,
  #start-overlay .mode-btn-secondary {
    grid-column: auto;
    min-height: 52px;
  }

  .menu-controls {
    margin-top: 12px;
    font-size: 4px;
  }

  .overlay-panel h2,
  .options-heading h2,
  #game-over.overlay-panel h2 {
    font-size: 14px;
  }

  .mp-player-row {
    box-shadow: none;
  }

  #game-over {
    padding: 20px 15px 18px;
  }

  #bike-overlay,
  #powerup-overlay {
    width: calc(100vw - 18px);
  }
}

@media (max-height: 650px) {
  #start-overlay {
    top: 8px;
    max-height: calc(100vh - 16px);
    transform: translateX(-50%);
    padding-top: 17px;
    padding-bottom: 12px;
  }

  .menu-statusline { margin-bottom: 9px; }
  #mode-select { margin-top: 10px; }
  #start-overlay .mode-btn { min-height: 48px; }
  .menu-controls { margin-top: 9px; padding-top: 8px; }
}

/* Restrained retro pass: utility first, decoration last. */
:root {
  --ui-ink: #0b0b0c;
  --ui-panel: #111113;
  --ui-panel-raised: #19191b;
  --ui-panel-soft: #202023;
  --ui-cream: #ddd5bd;
  --ui-muted: #817d73;
  --ui-line: #555149;
  --ui-amber: #d6a62f;
  --ui-amber-dark: #7b5d1f;
  --ui-red: #b84a39;
  --ui-red-dark: #632a22;
  --ui-green: #789e55;
  --ui-blue: #718f91;
}

body.menu-open::after {
  background: rgba(5, 5, 6, .34);
}

#ui *,
#touch-controls * {
  text-shadow: none;
}

button {
  border: 2px solid var(--ui-line);
  background: var(--ui-panel-raised);
  color: var(--ui-cream);
  box-shadow: none;
  transform: none;
}

button:hover,
button:focus-visible {
  border-color: var(--ui-cream);
  background: var(--ui-cream);
  color: var(--ui-ink);
  outline: none;
}

button:active {
  border-color: var(--ui-amber);
  background: var(--ui-amber);
  color: var(--ui-ink);
  box-shadow: none;
  transform: none;
}

.overlay-panel,
#start-overlay,
#game-over {
  border: 2px solid var(--ui-line);
  background: rgba(11, 11, 12, .95);
  box-shadow: none;
}

.overlay-panel::before,
#start-overlay::before,
#game-over::before,
#mp-countdown::before,
#mp-countdown::after {
  display: none !important;
}

.overlay-panel h2,
.options-heading h2,
#game-over.overlay-panel h2 {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  color: var(--ui-cream);
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: none;
}

.overlay-panel h2::before,
.options-heading h2::before,
#game-over.overlay-panel h2::before {
  display: none;
  content: none;
}

#start-overlay {
  width: min(520px, calc(100vw - 32px));
  padding: 28px;
  text-align: center;
}

.menu-statusline {
  display: none;
}

.menu-heading {
  display: block;
}

#start-overlay h1 {
  display: block;
  margin: 0;
  color: var(--ui-cream);
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.25;
  letter-spacing: 3px;
  text-shadow: none;
}

#start-overlay .menu-tagline {
  max-width: none;
  margin: 12px 0 16px;
  color: var(--ui-muted);
  font-size: 7px;
  line-height: 1.8;
  letter-spacing: 1px;
}

.menu-best {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: 7px;
  line-height: 1.5;
  letter-spacing: 1px;
}

#menu-highscore {
  display: inline;
  margin: 0 0 0 6px;
  color: var(--ui-amber);
  font-size: 10px;
  letter-spacing: 2px;
}

#mode-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 20px 0 0;
}

#start-overlay .mode-btn,
#start-overlay .mode-btn-secondary {
  display: block;
  grid-column: auto;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 12px 14px;
  border-color: var(--ui-line);
  background: var(--ui-panel-raised);
  color: var(--ui-cream);
  font-size: 9px;
  letter-spacing: 1px;
  text-align: center;
}

#start-overlay #mode-freeride {
  border-color: var(--ui-amber);
  background: var(--ui-amber);
  color: var(--ui-ink);
}

#start-overlay #mode-elimination {
  border-color: var(--ui-line);
  background: var(--ui-panel-raised);
  color: var(--ui-cream);
}

#start-overlay #options-btn {
  grid-column: 1 / -1;
  min-height: 38px;
  color: var(--ui-muted);
}

#start-overlay .mode-btn:hover,
#start-overlay .mode-btn:focus-visible {
  border-color: var(--ui-cream);
  background: var(--ui-cream);
  color: var(--ui-ink);
}

.menu-controls {
  display: block;
  margin-top: 16px;
  padding-top: 0;
  border: 0;
  color: #66635d;
  font-size: 5px;
  letter-spacing: 1px;
  text-align: center;
}

.bike-card,
.powerup-card {
  border: 2px solid var(--ui-line);
  background: var(--ui-panel-raised);
  box-shadow: none;
}

.bike-card:hover,
.bike-card:focus,
.powerup-card:hover,
.powerup-card:focus {
  border-color: var(--ui-cream);
  background: var(--ui-panel-soft);
  outline: none;
  transform: none;
}

.bike-card.selected {
  border-color: var(--ui-amber);
  background: var(--ui-panel-raised);
  box-shadow: none;
}

.powerup-card[data-cat] {
  border-bottom-color: var(--ui-line);
}

.powerup-card:focus,
.powerup-card:hover {
  border-bottom-color: var(--ui-amber);
}

#bike-back {
  margin-top: 16px;
}

.mp-input {
  border-color: var(--ui-line);
  background: var(--ui-ink);
  box-shadow: none;
}

.mp-input:focus {
  border-color: var(--ui-amber);
  outline: none;
}

.mp-divider::before,
.mp-divider::after {
  height: 1px;
  background: var(--ui-line);
}

.mode-btn-primary,
#mp-create,
#mp-start,
#mp-rematch,
#ride-again,
#opt-back,
.options-actions #opt-back {
  border-color: var(--ui-amber);
  background: var(--ui-amber);
  color: var(--ui-ink);
}

.mode-btn-multi {
  border-color: var(--ui-line);
  background: var(--ui-panel-raised);
  color: var(--ui-cream);
}

.options-heading {
  margin-bottom: 0;
}

.options-section {
  border-bottom: 1px solid var(--ui-line);
}

.options-section h3 {
  color: var(--ui-muted);
}

.options-section h3::before,
.options-section h3::after {
  content: none;
}

.opt-radio {
  border-color: var(--ui-line);
  background: var(--ui-ink);
  color: var(--ui-muted);
  box-shadow: none;
}

.opt-radio.selected {
  border-color: var(--ui-amber);
  background: var(--ui-amber);
  color: var(--ui-ink);
  box-shadow: none;
}

.opt-slider::-webkit-slider-thumb,
.opt-slider::-moz-range-thumb {
  background: var(--ui-amber);
}

.mp-player-row,
.mp-standing {
  border-color: var(--ui-line);
  background: var(--ui-panel-raised);
  box-shadow: none;
}

.mp-player-row.ready {
  border-color: var(--ui-green);
  box-shadow: none;
}

#mp-countdown {
  background: rgba(5, 5, 6, .88);
}

#mp-countdown-room {
  margin-top: 0;
}

#mp-countdown-value {
  text-shadow: none;
}

#mp-countdown span {
  margin-bottom: 0;
}

#multiplayer-hud,
.mp-rival-indicator,
#odometer,
#highscore-display {
  box-shadow: none;
}

#multiplayer-hud {
  border-color: var(--ui-line);
  background: rgba(11, 11, 12, .86);
}

#mp-hud-room {
  background: transparent;
  color: var(--ui-amber);
}

.mp-rival-indicator {
  border: 1px solid var(--ui-line);
  background: rgba(11, 11, 12, .88);
}

#odometer,
#highscore-display {
  border-color: var(--ui-line);
  background: rgba(11, 11, 12, .86);
}

#game-over {
  padding: 26px;
}

.touch {
  border-color: var(--ui-line);
  background: rgba(11, 11, 12, .78);
  box-shadow: none;
}

@media (max-width: 700px) {
  .overlay-panel,
  #start-overlay,
  #game-over {
    box-shadow: none;
  }

  #start-overlay {
    width: calc(100vw - 24px);
    padding: 24px 16px 18px;
  }

  #start-overlay h1 {
    font-size: clamp(20px, 7vw, 26px);
  }

  #start-overlay .menu-tagline {
    font-size: 5px;
  }

  #mode-select {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 16px;
  }

  #start-overlay #options-btn {
    grid-column: auto;
  }

  #start-overlay .mode-btn,
  #start-overlay .mode-btn-secondary {
    min-height: 44px;
  }

  .overlay-panel h2,
  .options-heading h2,
  #game-over.overlay-panel h2 {
    font-size: 14px;
  }
}

/* --- Physics-derived crash diagnostic --------------------------------- */
#game-over {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  box-sizing: border-box;
  overflow-y: auto;
}

#crash-diagnostic[hidden] {
  display: none !important;
}

#game-over #crash-diagnostic {
  margin: 15px 0 13px;
  padding: 0;
  border: 3px solid #39443e;
  background: #080a09;
  color: #d7ded8;
  text-align: left;
}

#game-over .diagnostic-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 3px solid #39443e;
  color: #b8c6bb;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 1px;
}

#trauma-overall {
  display: inline-block;
  padding: 5px 7px 4px;
  border: 2px solid currentColor;
  color: #d8c84c;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 1px;
}

#trauma-overall.severity-clear { color: #789e82; }
#trauma-overall.severity-minor { color: #d8c84c; }
#trauma-overall.severity-moderate { color: #e89132; }
#trauma-overall.severity-severe { color: #e04b31; }
#trauma-overall.severity-critical { color: #ff503c; background: #2b0a08; }

#game-over .diagnostic-layout {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 13px;
}

#game-over .skeleton-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 242px;
  margin: 0;
  padding: 6px;
  border: 2px solid #26302b;
  background: #0d1210;
}

#injury-skeleton {
  display: block;
  width: 140px;
  height: 245px;
  overflow: visible;
}

#injury-skeleton .skeleton-region {
  color: #617268;
}

#injury-skeleton .skeleton-region path,
#injury-skeleton .skeleton-region circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#injury-skeleton .skeleton-region .skull,
#injury-skeleton .skeleton-region .pelvis {
  fill: currentColor;
  fill-opacity: .08;
}

#injury-skeleton .skeleton-region .joint {
  fill: #0d1210;
  stroke-width: 3;
}

#injury-skeleton .skeleton-region.trauma-minor { color: #d8c84c; }
#injury-skeleton .skeleton-region.trauma-moderate { color: #e89132; }
#injury-skeleton .skeleton-region.trauma-severe { color: #e04b31; }
#injury-skeleton .skeleton-region.trauma-critical { color: #ff503c; }
#injury-skeleton .skeleton-region.trauma-severe path,
#injury-skeleton .skeleton-region.trauma-severe circle,
#injury-skeleton .skeleton-region.trauma-critical path,
#injury-skeleton .skeleton-region.trauma-critical circle {
  stroke-width: 4.6;
}

#game-over .diagnostic-copy {
  min-width: 0;
  margin: 0;
}

#game-over .trauma-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 0 0 11px;
}

#game-over .trauma-metrics div {
  margin: 0;
  padding: 7px 8px;
  border-left: 3px solid #39443e;
  background: #111512;
  font-size: 7px;
  line-height: 1.5;
  letter-spacing: 0;
}

.trauma-metrics dt {
  margin: 0 0 4px;
  color: #78877d;
  font-size: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.trauma-metrics dd {
  margin: 0;
  color: #e5e9e6;
  font-size: 8px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: uppercase;
}

#injury-list {
  max-height: 158px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  counter-reset: trauma;
}

#injury-list li {
  counter-increment: trauma;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 4px;
  border-top: 2px solid #252c28;
  color: #cbd2cd;
  font-size: 7px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
}

#injury-list li::before {
  content: counter(trauma, decimal-leading-zero);
  color: #637168;
}

#injury-list .injury-level {
  color: #d8c84c;
  font-size: 6px;
}

#injury-list li.trauma-moderate .injury-level { color: #e89132; }
#injury-list li.trauma-severe .injury-level { color: #e04b31; }
#injury-list li.trauma-critical .injury-level { color: #ff503c; }

#game-over .diagnostic-note {
  margin: 0;
  padding: 8px 12px 9px;
  border-top: 2px solid #252c28;
  color: #667269;
  font-size: 6px;
  line-height: 1.6;
  letter-spacing: .5px;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  #game-over {
    width: calc(100vw - 18px);
    padding: 20px 12px 22px;
  }

  #game-over .diagnostic-layout {
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  #game-over .skeleton-frame {
    min-height: 210px;
    padding: 3px;
  }

  #injury-skeleton {
    width: 112px;
    height: 205px;
  }

  #game-over .trauma-metrics {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  #game-over .trauma-metrics div {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 6px;
  }

  .trauma-metrics dt { margin: 0; }
  #injury-list { max-height: 128px; }
  #injury-list li {
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 4px;
    padding: 5px 2px;
  }
  #injury-list .injury-level { display: none; }
}

/* Taller proportions and calmer horizontal rhythm. */
.overlay-panel {
  padding-top: 30px;
  padding-bottom: 30px;
}

.overlay-panel h2,
.options-heading h2,
#game-over.overlay-panel h2 {
  margin-bottom: 26px;
  line-height: 1.6;
  letter-spacing: 1px;
}

#start-overlay {
  width: min(500px, calc(100vw - 32px));
  padding: 38px 30px 34px;
}

#start-overlay h1 {
  line-height: 1.42;
  letter-spacing: 1px;
}

#start-overlay .menu-tagline {
  margin-top: 14px;
  margin-bottom: 20px;
  line-height: 2;
  letter-spacing: .5px;
}

.menu-best {
  line-height: 1.8;
}

#mode-select {
  gap: 11px;
  margin-top: 24px;
}

#start-overlay .mode-btn,
#start-overlay .mode-btn-secondary {
  min-height: 58px;
  padding-top: 16px;
  padding-bottom: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}

#start-overlay #options-btn {
  min-height: 48px;
}

.menu-controls {
  margin-top: 21px;
  line-height: 1.8;
  letter-spacing: .5px;
}

.mp-label {
  margin-top: 17px;
  margin-bottom: 8px;
  line-height: 1.6;
  letter-spacing: 1px;
}

.mp-input {
  min-height: 50px;
  padding-top: 13px;
  padding-bottom: 13px;
  line-height: 1.5;
}

#mp-create {
  min-height: 52px;
  margin-top: 19px;
}

.mp-divider {
  margin-top: 22px;
  margin-bottom: 22px;
}

.mp-join-row,
#mp-join {
  min-height: 50px;
}

.mp-player-row {
  min-height: 48px;
  line-height: 1.5;
}

.mp-hud-row,
.mp-standing {
  padding-top: 9px;
  padding-bottom: 9px;
  line-height: 1.5;
}

.options-section {
  padding-top: 16px;
  padding-bottom: 14px;
}

.options-section h3 {
  margin-bottom: 11px;
  line-height: 1.6;
  letter-spacing: 1px;
}

.opt-row {
  min-height: 46px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.opt-label {
  line-height: 1.7;
  letter-spacing: .5px;
}

.opt-radio {
  min-height: 40px;
  padding-top: 11px;
  padding-bottom: 11px;
  line-height: 1.4;
  letter-spacing: .5px;
}

.options-actions {
  margin-top: 20px;
}

.options-actions button {
  min-height: 48px;
  line-height: 1.5;
}

.bike-card {
  padding-top: 18px;
  padding-bottom: 18px;
}

.powerup-card {
  min-height: 235px;
  padding-top: 24px;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.powerup-card .pw-name,
.powerup-card .pw-desc {
  line-height: 1.9;
  letter-spacing: 0;
}

#game-over {
  padding-top: 34px;
  padding-bottom: 34px;
}

#game-over div {
  line-height: 1.7;
  letter-spacing: 1px;
}

.touch {
  min-height: 58px;
  line-height: 1.4;
}

@media (max-width: 700px) {
  #start-overlay {
    width: calc(100vw - 24px);
    padding: 30px 16px 24px;
  }

  #start-overlay .mode-btn,
  #start-overlay .mode-btn-secondary {
    min-height: 52px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .overlay-panel {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .opt-row {
    min-height: 42px;
  }
}

@media (max-height: 650px) {
  #start-overlay {
    padding-top: 22px;
    padding-bottom: 18px;
  }

  #start-overlay .mode-btn,
  #start-overlay .mode-btn-secondary {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

@media (max-height: 650px) {
  #start-overlay {
    top: 50%;
    transform: translate(-50%, -50%);
    padding-top: 20px;
    padding-bottom: 14px;
  }

  #mode-select {
    margin-top: 12px;
  }

  #start-overlay .mode-btn,
  #start-overlay .mode-btn-secondary {
    min-height: 40px;
  }
}

/* Final result-card guard: legacy UI passes above intentionally share the
   game-over id, so these layout properties must remain the last cascade. */
#game-over {
  width: min(610px, calc(100vw - 24px));
  max-height: calc(100vh - 18px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#result-outcome.outcome-clear { border-color: #789e82; color: #789e82; }
#result-outcome.outcome-minor { border-color: #d8c84c; color: #d8c84c; }
#result-outcome.outcome-moderate { border-color: #e89132; color: #e89132; }
#result-outcome.outcome-severe { border-color: #e04b31; color: #e04b31; }
#result-outcome.outcome-critical { border-color: #ff503c; color: #ff503c; background: #2b0a08; }

#game-over #result-card-title,
#game-over #result-outcome,
#game-over #trauma-overall,
#game-over #final-score,
#game-over #new-best {
  text-shadow: none;
}

#game-over #share-result:disabled {
  border-color: var(--ui-line);
  background: var(--ui-line);
  color: var(--ui-ink);
  cursor: wait;
}

#game-over #rogue-powerup-summary {
  margin-top: 8px;
  color: var(--ui-muted);
  font-size: 7px;
  line-height: 1.5;
}

@media (max-width: 700px) {
  #game-over {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 10px);
    padding: 0;
    box-shadow: none;
  }
}

/* --- Daily challenge + leaderboard --- */
.mode-btn-daily {
  background: #ff8a1f;
  border-color: #ff8a1f;
  box-shadow: none;
}

.mode-btn-daily:hover,
.mode-btn-daily:focus-visible {
  background: #ffb367;
  border-color: #ffb367;
}

#daily-overlay {
  z-index: 32;
  width: min(520px, calc(100vw - 28px));
  padding: 24px 26px;
}

.daily-intro {
  color: #999;
  font-size: 8px;
  line-height: 1.8;
  letter-spacing: 1px;
}

.daily-day {
  margin: 12px 0 4px;
  color: #7f8b8d;
  font-size: 8px;
  letter-spacing: 2px;
}

.daily-day strong {
  color: #ff8a1f;
}

#daily-start {
  display: block;
  width: min(330px, 100%);
  margin: 18px auto 6px;
}

/* Board panel — shared by the pre-run overlay and the result card. */
.lb-panel {
  width: min(400px, 100%);
  margin: 16px auto 0;
  border: 1px solid #2b3436;
  background: #050a0b;
  padding: 10px 12px 12px;
  text-align: left;
}

.lb-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #7f8b8d;
  font-size: 7px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#daily-refresh-state,
#daily-result-status {
  color: #ff8a1f;
}

.lb-empty {
  color: #6a7476;
  font-size: 8px;
  line-height: 1.8;
  letter-spacing: 1px;
}

.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 208px;
  overflow-y: auto;
}

.lb-row {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 5px 4px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #cfd6d7;
  border-bottom: 1px solid #141c1d;
}

.lb-row:last-child { border-bottom: none; }

.lb-rank { color: #6a7476; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bike { color: #6a7476; font-size: 7px; }
.lb-score { color: #ffdc22; }

.lb-row-mine {
  background: #17110a;
  color: #fff;
}

.lb-row-mine .lb-rank,
.lb-row-mine .lb-bike { color: #ff8a1f; }

/* The result card sets its own larger type scale, so the board heading needs
   explicit sizing here or it inherits the card's headline size and wraps. */
#daily-result {
  margin: 14px auto 0;
}

#daily-result .lb-heading {
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 7px;
  line-height: 1.6;
}

#daily-result .lb-heading span {
  font-size: 7px;
  letter-spacing: 2px;
}

@media (max-width: 560px) {
  .lb-list { max-height: 160px; }
  .lb-bike { display: none; }
  .lb-row { grid-template-columns: 24px 1fr auto; }
}

/* ==========================================================================
   ARCADE PASS
   The menus and the run card previously read as a modern dark-UI modal set:
   hairline rules, wide whitespace, muted fills, soft hierarchy. This section
   rebuilds them as cabinet screens — chunky bevels, hard offset shadows,
   saturated phosphor, dense centred layout, blinking prompts and a selection
   caret instead of hover tints.
   ========================================================================== */

/* --- Shared panel chrome -------------------------------------------------- */
.overlay-panel,
#start-overlay,
#game-over {
  background: var(--ui-panel);
  border: 4px solid var(--ui-cyan);
  border-radius: 0;
  box-shadow:
    0 0 0 4px var(--ui-ink),
    0 0 0 7px var(--ui-magenta-dark),
    12px 12px 0 rgba(0, 0, 0, .85),
    inset 0 0 44px rgba(36, 230, 255, .06);
  color: var(--ui-cream);
}

/* Scanlines + corner brackets. Two layers so the brackets sit above the
   scanline wash and read as crisp cabinet hardware. */
.overlay-panel::before,
#start-overlay::before,
#game-over::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: none;
  pointer-events: none;
  z-index: 3;
}

.overlay-panel > *,
#start-overlay > *,
#game-over > * { position: relative; z-index: 2; }

.corner-marks::after,
.overlay-panel::after,
#start-overlay::after {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 4;
  background-image:
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta));
  background-repeat: no-repeat;
  background-size:
    16px 4px, 4px 16px,
    16px 4px, 4px 16px,
    16px 4px, 4px 16px,
    16px 4px, 4px 16px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* --- Titles --------------------------------------------------------------- */
/* Chromatic offset: the misconverged-RGB look of a cabinet marquee. */
#start-overlay h1,
.overlay-panel h2,
#game-over #result-card-title {
  color: var(--ui-cream);
  text-transform: uppercase;
  text-shadow:
    3px 0 0 var(--ui-magenta),
    -3px 0 0 var(--ui-cyan),
    0 4px 0 rgba(0, 0, 0, .9);
}

#start-overlay h1 {
  font-size: clamp(24px, 4.6vw, 38px);
  letter-spacing: 6px;
  line-height: 1.25;
  margin: 4px 0 0;
}

.overlay-panel h2 {
  font-size: clamp(15px, 2.4vw, 20px);
  letter-spacing: 5px;
  margin: 2px 0 18px;
}

/* --- Buttons -------------------------------------------------------------- */
button,
.mode-btn {
  position: relative;
  border: 3px solid var(--ui-ink);
  border-radius: 0;
  background: var(--ui-panel-raised);
  color: var(--ui-cream);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .8);
  box-shadow: var(--bevel-raised), var(--drop-hard);
  transition: none;
}

button:hover,
button:focus-visible,
.mode-btn:hover,
.mode-btn:focus-visible {
  background: var(--ui-panel-soft);
  color: #fff;
  outline: none;
}

/* Selection caret rather than a hover tint — how a cabinet shows focus. */
button:hover::before,
button:focus-visible::before,
.mode-btn:hover::before,
.mode-btn:focus-visible::before {
  content: "\25B6";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ui-amber);
  font-size: .7em;
  animation: arcadeBlink 0.6s steps(1, end) infinite;
}

button:active,
.mode-btn:active {
  box-shadow: var(--bevel-sunk), 2px 2px 0 rgba(0, 0, 0, .85);
  transform: translate(3px, 3px);
}

.mode-btn-primary {
  background: var(--ui-cyan);
  border-color: var(--ui-ink);
  color: #00181f;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .45);
}

.mode-btn-primary:hover,
.mode-btn-primary:focus-visible {
  background: #8df4ff;
  color: #00181f;
}

.mode-btn-multi {
  background: var(--ui-amber);
  border-color: var(--ui-ink);
  color: #241700;
}

.mode-btn-multi:hover,
.mode-btn-multi:focus-visible {
  background: #ffdc74;
  color: #241700;
}

.mode-btn-daily {
  background: var(--ui-magenta);
  border-color: var(--ui-ink);
  color: #2a0016;
}

.mode-btn-daily:hover,
.mode-btn-daily:focus-visible {
  background: #ff7ab5;
  color: #2a0016;
}

.mode-btn-secondary,
.button-quiet {
  background: var(--ui-panel-raised);
  border-color: var(--ui-ink);
  color: var(--ui-muted);
}

.mode-btn-secondary:hover,
.mode-btn-secondary:focus-visible,
.button-quiet:hover,
.button-quiet:focus-visible {
  background: var(--ui-panel-soft);
  color: var(--ui-cream);
}

@keyframes arcadeBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* --- Menu furniture ------------------------------------------------------- */
#mode-select {
  gap: 14px;
  margin-top: 22px;
}

#start-overlay .menu-tagline {
  color: var(--ui-cyan);
  font-size: 8px;
  letter-spacing: 2px;
  margin: 14px 0 18px;
}

.menu-best {
  display: inline-block;
  padding: 9px 16px;
  border: 3px solid var(--ui-ink);
  background: var(--ui-ink);
  box-shadow: var(--bevel-sunk);
  color: var(--ui-muted);
  font-size: 8px;
  letter-spacing: 3px;
}

/* Score readouts glow like lit segments. */
#menu-highscore,
#game-over #final-score,
.lb-score,
#daily-result-status {
  color: var(--ui-amber);
  text-shadow: 0 0 10px rgba(255, 195, 31, .55), 2px 2px 0 rgba(0, 0, 0, .9);
}

#menu-highscore { font-size: 13px; letter-spacing: 3px; }

.menu-controls {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 3px double var(--ui-line);
  color: var(--ui-muted);
  font-size: 7px;
  letter-spacing: 2px;
}

/* --- Bike select ---------------------------------------------------------- */
.bike-card {
  border: 3px solid var(--ui-ink);
  background: var(--ui-panel-raised);
  box-shadow: var(--bevel-raised), var(--drop-hard);
  transition: none;
}

.bike-card:hover:not(.locked),
.bike-card:focus:not(.locked) {
  background: var(--ui-panel-soft);
  border-color: var(--ui-ink);
  box-shadow: var(--bevel-raised), 0 0 0 3px var(--ui-cyan), var(--drop-hard);
  transform: translate(-2px, -2px);
}

.bike-card.selected {
  box-shadow: var(--bevel-raised), 0 0 0 3px var(--ui-amber), var(--drop-hard);
}

.bike-card .bike-name { color: var(--ui-cream); text-shadow: 2px 2px 0 rgba(0,0,0,.8); }
.bike-card .bike-style { color: var(--ui-muted); }

.bike-card .stat-bar-bg {
  border: 2px solid var(--ui-ink);
  background: var(--ui-ink);
  box-shadow: var(--bevel-sunk);
}

/* --- Panels inside panels (leaderboard, settings sections) ---------------- */
.lb-panel,
.options-section {
  border: 3px solid var(--ui-ink);
  background: var(--ui-ink);
  box-shadow: var(--bevel-sunk);
}

.lb-row { border-bottom: 2px solid rgba(44, 66, 117, .5); }
.lb-row-mine { background: rgba(255, 47, 142, .16); }
.lb-row-mine .lb-rank,
.lb-row-mine .lb-bike { color: var(--ui-magenta); }

.mp-input,
.opt-slider {
  border: 3px solid var(--ui-ink);
  background: var(--ui-ink);
  box-shadow: var(--bevel-sunk);
  color: var(--ui-cream);
}

.mp-input:focus {
  border-color: var(--ui-ink);
  box-shadow: var(--bevel-sunk), 0 0 0 3px var(--ui-cyan);
}

.opt-radio {
  border: 3px solid var(--ui-ink);
  background: var(--ui-panel-raised);
  box-shadow: var(--bevel-raised);
  color: var(--ui-muted);
}

.opt-radio.selected {
  background: var(--ui-amber);
  color: #241700;
  box-shadow: var(--bevel-raised);
}

.options-section h3,
.lb-heading,
.mp-section-heading h3 {
  color: var(--ui-cyan);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .8);
}

/* --- Main menu: cabinet select list --------------------------------------
   The menu accumulated several generations of layout rules, some ID-scoped.
   This block is the single authority on how the mode buttons look, matched to
   that specificity on purpose so the arcade treatment is not silently undone
   by an older rule further up the file. */
#start-overlay #mode-select {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(340px, 100%);
  margin: 20px auto 0;
}

#start-overlay .mode-btn,
#start-overlay .mode-btn-secondary {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 15px 16px;
  border: 3px solid var(--ui-ink);
  font-size: 11px;
  letter-spacing: 3px;
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--bevel-raised), var(--drop-hard);
}

#start-overlay #mode-freeride {
  border-color: var(--ui-ink);
  background: var(--ui-cyan);
  color: #00181f;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .45);
}

#start-overlay #mode-daily {
  border-color: var(--ui-ink);
  background: var(--ui-magenta);
  color: #2a0016;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .3);
}

#start-overlay #mode-elimination {
  border-color: var(--ui-ink);
  background: var(--ui-amber);
  color: #241700;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .4);
}

#start-overlay #options-btn {
  min-height: 42px;
  background: var(--ui-panel-raised);
  color: var(--ui-muted);
  font-size: 9px;
}

#start-overlay .mode-btn:hover,
#start-overlay .mode-btn:focus-visible {
  border-color: var(--ui-ink);
  background: #fff;
  color: var(--ui-ink);
  transform: translate(-2px, -2px);
  box-shadow: var(--bevel-raised), 7px 7px 0 rgba(0, 0, 0, .85);
}

#start-overlay .mode-btn:active {
  transform: translate(3px, 3px);
  box-shadow: var(--bevel-sunk), 2px 2px 0 rgba(0, 0, 0, .85);
}

/* Attract-mode prompt under the title. */
#start-overlay .menu-best {
  margin: 4px auto 0;
}

/* --- Run card: arcade result screen --------------------------------------
   Was a print-style report: hairline rules, left-aligned label/value pairs,
   cream on brown. Now a cabinet game-over screen — centred, boxed, phosphor. */
#run-share-card {
  padding: 20px 18px 18px;
  border: 4px solid var(--ui-cyan);
  background: var(--ui-panel);
  box-shadow: inset 0 0 60px rgba(36, 230, 255, .05);
  color: var(--ui-cream);
  text-align: center;
}

#run-share-card::after {
  inset: 8px;
  border: 2px solid var(--ui-line);
}

#game-over .result-card-header {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 4px 0 16px;
  border-bottom: 4px double var(--ui-line);
  text-align: center;
}

#game-over .result-brand { text-align: center; }

#game-over .result-brand > span {
  margin-bottom: 10px;
  color: var(--ui-magenta);
  font-size: 8px;
  letter-spacing: 4px;
}

#game-over #result-card-title {
  font-size: clamp(22px, 5vw, 34px);
  letter-spacing: 5px;
  text-align: center;
}

/* Outcome reads as a stamped block, not an outlined tag. */
#result-outcome {
  max-width: none;
  padding: 9px 14px 8px;
  border: 3px solid var(--ui-ink);
  background: var(--ui-red);
  box-shadow: var(--bevel-raised), var(--drop-hard);
  color: #2a0004;
  font-size: 9px;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .35);
}

/* --- Score readout -------------------------------------------------------- */
#game-over .result-score {
  display: block;
  margin: 0;
  padding: 18px 12px 16px;
  border-bottom: 4px double var(--ui-line);
  text-align: center;
}

.result-score-label {
  display: block;
  margin-bottom: 10px;
  color: var(--ui-cyan);
  font-size: 8px;
  letter-spacing: 4px;
}

#game-over #final-score {
  display: block;
  font-size: clamp(38px, 8vw, 58px);
  letter-spacing: 4px;
  line-height: 1;
}

#game-over #new-best {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 14px 7px;
  border: 3px solid var(--ui-ink);
  background: var(--ui-amber);
  box-shadow: var(--bevel-raised), var(--drop-hard);
  color: #241700;
  font-size: 9px;
  letter-spacing: 3px;
  text-shadow: none;
  animation: arcadeBlink 0.7s steps(1, end) infinite;
}

/* --- Stat cells ----------------------------------------------------------- */
#game-over .result-meta {
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

#game-over .result-meta > div {
  padding: 10px 6px;
  border: 3px solid var(--ui-ink);
  background: var(--ui-ink);
  box-shadow: var(--bevel-sunk);
  text-align: center;
}

#game-over .result-meta > div:first-child { border-left: 3px solid var(--ui-ink); }

#game-over .result-meta dt {
  color: var(--ui-muted);
  font-size: 7px;
  letter-spacing: 2px;
}

#game-over .result-meta dd {
  margin-top: 8px;
  color: var(--ui-cream);
  font-size: 11px;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .8);
}

/* --- Trauma scan: CRT diagnostic ------------------------------------------ */
#game-over #crash-diagnostic {
  margin-top: 16px;
  border: 3px solid var(--ui-ink);
  background: #02100a;
  box-shadow: var(--bevel-sunk);
}

#game-over .diagnostic-heading {
  border-bottom: 3px solid rgba(47, 227, 138, .3);
  color: var(--ui-green);
  text-shadow: 0 0 8px rgba(47, 227, 138, .5);
}

#game-over .skeleton-frame {
  border: 3px solid var(--ui-ink);
  background: #01130c;
  box-shadow: var(--bevel-sunk);
}

#game-over .diagnostic-note {
  color: rgba(47, 227, 138, .55);
  letter-spacing: 1px;
}

/* --- Footer --------------------------------------------------------------- */
#game-over .result-card-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 4px double var(--ui-line);
  color: var(--ui-muted);
  font-size: 7px;
  letter-spacing: 2px;
}

#game-over #result-mode { color: var(--ui-amber); }

/* --- Actions -------------------------------------------------------------- */
.result-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

#ride-again {
  display: block;
  margin: 0;
  border: 3px solid var(--ui-ink);
  background: var(--ui-cyan);
  color: #00181f;
  box-shadow: var(--bevel-raised), var(--drop-hard);
}

#ride-again:hover { background: #8df4ff; color: #00181f; }

#restart,
#share-result {
  margin: 0;
  border: 3px solid var(--ui-ink);
  background: var(--ui-panel-raised);
  color: var(--ui-muted);
  box-shadow: var(--bevel-raised), var(--drop-hard);
}

#restart:hover,
#share-result:hover { background: var(--ui-panel-soft); color: var(--ui-cream); }

/* Severity now drives a filled stamp rather than an outline, so it reads at a
   glance and survives the PNG export. Class-level rules from the previous
   design set only border/text colour, so each state is restated here. */
#game-over #result-outcome,
#result-outcome.outcome-clear,
#result-outcome.outcome-minor,
#result-outcome.outcome-moderate,
#result-outcome.outcome-severe,
#result-outcome.outcome-critical {
  border-color: var(--ui-ink);
  /* No light text-shadow on a filled stamp: on the saturated reds it muddied
     the glyph edges instead of lifting them. */
  text-shadow: none;
  font-weight: normal;
}

#result-outcome.outcome-clear { background: var(--ui-green); color: #00291a; }
#result-outcome.outcome-minor { background: var(--ui-amber); color: #241700; }
#result-outcome.outcome-moderate { background: #ff8c1a; color: #2b1200; }
#result-outcome.outcome-severe { background: #ff5a2b; color: #180400; }
#result-outcome.outcome-critical { background: var(--ui-red); color: #16000c; }

#trauma-overall.severity-clear { color: var(--ui-green); }
#trauma-overall.severity-minor { color: var(--ui-amber); }
#trauma-overall.severity-moderate { color: #ff8c1a; }
#trauma-overall.severity-severe { color: #ff5a2b; }
#trauma-overall.severity-critical { color: var(--ui-red); background: transparent; }

/* Optional blocks collapse when unused instead of leaving a hole above the
   footer. */
#unlock-notify:empty,
#rogue-powerup-summary:empty { display: none; margin: 0; padding: 0; }

#unlock-notify {
  margin-top: 14px;
  padding: 10px;
  border: 3px solid var(--ui-ink);
  background: var(--ui-amber);
  box-shadow: var(--bevel-raised), var(--drop-hard);
  color: #241700;
  font-size: 9px;
  letter-spacing: 2px;
  line-height: 1.9;
  animation: arcadeBlink 0.9s steps(1, end) infinite;
}

/* --- Run card chrome ------------------------------------------------------
   #game-over is the scroll container, so decoration anchored to it rides up
   over the buttons as the player scrolls. The scanlines and corner brackets
   belong to the card itself, which is the full height of its content. */
/* The live card sits under the screen-wide CRT overlay like everything else.
   The exported PNG still draws its own scanlines: that is a picture of a
   screen, looked at outside the game. */
#run-share-card::before {
  content: none;
}

#run-share-card > * { position: relative; z-index: 2; }

#run-share-card::after {
  background-image:
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta)),
    linear-gradient(var(--ui-magenta), var(--ui-magenta));
  background-repeat: no-repeat;
  background-size:
    16px 4px, 4px 16px, 16px 4px, 4px 16px,
    16px 4px, 4px 16px, 16px 4px, 4px 16px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  z-index: 4;
}

/* --- Result actions -------------------------------------------------------
   Restated at ID specificity: several older rules paint every primary action
   amber, which left three competing gold buttons and no clear default. Ride
   Again is the one the player wants; the other two step back. */
#game-over .result-actions {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

#game-over #ride-again {
  order: -1;
  flex: 1 1 100%;
  margin: 0;
  border: 3px solid var(--ui-ink);
  background: var(--ui-cyan);
  color: #00181f;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .45);
  box-shadow: var(--bevel-raised), var(--drop-hard);
}

#game-over #ride-again:hover,
#game-over #ride-again:focus-visible {
  border-color: var(--ui-ink);
  background: #8df4ff;
  color: #00181f;
}

#game-over #share-result,
#game-over #restart {
  flex: 1 1 0;
  margin: 0;
  border: 3px solid var(--ui-ink);
  background: var(--ui-panel-raised);
  color: var(--ui-muted);
  box-shadow: var(--bevel-raised), var(--drop-hard);
}

#game-over #share-result:hover,
#game-over #restart:hover,
#game-over #share-result:focus-visible,
#game-over #restart:focus-visible {
  border-color: var(--ui-ink);
  background: var(--ui-panel-soft);
  color: var(--ui-cream);
}

/* Keep footer text clear of the card's corner brackets. */
#game-over .result-card-footer {
  padding-left: 18px;
  padding-right: 18px;
  padding-bottom: 4px;
}

#game-over .result-brand > span { padding-top: 4px; }

/* --- Run card: desktop two-column ----------------------------------------
   Stacked, the card ran ~970px tall and took over a 900px desktop screen,
   scrolling to reach the buttons. On a screen with width to spare the
   diagnostic moves alongside the score block instead of below it, which halves
   the height and lets the whole result sit on screen at once. Narrow screens
   keep the single stacked column. */
@media (min-width: 900px) and (min-height: 640px) {
  #game-over {
    width: min(880px, calc(100vw - 48px));
    max-height: calc(100vh - 32px);
  }

  #run-share-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    column-gap: 18px;
    align-content: start;
    min-height: 0;
    padding: 20px 20px 16px;
  }

  #game-over .result-card-header,
  #game-over .result-score,
  #game-over .result-meta,
  #game-over #unlock-notify,
  #game-over #rogue-powerup-summary {
    grid-column: 1;
  }

  /* Spans only the three rows that always carry content. Spanning the
     optional unlock/powerup rows too would park the diagnostic's extra height
     in rows that are usually empty, leaving a dead gap under the stat cells
     instead of spreading the score block down the column. */
  #game-over #crash-diagnostic {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
    margin: 0;
  }

  #game-over #daily-result,
  #game-over .result-card-footer {
    grid-column: 1 / -1;
  }

  /* The left column is now half the width, so the header stops needing a
     third of the card's height to itself. */
  #game-over .result-card-header {
    gap: 10px;
    padding-bottom: 12px;
  }

  #game-over #result-card-title {
    font-size: clamp(20px, 2.4vw, 28px);
  }

  #game-over .result-score {
    padding: 14px 8px 12px;
  }

  #game-over #final-score {
    font-size: clamp(34px, 3.6vw, 46px);
  }

  #game-over .result-meta {
    margin-top: 12px;
  }

  #game-over .skeleton-frame {
    min-height: 220px;
  }

  #game-over .result-card-footer {
    margin-top: 14px;
  }
}

/* --- CRT overlay ----------------------------------------------------------
   One scanline field over the whole viewport instead of a different one per
   panel. Scanlines belong to the screen the game is imagined to be running
   on, so they must cross the road, the HUD, the menus and the run card
   identically — the earlier per-panel layers had drifted to three different
   opacities and two different line spacings, which read as a texture on some
   boxes rather than as a display. */
#crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  /* Light enough to read as a display rather than as stripes painted on the
     buttons — bright cabinet colours show scanlines far more than the dark
     road does. */
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 3px,
    rgba(0, 0, 0, .13) 3px,
    rgba(0, 0, 0, .13) 4px
  );
}

/* --- HUD: score and best -------------------------------------------------- */
#odometer {
  gap: 3px;
  padding: 7px 9px;
  border: 3px solid var(--ui-ink);
  background: var(--ui-ink);
  box-shadow: var(--bevel-sunk);
}

.odo-digit {
  width: 24px;
  height: 34px;
  border: 0;
  background: #01030a;
  color: var(--ui-amber);
  font-size: 19px;
  line-height: 34px;
  text-shadow: 0 0 9px rgba(255, 195, 31, .5);
}

.odo-digit::before { display: none; }

#highscore-display {
  padding: 9px 13px;
  border: 3px solid var(--ui-ink);
  background: var(--ui-ink);
  box-shadow: var(--bevel-sunk);
  color: var(--ui-amber);
  font-size: 13px;
  letter-spacing: 3px;
  text-shadow: 0 0 9px rgba(255, 195, 31, .5);
}

/* Touch controls join the same parts bin as the menu buttons. */
.touch {
  border: 3px solid var(--ui-ink);
  background: var(--ui-panel-raised);
  box-shadow: var(--bevel-raised), var(--drop-hard);
  color: var(--ui-cream);
}

.touch:active {
  box-shadow: var(--bevel-sunk);
  transform: translate(2px, 2px);
}

/* --- Multiplayer: two-step flow ------------------------------------------
   The overlay used to stack local setup, a divider, and the whole online form
   on one scrolling page. Now the first screen asks which kind, and only that
   kind's controls appear. */
#multiplayer-overlay {
  width: min(430px, calc(100vw - 28px));
}

#mp-choice {
  width: min(330px, 100%);
  margin: 4px auto 0;
}

#mp-choice .mode-btn {
  display: block;
  width: 100%;
  min-height: 58px;
  margin: 0;
  font-size: 12px;
  letter-spacing: 3px;
}

.mp-choice-note {
  margin: 8px 0 20px;
  color: var(--ui-muted);
  font-size: 7px;
  letter-spacing: 2px;
  line-height: 1.7;
  text-transform: uppercase;
}

.mp-choice-note:last-child { margin-bottom: 6px; }

#mp-local,
#mp-setup {
  width: min(330px, 100%);
  margin: 0 auto;
  text-align: center;
}

#mp-local .mp-section-heading,
#mp-setup .mp-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 3px double var(--ui-line);
}

#mp-local .mp-section-heading h3,
#mp-setup .mp-section-heading h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 3px;
}

#mp-local .mp-section-heading span,
#mp-setup .mp-section-heading span {
  color: var(--ui-muted);
  font-size: 7px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#mp-local-start,
#mp-create {
  display: block;
  width: 100%;
  margin: 16px auto 10px;
}

.mp-local-rule {
  margin: 0 0 16px;
  color: var(--ui-muted);
  font-size: 7px;
  line-height: 1.9;
  letter-spacing: 1px;
}

#mp-local-back,
#mp-online-back {
  display: block;
  margin: 0 auto;
}

/* --- Touch controls: two thumb clusters ----------------------------------
   The old layout was a single row of four buttons spanning the screen, so the
   inner two sat near the middle where neither thumb rests and every input
   needed a reach. Throttle and brake now stack in the bottom-left corner and
   steering sits in the bottom-right, each reachable without moving the hand. */
#touch-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  transform: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
  /* Only the buttons take input, so the gap between clusters never eats a tap
     meant for the game. */
  pointer-events: none;
  z-index: 11;
}

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

.touch-cluster-left { flex-direction: column; }
.touch-cluster-right { flex-direction: row; }

#touch-controls .touch {
  width: 82px;
  min-height: 60px;
  padding: 0;
  border: 3px solid var(--ui-ink);
  background: var(--ui-panel-raised);
  box-shadow: var(--bevel-raised), var(--drop-hard);
  color: var(--ui-cream);
  font-size: 11px;
  letter-spacing: 2px;
  opacity: .92;
  /* Stop the browser treating a held button as a scroll, long-press or
     double-tap-to-zoom gesture mid-corner. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#touch-controls .touch-accel {
  background: var(--ui-cyan);
  color: #00181f;
}

#touch-controls .touch-brake {
  background: var(--ui-red);
  color: #1c0206;
}

#touch-controls .touch-steer {
  font-size: 20px;
  min-height: 72px;
}

/* The held look is driven by .is-held, set from the same state as the input.
   :active alone was unreliable with several fingers down, so a button could
   be driving the bike while still looking untouched. */
#touch-controls .touch:active,
#touch-controls .touch.is-held {
  box-shadow: var(--bevel-sunk), 2px 2px 0 rgba(0, 0, 0, .85);
  transform: translate(3px, 3px);
  filter: brightness(1.3);
}

/* The caret that marks keyboard focus on menu buttons has no place on a
   control you are holding down. */
#touch-controls .touch:hover::before,
#touch-controls .touch:focus-visible::before { content: none; }

/* The clusters own both bottom corners, so the round dial has nowhere left to
   sit down there. On a phone it becomes a strip along the top edge instead:
   clear of both thumbs, and near the vanishing point the rider is watching. */
@media (max-width: 899px) {
  /* Score and best stay compact so the top row never crowds on a phone. */
  .odo-digit { width: 18px; height: 27px; font-size: 15px; line-height: 27px; }
  #odometer { padding: 5px 7px; gap: 2px; }
  #highscore-display { font-size: 11px; padding: 7px 9px; letter-spacing: 2px; }
}

@media (max-width: 380px) {
  #touch-controls .touch { width: 70px; min-height: 54px; font-size: 9px; }
  #touch-controls .touch-steer { min-height: 64px; font-size: 17px; }
  .odo-digit { width: 15px; height: 23px; font-size: 12px; line-height: 23px; }
}

/* --- Speed readout placement ---------------------------------------------
   Desktop keeps the round dial pinned bottom-right. On a phone the canvas is
   an ordinary flex child between the two thumb clusters, so it self-centres in
   the leftover gap however wide the buttons end up. */
@media (min-width: 900px) {
  canvas#speedo-canvas {
    position: fixed;
    bottom: 18px;
    right: 18px;
    left: auto;
    top: auto;
    transform: none;
    width: 300px;
    height: 115px;
  }
}

@media (max-width: 899px) {
  /* Squeezed between score and best there was under 80px left, too little to
     read. Wrapping it onto its own line gives the readout real size without
     shrinking either number. */
  /* Sits inline in the bar between score and best. Both of those give up a
     little size to make room, which is a better trade than the readout
     taking a whole extra line to itself. */
  #hud-top { flex-wrap: nowrap; align-items: center; gap: 6px; }

  canvas#speedo-canvas {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    flex: 0 1 auto;
    width: 118px;
    height: auto;
    aspect-ratio: 330 / 108;
    margin: 0;
    min-width: 0;
  }

  .odo-digit { width: 15px; height: 24px; font-size: 13px; line-height: 24px; }
  #odometer { padding: 4px 5px; gap: 2px; }
  #highscore-display { font-size: 9px; padding: 6px 7px; letter-spacing: 1px; }
}

/* Must come after the #touch-controls layout block above: that rule sets
   display:flex outside any media query, so an earlier desktop `display:none`
   loses on source order and the buttons reappeared on desktop. */
@media (min-width: 900px) {
  #touch-controls { display: none; }
}

/* --- Button animation -----------------------------------------------------
   Everything here is stepped rather than eased. Smooth interpolation reads as
   modern web motion; a cabinet moves in frames, so the timing functions are
   steps() and the durations are short enough to feel mechanical. */

/* Press flash. Driven by a class rather than :active so a 20ms tap still
   plays the whole thing — on touch, :active can end before a frame renders.
   It runs on a pseudo-element rather than the button: `animation` is a single
   property, so putting it on the host meant every ID-scoped menu rule that
   sets an entrance animation silently won the cascade and the flash never
   played. A separate layer cannot collide with any of them. */
@keyframes btnHitFlash {
  0%   { opacity: .45; }
  50%  { opacity: .18; }
  100% { opacity: 0; }
}

/* Bike and powerup cards are divs with a button role, so they are included
   explicitly — they are the most-clicked controls in the game. Both already
   establish a positioning context. */
button.btn-hit::after,
.touch.btn-hit::after,
.bike-card.btn-hit::after,
.powerup-card.btn-hit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  animation: btnHitFlash 140ms steps(3, end) forwards;
}

/* Menu buttons drop into place when their panel opens, one after another,
   the way an attract screen builds its list. */
@keyframes btnDrop {
  0%   { opacity: 0; transform: translateY(-9px); }
  55%  { opacity: 1; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

#start-overlay #mode-select .mode-btn,
#mp-choice .mode-btn,
.result-actions button {
  animation: btnDrop 190ms steps(4, end) backwards;
}

#start-overlay #mode-select .mode-btn:nth-child(1),
#mp-choice .mode-btn:nth-child(1),
.result-actions button:nth-child(1) { animation-delay: 40ms; }
#start-overlay #mode-select .mode-btn:nth-child(2),
#mp-choice .mode-btn:nth-child(2),
.result-actions button:nth-child(2) { animation-delay: 95ms; }
#start-overlay #mode-select .mode-btn:nth-child(3),
.result-actions button:nth-child(3) { animation-delay: 150ms; }
#start-overlay #mode-select .mode-btn:nth-child(4) { animation-delay: 205ms; }

/* The primary action breathes on its own, like the lit START on a cabinet.
   Two steps, so it snaps between states instead of fading. */
@keyframes attractPulse {
  0%, 100% { box-shadow: var(--bevel-raised), var(--drop-hard); }
  50%      { box-shadow: var(--bevel-raised), var(--drop-hard), 0 0 0 3px var(--ui-cyan); }
}

#start-overlay #mode-select #mode-freeride,
#daily-overlay #daily-start,
#game-over #ride-again {
  animation: btnDrop 190ms steps(4, end) backwards,
             attractPulse 1.9s steps(2, end) 900ms infinite;
}

/* Hovering a menu button lifts it a frame; holding it drives it down. Both
   are single steps, never a glide. */
button:hover,
.mode-btn:hover {
  transition: none;
}

/* Touch buttons light up while genuinely held, so a thumb resting on the gas
   can see the input is live even with the button hidden under it. */
#touch-controls .touch-accel:active,
#touch-controls .touch-accel.is-held {
  box-shadow: var(--bevel-sunk), 0 0 0 3px #8df4ff, 0 0 18px rgba(36, 230, 255, .75);
}

#touch-controls .touch-brake:active,
#touch-controls .touch-brake.is-held {
  box-shadow: var(--bevel-sunk), 0 0 0 3px #ff8a90, 0 0 18px rgba(255, 59, 70, .75);
}

#touch-controls .touch-steer:active,
#touch-controls .touch-steer.is-held {
  box-shadow: var(--bevel-sunk), 0 0 0 3px var(--ui-amber), 0 0 16px rgba(255, 195, 31, .6);
}

/* Motion here is decoration; the caret, the colour change and the bevel all
   still communicate state without it. */
@media (prefers-reduced-motion: reduce) {
  button.btn-hit,
  .touch.btn-hit,
  #start-overlay #mode-select .mode-btn,
  #mp-choice .mode-btn,
  .result-actions button,
  #start-overlay #mode-select #mode-freeride,
  #daily-overlay #daily-start,
  #game-over #ride-again,
  button.btn-hit::after,
  .touch.btn-hit::after,
  button:hover::before,
  button:focus-visible::before,
  .mode-btn:hover::before,
  .mode-btn:focus-visible::before {
    animation: none;
  }
}

/* --- Touch: suppress the browser's own gestures ---------------------------
   Anything the OS wants to do with a held finger — highlight it, select
   around it, offer a callout, scroll, zoom, bounce the page — interrupts a
   control the player is steering with. */
html, body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#touch-controls,
#touch-controls * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

/* The play area itself should never scroll or zoom under a stray finger. */
canvas {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- Run card: shorter ----------------------------------------------------
   Removing the disclaimer only took about 6% off the on-screen card, which is
   not something you notice. The height is actually set by the skeleton and by
   the space between bands, so both come down here. On a phone the card was
   861px against an 834px viewport, so it scrolled just enough to hide the
   buttons; the cuts below bring it inside without shrinking the score. */
/* The skeleton carries an explicit height, so min-height on its frame could
   never shrink it — the SVG has to be sized directly. */
#game-over .skeleton-frame {
  min-height: 0;
}

#injury-skeleton {
  width: 118px;
  height: 208px;
}

#game-over .diagnostic-layout {
  gap: 11px;
  padding: 10px;
}

#game-over .result-card-header {
  gap: 8px;
  padding-top: 0;
  padding-bottom: 10px;
}

#game-over .result-brand > span {
  margin-bottom: 6px;
  padding-top: 0;
}

#game-over .result-score {
  padding: 12px 8px 10px;
}

.result-score-label {
  margin-bottom: 6px;
}

#game-over .result-meta > div {
  padding: 8px 6px;
}

#game-over .result-meta dd {
  margin-top: 6px;
}

#game-over #crash-diagnostic {
  margin-top: 12px;
}

#game-over .result-card-footer {
  margin-top: 10px;
  padding-top: 10px;
}

#game-over .result-actions {
  margin-top: 12px;
  gap: 8px;
}

@media (max-width: 899px) {
  /* The skeleton is the single biggest block on a phone, and it reads fine
     smaller — it is a coloured silhouette, not a diagram to study. */
  #game-over .skeleton-frame { min-height: 0; }
  #injury-skeleton { width: 92px; height: 162px; }

  #game-over .diagnostic-layout {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  #game-over #result-card-title { font-size: clamp(18px, 6vw, 24px); }
  #game-over #final-score { font-size: clamp(30px, 9vw, 40px); }
  #game-over .result-card-header { padding-bottom: 8px; }
  #game-over .result-score { padding: 10px 6px 8px; }
  #game-over #result-outcome { padding: 7px 10px 6px; font-size: 8px; }
  #run-share-card { padding: 14px 12px 12px; }
}

/* --- Run card on a phone: fit inside the usable viewport ------------------
   A 390x844 phone gives roughly 660px of usable height once the browser's own
   bars are counted, so the card has to come in well under its nominal
   viewport. These cuts drop the parts that carry the least: the branding
   footer (it is on the exported card anyway), spare padding in the stat
   cells, and skeleton size beyond what a coloured silhouette needs. */
@media (max-width: 899px) {
  #game-over .result-card-footer { display: none; }

  #injury-skeleton { width: 74px; height: 130px; }

  #game-over .diagnostic-layout {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 7px;
    padding: 7px;
  }

  #game-over .diagnostic-heading {
    padding: 6px 8px;
    font-size: 8px;
  }

  #game-over .result-meta > div { padding: 6px 4px; }
  #game-over .result-meta dt { font-size: 6px; }
  #game-over .result-meta dd { margin-top: 4px; font-size: 9px; }

  #game-over #crash-diagnostic { margin-top: 10px; }
  #game-over .result-score { padding: 8px 6px 6px; }
  #game-over #final-score { font-size: clamp(26px, 8vw, 34px); }
  #game-over .result-card-header { gap: 6px; padding-bottom: 7px; }
  #game-over .result-brand > span { margin-bottom: 4px; font-size: 7px; }

  #game-over .result-actions { margin-top: 10px; gap: 6px; }
  #game-over .result-actions button { min-height: 38px; padding: 9px 10px; font-size: 8px; }
  #game-over #ride-again { min-height: 42px; font-size: 10px; }

  #run-share-card { padding: 12px 10px 10px; }
  #game-over { padding: 0; }
}

/* Very short viewports — a phone in landscape, or Safari with every bar
   showing — trade the skeleton away rather than scroll. */
@media (max-width: 899px) and (max-height: 620px) {
  #game-over .skeleton-frame { display: none; }
  #game-over .diagnostic-layout { grid-template-columns: minmax(0, 1fr); }
  #game-over #result-card-title { font-size: 17px; }
  #game-over #final-score { font-size: 26px; }
  #game-over .result-score { padding: 6px 6px 5px; }
  #game-over .result-meta > div { padding: 5px 4px; }
  #game-over #crash-diagnostic { margin-top: 8px; }
  #run-share-card { padding: 10px 9px 9px; }
  #game-over .result-actions { margin-top: 8px; }
}