:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #555;
  --line: #e5e3dc;
  --accent: #1e6e3f;
  --accent-soft: #d6ede0;
  --pin: #c0392b;
  --pin-fill: rgba(192, 57, 43, 0.55);
  --land: #e9edf5;
  --land-line: #c9d1e0;
  --warn: #c0392b;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a {
  color: var(--accent);
}

.accent {
  color: var(--accent);
}

button {
  font: inherit;
  cursor: pointer;
}

button.primary {
  background: var(--accent);
  color: white;
  border: 0;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 17px;
}

button.primary:hover {
  filter: brightness(0.95);
}

button.primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
}

button.ghost:hover {
  background: var(--surface);
}

button.link {
  background: none;
  border: 0;
  color: var(--accent);
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}

/* Picker */
body.picker main {
  max-width: 720px;
  margin: 10vh auto;
  padding: 0 24px;
  text-align: center;
}

body.picker h1 {
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 16px;
}

body.picker .lede {
  color: var(--ink-soft);
  font-size: 18px;
  margin: 0 0 32px;
}

.picker-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.picker-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 20px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.picker-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.picker-card__flag {
  font-size: 48px;
  line-height: 1;
}

.picker-card__name {
  font-size: 22px;
  font-weight: 700;
}

.picker-card__sub {
  font-size: 14px;
  color: var(--ink-soft);
}

body.picker .footnote {
  color: var(--ink-soft);
  font-size: 14px;
}

/* Landing */
body.landing main {
  max-width: 640px;
  margin: 12vh auto;
  padding: 0 24px;
  text-align: center;
}

body.landing .picker-link {
  font-size: 14px;
  margin: 0 0 28px;
}

body.landing .picker-link a {
  text-decoration: none;
  color: var(--ink-soft);
}

body.landing .picker-link a:hover {
  color: var(--accent);
}

body.landing h1 {
  font-size: 40px;
  line-height: 1.15;
  margin-bottom: 16px;
}

body.landing .lede {
  color: var(--ink-soft);
  font-size: 18px;
  margin-bottom: 32px;
}

body.landing .challenge-link {
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink-soft);
}

.solo-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.solo-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.solo-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

body.landing .footnote {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 14px;
}

/* Room */
body.room {
  min-height: 100vh;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
}

.room-info, .user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}

.room-info code {
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--ink);
}

body.room main {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

body.room h1 {
  font-size: 32px;
  text-align: center;
  margin: 16px 0 24px;
  line-height: 1.2;
}

.controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.controls input[type="text"] {
  flex: 1;
  padding: 12px 16px;
  font-size: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.controls input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.controls select {
  padding: 12px 12px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  max-width: 200px;
}

.message {
  min-height: 22px;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.message.error {
  color: var(--warn);
}

.message.success {
  color: var(--accent);
}

.view-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
}

.view-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  color: var(--ink-soft);
}

.view-btn.active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}

#zoom-reset {
  margin-left: auto;
}

.map {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(26, 26, 26, 0.92);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
  z-index: 10;
  max-width: 240px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.tooltip .city {
  font-weight: 600;
}

.tooltip .by {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.8;
}

.muni-shape {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
  pointer-events: all;
  transition: fill 0.4s ease;
}

.muni-shape.filled {
  stroke: #1a1a1a;
  stroke-width: 0.5;
  stroke-opacity: 0.9;
  vector-effect: non-scaling-stroke;
}

/* Opt-in (São Paulo room): show faint municipality outlines for unfilled
   munis. Filled ones keep their darker .muni-shape.filled stroke. */
.map.outline-munis .muni-shape:not(.filled) {
  stroke: var(--land-line);
  stroke-width: 0.5;
  stroke-opacity: 0.85;
  vector-effect: non-scaling-stroke;
}

.muni-shape.filled.new {
  animation: muni-pop 0.55s ease-out;
}

@keyframes muni-pop {
  0% { fill-opacity: 0; }
  100% { fill-opacity: 1; }
}

.map svg {
  display: block;
  width: 100%;
  height: auto;
}

.map .state {
  fill: var(--land);
  stroke: var(--land-line);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

.map .pin {
  fill: rgba(192, 57, 43, 0.55);
  stroke: #4a1410;
  stroke-width: 0.8;
  stroke-opacity: 0.85;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}

.map .pin.new {
  animation: pop 0.6s ease-out;
}

@keyframes pop {
  0% { transform: scale(0); transform-origin: center; }
  60% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.summary {
  text-align: center;
  font-size: 17px;
  margin: 12px 0 24px;
}

.players h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  margin: 24px 0 10px;
  font-weight: 600;
}

#user-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#user-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#user-list li.offline {
  opacity: 0.55;
}

#user-list .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

#user-list li.offline {
  --dot-mute: #aaa;
}

