/* css/style.css */
/* NYC HUD design system: quiet graphite glass in the corners of the screen, taxi yellow for whatever is active,
   NYC DOT green for street names, so that the city itself stays the star */

:root {
  /* Surfaces */
  --glass: rgba(18, 19, 22, 0.62);
  --glass-strong: rgba(16, 17, 20, 0.88);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hover: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.1);

  /* Text */
  --text: #f6f5f2;
  --text-2: rgba(246, 245, 242, 0.68);
  --text-3: rgba(246, 245, 242, 0.44);

  /* Accents (Oakland Gold & Green) */
  --taxi: #efb21e;
  --taxi-ink: #121510;
  --sign-green: #005c45;
  --highway: #c08a3e;
  --ok: #5ee08f;
  --warn: #ffc857;
  --bad: #ff7a6b;

  /* Shape & motion */
  --edge: 20px;
  --bar-h: 50px;
  --r-panel: 16px;
  --r-ctl: 10px;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.2);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-sign: 'Overpass', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0a0b0d;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 14px;
  height: 14px;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

#canvas-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  cursor: grab;
}

#canvas-container:active {
  cursor: grabbing;
}

/* Soft scrims behind the HUD: keep small type legible over a bright midday street */
body::before,
body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

body::before {
  top: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0));
}

body::after {
  bottom: 0;
  height: 210px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0));
}

/* ------------------------------------------------------------------------------------------------------------------
   Glass panel
   ------------------------------------------------------------------------------------------------------------------ */
.panel {
  background: var(--grain), var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-panel);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow);
}

/* ------------------------------------------------------------------------------------------------------------------
   Loading screen
   ------------------------------------------------------------------------------------------------------------------ */
#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 38%, #1b1e24 0%, #0c0d10 55%, #060607 100%);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: rise-in 0.8s var(--ease-out) both;
}

.mta-bullet.loader-bullet {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  font-size: 21px;
}

