/* Drakkenheim — corrupted-city theme, self-contained (independent from /luatorta) */

:root {
  color-scheme: dark;

  --void: #050608;
  --ink: #0a0c11;
  --panel: #12151d;
  --panel-2: #171b25;
  --stone: #2a2e38;
  --stone-light: #4a505f;

  --paper: #dcd9ea;
  --paper-dim: #9a96ac;
  --paper-faint: #6b6779;

  --crystal: #9b7bff;
  --crystal-soft: rgba(155, 123, 255, 0.35);
  --toxic: #57e8b8;
  --toxic-soft: rgba(87, 232, 184, 0.28);
  --danger: #c8433f;

  --font-display: "Pirata One", "Cinzel", Georgia, serif;
  --font-body: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-mono: "Share Tech Mono", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--void);
}

body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.app {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--void);
}

.is-hidden {
  display: none !important;
}

button {
  font-family: inherit;
  cursor: pointer;
}

::selection {
  background: var(--crystal-soft);
  color: #fff;
}

/* -------------------------------------------------- */
/* AMBIENT MOTES — a shared drifting-spore atmosphere   */
/* layer reused across menus/exploration screens; text- */
/* dense reading views (codex, mission, class detail)   */
/* skip it on purpose to keep long passages legible.    */
/* -------------------------------------------------- */

.ambient-motes {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
  background-repeat: repeat;
  background-image:
    radial-gradient(circle, rgba(87, 232, 184, 0.55) 0 1.6px, transparent 2.6px),
    radial-gradient(circle, rgba(155, 123, 255, 0.48) 0 1.3px, transparent 2.3px),
    radial-gradient(circle, rgba(203, 178, 122, 0.34) 0 1.1px, transparent 2px);
  background-size: 240px 280px, 320px 360px, 260px 300px;
  background-position: 8% 12%, 68% 58%, 38% 82%;
  animation: motes-drift 110s linear infinite;
}

.ambient-motes--fixed {
  position: fixed;
}

@keyframes motes-drift {
  from {
    background-position: 8% 12%, 68% 58%, 38% 82%;
  }
  to {
    background-position: 8% -988%, 68% -1042%, 38% -1018%;
  }
}

@media (max-width: 640px) {
  .ambient-motes {
    opacity: 0.32;
  }
}

/* Shared entrance animation, retriggered by JS (remove + reflow + add)
   each time a view's main content is (re)built, so switching between
   menus/documents/cards feels like a transition instead of an instant
   pop. Kept short and subtle — this plays constantly as people browse. */
@keyframes enter-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.enter-fade {
  animation: enter-fade 0.45s ease;
}

/* -------------------------------------------------- */
/* GATE (access-code screen)                           */
/* -------------------------------------------------- */

.gate {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: clamp(20px, 6vw, 64px);
}

.gate__backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(5, 6, 8, 0.55), rgba(5, 6, 8, 0.92) 70%, var(--void) 100%),
    url("assets/chap2/1.png");
  background-size: cover;
  background-position: center 30%;
  filter: saturate(0.55) contrast(1.05) brightness(0.75);
  transform: scale(1.06);
}

.gate__vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(155, 123, 255, 0.16), transparent 60%),
    radial-gradient(140% 100% at 50% 100%, rgba(0, 0, 0, 0.75), transparent 55%),
    repeating-linear-gradient(135deg, rgba(87, 232, 184, 0.035) 0 2px, transparent 2px 22px);
}

.gate__scanlines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0px,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.35;
}

.gate__card {
  position: relative;
  width: min(460px, 100%);
  text-align: center;
  padding: clamp(28px, 5vw, 44px) clamp(22px, 5vw, 38px);
  background: linear-gradient(180deg, rgba(18, 21, 29, 0.82), rgba(10, 12, 17, 0.88));
  border: 1px solid rgba(155, 123, 255, 0.22);
  border-radius: 4px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 0 60px rgba(87, 232, 184, 0.06);
  backdrop-filter: blur(2px);
}

.gate__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  color: var(--toxic);
  text-shadow: 0 0 12px rgba(87, 232, 184, 0.55);
}

.gate__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  letter-spacing: 0.06em;
  color: var(--paper);
  text-shadow:
    0 0 18px rgba(155, 123, 255, 0.55),
    0 6px 30px rgba(0, 0, 0, 0.8);
}

.gate__tagline {
  margin: 0 0 28px;
  font-style: italic;
  color: var(--paper-dim);
  font-size: 1rem;
}

.access-form__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--paper-faint);
  text-transform: uppercase;
  text-align: left;
}

.access-form__row {
  display: flex;
  gap: 10px;
}

.access-form__input {
  flex: 1;
  min-width: 0;
  padding: 13px 14px;
  background: rgba(5, 6, 8, 0.65);
  border: 1px solid var(--stone);
  border-radius: 3px;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.access-form__input::placeholder {
  color: var(--paper-faint);
}

.access-form__input:focus {
  border-color: var(--crystal);
  box-shadow: 0 0 0 3px var(--crystal-soft);
}

.access-form__input.is-invalid {
  border-color: var(--danger);
  animation: shake 0.32s ease;
}

.access-form__submit {
  padding: 13px 20px;
  background: linear-gradient(180deg, var(--crystal), #6c46e0);
  border: none;
  border-radius: 3px;
  color: #0a0c11;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.access-form__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(155, 123, 255, 0.35);
}

.access-form__submit:active {
  transform: translateY(0);
}

.access-feedback {
  min-height: 1.2em;
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--danger);
  text-align: left;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Discovered codes widget (shared look on the gate) */

.discovered-codes {
  position: absolute;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.discovered-codes__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(10, 12, 17, 0.75);
  border: 1px solid rgba(155, 123, 255, 0.3);
  border-radius: 999px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.discovered-codes__toggle:hover,
.discovered-codes__toggle:focus-visible {
  border-color: var(--crystal);
  color: var(--paper);
  transform: translateY(-1px);
}

.discovered-codes__toggle:focus-visible {
  outline: 2px solid var(--crystal);
  outline-offset: 2px;
}

.discovered-codes__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--toxic);
  color: #06110d;
  border-radius: 999px;
  font-weight: 700;
}

.discovered-codes__panel {
  width: min(280px, 70vw);
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  background: rgba(10, 12, 17, 0.92);
  border: 1px solid rgba(155, 123, 255, 0.25);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.25s ease;
}

.discovered-codes.is-open .discovered-codes__panel {
  max-height: 320px;
  padding: 16px 18px;
  opacity: 1;
  transform: translateY(0);
}

.discovered-codes__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--toxic);
}

.discovered-codes__panel h2 {
  margin: 6px 0 2px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
}

.discovered-codes__panel p {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--paper-faint);
}

.discovered-codes__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.discovered-codes__index {
  display: inline-block;
  width: 1.4em;
  color: var(--paper-faint);
  font-family: var(--font-mono);
}