#user-list li.offline .dot {
  background: var(--dot-mute) !important;
}

#user-list .count {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.stat-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}

.stat-panel--wide {
  grid-column: 1 / -1;
}

.stat-panel h2 {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.ranked-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ranked-list li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  font-size: 15px;
}

.ranked-list li .rank {
  color: var(--ink);
  min-width: 24px;
  flex-shrink: 0;
}

.ranked-list li .city {
  font-weight: 600;
  color: var(--ink);
}

.ranked-list li .state {
  color: var(--ink-soft);
  font-size: 13.5px;
}

.ranked-list li .pop {
  color: var(--ink-soft);
  font-size: 13.5px;
}

.ranked-list li .star {
  color: var(--ink);
  margin-left: 2px;
}

.ranked-list li .by {
  margin-left: auto;
  font-size: 12.5px;
  white-space: nowrap;
}

.ranked-list--state li .city {
  font-weight: 500;
}

.ranked-list--state li .count {
  margin-left: auto;
  color: var(--ink-soft);
}

.other-stats {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 32px;
}

.other-stats li {
  padding: 6px 0;
  font-size: 15px;
}

.other-stats strong {
  color: var(--ink);
}

.cities-section__title {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  margin: 8px 0 10px;
  font-weight: 600;
}

.city-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
}

.city-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.city-list .name {
  font-weight: 600;
}

.city-list .meta {
  color: var(--ink-soft);
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.city-list .added-by {
  color: var(--accent);
  font-weight: 500;
}

/* Status accents on city cards (used by the challenge reveal). */
.city-list li.named {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.city-list li.named .name {
  color: var(--accent);
}

.city-list li.missed {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}

.city-list li.missed .name {
  color: #c0392b;
}

.city-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  padding: 14px;
  list-style: none;
}

dialog {
  border: 0;
  border-radius: 12px;
  padding: 28px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

dialog h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

dialog p {
  margin: 0 0 16px;
  color: var(--ink-soft);
}

dialog input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 14px;
}

dialog input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

dialog button {
  width: 100%;
}

.name-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  max-height: 180px;
  overflow-y: auto;
}

.name-option {
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  width: auto;
  transition: background 0.15s ease;
}

.name-option:hover {
  background: var(--bg);
}

.name-option .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.name-option .count {
  font-size: 11.5px;
  font-weight: 600;
  margin-left: 2px;
}

.dialog-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.dialog-divider::before,
.dialog-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Challenge mode */
body.challenge .topbar {
  flex-wrap: wrap;
}

.challenge-stats {
  display: flex;
  gap: 18px;
  align-items: center;
}

