/* story-depth.css
 * Phase 2, Theme 1 (story / narrative depth). Styles for the additive screens:
 * the in-hub side-quests, the saga journal, the lore cards (bestiary style), the
 * tomorrow riddle and the secret-chapter button. Child-first: large tap targets,
 * one primary action per surface, high contrast on the dark Norse surface. All
 * motion is gentle and pinned under prefers-reduced-motion. Colours reuse the
 * existing theme CSS variables so a colourblind/theme overlay applies here too.
 */

/* ---- side-quests (in the chapter hub) ---------------------------------- */
.hub-sidequests { margin-top: 1.2rem; }
.story-sidequests h3 { margin-bottom: 0.2rem; }
.story-sidequests .panel-note { margin-top: 0; }
.story-sidequest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  margin: 0.5rem 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  min-height: 56px;
}
.story-sidequest .sq-title { font-weight: 700; }
.story-sidequest .sq-sub { font-size: 0.85rem; opacity: 0.85; margin-top: 0.15rem; }
.story-sidequest.done { opacity: 0.7; }

/* ---- saga journal ------------------------------------------------------ */
.story-journal-day {
  margin: 0.8rem 0;
  padding: 0.9rem 1.05rem;
  border-radius: 12px;
  background: rgba(253, 246, 227, 0.05);
  border-left: 4px solid var(--gold, #c9a84c);
}
.story-journal-head {
  font-family: var(--font-head, 'Cinzel', serif);
  font-weight: 700;
  color: var(--gold-bright, #ffe08a);
  margin-bottom: 0.35rem;
}
.story-journal-line { margin: 0.25rem 0; line-height: 1.45; }

/* ---- lore cards (bestiary-style grid) ---------------------------------- */
.story-lore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.story-lore-card {
  padding: 0.9rem;
  border-radius: 14px;
  border: 2px solid rgba(201, 168, 76, 0.4);
  background: rgba(10, 14, 46, 0.45);
  display: flex;
  flex-direction: column;
}
.story-lore-card.locked { opacity: 0.55; text-align: center; }
.story-lore-card.unlocked { border-color: var(--gold, #c9a84c); }
.story-lore-glyph,
.story-lore-locked-glyph {
  font-family: var(--font-rune, 'MedievalSharp', serif);
  font-size: 2.2rem;
  color: var(--gold-bright, #ffe08a);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.story-lore-title { font-weight: 700; margin-bottom: 0.15rem; }
.story-lore-sub { font-size: 0.85rem; opacity: 0.85; margin-bottom: 0.4rem; }
.story-lore-fact { font-size: 0.92rem; line-height: 1.45; margin: 0.2rem 0; }
.story-lore-kid {
  font-size: 0.86rem;
  line-height: 1.4;
  margin-top: 0.4rem;
  opacity: 0.9;
  font-style: italic;
}

/* ---- tomorrow riddle --------------------------------------------------- */
.story-riddle-card {
  margin-top: 0.8rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 2px dashed var(--gold, #c9a84c);
  background: rgba(10, 14, 46, 0.4);
}
.story-riddle-title {
  font-family: var(--font-head, 'Cinzel', serif);
  font-weight: 700;
  color: var(--gold-bright, #ffe08a);
  margin-bottom: 0.4rem;
}
.story-riddle-text { line-height: 1.55; font-size: 1.02rem; }

/* ---- secret chapter button --------------------------------------------- */
.story-secret-btn {
  margin-top: 1rem;
  animation: story-secret-shimmer 2.6s ease-in-out infinite;
}
@keyframes story-secret-shimmer {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 224, 138, 0.0); }
  50% { box-shadow: 0 0 18px 2px rgba(255, 224, 138, 0.45); }
}

/* Reduce-motion: no shimmer, no transitions. The button stays clearly visible. */
@media (prefers-reduced-motion: reduce) {
  .story-secret-btn { animation: none; box-shadow: 0 0 12px 1px rgba(255, 224, 138, 0.4); }
}
body.a11y-calm .story-secret-btn { animation: none; }