.discovered-codes__value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* -------------------------------------------------- */
/* STAGE (scene player: story beats + dossier panels)  */
/* -------------------------------------------------- */

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--void);
  overflow: hidden;
  isolation: isolate;
}

.scene-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.scene-media.is-active {
  opacity: 1;
}

.stage.is-black .scene-media {
  opacity: 0 !important;
}

/* Backdrop used behind "framed" (contain-mode) images: a blurred, darkened
   blow-up of the same picture so portrait/square art never has to be
   cropped by a harsh full-bleed object-fit: cover. */
.scene-image-backdrop {
  position: absolute;
  inset: -6%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: blur(50px) saturate(1.15) brightness(0.5);
  transform: scale(1.1);
  transition: opacity 0.6s ease;
}

.scene-image-backdrop.is-active {
  opacity: 1;
}

#scene-image.is-framed {
  inset: auto;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: min(72vw, 520px);
  max-height: min(66vh, 640px);
  transform: translate(-50%, -50%);
  object-fit: contain;
  background: rgba(5, 6, 8, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 46px -14px var(--frame-glow, var(--crystal));
}

@keyframes ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

#scene-image.is-active.is-zooming:not(.is-framed) {
  animation: ken-burns 9s ease-out forwards;
}

/* Chapter 4 — a drifting, sickly-sweet fog crawling over every scene. */
.stage.is-fog::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 18% 28%, rgba(210, 255, 240, 0.13), transparent 62%),
    radial-gradient(50% 42% at 82% 74%, rgba(180, 150, 255, 0.11), transparent 65%),
    radial-gradient(70% 50% at 50% 105%, rgba(255, 255, 255, 0.06), transparent 60%);
  filter: blur(9px);
  mix-blend-mode: screen;
  animation: fog-drift 28s ease-in-out infinite alternate;
}

@keyframes fog-drift {
  0% { transform: translate3d(-2%, 0, 0) scale(1); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.08); }
}

.stage__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 28%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.82) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.stage__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: repeating-radial-gradient(circle at 20% 30%, #fff 0, transparent 1px 3px);
}

.stage.is-frozen .stage__vignette {
  animation: freeze-pulse 2.4s ease-in-out infinite;
}

@keyframes freeze-pulse {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(155, 123, 255, 0.06); }
}

.stage__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: clamp(24px, 8vh, 90px) clamp(20px, 6vw, 90px) clamp(48px, 9vh, 96px);
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.stage__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  color: var(--toxic);
  text-shadow: 0 0 14px rgba(87, 232, 184, 0.5);
}

.stage__eyebrow:empty {
  display: none;
}

.stage__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6.4vw, 4rem);
  letter-spacing: 0.04em;
  color: var(--paper);
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.85), 0 0 22px rgba(155, 123, 255, 0.35);
}

.stage__title:empty {
  display: none;
}

.stage__text {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.55;
  color: var(--paper);
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.85);
  min-height: 1.6em;
}

/* Every character is in the DOM from frame one (see prepareTypewriterCharacters
   in script.js) — visibility:hidden still reserves its layout space, so the
   paragraph's final wrapped height (and the box around it) never grows or
   shifts as characters are revealed. */
.stage__text-char {
  visibility: hidden;
}

.stage__text-char.is-visible {
  visibility: visible;
}

.stage__text .caret {
  display: inline-block;
  width: 0.5ch;
  margin-left: 2px;
  border-right: 2px solid var(--toxic);
  animation: caret-blink 0.9s steps(1) infinite;
}

@keyframes caret-blink {
  50% { border-color: transparent; }
}

.stage__hint {
  display: block;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper-faint);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.stage__hint.is-visible {
  opacity: 0.85;
  animation: hint-pulse 1.8s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

.stage__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  gap: 4px;
  padding: 14px clamp(14px, 4vw, 32px) 0;
}

.stage__progress span {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
}

.stage__progress span::after {
  content: "";
  display: block;
  height: 100%;
  width: 0%;
  background: var(--toxic);
  box-shadow: 0 0 8px rgba(87, 232, 184, 0.8);
}

.stage__progress span.is-done::after {
  width: 100%;
}

.stage__gallery {
  position: absolute;
  left: clamp(14px, 3vw, 32px);
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-50%);
}

.stage__gallery-slot {
  display: block;
  width: clamp(56px, 6.5vw, 84px);
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 6, 8, 0.5);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
  opacity: 0;
  animation: gallery-slot-in 0.5s ease forwards;
}

.stage__gallery-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.75) brightness(0.82);
}

@keyframes gallery-slot-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 0.85; transform: translateX(0); }
}

@media (max-width: 720px) {
  .stage__gallery {
    display: none;
  }
}

.stage__progress span.is-current::after {
  width: 100%;
  transition: width 0.3s ease;
}

.chrome-controls {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.volume-control,
.exit-chapter {
  position: absolute;
  top: clamp(14px, 3vw, 26px);
  z-index: 5;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(10, 12, 17, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.volume-control {
  right: clamp(14px, 3vw, 26px);
}

.exit-chapter {
  left: clamp(14px, 3vw, 26px);
  font-size: 0.9rem;
  line-height: 1;
  padding: 8px 11px;
}

.volume-control:hover,
.exit-chapter:hover,
.volume-control:focus-visible,
.exit-chapter:focus-visible {
  border-color: var(--crystal);
  color: var(--paper);
}

.volume-control:focus-visible,
.exit-chapter:focus-visible {
  outline: 2px solid var(--crystal);
  outline-offset: 2px;
}

.scene-back {
  position: absolute;
  left: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 5;
  pointer-events: auto;
  padding: 8px 14px;
  background: rgba(10, 12, 17, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.scene-back:hover,
.scene-back:focus-visible {
  border-color: var(--crystal);
  color: var(--paper);
  outline: none;
}

.scene-back:focus-visible {
  outline: 2px solid var(--crystal);
  outline-offset: 2px;
}

/* Chapter 1's closing wordmark reveal, shown before the code screen. */
.chapter-logo {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(20, 14, 30, 0.55), rgba(4, 5, 7, 0.94));
}

.chapter-logo__image {
  max-width: min(78vw, 820px);
  max-height: 46vh;
  width: auto;
  height: auto;
  opacity: 0;
  transform: scale(0.82);
  filter: drop-shadow(0 0 40px rgba(155, 123, 255, 0.35));
}

.chapter-logo.is-revealing .chapter-logo__image {
  animation: chapter-logo-reveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes chapter-logo-reveal {
  0% { opacity: 0; transform: scale(0.82); filter: drop-shadow(0 0 0 rgba(155, 123, 255, 0)); }
  60% { opacity: 1; transform: scale(1.03); filter: drop-shadow(0 0 46px rgba(155, 123, 255, 0.55)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 30px rgba(155, 123, 255, 0.4)); }
}

.chapter-logo #chapter-logo-hint {
  margin-top: 0;
}

/* -------------------------------------------------- */
/* HUB (free-exploration chapters, e.g. the factions)  */
/* -------------------------------------------------- */

.hub {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  isolation: isolate;
  background: var(--void);
  scrollbar-color: var(--crystal) rgba(0, 0, 0, 0.28);
}

.hub__backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(155, 123, 255, 0.14), transparent 55%),
    radial-gradient(90% 60% at 15% 100%, rgba(87, 232, 184, 0.08), transparent 60%),
    var(--void);
}

.hub__vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 22px);
}