.stat-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stat-value.timer {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.stat-value.timer.ended {
  color: var(--warn);
}

.stat-sub {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
}

body.challenge main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

body.challenge h1 {
  font-size: 28px;
  text-align: center;
  margin: 8px 0 20px;
  line-height: 1.2;
}

.challenge-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.challenge-controls input[type="text"] {
  flex: 1;
  padding: 12px 16px;
  font-size: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.challenge-controls input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.challenge-controls input[type="text"]:disabled {
  background: var(--bg);
  color: var(--ink-soft);
}

.progress {
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.3s ease;
}

body.challenge .map {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 24px;
  overflow: hidden;
  min-height: 480px;
  position: relative;
}

.pause-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  border-radius: 12px;
}

.pause-overlay[hidden] {
  display: none;
}

.pause-overlay__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pause-overlay__label {
  font-size: 18px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 600;
}

.pause-overlay button.primary {
  font-size: 18px;
  padding: 14px 36px;
}

body.challenge .map svg {
  display: block;
  width: 100%;
  height: auto;
}

.muni {
  fill: var(--land);
  stroke: #b1bbcf;
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
  transition: fill 0.25s ease;
}

/* Regional quiz: the municipalities being tested — light green/yellow with a
   dashed boundary, until they're guessed (green) or revealed missed (red). */
.muni.quiz-target {
  fill: #eef3d6;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-opacity: 0.5;
  stroke-dasharray: 3 2;
}

.muni.guessed {
  fill: var(--accent);
  stroke: #1a1a1a;
  stroke-opacity: 0.6;
  stroke-dasharray: none;
}

.muni.just-guessed {
  animation: guess-pop 0.55s ease-out;
}

@keyframes guess-pop {
  0%   { fill: #7bd49a; }
  100% { fill: var(--accent); }
}

.muni.missed {
  fill: #c0392b;
  fill-opacity: 0.85;
  stroke: #1a1a1a;
  stroke-opacity: 0.6;
  stroke-dasharray: none;
}

.cities-section {
  margin-top: 24px;
}

.end-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.end-actions button {
  width: auto;
  flex: 1;
}

@media (max-width: 700px) {
  body.room h1 { font-size: 24px; }
  body.picker h1 { font-size: 26px; }
  body.challenge h1 { font-size: 20px; }
  .topbar { padding: 10px 14px; }
  .controls { flex-direction: column; }
  .controls select { max-width: none; }
  .stats-grid { grid-template-columns: 1fr; }
  .picker-cards { grid-template-columns: 1fr; }
  .challenge-stats { gap: 10px; }
  .stat-value.timer { font-size: 20px; }
  .challenge-controls { flex-direction: column; }
  .other-stats {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* ===================== Explore mode ===================== */
body.explore { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.explore .topbar { flex-shrink: 0; }
.explore-title { font-weight: 600; color: var(--ink-soft); font-size: 15px; margin-right: auto; margin-left: 4px; }

.search-wrap { position: relative; }
.explore-search {
  padding: 9px 14px; font-size: 15px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); width: 240px; max-width: 42vw;
}
.explore-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.search-results {
  position: absolute; top: calc(100% + 6px); right: 0; left: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.12);
  z-index: 30; max-height: 320px; overflow: hidden auto;
}
.search-results button {
  display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; padding: 9px 14px; font-size: 14px; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.search-results button:last-child { border-bottom: 0; }
.search-results button span { color: var(--ink-soft); font-size: 12.5px; }
.search-results button:hover { background: var(--accent-soft); }

.explore-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr) 384px; }
.explore-layout.rail-collapsed { grid-template-columns: minmax(0, 1fr) 384px; }
.explore-layout.rail-collapsed .region-rail { display: none; }
.rail-toggle { background: none; border: 0; font-size: 19px; line-height: 1; color: var(--ink-soft); padding: 4px 9px; border-radius: 6px; }
.rail-toggle:hover { background: var(--bg); color: var(--ink); }

/* region rail */
.region-rail { border-right: 1px solid var(--line); overflow-y: auto; padding: 16px; background: var(--bg); }
.rail-intro { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.4; }
.rail-group { margin-bottom: 22px; }
.rail-group__title { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); font-weight: 600; margin: 0 0 10px; }
.region-cards { display: flex; flex-direction: column; gap: 8px; }
.region-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; transition: border-color .15s ease, transform .12s ease;
}
.region-card:hover { border-color: var(--accent); transform: translateX(2px); }
.region-card.active { border-color: var(--accent); background: var(--accent-soft); }
.region-thumb { flex-shrink: 0; width: 56px; height: 36px; display: block; }
.thumb-svg { width: 100%; height: 100%; display: block; }
.thumb-state { fill: var(--land); stroke: var(--land-line); stroke-width: .6; vector-effect: non-scaling-stroke; }
.thumb-region { fill: var(--accent); stroke: none; }
.region-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.region-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.region-count { font-size: 12px; color: var(--ink-soft); }

