/* Story mode: visual novel, mage selection, debrief and mage drops. */

/* ------------------------------------------------------------------ *
 * Shared backdrop — named gradients stand in until real art arrives
 * ------------------------------------------------------------------ */

.novel-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg-0);
  transition: background var(--t-slow) var(--ease-out);
}
.novel-bg[data-bg="dusk-fields"] {
  background:
    radial-gradient(120% 80% at 50% 105%, #4a2c1c 0%, transparent 60%),
    radial-gradient(90% 60% at 70% 0%, #2b2340 0%, transparent 65%),
    linear-gradient(180deg, #171326 0%, #0d0a12 70%);
}
.novel-bg[data-bg="cold-dawn"] {
  background:
    radial-gradient(120% 70% at 30% 100%, #1c3348 0%, transparent 62%),
    radial-gradient(80% 60% at 75% 5%, #3a3355 0%, transparent 60%),
    linear-gradient(180deg, #121826 0%, #0a0c12 72%);
}
.novel-bg[data-bg="ash-road"] {
  background:
    radial-gradient(120% 80% at 50% 105%, #52251c 0%, transparent 58%),
    linear-gradient(180deg, #1c1519 0%, #0b0809 74%);
}

.novel-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.72) 100%);
}

/* ------------------------------------------------------------------ *
 * Visual novel
 * ------------------------------------------------------------------ */

.novel {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  cursor: pointer;
  user-select: none;
}

.novel-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
}
.novel-chapter {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--brass-2);
}
.novel-title {
  font-size: 26px;
  color: var(--ink-0);
  text-shadow: 0 2px 20px rgba(0,0,0,.8);
  margin-top: 2px;
}

.novel-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: end center;
  min-height: 0;
  padding-bottom: var(--sp-4);
}

.novel-portrait {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.novel-portrait.visible { opacity: 1; transform: none; }

.novel-sigil {
  width: clamp(120px, 18vh, 200px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: clamp(48px, 8vh, 84px);
  font-weight: 700;
  font-family: var(--font-card);
  color: var(--pc);
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pc) 22%, transparent), transparent 70%),
    rgba(8,6,12,.7);
  border: 2px solid var(--pc);
  box-shadow: 0 0 60px color-mix(in srgb, var(--pc) 30%, transparent);
}

.novel-box {
  position: relative;
  z-index: 3;
  margin: 0 auto var(--sp-5);
  width: min(860px, calc(100vw - 48px));
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(180deg, rgba(20,17,28,.94), rgba(10,8,14,.96));
  border: 1px solid var(--brass-3);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.novel-box.narration { border-color: var(--bg-3); }

.novel-speaker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.novel-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-1);
  min-height: 3.3em;
}
.novel-box.narration .novel-text { font-style: italic; color: var(--ink-2); }

.novel-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--sp-2);
  font-size: 11px;
  color: var(--ink-3);
}
.novel-next { animation: novel-pulse 1.6s var(--ease-in-out) infinite; }
@keyframes novel-pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* Mage selection now lives on its own page: mageselect.html + styles/mageselect.css */

/* ------------------------------------------------------------------ *
 * Debrief
 * ------------------------------------------------------------------ */

.debrief, .story-end {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  overflow-y: auto;
}

.debrief-card {
  position: relative;
  z-index: 3;
  width: min(720px, calc(100vw - 40px));
  padding: var(--sp-5);
  background: linear-gradient(180deg, rgba(22,19,30,.97), rgba(11,9,15,.98));
  border: 1px solid var(--brass-3);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  animation: admin-in var(--t-med) var(--ease-snap);
}

.debrief-verdict {
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .04em;
}
.debrief-verdict.win { color: var(--brass-0); }
.debrief-verdict.loss { color: var(--foe); }
.debrief-verdict.draw { color: var(--ink-2); }
.debrief-reason { text-align: center; color: var(--ink-2); font-size: 13px;
  margin-bottom: var(--sp-4); }

.debrief-score {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  margin-bottom: 4px;
}
.debrief-score .n { display: block; font-size: 34px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.debrief-score .l { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); text-align: center; }
.debrief-score .vs { color: var(--ink-3); }
.debrief-score > div:first-child .n { color: var(--brass-0); }

.debrief-card h3 { margin: var(--sp-4) 0 var(--sp-2); color: var(--brass-1); }
.debrief-card h3.debrief-fallen { color: var(--bad); }

.debrief-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--sp-2);
}
.debrief-stat {
  background: var(--bg-inset);
  border: 1px solid var(--bg-3);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  text-align: center;
}
.db-stat {
  background: var(--bg-inset);
  border: 1px solid var(--bg-3);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-1);
  text-align: center;
}
.db-stat-n { display: block; font-size: 22px; font-weight: 700; color: var(--ink-0);
  font-variant-numeric: tabular-nums; }
.db-stat-l { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); }
.db-stat-note { display: block; font-size: 9px; color: var(--ink-3); margin-top: 2px; }

.debrief-mages { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.debrief-mage { width: 116px; }
.debrief-mage svg { width: 100%; height: auto; border-radius: var(--r-sm);
  filter: grayscale(.75) brightness(.6); }
.debrief-mage-note { display: block; font-size: 10px; color: var(--ink-3); text-align: center;
  margin-top: 4px; }
.debrief-clean { color: var(--ok); text-align: center; margin-top: var(--sp-4); }

/* The reward screen that follows a victory lives in styles/reinforcements.css. */