* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
  background: #bcd6d5;
  color: #fff5df;
  font-family: Arial, sans-serif;
}
canvas {
  display: block;
}
header {
  position: absolute;
  top: 30px;
  left: 38px;
  right: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-weight: 950;
  font-size: 35px;
  letter-spacing: -2px;
  color: inherit;
  text-decoration: none;
}
.brand span {
  display: block;
  font-size: 9px;
  letter-spacing: 3px;
  margin-top: 2px;
}
.badge {
  font-size: 10px;
  letter-spacing: 2px;
  background: #203c3b70;
  border: 1px solid #ffffff30;
  border-radius: 30px;
  padding: 13px 17px;
}
.badge i {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #dfed9c;
  border-radius: 50%;
  margin-right: 8px;
}
.intro {
  position: absolute;
  top: 25%;
  left: 6%;
  text-shadow: 0 2px 30px #203c3b50;
  transition: 0.5s;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  color: #f8d993;
}
h1 {
  font-size: clamp(52px, 6.5vw, 96px);
  line-height: 0.95;
  letter-spacing: -5px;
  margin: 22px 0;
}
p {
  font-size: 14px;
  line-height: 1.7;
}
.intro button {
  border: 0;
  border-radius: 4px;
  padding: 20px 25px;
  background: #f5d47b;
  color: #263b35;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 1.5px;
  margin-top: 15px;
  cursor: pointer;
}
.intro button span {
  margin-left: 35px;
  font-size: 20px;
}
.intro small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.5px;
  margin-top: 18px;
}
.playing .intro {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-30px);
}
#destination {
  position: absolute;
  top: 125px;
  right: 38px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  background: #203c3b80;
  padding: 15px 20px;
  border-radius: 5px;
}
#destination span {
  font-size: 9px;
  letter-spacing: 1.5px;
}
#destination b {
  color: #f5d47b;
}
#settings {
  position: absolute;
  right: 38px;
  bottom: 130px;
  width: 240px;
  background: #173633d9;
  border: 1px solid #ffffff25;
  border-radius: 6px;
  backdrop-filter: blur(12px);
}
#toggle {
  width: 100%;
  background: none;
  color: inherit;
  border: 0;
  padding: 16px;
  text-align: left;
  cursor: pointer;
}
#toggle span {
  font-size: 10px;
  letter-spacing: 2px;
  margin: 0 15px;
}
#toggle b {
  float: right;
}
#tuning {
  padding: 0 18px 12px;
}
label {
  display: block;
  font-size: 11px;
  margin: 15px 0;
}
output {
  float: right;
  color: #f5d47b;
}
input {
  display: block;
  width: 100%;
  accent-color: #f5d47b;
  margin-top: 10px;
}
#tuning p {
  font-size: 10px;
  color: #b6c9bd;
}
footer {
  position: absolute;
  bottom: 26px;
  left: 38px;
  right: 38px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.location span {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  color: #e5d9b4;
}
.location b {
  font-size: 14px;
  display: block;
  margin-top: 10px;
}
.instruments {
  display: flex;
  gap: 25px;
  align-items: center;
  background: #193d39cc;
  padding: 14px 28px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}
.instruments strong {
  font-size: 52px;
  font-weight: 400;
  letter-spacing: -3px;
}
.instruments span {
  font-size: 9px;
  letter-spacing: 1px;
  margin-left: 9px;
}
.divider {
  height: 35px;
  width: 1px;
  background: #ffffff30;
}
.slope b,
.slope span {
  display: block;
}
.slope b {
  font-size: 23px;
}
.slope span {
  margin: 5px 0 0;
  font-size: 8px;
}
#reset {
  border: 1px solid #ffffff50;
  background: #17363380;
  color: inherit;
  border-radius: 5px;
  padding: 14px;
  cursor: pointer;
}
#reset span {
  font-size: 9px;
  letter-spacing: 1px;
  margin-left: 10px;
}
#touch {
  display: none;
}
#toast {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  background: #173633e8;
  padding: 18px 25px;
  border-radius: 5px;
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
  text-align: center;
}
@media (max-width: 700px) {
  header {
    top: 20px;
    left: 20px;
    right: 20px;
  }
  .brand {
    font-size: 28px;
  }
  .badge {
    font-size: 8px;
    padding: 10px;
  }
  .intro {
    left: 25px;
    top: 24%;
  }
  h1 {
    letter-spacing: -3px;
  }
  #destination {
    right: 20px;
    top: 95px;
    padding: 12px;
  }
  #settings {
    right: 20px;
    bottom: 190px;
    width: 210px;
  }
  footer {
    left: 20px;
    right: 20px;
    bottom: 95px;
  }
  .location {
    display: none;
  }
  .instruments {
    padding: 8px 18px;
  }
  .instruments strong {
    font-size: 40px;
  }
  #touch {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
  }
  #touch button {
    background: #193d39c9;
    border: 1px solid #ffffff50;
    border-radius: 8px;
    color: #fff5df;
    min-width: 0;
    flex: 1;
    height: 55px;
    font-size: 18px;
    touch-action: none;
    user-select: none;
  }
  #touch button[data-key=' '] {
    font-size: 10px;
  }
  #touch button[data-key='q'], #touch button[data-key='e'] { font-size: 13px; }
  #reset span {
    display: none;
  }
}

