.mini-map {
  width: 100%;
  max-height: min(54vh, 520px);
  margin: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  border: 1px solid var(--ink);
  overflow: auto;
  background:
    radial-gradient(ellipse at 72% 45%, #6bb7bb 0 9%, transparent 10%),
    radial-gradient(ellipse at 24% 68%, #6bb7bb 0 12%, transparent 13%),
    linear-gradient(28deg, transparent 42%, #d5b47c 43% 48%, transparent 49%),
    #a9c985;
}
.world-map {
  width: 100%;
  aspect-ratio: 1000 / 675;
  margin: 10px 0;
  border: 1px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  background: #a9c985;
}
.world-map svg { display: block; width: 100%; height: 100%; }
.world-map-road {
  fill: none;
  stroke: #8b6844;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.world-map-place { fill: var(--gold); stroke: var(--ink); stroke-width: 4; }
.world-map-place.is-complete { fill: #89b887; }
.world-map-place.is-next { fill: #ffe0a1; stroke: #9b4a17; stroke-width: 7; }
.world-map-number {
  fill: #172c35;
  font: 800 24px sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.map h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); margin-bottom: 8px; }
.map-goal { margin: 8px 0 12px; font-weight: 700; }
.world-map-player { fill: #2678df; stroke: white; stroke-width: 4; }
.map-place-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgb(23 44 53 / 42%);
  border-radius: 6px;
  background: rgb(255 250 240 / 90%);
}
.map-place {
  min-width: 0;
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-radius: 4px;
  background: var(--cream);
  color: var(--ink);
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}
.map-place:hover,
.map-place:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}
.map-place-state {
  max-width: 72px;
  font-size: 0.65rem;
  line-height: 1.15;
  font-weight: 800;
  text-align: right;
}
.map-place-row.is-current {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
}
.map-place-row.is-complete .map-place-state {
  color: #285e43;
}
.map-place-row.is-locked {
  opacity: 0.58;
}
.map-place:disabled {
  cursor: not-allowed;
}
.map-status {
  margin-block: 10px 0;
  font-weight: 800;
}
@media (max-width: 620px) {
  .mini-map {
    grid-template-columns: 1fr;
    max-height: 52vh;
    padding: 8px;
  }
}
.travel-flash {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 244, 215, 0.98),
    rgba(255, 210, 118, 0.6),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.32s;
}
.travel-flash.is-travelling {
  opacity: 1;
  animation: travel-pulse 1.35s ease both;
}
.gate {
  transition:
    opacity 0.8s,
    filter 0.8s;
}
.gate.is-opening {
  opacity: 0;
  filter: blur(10px);
}
.start-card {
  background: radial-gradient(
    circle at 50% 58%,
    rgba(23, 44, 53, 0.15),
    rgba(23, 44, 53, 0.88) 70%
  );
  animation: diorama-in 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.start-card h1,
.start-card p,
.start-card .key-row,
.start-card button {
  text-shadow: 0 2px 12px #172c35;
}
.world-open .hud {
  animation: hud-in 0.55s ease both;
}

.area-guide {
  position: fixed;
  top: 5.8rem;
  left: 1rem;
  z-index: 18;
  max-width: min(20rem, calc(100vw - 2rem));
  border: 1px solid rgba(255, 244, 210, 0.65);
  border-radius: 0.75rem;
  background: rgba(21, 42, 47, 0.9);
  color: #fff8e7;
  font-size: 0.82rem;
  line-height: 1.45;
}
.area-guide summary {
  padding: 0.75rem 0.85rem;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 650;
}
.area-guide summary:focus-visible { outline: 3px solid #ffd276; outline-offset: 3px; }
.area-checklist {
  padding: 0 0.85rem 0.75rem;
  max-height: 40vh;
  overflow: auto;
  white-space: pre-line;
}
@keyframes travel-pulse {
  0%,
  100% {
    opacity: 0;
  }
  35%,
  64% {
    opacity: 0.92;
  }
}
@keyframes diorama-in {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes hud-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.npc-subtitle {
  position: fixed;
  z-index: 35;
  left: 50%;
  bottom: max(112px, calc(env(safe-area-inset-bottom) + 104px));
  transform: translateX(-50%);
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  margin: 0;
  padding: 16px 22px;
  border-radius: 14px;
  background: #fff4df;
  color: #243537;
  box-shadow: 0 4px 18px #172c3529;
  font: 700 17px/1.45 "Nunito Sans", sans-serif;
  text-align: center;
  pointer-events: none;
}
.npc-subtitle[hidden] { display: none; }
@media (max-width: 600px) {
  .npc-subtitle { bottom: 230px; padding: 12px 16px; font-size: 15px; }
}

.story-choices:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1.25rem;
}
.story-choices .warm-button {
  flex: 1 1 7rem;
  min-height: 3rem;
}
.story-choices .warm-button[aria-pressed="true"] {
  outline: 3px solid #467b7a;
  outline-offset: 3px;
}
.reset-dialog h2 { font-size: clamp(1.7rem, 5vw, 2.5rem); }
.reset-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.reset-actions .warm-button { flex: 1 1 160px; min-height: 48px; }
#reset-confirm { background: var(--paper); }