/* map pane */
.map-pane { display: flex; flex-direction: column; min-width: 0; padding: 16px; gap: 10px; }
body.explore .map { flex: 1; min-height: 0; margin: 0; }
body.explore .map svg { width: 100%; height: 100%; }
.map-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.map-hint { font-size: 13px; color: var(--ink-soft); }

/* map highlight states */
.muni.in-region { fill: #54ad81; }
.muni.neighbor { fill: #9ad9b4; stroke: var(--accent); stroke-width: 1; stroke-opacity: .65; }
.muni.selected { fill: var(--accent); stroke: #14301d; stroke-width: 1.1; stroke-opacity: .9; }
.muni.fc-target { fill: #eef6f1; stroke: var(--accent); stroke-width: 1; stroke-opacity: .6; stroke-dasharray: 3 2; }

/* detail pane */
.detail-pane { border-left: 1px solid var(--line); overflow-y: auto; padding: 20px; background: var(--surface); }
.detail-empty { color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin-top: 24px; }
.detail-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); font-weight: 600; }
.detail-name { font-size: 26px; margin: 6px 0 8px; line-height: 1.15; }
.detail-name .star { color: var(--ink); }
.detail-desc { color: var(--ink-soft); font-size: 14px; margin: 0 0 14px; }
.detail-photo { margin: 0 0 14px; }
.detail-photo img { width: 100%; display: block; }
.detail-photo--ph { height: 180px; background: var(--land); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
.credit { font-size: 11.5px; color: var(--ink-soft); margin-top: 5px; }
.credit a { color: var(--ink-soft); }
.detail-flag { height: 16px; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.detail-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0 0 14px;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fact dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); margin: 0; }
.fact dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; }
.detail-tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 14px; }
.tags-label { color: var(--ink-soft); font-size: 12px; }
.tag { background: none; border: 0; padding: 0; color: var(--accent); font-size: 13px; font-weight: 500; }
.tag:hover { text-decoration: underline; }
.tag-sep { color: var(--line); }
.detail-blurb { font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.quiz-btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 15px; margin: 2px 0 8px; }
.quiz-btn:hover { filter: brightness(0.95); }
.detail-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); margin: 16px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 5px 10px; font-size: 13px; color: var(--ink); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.detail-history { margin: 8px 0 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.detail-history > summary { cursor: pointer; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); font-weight: 600; }
.history-body { font-size: 14.5px; line-height: 1.6; margin-top: 10px; }
.history-body p { margin: 0 0 12px; }
.history-body h2, .history-body h3, .history-body h4 { font-size: 16px; margin: 16px 0 6px; }
.history-body a { color: var(--accent); text-decoration: none; }
.history-body a:hover { text-decoration: underline; }
.detail-loading { color: var(--ink-soft); font-size: 14px; font-style: italic; }
.detail-source { font-size: 12.5px; color: var(--ink-soft); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }

/* flashcard mode */
.flash-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); cursor: pointer; user-select: none; white-space: nowrap; }
.flash-toggle input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; margin: 0; }
.fc-control { margin: 2px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.fc-input { width: 100%; padding: 9px 12px; font-size: 15px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.fc-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.fc-progress { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }
.fc-control .fc-reveal { display: inline-block; margin-top: 4px; font-size: 12.5px; }
.fc-blank { color: var(--ink-soft); letter-spacing: 3px; }
.fc-count { color: var(--ink-soft); font-weight: 400; }
.chip--blank { color: var(--ink-soft); border-style: dashed; min-width: 40px; text-align: center; }

@media (max-width: 1000px) {
  body.explore { height: auto; overflow: auto; }
  .explore-layout { grid-template-columns: 1fr; }
  .region-rail, .detail-pane { border: 0; border-bottom: 1px solid var(--line); }
  body.explore .map { min-height: 360px; }
  .explore-title { display: none; }
  .explore-layout.rail-collapsed { grid-template-columns: 1fr; }
}