:root {
  --background: #e8f0f1;
  --surface: #ffffff;
  --surface-strong: #edf5f5;
  --text: #224248;
  --muted: #5b7479;
  --border: #c7d7da;
  --primary: #224248;
  --primary-hover: #325E6A;
  --accent: #44A1A4;
  --highlight: #FF9A00;
  --birth: #44A1A4;
  --death: #FF9A00;
  --correct: #325E6A;
  --incorrect: #FF9A00;
  --warning: #a86500;
  --warning-bg: #fff0d8;
  --ocean: #d5e1e3;
  --land: #ffffff;
  --coast: #9eb4b8;
  --boundary: #b8c9cc;
  --shadow: 0 16px 45px rgba(34, 66, 72, 0.13);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 38%),
    var(--background);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
a { color: inherit; }

.game-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 32px auto;
}

.game-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.header-actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}

.intro {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.score-card {
  min-width: 110px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.score-card span,
.year-box span,
.round-box span,
.place-details span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.score-card strong { font-size: 2rem; }

.controls-panel,
.answer-card,
.map-card,
.clue-panel,
.place-details {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.controls-panel {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 16px;
}

.controls-panel label,
.answer-card label {
  display: grid;
  gap: 7px;
  font-weight: 750;
}

select, input, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: white;
}

select { min-width: 220px; padding: 10px 12px; }
input { padding: 13px 14px; }

.clue-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 16px;
}

.year-box, .round-box { padding: 18px 22px; text-align: center; }
.year-box strong, .round-box strong { font-size: clamp(1.3rem, 3vw, 2rem); }
.birth-year-box { border-left: 7px solid var(--birth); }
.death-year-box { border-right: 7px solid var(--death); }

.round-box {
  min-width: 150px;
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: var(--surface-strong);
}

.data-warning {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #e8c86b;
  border-radius: 10px;
  color: var(--warning);
  background: var(--warning-bg);
  font-weight: 700;
}

.map-card {
  overflow: hidden;
  border-radius: 20px;
}

.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-strong);
}

.map-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.region-button {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: white;
  font-size: 0.88rem;
  font-weight: 700;
}

.region-button.active {
  border-color: var(--primary);
  color: white;
  background: var(--primary);
}

.map-helper-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}


.map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.84rem;
  font-weight: 700;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 999px;
}

.birth-dot { background: var(--birth); }
.death-dot { background: var(--death); }
.map-credit { margin: 0; color: var(--muted); font-size: 0.75rem; }

.place-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--border);
}

.place-details[hidden] { display: none; }
.place-details > div { padding: 15px 18px; background: var(--surface); }

.answer-card { margin-top: 16px; padding: 20px; border-radius: 18px; }

.guess-help {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.guess-help strong {
  color: var(--text);
}

.input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 2px; }

.primary-button,
.secondary-button,
.text-button {
  border-radius: 10px;
  font-weight: 800;
}

.primary-button {
  padding: 12px 20px;
  border: 1px solid var(--primary);
  color: white;
  background: var(--primary);
}
.primary-button:hover { background: var(--primary-hover); }

