/* Night Ops City - Horizon Drive style HUD + overlays */
:root {
  --hd-pink: #ff4fa3;
  --hd-orange: #ff7a18;
  --hd-purple: #2a0a3d;
  --hd-sky: #1a0530;
  --cyan: #00e5ff;
  --lime: #5dff8a;
  --amber: #ffc857;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 122, 24, 0.45);
}

* { box-sizing: border-box; }

.hd-app {
  position: relative;
  width: 100%;
  height: 100%;
  background: #12061f;
  overflow: hidden;
  font-family: "IBM Plex Mono", monospace;
  color: var(--text);
}

#world {
  display: block;
  width: 100%;
  height: 100%;
  background: #12061f;
}

.hd-hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hd-hud[hidden] { display: none !important; }

.hd-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  pointer-events: none;
}

.hd-time {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: center;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hd-time b { font-weight: 700; }

.hd-flag {
  width: 18px;
  height: 14px;
  background:
    linear-gradient(90deg, #fff 50%, #111 50%) 0 0 / 6px 7px,
    linear-gradient(90deg, #111 50%, #fff 50%) 0 7px / 6px 7px;
  background-repeat: repeat;
  border: 1px solid rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.hd-jobs, .hd-cred { color: rgba(255, 255, 255, 0.85); font-size: 0.92em; }

.hd-cred {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(57, 255, 20, 0.45);
  background: rgba(8, 28, 14, 0.72);
  color: #9dffb0;
  font-variant-numeric: tabular-nums;
}

.hd-cred b {
  color: #39ff14;
  font-size: 1.15em;
  letter-spacing: 0.04em;
  min-width: 1.5ch;
  text-align: right;
}

.hd-cr-pop {
  position: absolute;
  left: 50%;
  top: -0.1rem;
  transform: translate(-50%, -100%);
  font-family: Orbitron, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}

.hd-cr-pop.is-on {
  animation: hd-cr-float 0.9s ease-out forwards;
}

.hd-cr-pop.is-gain {
  color: #39ff14;
  text-shadow: 0 0 12px rgba(57, 255, 20, 0.55);
}

.hd-cr-pop.is-loss {
  color: #ff6b6b;
  text-shadow: 0 0 12px rgba(255, 80, 80, 0.45);
}

@keyframes hd-cr-float {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -140%);
  }
}

.hd-top-right {
  display: flex;
  gap: 0.75rem;
  pointer-events: auto;
}

.hd-text-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font: 700 0.95rem "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.35rem;
}

.hd-text-btn:hover { color: var(--hd-orange); }

.hd-journal {
  position: absolute;
  top: 3.5rem;
  left: 1rem;
  width: min(280px, calc(100vw - 2rem));
  max-height: min(38vh, calc(100% - 18rem));
  overflow: auto;
  padding: 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 122, 24, 0.35);
  background: rgba(18, 6, 31, 0.9);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  font-family: Rajdhani, system-ui, sans-serif;
  z-index: 14;
}

.hd-journal[hidden] { display: none !important; }

.hd-journal h2 {
  margin: 0 0 0.35rem;
  font-family: Orbitron, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.hint {
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-size: 0.88rem;
}

#jobList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  max-height: 42vh;
  overflow: auto;
}

#jobList li {
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
}

#jobList li.done { opacity: 0.5; }
#jobList li.active { border-color: rgba(0, 229, 255, 0.5); }
#jobList strong {
  display: block;
  font-family: Orbitron, sans-serif;
  font-size: 0.7rem;
  margin-bottom: 0.1rem;
}

.prompt {
  position: absolute;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 24, 0.55);
  background: rgba(12, 4, 22, 0.85);
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 700;
  pointer-events: none;
}

.prompt[hidden] { display: none !important; }

.hd-speed {
  position: relative;
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  pointer-events: none;
  z-index: auto;
  width: 100%;
}

