/* ==========================================================================
   GULLY BAAZI : BHARAT — menu.css
   Main menu, character select, pause, settings, credits, loading, modals.
   ========================================================================== */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-lowest);
}

.screen--clear { background: transparent; }
.screen--scroll { overflow-y: auto; overflow-x: hidden; }
.screen.is-hidden { display: none; }

/* CRT bezel frame around menu content, echoing the arcade cabinet mockup */
.menu-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--md);
  width: 100%;
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  padding: var(--md);
}

.menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--md);
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 1024px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Title billboard
   ========================================================================== */

.billboard {
  display: flex;
  flex-direction: column;
  gap: var(--md);
  padding: var(--md);
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-4);
}

.logo-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--primary);
  text-shadow: 0 2px 10px rgba(255, 198, 101, 0.45);
}

.logo-title span { color: var(--secondary); text-shadow: var(--glow-secondary); }

.logo-sub {
  display: flex;
  align-items: center;
  gap: var(--sm);
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--xs));
}

.logo-sub__deva {
  font-family: var(--font-deva);
  font-size: 22px;
  font-weight: 700;
  color: var(--tertiary);
}

.logo-sub__rule {
  padding: 2px 8px;
  background: var(--tertiary-container);
  color: var(--on-tertiary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tagline {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-surface-variant);
}

.tagline em { color: var(--secondary); font-style: normal; }

.menu-actions { display: flex; flex-direction: column; gap: var(--sm); }
.menu-actions__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sm); }
@media (max-width: 420px) { .menu-actions__pair { grid-template-columns: 1fr; } }

/* ==========================================================================
   Diorama viewport (right flank)
   ========================================================================== */

/* The viewport is a window onto the WebGL canvas behind the UI, so it must NOT
   paint a background — it only draws a frame and the overlay telemetry. */
.viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  padding: var(--md);
  background: transparent;
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-4);
  overflow: hidden;
}

/* a faint inner scrim so the overlay text stays legible over bright voxels */
.viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 14, 12, 0.55) 0%, rgba(15, 14, 12, 0) 35%, rgba(15, 14, 12, 0) 60%, rgba(15, 14, 12, 0.6) 100%);
  pointer-events: none;
}

.viewport__canvas { position: absolute; inset: 0; }

.viewport__top,
.viewport__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm);
  flex-wrap: wrap;
}

.viewport__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface-lowest) 90%, transparent);
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.viewport__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sm);
  max-width: 340px;
  margin: auto 0;
}

.callout {
  display: flex;
  gap: var(--sm);
  padding: var(--sm);
  background: color-mix(in srgb, var(--surface-container) 95%, transparent);
  box-shadow: var(--shadow-3);
}

.callout__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background: var(--primary);
  color: var(--on-primary);
}
.callout__icon svg { width: 18px; height: 18px; fill: currentColor; }
.callout__title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.callout__text { font-family: var(--font-display); font-size: 11px; color: var(--on-surface-variant); line-height: 1.5; }

.city-tabs { display: flex; gap: var(--xs); flex-wrap: wrap; }

/* ==========================================================================
   Radio widget
   ========================================================================== */

.radio {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
  padding: var(--sm);
  background: var(--surface-container);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-2);
}

.radio__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm);
  padding: var(--xs) var(--sm);
  background: var(--surface-lowest);
}

.radio__now { display: flex; flex-direction: column; min-width: 0; }
.radio__station { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.radio__track { font-family: var(--font-data); font-size: 10px; color: var(--on-surface-variant); }

.radio__toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  background: var(--primary);
  color: var(--on-primary);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  cursor: pointer;
}
.radio__toggle svg { width: 16px; height: 16px; fill: currentColor; }

.radio__dials { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: 9px; letter-spacing: 0.08em; color: var(--outline); }
.radio__dial.is-active { color: var(--retro-cyan); font-weight: 700; }

/* ==========================================================================
   Placeholder screens (settings / credits / info)
   ========================================================================== */

.placeholder {
  display: grid;
  place-content: center;
  gap: var(--md);
  height: 100%;
  padding: var(--xl);
  text-align: center;
}

.placeholder__code {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--outline);
}

.placeholder__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary);
  text-shadow: var(--glow-primary);
}

.placeholder__note { max-width: 520px; margin: 0 auto; color: var(--on-surface-variant); font-size: 13px; }
.placeholder__actions { display: flex; gap: var(--sm); justify-content: center; flex-wrap: wrap; }
.placeholder__actions .btn { width: auto; min-width: 160px; }