.playing .intro {
  display: none;
}

#recover {
  position: absolute;
  left: 50%;
  bottom: 145px;
  transform: translateX(-50%);
  padding: 17px 23px;
  background: #f5d47b;
  color: #263b35;
  border: 0;
  border-radius: 5px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
}
#recover span {
  margin-left: 15px;
  border: 1px solid #263b3560;
  padding: 3px 6px;
}
#recover[hidden] {
  display: none;
}
@media (max-width: 700px) {
  #recover {
    bottom: 270px;
    white-space: nowrap;
  }
}

.tach {
  min-width: 140px;
}
.tach > div:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tach b {
  font: 28px monospace;
  letter-spacing: -1px;
}
.tach span {
  margin: 0;
  font-size: 8px;
}
.tach em {
  margin-left: auto;
  font: 22px monospace;
  color: #f5d47b;
  border: 1px solid #ffffff30;
  border-radius: 4px;
  padding: 2px 7px;
}
.rpmTrack {
  height: 5px;
  background: #ffffff25;
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.rpmTrack i {
  display: block;
  height: 100%;
  width: 16%;
  background: #f5d47b;
  transition: width 0.1s linear;
}
.rpmTrack i.redline {
  background: #ee8265;
}
.tach small {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  margin-top: 5px;
  color: #c0cdbb;
}
@media (max-width: 1000px) {
  .location {
    max-width: 190px;
  }
  .instruments {
    gap: 15px;
    padding: 12px 18px;
  }
}
@media (max-width: 700px) {
  .tach {
    min-width: 100px;
  }
  .tach b {
    font-size: 23px;
  }
  .instruments {
    gap: 10px;
    padding: 8px 12px;
  }
  .slope,
  .slope-divider {
    display: none;
  }
  .instruments strong {
    font-size: 34px;
  }
  .tach small {
    font-size: 7px;
    letter-spacing: 1px;
  }
  #reset {
    margin-left: 8px;
  }
}

#tuning {
  max-height: 55vh;
  overflow-y: auto;
}

#visitDistrict {
  position: absolute;
  right: 38px;
  top: 188px;
  background: #173633cc;
  border: 1px solid #ffffff40;
  color: #f5d47b;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
}
@media (max-width: 700px) {
  #visitDistrict {
    right: 20px;
    top: 150px;
    font-size: 8px;
  }
}