.hub__scroll {
  position: relative;
  width: 100%;
  min-height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 96px) clamp(18px, 5vw, 56px) clamp(48px, 8vh, 80px);
}

.hub__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(32px, 6vh, 56px);
}

.hub__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  color: var(--toxic);
  text-shadow: 0 0 14px rgba(87, 232, 184, 0.5);
}

.hub__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  color: var(--paper);
  text-shadow: 0 0 22px rgba(155, 123, 255, 0.3);
}

.hub__intro {
  margin: 0;
  color: var(--paper-dim);
  line-height: 1.6;
  font-size: 1.02rem;
}

.hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(14px, 2.4vw, 22px);
}

/* Desktop — the primary experience: all five factions stay in a single
   row, however wide the viewport gets. */
@media (min-width: 860px) {
  .hub__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.hub__card {
  --accent: var(--crystal);
  appearance: none;
  font: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(20px, 3vw, 28px) 16px 22px;
  background: linear-gradient(180deg, rgba(23, 27, 37, 0.75), rgba(10, 12, 17, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: inherit;
  text-align: center;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hub__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(120% 100% at 50% 0%, var(--accent), transparent 70%);
  transition: opacity 0.25s ease;
}

.hub__card:hover,
.hub__card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

.hub__card:hover::before,
.hub__card:focus-visible::before {
  opacity: 0.14;
}

.hub__card__emblem {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35), 0 0 28px -6px var(--accent);
}

.hub__card__emblem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.hub__card:hover .hub__card__emblem img,
.hub__card:focus-visible .hub__card__emblem img {
  transform: scale(1.1);
}

.hub__card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.25;
  color: var(--paper);
}

.hub__card__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.hub__card.is-explored .hub__card__status {
  color: var(--toxic);
}

.hub__card.is-explored .hub__card__emblem {
  border-color: var(--accent);
}

.hub__footer {
  margin-top: clamp(36px, 6vh, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.hub__progress {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--paper-faint);
}

.hub__complete {
  padding: 13px 26px;
  background: linear-gradient(180deg, var(--crystal), #6c46e0);
  border: none;
  border-radius: 3px;
  color: #0a0c11;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.hub__complete:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.hub__complete:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(155, 123, 255, 0.35);
}

/* -------------------------------------------------- */
/* FACTION DETAIL (overlay on top of the hub)          */
/* -------------------------------------------------- */

.detail {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(16px, 4vw, 48px);
}

.detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 7, 0.86);
  backdrop-filter: blur(3px);
}

.detail__topbar {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail__position {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--paper-faint);
}

.detail__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 26px);
}

.detail__card {
  --accent: var(--crystal);
  position: relative;
  width: min(880px, 100%);
  max-height: 78vh;
  overflow-y: auto;
  padding: clamp(20px, 3vw, 32px);
  background: linear-gradient(180deg, rgba(18, 21, 29, 0.96), rgba(9, 10, 14, 0.98));
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 60px -20px var(--accent);
  scrollbar-color: var(--accent) rgba(0, 0, 0, 0.28);
}

.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--paper-faint);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail__back:hover,
.detail__back:focus-visible {
  color: var(--paper);
  outline: none;
}

.detail__body {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  /* Stretch (not start) so the leader's portrait grows to match however
     tall the text column ends up being, instead of staying capped at a
     fixed 3:4 box while a long faction description leaves it looking
     short next to a much taller column of text. */
  align-items: stretch;
}

.detail__portrait-wrap {
  position: relative;
  min-height: 320px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.3);
}

.detail__portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: saturate(0.9) contrast(1.05);
}

.detail__portrait-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 5, 7, 0.85) 100%);
  pointer-events: none;
}

.detail__copy {
  min-width: 0;
}

.detail__symbol {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: clamp(56px, 8vw, 84px);
  height: clamp(56px, 8vw, 84px);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(7, 6, 10, 0.7);
  border: 2px solid var(--accent, var(--crystal));
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4), 0 0 26px -6px var(--accent, var(--crystal));
}

.detail__eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.detail__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: var(--paper);
}

.detail__leader {
  margin: 0 0 16px;
  font-style: italic;
  color: var(--paper-dim);
  font-size: 0.95rem;
}

.detail__leader:empty {
  display: none;
}

.detail__text {
  margin: 0;
  line-height: 1.65;
  color: var(--paper);
  font-size: 1.02rem;
}

@media (max-width: 720px) {
  .detail__body {
    grid-template-columns: 1fr;
  }

  .detail__portrait-wrap {
    max-width: 260px;
    min-height: 0;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
  }

  .detail__stage {
    gap: 6px;
  }

  .subclass-carousel__nav--prev,
  .subclass-carousel__nav--next {
    align-self: center;
  }
}

@media (max-width: 560px) {
  .detail__stage {
    flex-wrap: wrap;
  }

  .detail__card {
    order: 1;
    width: 100%;
  }
}

/* -------------------------------------------------- */
/* CODEX (long-form optional lore reader)              */
/* -------------------------------------------------- */

.codex {
  --gold: #cbb27a;
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  background: var(--void);
  overflow: hidden;
}

.codex__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.codex__progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--crystal), var(--gold));
  box-shadow: 0 0 10px rgba(203, 178, 122, 0.6);
}

.codex__nav-toggle {
  display: none;
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 41;
  padding: 9px 16px;
  background: rgba(10, 12, 17, 0.8);
  border: 1px solid rgba(203, 178, 122, 0.35);
  border-radius: 999px;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.codex__nav {
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: clamp(56px, 8vh, 84px) 20px 40px;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.9), rgba(9, 10, 14, 0.96));
  border-right: 1px solid rgba(203, 178, 122, 0.14);
  scrollbar-color: var(--gold) rgba(0, 0, 0, 0.28);
}

.codex__nav-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.codex__nav-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.codex__nav-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--paper);
}

.codex__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.codex__nav-list .codex__nav-divider {
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.codex__nav-list li:first-child .codex__nav-divider {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.codex__nav-link {
  display: block;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 2px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.codex__nav-link.is-level-2 {
  padding-left: 20px;
  font-size: 0.84rem;
}

.codex__nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--paper);
}

.codex__nav-link.is-active {
  background: rgba(203, 178, 122, 0.12);
  color: var(--gold);
}

.codex__scroll {
  position: relative;
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-color: var(--gold) rgba(0, 0, 0, 0.28);
}

.codex__article {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 88px) clamp(20px, 5vw, 32px) clamp(80px, 12vh, 140px);
}

.codex__cover {
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(203, 178, 122, 0.22);
  text-align: center;
}