/* ==========================================================================
   Loading screen — pixelated loading bar
   ========================================================================== */

.loading {
  display: grid;
  place-content: center;
  gap: var(--md);
  height: 100%;
  padding: var(--xl);
  text-align: center;
}

.loading__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.loading__stage { font-family: var(--font-data); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface-variant); min-height: 14px; }

.loading__track {
  position: relative;
  width: min(460px, 78vw);
  height: 26px;
  padding: 3px;
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
  box-shadow: inset var(--shadow-1);
}

/* pixelated fill: stepped blocks, no smooth gradient */
.loading__fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(90deg, var(--primary) 0 8px, var(--primary-container) 8px 10px);
  transition: width 0.18s steps(6);
}

.loading__pct { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--secondary); }

/* ==========================================================================
   Pause menu
   ========================================================================== */

.pause {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface-lowest) 82%, transparent);
}

.pause__panel { width: min(420px, 88vw); }

/* ==========================================================================
   Toast + modal
   ========================================================================== */

.toast-stack {
  position: absolute;
  right: var(--md);
  bottom: var(--md);
  display: flex;
  flex-direction: column;
  gap: var(--sm);
  max-width: 320px;
}

.toast {
  padding: var(--sm) var(--md);
  background: var(--surface-container);
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow-3);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.04em;
  animation: toast-in 0.18s steps(3);
}

@keyframes toast-in { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface-lowest) 86%, transparent);
}

.modal__panel { width: min(560px, 92vw); }

/* ==========================================================================
   Keybind legend
   ========================================================================== */

.keyhints {
  display: flex;
  align-items: center;
  gap: var(--md);
  flex-wrap: wrap;
  padding: var(--sm) var(--md);
  background: var(--surface-lowest);
  border-top: 2px solid var(--surface-high);
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--outline);
}

.keyhints kbd {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 5px;
  background: var(--surface-low);
  border: 1px solid var(--outline-variant);
  color: var(--secondary);
  font-family: var(--font-data);
  font-size: 9px;
}

/* ==========================================================================
   Character select
   ========================================================================== */

.cs-body {
  display: flex;
  flex-direction: column;
  gap: var(--md);
  flex: 1 1 auto;
  min-height: 0;
}

.cs-roster {
  display: flex;
  gap: var(--sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.cs-roster .cs-card {
  flex: 0 0 23%;
  min-width: 118px;
  scroll-snap-align: start;
}

@media (max-width: 900px) {
  .cs-roster .cs-card { flex: 0 0 44%; }
}

.cs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sm) var(--xs);
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
  text-align: center;
}

.cs-card:hover { background: var(--surface-container); }

.cs-card.is-selected {
  background: var(--surface-high);
  border-color: var(--primary);
  box-shadow: var(--shadow-3);
  transform: translateY(-3px);
}

.cs-card.is-selected::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: var(--primary);
}

.cs-card__index {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: var(--font-data);
  font-size: 9px;
  font-weight: 700;
  color: var(--outline);
}
.cs-card.is-selected .cs-card__index { color: var(--primary); }

.cs-card__portrait {
  width: 68px;
  height: 68px;
  image-rendering: pixelated;
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
}
.cs-card.is-selected .cs-card__portrait { border-color: var(--primary-container); }

.cs-card__name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.cs-card.is-selected .cs-card__name { color: var(--primary); }

.cs-card__meta {
  font-family: var(--font-data);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--outline);
  line-height: 1.3;
}

.cs-card__save {
  margin-top: 2px;
  padding: 1px 5px;
  font-family: var(--font-data);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--surface-lowest);
  color: var(--outline);
}
.cs-card__save.is-continue { background: var(--primary); color: var(--on-primary); }

/* --- stage (transparent window onto the 3D turntable) ------------------- */

.cs-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  padding: var(--md);
  background: transparent;
}

.cs-stage__plate {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  padding: var(--sm);
  background: color-mix(in srgb, var(--surface-lowest) 82%, transparent);
  border-left: 4px solid var(--primary);
}

.cs-stage__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  text-shadow: var(--glow-primary);
}

.cs-stage__meta {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* --- dossier ------------------------------------------------------------ */

.cs-dossier { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }

.cs-dossier__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-surface);
  line-height: 1.1;
}