#cameraMode {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 9px;
  background: #294a44;
  color: #fff5df;
  border: 1px solid #ffffff40;
  border-radius: 4px;
  font-size: 11px;
}
#multiplayer {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 8px;
  background: #183c35dd;
  color: white;
  font: 12px system-ui, sans-serif;
  z-index: 10;
  pointer-events: none;
}
#recover:disabled {
  opacity: 0.55;
  cursor: wait;
}
.intro label[for='nickname'] {
  display: block;
  margin-top: 18px;
  font-size: 13px;
}
#nickname {
  width: min(100%, 300px);
  box-sizing: border-box;
  padding: 12px 14px;
  margin: 8px 0 14px;
  border: 1px solid #f5d47b;
  border-radius: 5px;
  background: #183c35;
  color: #fff5df;
  font: inherit;
}
#nickname::placeholder { color: #c1cdc6; }
.player-nickname {
  position: fixed;
  transform: translate(-50%, -100%);
  padding: 5px 9px;
  border-radius: 6px;
  background: #183c35df;
  color: #fff5df;
  font: bold 13px system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}
.player-nickname[hidden] { display: none; }
.intro {
  top: 100px;
  left: 32px;
  width: min(560px, calc(100vw - 64px));
  max-height: calc(100dvh - 124px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 24px;
  border: 1px solid #ffffff25;
  border-radius: 14px;
  background: #173633e8;
  backdrop-filter: blur(8px);
}
.intro h1 { font-size: clamp(36px, 5vw, 60px); margin: 14px 0; letter-spacing: -2px; }
.intro p { font-size: 12px; margin: 10px 0 18px; }
.bike-selection-title { font-size: 10px; letter-spacing: 1.5px; color: #f5d47b; margin-bottom: 10px; }
#bike-selection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.intro .bike-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px;
  margin: 0;
  min-width: 0;
  background: #203e35;
  color: #fff5df;
  border: 1px solid #ffffff30;
  border-radius: 8px;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0;
  text-align: left;
}
.intro .bike-choice:hover { background: #2b5142; }
.intro .bike-choice[aria-pressed='true'] { border-color: var(--bike-color); background: #34503f; box-shadow: inset 0 0 0 1px var(--bike-color); }
.bike-choice svg { width: 100%; height: 68px; }
.intro .bike-choice strong { font-size: 12px; color: var(--bike-color); }
.intro .bike-choice span { font-size: 10px; line-height: 1.5; margin: 0; letter-spacing: 0; }
.intro .bike-choice small { font-size: 10px; letter-spacing: 0; margin: auto 0 0; color: #c5d4bf; }
.intro #nickname { width: 100%; }
.intro #start { width: 100%; margin-top: 0; }
@media (max-width: 600px) {
  .intro { top: 84px; left: 16px; width: calc(100vw - 32px); max-height: calc(100dvh - 100px); padding: 16px; }
  .intro .eyebrow { font-size: 9px; letter-spacing: 2px; }
  .bike-choice svg { height: 46px; }
  .intro .bike-choice { padding: 8px; }
  .intro .bike-choice span { display: none; }
  .intro .bike-choice strong { font-size: 11px; }
  .intro .bike-choice small { font-size: 9px; }
}
.results-reopen, .results-close {
  padding: 12px 16px;
  border: 1px solid #f5d47b80;
  background: #f5d47b;
  color: #173633;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}
.results-reopen { width: 100%; margin-top: 12px; font-size: 10px; }
.results-reopen[hidden] { display: none; }
.race-live-stats { line-height: 1.7; }
#race-results {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: clamp(18px, 4vw, 36px);
  border: 1px solid #f5d47b70;
  border-radius: 16px;
  background: #172c25;
  color: #fff5df;
  overflow-y: auto;
}
#race-results::backdrop { background: #081b15bb; backdrop-filter: blur(5px); }
#race-results h2 { margin: 8px 0; font-size: clamp(24px, 4vw, 38px); overflow-wrap: anywhere; }
#race-results .results-eyebrow { font-size: 10px; letter-spacing: 2px; color: #f5d47b; margin: 0; }
#race-results .results-subtitle { color: #bbccbc; margin: 8px 0 22px; font-size: 13px; }
#race-results .results-countdown { color: #f5d47b; font-size: 16px; margin: 0 0 20px; font-variant-numeric: tabular-nums; }
.results-awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.results-award { padding: 16px; border: 1px solid #ffffff25; background: #20392f; border-radius: 10px; overflow-wrap: anywhere; }
.results-award h3 { margin: 0; font-size: 15px; color: #f5d47b; }
.results-award p { font-size: 12px; color: #bbccbc; margin: 5px 0 12px; }
.results-award strong { display: block; font-size: 17px; }
.results-award small { display: block; color: #bbccbc; margin-top: 6px; font-size: 11px; }
.results-table-wrap { overflow-x: auto; margin-bottom: 24px; }
#race-results table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
#race-results th, #race-results td { padding: 10px 8px; border-bottom: 1px solid #ffffff20; }
#race-results thead { color: #bbccbc; font-size: 10px; }
.results-self { background: #f5d47b15; }
.results-close { display: block; margin-left: auto; }
@media (max-width: 600px) {
  .results-awards { grid-template-columns: 1fr; }
  .results-award { padding: 12px; }
}
.editor-link {
  display: block;
  padding: 12px 8px;
  margin-top: 10px;
  border: 1px solid #ffffff40;
  border-radius: 5px;
  color: #f5d47b;
  font-size: 10px;
  text-align: center;
  text-decoration: none;
}
#minimap {
  display: none;
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 180px;
  pointer-events: none;
  z-index: 6;
  text-align: center;
}
.playing #minimap { display: block; }
#minimap canvas {
  width: 100%;
  height: auto;
  border: 2px solid #fff5df60;
  border-radius: 50%;
  background: #142923;
}
#minimap div {
  display: inline-block;
  padding: 4px 9px;
  margin-top: 4px;
  background: #172a25de;
  border-radius: 6px;
  font-size: 10px;
}
@media (max-width: 700px) {
  #minimap { top: 88px; bottom: auto; width: 120px; }
}

/* Compact driving HUD; secondary information lives in the settings menu. */
header { top: 20px; left: 20px; right: 20px; pointer-events: none; }
header .brand { pointer-events: auto; }
.badge { display: none; }
.playing header { display: none; }
#settings {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  bottom: auto;
  width: 220px;
  z-index: 30;
}
#toggle { min-height: 46px; padding: 14px; }
#toggle span { margin: 0 8px; letter-spacing: 1px; }
#tuning {
  max-height: calc(100dvh - 88px);
  overscroll-behavior: contain;
  padding: 0 16px 16px;
}
#tuning .hud-option { display: flex; gap: 8px; align-items: center; }
#detailedHud { width: auto; margin: 0; }
#destination {
  position: static;
  margin: 16px 0 10px;
  padding: 12px 8px;
  gap: 6px;
  flex-wrap: wrap;
}
#destination span { letter-spacing: 0.5px; }
#visitDistrict, #reset {
  position: static;
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 12px 8px;
  font-size: 9px;
}
#reset span { display: inline; }
#multiplayer {
  position: static;
  transform: none;
  margin-top: 14px;
  padding: 8px 0 0;
  background: none;
  color: #b6c9bd;
  font-size: 11px;
}
#delivery-score {
  display: none;
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  max-width: calc(100vw - 268px);
  padding: 13px 16px;
  background: #172a25de;
  color: #ffe185;
  border-radius: 8px;
  z-index: 20;
  font: 13px/1.5 system-ui, sans-serif;
  pointer-events: none;
}
.playing #delivery-score { display: block; }
footer {
  left: 16px;
  right: 16px;
  bottom: max(20px, env(safe-area-inset-bottom));
  justify-content: center;
  pointer-events: none;
}
body:not(.playing) footer, body:not(.playing) #touch { display: none; }
.location {
  position: absolute;
  bottom: 80px;
  display: block;
  max-width: min(90vw, 460px);
  text-align: center;
  text-shadow: 0 1px 5px #172a25;
}
.location span { display: none; }
.location b { font-size: 11px; font-weight: normal; margin: 0; }
.instruments { gap: 16px; padding: 8px 20px; }
.instruments strong { font-size: 40px; }
.tach { min-width: 0; }
body:not(.detailed-hud) .tach b,
body:not(.detailed-hud) .tach span,
body:not(.detailed-hud) .rpmTrack,
body:not(.detailed-hud) .tach small,
body:not(.detailed-hud) .slope,
body:not(.detailed-hud) .slope-divider { display: none; }
.detailed-hud .tach { min-width: 100px; }
.detailed-hud .slope { display: block; }
.detailed-hud .slope-divider { display: block; }
#recover { bottom: 140px; z-index: 21; }
@media (max-width: 700px) {
  #settings { width: 46px; }
  #toggle { padding: 0; text-align: center; font-size: 20px; }
  #toggle span, #toggle b { display: none; }
  #tuning {
    position: absolute;
    top: 54px;
    right: 0;
    width: min(300px, calc(100vw - 32px));
    max-height: calc(100dvh - 100px);
    background: #173633f5;
    border: 1px solid #ffffff25;
    border-radius: 8px;
  }
  #delivery-score { max-width: calc(100vw - 94px); padding: 9px 12px; font-size: 11px; }
  footer { bottom: 90px; }
  .instruments { padding: 6px 16px; gap: 12px; }
  .instruments strong { font-size: 32px; }
  .location { bottom: 65px; }
  #recover { bottom: 210px; padding: 14px 18px; }
}