.hd-speed span {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hd-speed-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 48px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(8, 2, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
}

.hd-speed-bars i {
  display: block;
  width: 10px;
  border-radius: 3px 3px 1px 1px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.08s linear, height 0.08s linear;
}

.hd-speed-bars i.on {
  background: linear-gradient(180deg, #ff4fa3, #ff7a18);
  box-shadow: 0 0 10px rgba(255, 122, 24, 0.55);
}

.hd-map-wrap {
  position: absolute;
  left: 1rem;
  bottom: 7.5rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: min(300px, calc(100vw - 15rem));
  padding: 0.4rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 122, 24, 0.4);
  background: rgba(8, 2, 16, 0.82);
  pointer-events: none;
}

.hd-map-wrap span {
  display: block;
  text-align: center;
  margin-top: 0.25rem;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

#miniMap {
  display: block;
  width: 240px;
  height: 240px;
  border-radius: 12px;
  background: #0c0618;
  border: 1px solid rgba(255, 122, 24, 0.35);
}

.hd-pad {
  position: absolute;
  right: 1.1rem;
  bottom: 6.5rem;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: 52px 52px;
  gap: 0.4rem;
  pointer-events: auto;
}

.pad-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(12, 4, 22, 0.78);
  color: #fff;
  font: 700 0.72rem "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.pad-btn:hover { border-color: rgba(255, 122, 24, 0.7); }
.pad-btn.is-down {
  background: rgba(255, 122, 24, 0.35);
  border-color: #ff7a18;
  transform: scale(0.97);
}

.pad-brake { grid-column: 2; grid-row: 1; }
.pad-left { grid-column: 1; grid-row: 2; }
.pad-right { grid-column: 3; grid-row: 2; }
.pad-gas {
  grid-column: 2;
  grid-row: 2;
  background: rgba(255, 79, 163, 0.28);
  border-color: rgba(255, 79, 163, 0.55);
}

.hd-help {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 12rem));
}

.hd-help span { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }

kbd {
  display: inline-block;
  min-width: 1.2rem;
  padding: 0.12rem 0.4rem;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: #fff;
  text-align: center;
}

.weather-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.weather-label {
  grid-column: 1 / -1;
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff9a4a;
}

.weather-btn {
  appearance: none;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  cursor: pointer;
}

.weather-btn strong {
  display: block;
  font-family: Orbitron, sans-serif;
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
}

.weather-btn span {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: Rajdhani, system-ui, sans-serif;
}

.weather-btn:hover {
  border-color: rgba(255, 122, 24, 0.55);
}

.weather-btn.is-on {
  border-color: #ff7a18;
  background: rgba(255, 122, 24, 0.18);
  box-shadow: 0 0 18px rgba(255, 122, 24, 0.2);
}

.hd-controls-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 0 0 1rem;
}

.hd-controls-preview .ctrl-block {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  min-width: 0;
}

.hd-controls-preview .ctrl-block strong {
  color: #ff9a4a;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hd-controls-preview .ctrl-block kbd {
  display: inline-block;
  min-width: 1.35em;
  padding: 0.12em 0.35em;
  margin: 0 0.08em;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.45);
  font: inherit;
  font-size: 0.78rem;
  text-align: center;
  color: #fff;
}

.gfx-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.15rem 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.gfx-toggle-track {
  position: relative;
  width: 2.35rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.gfx-toggle-track i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.gfx-toggle.is-on .gfx-toggle-track,
.gfx-toggle[aria-pressed="true"] .gfx-toggle-track {
  background: rgba(255, 122, 24, 0.55);
  border-color: #ff7a18;
}

.gfx-toggle.is-on .gfx-toggle-track i,
.gfx-toggle[aria-pressed="true"] .gfx-toggle-track i {
  transform: translateX(1.05rem);
}

.gfx-toggle-label {
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .hd-controls-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .hd-help { display: none; }
  .hd-journal { max-height: 36vh; }
  .hd-pad {
    right: 0.6rem;
    bottom: 5.5rem;
    grid-template-columns: repeat(3, 56px);
  }
  .hd-map-wrap {
    left: 0.6rem;
    bottom: 6.5rem;
  }
  #miniMap { width: 160px; height: 160px; }
  .hd-map-legend { width: 160px; }
}

.boot, .terminal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(12, 4, 22, 0.72);
  backdrop-filter: blur(8px);
}

.boot[hidden], .terminal[hidden] { display: none !important; }

.boot-card, .term-panel {
  width: min(540px, 100%);
  padding: 1.4rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 122, 24, 0.4);
  background: linear-gradient(165deg, rgba(36, 10, 52, 0.96), rgba(12, 4, 22, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  font-family: Rajdhani, system-ui, sans-serif;
}

.boot-card.boot-card-wide {
  width: min(1080px, 96vw);
  max-height: min(92vh, 920px);
  overflow: auto;
  padding: 1.25rem 1.35rem;
}

.boot-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 0.85rem 0.95rem;
  align-items: stretch;
  justify-content: center;
}