.cs-dossier__role {
  display: block;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
}

.cs-stats { display: flex; flex-direction: column; gap: 5px; }

.cs-stat { display: flex; align-items: center; gap: var(--sm); }
.cs-stat__key {
  width: 28px;
  font-family: var(--font-data);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--outline);
}
.cs-stat .meter { flex: 1 1 auto; }
.cs-stat__val {
  width: 18px;
  text-align: right;
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  color: var(--on-surface);
}

.cs-ability {
  padding: var(--sm);
  background: var(--surface-lowest);
  border-left: 3px solid var(--retro-cyan);
  box-shadow: var(--shadow-1);
}
.cs-ability__name {
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--retro-cyan);
  text-shadow: var(--glow-cyan);
}
.cs-ability__desc {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1.5;
  color: var(--on-surface-variant);
}

.cs-derived {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px var(--sm);
}
.cs-derived__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); }

.cs-save { display: flex; align-items: center; gap: var(--sm); flex-wrap: wrap; }

.cs-actions { display: flex; align-items: center; gap: var(--sm); }
.cs-actions .btn { width: auto; min-width: 150px; }

@media (max-width: 1024px) {
  .cs-dossier { max-height: 260px; }
}

/* ==========================================================================
   Cutscene player
   ========================================================================== */

.cutscene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: var(--xl) var(--lg) var(--lg);
  background: linear-gradient(to top, rgba(15, 14, 12, 0.92) 0%, rgba(15, 14, 12, 0.35) 45%, rgba(15, 14, 12, 0) 100%);
  pointer-events: auto;
  cursor: pointer;
}

.cs-cut {
  width: min(860px, 92vw);
  padding: var(--md);
  background: color-mix(in srgb, var(--surface-container) 94%, transparent);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-4);
}

.cs-cut__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm);
  margin-bottom: var(--sm);
}

.cs-cut__body { display: flex; gap: var(--md); align-items: flex-start; }

.cs-cut__portrait {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
  image-rendering: pixelated;
}

.cs-cut__speaker { display: flex; align-items: baseline; gap: var(--sm); margin-bottom: var(--xs); }
.cs-cut__name {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  text-shadow: var(--glow-primary);
}
.cs-cut__src {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--outline);
}

.cs-cut__text {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.7;
  color: var(--on-surface);
  min-height: 76px;
}

.cs-cut__hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sm);
  margin-top: var(--sm);
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--outline);
}
.cs-cut__hint .btn__icon { width: 14px; height: 14px; fill: var(--secondary); }
.cutscene .blink, .cutscene .btn__icon { animation: blink 1.1s steps(2) infinite; }

/* ==========================================================================
   Settings + credits
   ========================================================================== */

.settings-panel { width: min(720px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.settings-panel .panel__body:first-of-type { padding-bottom: 0; }
.settings-panel > .panel__body:nth-of-type(2) { overflow-y: auto; flex: 1 1 auto; }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  width: 100%;
  padding: var(--sm);
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  cursor: pointer;
  text-align: left;
}
.settings-row:hover { background: var(--surface-high); }

.settings-slider-row {
  display: grid;
  grid-template-columns: 150px 1fr 56px;
  align-items: center;
  gap: var(--sm);
  padding: var(--sm);
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
}

.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
  cursor: pointer;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 18px;
  background: var(--primary);
  border: 2px solid var(--on-primary);
}
.settings-slider::-moz-range-thumb {
  width: 14px;
  height: 18px;
  border-radius: 0;
  background: var(--primary);
  border: 2px solid var(--on-primary);
}

.settings-swatch { display: flex; gap: 2px; margin: var(--xs) 0; }
.settings-swatch span { flex: 1 1 0; height: 26px; border: 1px solid #000; }

.pause__dossier { display: flex; flex-direction: column; gap: var(--sm); }

.credits { max-width: 720px; margin: 0 auto; padding: var(--xl) var(--md); display: flex; flex-direction: column; gap: var(--xl); }
.credits__scroll { display: flex; flex-direction: column; gap: var(--xl); }
.credits__block { display: flex; flex-direction: column; gap: var(--xs); }
.credits__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  text-shadow: var(--glow-primary);
}
.credits__line {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.7;
  color: var(--on-surface-variant);
  white-space: pre-line;
}
.credits__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  flex-wrap: wrap;
  padding-top: var(--lg);
  border-top: 2px solid var(--surface-high);
}