.secondary-button {
  padding: 10px 16px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface-strong);
}
.secondary-button:hover { background: #e2ecee; }

.link-button { display: grid; place-items: center; text-decoration: none; }

.text-button {
  padding: 8px 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.action-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.feedback { min-height: 28px; margin-top: 15px; font-weight: 750; line-height: 1.5; }
.feedback.correct { color: var(--correct); }
.feedback.incorrect { color: var(--incorrect); }
.feedback.neutral { color: var(--text); }

@media (max-width: 760px) {
  .game-shell { width: min(100% - 20px, 1120px); margin: 16px auto; }
  .game-header, .header-actions, .map-toolbar { flex-direction: column; align-items: stretch; }
  .score-card { min-width: 88px; }
  .controls-panel { align-items: stretch; flex-direction: column; }
  select { min-width: 0; }
  .clue-panel { grid-template-columns: 1fr 1fr; }
  .round-box {
    grid-column: 1 / -1;
    grid-row: 2;
    border: 0;
    border-top: 1px solid var(--border);
  }
  .birth-year-box, .death-year-box { grid-row: 1; }
  .input-row, .place-details { grid-template-columns: 1fr; }
  .map-footer { align-items: flex-start; flex-direction: column; }
  .offline-vector-map { min-height: 330px; }
}


.offline-vector-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1419.6 / 719.98;
  min-height: 0;
  overflow: hidden;
  background: var(--ocean);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.offline-vector-map:active { cursor: grabbing; }

.offline-map-scene {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.offline-map-scene--animate {
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.offline-map-image {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.offline-map-marker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.offline-map-marker {
  position: absolute;
  z-index: 4;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid white;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%) scale(var(--marker-inverse-scale, 1));
  transform-origin: center;
  pointer-events: auto;
}

.offline-map-marker--birth { background: var(--birth); }
.offline-map-marker--death { background: var(--death); }
.offline-map-marker--admin {
  width: 17px;
  height: 17px;
  background: #176fbd;
  cursor: grab;
  touch-action: none;
}
.offline-map-marker--admin:active { cursor: grabbing; }

.offline-map-controls {
  position: absolute;
  z-index: 10;
  top: 12px;
  right: 12px;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.14);
}

.offline-map-controls button {
  width: 38px;
  height: 36px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  color: #222;
  background: transparent;
  font-size: 1.15rem;
  font-weight: 800;
}

.offline-map-controls button:last-child { border-bottom: 0; }
.offline-map-controls button:hover { background: #f0f0f0; }

@media (max-width: 760px) {
  .offline-vector-map {
    min-height: 0;
    aspect-ratio: 1419.6 / 719.98;
  }
}


/* Timed round interface */
.round-status-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.round-status-item {
  padding: 15px 18px 18px;
  text-align: center;
}

.round-status-item + .round-status-item {
  border-left: 1px solid var(--border);
}

.round-status-item span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.round-status-item strong {
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.timer-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  overflow: hidden;
  background: #e5e5e5;
}

.timer-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--primary);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 80ms linear, background-color 180ms ease;
}

.round-time-low .timer-status strong,
.round-time-low .points-status strong {
  color: var(--death);
}

.round-time-low .timer-progress span {
  background: var(--death);
}

.map-stage-wrapper {
  position: relative;
}

.round-countdown {
  position: absolute;
  z-index: 30;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  color: #242424;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.round-countdown[hidden] {
  display: none;
}

.round-countdown span {
  max-width: 90px;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  line-height: 1.15;
  text-transform: uppercase;
}

.round-countdown strong {
  min-width: 1.3em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 0.9;
  text-align: center;
}

.countdown-pulse {
  animation: countdown-pulse 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes countdown-pulse {
  from {
    opacity: 0;
    transform: scale(1.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Game marker with year and revealed place label */
.offline-map-marker--birth,
.offline-map-marker--death {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}

.offline-map-marker-dot {
  position: absolute;
  inset: 0;
  display: block;
  border: 2px solid white;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

.offline-map-marker--birth .offline-map-marker-dot {
  background: var(--birth);
}

.offline-map-marker--death .offline-map-marker-dot {
  background: var(--death);
}

.offline-map-marker-label {
  position: absolute;
  z-index: 2;
  left: 18px;
  display: grid;
  gap: 3px;
  min-width: max-content;
  max-width: 230px;
  padding: 5px 8px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  color: #202020;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  line-height: 1.05;
}

.offline-map-marker-year {
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.offline-map-marker-place {
  overflow: hidden;
  color: #4f5551;
  font-size: 0.68rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offline-map-marker-place[hidden] {
  display: none;
}

.offline-map-marker--birth .offline-map-marker-label {
  bottom: 10px;
  border-left: 4px solid var(--birth);
}

.offline-map-marker--death .offline-map-marker-label {
  top: 10px;
  border-left: 4px solid var(--death);
}

.offline-map-marker--label-left .offline-map-marker-label {
  right: 18px;
  left: auto;
  border-right: 4px solid;
  border-left-width: 1px;
}

.offline-map-marker--birth.offline-map-marker--label-left .offline-map-marker-label {
  border-right-color: var(--birth);
}

.offline-map-marker--death.offline-map-marker--label-left .offline-map-marker-label {
  border-right-color: var(--death);
}

@media (max-width: 760px) {
  .round-status-panel {
    grid-template-columns: 1fr 1fr;
  }

  .round-status-item:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--border);
  }

  .round-status-item:nth-child(2) {
    border-left: 0;
  }

  .offline-map-marker-label {
    max-width: 175px;
    padding: 4px 6px;
  }

  .offline-map-marker-year {
    font-size: 0.68rem;
  }

  .offline-map-marker-place {
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .countdown-pulse {
    animation: none;
  }
}


/* V10: compact game information and end-of-round result overlay */
.map-game-hud {
  position: absolute;
  z-index: 22;
  top: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.map-game-hud-item {
  min-width: 82px;
  padding: 9px 12px;
  text-align: center;
}

.map-game-hud-item + .map-game-hud-item {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.map-game-hud-item span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-transform: uppercase;
}

.map-game-hud-item strong {
  display: block;
  font-size: 1.08rem;
  line-height: 1.15;
}

.map-game-hud-item strong span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: 0;
  line-height: inherit;
  text-transform: none;
}

.round-time-low .map-game-hud-time strong {
  color: var(--death);
}

/* Move the map's own zoom buttons away from the game HUD. */
.map-stage-wrapper .offline-map-controls {
  top: auto;
  right: 12px;
  bottom: 12px;
}

.round-result {
  position: absolute;
  z-index: 31;
  left: 14px;
  bottom: 14px;
  display: grid;
  gap: 7px;
  width: min(390px, calc(100% - 28px));
  padding: 16px 18px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  color: #242424;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(7px);
  text-align: left;
}

.round-result[hidden] {
  display: none;
}

.round-result-status {
  justify-self: start;
  padding: 6px 11px;
  border-radius: 999px;
  color: white;
  background: var(--primary);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.round-result--correct .round-result-status {
  background: var(--correct);
}

.round-result--incorrect .round-result-status {
  background: var(--incorrect);
}

.round-result--neutral .round-result-status,
.round-result--game-over .round-result-status {
  background: var(--primary);
}

.round-result > strong {
  max-width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 4vw, 2.8rem);
  line-height: 1;
}

.round-result p {
  margin: 3px 0 0;
  font-size: 1.05rem;
  font-weight: 850;
}

.round-result p span {
  font-size: 1.3em;
}

.round-result small {
  color: #4d514e;
  font-size: 0.88rem;
  font-weight: 750;
}

.round-result--game-over > strong {
  font-size: clamp(1.7rem, 4vw, 2.8rem);
}

@media (max-width: 760px) {
  .map-game-hud {
    top: 8px;
    right: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(310px, calc(100% - 16px));
  }

  .map-game-hud-item {
    min-width: 0;
    padding: 8px 6px;
  }

  .map-game-hud-item strong {
    font-size: 0.95rem;
  }

  .round-result {
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    padding: 13px 14px;
  }

  .round-countdown {
    left: 8px;
    bottom: 8px;
  }
}


/* Histoglyph platform structure */
.site-page {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.95), transparent 32%),
    linear-gradient(180deg, #e8f0f1 0%, #f6f9f9 100%);
}

.site-header,
.site-footer {
  width: min(1240px, calc(100% - 36px));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
}

.brand,
.play-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 800;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50% 50% 46% 54% / 42% 55% 45% 58%;
  color: white;
  background: var(--primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 900;
}

.brand--small { font-size: 1.05rem; }
.brand--small .brand-mark { width: 28px; height: 28px; font-size: .86rem; }

.brand-logo {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
}

.brand--small .brand-logo {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}

.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a {
  color: var(--muted);
  font-size: .92rem;
  font-weight: 750;
  text-decoration: none;
}
.site-nav a:hover { color: var(--primary); }

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  width: min(1240px, calc(100% - 36px));
  min-height: 590px;
  margin: 30px auto 70px;
  overflow: hidden;
  border: 1px solid rgba(32,37,34,.12);
  border-radius: 30px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 7vw, 86px);
}

.home-hero h1 {
  max-width: 650px;
  font-size: clamp(3rem, 6vw, 5.7rem);
  letter-spacing: -.045em;
}

.home-hero-intro {
  max-width: 590px;
  margin: 24px 0 30px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.hero-button { align-self: flex-start; text-decoration: none; }

.home-map-art {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  background: var(--ocean);
}

/* Keep the world map and its decorative route in one SVG coordinate system.
   This prevents the dots from drifting away from the land when the hero crops. */
.hero-map-visual {
  position: absolute;
  width: 145%;
  height: 100%;
  left: -27%;
  top: 0;
  display: block;
  overflow: hidden;
}

.hero-map-visual image {
  opacity: .97;
}

.hero-map-route {
  fill: none;
  stroke: rgba(34,66,72,.58);
  stroke-width: 4.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero-map-point {
  stroke: #fff;
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.28));
}

.hero-map-point--birth { fill: var(--birth); }
.hero-map-point--death { fill: var(--death); }

.home-section,
.site-callout,
.mode-page-shell {
  width: min(1240px, calc(100% - 36px));
  margin-inline: auto;
}

.home-section { margin-bottom: 72px; }
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  gap: 34px;
  align-items: end;
  margin-bottom: 24px;
}

.section-heading--compact { grid-template-columns: 1fr; }
.section-heading h2,
.site-callout h2,
.collection-section-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
}
.section-heading > p,
.site-callout > p { margin: 0; color: var(--muted); line-height: 1.65; }

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.mode-card,
.collection-card {
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(34,66,72,.07);
}
.mode-card--clickable,
.collection-card--clickable { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mode-card--clickable:hover,
.collection-card--clickable:hover {
  border-color: rgba(34,66,72,.55);
  box-shadow: 0 16px 34px rgba(34,66,72,.13);
  transform: translateY(-3px);
}
.mode-card--coming-soon,
.collection-card--coming-soon { background: rgba(255,253,248,.62); }
.mode-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mode-card-eyebrow { color: var(--muted); font-size: .75rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.status-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.status-badge--available { color: #325E6A; background: #dff1f1; }
.status-badge--coming-soon { color: #8a5a00; background: #fff0d8; }
.mode-card h2,
.collection-card h3 { margin: 30px 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; }
.mode-card p,
.collection-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.mode-card-footer,
.collection-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 26px; }
.mode-card-action { text-decoration: none; }
.mode-card-disabled-text,
.collection-card-footer > span { color: var(--muted); font-size: .82rem; }
.compact-button { padding: 8px 14px; text-decoration: none; }

.site-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 80px;
  padding: 34px;
  border: 1px solid rgba(34,66,72,.18);
  border-radius: 22px;
  background: rgba(68,161,164,.10);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 0 38px;
  border-top: 1px solid rgba(32,37,34,.12);
  color: var(--muted);
}
.site-footer p { margin: 0; font-size: .85rem; }

.mode-page-shell { margin-top: 22px; margin-bottom: 80px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs--play { margin: 10px 0 15px; }
.mode-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 40px;
  align-items: end;
  margin: 25px 0 58px;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.mode-hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
.mode-hero p:not(.eyebrow) { max-width: 720px; margin: 20px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.mode-rules { display: grid; gap: 10px; }
.mode-rules span { display: flex; align-items: baseline; gap: 9px; padding: 13px 15px; border-radius: 12px; background: var(--surface-strong); color: var(--muted); }
.mode-rules strong { color: var(--primary); font-size: 1.35rem; }
.collection-groups { display: grid; gap: 56px; }
.collection-section-heading { margin-bottom: 18px; }
.collection-section-heading h2 { font-size: 2.25rem; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.collection-card { min-height: 245px; }
.collection-card h3 { margin-top: 22px; }

.game-header--play { align-items: flex-end; }
.play-brand { margin-bottom: 2px; }
.game-header--play h1 { font-size: clamp(2.3rem, 5vw, 4.3rem); }

/* One split marker when birth and death are the same place */
.combined-dot {
  background: linear-gradient(90deg, var(--birth) 0 50%, var(--death) 50% 100%);
}
.offline-map-marker--combined {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}
.offline-map-marker--combined .offline-map-marker-dot {
  background: linear-gradient(90deg, var(--birth) 0 50%, var(--death) 50% 100%);
}
.offline-map-marker--combined .offline-map-marker-label {
  bottom: 11px;
  border-left: 0;
  padding-left: 11px;
}
.offline-map-marker--combined .offline-map-marker-label::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, var(--birth) 0 50%, var(--death) 50% 100%);
}
.offline-map-marker--combined.offline-map-marker--label-left .offline-map-marker-label {
  right: 20px;
  left: auto;
  padding-right: 11px;
  padding-left: 8px;
  border-right: 0;
}
.offline-map-marker--combined.offline-map-marker--label-left .offline-map-marker-label::before {
  right: 0;
  left: auto;
  border-radius: 0 8px 8px 0;
}

.person-textarea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-help { color: var(--muted); font-size: .76rem; font-weight: 500; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-map-art { min-height: 390px; }
  .mode-grid,
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-hero { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .site-header { align-items: flex-start; }
  .site-nav { flex-direction: column; align-items: flex-end; gap: 8px; }
  .home-hero { margin-top: 10px; border-radius: 20px; }
  .home-hero-copy { padding: 34px 24px; }
  .home-map-art { min-height: 285px; }
  .section-heading,
  .site-callout { grid-template-columns: 1fr; }
  .mode-grid,
  .collection-grid,
  .person-textarea-grid { grid-template-columns: 1fr; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .game-header--play { align-items: stretch; }
}


/* V13: pre-game settings dialog */
.game-settings-dialog {
  width: min(610px, calc(100% - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(32, 37, 34, 0.18);
  border-radius: 22px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(19, 28, 24, 0.3);
}

.game-settings-dialog::backdrop {
  background: rgba(28, 34, 31, 0.58);
  backdrop-filter: blur(5px);
}

.game-settings-form {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 5vw, 34px);
}

.game-settings-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.game-settings-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 5vw, 2.55rem);
  line-height: 1;
}

.game-settings-heading p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.dialog-close-button {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-strong);
  font-size: 1.45rem;
  line-height: 1;
}

.game-settings-options {
  display: grid;
  gap: 10px;
}

.game-setting-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
  cursor: pointer;
}

.game-setting-option:hover {
  border-color: rgba(34, 66, 72, 0.52);
  background: #f8faf8;
}

.game-setting-copy {
  display: grid;
  gap: 4px;
}

.game-setting-copy strong {
  font-size: 1rem;
}

.game-setting-copy small {
  max-width: 430px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.game-setting-option input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.game-settings-note {
  padding: 12px 14px;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 0.84rem;
  line-height: 1.5;
}

.game-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.play-settings-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.play-settings-summary span {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 0.78rem;
  font-weight: 750;
}

.map-game-hud-item[hidden] {
  display: none;
}

.untimed-game .map-game-hud {
  grid-template-columns: repeat(2, auto);
}

@media (max-width: 640px) {
  .game-settings-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .game-settings-actions button {
    width: 100%;
  }

  .game-setting-option {
    align-items: flex-start;
  }
}


/* V14: reliable map loading and flexible game settings */
.map-load-error {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  gap: 8px;
  padding: 30px;
  color: #722b25;
  background: #f2e7e4;
  text-align: center;
}

.map-load-error strong {
  font-size: 1.05rem;
}

.map-load-error span {
  max-width: 520px;
  color: #6c504d;
  font-size: 0.86rem;
  line-height: 1.5;
}

.game-setting-number {
  width: 92px !important;
  min-width: 92px;
  padding: 10px 8px !important;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
  font-weight: 800;
}

.untimed-game .map-game-hud {
  grid-template-columns: repeat(2, auto);
}

.untimed-game #result-metric {
  color: var(--primary);
}

@media (max-width: 640px) {
  .game-setting-option--number {
    align-items: center;
  }

  .game-setting-number {
    width: 78px !important;
    min-width: 78px;
  }
}


/* Projection-safe geometry: both the map image and markers use the exact
   1419.6 × 719.98 SVG viewBox generated by Basemap's Robinson projection. */
.offline-vector-map {
  aspect-ratio: 1419.6 / 719.98;
  min-height: 0;
}
.offline-map-scene,
.offline-map-image,
.offline-map-marker-layer {
  width: 100%;
  height: 100%;
}
.offline-map-image {
  object-fit: fill;
}

/* Supabase administration and setup */
.auth-gate{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-gate[hidden]{display:none}.auth-card{width:min(440px,100%);display:grid;gap:14px;padding:28px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}.auth-card h1{font-size:2.4rem}.auth-card label{display:grid;gap:6px;font-weight:750}.admin-header-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.pagination-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;color:var(--muted);font-size:.86rem}.setup-check-list{display:grid;gap:10px;margin-top:18px}.setup-check-row{display:grid;gap:4px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-strong)}.setup-check-row span{color:var(--muted);font-size:.9rem}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}


/* V18: difficulty selector in the pre-game dialog */
.game-setting-select {
  width: min(190px, 42vw);
  min-width: 155px;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: white;
  font-weight: 750;
}

@media (max-width: 640px) {
  .game-setting-option--select {
    align-items: center;
  }
  .game-setting-select {
    width: 155px;
    min-width: 135px;
  }
}

/* V18: collision-aware map labels. JavaScript tries several positions and
   selects a combination that stays inside the map and does not overlap. */
.offline-map-marker-label {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.offline-map-marker[data-label-position="top-right"] .offline-map-marker-label {
  bottom: 12px;
  left: 18px;
}
.offline-map-marker[data-label-position="top-left"] .offline-map-marker-label {
  right: 18px;
  bottom: 12px;
}
.offline-map-marker[data-label-position="bottom-right"] .offline-map-marker-label {
  top: 12px;
  left: 18px;
}
.offline-map-marker[data-label-position="bottom-left"] .offline-map-marker-label {
  top: 12px;
  right: 18px;
}
.offline-map-marker[data-label-position="right"] .offline-map-marker-label {
  top: 50%;
  left: 19px;
  transform: translateY(-50%);
}
.offline-map-marker[data-label-position="left"] .offline-map-marker-label {
  top: 50%;
  right: 19px;
  transform: translateY(-50%);
}
.offline-map-marker[data-label-position="top"] .offline-map-marker-label {
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}
.offline-map-marker[data-label-position="bottom"] .offline-map-marker-label {
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}

/* Accent follows the side on which the label is placed. */
.offline-map-marker[data-label-position$="left"] .offline-map-marker-label,
.offline-map-marker[data-label-position="left"] .offline-map-marker-label {
  border-right-width: 4px;
  border-left-width: 1px;
}
.offline-map-marker--birth[data-label-position$="left"] .offline-map-marker-label,
.offline-map-marker--birth[data-label-position="left"] .offline-map-marker-label {
  border-right-color: var(--birth);
}
.offline-map-marker--death[data-label-position$="left"] .offline-map-marker-label,
.offline-map-marker--death[data-label-position="left"] .offline-map-marker-label {
  border-right-color: var(--death);
}


/* V20: labels are rendered in a viewport-level layer instead of inside the
   zoomed map scene. This keeps text crisp at every zoom level. */
.offline-map-label-layer {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.offline-map-label-layer--animate .offline-map-marker-label {
  transition: left 650ms cubic-bezier(0.22, 1, 0.36, 1), top 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.offline-map-label-layer .offline-map-marker-label {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin: 0;
  transform: none;
  transform-origin: top left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  backface-visibility: hidden;
  will-change: left, top;
}

.offline-map-marker-label[data-label-position="top-right"] {
  transform: translate(18px, calc(-100% - 12px));
}
.offline-map-marker-label[data-label-position="top-left"] {
  transform: translate(calc(-100% - 18px), calc(-100% - 12px));
}
.offline-map-marker-label[data-label-position="bottom-right"] {
  transform: translate(18px, 12px);
}
.offline-map-marker-label[data-label-position="bottom-left"] {
  transform: translate(calc(-100% - 18px), 12px);
}
.offline-map-marker-label[data-label-position="right"] {
  transform: translate(19px, -50%);
}
.offline-map-marker-label[data-label-position="left"] {
  transform: translate(calc(-100% - 19px), -50%);
}
.offline-map-marker-label[data-label-position="top"] {
  transform: translate(-50%, calc(-100% - 18px));
}
.offline-map-marker-label[data-label-position="bottom"] {
  transform: translate(-50%, 18px);
}

.offline-map-marker-label--birth {
  border-left: 4px solid var(--birth);
}
.offline-map-marker-label--death {
  border-left: 4px solid var(--death);
}
.offline-map-marker-label--combined {
  border-left: 0;
  padding-left: 11px;
}
.offline-map-marker-label--combined::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, var(--birth) 0 50%, var(--death) 50% 100%);
}

.offline-map-marker-label[data-label-position$="left"],
.offline-map-marker-label[data-label-position="left"] {
  border-right-width: 4px;
  border-left-width: 1px;
}
.offline-map-marker-label--birth[data-label-position$="left"],
.offline-map-marker-label--birth[data-label-position="left"] {
  border-right-color: var(--birth);
}
.offline-map-marker-label--death[data-label-position$="left"],
.offline-map-marker-label--death[data-label-position="left"] {
  border-right-color: var(--death);
}
.offline-map-marker-label--combined[data-label-position$="left"],
.offline-map-marker-label--combined[data-label-position="left"] {
  padding-right: 11px;
  padding-left: 8px;
  border-right: 0;
}
.offline-map-marker-label--combined[data-label-position$="left"]::before,
.offline-map-marker-label--combined[data-label-position="left"]::before {
  right: 0;
  left: auto;
  border-radius: 0 8px 8px 0;
}


/* V23: portrait result card. The image credit is a full-width footer rather
   than a caption constrained to the portrait width. */
.result-portrait {
  grid-column: 1;
  grid-row: 1 / span 4;
  width: 136px;
  margin: 0;
  align-self: start;
}
.result-portrait[hidden] { display: none; }
.result-portrait img {
  display: block;
  width: 136px;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 11px;
  object-fit: cover;
  background: var(--surface-strong);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
}

.round-result.round-result--has-portrait {
  grid-template-columns: 136px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto;
  column-gap: 17px;
  row-gap: 8px;
  width: min(560px, calc(100% - 28px));
  padding: 18px;
}
.round-result--has-portrait > .round-result-status,
.round-result--has-portrait > strong,
.round-result--has-portrait > p,
.round-result--has-portrait > small { grid-column: 2; }

.result-portrait-credit-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
  color: #666c68;
  font-size: 0.68rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.result-portrait-credit-row[hidden] { display: none; }
.result-portrait-credit-row span { font-weight: 750; }
.result-portrait-credit-row a {
  color: inherit;
  text-decoration: none;
}
.result-portrait-credit-row a[href]:hover { text-decoration: underline; }

#result-metric[hidden] { display: none; }

@media (max-width: 520px) {
  .result-portrait,
  .result-portrait img { width: 102px; }
  .round-result.round-result--has-portrait {
    grid-template-columns: 102px minmax(0, 1fr);
    column-gap: 12px;
    padding: 14px;
  }
  .result-portrait-credit-row { font-size: 0.62rem; }
}

/* V26: homepage hero uses a concrete example round with a portrait card. */
.hero-map-callout rect {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(32, 37, 34, 0.12);
  stroke-width: 1.4;
}
.hero-map-callout text {
  fill: #224248;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.hero-map-callout-place {
  fill: #5a615d;
  font-size: 13px;
  font-weight: 700;
}
.hero-map-callout--birth rect { stroke: rgba(68, 161, 164, 0.35); }
.hero-map-callout--death rect { stroke: rgba(255, 154, 0, 0.40); }

.hero-person-card {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  width: min(270px, calc(100% - 40px));
  overflow: hidden;
  border: 1px solid rgba(32, 37, 34, 0.12);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 18px 40px rgba(14, 19, 17, 0.22);
  backdrop-filter: blur(8px);
}
.hero-person-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 3.7;
  overflow: hidden;
  background: #dedad2;
}
.hero-person-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1);
}
.hero-person-card__image-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 56%;
  background: linear-gradient(180deg, rgba(10, 15, 13, 0) 0%, rgba(10, 15, 13, 0.74) 100%);
}
.hero-person-card__name-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 1;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.05;
}
.hero-person-card__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(32, 37, 34, 0.1);
}
.hero-person-card__facts > div {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  background: rgba(255, 253, 248, 0.98);
}
.hero-person-card__facts span {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-person-card__facts strong {
  font-size: 0.96rem;
  line-height: 1.25;
}

/* V26: better phone layout for the actual game. */
@media (max-width: 760px) {
  .game-header--play h1 {
    font-size: clamp(1.9rem, 9vw, 2.7rem);
  }

  .play-settings-summary span {
    font-size: 0.72rem;
  }

  .header-actions > * {
    width: 100%;
  }

  .map-card,
  .answer-card {
    border-radius: 16px;
  }

  .map-stage-wrapper {
    padding-top: 0;
  }

  .map-game-hud {
    top: 10px;
    right: 10px;
    left: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .map-game-hud-item {
    min-width: 0;
    padding: 8px 7px;
  }

  .map-game-hud-item span {
    font-size: 0.63rem;
  }

  .map-game-hud-item strong {
    font-size: 0.95rem;
  }

  .round-countdown {
    width: min(240px, calc(100% - 24px));
    padding: 14px 18px;
  }

  .answer-card {
    padding: 16px;
  }

  .input-row,
  .action-row {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .action-row > * {
    width: 100%;
  }

  .guess-help {
    font-size: 0.84rem;
  }

  .feedback {
    min-height: 0;
  }

  .offline-map-marker-label {
    max-width: 160px;
    padding: 5px 7px;
  }

  .offline-map-marker-year {
    font-size: 0.72rem;
  }

  .offline-map-marker-place {
    font-size: 0.66rem;
  }
}

@media (max-width: 640px) {
  .home-map-art {
    min-height: 355px;
  }

  .hero-map-visual {
    width: 170%;
    left: -37%;
  }

  .hero-map-callout {
    display: none;
  }

  .hero-person-card {
    right: 14px;
    bottom: 14px;
    width: min(218px, calc(100% - 28px));
    border-radius: 15px;
  }

  .hero-person-card__name-badge {
    right: 12px;
    bottom: 12px;
    left: 12px;
    font-size: 1.18rem;
  }

  .hero-person-card__facts {
    grid-template-columns: 1fr;
  }

  .map-credit {
    line-height: 1.45;
  }

  .round-result {
    width: min(92vw, 420px);
    padding: 16px;
  }

  .round-result.round-result--has-portrait {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 10px;
    width: min(92vw, 420px);
    padding: 16px;
  }

  .result-portrait {
    grid-column: 1;
    grid-row: auto;
    width: min(138px, 44vw);
    justify-self: center;
  }

  .result-portrait img {
    width: 100%;
  }

  .round-result--has-portrait > .round-result-status,
  .round-result--has-portrait > strong,
  .round-result--has-portrait > p,
  .round-result--has-portrait > small,
  .result-portrait-credit-row {
    grid-column: 1;
    text-align: center;
  }

  .result-portrait-credit-row {
    justify-content: center;
  }
}


/* V27: the settings dialog remains fully usable on small phone screens. */
.game-settings-dialog {
  max-height: calc(100dvh - 20px);
  overflow: hidden;
}

.game-settings-form {
  max-height: calc(100dvh - 22px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.game-settings-actions {
  position: sticky;
  z-index: 4;
  bottom: 0;
  margin: 0 -2px -2px;
  padding: 14px 2px 2px;
  background: linear-gradient(180deg, rgba(255,253,248,0), var(--surface) 28%);
}

/* V27: focus the decorative homepage map on the transatlantic Einstein example.
   Both points remain inside the visible crop on desktop and mobile. */
.hero-map-visual {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.hero-person-card__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgba(34, 66, 72, 0.58);
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.86), transparent 34%),
    linear-gradient(145deg, #dfe8e3, #cbd6d0);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4rem;
  font-weight: 700;
}

.hero-person-card__image[hidden],
.hero-person-card__placeholder[hidden] {
  display: none;
}

.hero-person-card--loaded .hero-person-card__image {
  animation: heroPortraitFade .28s ease-out both;
}

@keyframes heroPortraitFade {
  from { opacity: 0; transform: scale(1.015); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 640px) {
  .game-settings-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 12px);
    border-radius: 18px;
  }

  .game-settings-form {
    max-height: calc(100dvh - 14px);
    padding: 18px 16px 14px;
  }

  .game-settings-heading {
    gap: 10px;
  }

  .game-settings-heading h2 {
    font-size: 1.8rem;
  }

  .game-settings-options {
    gap: 8px;
  }

  .game-setting-option {
    padding: 13px;
  }

  .game-setting-option--number,
  .game-setting-option--select {
    align-items: center;
  }

  .game-settings-note {
    font-size: .78rem;
  }

  .game-settings-actions {
    gap: 8px;
    padding-top: 18px;
  }

  .home-map-art {
    min-height: 390px;
  }

  .hero-map-visual {
    width: 100%;
    left: 0;
  }

  .hero-map-callout {
    display: block;
  }

  .hero-person-card {
    right: 12px;
    bottom: 12px;
    width: min(205px, calc(100% - 24px));
  }

  .hero-person-card__image-wrap {
    aspect-ratio: 4 / 3.25;
  }

  .hero-person-card__facts > div {
    padding: 9px 10px;
  }

  .hero-person-card__facts span {
    font-size: .64rem;
  }

  .hero-person-card__facts strong {
    font-size: .8rem;
  }
}


/* V28: polished homepage location labels and proportional life facts. */
.hero-map-callout-bg {
  fill: rgba(255, 255, 255, 0.97);
  stroke: rgba(32, 37, 34, 0.16);
  stroke-width: 1.1;
  filter: drop-shadow(0 3px 5px rgba(25, 32, 29, 0.13));
}

.hero-map-callout-accent {
  stroke: none;
}

.hero-map-callout--birth .hero-map-callout-accent { fill: var(--birth); }
.hero-map-callout--death .hero-map-callout-accent { fill: var(--death); }

.hero-map-callout-leader {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.62;
  vector-effect: non-scaling-stroke;
}
.hero-map-callout-leader--birth { stroke: var(--birth); }
.hero-map-callout-leader--death { stroke: var(--death); }

.hero-map-callout text {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.hero-map-callout-year {
  fill: #224248;
  font-size: 14px;
  font-weight: 850;
}

.hero-map-callout-place {
  fill: #626965;
  font-size: 12px;
  font-weight: 650;
}

.hero-person-card__facts {
  gap: 0;
  background: #fffdf8;
  border-top: 1px solid rgba(32, 37, 34, 0.10);
}

.hero-person-card__fact {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "label label"
    "year place";
  align-items: baseline;
  column-gap: 7px;
  row-gap: 3px;
  min-width: 0;
  padding: 12px 14px 13px;
  background: #fffdf8;
}

.hero-person-card__fact + .hero-person-card__fact {
  border-left: 1px solid rgba(32, 37, 34, 0.10);
}

.hero-person-card__fact-label {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #737a76;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  line-height: 1;
  text-transform: uppercase;
}

.hero-person-card__fact-label i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.hero-person-card__fact--birth .hero-person-card__fact-label i { background: var(--birth); }
.hero-person-card__fact--death .hero-person-card__fact-label i { background: var(--death); }

.hero-person-card__fact strong {
  grid-area: year;
  margin: 0;
  color: #224248;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1;
}

.hero-person-card__fact small {
  grid-area: place;
  min-width: 0;
  overflow: hidden;
  color: #59605c;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero-person-card__facts {
    grid-template-columns: 1fr 1fr;
  }

  .hero-person-card__fact {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "year"
      "place";
    gap: 3px;
    padding: 10px 10px 11px;
  }

  .hero-person-card__fact + .hero-person-card__fact {
    border-top: 0;
    border-left: 1px solid rgba(32, 37, 34, 0.10);
  }

  .hero-person-card__fact strong {
    font-size: 0.98rem;
  }

  .hero-person-card__fact small {
    font-size: 0.68rem;
  }

  .hero-person-card__fact-label {
    font-size: 0.56rem;
  }
}

/* V28 specificity guards against the older V26 hero rules. */
.hero-map-callout .hero-map-callout-bg {
  fill: rgba(255, 255, 255, 0.97);
  stroke: rgba(32, 37, 34, 0.16);
  stroke-width: 1.1;
}
.hero-map-callout .hero-map-callout-accent { stroke: none; }
.hero-map-callout--birth .hero-map-callout-bg,
.hero-map-callout--death .hero-map-callout-bg { stroke: rgba(32, 37, 34, 0.16); }

.hero-person-card__facts > .hero-person-card__fact {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "label label" "year place";
  align-items: baseline;
  column-gap: 7px;
  row-gap: 3px;
  min-width: 0;
  padding: 12px 14px 13px;
  background: #fffdf8;
}
.hero-person-card__facts .hero-person-card__fact-label {
  grid-area: label;
  display: flex;
  margin: 0;
  color: #737a76;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  line-height: 1;
  text-transform: uppercase;
}
.hero-person-card__facts .hero-person-card__fact strong {
  grid-area: year;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  line-height: 1;
}
.hero-person-card__facts .hero-person-card__fact small {
  grid-area: place;
  color: #59605c;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
}

@media (max-width: 640px) {
  .hero-person-card__facts > .hero-person-card__fact {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "year" "place";
    gap: 3px;
    padding: 10px 10px 11px;
  }
  .hero-person-card__facts .hero-person-card__fact strong { font-size: 0.98rem; }
  .hero-person-card__facts .hero-person-card__fact small { font-size: 0.68rem; }
  .hero-person-card__facts .hero-person-card__fact-label { font-size: 0.56rem; }
}


/* V29: smaller map clues and fully readable birth/death locations. */
.hero-map-point {
  stroke-width: 3;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
}

.hero-map-callout-bg {
  filter: drop-shadow(0 2px 4px rgba(25, 32, 29, 0.10));
}

.hero-map-callout-year {
  font-size: 10.5px;
  font-weight: 850;
}

.hero-map-callout-place {
  font-size: 9.5px;
  font-weight: 700;
}

.hero-map-callout-leader {
  stroke-width: 1.15;
  opacity: 0.52;
}

/* Give the life facts the width they need and never truncate a place name. */
.hero-person-card {
  width: min(292px, calc(100% - 40px));
}

.hero-person-card__facts {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hero-person-card__facts > .hero-person-card__fact {
  grid-template-columns: 1fr;
  grid-template-areas:
    "label"
    "year"
    "place";
  align-content: start;
  gap: 4px;
  padding: 12px 13px 14px;
}

.hero-person-card__facts .hero-person-card__fact strong {
  font-size: 1.02rem;
  line-height: 1.05;
}

.hero-person-card__facts .hero-person-card__fact small {
  display: block;
  min-width: 0;
  overflow: visible;
  color: #555d58;
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .hero-person-card {
    width: min(232px, calc(100% - 24px));
  }

  .hero-person-card__facts > .hero-person-card__fact {
    gap: 3px;
    padding: 10px 10px 12px;
  }

  .hero-person-card__facts .hero-person-card__fact strong {
    font-size: 0.92rem;
  }

  .hero-person-card__facts .hero-person-card__fact small {
    font-size: 0.67rem;
    line-height: 1.22;
  }

  .hero-person-card__facts .hero-person-card__fact-label {
    font-size: 0.54rem;
  }
}


/* V30: calmer homepage map composition and smaller clue labels. */
.home-map-art {
  display: flex;
  align-items: stretch;
}

.hero-map-visual {
  width: 132%;
  left: -18%;
}

.hero-map-route {
  stroke-width: 3.1;
  stroke: rgba(34, 66, 72, 0.5);
}

.hero-map-point {
  stroke-width: 2.4;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
}

.hero-map-callout-bg {
  filter: drop-shadow(0 1px 2px rgba(25, 32, 29, 0.08));
}

.hero-map-callout-year {
  font-size: 8.9px;
  font-weight: 820;
}

.hero-map-callout-place {
  font-size: 8.05px;
  font-weight: 690;
  letter-spacing: 0.01em;
}

.hero-map-callout-leader {
  stroke-width: 0.95;
  opacity: 0.44;
}

.hero-person-card {
  width: min(310px, calc(100% - 34px));
  right: 18px;
  bottom: 18px;
}

.hero-person-card__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.hero-person-card__facts > .hero-person-card__fact {
  padding: 12px 14px 13px;
  gap: 2px;
}

.hero-person-card__facts .hero-person-card__fact strong {
  font-size: 1.08rem;
  line-height: 1.02;
}

.hero-person-card__facts .hero-person-card__fact small {
  font-size: 0.8rem;
  line-height: 1.28;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 920px) {
  .hero-map-visual {
    width: 136%;
    left: -22%;
  }

  .hero-person-card {
    width: min(282px, calc(100% - 26px));
    right: 13px;
    bottom: 13px;
  }

  .hero-person-card__facts > .hero-person-card__fact {
    padding: 11px 12px 12px;
  }

  .hero-person-card__facts .hero-person-card__fact small {
    font-size: 0.74rem;
  }
}

@media (max-width: 640px) {
  .home-map-art {
    min-height: 300px;
  }

  .hero-map-visual {
    width: 152%;
    left: -29%;
  }

  .hero-person-card {
    width: min(236px, calc(100% - 20px));
    right: 10px;
    bottom: 10px;
  }

  .hero-person-card__facts {
    grid-template-columns: 1fr 1fr;
  }

  .hero-person-card__facts > .hero-person-card__fact {
    padding: 9px 9px 10px;
  }

  .hero-person-card__facts .hero-person-card__fact strong {
    font-size: 0.9rem;
  }

  .hero-person-card__facts .hero-person-card__fact small {
    font-size: 0.63rem;
    line-height: 1.2;
  }

  .hero-person-card__facts .hero-person-card__fact-label {
    font-size: 0.54rem;
  }
}

/* V31: only reduce the place-name text inside the homepage map labels. */
.hero-map-callout-place {
  font-size: 5.7px;
  font-weight: 650;
  letter-spacing: 0;
}


/* V32: simplified homepage hero — map only. */
.home-map-art--map-only {
  display: grid;
  place-items: center;
  min-height: 460px;
  padding: clamp(18px, 3vw, 34px);
  overflow: hidden;
  background: var(--ocean);
}

.hero-map-only {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 900px) {
  .home-map-art--map-only {
    min-height: 360px;
    padding: 18px;
  }
}

@media (max-width: 640px) {
  .home-map-art--map-only {
    min-height: 270px;
    padding: 12px;
  }
}


/* V35: occupation line in the completed-round result card. */
.result-occupations {
  margin: -1px 0 2px;
  color: var(--muted);
  font-size: 0.86rem !important;
  font-weight: 760 !important;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.result-occupations[hidden] { display: none; }

.round-result.round-result--has-portrait {
  grid-template-rows: auto auto auto auto auto auto;
}
.round-result--has-portrait > .result-occupations {
  grid-column: 2;
}
.result-portrait {
  grid-row: 1 / span 5;
}

@media (max-width: 640px) {
  .round-result--has-portrait > .result-occupations {
    grid-column: 1;
    text-align: center;
  }
  .result-occupations {
    font-size: 0.78rem !important;
  }
}


/* V38 — Histoglyph logo palette and definitive end-of-game summary. */
.site-page {
  background:
    radial-gradient(circle at 15% 0%, rgba(68, 161, 164, 0.14), transparent 31%),
    linear-gradient(180deg, #eef5f6 0%, #ffffff 72%);
}

.site-nav a:hover,
.breadcrumbs a:hover {
  color: var(--highlight);
}

.home-hero,
.mode-hero,
.mode-card,
.collection-card,
.answer-card,
.map-card {
  border-color: rgba(50, 94, 106, 0.20);
}

.mode-card--clickable:hover,
.collection-card--clickable:hover {
  border-color: rgba(68, 161, 164, 0.72);
  box-shadow: 0 16px 34px rgba(34, 66, 72, 0.15);
}

.status-badge--available {
  color: var(--primary);
  background: rgba(68, 161, 164, 0.19);
}

.status-badge--coming-soon {
  color: #765000;
  background: rgba(255, 154, 0, 0.16);
}

.site-callout {
  border-color: rgba(68, 161, 164, 0.28);
  background: rgba(68, 161, 164, 0.08);
}

.primary-button {
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.primary-button:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.hero-button,
.game-summary-play-again {
  border-color: var(--highlight);
  color: var(--primary);
  background: var(--highlight);
}
.hero-button:hover,
.game-summary-play-again:hover:not(:disabled) {
  border-color: #e78b00;
  color: var(--primary);
  background: #e78b00;
}

.secondary-button:hover:not(:disabled) {
  border-color: rgba(68, 161, 164, 0.42);
  background: #e2eeee;
}

.round-result--incorrect .round-result-status {
  color: var(--primary);
}

.map-game-hud,
.round-result {
  border-color: rgba(50, 94, 106, 0.20);
}

.round-result {
  color: var(--text);
}
.round-result small,
.result-portrait-credit-row {
  color: var(--muted);
}

body.game-summary-open {
  overflow: hidden;
}

.game-summary-modal {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
}
.game-summary-modal[hidden] { display: none; }

.game-summary-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 43, 48, 0.68);
  backdrop-filter: blur(7px);
}

.game-summary-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  overflow: hidden;
  padding: clamp(26px, 5vw, 42px);
  border: 1px solid rgba(68, 161, 164, 0.34);
  border-radius: 26px;
  color: var(--text);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 154, 0, 0.13), transparent 31%),
    radial-gradient(circle at 0% 100%, rgba(68, 161, 164, 0.14), transparent 34%),
    #ffffff;
  box-shadow: 0 28px 80px rgba(14, 34, 38, 0.34);
  animation: game-summary-pop .32s cubic-bezier(.2,.9,.25,1.12) both;
  text-align: center;
}

.game-summary-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(68, 161, 164, 0.18);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.game-summary-card h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 8vw, 4rem);
  line-height: .98;
  letter-spacing: -.035em;
}