.codex__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
}

.codex__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  color: var(--paper);
  text-shadow: 0 0 26px rgba(203, 178, 122, 0.25);
}

.codex__subtitle {
  margin: 0 0 28px;
  font-style: italic;
  color: var(--paper-dim);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 560px;
  margin-inline: auto;
}

.codex__cover-image {
  display: block;
  max-width: min(100%, 320px);
  margin: 0 auto 28px;
  border-radius: 4px;
  border: 1px solid rgba(203, 178, 122, 0.35);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}

.codex__optional-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto 24px;
  padding: 16px 20px;
  background: rgba(87, 232, 184, 0.06);
  border: 1px solid rgba(87, 232, 184, 0.28);
  border-radius: 6px;
}

.codex__optional-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--toxic);
}

.codex__optional-note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--paper-dim);
}

.codex__next-code {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 26px;
  background: rgba(155, 123, 255, 0.06);
  border: 1px dashed rgba(155, 123, 255, 0.4);
  border-radius: 6px;
}

.codex__next-code-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.codex__next-code-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  color: var(--crystal);
  text-shadow: 0 0 16px rgba(155, 123, 255, 0.4);
}

.codex__next-code-hint {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--paper-faint);
}

.codex__finish {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 56px 0 24px;
  padding-top: 40px;
  border-top: 1px solid rgba(203, 178, 122, 0.22);
  text-align: center;
}

.codex__finish-button {
  padding: 14px 30px;
  background: linear-gradient(180deg, var(--gold), #9c815a);
  border: none;
  border-radius: 3px;
  color: #16130c;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.84rem;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.codex__finish-button:hover,
.codex__finish-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(203, 178, 122, 0.35);
  outline: none;
}

.codex__finish-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.codex__body {
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.75;
}

.codex__loading {
  text-align: center;
  color: var(--paper-faint);
  font-style: italic;
}

.codex__body h1,
.codex__body h2,
.codex__body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--paper);
  scroll-margin-top: 24px;
}

.codex__body h1 {
  margin: 64px 0 20px;
  padding-top: 36px;
  border-top: 1px solid rgba(203, 178, 122, 0.22);
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  text-align: center;
}

.codex__body > h1:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.codex__body h2 {
  margin: 40px 0 14px;
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
  color: var(--gold);
}

.codex__body h3 {
  margin: 28px 0 10px;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--paper);
}

.codex__body p {
  margin: 0 0 18px;
}

.codex__body strong {
  color: var(--paper);
  font-weight: 600;
}

.codex__body hr {
  margin: 28px 0;
  border: none;
  border-top: 1px solid rgba(203, 178, 122, 0.22);
}

.codex__footnote {
  font-size: 0.86rem;
  color: var(--paper-faint);
  font-style: italic;
}

.codex__quote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--gold);
  font-style: italic;
  color: var(--paper-dim);
}

.codex__quote p {
  margin: 0 0 8px;
  font-size: 1.08rem;
}

.codex__quote cite {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--paper-faint);
}

.codex__figure {
  margin: 8px 0 24px;
  text-align: center;
}

.codex__figure img {
  max-width: min(100%, 380px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.codex__figure img:hover,
.codex__figure img:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--crystal);
  outline: none;
}

.codex__figure--lg img {
  max-width: min(100%, 460px);
}

.codex__figure figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

@media (min-width: 641px) {
  .codex__figure--float-right {
    float: right;
    margin: 4px 0 16px 28px;
  }

  .codex__figure--float-left {
    float: left;
    margin: 4px 28px 16px 0;
  }
}

.codex__map-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 24px);
  margin: 20px 0 32px;
  clear: both;
}

.codex__map-pair .codex__figure {
  flex: 1 1 240px;
  max-width: 340px;
  margin: 0;
}

.codex__map-pair .codex__figure img {
  width: 100%;
  max-width: 100%;
}

/* -------------------------------------------------- */
/* CODEX LIGHTBOX (click-to-zoom viewer for figures)   */
/* -------------------------------------------------- */

.codex-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(4, 5, 7, 0.92);
  backdrop-filter: blur(4px);
}

.codex-lightbox__frame {
  max-width: 92vw;
  max-height: 88vh;
  overflow: auto;
}

.codex-lightbox__image {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  cursor: zoom-in;
  transition: transform 0.25s ease;
}

.codex-lightbox__image.is-zoomed {
  max-width: none;
  max-height: none;
  width: auto;
  transform: scale(1.7);
  cursor: zoom-out;
}

.codex-lightbox__close {
  position: absolute;
  top: clamp(14px, 3vw, 26px);
  right: clamp(14px, 3vw, 26px);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(10, 12, 17, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--paper);
  font-size: 1rem;
}

.codex-lightbox__close:hover,
.codex-lightbox__close:focus-visible {
  border-color: var(--crystal);
  outline: none;
}

.codex-lightbox__close:focus-visible {
  outline: 2px solid var(--crystal);
  outline-offset: 2px;
}

.codex__timeline {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  border-left: 2px solid rgba(203, 178, 122, 0.3);
}

.codex__timeline li {
  position: relative;
  padding: 2px 0 20px 24px;
}

.codex__timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--void), 0 0 10px rgba(203, 178, 122, 0.6);
}

.codex__timeline-year {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.codex__timeline-text {
  margin: 0;
  font-size: 1.02rem;
}

.codex__top {
  position: absolute;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 20;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 17, 0.75);
  border: 1px solid rgba(203, 178, 122, 0.3);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.1rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.codex__top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.codex__top:hover {
  border-color: var(--gold);
}

@media (max-width: 900px) {
  .codex {
    grid-template-columns: 1fr;
  }

  .codex__nav-toggle {
    display: inline-flex;
  }

  .codex__nav {
    position: absolute;
    inset: 0 20% 0 0;
    z-index: 39;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 30px 0 60px rgba(0, 0, 0, 0.5);
  }

  .codex.is-nav-open .codex__nav {
    transform: translateX(0);
  }

  .codex__scroll {
    padding-top: 56px;
  }
}

@media (max-width: 640px) {
  .codex__figure--float-right,
  .codex__figure--float-left {
    float: none;
    margin: 4px 0 16px;
  }
}

/* -------------------------------------------------- */
/* MISSION CAROUSEL (rules intro + one-at-a-time reader) */
/* -------------------------------------------------- */

.mission {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  isolation: isolate;
}

.mission__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.62) contrast(1.08);
}

.mission__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(180deg, rgba(5, 6, 8, 0.75) 0%, rgba(5, 6, 8, 0.35) 22%, rgba(5, 6, 8, 0.4) 70%, rgba(5, 6, 8, 0.88) 100%);
  pointer-events: none;
}

.mission__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: repeating-radial-gradient(circle at 20% 30%, #fff 0, transparent 1px 3px);
}

.mission__intro {
  position: relative;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(28px, 7vw, 110px);
  text-align: center;
  cursor: pointer;
}