/* ==========================================================================
   Save slots
   ========================================================================== */

.slots-panel { width: min(860px, 95vw); max-height: 90vh; display: flex; flex-direction: column; }
.slots-panel > .panel__body:first-of-type { overflow-y: auto; flex: 1 1 auto; }

.slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sm);
}
@media (max-width: 720px) { .slots { grid-template-columns: 1fr; } }

.slot {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding: var(--sm);
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-1);
}
.slot.has-save { border-color: var(--primary-container); background: var(--surface-container); }

.slot__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); }
.slot__body { display: flex; gap: var(--sm); align-items: center; }

.slot__portrait {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
}

.slot__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--on-surface);
}

.slot__stats { display: flex; gap: var(--sm); flex-wrap: wrap; margin-top: 2px; }

.slot__actions { display: flex; gap: var(--xs); flex-wrap: wrap; margin-top: var(--xs); }
.slot__actions .btn { width: auto; min-width: 0; flex: 1 1 auto; }

/* ==========================================================================
   Menu data-board buttons
   ========================================================================== */

.menu-actions__board {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding-top: var(--sm);
  border-top: 2px solid var(--surface-high);
}

/* ==========================================================================
   Arcade boards (territory / wanted / dossier / garage)
   ========================================================================== */

.board-panel {
  width: min(980px, 95vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.board-panel--wide { width: min(1180px, 96vw); }
.board-panel > .panel__body:nth-of-type(1) { overflow-y: auto; flex: 1 1 auto; }

.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--md);
  align-items: start;
}
.board-grid--wanted { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
@media (max-width: 1024px) { .board-grid, .board-grid--wanted { grid-template-columns: minmax(0, 1fr); } }

/* --- territory map ---------------------------------------------------- */

.territory-map {
  position: relative;
  min-height: 340px;
  background:
    radial-gradient(ellipse at 52% 44%, rgba(31, 110, 110, 0.22), transparent 62%),
    var(--surface-lowest);
  border: 2px solid var(--surface-high);
  box-shadow: inset var(--shadow-1);
  overflow: hidden;
}

.territory-map__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(139, 211, 208, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 211, 208, 0.09) 1px, transparent 1px);
  background-size: 28px 28px;
}

.territory-map__sweep {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 150%;
  height: 150%;
  transform-origin: 0 0;
  background: conic-gradient(from 0deg, rgba(139, 211, 208, 0.22), transparent 26%);
  animation: radar-sweep 5s linear infinite;
  pointer-events: none;
}
@keyframes radar-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.territory-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 2;
}
.territory-pin.is-hidden { display: none; }
.territory-pin__node {
  width: 14px;
  height: 14px;
  background: var(--secondary);
  border: 2px solid var(--surface-lowest);
  box-shadow: var(--shadow-1);
}
.territory-pin__label {
  font-family: var(--font-data);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
  text-shadow: 1px 1px 0 #000;
}
.territory-pin.is-selected .territory-pin__node { background: var(--primary); box-shadow: 0 0 10px var(--primary); }
.territory-pin.is-selected .territory-pin__label { color: var(--primary); }
.territory-pin:hover .territory-pin__node { background: var(--primary-container); }

.territory-legend {
  display: flex;
  gap: var(--md);
  flex-wrap: wrap;
  padding: var(--xs) 0;
}

.territory-dossier { min-height: 0; }
.territory-dossier__heat { flex: 0 0 auto; }
.territory-dossier__grid { display: flex; flex-direction: column; gap: 4px; }
.territory-districts { display: flex; flex-wrap: wrap; gap: var(--xs); }
.territory-districts .chip { cursor: default; }

/* --- most wanted ------------------------------------------------------ */

.wanted-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sm);
}
@media (max-width: 720px) { .wanted-podium { grid-template-columns: 1fr; } }

.wanted-podium__card {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding: var(--sm);
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-2);
}
.wanted-podium__card--1 { border-color: var(--primary); background: var(--surface-container); }
.wanted-podium__card--2 { border-color: var(--secondary); }
.wanted-podium__card--3 { border-color: var(--tertiary-container); }

.wanted-podium__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.wanted-podium__bounty { font-family: var(--font-data); font-size: 15px; font-weight: 700; color: var(--primary); }