.game-summary-collection {
  margin: 12px 0 0;
  color: var(--primary-hover);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.game-summary-message {
  max-width: 430px;
  margin: 8px auto 24px;
  color: var(--muted);
  line-height: 1.55;
}

.game-summary-main {
  display: grid;
  gap: 2px;
  margin: 0 auto 16px;
  padding: 19px 20px;
  border: 1px solid rgba(50, 94, 106, 0.17);
  border-radius: 18px;
  background: rgba(237, 245, 245, 0.86);
}
.game-summary-main > span,
.game-summary-stats span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.game-summary-main strong {
  color: var(--primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 9vw, 4.3rem);
  line-height: 1;
}
.game-summary-main small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.game-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}
.game-summary-stats > div {
  display: grid;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid rgba(50, 94, 106, 0.14);
  border-radius: 14px;
  background: #ffffff;
}
.game-summary-stats strong {
  color: var(--primary);
  font-size: 1.06rem;
}

.game-summary-actions {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 10px;
}
.game-summary-actions .primary-button,
.game-summary-actions .secondary-button {
  min-height: 48px;
  padding: 12px 18px;
}

.game-summary-confetti span {
  position: absolute;
  width: 9px;
  height: 15px;
  border-radius: 3px;
  opacity: .88;
  animation: summary-confetti-in .58s ease-out both;
}
.game-summary-confetti span:nth-child(1) { top: 19px; left: 8%; background: var(--highlight); transform: rotate(18deg); }
.game-summary-confetti span:nth-child(2) { top: 51px; left: 4%; width: 12px; height: 7px; background: var(--accent); transform: rotate(-22deg); }
.game-summary-confetti span:nth-child(3) { top: 25px; right: 9%; background: var(--accent); transform: rotate(32deg); }
.game-summary-confetti span:nth-child(4) { top: 67px; right: 5%; width: 12px; height: 7px; background: var(--highlight); transform: rotate(-15deg); }
.game-summary-confetti span:nth-child(5) { bottom: 86px; left: 6%; background: var(--primary-hover); transform: rotate(26deg); }
.game-summary-confetti span:nth-child(6) { bottom: 42px; left: 13%; width: 12px; height: 7px; background: var(--highlight); transform: rotate(-30deg); }
.game-summary-confetti span:nth-child(7) { bottom: 78px; right: 7%; background: var(--highlight); transform: rotate(15deg); }
.game-summary-confetti span:nth-child(8) { bottom: 36px; right: 14%; width: 12px; height: 7px; background: var(--accent); transform: rotate(28deg); }