#police-hud { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); max-width: 85vw; padding: 10px 16px; background: #131b2dee; border: 1px solid #e26363; color: #fff; border-radius: 10px; z-index: 15; text-align: center; font: bold 14px system-ui; pointer-events: none; }
#police-hud[hidden] { display: none; }

#open-world-map, #powerup { position:fixed; right:24px; z-index:15; padding:12px 16px; border:1px solid #77998b; border-radius:10px; background:#142923; color:#fff5df; cursor:pointer; }
#open-world-map { bottom:260px; } #powerup { bottom:208px; } #powerup.active { background:#897012; } #powerup:disabled { cursor:default; }
#world-map {
  box-sizing: border-box; width: min(920px, calc(100vw - 24px));
  height: min(960px, calc(100dvh - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
  padding: 12px; border: 1px solid #77998b; border-radius: 12px;
  background: #142923; color: #fff5df; z-index: 100; overflow: hidden;
}
#world-map[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
#world-map .world-map-viewport { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
#world-map::backdrop { background:#0009; } #world-map canvas { display:block; flex: none; max-width:100%; max-height:100%; touch-action:none; cursor:grab; }
#world-map .world-map-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; } #world-map button { padding:8px; cursor:pointer; }

#powerup-indicator {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
  z-index: 20; pointer-events: none; width: min(310px, calc(100vw - 32px));
  box-sizing: border-box; padding: 14px 18px; border: 2px solid #ffe077;
  border-radius: 14px; color: #fff7cb; background: #463408f2;
  box-shadow: 0 0 28px #ffca4255; font-family: inherit;
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}
#powerup-indicator[hidden] { display: none; }
#powerup-indicator strong { align-self: center; font-size: 16px; letter-spacing: 1px; }
#powerup-indicator b { font-size: 23px; font-variant-numeric: tabular-nums; }
#powerup-indicator span { grid-column: 1 / -1; font-size: 11px; letter-spacing: .6px; }
#powerup-indicator > div { grid-column: 1 / -1; height: 5px; border-radius: 4px; background: #ffffff25; overflow: hidden; }
#powerup-indicator i { display: block; height: 100%; background: #ffe077; transform-origin: left; }
@media (max-width: 600px) { #powerup-indicator { top: 12px; width: min(280px, calc(100vw - 32px)); padding: 10px 14px; } }