.boot-main {
  min-width: 0;
}

.boot-leaderboard {
  margin: 0;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(8, 12, 24, 0.82);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  max-height: min(72vh, 640px);
  width: 100%;
  max-width: 300px;
  justify-self: start;
}

@media (max-width: 860px) {
  .boot-layout {
    grid-template-columns: 1fr;
  }
  .boot-card.boot-card-wide {
    max-height: 92vh;
  }
}

.eyebrow {
  margin: 0 0 0.4rem;
  color: var(--hd-orange);
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: "IBM Plex Mono", monospace;
}

h1 {
  margin: 0 0 0.55rem;
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
}

h1 span {
  color: transparent;
  background: linear-gradient(90deg, #ff7a18, #ff4fa3);
  -webkit-background-clip: text;
  background-clip: text;
}

.boot-card p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.boot-card a { color: #ff9a4a; }

.boot-note {
  margin-top: 0.75rem;
  color: var(--lime);
  font-size: 0.88rem;
}

.boot-note[hidden] {
  display: none !important;
}

.city-loader {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: rgba(8, 12, 24, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.22);
}

.city-loader[hidden] {
  display: none !important;
}

.city-loader-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 0.65rem;
}

.city-loader-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00e5ff, #ff4fa3);
  transition: width 0.25s ease;
}

.city-loader-text {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: #b8c4de;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn, .ghost {
  border-radius: 999px;
  min-height: 44px;
  padding: 0.55rem 1.2rem;
  font-family: Orbitron, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.btn {
  border: 0;
  color: #1a0530;
  background: linear-gradient(90deg, #ff7a18, #ff4fa3);
  box-shadow: 0 0 24px rgba(255, 122, 24, 0.35);
}

.ghost {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
}

.term-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
  font-family: Orbitron, sans-serif;
  letter-spacing: 0.06em;
}

.term-bar button {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.1rem;
  cursor: pointer;
}

.term-brief {
  margin: 0 0 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
}

.term-code {
  margin: 0 0 0.7rem;
  padding: 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a0612;
  color: #9dffb5;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  overflow: auto;
}

.term-label {
  display: block;
  margin-bottom: 0.35rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
}

#termInput {
  width: 100%;
  resize: vertical;
  min-height: 96px;
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 122, 24, 0.35);
  background: #0a0612;
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.88rem;
}

#termInput::placeholder {
  color: rgba(255, 255, 255, 0.28);
  opacity: 1;
}

.term-feedback {
  min-height: 1.2rem;
  margin: 0.55rem 0;
  color: var(--amber);
  font-size: 0.9rem;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.term-choices {
  display: grid;
  gap: 0.45rem;
  margin: 0.65rem 0 0.85rem;
}
.term-choices[hidden] { display: none !important; }
.term-choice-btn {
  appearance: none;
  text-align: left;
  border: 1px solid rgba(255, 122, 24, 0.35);
  background: rgba(10, 6, 18, 0.9);
  color: #fff;
  font: 600 0.85rem "IBM Plex Mono", monospace;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  cursor: pointer;
}
.term-choice-btn:hover { border-color: #ff7a18; }
.term-choice-btn.is-on {
  border-color: #00e5ff;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35);
  background: rgba(0, 40, 55, 0.55);
}
.term-choice-btn.is-tap-good.is-on {
  border-color: #5dff8a;
}

.term-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.boot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.boot-actions[hidden] {
  display: none !important;
}


/* Pedestrian hit warnings */
.hd-hit-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
}

.hd-hit-float {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  transform: translate(-50%, 0);
  text-align: center;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.65));
  animation: hd-hit-pop 0.35s ease-out;
}