@keyframes game-summary-pop {
  from { opacity: 0; transform: translateY(14px) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes summary-confetti-in {
  from { opacity: 0; translate: 0 -12px; scale: .65; }
  to { opacity: .88; translate: 0 0; scale: 1; }
}

@media (max-width: 560px) {
  .game-summary-modal { padding: 12px; }
  .game-summary-card { border-radius: 22px; padding: 26px 18px 20px; }
  .game-summary-stats { gap: 6px; }
  .game-summary-stats > div { padding: 10px 5px; }
  .game-summary-stats strong { font-size: .92rem; }
  .game-summary-actions { grid-template-columns: 1fr; }
  .game-summary-actions .primary-button,
  .game-summary-actions .secondary-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .game-summary-card,
  .game-summary-confetti span { animation: none; }
}

/* V39 — unified Histoglyph identity: dark teal backgrounds, orange actions,
   red/green life markers, logo lockups on every page, and a closer homepage map. */
:root {
  --background: #224248;
  --surface: #f8fbfb;
  --surface-strong: #e5f0f1;
  --text: #224248;
  --muted: #60777c;
  --border: #bfd0d3;
  --primary: #224248;
  --primary-hover: #325E6A;
  --accent: #44A1A4;
  --highlight: #FF9A00;
  --birth: #2f9d5b;
  --death: #d94b43;
  --correct: #2f9d5b;
  --incorrect: #d94b43;
  --ocean: #224248;
  --land: #44A1A4;
  --coast: #325E6A;
  --boundary: #325E6A;
  --shadow: 0 18px 48px rgba(14, 38, 43, 0.24);
}

body {
  background:
    radial-gradient(circle at 14% -6%, rgba(68, 161, 164, 0.24), transparent 34%),
    linear-gradient(145deg, #224248 0%, #294f57 52%, #325E6A 100%);
}

/* Brand image is the canonical mark everywhere. */
.brand-logo {
  object-fit: contain;
  border-radius: 7px;
}
.play-brand .brand-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}
.admin-brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.admin-brand-lockup .eyebrow { margin: 0; }

/* Public site shell: dark brand backgrounds with high-contrast typography. */
.site-page {
  color: #f7fbfb;
  background:
    radial-gradient(circle at 16% 0%, rgba(68, 161, 164, 0.22), transparent 34%),
    linear-gradient(155deg, #224248 0%, #274d55 48%, #325E6A 100%);
}
.site-page .site-header .brand,
.site-page .site-footer .brand {
  color: #ffffff;
}
.site-page .site-nav a,
.site-page .breadcrumbs,
.site-page .site-footer {
  color: rgba(245, 251, 251, 0.76);
}
.site-page .site-nav a:hover,
.site-page .breadcrumbs a:hover,
.site-page .site-footer a:hover {
  color: var(--highlight);
}
.site-page .site-footer {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.site-page .eyebrow { color: var(--highlight); }

.home-hero {
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  background: #325E6A;
  box-shadow: 0 24px 60px rgba(10, 31, 35, 0.28);
}
.home-hero h1 { color: #ffffff; }
.home-hero-intro {
  color: rgba(245, 251, 251, 0.82);
}
.home-section .section-heading h2,
.home-section .section-heading > p,
.collection-section-heading h2 {
  color: #ffffff;
}
.home-section .section-heading > p {
  color: rgba(245, 251, 251, 0.74);
}

/* Dedicated homepage map stays palette-matched without altering the game map. */
.home-map-art--map-only {
  min-height: 460px;
  padding: 0;
  background: #224248;
}
.hero-map-only {
  width: auto;
  height: 116%;
  min-width: 138%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translateY(1%);
}

.mode-hero {
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  background: #325E6A;
  box-shadow: 0 18px 46px rgba(10, 31, 35, 0.22);
}
.mode-hero h1 { color: #ffffff; }
.mode-hero p:not(.eyebrow) { color: rgba(245, 251, 251, 0.80); }
.mode-rules span {
  color: rgba(245, 251, 251, 0.80);
  background: rgba(34, 66, 72, 0.72);
}
.mode-rules strong { color: var(--highlight); }

.mode-card,
.collection-card {
  border-color: rgba(255, 255, 255, 0.16);
  background: #f8fbfb;
}
.mode-card--coming-soon,
.collection-card--coming-soon {
  background: #e5f0f1;
}

.site-callout {
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  background: rgba(50, 94, 106, 0.88);
  box-shadow: 0 16px 42px rgba(10, 31, 35, 0.18);
}
.site-callout h2 { color: #ffffff; }
.site-callout > p { color: rgba(245, 251, 251, 0.82); }
.site-callout a { color: #ffd08a; }
.site-callout a:hover { color: var(--highlight); }

/* Play page uses the same dark shell while game surfaces remain clean and readable. */
.game-header--play .play-brand,
.game-header--play h1 {
  color: #ffffff;
}
.game-header--play .breadcrumbs,
.game-header--play .intro {
  color: rgba(245, 251, 251, 0.76);
}
.game-header--play .breadcrumbs a:hover { color: var(--highlight); }
.play-settings-summary span {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.84);
  background: rgba(50, 94, 106, 0.72);
}

/* Orange is the consistent action colour across the site. */
.primary-button,
.secondary-button,
.text-button,
.hero-button,
.game-summary-play-again {
  border: 1px solid var(--highlight);
  color: #224248;
  background: var(--highlight);
  box-shadow: 0 5px 14px rgba(255, 154, 0, 0.16);
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.primary-button:hover:not(:disabled),
.secondary-button:hover:not(:disabled),
.text-button:hover:not(:disabled),
.hero-button:hover,
.game-summary-play-again:hover:not(:disabled) {
  border-color: #e68b00;
  color: #224248;
  background: #e68b00;
  box-shadow: 0 7px 18px rgba(255, 154, 0, 0.22);
  transform: translateY(-1px);
}
.text-button {
  padding: 10px 16px;
  text-decoration: none;
}
.dialog-close-button {
  border-color: var(--highlight);
  color: #224248;
  background: var(--highlight);
}
.dialog-close-button:hover { background: #e68b00; }

/* Map controls are actions too, but remain compact. */
.offline-map-controls {
  border-color: rgba(34, 66, 72, 0.24);
  background: transparent;
}
.offline-map-controls button {
  color: #224248;
  background: var(--highlight);
}
.offline-map-controls button + button {
  border-top-color: rgba(34, 66, 72, 0.20);
}
.offline-map-controls button:hover { background: #e68b00; }

/* Keep the game semantics explicit: birth is green and death is red. */
.offline-map-marker--birth .offline-map-marker-dot {
  background: var(--birth);
}
.offline-map-marker--death .offline-map-marker-dot {
  background: var(--death);
}
.birth-year-box { border-left-color: var(--birth); }
.death-year-box { border-right-color: var(--death); }
.feedback.correct { color: var(--birth); }
.feedback.incorrect { color: var(--death); }

/* Inputs and switches use orange as the interactive accent. */
.game-setting-option input[type="checkbox"],
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--highlight);
}
select:focus,
input:focus,
textarea:focus,
button:focus-visible,
a.primary-button:focus-visible,
a.secondary-button:focus-visible {
  outline: 3px solid rgba(255, 154, 0, 0.34);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .home-map-art--map-only { min-height: 360px; }
  .hero-map-only {
    height: 120%;
    min-width: 150%;
  }
}

@media (max-width: 640px) {
  .home-map-art--map-only { min-height: 285px; }
  .hero-map-only {
    height: 124%;
    min-width: 166%;
  }
}

/* V40: keep all game-mode and collection cards readable on light surfaces. */
.site-page .mode-card,
.site-page .collection-card {
  color: var(--text);
}

.site-page .mode-card h2,
.site-page .collection-card h3 {
  color: #224248;
}

.site-page .mode-card .mode-card-eyebrow,
.site-page .mode-card p,
.site-page .mode-card .mode-card-disabled-text,
.site-page .collection-card p,
.site-page .collection-card .collection-card-footer > span {
  color: #5b7479;
}


/* V41 — white homepage land masses and dark overscroll canvas. */
html {
  min-height: 100%;
  background: #224248;
  overscroll-behavior-y: none;
}

body {
  min-height: 100vh;
  overscroll-behavior-y: none;
}

/* V42: collection-wide birth-year range filter in Game Settings. */
.game-setting-option--birth-range {
  align-items: center;
  cursor: default;
}

.birth-year-range-control {
  display: grid;
  flex: 0 0 min(250px, 44%);
  gap: 9px;
  min-width: 220px;
}

.birth-year-range-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #224248;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.birth-year-entry {
  display: block;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(34, 66, 72, 0.18);
  border-radius: 8px;
  background: rgba(68, 161, 164, 0.08);
  color: #224248;
  font: inherit;
  text-align: center;
  white-space: nowrap;
  outline: none;
}

.birth-year-entry:focus {
  border-color: #44A1A4;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(68, 161, 164, 0.14);
}

.birth-year-entry[aria-invalid="true"] {
  border-color: #c94d43;
  box-shadow: 0 0 0 3px rgba(201, 77, 67, 0.12);
}

.birth-year-range-values > span {
  color: rgba(34, 66, 72, 0.58);
}

.birth-year-dual-range {
  --range-start-px: 0px;
  --range-width-px: 0px;
  --range-thumb-size: 18px;
  position: relative;
  height: 28px;
}

.birth-year-range-track {
  position: absolute;
  top: 50%;
  right: calc(var(--range-thumb-size) / 2);
  left: calc(var(--range-thumb-size) / 2);
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(34, 66, 72, 0.18);
  transform: translateY(-50%);
}

.birth-year-range-track span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--range-start-px);
  width: var(--range-width-px);
  border-radius: inherit;
  background: #44A1A4;
}

.birth-year-dual-range input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  background: transparent;
  outline: none;
}

.birth-year-dual-range input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
}

.birth-year-dual-range input[type="range"]::-moz-range-track {
  height: 5px;
  background: transparent;
}

.birth-year-dual-range input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6.5px;
  appearance: none;
  -webkit-appearance: none;
  border: 3px solid white;
  border-radius: 50%;
  background: #224248;
  box-shadow: 0 1px 5px rgba(34, 66, 72, 0.26);
  cursor: grab;
  pointer-events: auto;
}

.birth-year-dual-range input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 3px solid white;
  border-radius: 50%;
  background: #224248;
  box-shadow: 0 1px 5px rgba(34, 66, 72, 0.26);
  cursor: grab;
  pointer-events: auto;
}

.birth-year-dual-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid rgba(255, 154, 0, 0.34);
  outline-offset: 2px;
}