.wanted-rank {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

.wanted-table { display: flex; flex-direction: column; gap: 2px; }
.wanted-table__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 1.2fr) 100px 110px;
  align-items: center;
  gap: var(--sm);
  padding: 6px var(--sm);
  background: var(--surface-low);
  border: 1px solid var(--surface-high);
  font-family: var(--font-data);
  font-size: 11px;
}
.wanted-table__row--head {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wanted-table__name { display: block; font-weight: 700; color: var(--on-surface); text-transform: uppercase; }
.wanted-table__heat .hud-wanted__star { width: 9px; height: 9px; }

.wanted-side { min-height: 0; }
.wanted-profile__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
}

.wire-line { display: flex; align-items: baseline; gap: var(--xs); padding: 3px 0; border-bottom: 1px dashed var(--surface-high); }
.wire-line .u-body { font-size: 11px; }

/* --- mission dossier -------------------------------------------------- */

.dossier-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--md);
  align-items: start;
}
@media (max-width: 1024px) { .dossier-grid { grid-template-columns: minmax(0, 1fr); } }

.dossier-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 58vh;
  overflow-y: auto;
}

.dossier-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--xs) var(--sm);
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.dossier-row:hover { background: var(--surface-container); }
.dossier-row.is-selected { border-color: var(--primary); background: var(--surface-container); }
.dossier-row.is-done { opacity: 0.62; }
.dossier-row__title { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.dossier-row__tick { width: 14px; height: 14px; fill: var(--secondary); }

.dossier-detail { min-height: 0; }
.dossier-objective {
  display: flex;
  align-items: center;
  gap: var(--sm);
  padding: 4px 0;
  border-bottom: 1px dashed var(--surface-high);
  font-family: var(--font-display);
  font-size: 12px;
}
.dossier-objective__n { color: var(--primary); font-family: var(--font-data); font-weight: 700; }

.dossier-scan { display: flex; flex-direction: column; gap: var(--xs); }
.dossier-scan__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: var(--xs);
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
}
.dossier-scan__cell { aspect-ratio: 1; background: rgba(139, 211, 208, 0.08); }
.dossier-scan__cell.is-route { background: rgba(139, 211, 208, 0.35); }
.dossier-scan__cell.is-patrol { background: var(--neon-magenta); }

.dossier-loadout { display: flex; gap: var(--xs); flex-wrap: wrap; }
.dossier-loadout__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--xs) var(--sm);
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  flex: 1 1 auto;
}

/* --- garage ----------------------------------------------------------- */

.garage-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
  gap: var(--md);
  align-items: start;
}
@media (max-width: 1024px) { .garage-grid { grid-template-columns: minmax(0, 1fr); } }

.garage-fleet { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; }
.garage-fleet__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--xs) var(--sm);
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.garage-fleet__row:hover { background: var(--surface-container); }
.garage-fleet__row.is-selected { border-color: var(--primary); background: var(--surface-container); }
.garage-fleet__row.is-locked { opacity: 0.55; }
.garage-fleet__name { font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; }

.garage-turntable {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(255, 198, 101, 0.16), transparent 60%),
    var(--surface-lowest);
  border: 2px solid var(--surface-high);
  box-shadow: inset var(--shadow-1);
}
.garage-turntable__shadow {
  position: absolute;
  bottom: 26px;
  width: 62%;
  height: 14px;
  background: rgba(0, 0, 0, 0.55);
  filter: blur(3px);
}

