/* learn.css
 * Phase 2, Theme 2: the learning / enrichment screens (flag group `learn`).
 * House style matches the story-depth / memory panels: dark Norse surfaces,
 * gold accents, large tap targets, and reduce-motion respected (all transitions
 * are pinned under .reduce-motion). Nothing here is load-bearing for the game;
 * these are read-only or local-only enrichment surfaces. */

.learn-hub .panel-note,
.learn-word .panel-note,
.learn-facts .panel-note,
.learn-wildlife .panel-note,
.learn-tides .panel-note { margin-top: 0; }

/* Quick cards (word of the day, distance) shared at the top of the hub. */
.learn-hub-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 520px) { .learn-hub-cards { grid-template-columns: 1fr 1fr; } }

.learn-word-card,
.learn-distance-card {
  background: var(--navy);
  border: 1px solid var(--gold, #c9a84c);
  border-radius: 12px;
  padding: 14px 16px;
}
.learn-word-head,
.learn-distance-head {
  font-family: var(--font-head, 'Cinzel', serif);
  color: var(--gold-bright, #ffe08a);
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 6px;
}
.learn-word-term { font-size: 1.7rem; font-weight: 700; color: var(--cream, #fdf6e3); }
.learn-word-say { font-style: italic; color: var(--sky, #9fb0d0); margin: 2px 0 6px; }
.learn-word-mean { color: var(--cream, #fdf6e3); }
.learn-word-kid { margin-top: 8px; color: var(--gold-bright, #ffe08a); font-size: 0.92rem; }

.learn-distance-value,
.learn-distance-big { font-size: 2.2rem; font-weight: 700; color: var(--gold-bright, #ffe08a); }
.learn-distance-big { text-align: center; margin: 18px 0; }
.learn-distance-note { color: var(--sky, #9fb0d0); font-size: 0.9rem; margin-top: 4px; }

/* The hub tile grid: one primary action each, large and clear. */
.learn-hub-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.learn-hub-tile {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; padding: 16px;
  min-height: 64px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--gold, #c9a84c);
  border-radius: 12px;
  color: var(--cream, #fdf6e3);
  cursor: pointer;
}
.learn-hub-tile:hover,
.learn-hub-tile:focus-visible { border-color: var(--gold-bright, #ffe08a); }
.learn-hub-tile-label { font-family: var(--font-head, 'Cinzel', serif); color: var(--gold-bright, #ffe08a); font-size: 1.05rem; }
.learn-hub-tile-sub { color: var(--sky, #9fb0d0); font-size: 0.85rem; }

/* Night sky. */
.learn-sky-svg { display: block; margin: 12px auto; max-width: 100%; }
.learn-sky-disc { fill: #050814; stroke: var(--gold, #c9a84c); stroke-width: 0.01; }
.learn-sky-n { fill: var(--gold-bright, #ffe08a); font-size: 0.12px; text-anchor: middle; }
.learn-sky-star { fill: #fdf6e3; cursor: pointer; transition: r 0.15s ease, fill 0.15s ease; }
.learn-sky-star:hover,
.learn-sky-star:focus-visible { fill: var(--gold-bright, #ffe08a); r: 0.05px; outline: none; }
.learn-sky-readout { text-align: center; color: var(--gold, #c9a84c); min-height: 1.4em; font-style: italic; }

/* Sun and tides. */
.learn-tide-note { color: var(--cream, #fdf6e3); font-style: italic; }
.learn-sun-row { display: flex; gap: 16px; margin: 12px 0; }
.learn-sun { flex: 1; text-align: center; background: var(--navy); border-radius: 10px; padding: 10px; }
.learn-sun-k { color: var(--sky, #9fb0d0); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.learn-sun-v { color: var(--gold-bright, #ffe08a); font-size: 1.4rem; font-weight: 700; }
.learn-tide-list { display: flex; flex-direction: column; gap: 6px; }
.learn-tide-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.learn-tide-row.tide-high { border-left: 4px solid var(--sky, #4a90d9); }
.learn-tide-row.tide-low { border-left: 4px solid var(--gold, #c9a84c); }
.learn-tide-type { color: var(--cream, #fdf6e3); }
.learn-tide-time { color: var(--gold-bright, #ffe08a); font-weight: 700; }
.learn-tide-height { color: var(--sky, #9fb0d0); font-size: 0.85rem; }

/* Wildlife checklist. */
.learn-wildlife-list { display: flex; flex-direction: column; gap: 8px; }
.learn-wild-row {
  display: flex; align-items: center; gap: 12px; text-align: left;
  width: 100%; padding: 12px; min-height: 64px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 10px; color: var(--cream, #fdf6e3); cursor: pointer;
}
.learn-wild-row.ticked { border-color: var(--forest, #2d7a2d); background: rgba(45, 122, 45, 0.18); }
.learn-wild-check { width: 1.4em; color: var(--forest, #6ad06a); font-weight: 700; }
.learn-wild-glyph { font-size: 1.6rem; }
.learn-wild-body { display: flex; flex-direction: column; }
.learn-wild-name { font-weight: 700; }
.learn-wild-fact { color: var(--sky, #9fb0d0); font-size: 0.88rem; }

/* Fact cards (bestiary style). */
.learn-fact-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .learn-fact-grid { grid-template-columns: 1fr 1fr; } }
.learn-fact-card {
  background: var(--navy);
  border: 1px solid var(--gold, #c9a84c);
  border-radius: 12px; padding: 14px 16px;
}
.learn-fact-glyph { font-size: 1.8rem; }
.learn-fact-title { font-family: var(--font-head, 'Cinzel', serif); color: var(--gold-bright, #ffe08a); font-size: 1.1rem; }
.learn-fact-sub { color: var(--sky, #9fb0d0); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.learn-fact-body { color: var(--cream, #fdf6e3); }
.learn-fact-kid { margin-top: 8px; color: var(--gold-bright, #ffe08a); font-size: 0.9rem; }

/* Name in script. */
.learn-name-preview {
  text-align: center; font-family: var(--font-rune, 'MedievalSharp', serif);
  font-size: 2.6rem; color: var(--cream, #fdf6e3); margin: 14px 0; min-height: 1.4em;
  word-break: break-word;
}
.learn-name-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.learn-name-pair { text-align: center; min-width: 40px; }
.learn-name-glyph { font-family: var(--font-rune, 'MedievalSharp', serif); font-size: 1.8rem; color: var(--gold-bright, #ffe08a); }
.learn-name-letter { color: var(--sky, #9fb0d0); font-size: 0.9rem; }

/* Explainer (image-tap style). */
.learn-explainer-stage { position: relative; display: inline-block; max-width: 100%; margin: 12px 0; }
.learn-explainer-img { display: block; max-width: 100%; border-radius: 12px; }
.learn-hotspot {
  position: absolute; transform: translate(-50%, -50%);
  /* An explicit round 44px target (the minimum comfortable tap size) so the spots do not
     overlap and every one is easy to hit. An always-on glow ring keeps them reading as
     "glowing spots" even when the pulse animation is off (reduced motion). */
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 224, 138, 0.85); border: 2px solid var(--rune-red, #8b1a1a);
  cursor: pointer; padding: 0;
  box-shadow: 0 0 0 3px rgba(255, 224, 138, 0.35);
  touch-action: manipulation;
  animation: learn-pulse 2s ease-in-out infinite;
}
.learn-hotspot:focus-visible { outline: 3px solid var(--gold-bright, #ffe08a); outline-offset: 2px; }
.learn-explainer-readout { color: var(--cream, #fdf6e3); min-height: 2.4em; background: var(--navy); border-radius: 8px; padding: 10px 12px; }
@keyframes learn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 224, 138, 0.6); } 50% { box-shadow: 0 0 0 8px rgba(255, 224, 138, 0); } }

/* Family tree. */
.learn-tree-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.learn-tree-chip {
  padding: 8px 14px; min-height: 44px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--gold, #c9a84c);
  color: var(--cream, #fdf6e3); cursor: pointer;
}
/* --gold-bright is a deeper accent on the light themes (and brighter on the dark
   ones), so light --ink text on it clears AA where the mid-tone --gold did not. */
.learn-tree-chip.active { background: var(--gold-bright, #ffe08a); color: #1c2233; font-weight: 700; }
.learn-tree-detail { background: var(--navy); border: 1px solid var(--gold, #c9a84c); border-radius: 12px; padding: 16px; }
.learn-tree-name { display: flex; align-items: center; gap: 10px; font-family: var(--font-head, 'Cinzel', serif); font-size: 1.4rem; color: var(--gold-bright, #ffe08a); }
.learn-tree-glyph { font-family: var(--font-rune, 'MedievalSharp', serif); }
.learn-tree-title { color: var(--sky, #9fb0d0); font-style: italic; margin-bottom: 8px; }
.learn-tree-fact { color: var(--cream, #fdf6e3); }
.learn-tree-rels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.learn-tree-rel { padding: 8px 12px; min-height: 44px; border-radius: 8px; background: rgba(74, 144, 217, 0.18); border: 1px solid var(--sky, #4a90d9); color: var(--cream, #fdf6e3); cursor: pointer; }

/* Trivia. */
.learn-trivia-best { color: var(--gold, #c9a84c); font-style: italic; min-height: 1.4em; }
.learn-trivia-stage { margin-top: 12px; }
.learn-trivia-progress { color: var(--sky, #9fb0d0); font-size: 0.85rem; }
.learn-trivia-q { font-family: var(--font-head, 'Cinzel', serif); font-size: 1.2rem; color: var(--cream, #fdf6e3); margin: 8px 0 12px; }
.learn-trivia-opts { display: flex; flex-direction: column; gap: 8px; }
.learn-trivia-opt {
  text-align: left; padding: 14px; min-height: 56px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--gold, #c9a84c);
  color: var(--cream, #fdf6e3); cursor: pointer;
}
.learn-trivia-opt:disabled { opacity: 0.85; cursor: default; }
.learn-trivia-opt.right { background: rgba(45, 122, 45, 0.3); border-color: var(--forest, #6ad06a); }
.learn-trivia-opt.wrong { background: rgba(139, 26, 26, 0.3); border-color: var(--rune-red, #c0392b); }
.learn-trivia-feedback { margin: 12px 0; padding: 12px; border-radius: 8px; background: var(--navy); color: var(--cream, #fdf6e3); }
.learn-trivia-feedback.right { border-left: 4px solid var(--forest, #6ad06a); }
.learn-trivia-feedback.wrong { border-left: 4px solid var(--rune-red, #c0392b); }
.learn-trivia-fact { color: var(--sky, #9fb0d0); font-size: 0.9rem; margin-top: 6px; }
.learn-trivia-result { font-family: var(--font-head, 'Cinzel', serif); font-size: 1.5rem; color: var(--gold-bright, #ffe08a); text-align: center; margin-bottom: 16px; }

/* Reduce-motion: pin every transition / animation in these screens. */
.reduce-motion .learn-sky-star,
.reduce-motion .learn-hotspot { transition: none !important; animation: none !important; }