.birth-year-dual-range input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 3px solid rgba(255, 154, 0, 0.34);
  outline-offset: 2px;
}

.birth-year-dual-range input[type="range"]:disabled::-webkit-slider-thumb,
.birth-year-dual-range input[type="range"]:disabled::-moz-range-thumb {
  cursor: wait;
  opacity: 0.5;
}

#start-game-settings:disabled {
  cursor: wait;
  opacity: 0.58;
}



/* V43: editable birth-year values and fill aligned exactly to slider thumb centres. */
.birth-year-entry {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .game-setting-option--birth-range {
    display: grid;
    gap: 14px;
  }

  .birth-year-range-control {
    width: 100%;
    min-width: 0;
  }
}


/* V44: slider endpoints reach the full track width + Include all rounds control. */
.birth-year-range-track {
  right: 0;
  left: 0;
}

/* Safari/WebKit normally keeps the thumb centre half a thumb inside the range
   input. Extending the transparent input by one thumb diameter lets the visible
   thumb centre reach the exact left/right ends of our custom track. */
.birth-year-dual-range input[type="range"] {
  top: 0;
  right: auto;
  bottom: 0;
  left: -9px;
  width: calc(100% + 18px);
}

.round-count-control {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.include-all-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #224248;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.include-all-control input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #FF9A00;
  cursor: pointer;
}

.game-setting-number:disabled {
  background: rgba(34, 66, 72, 0.08);
  color: rgba(34, 66, 72, 0.48);
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .round-count-control {
    width: 100%;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
  }

  .include-all-control {
    justify-self: end;
  }
}


/* V45: align the visible track to the actual range-thumb travel area.
   Native range controls keep a thumb-radius inset at their endpoints. By
   giving the custom track the same inset, the line ends underneath each
   thumb instead of protruding beyond it. */
.birth-year-range-track {
  left: calc(var(--range-thumb-size) / 2);
  right: calc(var(--range-thumb-size) / 2);
}

.birth-year-dual-range input[type="range"] {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}


/* V46: custom dual-slider geometry.
   The native range controls now hold values only. The visible rail and handles
   are positioned from the same coordinate system, so the rail can never extend
   past the centres of the endpoint handles. */
.birth-year-dual-range {
  --range-thumb-size: 22px;
  position: relative;
  height: 36px;
  border: 1px solid rgba(50, 94, 106, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  touch-action: none;
  user-select: none;
}

.birth-year-range-track {
  position: absolute;
  top: 50%;
  left: calc(var(--range-thumb-size) / 2);
  right: calc(var(--range-thumb-size) / 2);
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(34, 66, 72, 0.18);
  transform: translateY(-50%);
  pointer-events: none;
}

.birth-year-range-track span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--range-start-px, 0px);
  width: var(--range-width-px, 0px);
  border-radius: 999px;
  background: #44A1A4;
}

.birth-year-range-thumb {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: calc(var(--range-thumb-size) / 2);
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  box-sizing: border-box;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #224248;
  box-shadow: 0 2px 6px rgba(34, 66, 72, 0.3);
  transform: translate(-50%, -50%);
  cursor: grab;
  outline: none;
}

.birth-year-range-thumb:active {
  cursor: grabbing;
}

.birth-year-range-thumb:focus-visible {
  box-shadow:
    0 2px 6px rgba(34, 66, 72, 0.3),
    0 0 0 4px rgba(255, 154, 0, 0.28);
}

.birth-year-dual-range.is-disabled .birth-year-range-thumb {
  cursor: wait;
  opacity: 0.5;
}

/* State proxies only: browser-native range geometry is intentionally removed
   from the visible UI to avoid Safari/Chrome thumb inset differences. */
.birth-year-dual-range .birth-year-range-proxy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}


/* V47 — occupation hints and four-column final summary. */
.hint-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(68, 161, 164, 0.34);
  border-radius: 12px;
  color: #224248;
  background: rgba(68, 161, 164, 0.10);
}
.hint-panel[hidden] { display: none; }
.hint-panel-label {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: #325E6A;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hint-panel strong {
  min-width: 0;
  font-size: .94rem;
  line-height: 1.35;
}
.game-summary-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 700px) {
  .game-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .hint-panel { align-items: flex-start; flex-direction: column; gap: 7px; }
}


/* V49: settings usability and consistent footer presentation. */
.game-setting-option--select { cursor: default; }
.game-setting-select {
  width: 230px;
  min-width: 230px;
  max-width: 100%;
  padding-right: 38px;
  text-overflow: clip;
  white-space: nowrap;
}
.game-setting-number { caret-color: #224248; }
.site-footer { margin-top: 28px; }
.map-footer { justify-content: flex-start; }
@media (max-width: 640px) {
  .game-setting-option--select {
    align-items: stretch;
    flex-direction: column;
  }
  .game-setting-select {
    width: 100%;
    min-width: 0;
  }
}

/* V50 — Timeline game mode */
.timeline-mode-hero {
  position: relative;
  overflow: hidden;
}
.timeline-mode-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -105px;
  width: 310px;
  height: 310px;
  border: 2px solid rgba(255, 154, 0, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.timeline-game-shell {
  width: min(1380px, calc(100% - 32px));
}
.timeline-game-header {
  margin-bottom: 18px;
}

.timeline-status-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 34px rgba(10, 31, 35, 0.18);
}
.timeline-status-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px 18px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(34, 66, 72, 0.76);
}
.timeline-status-card span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.timeline-status-card strong {
  color: #ffffff;
  font-size: 1.05rem;
}

.timeline-challenge-layout {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  margin-bottom: 22px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(50, 94, 106, 0.96), rgba(34, 66, 72, 0.96));
  box-shadow: 0 18px 44px rgba(10, 31, 35, 0.24);
}