.loader-title {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.loader-track {
  position: relative;
  width: 240px;
  height: 3px;
  margin: 26px 0 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.loader-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--taxi);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

/* While the city is being built (main thread busy) the bar sweeps on the compositor; it fills once shaders compile */
.loader-track.is-indeterminate .loader-fill {
  width: 35%;
  transform: translateX(-100%);
  transition: none;
  animation: loader-sweep 1.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  will-change: transform;
}

#loading-status {
  font-size: 12.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

@keyframes loader-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(290%); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------------------------------------------------------
   HUD layout: four corners plus the bottom centre, the middle of the screen stays clear
   ------------------------------------------------------------------------------------------------------------------ */
.hud {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
}

.hud > * {
  pointer-events: auto;
}

.hud-top-left {
  top: max(var(--edge), env(safe-area-inset-top));
  left: max(var(--edge), env(safe-area-inset-left));
}

.hud-top-right {
  top: var(--edge);
  right: var(--edge);
}

/* In its own window on the Mac the top strip is the window's title bar, which takes clicks for moving the window:
   the top panels sit below it, clear of the window's buttons */
html.mac-window .hud-top-left,
html.mac-window .hud-top-right { top: 58px; }

.hud-bottom-left {
  left: var(--edge);
  bottom: var(--edge);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.hud-bottom-center {
  left: 50%;
  bottom: var(--edge);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hud-bottom-right {
  right: var(--edge);
  bottom: var(--edge);
}

/* Clean view [H]: everything but the toggle itself steps out of the way */
body.hud-minimized::before,
body.hud-minimized::after {
  opacity: 0;
}

body.hud-minimized .hud:not(.hud-top-right) {
  opacity: 0;
}

body.hud-minimized .hud:not(.hud-top-right),
body.hud-minimized .hud:not(.hud-top-right) > * {
  pointer-events: none;
}

body.hud-minimized .hud-top-left { transform: translateY(-10px); }
body.hud-minimized .hud-bottom-left,
body.hud-minimized .hud-bottom-right { transform: translateY(12px); }
body.hud-minimized .hud-bottom-center { transform: translate(-50%, 12px); }

body.hud-minimized .toolbar > :not(#btn-toggle-hud) {
  display: none;
}

/* ------------------------------------------------------------------------------------------------------------------
   Top left: brand
   ------------------------------------------------------------------------------------------------------------------ */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  height: var(--bar-h);
  padding: 0 18px 0 9px;
}

.mta-bullet {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--taxi);
  color: var(--taxi-ink);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.brand-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-titles h1 {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.repo-link {
  flex: none;
  padding: 3px 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.repo-link:hover,
.repo-link:focus-visible {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brand-subtitle {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#hud-fps {
  font-weight: 650;
  color: var(--text-2);
}

#hud-fps.fps-ok { color: var(--ok); }
#hud-fps.fps-warn { color: var(--warn); }
#hud-fps.fps-bad { color: var(--bad); }

/* ------------------------------------------------------------------------------------------------------------------
   Top right: toolbar (time of day, teleport, map, clean view)
   ------------------------------------------------------------------------------------------------------------------ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--bar-h);
  padding: 0 5px;
}

.toolbar-divider {
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 5px;
  background: var(--divider);
}

.time-switch {
  display: flex;
  gap: 2px;
}

.time-btn {
  height: 36px;
  padding: 0 9px;
  border-radius: var(--r-ctl);
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--text-2);
  transition: background-color 0.2s ease, color 0.2s ease, gap 0.35s var(--ease-out), padding 0.35s var(--ease-out);
}

.time-btn:hover {
  color: var(--text);
  background: var(--hover);
}

/* The active time of day spells out its name */
.time-btn .seg-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  transition: max-width 0.4s var(--ease-out), opacity 0.25s ease;
}

.time-btn.active,
.time-btn.active:hover {
  gap: 7px;
  padding: 0 12px 0 10px;
  background: var(--text);
  color: #121314;
}

.time-btn.active .seg-label {
  max-width: 160px;
  opacity: 1;
}

.tool-btn {
  height: 36px;
  padding: 0 11px;
  border-radius: var(--r-ctl);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  transition: background-color 0.2s ease;
}

.tool-btn:hover,
.tool-btn.is-open {
  background: var(--hover);
}

.tool-btn .icon-sm {
  margin-left: -2px;
  color: var(--text-3);
  transition: transform 0.3s var(--ease-out);
}

.tool-btn.is-open .icon-sm {
  transform: rotate(180deg);
}

.tool-btn.icon-only {
  width: 36px;
  padding: 0;
  justify-content: center;
}

.icon-show {
  display: none;
}

body.hud-minimized .icon-hide {
  display: none;
}

body.hud-minimized .icon-show {
  display: block;
}

.tool-btn:active,
.time-btn:active,
.icon-btn:active,
.mode-btn:active,
.camera-current:active,
.pop-item:active {
  transform: scale(0.97);
}

/* ------------------------------------------------------------------------------------------------------------------
   Popovers (teleport destinations, cameras)
   ------------------------------------------------------------------------------------------------------------------ */
.popover {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 6px;
  min-width: 264px;
  max-height: calc(100vh - 2 * var(--edge) - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  color: var(--text);
  background: var(--grain), var(--glass-strong);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 28px 60px -22px rgba(0, 0, 0, 0.8), 0 4px 14px rgba(0, 0, 0, 0.3);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.26s var(--ease-out), overlay 0.26s allow-discrete, display 0.26s allow-discrete;
}

.popover[data-side='above'] {
  transform-origin: bottom right;
}

.popover:not(:popover-open) {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
}

.popover[data-side='above']:not(:popover-open) {
  transform: translateY(4px) scale(0.98);
}

@starting-style {
  .popover:popover-open {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }

  .popover[data-side='above']:popover-open {
    transform: translateY(4px) scale(0.98);
  }
}

.pop-title {
  padding: 9px 10px 6px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.pop-title:not(:first-child) {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}

.pop-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px;
  border-radius: 9px;
  text-align: left;
  font-size: 13px;
  font-weight: 550;
  color: var(--text);
  transition: background-color 0.15s ease;
}

.pop-item:hover {
  background: var(--hover);
}

.pop-item.active,
.pop-item.active:hover {
  background: var(--text);
  color: #121314;
}

.pop-item.active kbd {
  color: rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

.tp-btn {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.pop-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
}

/* ------------------------------------------------------------------------------------------------------------------
   Bottom left: NYC street-name signs over the GPS radar
   ------------------------------------------------------------------------------------------------------------------ */
.location {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  pointer-events: none;
}

.location-place {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 14px rgba(0, 0, 0, 0.4);
  animation: rise-in 0.4s var(--ease-out) both;
}

.location-signs {
  display: flex;
  align-items: center;
  gap: 6px;
  animation: rise-in 0.4s var(--ease-out) both;
}

.location-near {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Green blade, white inset border, Highway Gothic lettering: the sign on every corner in town */
.street-sign {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 9px 13px 7px;
  font-family: var(--font-sign);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 55%), var(--sign-green);
  border-radius: 6px;
  outline: 1.5px solid rgba(255, 255, 255, 0.92);
  outline-offset: -4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 10px 22px -10px rgba(0, 0, 0, 0.75);
}

.radar {
  position: relative;
  width: 288px;
  height: 184px;
  overflow: hidden;
  border-radius: 18px;
  background: #0a1118;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out);
}

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

/* Inner rim: a soft vignette so the map sinks into the frame */
.radar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 30px rgba(0, 0, 0, 0.55);
}

#minimap-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.radar-north {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  background: rgba(10, 12, 15, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.radar-key {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(10, 12, 15, 0.6);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.radar:hover .radar-key {
  color: var(--taxi-ink);
  background: var(--taxi);
  box-shadow: none;
}

/* ------------------------------------------------------------------------------------------------------------------
   Bottom centre: travel mode switcher & keyboard guide
   ------------------------------------------------------------------------------------------------------------------ */
.controls-hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  max-width: 720px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  animation: rise-in 0.35s var(--ease-out) both;
}

.hint kbd {
  color: #ffffff;
  background: rgba(12, 13, 15, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  text-shadow: none;
}

.hint-label {
  margin-left: 4px;
}

.mode-switch {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 5px;
}

/* The taxi-yellow pill glides to the selected mode (positioned by main.js) */
.mode-indicator {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--ind-w, 0px);
  transform: translateX(var(--ind-x, 0px));
  border-radius: 12px;
  background: var(--taxi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out);
}

.mode-btn {
  position: relative;
  z-index: 1;
  height: 42px;
  padding: 0 12px 0 11px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  transition: color 0.25s ease, background-color 0.2s ease;
}

.mode-btn:hover {
  color: var(--text);
  background: var(--hover);
}

.mode-btn.active,
.mode-btn.active:hover {
  color: var(--taxi-ink);
  background: transparent;
}

.mode-btn .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
}

.mode-btn kbd {
  margin-left: 2px;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.mode-btn.active kbd {
  color: rgba(23, 20, 10, 0.62);
  background: rgba(23, 20, 10, 0.1);
  box-shadow: none;
}

/* ------------------------------------------------------------------------------------------------------------------
   Bottom right: speed cluster & camera switcher
   ------------------------------------------------------------------------------------------------------------------ */
.cluster {
  width: 272px;
  overflow: hidden;
}

.gauge {
  padding: 13px 16px 15px;
}

.gauge-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.gauge-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.gauge-alt {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

body[data-mode='helicopter'] .gauge-alt {
  opacity: 1;
}

.gauge-alt-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.gauge-speed {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 5px;
}

#hud-speed {
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.gauge-unit {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.gauge-meter {
  position: relative;
  height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* Speed as a share of the mode's top speed */
#hud-speed-meter {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--text);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.25s linear;
}

.camera-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-top: 1px solid var(--divider);
}

.icon-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-ctl);
  display: inline-grid;
  place-items: center;
  color: var(--text-2);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.icon-btn:hover {
  color: var(--text);
  background: var(--hover);
}

.camera-current {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--r-ctl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

.camera-current:hover,
.camera-current.is-open {
  background: var(--hover);
}

.camera-current .icon {
  color: var(--text-3);
}

#hud-active-camera {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------------------------------------------------------
   Full-screen interactive street map ([M])
   ------------------------------------------------------------------------------------------------------------------ */
.fullmap-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #0a1118;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.fullmap-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fullmap-canvas-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: crosshair;
}

.fullmap-canvas-wrap.is-panning {
  cursor: grabbing;
}

#fullmap-canvas {
  touch-action: none;
  display: block;
  width: 100%;
  height: 100%;
}

.fullmap-header {
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  right: var(--edge);
  display: flex;
  align-items: stretch;
  gap: 10px;
  pointer-events: none;
}

.fullmap-header > * {
  pointer-events: auto;
}

.fullmap-modal:not(.hidden) .fullmap-header,
.fullmap-modal:not(.hidden) .map-controls,
.fullmap-modal:not(.hidden) .fullmap-credit { color: var(--text-3); }

.map-clear-route { pointer-events: auto; gap: 7px; }
.map-clear-route.hidden { display: none; }

.map-coordinate-crosshair {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  translate: -50% -50%;
  pointer-events: none;
  border: 1px solid rgba(135, 221, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}
.map-coordinate-crosshair::before, .map-coordinate-crosshair::after {
  content: ''; position: absolute; background: #a9e5ff;
  left: 50%; top: 50%; translate: -50% -50%;
}
.map-coordinate-crosshair::before { width: 26px; height: 1px; }
.map-coordinate-crosshair::after { width: 1px; height: 26px; }
.map-coordinates {
  position: absolute; left: var(--edge); bottom: calc(var(--edge) + 44px);
  width: 390px; max-width: calc(100% - 2 * var(--edge));
  padding: 12px; font-size: 12px; pointer-events: auto;
}
.map-coordinates[hidden], .map-coordinate-crosshair[hidden] { display: none; }
.map-coordinate-heading { font-weight: 600; margin-bottom: 8px; }
.map-coordinate-heading span { color: var(--text-2); font-weight: 400; margin-left: 5px; }
.map-coordinate-row { display: grid; grid-template-columns: 65px minmax(0, 1fr) auto; align-items: center; gap: 6px; margin-top: 5px; }
.map-coordinate-row label { color: var(--text-2); font-size: 11px; }
.map-coordinate-row input {
  width: 100%; min-width: 0; color: #d7f1ff; background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--divider); border-radius: 5px; padding: 7px 5px;
  font: 12px ui-monospace, SFMono-Regular, Consolas, monospace;
  user-select: text;
}
.map-coordinate-row button { padding: 7px 9px; border: 1px solid var(--divider); border-radius: 5px; color: var(--text); background: rgba(255, 255, 255, 0.08); cursor: pointer; }
.map-coordinate-row button:disabled { opacity: 0.4; cursor: default; }
.map-coordinate-row button:focus-visible, .map-coordinate-row input:focus-visible { outline: 2px solid #5fd0ff; outline-offset: 2px; }
.map-coordinate-status { margin-top: 7px; min-height: 14px; color: var(--text-2); font-size: 10px; }
@media (max-width: 820px) {
  .map-coordinates { bottom: calc(var(--edge) + 80px); width: 320px; max-width: calc(100% - 2 * var(--edge) - 64px); }
  .map-coordinate-row { grid-template-columns: minmax(0, 1fr) auto; }
  .map-coordinate-row label { grid-column: 1 / -1; }
  .map-coordinate-row button { min-height: 40px; }
}

.fullmap-footer {
  animation: rise-in 0.45s var(--ease-out) both;
}

.fullmap-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 20px 9px 11px;
}

.fullmap-title h2 {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.fullmap-subtitle {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fullmap-search-wrap {
  flex: 0 1 440px;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  color: var(--text-3);
  cursor: text;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fullmap-search-wrap:focus-within {
  color: var(--text-2);
  border-color: rgba(255, 255, 255, 0.24);
  background: var(--grain), var(--glass-strong);
}

.fullmap-search {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  user-select: text;
}

.fullmap-search::placeholder {
  color: var(--text-3);
}

.fullmap-close {
  margin-left: auto;
  height: auto;
  padding: 0 14px 0 12px;
  border-radius: var(--r-panel);
}

.fullmap-close:hover {
  background: var(--grain), var(--glass-strong);
}

/* (centred with `translate`, which the rise-in entrance animation on `transform` leaves alone) */
.map-controls {
  position: absolute;
  top: 50%;
  right: var(--edge);
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.map-compass {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.map-compass svg {
  width: 44px;
  height: 44px;
}

.map-compass text {
  font: 800 7.5px var(--font-sans);
  fill: #ffffff;
}

.map-zoom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
}

.fullmap-footer {
  position: absolute;
  left: 50%;
  bottom: var(--edge);
  translate: -50% 0;
  display: flex;
  gap: 10px;
  max-width: min(560px, calc(100% - 2 * var(--edge) - 2 * 200px));
}

.fullmap-status {
  min-width: 0;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fullmap-legend {
  position: absolute;
  right: var(--edge);
  bottom: var(--edge);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.fullmap-modal:not(.hidden) .fullmap-legend {
  animation: rise-in 0.45s var(--ease-out) both;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-swatch {
  flex: none;
  display: inline-block;
}

.player-swatch {
  width: 10px;
  height: 11px;
  background: #ffffff;
  clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%);
}

.landmark-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 2px #0b0f14, 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.gps-swatch,
.bridge-swatch {
  width: 16px;
  height: 4px;
  border-radius: 2px;
}

.gps-swatch { background: var(--taxi); }
.bridge-swatch { background: var(--highway); }

.legend-counts {
  padding-left: 14px;
  border-left: 1px solid var(--divider);
  color: var(--text-3);
}

/* Directory pilot (Vancouver): the address & business results under the map search, and the place card */
.fullmap-directory {
  position: absolute;
  z-index: 3;
  max-height: min(460px, calc(100% - 180px));
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: var(--r-panel);
  color: var(--text);
}
.fullmap-directory.hidden,
.place-card.hidden,
.fullmap-directory-list.hidden { display: none; }

.fullmap-directory-status,
.fullmap-directory-note {
  padding: 6px 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-3);
}
.fullmap-directory-note { border-top: 1px solid var(--divider); margin-top: 4px; }

.fullmap-directory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
}

.fullmap-directory-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.fullmap-directory-item:hover { background: rgba(255, 255, 255, 0.06); }
.fullmap-directory-item[aria-selected="true"] {
  background: rgba(95, 208, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(95, 208, 255, 0.45);
}

.fullmap-directory-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fullmap-directory-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fullmap-directory-sub { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fullmap-directory-flag { flex: none; font-size: 10.5px; color: #e3a857; padding-top: 2px; }

.place-kind-badge {
  flex: none;
  margin-top: 1px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0b0f14;
  background: #c9d1dc;
}
.place-kind-badge.kind-business,
.kind-business > .place-kind-badge { background: #5fd0ff; }

.place-card {
  position: absolute;
  z-index: 2;
  left: var(--edge);
  top: calc(var(--edge) + 84px);
  width: min(360px, calc(100% - 2 * var(--edge) - 72px));
  max-height: calc(100% - 2 * var(--edge) - 170px);
  overflow-y: auto;
  padding: 12px 14px 14px;
  border-radius: var(--r-panel);
  color: var(--text);
  animation: rise-in 0.3s var(--ease-out) both;
}
.place-card:focus { outline: none; }
.place-card-head { display: flex; align-items: center; justify-content: space-between; }
.place-card-close { font-size: 18px; line-height: 1; }
.place-card-title { margin: 6px 0 8px; font-size: 16px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.place-card-row { display: flex; gap: 10px; margin: 4px 0; font-size: 12.5px; line-height: 1.4; }
.place-card-label { flex: none; width: 64px; color: var(--text-3); }
.place-card-value { min-width: 0; overflow-wrap: anywhere; }
.place-card-muted { color: var(--text-3); font-size: 11.5px; line-height: 1.4; margin: 3px 0; overflow-wrap: anywhere; }
.place-card-coverage { margin-top: 8px; color: var(--text-2); }
.place-card-coverage.is-outside { color: #e3a857; }
.place-card-source { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--divider); }
.place-card-caveat { margin: 6px 0 0; font-size: 11.5px; color: var(--text-2); }
.place-card-link { color: #5fd0ff; text-decoration: underline; text-underline-offset: 2px; }
.place-card-link:focus-visible,
.place-card-close:focus-visible { outline: 2px solid #5fd0ff; outline-offset: 2px; }

/* ------------------------------------------------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------------------------------------------------ */
@media (max-width: 1800px) {
  .legend-counts { display: none; }
}

@media (max-width: 1360px) {
  .fullmap-legend { display: none; }
}

/* Slopcouver Looks (5 Nov 2026, Bug Hunt #8): from 1500 px down the mode bar (about 874 px) ran over the minimap and
   the speed panel. Its key numbers go (each button's tooltip keeps its key) and the Evo button keeps its badge only */
@media (max-width: 1500px) {
  body:not(.touch-enabled) .evo-btn kbd,
  body:not(.touch-enabled) .evo-btn-text { display: none; }
  /* Slopcouver Looks (the user: numbers on the mode buttons, 6 for the goose): the numbers stay, as small corner badges
     that take no width, so the bar still clears the minimap and the speed panel */
  body:not(.touch-enabled) .mode-btn { position: relative; }
  body:not(.touch-enabled) .mode-btn kbd {
    position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px;
    font-size: 9px; line-height: 14px; border-radius: 4px;
  }
}

@media (max-width: 1240px) {
  .controls-hint { display: none; }
  .mode-btn kbd { display: none; }
  /* Slop Vancouver: the toolbar (now with the weather menu) reached under the title panel from ~1240 px down; the
     active time keeps its icon and tooltip, its words go */
  .time-btn.active .seg-label { display: none; }
  .time-btn.active { padding: 0 9px; gap: 0; }
}

/* Slop Vancouver: the toolbar's words (Search, Weather, Teleport, Map) give way first, from 1440 px down (measured with
   the Search button: they met the title panel at about 1410 px) */
@media (max-width: 1440px) {
  .tool-label,
  .tool-btn kbd { display: none; }
  .tool-btn:not(.icon-only):not(.fullmap-close) { gap: 4px; padding: 0 9px; }
}

@media (min-width: 821px) and (max-width: 1080px) {
  .repo-link { display: none; }
}

/* Slop Vancouver: from 900 px down the title panel sits under the toolbar row (as it does from 820 px), so the two
   never meet (measured: 31 px of overlap at 821 px with the Search button) */
@media (max-width: 900px) {
  .hud-top-left { top: calc(max(var(--edge), env(safe-area-inset-top)) + 62px); }
}

@media (max-width: 1080px) {
  .mode-label,
  .tool-label,
  .tool-btn kbd { display: none; }
  .mode-btn { padding: 0 12px; }
  .tool-btn:not(.icon-only):not(.fullmap-close) { gap: 4px; padding: 0 9px; }
  /* Slop Vancouver: the compact title panel (as at 820 px) from 1080 px down, so the toolbar never slides under it;
     the city menu still names the city */
  .brand > .mta-bullet,
  .brand-heading h1,
  .brand-subtitle { display: none; }
  .brand { padding: 0 12px; }
}

@media (max-width: 820px) {
  :root { --edge: 12px; }
  .hud-top-left { top: calc(max(var(--edge), env(safe-area-inset-top)) + 62px); }
  .brand > .mta-bullet,
  .brand-heading h1,
  .brand-subtitle { display: none; }
  .brand { height: 44px; padding: 0 12px; }
  .repo-link { display: flex; align-items: center; gap: 4px; min-height: 44px; font-size: 12px; }
  .radar { width: 220px; height: 148px; }
  .cluster { width: 220px; }
  #hud-speed { font-size: 34px; }
  .fullmap-title > div { display: none; }
  .fullmap-title { padding: 9px; }
  .fullmap-footer { max-width: calc(100% - 2 * var(--edge)); bottom: calc(var(--edge) + 34px); }
  .map-controls { top: auto; bottom: calc(var(--edge) + 96px); translate: none; }
}

@media (max-width: 620px) {
  /* Slop Vancouver: on a phone the toolbar is wider than the screen; it fits the screen and scrolls sideways instead of
     running off the left edge (the time buttons were cut off before the weather menu was added) */
  #hud-toolbar {
    max-width: calc(100vw - 2 * var(--edge));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #hud-toolbar::-webkit-scrollbar { display: none; }
  #hud-toolbar > * { flex: none; }
  .time-btn.active .seg-label { display: none; }
  .time-btn.active { padding: 0 9px; gap: 0; }
  .radar { display: none; }
  .hud-bottom-right { bottom: calc(var(--edge) + 64px); }
  .gauge { display: none; }
  .camera-switch { border-top: 0; }
}

/* Touch controls reserve the bottom corners; mode and camera selection remain within reach. */
#touch-controls {
  position: fixed;
  z-index: 12;
  left: max(var(--edge), env(safe-area-inset-left));
  right: max(var(--edge), env(safe-area-inset-right));
  bottom: calc(max(var(--edge), env(safe-area-inset-bottom)) + 72px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
  -webkit-touch-callout: none;
}

#touch-controls[hidden],
.touch-action[hidden] { display: none; }

.touch-movement { text-align: center; }

#touch-stick {
  position: relative;
  width: 136px;
  height: 136px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 32%, transparent 33%), var(--glass);
  box-shadow: var(--shadow), inset 0 0 0 12px rgba(255, 255, 255, 0.025);
  pointer-events: auto;
  touch-action: none;
}

.touch-stick-axis::before,
.touch-stick-axis::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
}
.touch-stick-axis::before { top: 16px; bottom: 16px; width: 1px; left: 50%; }
.touch-stick-axis::after { left: 16px; right: 16px; height: 1px; top: 50%; }

#touch-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(246, 245, 242, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: translate(calc(-50% + var(--stick-x, 0px)), calc(-50% + var(--stick-y, 0px)));
  pointer-events: none;
}

#touch-stick.is-pressed #touch-stick-knob { background: var(--taxi); border-color: var(--taxi); }

.touch-caption,
.touch-look-hint {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 550;
  text-shadow: 0 1px 5px #000;
}
.touch-caption { display: block; margin-top: 8px; }
.touch-look-hint {
  position: fixed;
  top: calc(max(var(--edge), env(safe-area-inset-top)) + 120px);
  right: max(var(--edge), env(safe-area-inset-right));
  padding: 4px;
}

.touch-actions {
  display: flex;
  gap: 10px;
  padding-bottom: 22px;
}
.touch-action {
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--glass-strong);
  box-shadow: var(--shadow);
  font-size: 11px;
  font-weight: 650;
  pointer-events: auto;
  touch-action: none;
}
.touch-action > [aria-hidden] { font-size: 23px; line-height: 1; }
.touch-action.is-pressed { color: var(--taxi-ink); background: var(--taxi); border-color: var(--taxi); }

/* With a controller (body[data-input], from main.js), a key's badge shows the button that does the same, drawn by
   Lamp's runtime; a key with no such button is hidden, and LB and RB, which change the mode, flank the modes. */
.pad-only { display: none; }
body[data-input="controller"] .pad-only { display: inline-flex; align-self: center; margin: 0 4px; }
body[data-input="controller"] kbd:not([data-pad]) { display: none; }
body[data-input="controller"] kbd[data-pad] { min-width: 0; height: auto; padding: 0; background: none; box-shadow: none; font-size: 13px; }
body[data-input="controller"] .controls-hint { font-size: 13px; gap: 8px 18px; }

body.touch-enabled .controls-hint,
body.touch-enabled .radar,
body.touch-enabled .gauge,
body.touch-enabled kbd,
body.touch-enabled .toolbar-divider,
body.touch-enabled .seg-label { display: none; }

body.touch-enabled .hud-top-right { top: max(var(--edge), env(safe-area-inset-top)); right: max(var(--edge), env(safe-area-inset-right)); }
body.touch-enabled .toolbar { gap: 2px; padding: 4px; }
body.touch-enabled .time-btn,
body.touch-enabled .time-btn.active { height: 44px; min-width: 44px; padding: 0 8px; gap: 0; }
body.touch-enabled .tool-btn { min-width: 44px; min-height: 44px; }
body.touch-enabled .tool-label { display: none; }
body.touch-enabled .hud-bottom-center { bottom: max(var(--edge), env(safe-area-inset-bottom)); }
body.touch-enabled .mode-label { display: block; font-size: 10px; }
body.touch-enabled .mode-btn { width: 62px; height: 48px; padding: 0; flex-direction: column; justify-content: center; gap: 3px; }
body.touch-enabled .hud-bottom-right { top: calc(max(var(--edge), env(safe-area-inset-top)) + 62px); right: max(var(--edge), env(safe-area-inset-right)); bottom: auto; }
body.touch-enabled .cluster { width: 230px; }
body.touch-enabled .camera-switch { border: 0; }
body.touch-enabled .camera-switch .icon-btn { width: 44px; height: 44px; }
body.touch-enabled .hud-bottom-left { left: max(var(--edge), env(safe-area-inset-left)); bottom: calc(max(var(--edge), env(safe-area-inset-bottom)) + 254px); max-width: calc(100% - 2 * var(--edge)); }
body.touch-enabled .fullmap-header { top: max(var(--edge), env(safe-area-inset-top)); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right)); }
body.touch-enabled .map-controls .icon-btn { width: 44px; height: 44px; }
body.touch-enabled .pop-item { min-height: 44px; }

/* Slopcouver Looks (5 Nov 2026, Bug Hunt #6): a 360 px rule here wrapped the toolbar into a 194 px block over the
   search, the caveats and the camera, with buttons cut off at its edges. It's gone: at every phone width the toolbar
   is one row that scrolls sideways (the max-width 620 px rule), and the camera cluster goes under the search column */

/* Slop Vancouver: on a phone the search bar and the city panel fill the top-left column across the screen; the camera
   cluster goes below them (hud-search.js measures where the column ends) */
@media (max-width: 620px) {
  body.touch-enabled .hud-bottom-right { top: calc(var(--hud-left-bottom, 120px) + 8px); }
  body.touch-enabled .touch-look-hint { top: calc(var(--hud-left-bottom, 120px) + 70px); }
}

@media (max-height: 500px) {
  /* Slopcouver Looks (Bug Hunt #7): in phone landscape the 136 px stick and its caption covered the caveats chip; a
     smaller stick with no caption sits under it */
  body.touch-enabled #touch-stick { width: 104px; height: 104px; }
  body.touch-enabled #touch-stick-knob { width: 40px; height: 40px; }
  body.touch-enabled .touch-caption { display: none; }
  body.touch-enabled .hud-bottom-left { display: none; }
  body.touch-enabled .hud-bottom-right { top: calc(max(var(--edge), env(safe-area-inset-top)) + 58px); }
  #touch-controls { bottom: max(var(--edge), env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Lamp: the app's icon (the sightseeing helicopter), in place of the old A2 bullet */
.mta-bullet.app-logo {
  background: none;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.mta-bullet.app-logo.loader-bullet {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* A short line that comes and goes in the middle of the screen ("Slow down to get out") */
.notice {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%);
  padding: 14px 28px; border-radius: 14px; background: rgba(12, 16, 22, 0.78); color: #fff;
  font: 600 30px/1.2 system-ui, sans-serif; pointer-events: none; opacity: 0; transition: opacity 0.25s; z-index: 50;
}
.notice.show { opacity: 1; }

/* ------------------------------------------------------------------------------------------------------------------
   Slop Vancouver: "Your Evo" chooser beside the mode switch (hud-ui.js; shown only where the city's own car is an Evo)
   ------------------------------------------------------------------------------------------------------------------ */
.mode-divider {
  align-self: center;
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--divider);
}

.evo-btn {
  position: relative;
  z-index: 1;
  height: 42px;
  padding: 0 10px 0 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--text-2);
  transition: color 0.25s ease, background-color 0.2s ease;
}

.evo-btn:hover,
.evo-btn.is-open {
  color: var(--text);
  background: var(--hover);
}

.evo-btn:focus-visible,
.evo-option:has(input:focus-visible) {
  outline: 2px solid #19c6c2;
  outline-offset: 2px;
}

.evo-btn[hidden],
.evo-only[hidden] { display: none; }

.evo-badge {
  padding: 3px 7px 4px;
  border-radius: 7px;
  font: 800 13px/1 "Arial Rounded MT Bold", Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: #19c6c2;
  background: #14171a;
  box-shadow: inset 0 0 0 1px rgba(25, 198, 194, 0.45), inset 0 -2px 0 #19c6c2;
}

.evo-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.evo-btn-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.evo-btn-variant {
  font-size: 13px;
  font-weight: 600;
}

.evo-popover { min-width: 300px; max-width: min(360px, calc(100vw - 16px)); }

.evo-option {
  position: relative;
  justify-content: flex-start;
  gap: 12px;
  cursor: pointer;
}

.evo-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.evo-option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.evo-shape {
  flex: none;
  width: 58px;
  height: 24px;
  fill: currentColor;
}

.evo-shape .evo-rack {
  fill: none;
  stroke: #19c6c2;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.evo-shape .evo-wheel {
  fill: #0d0f11;
  stroke: currentColor;
  stroke-width: 1.4;
}

.evo-option.active .evo-shape .evo-wheel { fill: #2c3035; }
.evo-option.active .pop-sub { color: rgba(0, 0, 0, 0.58); }

.evo-status,
.evo-caveat {
  margin: 0;
  padding: 6px 10px 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-2);
}

.evo-caveat {
  padding-bottom: 6px;
  color: var(--text-3);
}

@media (max-width: 1240px) {
  .evo-btn kbd { display: none; }
}

@media (max-width: 1080px) {
  .evo-btn-text { display: none; }
  .evo-btn { padding: 0 9px; }
}

body.touch-enabled .evo-btn { height: 48px; min-width: 52px; justify-content: center; }
body.touch-enabled .evo-btn-text { display: none; }

/* Phones: five touch-sized modes plus the Evo button must fit a ~360-393 px wide screen */
@media (max-width: 440px) {
  body.touch-enabled .mode-divider { display: none; }
  body.touch-enabled .mode-btn { width: 54px; }
  body.touch-enabled .evo-btn { min-width: 44px; padding: 0 4px; }
}

/* ------------------------------------------------------------------------------------------------------------------
   Slop Vancouver Phase 1: the HUD search (hud-search.js)
   ------------------------------------------------------------------------------------------------------------------ */
.hud-search {
  /* Slop Vancouver: a bar at the top left (the header's first row), its suggestions dropping down under it */
  position: relative;
  z-index: 60;
  width: min(400px, calc(100vw - 2 * var(--edge)));
  margin-bottom: 8px;
  padding: 5px;
  color: var(--text);
  background: var(--grain), var(--glass-strong);
}
.hud-search .search-field { height: 40px; }
.hud-search .search-close[hidden] { display: none; }
.search-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  border-radius: var(--r-panel, 14px);
  border: 1px solid var(--glass-border);
  background: var(--grain), var(--glass-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.search-drop[hidden] { display: none; }
/* the bar's own row in the header: the header widens to it */
.hud-top-left { display: flex; flex-direction: column; align-items: flex-start; }
/* too little room beside the toolbar (hud-search.js fit): the header drops under the toolbar's row */
.hud-top-left.search-under-toolbar { top: calc(max(var(--edge), env(safe-area-inset-top)) + 62px); }
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 6px 0 12px;
  border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
}
.search-field > .icon { flex: none; color: var(--text-2); }
.search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.search-field input::placeholder { color: var(--text-3); }
.search-field:focus-within { border-color: rgba(239, 178, 30, 0.55); }
.search-results {
  max-height: min(420px, calc(100vh - 200px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  margin-top: 6px;
}
.search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 10px;
  border-radius: var(--r-ctl);
  cursor: pointer;
}
.search-row.active { background: var(--hover); }
.search-text { flex: 1; min-width: 0; }
.search-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.search-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-sub { margin-top: 2px; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-kind {
  flex: none;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.08);
}
.search-kind.kind-landmark { color: var(--taxi-ink); background: var(--taxi); }
.search-kind.kind-street { color: #fff; background: var(--sign-green); }
.search-kind.kind-shop { color: #f3e7c9; background: #7d2320; } /* the shop boards' own red and cream */
.search-kind.kind-art { color: #fff; background: #6a3d9a; }
.search-kind.kind-bike { color: #fff; background: #1f6fc4; } /* the bikes' blue */
.search-kind.kind-stop { color: #fff; background: #1b4f9c; } /* the stop flags' blue */
.search-kind.kind-amenity { color: #fff; background: #2f6f5e; }
.search-kind.kind-heritage { color: #fff; background: #8a6a3c; } /* the plaques' bronze */
.search-kind.kind-transit { color: #fff; background: #005daa; }
.search-go,
.search-route,
.search-map {
  flex: none;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.search-go { color: var(--taxi-ink); background: var(--taxi); border-color: transparent; }
.search-go:disabled { color: var(--text-3); background: transparent; border-color: var(--glass-border); cursor: default; }
.search-map,
.search-route { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.search-map:hover,
.search-route:hover { background: var(--hover); }
.search-status { padding: 8px 10px 2px; font-size: 12px; color: var(--text-3); }
body.touch-enabled .search-go,
body.touch-enabled .search-route,
body.touch-enabled .search-map { height: 40px; }

/* Slop Vancouver Phase 1: on a scenic camera the location shows the view, then where the player is */
.location-you {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.location-you-tag {
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--taxi-ink);
  background: var(--taxi);
}

/* Slop Vancouver: the next turn along a guided route (search's Route; street-route.js nextTurn) */
.route-hint {
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border-left: 4px solid var(--taxi);
  background: rgba(12, 16, 22, 0.78);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  max-width: 320px;
  pointer-events: none;
}
.route-hint[hidden] { display: none; }

/* Slop Vancouver (5 Nov 2026): the reload offer when the browser takes the graphics away (main.js webglcontextlost) */
.loader-recover {
  margin-top: 16px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 10px;
  background: #f5c542; color: #1f2a30; font: 700 16px/1 -apple-system, BlinkMacSystemFont, 'Inter', Arial, sans-serif;
  cursor: pointer; touch-action: manipulation;
}
.loader-recover:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Slop Vancouver (5 Nov 2026): saved places and problem reports (js/places-panel.js) */
.places-panel {
  position: fixed; z-index: 60; top: calc(env(safe-area-inset-top, 0px) + 76px); right: max(12px, env(safe-area-inset-right, 0px));
  width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 160px); overflow: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 12px; color: #f2f4f5; font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Inter', Arial, sans-serif;
}
.places-panel[hidden] { display: none; }
.places-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.places-panel label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; color: #d7dde0; }
.places-row { display: flex; gap: 8px; align-items: center; }
.places-panel input, .places-panel textarea {
  flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.35); color: #fff; font: inherit; font-size: 16px; resize: vertical;
}
.places-btn { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: #f5c542; color: #1f2a30; font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1; cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.places-btn.small { min-height: 36px; padding: 0 10px; font-size: 13px; }
.places-btn.ghost { background: rgba(255,255,255,0.12); color: #fff; }
.places-btn:focus-visible, .places-panel input:focus-visible, .places-panel textarea:focus-visible { outline: 3px solid #f5c542; outline-offset: 2px; }
.places-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.places-list li { display: flex; align-items: center; gap: 6px; }
.places-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.places-empty { color: #aeb7bc; font-size: 13px; }
.places-hint { font-size: 12px; color: #aeb7bc; }
.places-foot { margin: 0; font-size: 12px; color: #aeb7bc; }
body.hud-minimized .places-panel { display: none; }

/* Slop Vancouver (5 Nov 2026, overnight): on a phone the top third of the screen was controls (toolbar, search, the
   city row with its Engine link, the caveats chip, the camera switch). The city menu and Engine link go (one city on
   the public site; the engine is credited under "sources & caveats", which stays, smaller), so the street shows. */
@media (max-width: 520px) {
  body.touch-enabled .repo-link,
  body.touch-enabled .city-select { display: none; }
  body.touch-enabled .brand { height: 40px; padding: 0 8px; }
  body.touch-enabled .proto-note summary { font-size: 11px; padding: 6px 10px; min-height: 40px; display: flex; align-items: center; }
}
@media (max-width: 520px) {
  /* ...and the graphics switch and the caveats chip share one row under the search bar */
  body.touch-enabled .hud-top-left { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; }
  body.touch-enabled .hud-top-left > :first-child { flex-basis: 100%; }
  body.touch-enabled .hud-top-left .proto-note { margin-top: 0; }
}
@media (max-width: 430px) {
  /* ...and the mode bar (six buttons with the goose, and the Evo's badge) fits a 375 px screen */
  body.touch-enabled .mode-switch { max-width: calc(100vw - 16px); }
  body.touch-enabled .mode-btn { padding: 0 6px; min-width: 0; }
  body.touch-enabled .mode-label { font-size: 10px; }
}
.places-new summary { cursor: pointer; font-weight: 600; font-size: 13px; color: #d7dde0; margin-bottom: 6px; min-height: 32px; display: flex; align-items: center; }
#btn-places { position: relative; }
#btn-places.has-new::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #f5c542; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45); }

/* ------------------------------------------------------------------------------------------------------------------
   Slopcouver Looks round 5, option C "One menu" (hud-ui.js; body.phone-c only on a touch phone). Desktop never shows it.
   ------------------------------------------------------------------------------------------------------------------ */
.phone-bar, .phone-menu { display: none; }
body.phone-c .hud-top-left,
body.phone-c .hud-top-right,
body.phone-c .hud-bottom-center,
body.phone-c .hud-bottom-right,
body.phone-c .touch-look-hint { display: none; }

/* the top bar: menu, the current mode, the camera */
body.phone-c .phone-bar {
  position: fixed; z-index: 14; display: flex; justify-content: space-between; align-items: center;
  top: max(var(--edge), env(safe-area-inset-top)); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right));
  pointer-events: none;
}
body.phone-c .phone-bar > * { pointer-events: auto; }
.phone-ico {
  width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(18, 22, 28, 0.74); color: #fff; cursor: pointer;
}
.phone-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 16px; border: 0; border-radius: 22px;
  background: var(--taxi); color: #1f2a30; font-weight: 700; font-size: 14px; line-height: 1; font-family: inherit; cursor: pointer;
}
.phone-ico:focus-visible, .phone-chip:focus-visible, .phone-pill:focus-visible, .phone-seg button:focus-visible { outline: 3px solid var(--taxi); outline-offset: 2px; }

/* the street name sits under the bar, top left, clear of the pads (Goose's included) */
body.phone-c .hud-bottom-left { top: calc(max(var(--edge), env(safe-area-inset-top)) + 62px); bottom: auto; }
/* a notice (Goose mode, link copied) was 30 px type wrapping over the middle of the screen: a smaller toast */
body.phone-c .notice { font-size: 16px; padding: 10px 16px; max-width: calc(100vw - 32px); width: max-content; text-align: center; top: 22%; }

/* touch controls: no mode bar under them now; bigger actions; the D-pad on the right unless Left-handed */
body.phone-c #touch-controls { bottom: calc(max(var(--edge), env(safe-area-inset-bottom)) + 16px); }
body.phone-c:not(.left-handed) #touch-controls { flex-direction: row-reverse; }
body.phone-c .touch-actions .touch-action { min-width: 60px; min-height: 60px; }
body.phone-c #touch-stick {
  width: 148px; height: 148px; border-radius: 30%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='rgba(255,255,255,0.6)'%3E%3Cpath d='M50 8 59 20H41z'/%3E%3Cpath d='M50 92 41 80h18z'/%3E%3Cpath d='M8 50 20 41v18z'/%3E%3Cpath d='M92 50 80 59V41z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    var(--glass);
}
body.phone-c #touch-stick-knob { width: 52px; height: 52px; }
body.phone-c .touch-stick-axis::before,
body.phone-c .touch-stick-axis::after { display: none; }
body.phone-c .touch-caption { font-size: 11px; margin-top: 6px; }
@media (max-height: 500px) {
  body.phone-c #touch-stick { width: 120px; height: 120px; }
  body.phone-c #touch-stick-knob { width: 44px; height: 44px; }
  body.phone-c .hud-bottom-left { display: none; }
}

/* the menu: one full-screen sheet over the game */
body.phone-c .phone-menu:not([hidden]) {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(14, 17, 22, 0.94); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.phone-menu-head { display: flex; justify-content: space-between; align-items: center; }
.phone-menu-title { font-weight: 700; font-size: 18px; line-height: 1; font-family: inherit; }
.phone-pill { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer; }
.phone-menu-sec { display: flex; flex-direction: column; gap: 8px; }
.phone-menu-label { font-weight: 600; font-size: 11px; line-height: 1.2; font-family: inherit; letter-spacing: 0.06em; text-transform: uppercase; color: #aeb7bc; }
.phone-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); align-self: flex-start; }
.phone-seg button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #d7dde0; font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer; }
.phone-seg button[aria-pressed="true"] { background: var(--taxi); color: #1f2a30; }

/* the game's own controls, as they sit in the sheet */
body.phone-c .phone-menu .hud-search { position: static; width: auto; max-width: none; }
body.phone-c .phone-menu #mode-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; max-width: none; background: none; border: 0; box-shadow: none; }
body.phone-c .phone-menu #mode-switch .mode-indicator,
body.phone-c .phone-menu #mode-switch .mode-divider,
body.phone-c .phone-menu #mode-switch kbd { display: none; }
body.phone-c .phone-menu #mode-switch .mode-btn,
body.phone-c .phone-menu #mode-switch .evo-btn { width: auto; height: 64px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); color: #fff; justify-content: center; }
body.phone-c .phone-menu #mode-switch .mode-btn.active { background: var(--taxi); color: #1f2a30; }
body.phone-c .phone-menu #hud-toolbar { display: flex; flex-wrap: wrap; height: auto; max-width: none; overflow: visible; padding: 6px; gap: 4px; justify-content: flex-start; }
body.phone-c .phone-menu .brand { height: auto; align-self: flex-start; }
body.phone-c .phone-menu .proto-note { margin: 0; max-width: none; }

/* Slopcouver Looks (5 Nov 2026): Sightseeing (hud-ui.js). The button under the camera bar on the desktop HUD; on the
   phone (option C) a bar under the top row with the sight's name, the arrows and Back to player */
.sightsee-row { padding: 0 4px 4px; }
.sightsee-btn {
  width: 100%; height: 34px; padding: 0 10px; border-radius: var(--r-ctl); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-2); transition: background-color 0.15s ease, color 0.15s ease;
}
.sightsee-btn:hover { color: var(--text); background: var(--hover); }
.sightsee-btn[aria-pressed="true"] { background: var(--taxi); color: var(--taxi-ink); }
.sightsee-btn[aria-pressed="true"] kbd { color: inherit; border-color: currentColor; background: transparent; }
.sightsee-bar { display: none; }
body.phone-c.sightseeing .sightsee-bar:not([hidden]) {
  position: fixed; z-index: 14; left: 50%; transform: translateX(-50%); top: calc(max(var(--edge), env(safe-area-inset-top)) + 58px);
  display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 32px); padding: 4px; border-radius: 26px;
  background: rgba(18, 22, 28, 0.82); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff;
}
.sightsee-arrow { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; color: #fff; cursor: pointer; touch-action: manipulation; }
.sightsee-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; text-align: center; }
.sightsee-back { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: var(--taxi); color: #1f2a30; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.sightsee-arrow:focus-visible, .sightsee-back:focus-visible, .phone-sightsee:focus-visible { outline: 3px solid var(--taxi); outline-offset: 2px; }
/* the location sign moves down out of its way while sightseeing */
body.phone-c.sightseeing .hud-bottom-left { top: calc(max(var(--edge), env(safe-area-inset-top)) + 118px); }
.phone-sightsee {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.07);
  color: #fff; font-family: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.phone-sightsee-text { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 14px; line-height: 1.2; }
.phone-sightsee-sub { font-weight: 500; font-size: 12px; color: #aeb7bc; }
/* (the iPad on preview-119: in the touch layout the "Drag to look" caption sat on the Sightseeing row; the row is a
   44 px touch target there and the caption goes under it) */
body.touch-enabled .sightsee-btn { height: 44px; }
body.touch-enabled .touch-look-hint { top: calc(max(var(--edge), env(safe-area-inset-top)) + 168px); }
@media (max-width: 620px) {
  body.touch-enabled .touch-look-hint { top: calc(var(--hud-left-bottom, 120px) + 118px); }
}

/* Slop Earth Portals pilot (6 Nov 2026): a trip to another author's city from the Places panel (js/places-panel.js) */
.places-travel { display: flex; flex-direction: column; gap: 6px; }
.places-btn.travel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; align-self: flex-start; }
.places-btn.travel .travel-out { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.places-travel .places-hint a { color: #f5c542; }

/* ------------------------------------------------------------------------------------------------------------------
   Phone play, less cramped (the user's priority; 6 Nov overnight). Option C only (body.phone-c).
   ------------------------------------------------------------------------------------------------------------------ */
/* one way into the menu: the mode chip carries the menu icon; the separate menu button stays hidden in play */
body.phone-c #phone-menu-btn { display: none; }
.phone-chip svg:first-child { margin-left: -4px; }
/* the view: a labelled two-way pill, the current view lit */
.phone-view {
  display: inline-flex; align-items: center; height: 44px; padding: 3px; gap: 2px; border-radius: 22px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(18, 22, 28, 0.74); font-family: inherit;
}
.phone-view-opt { min-width: 44px; height: 36px; padding: 0 10px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: #d7dde0; font-weight: 700; font-size: 14px; line-height: 1; }
.phone-view-opt.on { background: #fff; color: #1f2a30; }
.phone-view:focus-visible, .phone-snap:focus-visible { outline: 3px solid var(--taxi); outline-offset: 2px; }
/* "Snap back": only while the view has been dragged away, under the view pill */
.phone-snap { display: none; }
body.phone-c .phone-snap:not([hidden]) {
  position: fixed; z-index: 14; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 12px;
  top: calc(max(var(--edge), env(safe-area-inset-top)) + 54px); right: max(var(--edge), env(safe-area-inset-right));
  border: 0; border-radius: 20px; background: var(--taxi); color: #1f2a30; font: 700 13px/1 inherit; font-family: inherit; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* the pad: a round analog stick by default */
body.phone-c #touch-stick { border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 46%, rgba(255, 255, 255, 0.14) 47% 49%, transparent 50%), var(--glass); }
/* or, as a setting (Menu > Move with > D-pad), a cross; the knob still shows how far you push (same analog input) */
body.phone-c.pad-dpad #touch-stick {
  border-radius: 22%; border-color: transparent; box-shadow: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M36 4h28a4 4 0 0 1 4 4v28h28a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H68v28a4 4 0 0 1-4 4H36a4 4 0 0 1-4-4V64H4a4 4 0 0 1-4-4V40a4 4 0 0 1 4-4h28V8a4 4 0 0 1 4-4z' fill='rgba(18,22,28,0.72)' stroke='rgba(255,255,255,0.28)' stroke-width='1.2'/%3E%3Cg fill='rgba(255,255,255,0.75)'%3E%3Cpath d='M50 10 58 21H42z'/%3E%3Cpath d='M50 90 42 79h16z'/%3E%3Cpath d='M10 50 21 42v16z'/%3E%3Cpath d='M90 50 79 58V42z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
body.phone-c.pad-dpad #touch-stick-knob { width: 34px; height: 34px; background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.8); }
@media (max-height: 500px) { body.phone-c.pad-dpad #touch-stick-knob { width: 30px; height: 30px; } }
/* upright, the district and street names sit under the bar on the left: Snap back goes below them */
@media (min-height: 501px) { body.phone-c .phone-snap:not([hidden]) { top: calc(max(var(--edge), env(safe-area-inset-top)) + 140px); } }