.mission__intro-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  color: var(--toxic);
  text-shadow: 0 0 14px rgba(87, 232, 184, 0.5);
}

.mission__intro-title {
  margin: 0 0 clamp(20px, 4vh, 36px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3rem);
  color: var(--paper);
  text-shadow: 0 0 22px rgba(155, 123, 255, 0.35);
}

.mission__intro-text {
  width: min(88vw, 900px);
  color: var(--paper);
  text-wrap: balance;
}

.mission__intro-text p {
  margin: 0 0 1.1em;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  line-height: 1.55;
  text-shadow: 0 3px 18px #000, 0 0 42px rgba(0, 0, 0, 0.9);
}

.mission__intro-text p:last-child {
  margin-bottom: 0;
}

.mission__intro-text strong {
  color: var(--crystal);
  font-weight: 600;
}

.mission__intro-text ul {
  margin: 0 0 1.1em;
  padding: 0;
  list-style: none;
  text-align: left;
}

.mission__intro-text li {
  position: relative;
  margin: 0 0 0.6em;
  padding-left: 1.3em;
  font-size: clamp(1rem, 2.1vw, 1.3rem);
  line-height: 1.5;
  text-shadow: 0 3px 18px #000, 0 0 42px rgba(0, 0, 0, 0.9);
}

.mission__intro-text li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--crystal);
}

.mission__intro-text li:last-child {
  margin-bottom: 0;
}

.mission__intro-hint {
  margin-top: clamp(28px, 6vh, 60px);
  color: rgba(220, 217, 234, 0.6);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.mission__carousel {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 640px) auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 32px);
  width: 100%;
  height: 100%;
  padding: clamp(20px, 3.4vw, 56px);
}

.mission__nav {
  position: relative;
  grid-row: 1;
  width: clamp(44px, 4.5vw, 64px);
  aspect-ratio: 1;
  border: 1px solid rgba(155, 123, 255, 0.5);
  border-radius: 50%;
  background: rgba(7, 6, 10, 0.72);
  color: var(--crystal);
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 0.8;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.mission__nav--prev {
  grid-column: 1;
}

.mission__nav--next {
  grid-column: 3;
}

.mission__nav:hover,
.mission__nav:focus-visible {
  border-color: var(--crystal);
  outline: none;
  background: rgba(35, 24, 58, 0.88);
  transform: scale(1.06);
}

.mission__nav:disabled {
  cursor: wait;
  opacity: 0.35;
  transform: none;
}

.mission__card {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 100%;
  padding: clamp(24px, 3.6vw, 46px);
  overflow: hidden;
  border: 1px solid rgba(155, 123, 255, 0.32);
  border-radius: 4px;
  background: linear-gradient(150deg, rgba(87, 232, 184, 0.05), transparent 44%), rgba(8, 8, 12, 0.82);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72), inset 0 0 46px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}

.mission__position {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: rgba(155, 123, 255, 0.6);
}

.mission__name {
  margin: 0 0 clamp(16px, 2.6vh, 26px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  color: var(--paper);
  text-align: center;
  text-shadow: 0 3px 18px #000;
}

.mission__content {
  min-height: 0;
  padding-right: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--crystal) rgba(0, 0, 0, 0.28);
}

.mission__text {
  margin: 0;
  color: var(--paper-dim);
  font-size: clamp(0.98rem, 1.5vw, 1.14rem);
  line-height: 1.7;
  text-align: center;
}

.mission__footer {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.mission__progress {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--paper-faint);
}

.mission__complete {
  padding: 12px 26px;
  border: none;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--toxic), #2fa887);
  color: #06110c;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.mission__complete:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  background: linear-gradient(180deg, var(--stone-light), var(--stone));
  color: var(--paper-faint);
}

.mission__complete:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(87, 232, 184, 0.35);
}

.mission__status {
  margin: 0;
  min-height: 1.2em;
  color: rgba(220, 217, 234, 0.7);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

@media (max-width: 760px) {
  .mission__carousel {
    grid-template-columns: auto 1fr auto;
    padding: 16px;
    gap: 8px;
  }

  .mission__card {
    padding: 20px 18px;
  }

  .mission__nav {
    width: 40px;
  }
}

/* -------------------------------------------------- */
/* SPELLS INTRO (reuses .mission, but the background video should be barely
   visible — a much darker filter plus an extra scrim layer on top of the
   usual .mission__scrim — and adds a skip-to-classes button) */
/* -------------------------------------------------- */

.spells-intro #spells-intro-video {
  filter: saturate(0.55) brightness(0.26) contrast(1.05);
}

.spells-intro__scrim {
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0.7) 35%, rgba(0, 0, 0, 0.94) 100%),
    linear-gradient(180deg, rgba(3, 4, 5, 0.92) 0%, rgba(3, 4, 5, 0.78) 25%, rgba(3, 4, 5, 0.82) 70%, rgba(3, 4, 5, 0.96) 100%);
}

.spells-intro__skip {
  position: absolute;
  top: clamp(14px, 2.4vw, 26px);
  right: clamp(14px, 2.4vw, 26px);
  z-index: 4;
  padding: 9px 18px;
  background: rgba(10, 12, 17, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.spells-intro__skip:hover,
.spells-intro__skip:focus-visible {
  border-color: var(--crystal);
  color: var(--paper);
}

/* -------------------------------------------------- */
/* TOME MENU (reference chapters, e.g. character creation) */
/* -------------------------------------------------- */

.tome {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  isolation: isolate;
  background: var(--void);
  scrollbar-color: var(--toxic) rgba(0, 0, 0, 0.28);
}

.tome__backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(155, 123, 255, 0.14), transparent 55%),
    radial-gradient(90% 60% at 85% 100%, rgba(87, 232, 184, 0.08), transparent 60%),
    var(--void);
}

.tome__vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 22px);
}

.tome__scroll {
  position: relative;
  width: 100%;
  min-height: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 96px) clamp(18px, 5vw, 48px) clamp(48px, 8vh, 80px);
}

.tome__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(32px, 6vh, 48px);
}

.tome__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  color: var(--toxic);
  text-shadow: 0 0 14px rgba(87, 232, 184, 0.5);
}

.tome__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  color: var(--paper);
  text-shadow: 0 0 22px rgba(155, 123, 255, 0.3);
}

.tome__intro {
  max-width: 640px;
  margin: 0 auto clamp(28px, 5vh, 44px);
  color: var(--paper-dim);
  line-height: 1.6;
  font-size: 1.02rem;
  text-align: center;
}

.tome__manifesto-title {
  max-width: 820px;
  margin: 0 auto 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: var(--toxic);
  text-shadow: 0 0 14px rgba(87, 232, 184, 0.4);
}

.tome__manifesto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto clamp(40px, 7vh, 64px);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3.4vw, 34px);
  border: 1px solid rgba(155, 123, 255, 0.22);
  border-radius: 4px;
  background: linear-gradient(150deg, rgba(155, 123, 255, 0.06), transparent 50%), rgba(10, 12, 17, 0.6);
}