.timeline-person-card {
  width: min(100%, 320px);
  overflow: hidden;
  border: 1px solid rgba(34, 66, 72, 0.2);
  border-radius: 20px;
  color: var(--text);
  background: #f8fbfb;
  box-shadow: 0 20px 45px rgba(7, 28, 33, 0.28);
  cursor: grab;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.timeline-person-card:active { cursor: grabbing; }
.timeline-person-card.is-dragging {
  opacity: 0.72;
  transform: rotate(-1.5deg) scale(0.985);
}
.timeline-person-card.is-disabled { cursor: wait; }
.timeline-person-card.is-wrong { animation: timeline-card-shake 0.34s ease; }
.timeline-person-card.is-correct {
  box-shadow: 0 0 0 4px rgba(47, 157, 91, 0.25), 0 20px 45px rgba(7, 28, 33, 0.28);
}
@keyframes timeline-card-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  55% { transform: translateX(7px); }
  78% { transform: translateX(-4px); }
}
.timeline-person-card__portrait-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #dce8e9;
}
.timeline-person-card__portrait,
.timeline-person-card__placeholder {
  width: 100%;
  height: 100%;
}
.timeline-person-card__portrait {
  display: block;
  object-fit: cover;
  object-position: center 20%;
}
.timeline-person-card__placeholder {
  display: grid;
  place-items: center;
  color: rgba(34, 66, 72, 0.5);
  background: linear-gradient(145deg, #dce9ea, #c7dcde);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3rem;
  font-weight: 800;
}
.timeline-person-card__body {
  padding: 18px 20px 19px;
}
.timeline-person-card__kicker {
  color: #5b7479;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.timeline-person-card h2 {
  margin: 5px 0 14px;
  color: #224248;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.02;
}
.timeline-person-card__birthplace,
.timeline-person-card__year {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  margin: 7px 0 0;
}
.timeline-person-card__birthplace span,
.timeline-person-card__year span {
  color: #6b8084;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.timeline-person-card__birthplace strong,
.timeline-person-card__year strong {
  min-width: 0;
  color: #224248;
  font-size: 0.9rem;
  line-height: 1.3;
}
.timeline-person-card__year strong {
  color: #325E6A;
  font-size: 1.08rem;
  letter-spacing: 0.03em;
}
.timeline-person-card.is-correct .timeline-person-card__year strong { color: var(--birth); }
.timeline-person-card__credit {
  display: block;
  margin-top: 13px;
  color: #70858a;
  font-size: 0.62rem;
  line-height: 1.3;
}
.timeline-person-card__credit a { text-decoration: underline; }

.timeline-play-instructions {
  max-width: 560px;
  color: rgba(245, 251, 251, 0.82);
  font-size: 1.05rem;
  line-height: 1.75;
}
.timeline-play-instructions strong { color: #ffffff; }

.timeline-board-card {
  overflow: hidden;
  border: 1px solid rgba(34, 66, 72, 0.16);
  border-radius: 24px;
  color: var(--text);
  background: #f8fbfb;
  box-shadow: 0 18px 44px rgba(10, 31, 35, 0.2);
}
.timeline-board-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #d6e2e4;
}
.timeline-board-heading .eyebrow { color: #325E6A; }
.timeline-board-heading h2 {
  margin: 0;
  color: #224248;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
}
.timeline-feedback {
  min-height: 1.3em;
  margin: 0;
  color: #5b7479;
  font-size: 0.88rem;
  font-weight: 750;
  text-align: right;
}
.timeline-feedback.is-wrong { color: var(--death); }
.timeline-feedback.is-correct { color: var(--birth); }

.timeline-board-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 28px 24px 34px;
  scrollbar-color: #8ea9ae transparent;
}
.timeline-board {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 100%;
  min-height: 190px;
  padding: 28px 8px;
}
.timeline-board::before {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: #325E6A;
  transform: translateY(-50%);
}
.timeline-board::after {
  content: "";
  position: absolute;
  right: 23px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 4px solid #325E6A;
  border-right: 4px solid #325E6A;
  transform: translateY(-50%) rotate(45deg);
}

.timeline-placed-person {
  position: relative;
  z-index: 2;
  width: 142px;
  flex: 0 0 142px;
  overflow: hidden;
  border: 1px solid #c8d9dc;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(34, 66, 72, 0.14);
}
.timeline-placed-person__portrait-wrap {
  position: relative;
  height: 92px;
  overflow: hidden;
  background: #dce8e9;
}
.timeline-placed-person__portrait,
.timeline-placed-person__placeholder {
  width: 100%;
  height: 100%;
}
.timeline-placed-person__portrait { object-fit: cover; object-position: center 20%; }
.timeline-placed-person__placeholder {
  display: grid;
  place-items: center;
  color: rgba(34, 66, 72, 0.45);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 800;
}
.timeline-placed-person__body {
  display: grid;
  gap: 4px;
  padding: 10px 10px 11px;
  text-align: center;
}
.timeline-placed-person__body strong {
  overflow: hidden;
  color: #224248;
  font-size: 0.76rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-placed-person__body span {
  color: #325E6A;
  font-size: 0.95rem;
  font-weight: 900;
}

.timeline-drop-slot {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 4px;
  width: 70px;
  height: 116px;
  flex: 0 0 70px;
  margin: 0 6px;
  padding: 8px 4px;
  border: 2px dashed #9bb4b8;
  border-radius: 14px;
  color: #526f75;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.timeline-drop-slot span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #224248;
  background: var(--highlight);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}
.timeline-drop-slot small {
  max-width: 58px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
}
.timeline-drop-slot:hover:not(:disabled),
.timeline-drop-slot.is-drag-over {
  border-color: var(--highlight);
  color: #224248;
  background: #fff3df;
  transform: translateY(-3px);
}
.timeline-drop-slot:focus-visible {
  outline: 3px solid rgba(255, 154, 0, 0.35);
  outline-offset: 3px;
}

.timeline-summary-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 800px) {
  .timeline-status-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .timeline-status-card > div {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 11px 7px;
    text-align: center;
  }
  .timeline-status-card span { font-size: 0.58rem; }
  .timeline-challenge-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .timeline-play-instructions {
    max-width: 480px;
    font-size: 0.92rem;
    text-align: center;
  }
  .timeline-board-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .timeline-feedback { text-align: left; }
}

@media (max-width: 560px) {
  .timeline-game-shell {
    width: min(100% - 18px, 1380px);
    margin-top: 18px;
  }
  .timeline-challenge-layout {
    padding: 15px;
    border-radius: 18px;
  }
  .timeline-person-card {
    width: min(100%, 280px);
  }
  .timeline-person-card__body { padding: 15px 16px 16px; }
  .timeline-board-card { border-radius: 18px; }
  .timeline-board-heading { padding: 16px 16px 12px; }
  .timeline-board-scroll { padding: 20px 10px 26px; }
  .timeline-placed-person {
    width: 118px;
    flex-basis: 118px;
  }
  .timeline-placed-person__portrait-wrap { height: 76px; }
  .timeline-drop-slot {
    width: 58px;
    flex-basis: 58px;
    height: 102px;
    margin: 0 4px;
  }
  .timeline-drop-slot small {
    max-width: 50px;
    font-size: 0.56rem;
  }
  .timeline-summary-stats {
    grid-template-columns: 1fr;
  }
}


/* V51 — Timeline puts the timeline first and uses a smaller active card. */
.timeline-board-card--primary {
  margin-bottom: 20px;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 22px 54px rgba(7, 28, 33, 0.27);
}

.timeline-board-card--primary .timeline-board-scroll {
  padding-top: 34px;
  padding-bottom: 40px;
}

.timeline-board-card--primary .timeline-board {
  min-height: 235px;
}

.timeline-challenge-layout--below {
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 38px);
  margin-bottom: 22px;
  padding: 18px 22px;
  background: rgba(50, 94, 106, 0.72);
  box-shadow: 0 12px 30px rgba(10, 31, 35, 0.18);
}

.timeline-person-card--compact {
  width: min(100%, 230px);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(7, 28, 33, 0.23);
}

.timeline-person-card--compact .timeline-person-card__portrait-wrap {
  aspect-ratio: 16 / 10;
}

.timeline-person-card--compact .timeline-person-card__body {
  padding: 13px 15px 14px;
}

.timeline-person-card--compact h2 {
  margin: 4px 0 9px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.timeline-person-card--compact .timeline-person-card__birthplace {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 7px;
  margin-top: 5px;
}

.timeline-person-card--compact .timeline-person-card__birthplace span {
  font-size: 0.59rem;
}

.timeline-person-card--compact .timeline-person-card__birthplace strong {
  font-size: 0.78rem;
}

.timeline-person-card--compact .timeline-person-card__credit {
  margin-top: 8px;
  font-size: 0.54rem;
}

/* Explicitly honour the hidden state even though the portrait classes define display. */
.timeline-person-card__portrait[hidden],
.timeline-person-card__placeholder[hidden],
.timeline-placed-person__portrait[hidden],
.timeline-placed-person__placeholder[hidden] {
  display: none !important;
}

@media (max-width: 800px) {
  .timeline-board-card--primary .timeline-board {
    min-height: 215px;
  }

  .timeline-challenge-layout--below {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 16px;
  }

  .timeline-person-card--compact {
    width: min(100%, 220px);
  }
}

@media (max-width: 560px) {
  .timeline-board-card--primary {
    margin-bottom: 14px;
  }

  .timeline-board-card--primary .timeline-board-scroll {
    padding-top: 24px;
    padding-bottom: 28px;
  }

  .timeline-board-card--primary .timeline-board {
    min-height: 190px;
  }

  .timeline-challenge-layout--below {
    margin-bottom: 16px;
    padding: 13px;
  }

  .timeline-person-card--compact {
    width: min(100%, 205px);
  }

  .timeline-person-card--compact .timeline-person-card__body {
    padding: 11px 12px 12px;
  }

  .timeline-person-card--compact h2 {
    font-size: 1.15rem;
  }
}


/* V52 — Timeline placement fix + portrait proportions aligned with Life & Death Map. */
.timeline-person-card--compact {
  width: min(100%, 190px);
}

.timeline-person-card--compact .timeline-person-card__portrait-wrap {
  aspect-ratio: 4 / 5;
}

.timeline-person-card--compact .timeline-person-card__portrait {
  object-fit: cover;
  object-position: center 20%;
}

.timeline-placed-person {
  width: 126px;
  flex-basis: 126px;
}

.timeline-placed-person__portrait-wrap {
  height: auto;
  aspect-ratio: 4 / 5;
}

.timeline-placed-person__portrait {
  object-fit: cover;
  object-position: center 20%;
}

@media (max-width: 800px) {
  .timeline-person-card--compact {
    width: min(100%, 182px);
  }

  .timeline-placed-person {
    width: 118px;
    flex-basis: 118px;
  }
}

@media (max-width: 560px) {
  .timeline-person-card--compact {
    width: min(100%, 172px);
  }

  .timeline-placed-person {
    width: 110px;
    flex-basis: 110px;
  }
}

/* V53 — Portrait game mode */
.portrait-mode-hero {
  position: relative;
  overflow: hidden;
}
.portrait-mode-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  box-shadow: 0 0 0 56px rgba(68,161,164,.08), 0 0 0 112px rgba(255,154,0,.04);
  pointer-events: none;
}

.portrait-clue-settings {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fbfb;
}
.portrait-clue-settings legend {
  padding: 0 7px;
  color: #224248;
  font-weight: 850;
}
.portrait-clue-settings > p {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}
.portrait-clue-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.portrait-clue-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.portrait-clue-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #FF9A00;
}
.portrait-clue-toggle span { min-width: 0; }
.portrait-clue-toggle strong,
.portrait-clue-toggle small { display: block; }
.portrait-clue-toggle strong { color: #224248; font-size: .82rem; }
.portrait-clue-toggle small { margin-top: 3px; color: var(--muted); font-size: .7rem; line-height: 1.35; }

.portrait-game-shell { width: min(1040px, calc(100% - 32px)); }
.portrait-game-header { margin-bottom: 18px; }
.portrait-status-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  color: #fff;
  background: rgba(50,94,106,.78);
  box-shadow: 0 14px 34px rgba(10,31,35,.18);
}
.portrait-status-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px 16px;
  text-align: center;
}
.portrait-status-card > div + div { border-left: 1px solid rgba(255,255,255,.12); }
.portrait-status-card span {
  color: rgba(255,255,255,.68);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.portrait-status-card strong { font-size: 1.15rem; }

.portrait-game-stage {
  display: grid;
  gap: 16px;
}
.portrait-challenge-card,
.portrait-answer-card,
.portrait-round-result {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #f8fbfb;
  box-shadow: var(--shadow);
}
.portrait-challenge-card {
  display: grid;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  align-items: center;
}
.portrait-main-figure {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(34,66,72,.14);
  border-radius: 18px;
  aspect-ratio: 4 / 5;
  background: #dce8e9;
  box-shadow: 0 14px 30px rgba(34,66,72,.16);
}
.portrait-main-image,
.portrait-main-placeholder {
  width: 100%;
  height: 100%;
}
.portrait-main-image {
  display: block;
  object-fit: cover;
  object-position: center 20%;
}
.portrait-main-placeholder {
  display: grid;
  place-items: center;
  color: rgba(34,66,72,.44);
  background: linear-gradient(145deg, #e9f2f3, #ccdfe1);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
  font-weight: 800;
}
.portrait-main-image[hidden],
.portrait-main-placeholder[hidden] { display: none; }

.portrait-clues { min-width: 0; }
.portrait-clues-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.portrait-clues-heading .eyebrow { color: #325E6A; }
.portrait-clues-heading h2 {
  margin: 0;
  color: #224248;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
}
.portrait-clues-heading small { color: var(--muted); font-weight: 650; }
.portrait-clue-grid { display: grid; gap: 10px; }
.portrait-clue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 13px 12px 16px;
  border: 1px solid #cad8da;
  border-radius: 14px;
  background: #fff;
}
.portrait-clue-item > div { min-width: 0; }
.portrait-clue-item span,
.portrait-result-facts span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portrait-clue-value {
  display: block;
  min-width: 0;
  color: #7b8d91;
  font-size: .88rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.portrait-clue-item.is-visible {
  border-color: rgba(68,161,164,.45);
  background: #eef7f7;
}
.portrait-clue-item.is-visible .portrait-clue-value { color: #224248; }
.portrait-clue-item.is-unavailable { opacity: .68; }
.portrait-clue-button {
  min-width: 92px;
  padding: 9px 12px;
  font-size: .75rem;
}

.portrait-answer-card { padding: 18px 20px; }
.portrait-answer-card label {
  display: block;
  margin-bottom: 5px;
  color: #224248;
  font-weight: 850;
}
.portrait-answer-card .guess-help { margin: 0 0 12px; }

.portrait-round-result {
  padding: 20px 22px;
  color: #224248;
}
.portrait-round-result[hidden] { display: none; }
.portrait-round-result h2 {
  margin: 9px 0 4px;
  color: #224248;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}
.portrait-result-occupation {
  margin: 0 0 16px;
  color: #325E6A;
  font-size: 1rem;
  font-weight: 800;
}
.portrait-result-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.portrait-result-facts > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.portrait-result-facts strong {
  display: block;
  color: #224248;
  font-size: .9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.portrait-result-credit {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .68rem;
  overflow-wrap: anywhere;
}
.portrait-result-credit a { text-decoration: underline; }
.portrait-summary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .portrait-clue-settings-grid { grid-template-columns: 1fr; }
  .portrait-challenge-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
  }
  .portrait-main-figure { max-width: 286px; }
  .portrait-clues-heading { align-items: flex-start; }
  .portrait-clues-heading small { max-width: 130px; text-align: right; }
  .portrait-result-facts { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .portrait-game-shell { width: min(100% - 20px, 1040px); margin-top: 18px; }
  .portrait-status-card > div { padding: 10px 7px; }
  .portrait-status-card span { font-size: .53rem; }
  .portrait-status-card strong { font-size: .95rem; }
  .portrait-main-figure { max-width: 242px; border-radius: 14px; }
  .portrait-clue-item {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .portrait-clue-button { width: 100%; }
  .portrait-answer-card { padding: 15px; }
  .portrait-summary-stats { grid-template-columns: 1fr; }
}

/* V54 — compact Portrait play layout: portrait + answer/result above, hints below. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.portrait-game-shell {
  width: min(980px, calc(100% - 28px));
  margin-top: 18px;
}

.portrait-game-header {
  margin-bottom: 12px;
}

.portrait-game-header h1 {
  margin-top: 5px;
}

.portrait-game-header .intro {
  margin-bottom: 8px;
}

.portrait-status-card {
  margin-bottom: 12px;
}

.portrait-game-stage {
  gap: 10px;
}

.portrait-challenge-card--compact {
  grid-template-columns: minmax(210px, 278px) minmax(0, 1fr);
  gap: 20px;
  padding: 18px;
  align-items: stretch;
}

.portrait-challenge-card--compact .portrait-main-figure {
  max-width: 278px;
  align-self: center;
}

.portrait-response-column {
  display: grid;
  min-width: 0;
}

.portrait-guess-panel,
.portrait-round-result--inline {
  min-width: 0;
  height: 100%;
}

.portrait-guess-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 6px;
}

.portrait-guess-panel[hidden] {
  display: none;
}

.portrait-question-heading {
  margin-bottom: 12px;
}

.portrait-question-heading .eyebrow {
  margin-bottom: 3px;
  color: #325E6A;
}

.portrait-question-heading h2 {
  margin: 0;
  color: #224248;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  line-height: 1;
}

.portrait-feedback-box {
  display: grid;
  gap: 4px;
  min-height: 66px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid #cad8da;
  border-radius: 13px;
  color: #224248;
  background: #fff;
}

.portrait-feedback-box strong {
  font-size: .9rem;
  line-height: 1.15;
}

.portrait-feedback-box span {
  color: #64777b;
  font-size: .76rem;
  line-height: 1.35;
}

.portrait-feedback-box.incorrect {
  border-color: rgba(196, 52, 52, .34);
  background: #fff4f3;
}

.portrait-feedback-box.incorrect strong {
  color: #b13232;
}

.portrait-feedback-box.correct {
  border-color: rgba(38, 126, 70, .34);
  background: #f0f8f2;
}

.portrait-feedback-box.correct strong {
  color: #267e46;
}

.portrait-input-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.portrait-input-row input {
  min-width: 0;
}

.portrait-give-up-button {
  align-self: flex-start;
  margin-top: 8px;
  font-size: .78rem;
}

.portrait-round-result--inline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.portrait-round-result--inline[hidden] {
  display: none;
}

.portrait-round-result--inline h2 {
  margin: 8px 0 4px;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}

.portrait-round-result--inline .portrait-result-occupation {
  margin-bottom: 11px;
  font-size: .92rem;
}

.portrait-round-result--inline .portrait-result-facts {
  gap: 7px;
}

.portrait-round-result--inline .portrait-result-facts > div {
  padding: 9px 10px;
  border-radius: 10px;
}

.portrait-round-result--inline .portrait-result-facts strong {
  font-size: .78rem;
  line-height: 1.25;
}

.portrait-result-next {
  align-self: flex-start;
  margin-top: 12px;
}

.portrait-clues--compact {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fbfb;
  box-shadow: var(--shadow);
}

.portrait-clues-heading--compact {
  align-items: center;
  margin-bottom: 9px;
}

.portrait-clues-heading--compact .eyebrow {
  display: inline;
  margin: 0 7px 0 0;
  font-size: .57rem;
}

.portrait-clues-heading--compact h2 {
  display: inline;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 850;
}

.portrait-clues-heading--compact small {
  font-size: .68rem;
}

.portrait-clue-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.portrait-clue-item--compact {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 58px;
  padding: 8px 9px 8px 11px;
  border-radius: 11px;
}

.portrait-clue-item--compact span {
  margin-bottom: 2px;
  font-size: .56rem;
}

.portrait-clue-item--compact .portrait-clue-value {
  display: -webkit-box;
  overflow: hidden;
  color: #65777b;
  font-size: .72rem;
  line-height: 1.22;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.portrait-clue-item--compact .portrait-clue-button {
  min-width: 68px;
  padding: 7px 9px;
  font-size: .66rem;
}

@media (min-width: 761px) and (max-height: 760px) {
  .portrait-game-shell {
    margin-top: 10px;
    margin-bottom: 18px;
  }
  .portrait-game-header .breadcrumbs,
  .portrait-game-header .intro {
    display: none;
  }
  .portrait-game-header h1 {
    font-size: 2rem;
  }
  .portrait-game-header .play-settings-summary {
    margin-top: 6px;
  }
  .portrait-status-card > div {
    padding: 9px 12px;
  }
  .portrait-challenge-card--compact {
    grid-template-columns: 200px minmax(0, 1fr);
    padding: 13px;
  }
  .portrait-challenge-card--compact .portrait-main-figure {
    max-width: 200px;
  }
  .portrait-clues--compact {
    padding: 9px 11px;
  }
}

@media (max-width: 760px) {
  .portrait-game-header .intro {
    display: none;
  }

  .portrait-game-header .play-settings-summary {
    margin-top: 7px;
  }

  .portrait-challenge-card--compact {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .portrait-challenge-card--compact .portrait-main-figure {
    width: min(190px, 62vw);
    max-width: 190px;
  }

  .portrait-guess-panel,
  .portrait-round-result--inline {
    padding: 2px;
  }

  .portrait-question-heading {
    margin-bottom: 8px;
    text-align: center;
  }

  .portrait-question-heading h2 {
    font-size: 1.7rem;
  }

  .portrait-feedback-box {
    min-height: 52px;
    margin-bottom: 8px;
    padding: 8px 10px;
  }

  .portrait-input-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .portrait-input-row .primary-button {
    padding-inline: 12px;
  }

  .portrait-give-up-button {
    margin: 5px auto 0;
  }

  .portrait-round-result--inline {
    text-align: center;
  }

  .portrait-round-result--inline .round-result-status,
  .portrait-result-next {
    align-self: center;
  }

  .portrait-round-result--inline .portrait-result-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portrait-clues-heading--compact small {
    display: none;
  }

  .portrait-clue-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portrait-clue-item--compact {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 5px;
    min-height: 80px;
    padding: 7px;
  }

  .portrait-clue-item--compact .portrait-clue-button {
    width: 100%;
    min-width: 0;
    padding: 6px 5px;
  }
}

@media (max-width: 520px) {
  .portrait-game-shell {
    width: min(100% - 12px, 980px);
    margin-top: 8px;
  }

  .portrait-game-header {
    margin-bottom: 8px;
  }

  .portrait-game-header .breadcrumbs,
  .portrait-game-header .play-settings-summary {
    display: none;
  }

  .portrait-game-header h1 {
    margin: 4px 0 0;
    font-size: 1.65rem;
  }

  .portrait-game-header .header-actions {
    gap: 7px;
  }

  .portrait-game-header .header-actions > * {
    padding: 8px 10px;
    font-size: .72rem;
  }

  .portrait-status-card {
    margin-bottom: 8px;
    border-radius: 12px;
  }

  .portrait-status-card > div {
    padding: 7px 5px;
  }

  .portrait-challenge-card--compact {
    gap: 9px;
    padding: 9px;
    border-radius: 15px;
  }

  .portrait-challenge-card--compact .portrait-main-figure {
    width: min(154px, 48vw);
    max-width: 154px;
    border-radius: 12px;
  }

  .portrait-question-heading .eyebrow {
    display: none;
  }

  .portrait-question-heading h2 {
    font-size: 1.45rem;
  }

  .portrait-feedback-box {
    min-height: 46px;
    padding: 7px 9px;
  }

  .portrait-feedback-box strong {
    font-size: .8rem;
  }

  .portrait-feedback-box span {
    font-size: .68rem;
  }

  .portrait-input-row input {
    padding: 9px 10px;
    font-size: .82rem;
  }

  .portrait-input-row .primary-button {
    padding: 9px 10px;
    font-size: .72rem;
  }

  .portrait-clues--compact {
    padding: 8px;
    border-radius: 13px;
  }

  .portrait-clues-heading--compact {
    margin-bottom: 6px;
  }

  .portrait-clue-item--compact {
    min-height: 68px;
    padding: 6px;
  }

  .portrait-clue-item--compact span {
    font-size: .5rem;
  }

  .portrait-clue-item--compact .portrait-clue-value {
    font-size: .62rem;
  }

  .portrait-clue-item--compact .portrait-clue-button {
    font-size: .59rem;
  }

  .portrait-round-result--inline h2 {
    font-size: 1.65rem;
  }

  .portrait-round-result--inline .portrait-result-occupation {
    font-size: .76rem;
  }

  .portrait-round-result--inline .portrait-result-facts > div {
    padding: 7px 6px;
  }

  .portrait-round-result--inline .portrait-result-facts strong {
    font-size: .65rem;
  }
}

/* V55: content-led pages for AdSense readiness and clearer site navigation. */
.content-section,
.article-shell {
  width: min(1120px, calc(100% - 36px));
  margin-inline: auto;
}

.content-section {
  margin-bottom: 72px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 12px 34px rgba(34, 66, 72, 0.08);
}

.content-section-heading {
  max-width: 820px;
  margin-bottom: 28px;
}

.content-section-heading h2,
.content-section--split h2,
.article-hero h1,
.prose-section h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
}

.content-section-heading h2,
.content-section--split h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.06;
}

.content-section-heading > p:not(.eyebrow) {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.content-card-grid {
  display: grid;
  gap: 16px;
}

.content-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-card {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-strong);
}

.content-card h3 {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  line-height: 1.15;
}

.content-card p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.content-card .text-link {
  margin-top: auto;
  padding-top: 20px;
}

.text-link {
  color: var(--primary);
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.text-link:hover { color: var(--primary-hover); }

.content-section--split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.prose-stack {
  display: grid;
  gap: 16px;
}

.prose-stack p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.content-cta { justify-self: start; margin-top: 4px; }

.mode-explainer { margin-top: 64px; }

.article-shell {
  margin-top: 22px;
  margin-bottom: 80px;
}

.article-hero {
  max-width: 940px;
  margin: 26px 0 36px;
  padding: clamp(34px, 6vw, 64px);
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.article-hero h1 {
  max-width: 830px;
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: 0.98;
}

.article-hero > p:not(.eyebrow) {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.prose-section {
  max-width: 900px;
  margin: 0 0 20px;
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}

.prose-section h2 {
  margin-bottom: 16px;
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  line-height: 1.08;
}

.prose-section p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.78;
}

.prose-section p:last-child { margin-bottom: 0; }
.prose-section .text-link { display: inline-block; margin-top: 4px; }

@media (max-width: 920px) {
  .content-card-grid--three { grid-template-columns: 1fr; }
  .content-card { min-height: 0; }
  .content-section--split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .content-section,
  .article-shell { width: min(100% - 24px, 1120px); }
  .content-section { margin-bottom: 42px; padding: 22px 18px; border-radius: 20px; }
  .content-card { padding: 20px; }
  .article-hero { padding: 30px 22px; border-radius: 20px; }
  .prose-section { padding: 24px 20px; }
  .site-nav { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
  .site-nav a { font-size: 0.82rem; }
}


/* V56 — readable headings on light content surfaces and tighter editorial rhythm. */
.site-page .content-section,
.site-page .content-card,
.site-page .article-hero,
.site-page .prose-section {
  color: var(--text);
}

.site-page .content-section-heading h2,
.site-page .content-section--split h2,
.site-page .content-card h3,
.site-page .article-hero h1,
.site-page .prose-section h2 {
  color: #224248;
}

.site-page .content-section-heading > p:not(.eyebrow),
.site-page .content-card p:not(.eyebrow),
.site-page .article-hero > p:not(.eyebrow),
.site-page .prose-section p {
  color: #5b7479;
}

/* How it works: reduce excess vertical gaps and create a clearer reading rhythm. */
.how-it-works-page .article-hero {
  margin: 20px 0 24px;
  padding: clamp(30px, 5vw, 52px);
}

.how-it-works-page .article-hero .eyebrow {
  margin-bottom: 8px;
}

.how-it-works-page .article-hero h1 {
  line-height: 1.02;
}

.how-it-works-page .article-hero > p:not(.eyebrow) {
  margin-top: 14px;
  line-height: 1.62;
}

.how-it-works-page .prose-section {
  margin-bottom: 14px;
  padding: clamp(24px, 3.4vw, 34px);
}

.how-it-works-page .prose-section .eyebrow {
  margin-bottom: 5px;
}

.how-it-works-page .prose-section h2 {
  margin-bottom: 10px;
  line-height: 1.12;
}

.how-it-works-page .prose-section p {
  margin-bottom: 12px;
  line-height: 1.68;
}

.how-it-works-page .prose-section .text-link {
  margin-top: 2px;
}

@media (max-width: 640px) {
  .how-it-works-page .article-hero {
    margin-bottom: 18px;
    padding: 26px 20px;
  }

  .how-it-works-page .article-hero > p:not(.eyebrow) {
    margin-top: 12px;
  }

  .how-it-works-page .prose-section {
    margin-bottom: 12px;
    padding: 22px 18px;
  }
}

/* V57 — full-site mobile pass.
   The goal is a comfortable phone experience without changing game rules or
   the projection geometry used by Life & Death Map. */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

@media (max-width: 760px) {
  /* Prevent iOS from zooming the page when a form control receives focus. */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .primary-button,
  .secondary-button,
  .region-button,
  .tab-button,
  .danger-button,
  .dialog-close-button {
    min-height: 44px;
  }

  /* Shared public header / navigation. */
  .site-header {
    width: min(100% - 24px, 1240px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 0 10px;
  }

  .site-header .brand {
    width: max-content;
    max-width: 100%;
    font-size: 1.18rem;
  }

  .site-header .brand-logo {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .site-nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 0 3px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav::-webkit-scrollbar { display: none; }

  .site-nav a {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
  }

  /* Shared footer. */
  .site-footer {
    width: min(100% - 24px, 1240px);
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 22px 0 calc(26px + env(safe-area-inset-bottom));
  }

  .site-footer p {
    max-width: 100%;
    font-size: 0.76rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  /* Homepage. */
  .home-hero {
    width: min(100% - 20px, 1240px);
    min-height: 0;
    margin: 8px auto 38px;
    border-radius: 20px;
  }

  .home-hero-copy {
    padding: 28px 20px 25px;
  }

  .home-hero h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 12vw, 3.35rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
  }

  .home-hero-intro {
    margin: 16px 0 22px;
    font-size: 0.96rem;
    line-height: 1.58;
  }

  .hero-button {
    width: 100%;
    min-height: 46px;
    display: grid;
    place-items: center;
    text-align: center;
  }

  .home-map-art--map-only {
    min-height: 245px !important;
  }

  .hero-map-only {
    width: 136% !important;
    max-width: none;
    left: -18% !important;
  }

  .home-section,
  .mode-page-shell,
  .site-callout,
  .content-section,
  .article-shell {
    width: min(100% - 20px, 1240px);
  }

  .home-section {
    margin-bottom: 44px;
  }

  .section-heading {
    gap: 12px;
    margin-bottom: 16px;
  }

  .section-heading h2,
  .collection-section-heading h2 {
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }

  .mode-grid,
  .collection-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mode-card,
  .collection-card {
    min-height: 0;
    padding: 19px;
    border-radius: 17px;
  }

  .mode-card h2,
  .collection-card h3 {
    margin: 20px 0 8px;
    font-size: 1.45rem;
  }

  .mode-card-footer,
  .collection-card-footer {
    align-items: center;
    gap: 8px;
    padding-top: 18px;
  }

  .mode-card-action,
  .collection-card-footer .primary-button,
  .collection-card-footer .secondary-button {
    min-height: 44px;
  }

  /* Collection / game-mode landing pages. */
  .mode-page-shell {
    margin-top: 12px;
    margin-bottom: 48px;
  }

  .breadcrumbs {
    gap: 6px;
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .mode-hero {
    gap: 22px;
    margin: 16px 0 34px;
    padding: 24px 19px;
    border-radius: 20px;
  }

  .mode-hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.3rem);
    line-height: 0.98;
  }

  .mode-hero p:not(.eyebrow) {
    margin-top: 14px;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .mode-rules {
    gap: 7px;
  }

  .mode-rules span {
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  .mode-rules strong {
    font-size: 1rem;
  }

  .collection-groups {
    gap: 38px;
  }

  /* Editorial / AdSense content pages. */
  .content-section {
    margin-bottom: 34px;
    padding: 21px 17px;
    border-radius: 18px;
  }

  .content-section-heading {
    margin-bottom: 19px;
  }

  .content-section-heading h2,
  .content-section--split h2 {
    font-size: clamp(1.8rem, 9vw, 2.45rem);
  }

  .content-section-heading > p:not(.eyebrow),
  .prose-stack p,
  .content-card p:not(.eyebrow) {
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .content-card {
    min-height: 0;
    padding: 18px;
    border-radius: 15px;
  }

  .content-card h3 {
    font-size: 1.3rem;
  }

  .content-card .text-link {
    padding-top: 15px;
  }

  .content-section--split {
    gap: 18px;
  }

  .article-shell {
    margin-top: 10px;
    margin-bottom: 50px;
  }

  .article-hero {
    margin: 15px 0 16px;
    padding: 25px 19px;
    border-radius: 18px;
  }

  .article-hero h1 {
    font-size: clamp(2.15rem, 11vw, 3.15rem);
    line-height: 1;
  }

  .article-hero > p:not(.eyebrow) {
    margin-top: 13px;
    font-size: 0.96rem;
    line-height: 1.62;
  }

  .prose-section {
    margin-bottom: 11px;
    padding: 20px 17px;
    border-radius: 17px;
  }

  .prose-section h2 {
    margin-bottom: 9px;
    font-size: clamp(1.55rem, 8vw, 2.15rem);
  }

  .prose-section p {
    margin-bottom: 11px;
    font-size: 0.95rem;
    line-height: 1.67;
  }

  /* Game Settings dialogs: phone-height safe, touch friendly and no clipped controls. */
  .game-settings-dialog {
    width: calc(100% - 12px);
    max-width: none;
    max-height: calc(100dvh - 10px);
    margin: auto;
    border-radius: 18px;
  }

  .game-settings-form {
    gap: 13px;
    max-height: calc(100dvh - 12px);
    padding: 16px 14px max(12px, env(safe-area-inset-bottom));
  }

  .game-settings-heading h2 {
    font-size: 1.7rem;
  }

  .game-settings-heading p:last-child {
    margin-top: 7px;
    font-size: 0.8rem;
    line-height: 1.38;
  }

  .game-settings-options {
    gap: 7px;
  }

  .game-setting-option {
    min-width: 0;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
  }

  .game-setting-copy strong {
    font-size: 0.92rem;
  }

  .game-setting-copy small {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .game-setting-option--number,
  .game-setting-option--select,
  .game-setting-option--birth-range {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .game-setting-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    padding: 11px 36px 11px 12px;
  }

  .round-count-control {
    width: 100%;
    grid-template-columns: minmax(92px, 120px) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 10px;
  }

  .game-setting-number {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left;
  }

  .include-all-control {
    justify-self: end;
    min-height: 40px;
  }

  .birth-year-range-control {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
  }

  .birth-year-entry {
    min-height: 40px;
    font-size: 16px;
  }

  .birth-year-dual-range {
    height: 34px;
  }

  .game-settings-note {
    padding: 9px 11px;
    font-size: 0.73rem;
    line-height: 1.35;
  }

  .game-settings-actions {
    margin: 0 -2px -2px;
    padding: 15px 2px 2px;
  }

  /* Shared play-page header. Keep the game itself above the fold. */
  .game-shell,
  .timeline-game-shell,
  .portrait-game-shell {
    width: min(100% - 12px, 1120px);
    margin: 8px auto 24px;
  }

  .game-header--play {
    gap: 9px;
    margin-bottom: 10px;
  }

  .game-header--play .play-brand {
    gap: 7px;
    font-size: 1rem;
  }

  .game-header--play .brand-logo {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .game-header--play .breadcrumbs,
  .game-header--play .intro {
    display: none;
  }

  .game-header--play h1 {
    margin-top: 4px;
    font-size: clamp(1.55rem, 8vw, 2rem);
  }

  .game-header--play .play-settings-summary {
    width: 100%;
    gap: 5px;
    margin-top: 7px;
    padding-bottom: 2px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .game-header--play .play-settings-summary::-webkit-scrollbar { display: none; }

  .game-header--play .play-settings-summary span {
    flex: 0 0 auto;
    padding: 5px 7px;
    font-size: 0.64rem;
    white-space: nowrap;
  }

  .game-header--play .header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .game-header--play .header-actions > * {
    min-width: 0;
    min-height: 42px;
    padding: 8px 9px;
    font-size: 0.72rem;
  }

  /* Life & Death Map. The exact map aspect ratio remains untouched. */
  .map-card {
    border-radius: 14px;
  }

  .map-game-hud {
    top: 6px;
    right: 6px;
    width: min(270px, calc(100% - 12px));
    border-radius: 10px;
  }

  .map-game-hud-item {
    padding: 6px 4px;
  }

  .map-game-hud-item span {
    font-size: 0.53rem;
  }

  .map-game-hud-item strong {
    font-size: 0.82rem;
  }

  .map-stage-wrapper .offline-map-controls {
    right: 7px;
    bottom: 7px;
    gap: 5px;
  }

  .offline-map-control-button {
    width: 38px;
    height: 38px;
  }

  .offline-map-marker-label {
    max-width: 132px;
    padding: 4px 5px;
  }

  .offline-map-marker-year { font-size: 0.61rem; }
  .offline-map-marker-place { font-size: 0.56rem; }

  .map-footer {
    padding: 8px 10px;
  }

  .map-legend {
    gap: 9px 12px;
    font-size: 0.72rem;
  }

  .answer-card {
    margin-top: 9px;
    padding: 13px;
    border-radius: 14px;
  }

  .answer-card label {
    font-size: 0.86rem;
  }

  .guess-help {
    margin: 4px 0 8px;
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .input-row,
  .portrait-input-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .input-row input,
  .portrait-input-row input {
    min-height: 44px;
  }

  .input-row .primary-button,
  .portrait-input-row .primary-button {
    width: 100%;
  }

  .action-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    margin-top: 9px;
  }

  .action-row > * {
    min-width: 0;
    min-height: 42px;
    padding: 8px 5px;
    font-size: 0.68rem;
    text-align: center;
  }

  .hint-panel {
    margin-top: 9px;
  }

  .feedback {
    min-height: 20px;
    margin-top: 8px;
    font-size: 0.78rem;
  }

  .round-result {
    top: auto;
    right: 6px;
    bottom: 6px;
    left: 6px;
    max-height: min(58dvh, 360px);
    overflow-y: auto;
    padding: 11px 12px;
    border-radius: 12px;
  }

  .round-result > strong {
    font-size: 1.55rem;
  }

  .round-result p { font-size: 0.84rem; }
  .round-result small { font-size: 0.7rem; }

  .result-portrait,
  .result-portrait img {
    width: 82px;
  }

  /* Timeline: preserve horizontal ordering but use smaller, touch-friendly cards. */
  .timeline-status-card {
    margin-bottom: 8px;
    border-radius: 12px;
  }

  .timeline-status-card > div {
    padding: 8px 5px;
  }

  .timeline-status-card span { font-size: 0.52rem; }
  .timeline-status-card strong { font-size: 0.9rem; }

  .timeline-board-card--primary {
    margin-bottom: 10px;
    border-radius: 15px;
  }

  .timeline-board-heading {
    gap: 4px;
    padding: 11px 12px 8px;
  }

  .timeline-board-heading h2 {
    font-size: 1.25rem;
  }

  .timeline-feedback {
    min-height: 1em;
    font-size: 0.7rem;
  }

  .timeline-board-card--primary .timeline-board-scroll {
    padding: 15px 6px 18px;
  }

  .timeline-board-card--primary .timeline-board {
    min-height: 158px;
    padding: 16px 4px;
  }

  .timeline-board::before {
    left: 22px;
    right: 22px;
    height: 3px;
  }

  .timeline-board::after {
    right: 16px;
    width: 9px;
    height: 9px;
    border-width: 3px 3px 0 0;
  }

  .timeline-placed-person {
    width: 96px;
    flex-basis: 96px;
    border-radius: 11px;
    scroll-snap-align: center;
  }

  .timeline-placed-person__body {
    gap: 2px;
    padding: 7px 6px 8px;
  }

  .timeline-placed-person__body strong {
    font-size: 0.63rem;
  }

  .timeline-placed-person__body span {
    font-size: 0.78rem;
  }

  .timeline-drop-slot {
    width: 50px;
    height: 88px;
    flex-basis: 50px;
    margin: 0 3px;
    padding: 6px 3px;
    border-radius: 11px;
  }

  .timeline-drop-slot span {
    width: 25px;
    height: 25px;
    font-size: 1rem;
  }

  .timeline-drop-slot small {
    max-width: 44px;
    font-size: 0.51rem;
  }

  .timeline-challenge-layout--below {
    grid-template-columns: 138px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 11px;
    border-radius: 14px;
  }

  .timeline-person-card--compact {
    width: 138px;
  }

  .timeline-person-card--compact .timeline-person-card__body {
    padding: 8px 9px 9px;
  }

  .timeline-person-card--compact h2 {
    margin: 3px 0 6px;
    font-size: 0.98rem;
  }

  .timeline-person-card--compact .timeline-person-card__birthplace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .timeline-play-instructions {
    max-width: none;
    font-size: 0.76rem;
    line-height: 1.48;
    text-align: left;
  }

  /* Portrait: keep image, guessing area and clues compact. */
  .portrait-status-card {
    margin-bottom: 7px;
  }

  .portrait-status-card > div {
    padding: 7px 4px;
  }

  .portrait-challenge-card--compact {
    gap: 8px;
    padding: 9px;
    border-radius: 14px;
  }

  .portrait-challenge-card--compact .portrait-main-figure {
    width: min(142px, 44vw);
    max-width: 142px;
  }

  .portrait-question-heading {
    margin-bottom: 6px;
  }

  .portrait-question-heading h2 {
    font-size: 1.38rem;
  }

  .portrait-feedback-box {
    min-height: 42px;
    margin-bottom: 7px;
    padding: 7px 8px;
  }

  .portrait-give-up-button {
    min-height: 36px;
    margin-top: 3px;
  }

  .portrait-clues--compact {
    padding: 7px;
    border-radius: 12px;
  }

  .portrait-clues-heading--compact {
    margin-bottom: 5px;
  }

  .portrait-clue-grid--compact {
    gap: 5px;
  }

  .portrait-clue-item--compact {
    min-height: 62px;
    gap: 4px;
    padding: 5px;
  }

  .portrait-clue-item--compact .portrait-clue-button {
    min-height: 34px;
  }

  /* All end-of-game dialogs remain fully visible on small screens. */
  .game-summary-modal {
    align-items: center;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  }

  .game-summary-card {
    width: min(100%, 520px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    padding: 22px 15px 16px;
    border-radius: 19px;
  }

  .game-summary-card h2 {
    font-size: clamp(2rem, 11vw, 2.8rem);
  }

  .game-summary-message {
    margin-bottom: 14px;
    font-size: 0.84rem;
  }

  .game-summary-main {
    margin-bottom: 10px;
    padding: 13px 12px;
  }

  .game-summary-main strong {
    font-size: 2.4rem;
  }

  .game-summary-stats,
  .timeline-summary-stats,
  .portrait-summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
  }

  .game-summary-stats > div {
    padding: 9px 5px;
  }

  .game-summary-actions {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

@media (max-width: 430px) {
  .site-header,
  .site-footer {
    width: calc(100% - 18px);
  }

  .site-nav a {
    padding: 8px 9px;
    font-size: 0.74rem;
  }

  .home-hero,
  .home-section,
  .mode-page-shell,
  .content-section,
  .article-shell {
    width: calc(100% - 14px);
  }

  .home-hero-copy {
    padding-inline: 17px;
  }

  .home-map-art--map-only {
    min-height: 215px !important;
  }

  .mode-card,
  .collection-card {
    padding: 17px;
  }

  .mode-card-footer,
  .collection-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .mode-card-footer .primary-button,
  .mode-card-footer .secondary-button,
  .collection-card-footer .primary-button,
  .collection-card-footer .secondary-button {
    width: 100%;
    text-align: center;
  }

  .game-settings-form {
    padding-inline: 11px;
  }

  .round-count-control {
    grid-template-columns: 1fr;
  }

  .include-all-control {
    justify-self: start;
  }

  .birth-year-range-values {
    gap: 5px;
  }

  .action-row {
    grid-template-columns: 1fr 1fr;
  }

  .action-row #next-button {
    grid-column: 1 / -1;
  }

  .timeline-challenge-layout--below {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 9px;
  }

  .timeline-person-card--compact {
    width: 124px;
  }

  .timeline-play-instructions {
    font-size: 0.7rem;
  }

  .timeline-placed-person {
    width: 88px;
    flex-basis: 88px;
  }

  .timeline-drop-slot {
    width: 46px;
    flex-basis: 46px;
  }

  .portrait-clue-grid--compact {
    grid-template-columns: 1fr;
  }

  .portrait-clue-item--compact {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 48px;
  }

  .portrait-clue-item--compact .portrait-clue-button {
    width: auto;
    min-width: 66px;
  }

  .game-summary-card {
    padding-inline: 13px;
  }
}

/* V57 follow-up: play pages use the same readable footer treatment on dark backgrounds. */
@media (max-width: 760px) {
  body:not(.site-page) > .site-footer {
    color: rgba(245, 251, 251, 0.76);
    border-top-color: rgba(255, 255, 255, 0.14);
  }
  body:not(.site-page) > .site-footer .brand { color: #ffffff; }
  body:not(.site-page) > .site-footer a:hover { color: var(--highlight); }
}

@media (max-width: 430px) {
  .portrait-clue-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portrait-clue-item--compact {
    grid-template-columns: 1fr;
    align-content: start;
    min-height: 60px;
  }

  .portrait-clue-item--compact .portrait-clue-button {
    width: 100%;
    min-width: 0;
  }
}