/* ============================================================
   CHRONOFALL APP — STORY-KAMPAGNE (Präsentation)
   Ergänzt css/app.css. Tokens werden von dort geerbt.
   ============================================================ */

/* 5. Nav-Reiter: Grid auf fünf Spalten umstellen. */
.botnav--5 { grid-template-columns: repeat(5, 1fr); }

/* ============ Kampagnen-Übersicht ============ */
.camp-progress {
  display: flex; flex-direction: column; gap: .2rem; align-items: flex-start;
  padding: 1rem 1.1rem; margin-bottom: .6rem;
  border: 1px solid var(--purple); background: linear-gradient(135deg, rgba(168,85,247,.16), rgba(13,7,22,.7));
  box-shadow: 0 0 26px rgba(168,85,247,.25);
}
.camp-progress__count {
  font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: #fff;
  text-shadow: 0 0 16px rgba(168,85,247,.6); font-variant-numeric: tabular-nums;
}
.camp-progress__label { font-size: .66rem; letter-spacing: .18em; color: var(--purple-soft); }
.camp-progress__seen { font-size: .76rem; color: var(--text-dim); margin-bottom: 1.2rem; line-height: 1.6; }

.camp-continue {
  display: grid; gap: .2rem; padding: .9rem 1.1rem; margin-bottom: 1.2rem;
  border: 1px solid rgba(240,171,252,.5); background: rgba(168,85,247,.08);
}
.camp-continue:active { border-color: var(--pink); }
.camp-continue__kicker { font-size: .6rem; letter-spacing: .25em; color: var(--pink); }
.camp-continue__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; }

.camp-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.6rem; }
.camp-chapter {
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem;
  border: 1px solid rgba(168,85,247,.3); background: rgba(168,85,247,.05);
}
.camp-chapter.is-done { border-color: rgba(110,231,168,.4); }
.camp-chapter.is-locked { opacity: .55; }
.camp-chapter__ic {
  font-size: 1.1rem; color: var(--purple-soft); flex: 0 0 auto; width: 1.4rem; text-align: center;
}
.camp-chapter.is-done .camp-chapter__ic { color: #6ee7a8; }
.camp-chapter__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.camp-chapter__title { font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: #fff; }
.camp-chapter__status { font-size: .62rem; letter-spacing: .12em; color: var(--text-dim); }

.camp-reset-note { font-size: .72rem; color: var(--text-dim); line-height: 1.6; margin-bottom: .7rem; }
.camp-reset { width: 100%; }

/* ============ Transmissions-Panel (aus story.js adaptiert) ============ */
.story-panel {
  position: relative; border: 1px solid rgba(168,85,247,.35);
  background: linear-gradient(160deg, rgba(13,7,22,.92), rgba(7,4,13,.96));
  box-shadow: 0 0 34px rgba(168,85,247,.18), inset 0 0 24px rgba(168,85,247,.05);
  padding: 0 0 1rem; margin-top: .4rem; outline: none;
}
.story-panel__bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem; border-bottom: 1px solid rgba(168,85,247,.22);
  background: rgba(168,85,247,.06);
}
.story-panel__dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(240,171,252,.5); }
.story-panel__label {
  margin-left: auto; font-family: var(--font-display); font-weight: 500;
  font-size: .58rem; letter-spacing: .22em; color: var(--purple-soft);
}
.story-text {
  padding: 1.2rem 1.1rem .4rem; min-height: 9.5em;
  font-size: .98rem; line-height: 1.7; color: var(--text);
}
.story-text__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.story-out { padding: .4rem 1.1rem 0; }
.story-out:focus { outline: 1px dashed rgba(240,171,252,.5); outline-offset: 4px; }

.story-choices { display: flex; flex-direction: column; gap: .6rem; }
.story-choice {
  display: block; width: 100%; text-align: left;
  font-family: var(--font-body); font-size: .9rem; line-height: 1.5; color: var(--text);
  padding: .8rem .9rem; border: 1px solid rgba(168,85,247,.4); background: rgba(168,85,247,.06);
  transition: background .2s, border-color .2s; letter-spacing: 0;
}
.story-choice:hover { background: rgba(168,85,247,.13); }
.story-choice:active { border-color: var(--pink); }
.story-choice:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
a.story-choice { text-align: center; font-family: var(--font-display); font-size: .76rem; letter-spacing: .16em; margin-top: .6rem; }
.story-choice__label { display: block; }

.story-hint {
  text-align: center; font-size: .56rem; letter-spacing: .16em; color: var(--text-dim);
  padding: .8rem 1rem 0;
}
.story-mission { margin: .6rem 1rem 0; }

/* ============ Kodex-Drop & Ende-Karte ============ */
.story-codex {
  margin-top: .4rem; padding: 1rem 1.1rem;
  border: 1px solid rgba(168,85,247,.35); background: rgba(168,85,247,.07);
}
.story-codex__kicker { font-size: .6rem; letter-spacing: .28em; color: var(--pink); margin-bottom: .3rem; }
.story-codex__title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: #fff; }
.story-codex__text { font-size: .85rem; line-height: 1.65; color: var(--text-dim); margin-top: .5rem; }

.story-ending { display: flex; flex-direction: column; gap: .5rem; margin-top: .4rem; }
.story-ending__kicker { font-size: .62rem; letter-spacing: .25em; color: var(--purple-soft); }
.story-ending__epithet {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(1.3rem, 6vw, 1.9rem);
  color: var(--pink); text-shadow: 0 0 22px rgba(240,171,252,.6);
}
.story-ending__line { font-size: .82rem; letter-spacing: .08em; color: var(--text-dim); }
.story-ending__set {
  font-family: var(--font-display); font-size: .66rem; letter-spacing: .18em; color: var(--purple-soft);
  margin-top: .2rem;
}

/* ============ Patron-Gate ============ */
.patron-lock {
  display: flex; flex-direction: column; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.1rem; margin-bottom: 1.4rem;
  border: 1px dashed rgba(168,85,247,.4); background: rgba(168,85,247,.04);
}
.patron-lock__text { font-size: .85rem; line-height: 1.6; color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .story-panel { box-shadow: 0 0 18px rgba(168,85,247,.12); }
}

/* ============================================================
   LESBARKEIT / MINDESTGROESSEN-PASS (2026-06-18) — Story-Modul
   Gleiche Logik wie in app.css: Lese-/Bedientext >= 16px (1rem),
   Spiel-Labels im Label-Tier .8rem (12.8px). Nur font-size.
   ============================================================ */

/* --- Lese-/Bedientext -> 16px --- */
.camp-progress__seen,
.camp-chapter__title,
.camp-reset-note,
.story-text,
.story-choice,
a.story-choice,
.story-codex__title,
.story-codex__text,
.story-ending__line,
.patron-lock__text {
  font-size: 1rem;
}

/* --- Story-Labels / Eyebrows -> Label-Tier .8rem (12.8px) --- */
.camp-progress__label,
.camp-continue__kicker,
.camp-chapter__status,
.story-panel__label,
.story-hint,
.story-codex__kicker,
.story-ending__kicker,
.story-ending__set {
  font-size: .8rem;
}