.tome__creed-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tome__creed-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.tome__creed-mark {
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--toxic);
  text-shadow: 0 0 12px rgba(87, 232, 184, 0.55);
}

.tome__creed-text p {
  margin: 0;
  color: var(--paper-dim);
  font-size: 0.98rem;
  line-height: 1.65;
}

.tome__creed-text strong {
  color: var(--paper);
  font-weight: 600;
}

.tome__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2.8vw, 26px);
}

.tome__card {
  appearance: none;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.tome__card:hover:not(:disabled),
.tome__card:focus-visible:not(:disabled) {
  transform: translateY(-3px);
}

.tome__card:disabled {
  cursor: default;
}

.tome__card__artwork {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tome__card:hover:not(:disabled) .tome__card__artwork,
.tome__card:focus-visible:not(:disabled) .tome__card__artwork {
  border-color: var(--crystal);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6), 0 0 30px -8px var(--crystal);
}

.tome__card__artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tome__card__artwork img.is-focal-top {
  object-position: top;
}

.tome__card:hover:not(:disabled) .tome__card__artwork img,
.tome__card:focus-visible:not(:disabled) .tome__card__artwork img {
  transform: scale(1.08);
}

.tome__card:disabled .tome__card__artwork img {
  filter: saturate(0.55) brightness(0.7);
}

.tome__card__ribbon {
  position: absolute;
  top: 10px;
  right: -30px;
  padding: 4px 34px;
  background: var(--danger);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(35deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.tome__card__description {
  margin: 0;
  color: var(--paper-faint);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Used where the description slot doubles as the card's short name/title
   (class-menu entries, subclass-classes) rather than a longer sentence. */
.tome__card__description--label {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--paper);
}

/* Icon variant: the class-icon files (assets/chap6/icones_classes) are small
   plain icon graphics, not full-bleed portraits, so they get `contain` +
   a padded background instead of `.tome__card__artwork`'s default `cover`.
   Used by both the subclasses class-picker and the spells class-picker.
   The padding is generous on purpose — these icons read as oversized at
   the old, tighter padding once blown up to the same card size as the
   full-bleed artwork cards. */
.tome__card__artwork--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 7vw, 46px);
  background: radial-gradient(120% 120% at 50% 30%, rgba(155, 123, 255, 0.12), rgba(8, 8, 12, 0.9));
}

.tome__card__artwork--icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tome__card:hover:not(:disabled) .tome__card__artwork--icon img,
.tome__card:focus-visible:not(:disabled) .tome__card__artwork--icon img {
  transform: scale(1.06);
}

.tome__footer {
  margin-top: clamp(40px, 7vh, 60px);
  display: flex;
  justify-content: center;
}

.tome__complete {
  padding: 13px 26px;
  background: linear-gradient(180deg, var(--crystal), #6c46e0);
  border: none;
  border-radius: 3px;
  color: #0a0c11;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.tome__complete:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(155, 123, 255, 0.35);
}

/* -------------------------------------------------- */
/* SUBCLASSES (browsable overlay carousel)             */
/* -------------------------------------------------- */

.subclass-carousel {
  position: absolute;
  inset: 0;
  /* Now opened from #view-subclass-classes (z-index: 31), which is itself
     opened from .class-menu (z-index: 30) — this must stack above both,
     otherwise whichever menu stays visible underneath intercepts every
     click and scroll. */
  z-index: 32;
  display: flex;
  flex-direction: column;
}

.subclass-carousel__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(10, 12, 17, 0.94), rgba(4, 5, 7, 0.98)),
    var(--void);
  backdrop-filter: blur(3px);
}

.subclass-carousel__back {
  align-self: flex-start;
  margin: clamp(14px, 2.4vw, 26px) 0 0 clamp(14px, 2.4vw, 26px);
  padding: 9px 16px;
  background: rgba(10, 12, 17, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.subclass-carousel__back:hover,
.subclass-carousel__back:focus-visible {
  border-color: var(--crystal);
  color: var(--paper);
}

.subclass-carousel__stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(70px, 0.28fr) minmax(360px, 960px) minmax(70px, 0.28fr) auto;
  /* stretch (not center) so .subclass-card gets a real, bounded height to
     scroll within — otherwise it grows to fit all its content and both the
     internal scroll and the nav buttons (centered against that oversized
     row) end up outside the visible viewport on wide screens. */
  align-items: stretch;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 26px);
  padding: clamp(10px, 2.4vw, 32px);
}

.subclass-carousel__nav {
  align-self: center;
  position: relative;
  width: clamp(40px, 4.2vw, 60px);
  aspect-ratio: 1;
  border: 1px solid rgba(155, 123, 255, 0.5);
  border-radius: 50%;
  background: rgba(7, 6, 10, 0.72);
  color: var(--crystal);
  font-family: Georgia, serif;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 0.8;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.subclass-carousel__nav:hover,
.subclass-carousel__nav:focus-visible {
  border-color: var(--crystal);
  outline: none;
  background: rgba(35, 24, 58, 0.88);
  transform: scale(1.06);
}

.subclass-carousel__nav:disabled {
  cursor: wait;
  opacity: 0.35;
  transform: none;
}

.subclass-preview {
  align-self: center;
  display: grid;
  place-items: center;
  gap: 6px;
  min-width: 0;
  opacity: 0.5;
  filter: grayscale(0.3) brightness(0.8);
  text-align: center;
}

.subclass-preview img {
  width: 100%;
  max-width: 96px;
  max-height: 120px;
  object-fit: contain;
  border-radius: 4px;
}

.subclass-preview span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--paper-faint);
  font-size: 0.68rem;
  line-height: 1.3;
}

.subclass-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.15fr);
  gap: clamp(16px, 2.6vw, 28px);
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid rgba(155, 123, 255, 0.3);
  border-radius: 4px;
  background: linear-gradient(150deg, rgba(155, 123, 255, 0.06), transparent 45%), rgba(8, 8, 12, 0.85);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72), inset 0 0 46px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}

.subclass-card__portrait {
  position: relative;
  margin: 0;
  min-height: 0;
}

.subclass-card__portrait img {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.6));
  animation: portrait-idle-zoom 16s ease-in-out infinite;
}

@keyframes portrait-idle-zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

.subclass-card__position {
  position: absolute;
  bottom: 6px;
  right: 6px;
  padding: 2px 8px;
  background: rgba(5, 6, 8, 0.72);
  border-radius: 3px;
  color: rgba(155, 123, 255, 0.75);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
}

.subclass-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.subclass-card__header {
  flex: none;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(159, 130, 76, 0.2);
}

.subclass-card__class {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--toxic);
  text-shadow: 0 0 12px rgba(87, 232, 184, 0.5);
}

.subclass-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  color: var(--paper);
  line-height: 1.1;
  text-shadow: 0 3px 18px #000;
}

.subclass-card__scroll {
  flex: 1;
  min-height: 0;
  padding-right: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--crystal) rgba(0, 0, 0, 0.28);
}