.hd-hit-warn {
  font-family: Orbitron, sans-serif;
  font-size: clamp(0.85rem, 2.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ff6b6b;
  text-shadow:
    0 0 12px rgba(255, 40, 60, 0.85),
    0 2px 0 #3a0008;
}

.hd-hit-cr {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  font-weight: 700;
  color: #ffe066;
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px rgba(255, 200, 60, 0.7);
}

.hd-hit-float.is-gain .hd-hit-warn {
  color: #5dff8a;
  text-shadow:
    0 0 12px rgba(40, 255, 120, 0.75),
    0 2px 0 #003a18;
}

.hd-hit-float.is-gain .hd-hit-cr {
  color: #b8ffd0;
  text-shadow: 0 0 18px rgba(80, 255, 140, 0.85);
}

.hd-hit-float.is-loss .hd-hit-warn {
  color: #ff6b6b;
}

.hd-hit-float.is-loss .hd-hit-cr {
  color: #ffe066;
}

@keyframes hd-hit-pop {
  from { opacity: 0; transform: translate(-50%, 18px) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.hd-hit-flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(120, 0, 20, 0.55) 100%),
    linear-gradient(180deg, rgba(255, 40, 60, 0.18), transparent 40%);
  opacity: 0;
}

.hd-hit-flash.is-on {
  animation: hd-hit-flash 0.45s ease-out;
}

@keyframes hd-hit-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.weather-pick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
  margin: 0.85rem 0 1rem;
}
@media (min-width: 720px) {
  .weather-pick { grid-template-columns: 1fr 1fr 1fr; }
}


