/* ============================================================
   Explorer's Journal (map / quests / stamps), plus the small
   companions: state badge, long-ago chip, quest toast.
   ============================================================ */

/* ---------- Header companions ---------- */

.trailhead-right {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.state-badge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: var(--sky);
  color: var(--river-deep);
  border: 2px solid var(--river);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 6px;
  white-space: nowrap;
}
.state-badge.state-ice { background: #eef6fb; color: #4a7d9e; border-color: #8fc1dd; }
.state-badge.state-vapor { background: #f4f1e6; color: #8a7a4d; border-color: #cdbd8a; }

/* ---------- Long-ago chip (lives in the story panel heading,
     so it never covers anything in the scene) ---------- */

.longago-chip {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(12px, 0.95vw, 16px);
  color: #6b5616;
  background: linear-gradient(#f9ecc0, #efd98a);
  border: 2px solid #d9b94a;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.longago-chip:hover { transform: scale(1.08); filter: brightness(1.05); }

/* ---------- Quest toast ---------- */

.quest-toast {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(15px, 1.2vw, 20px);
  color: #fff7ea;
  background: var(--pine);
  border: 2px solid #fff7ea;
  border-radius: 999px;
  padding: 12px 26px;
  box-shadow: var(--shadow-card);
  animation: toast-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.quest-toast[hidden] { display: none; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.85); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---------- Journal book ---------- */

.journal-book { width: min(820px, 100%); }

.odometer {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 18px);
  color: var(--river-deep);
  margin: 4px 0 14px;
}

.journal-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.journal-tab {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 17px);
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--paper-deep);
  border: 2px solid var(--paper-edge);
  color: var(--ink-soft);
  transition: transform 0.12s ease;
}
.journal-tab:hover { transform: translateY(-1px); }
.journal-tab.active {
  background: var(--pine);
  border-color: var(--pine-deep);
  color: #fff7ea;
}

.journal-pane { display: none; }
.journal-pane.active { display: block; }

.pane-hint {
  text-align: center;
  color: var(--ink-soft);
  font-size: clamp(13px, 1vw, 16px);
  margin: 0 0 10px;
}

/* ---------- Map ---------- */

.map-svg {
  width: 100%;
  height: auto;
  display: block;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(214, 196, 148, 0.25), transparent 60%),
    radial-gradient(ellipse at 75% 80%, rgba(214, 196, 148, 0.2), transparent 55%),
    var(--paper-deep);
  border: 2px solid var(--paper-edge);
  border-radius: 14px;
}

.map-edge-traveled {
  stroke: var(--river);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.75;
}

/* Trail between two places you've been, but not walked end-to-end
   since the journal began — drawn as a faint solid path */
.map-edge-known {
  stroke: #a98f5f;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.45;
}

.map-edge-hint {
  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  opacity: 0.5;
}

.map-node circle {
  fill: var(--paper);
  stroke: var(--pine);
  stroke-width: 3;
}
.map-node-here circle {
  fill: #fdf3d9;
  stroke: var(--clay);
  stroke-width: 4;
}
.map-node-unknown circle {
  fill: rgba(247, 239, 220, 0.55);
  stroke: var(--ink-soft);
  stroke-dasharray: 5 5;
  stroke-width: 2.5;
}

.map-emoji {
  font-size: 26px;
  text-anchor: middle;
}
.map-node-unknown .map-emoji {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  fill: var(--ink-soft);
}

.map-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  fill: var(--pine-deep);
  text-anchor: middle;
}
.map-node-here .map-label { fill: var(--clay-deep); }

/* ---------- Quests ---------- */

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

.quest {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(238, 224, 192, 0.45);
  border: 2px solid var(--paper-edge);
  border-radius: 12px;
  padding: 10px 14px;
  opacity: 0.75;
}
.quest-earned {
  background: rgba(62, 107, 78, 0.12);
  border-color: var(--pine);
  opacity: 1;
}

.quest-emoji { font-size: 26px; }

.quest-text {
  font-size: clamp(13px, 1vw, 15.5px);
  line-height: 1.4;
  flex: 1;
}
.quest-text strong {
  font-family: var(--font-display);
  font-size: clamp(14.5px, 1.1vw, 17px);
  color: var(--pine-deep);
}

.quest-check {
  font-size: 22px;
  font-weight: 800;
  color: var(--pine);
}

/* ---------- Small screens ---------- */

@media (max-width: 560px) {
  .state-badge { display: none; }
  .longago-label { display: none; }
  .quest-list { grid-template-columns: 1fr; }
}