.garage-car {
  --livery: var(--primary);
  position: relative;
  width: 200px;
  height: 96px;
  transform: translateY(-6px);
}
.garage-car__roof { position: absolute; left: 58px; top: 8px; width: 84px; height: 34px; background: var(--livery); border: 2px solid #000; }
.garage-car__glass { position: absolute; left: 66px; top: 14px; width: 68px; height: 18px; background: rgba(0, 240, 255, 0.35); border: 2px solid #000; }
.garage-car__body { position: absolute; left: 20px; top: 40px; width: 160px; height: 34px; background: var(--livery); border: 2px solid #000; box-shadow: var(--shadow-1); }
.garage-car__hood { position: absolute; left: 20px; top: 34px; width: 52px; height: 10px; background: var(--livery); border: 2px solid #000; }
.garage-car__wheel { position: absolute; top: 70px; width: 26px; height: 26px; background: #0f0e0c; border: 4px solid #363432; }
.garage-car__wheel--fl { left: 34px; }
.garage-car__wheel--fr { right: 34px; }
.garage-car__wheel--rl { left: 34px; top: 62px; opacity: 0.5; }
.garage-car__wheel--rr { right: 34px; top: 62px; opacity: 0.5; }

.garage-rack { min-width: 0; }
.garage-stat { display: flex; align-items: center; gap: var(--sm); }
.garage-stat .meter { flex: 1 1 auto; }

.garage-diagnostics {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--xs) var(--sm);
  background: var(--surface-lowest);
  border: 2px solid var(--surface-high);
  font-size: 10px;
}

.garage-upgrades {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sm);
}
@media (max-width: 720px) { .garage-upgrades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.garage-upgrade {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding: var(--sm);
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-1);
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.garage-upgrade:hover { background: var(--surface-container); }
.garage-upgrade.is-installed { border-color: var(--secondary); }
.garage-upgrade__label { font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.garage-upgrade .btn__icon { width: 16px; height: 16px; fill: var(--secondary); }

.garage-tip {
  display: flex;
  align-items: center;
  gap: var(--sm);
  padding: var(--sm);
  background: var(--surface-lowest);
  border-left: 4px solid var(--tertiary-container);
}

/* ==========================================================================
   City map
   ========================================================================== */

.map-panel { width: min(1080px, 96vw); max-height: 94vh; }

.map-body {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--md);
  align-items: start;
}
@media (max-width: 900px) { .map-body { grid-template-columns: minmax(0, 1fr); } }

.map-frame {
  position: relative;
  border: 2px solid var(--surface-high);
  box-shadow: inset var(--shadow-1);
  background: var(--surface-lowest);
}
.map-canvas { display: block; width: 100%; aspect-ratio: 1 / 1; image-rendering: pixelated; }
.map-frame__hud {
  position: absolute;
  top: var(--xs);
  left: var(--xs);
  right: var(--xs);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.map-side { min-height: 0; }
.map-legend { display: flex; gap: var(--md); flex-wrap: wrap; }
.map-districts { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; }
.map-district {
  display: flex;
  align-items: center;
  gap: var(--sm);
  padding: 4px var(--sm);
  background: var(--surface-low);
  border-left: 3px solid var(--primary);
}
.map-district__n { font-family: var(--font-data); font-size: 11px; font-weight: 700; color: var(--primary); }






/* radio tuning animation */
.radio.is-tuning { animation: tune-flicker 0.72s steps(4); }
.radio.is-tuning .radio__dials { animation: tune-sweep 0.72s linear; }
@keyframes tune-flicker { 0%, 100% { opacity: 1; } 25% { opacity: 0.5; } 50% { opacity: 0.85; } 75% { opacity: 0.35; } }
@keyframes tune-sweep { from { filter: brightness(2.4); } to { filter: none; } }

/* character-select carousel arrows */
.cs-roster-wrap { display: flex; align-items: center; gap: var(--sm); }
.cs-roster-wrap .cs-roster { flex: 1 1 auto; min-width: 0; }
.cs-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 68px;
  display: grid;
  place-items: center;
  background: var(--surface-low);
  border: 2px solid var(--surface-high);
  box-shadow: var(--shadow-2);
  color: var(--on-surface-variant);
  cursor: pointer;
}
.cs-arrow:hover { color: var(--primary); background: var(--surface-container); }
.cs-arrow:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #000; }
.cs-arrow svg { width: 20px; height: 20px; fill: currentColor; }

.cs-arrow--left { border-right-width: 3px; }
.cs-arrow--right { border-left-width: 3px; }

/* interactive map districts */
.map-district {
  width: 100%;
  border: 0;
  border-left: 3px solid var(--primary);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.map-district:hover { background: var(--surface-container); }
.map-district.is-focused { border-left-color: var(--secondary); background: var(--surface-container); }
.map-canvas { cursor: grab; }
.map-canvas:active { cursor: grabbing; }

/* ==========================================================================
   Credits — studio / support block
   ========================================================================== */

.credits__studio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md);
  text-align: center;
  padding-top: var(--lg);
  border-top: 2px solid var(--surface-high);
}
.credits__dev {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.credits__bmc { display: block; line-height: 0; }
.credits__bmc-logo { width: min(280px, 72vw); height: auto; }
.credits__support { width: auto; }
.credits__site { text-decoration: none; color: var(--secondary); }
.credits__site:hover { color: var(--primary); }
.credits__site .btn__icon { width: 16px; height: 16px; fill: currentColor; }