.hd-weather {
  display: flex;
  gap: 0.25rem;
  pointer-events: auto;
  z-index: 30;
  position: relative;
}
.hd-weather-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(10, 6, 24, 0.85);
  color: #fff;
  font: 700 0.72rem "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  cursor: pointer;
  pointer-events: auto;
}
.hd-weather-btn:hover { border-color: #ff7a18; color: #ff7a18; }
.hd-weather-btn.is-on {
  background: linear-gradient(90deg, #ff7a18, #ff4fa3);
  border-color: transparent;
  color: #1a0530;
}
.hd-gfx-btn.is-on {
  background: linear-gradient(90deg, #5dff8a, #00e5ff);
  border-color: transparent;
  color: #0a1520;
}

.hd-controls-dock {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  pointer-events: auto;
  width: 210px;
}
.hd-controls-toggle {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(12, 4, 22, 0.88);
  color: #fff;
  font: 700 0.75rem "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  cursor: pointer;
  align-self: flex-end;
}
.hd-controls-toggle:hover { border-color: #ff7a18; color: #ff7a18; }
.hd-controls-dock .hd-pad {
  position: static !important;
  right: auto;
  bottom: auto;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  justify-items: stretch;
}
.hd-controls-dock .hd-help {
  display: none !important;
}
.hd-controls-dock:not(.is-open) .hd-pad,
.hd-controls-dock:not(.is-open) .hd-speed,
.hd-controls-dock:not(.is-open) .hd-hint-cost {
  display: none !important;
}
.hd-controls-dock .hd-speed {
  margin-top: 0.1rem;
}
.hd-map-wrap {
  left: 1rem;
  bottom: 1rem;
  z-index: 10;
}
.hd-map-legend {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #c8d6f0;
  font-family: "IBM Plex Mono", monospace;
  width: 240px;
  max-width: 100%;
  word-break: break-word;
  text-align: center;
}

.hd-hint-cost {
  margin: 0;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: rgba(12, 4, 22, 0.75);
  border: 1px solid rgba(255, 200, 87, 0.35);
  color: #ffc857;
  font: 600 0.7rem "IBM Plex Mono", monospace;
  max-width: 220px;
  text-align: right;
}

.hd-speed {
  display: none !important;
}

.hd-controls-dock {
  display: none !important;
}

.hd-speedo {
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  z-index: 12;
  width: min(240px, 46vw);
  padding: 0.45rem 0.65rem 0.65rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 22, 36, 0.92), rgba(8, 10, 20, 0.88));
  border: 1px solid rgba(255, 122, 24, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.hd-speedo-face {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.boot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}

.boot-actions .boot-hub {
  margin-left: auto !important;
}

.boot-actions .boot-home,
.boot-actions .boot-hub {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.hd-speedo-readout {
  margin-top: -0.55rem;
  text-align: center;
  font-family: Orbitron, sans-serif;
  color: #fff;
  line-height: 1;
}

.hd-speedo-readout b {
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
  letter-spacing: 0.04em;
}

.hd-speedo-readout span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: #9eb0d0;
}

.hd-pilot {
  margin-left: 0.55rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.12);
  color: #9ef0ff;
  font: 700 0.72rem "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
}

.boot-disclaimer {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 200, 87, 0.35);
  background: rgba(40, 28, 8, 0.55);
  color: #ffe6a8;
  font-size: 0.92rem;
  line-height: 1.45;
}

.boot-pilot {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.boot-pilot label {
  font: 700 0.78rem Orbitron, sans-serif;
  letter-spacing: 0.08em;
  color: #c8d6f0;
}

.boot-pilot label span {
  font-weight: 500;
  letter-spacing: 0;
  color: #8490aa;
  font-family: Rajdhani, sans-serif;
}

.boot-pilot input[type="text"] {
  appearance: none;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(6, 10, 22, 0.9);
  color: #e8f0ff;
  font: 600 1rem "IBM Plex Mono", monospace;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
}

.boot-pilot input[type="text"]:focus {
  outline: 2px solid rgba(0, 229, 255, 0.45);
  border-color: #00e5ff;
}

.boot-pilot .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.boot-pilot-hint {
  margin: 0;
  font-size: 0.78rem;
  color: #8490aa;
}

.boot-pilot-hint.is-bad {
  color: #ff8a9a;
}

.boot-leaderboard header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}

.boot-leaderboard h2 {
  margin: 0;
  font: 700 0.85rem Orbitron, sans-serif;
  letter-spacing: 0.08em;
  color: #00e5ff;
}

.boot-leaderboard header span {
  font: 600 0.75rem "IBM Plex Mono", monospace;
  color: #8490aa;
}

.boot-leaderboard ol {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.boot-leaderboard li {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.28rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font: 600 0.85rem "IBM Plex Mono", monospace;
  color: #dce6ff;
}

.boot-leaderboard li:first-child:not(.lb-empty) {
  color: #ffe066;
}

.boot-leaderboard .lb-empty {
  display: block;
  color: #8490aa;
  border: 0;
}

.hd-lb-panel {
  position: absolute;
  top: 4.2rem;
  /* Pull inward from the far-right edge so it sits nearer the playfield */
  right: max(1rem, min(18vw, 220px));
  z-index: 18;
  width: min(300px, calc(100vw - 2rem));
  max-height: min(62vh, 480px);
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: rgba(8, 10, 22, 0.94);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.hd-lb-panel[hidden] {
  display: none !important;
}

.hd-lb-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.hd-lb-panel h2 {
  margin: 0;
  font: 700 0.85rem Orbitron, sans-serif;
  letter-spacing: 0.06em;
  color: #00e5ff;
}

.hd-lb-close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 24, 40, 0.95);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  position: relative;
  z-index: 30;
  pointer-events: auto;
  flex-shrink: 0;
}

.hd-lb-panel {
  pointer-events: auto;
}

.hd-lb-close:hover {
  border-color: #ff7a18;
  color: #ff7a18;
}

.hd-lb-sub {
  margin: 0 0 0.45rem;
  font: 600 0.72rem "IBM Plex Mono", monospace;
  color: #8490aa;
}

.hd-lb-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.hd-lb-panel li {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.28rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font: 600 0.8rem "IBM Plex Mono", monospace;
  color: #dce6ff;
}

.hd-lb-panel li:first-child:not(.lb-empty) {
  color: #ffe066;
}

.hd-lb-panel .lb-empty {
  display: block;
  border: 0;
  color: #8490aa;
}

.boot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.boot-actions .boot-hub {
  margin-left: auto;
}

.boot-actions .boot-home,
.boot-actions .boot-hub {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.city-saved {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at center, rgba(0, 40, 60, 0.35), rgba(4, 6, 14, 0.88)),
    rgba(4, 6, 14, 0.72);
  padding: 1.5rem;
}

.city-saved[hidden] {
  display: none !important;
}

.city-saved-card {
  width: min(520px, 100%);
  padding: 1.4rem 1.5rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(93, 255, 138, 0.45);
  background: rgba(8, 16, 24, 0.94);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.city-saved-card .eyebrow {
  margin: 0 0 0.4rem;
  color: #5dff8a;
  letter-spacing: 0.14em;
  font: 700 0.75rem Orbitron, sans-serif;
}

.city-saved-card h2 {
  margin: 0 0 0.6rem;
  font: 700 clamp(1.6rem, 4vw, 2.4rem) Orbitron, sans-serif;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 24px rgba(93, 255, 138, 0.45);
}

.city-saved-card p {
  margin: 0 0 0.75rem;
  color: #c8d6f0;
  line-height: 1.45;
}

.city-saved-xp {
  font: 700 1rem Orbitron, sans-serif;
  color: #ffe066;
}

.city-saved-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1rem;
}

body.weather-snow #world {
  filter: contrast(1.02) saturate(0.95) brightness(1.02);
}

body.weather-snow .hd-hud {
  text-shadow: 0 1px 8px rgba(8, 16, 32, 0.55);
}