.subclass-card__intro p {
  margin: 0 0 14px;
  color: #ded6c7;
  font-size: 0.98rem;
  line-height: 1.65;
}

.subclass-card__intro p:first-child {
  color: var(--paper);
  font-size: 1.05rem;
}

.subclass-section {
  padding: 16px 0;
  border-bottom: 1px solid rgba(159, 130, 76, 0.16);
}

.subclass-section:last-child {
  border-bottom: 0;
}

.subclass-section__heading {
  margin: 0 0 10px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.subclass-section__heading.is-level {
  color: var(--crystal);
  font-size: 0.76rem;
  text-shadow: 0 0 10px rgba(155, 123, 255, 0.4);
}

.subclass-section p {
  margin: 0 0 10px;
  color: #ded6c7;
  font-size: 0.94rem;
  line-height: 1.62;
}

.subclass-section__label {
  margin: 0 0 6px;
  color: var(--paper);
  font-weight: 600;
  font-size: 0.9rem;
}

.subclass-section__list {
  margin: 0 0 12px;
  padding-left: 20px;
  color: #ded6c7;
  font-size: 0.94rem;
  line-height: 1.6;
}

.subclass-section__list li {
  margin-bottom: 4px;
}

.subclass-carousel__status {
  margin: 0;
  padding-bottom: clamp(10px, 2vh, 20px);
  text-align: center;
  color: rgba(220, 217, 234, 0.72);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.subclass-carousel__status:empty {
  padding-bottom: 0;
}

.subclass-carousel__hint {
  margin: 0;
  padding-bottom: clamp(12px, 2.4vh, 22px);
  text-align: center;
  color: var(--paper-faint);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.subclass-carousel__hint kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  background: rgba(155, 123, 255, 0.14);
  border: 1px solid rgba(155, 123, 255, 0.35);
  border-radius: 4px;
  color: var(--paper-dim);
  font-family: inherit;
  font-size: 0.9em;
}

@media (max-width: 640px) {
  .subclass-carousel__hint {
    display: none;
  }
}

@media (max-width: 860px) {
  .subclass-carousel__stage {
    grid-template-columns: auto 1fr auto;
  }

  .subclass-preview {
    display: none;
  }

  .subclass-card {
    grid-template-columns: 1fr;
    max-height: 100%;
    overflow-y: auto;
  }

  .subclass-card__portrait img {
    max-height: 34vh;
  }

  .subclass-card__scroll {
    overflow-y: visible;
  }
}

/* -------------------------------------------------- */
/* CLASS MENU (hub opened from the "Classe e Subclasses" tome card) */
/* -------------------------------------------------- */

.class-menu {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding-bottom: clamp(40px, 8vh, 72px);
  scrollbar-color: var(--crystal) rgba(0, 0, 0, 0.28);
}

.class-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(10, 12, 17, 0.94), rgba(4, 5, 7, 0.98)),
    var(--void);
}

.class-menu__stage {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(80px, 14vh, 120px) clamp(18px, 5vw, 32px) 0;
  text-align: center;
}

.class-menu__grid {
  margin-top: clamp(28px, 5vh, 44px);
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------- */
/* SUBCLASS CLASSES (grid of classes, reuses .class-menu's overlay shell —
   wider than .class-menu__grid since it lists up to 13 classes) */
/* -------------------------------------------------- */

.subclass-classes {
  /* Opened from .class-menu (z-index: 30); .subclass-carousel (z-index:
     32) is opened from here in turn and must stack above this. */
  z-index: 31;
}

.subclass-classes .class-menu__stage {
  max-width: 920px;
}

.subclass-classes #subclassclasses-grid {
  margin-top: clamp(28px, 5vh, 44px);
}

.subclass-classes .subclass-carousel__status {
  margin-top: clamp(20px, 4vh, 32px);
}

/* -------------------------------------------------- */
/* CLASS DETAIL (Apotecário — reuses .codex for its nav/scroll/typography) */
/* -------------------------------------------------- */

.class-detail {
  position: absolute;
  inset: 0;
  /* Same reasoning as .subclass-carousel: opened from .class-menu
     (z-index: 30), must stack above it. */
  z-index: 31;
}

.codex__back {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 14px;
  background: rgba(10, 12, 17, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.codex__back:hover,
.codex__back:focus-visible {
  border-color: var(--crystal);
  color: var(--paper);
}

.class-detail__portrait {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto 20px;
  border-radius: 6px;
  border: 1px solid rgba(203, 178, 122, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.class-detail__intro {
  margin-top: 18px;
  text-align: left;
}

.class-detail__intro p {
  margin: 0 0 12px;
  color: #ded6c7;
  font-size: 0.98rem;
  line-height: 1.65;
}

.class-detail__body {
  margin-top: clamp(24px, 4vh, 40px);
}

.class-detail__table-scroll {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.class-detail__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  white-space: nowrap;
}

.class-detail__table th,
.class-detail__table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.class-detail__table thead th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--gold, var(--crystal));
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: normal;
}

.class-detail__table tbody td {
  color: #ded6c7;
}

.class-detail__table tbody td:first-child {
  color: var(--paper);
  font-weight: 600;
}

.class-detail__table tbody tr:last-child td {
  border-bottom: none;
}

.class-detail__theories {
  margin-top: 8px;
}

.class-detail__theory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.class-detail__theory {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.class-detail__theory-name {
  margin: 0 0 8px;
  color: var(--paper);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
}

.class-detail__theory-prereq {
  margin: 0 0 8px;
  color: var(--crystal);
  font-size: 0.74rem;
  font-style: italic;
}

.class-detail__theory p {
  margin: 0 0 8px;
  color: #ded6c7;
  font-size: 0.86rem;
  line-height: 1.55;
}

.class-detail__theory p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .class-menu__grid {
    grid-template-columns: 1fr;
    max-width: 260px;
  }

  .class-detail__theory-list {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------- */
/* SPELLS LIST (Magias Contaminadas / Magias Secretas for one class, reuses
   .class-menu's overlay shell like .subclass-classes does) */
/* -------------------------------------------------- */

.spells-list {
  /* Opened after closing .subclass-classes (spells class picker), so no
     other overlay stays visible underneath it — but .spell-detail is
     opened from here and stays over it, so this must still outrank the
     base .class-menu (30) enough to leave clean headroom above it. */
  z-index: 32;
}

.spells-list .class-menu__stage {
  max-width: 760px;
}

.spells-list__stage {
  text-align: left;
}

.spells-list__stage .tome__eyebrow,
.spells-list__stage .tome__title {
  text-align: center;
}

.spells-list__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3.6vw, 40px);
  margin-top: clamp(24px, 4.4vh, 40px);
  text-align: left;
}

.spells-list__heading {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.spells-list__heading--contaminated {
  color: var(--danger);
  text-shadow: 0 0 14px rgba(200, 67, 63, 0.4);
}

.spells-list__heading--secret {
  color: var(--toxic);
  text-shadow: 0 0 14px rgba(87, 232, 184, 0.4);
}

.spells-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spells-list__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: inherit;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.spells-list__item:hover,
.spells-list__item:focus-visible {
  border-color: var(--crystal);
  background: rgba(155, 123, 255, 0.08);
  transform: translateX(2px);
  outline: none;
}

.spells-list__item-level {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.spells-list__item-name {
  color: var(--paper);
  font-size: 0.94rem;
}

.spells-list__empty {
  margin: 4px 0 0;
  color: var(--paper-faint);
  font-size: 0.86rem;
  font-style: italic;
}

/* -------------------------------------------------- */
/* SPELL DETAIL (single spell, browsable via prev/next through the list it
   was opened from — reuses .subclass-carousel__nav/__back and .detail__position) */
/* -------------------------------------------------- */

.spell-detail {
  /* Opened from .spells-list (32) and stays visible over it while browsing
     with prev/next, same stacking reasoning as .subclass-carousel over
     .subclass-classes. */
  z-index: 33;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}

.spell-detail__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(10, 12, 17, 0.94), rgba(4, 5, 7, 0.98)),
    var(--void);
  backdrop-filter: blur(3px);
}

.spell-detail #spelldetail-back {
  align-self: flex-start;
  margin-bottom: clamp(10px, 2vh, 20px);
}

.spell-detail__stage {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 720px) auto;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 26px);
}

.spell-detail__card {
  --accent: var(--crystal);
  position: relative;
  min-width: 0;
  height: 100%;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 32px);
  background: linear-gradient(150deg, rgba(155, 123, 255, 0.06), transparent 45%), rgba(8, 8, 12, 0.85);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72), inset 0 0 46px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}

.spell-detail__header {
  flex: none;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(159, 130, 76, 0.2);
}

.spell-detail__tag {
  display: inline-block;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--toxic);
  text-shadow: 0 0 12px rgba(87, 232, 184, 0.5);
}

.spell-detail__tag.is-contaminated {
  color: var(--danger);
  text-shadow: 0 0 12px rgba(200, 67, 63, 0.45);
}

.spell-detail__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  color: var(--paper);
  line-height: 1.1;
  text-shadow: 0 3px 18px #000;
}

.spell-detail__scroll {
  flex: 1;
  min-height: 0;
  padding-right: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--accent) rgba(0, 0, 0, 0.28);
}

.spell-detail__body {
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
}

.spell-detail__body p {
  margin: 0 0 14px;
  color: #ded6c7;
}

.spell-detail__body p:first-child {
  color: var(--paper);
  font-size: 1.05rem;
}

.spell-detail__body strong {
  color: var(--paper);
  font-weight: 600;
}

.spell-detail__body em,
.spell-detail__subtitle {
  display: block;
  margin: 0 0 14px;
  color: var(--gold, var(--crystal));
  font-style: italic;
  font-size: 0.94rem;
}

.spell-detail__stats {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ded6c7;
  font-size: 0.9rem;
  line-height: 1.6;
}

.spell-detail__heading {
  margin: 24px 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--paper);
}

.spell-detail__heading--major {
  font-size: 1.15rem;
  color: var(--gold, var(--crystal));
}

.spell-detail__list {
  margin: 0 0 14px;
  padding-left: 1.4em;
  color: #ded6c7;
}

.spell-detail__list li {
  margin-bottom: 6px;
  line-height: 1.55;
}

.spell-detail__table-scroll {
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.spell-detail__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.spell-detail__table th,
.spell-detail__table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spell-detail__table thead th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--gold, var(--crystal));
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spell-detail__table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 760px) {
  .spell-detail__stage {
    grid-template-columns: auto 1fr auto;
    gap: 6px;
  }

  .spell-detail__card {
    max-height: 100%;
  }
}

/* -------------------------------------------------- */
/* BACKGROUND DETAIL (backgrounds.txt — reuses .spell-detail's layout      */
/* wholesale for the card/stage/prev-next chrome; only the tag color and  */
/* the section dividers are specific to this content.)                   */
/* -------------------------------------------------- */

.background-detail .spell-detail__tag {
  color: var(--gold, var(--crystal));
  text-shadow: 0 0 12px rgba(203, 178, 122, 0.45);
}

.background-detail__divider {
  margin: 22px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------- */
/* CHAPTER COMPLETE                                    */
/* -------------------------------------------------- */

.complete {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(20px, 6vw, 64px);
}

.complete__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 50% 20%, rgba(155, 123, 255, 0.18), transparent 60%),
    var(--void);
}

.complete__card {
  position: relative;
  width: min(460px, 100%);
  text-align: center;
  padding: clamp(30px, 6vw, 46px) clamp(24px, 5vw, 38px);
  background: linear-gradient(180deg, rgba(18, 21, 29, 0.9), rgba(8, 9, 13, 0.94));
  border: 1px solid rgba(87, 232, 184, 0.3);
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.complete__eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--toxic);
}

.complete__code {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.8rem);
  color: var(--paper);
  text-shadow: 0 0 22px rgba(155, 123, 255, 0.5);
}

.complete__copy {
  padding: 11px 20px;
  background: transparent;
  border: 1px solid var(--crystal);
  border-radius: 3px;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}

.complete__copy:hover,
.complete__copy:focus-visible {
  background: var(--crystal-soft);
}

.complete__copy:focus-visible {
  outline: 2px solid var(--crystal);
  outline-offset: 2px;
}

.complete__copy-status {
  display: block;
  min-height: 1.2em;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--paper-faint);
}

.complete__note {
  margin: 22px 0 0;
  font-style: italic;
  color: var(--paper-dim);
  line-height: 1.5;
}

.complete__note:empty {
  display: none;
}

.complete__home {
  margin-top: 22px;
  padding: 11px 20px;
  background: none;
  border: none;
  color: var(--paper-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.complete__home:hover,
.complete__home:focus-visible {
  color: var(--paper);
}

.complete__home:focus-visible {
  outline: 2px solid var(--crystal);
  outline-offset: 2px;
}

/* -------------------------------------------------- */
/* RESPONSIVE                                          */
/* -------------------------------------------------- */

@media (max-width: 640px) {
  .stage__content {
    padding-bottom: 64px;
  }

  .access-form__row {
    flex-direction: column;
  }

  .access-form__submit {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-frozen .stage__vignette,
  .stage__hint.is-visible,
  .stage__text .caret,
  .stage.is-fog::after,
  #scene-image.is-zooming,
  .ambient-motes,
  .subclass-card__portrait img,
  .stage__gallery-slot,
  .chapter-logo.is-revealing .chapter-logo__image,
  .enter-fade {
    animation: none;
  }

  .chapter-logo__image {
    opacity: 1;
    transform: none;
  }

  .stage__gallery-slot {
    opacity: 0.85;
  }

  .tome__card__artwork img,
  .hub__card__emblem img,
  .codex__figure img,
  .codex-lightbox__image {
    transition: none;
  }
}