:root{
  color-scheme: dark;
  --void: #030208;
  --abyss: #08060f;
  --ink: #0e0a17;
  --violet: #7b2fbe;
  --whisper: #b066ff;
  --bloom: #c89bff;
  --bronze: #b88a52;
  --gold: #c9a84c;
  --bone: #e9dcbb;
  --parchment: #cfc1a0;
  --ash: #8a8496;
  --line: rgba(207, 193, 160, 0.2);
  --line-strong: rgba(201, 168, 76, 0.34);
  --panel: rgba(12, 8, 20, 0.74);
  --max: 1180px;
  /* Centralized width system (Task 8). All sections must reference these —
     no standalone max-width values outside this set. */
  --w-text: 62ch;
  --w-inline: min(920px, 80vw);
  --w-content: min(1400px, 88vw);
  --w-wide: min(1560px, 90vw);
}*{
  box-sizing: border-box;
}[hidden]{
  display: none !important;
}html{
  scroll-behavior: smooth;
}body{
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% 0%, rgba(123, 47, 190, 0.2), transparent 34rem),
    linear-gradient(180deg, var(--void), #07040d 38%, var(--void));
  color: var(--bone);
  font-family: "Crimson Text", Georgia, serif;
  font-size: 18px;
  line-height: 1.62;
  overflow-x: hidden;
}body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(201, 168, 76, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 168, 76, 0.018) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at 50% 24%, black, transparent 78%);
}img{
  display: block;
  max-width: 100%;
}a{
  color: inherit;
  text-decoration: none;
}button,
input{
  font: inherit;
}.void-canvas{
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  background: linear-gradient(180deg, rgba(3, 2, 8, 0.88), rgba(3, 2, 8, 0));
}.brand,
nav,
.kicker,
.button,
.seal,
.hero-stats,
footer,
.relic-list span{
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.brand{
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  font-weight: 800;
  color: var(--bone);
}.brand-mark{
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(200, 155, 255, 0.65);
  border-radius: 50%;
  color: var(--bloom);
  box-shadow: 0 0 24px rgba(176, 102, 255, 0.34);
}nav{
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.5rem);
  color: var(--ash);
  font-size: 0.72rem;
  font-weight: 700;
}nav a{
  transition: color 220ms ease;
}nav a:hover{
  color: var(--bone);
}.lang-select{
  border: 1px solid rgba(201, 168, 76, 0.32);
  background: rgba(3, 2, 8, 0.72);
  color: var(--bone);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.55rem;
  text-transform: uppercase;
  outline: none;
}.lang-select:focus{
  border-color: rgba(200, 155, 255, 0.72);
}.hero{
  position: relative;
  min-height: 94svh;
  display: grid;
  align-items: center;
  padding: 7rem clamp(1rem, 5vw, 4rem) 5rem;
  overflow: hidden;
  isolation: isolate;
}.hero-art{
  position: absolute;
  inset: auto clamp(-5rem, -5vw, 0rem) 4rem auto;
  z-index: -2;
  width: min(76vw, 1260px);
  height: auto;
  object-fit: contain;
  filter: saturate(1.02) contrast(1.14) drop-shadow(0 0 60px rgba(123, 47, 190, 0.34));
  transform: scale(1);
  animation: breatheArt 16s ease-in-out infinite alternate;
  /* Feather the video's own rectangular frame into the section background --
     biased so the fade reaches furthest on the left/bottom, where the box
     otherwise sits against the empty gap next to the text column. */
  -webkit-mask-image: radial-gradient(ellipse 66% 58% at 60% 40%, #fff 48%, rgba(255, 255, 255, 0.55) 66%, transparent 88%);
  mask-image: radial-gradient(ellipse 66% 58% at 60% 40%, #fff 48%, rgba(255, 255, 255, 0.55) 66%, transparent 88%);
}.hero-shade{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 64% 46%, rgba(176, 102, 255, 0.22), rgba(3, 2, 8, 0.16) 32%, rgba(3, 2, 8, 0.82) 82%),
    linear-gradient(90deg, rgba(3, 2, 8, 0.98), rgba(3, 2, 8, 0.5) 48%, rgba(3, 2, 8, 0.7)),
    linear-gradient(180deg, rgba(3, 2, 8, 0), rgba(3, 2, 8, 0.84));
}.hero-content{
  width: min(760px, 100%);
}.kicker{
  margin: 0 0 0.8rem;
  color: var(--bronze);
  font-size: 0.78rem;
  font-weight: 800;
}h1,
h2,
h3{
  margin: 0;
  line-height: 1.02;
  color: var(--bone);
}h1,
h2{
  font-family: "Cinzel Decorative", Georgia, serif;
}h1{
  width: min(680px, 86vw);
}.wordmark{
  width: 100%;
  filter: drop-shadow(0 0 34px rgba(176, 102, 255, 0.42)) drop-shadow(0 20px 24px rgba(0, 0, 0, 0.55));
}h2{
  font-size: clamp(2rem, 5.2vw, 4.35rem);
}h3{
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.15rem, 2.35vw, 1.72rem);
}.scripture{
  max-width: 36rem;
  margin: 0.7rem 0 2rem;
  color: var(--parchment);
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(1.18rem, 2.2vw, 1.65rem);
  font-style: italic;
}.hero-line{
  max-width: 44rem;
  margin: 1rem 0 0;
  color: var(--bone);
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.05rem, 1.65vw, 1.45rem);
  line-height: 1.25;
}.collector-note{
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}.collector-note span{
  border: 1px solid rgba(201, 168, 76, 0.28);
  background: rgba(3, 2, 8, 0.44);
  color: var(--parchment);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.65rem;
  text-transform: uppercase;
}.hero-actions,
.hero-stats,
.witness-form div{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}.button{
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.25rem;
  border: 1px solid rgba(201, 168, 76, 0.62);
  background: rgba(3, 2, 8, 0.45);
  color: var(--bone);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}.button:hover{
  transform: translateY(-2px);
  border-color: rgba(201, 168, 76, 0.9);
}.button-primary{
  background:
    linear-gradient(135deg, rgba(123, 47, 190, 0.95), rgba(184, 138, 82, 0.8)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  box-shadow: 0 0 36px rgba(123, 47, 190, 0.34), inset 0 1px 0 rgba(233, 220, 187, 0.18);
}.button-ghost{
  color: var(--parchment);
}.hero-stats{
  position: absolute;
  left: clamp(1rem, 5vw, 4rem);
  right: clamp(1rem, 5vw, 4rem);
  bottom: 1.5rem;
  justify-content: space-between;
  color: var(--ash);
  font-size: 0.74rem;
}.hero-stats strong{
  display: block;
  color: var(--gold);
  font-size: 1.55rem;
}section:not(.hero){
  padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 5vw, 4rem);
}.threshold{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}.allocation{
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: stretch;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid rgba(201, 168, 76, 0.16);
}.allocation-copy{
  display: grid;
  align-content: center;
}.allocation-copy p:last-child{
  max-width: 43rem;
  color: var(--ash);
}.allocation-ledger{
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.65rem;
  min-height: 22rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(201, 168, 76, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(176, 102, 255, 0.18), transparent 16rem),
    linear-gradient(180deg, rgba(18, 12, 28, 0.82), rgba(3, 2, 8, 0.86));
  box-shadow: inset 0 1px 0 rgba(233, 220, 187, 0.12), 0 36px 90px rgba(0, 0, 0, 0.32);
}.allocation-ledger::before{
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(201, 168, 76, 0.16);
  pointer-events: none;
}.ledger-mark{
  color: var(--gold);
  font-size: 0.72rem;
}.allocation-ledger span,
.allocation-ledger strong{
  position: relative;
  z-index: 1;
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.allocation-ledger span{
  color: var(--ash);
  font-size: 0.72rem;
}.allocation-ledger strong{
  color: var(--bone);
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1;
}.threshold p{
  margin: 0;
  color: var(--parchment);
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(1.22rem, 2.45vw, 1.9rem);
  font-style: italic;
}.split{
  position: relative;
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(207, 193, 160, 0.08);
  border-bottom: 1px solid rgba(207, 193, 160, 0.08);
}.chapter-bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  filter: saturate(0.88) contrast(1.08);
}.chapter::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(3, 2, 8, 0.92), rgba(3, 2, 8, 0.64), rgba(3, 2, 8, 0.9));
}.chapter p,
.section-heading p,
.living-world p,
.ritual p,
.board-control p{
  color: var(--ash);
}.lore-panel,
.board-control,
.relic-list article,
.ritual{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 10, 23, 0.8), rgba(5, 3, 10, 0.72));
  box-shadow: inset 0 1px 0 rgba(233, 220, 187, 0.08), 0 30px 90px rgba(0, 0, 0, 0.25);
}.lore-panel{
  padding: clamp(1.3rem, 3vw, 2rem);
}.seal{
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
}.section-heading{
  width: min(var(--max), 100%);
  margin: 0 auto 2.4rem;
}.board-shell{
  width: min(var(--max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.8rem);
  align-items: center;
}.core-stage{
  position: relative;
  min-height: clamp(24rem, 38vw, 34rem);
  display: grid;
  grid-template-columns: minmax(14rem, 0.85fr) minmax(17rem, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: clamp(1.4rem, 4vw, 4rem);
  padding: clamp(1.2rem, 3vw, 2.2rem);
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.22);
  background:
    radial-gradient(circle at 30% 42%, rgba(123, 47, 190, 0.34), transparent 18rem),
    linear-gradient(180deg, rgba(14, 10, 23, 0.64), rgba(3, 2, 8, 0.72));
  box-shadow: inset 0 1px 0 rgba(233, 220, 187, 0.08), 0 40px 120px rgba(0, 0, 0, 0.28);
}.core-stage::after{
  content: "";
  position: absolute;
  inset: auto 8% 7% 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.5), transparent);
}.stage-core{
  position: relative;
  top: auto;
  left: auto;
  z-index: 0;
  grid-column: 1;
  grid-row: 1;
  width: min(32vw, 410px);
  opacity: 0.88;
  filter: drop-shadow(0 0 42px rgba(176, 102, 255, 0.34));
  animation: relicFloat 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  /* Video frames are always an opaque rectangle; feather it into .core-stage's own
     background so the emblem reads as glowing artwork, not a boxed clip. */
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #fff 42%, rgba(255, 255, 255, 0.65) 58%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 46%, #fff 42%, rgba(255, 255, 255, 0.65) 58%, transparent 82%);
}.core-stage-copy{
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  max-width: 31rem;
  justify-self: start;
}.core-stage-copy p{
  margin: 0.55rem 0 0;
  color: var(--parchment);
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(1.12rem, 2vw, 1.55rem);
  font-style: italic;
  line-height: 1.35;
}.core-button{
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  place-items: center;
  min-width: 13rem;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(200, 155, 255, 0.76);
  background: linear-gradient(135deg, rgba(123, 47, 190, 0.9), rgba(184, 138, 82, 0.7));
  color: var(--bone);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 48px rgba(176, 102, 255, 0.35);
}.core-button:hover{
  transform: translateY(-2px);
}.board-control{
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2rem);
}.evolution-track{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 1.25rem 0;
}.evolution-track button{
  min-height: 3rem;
  border: 1px solid var(--line);
  background: rgba(3, 2, 8, 0.5);
  color: var(--ash);
  cursor: pointer;
}.evolution-track button.is-active{
  border-color: rgba(200, 155, 255, 0.8);
  color: var(--bone);
  box-shadow: 0 0 22px rgba(123, 47, 190, 0.28);
}.meter{
  height: 0.55rem;
  border: 1px solid var(--line);
  background: rgba(3, 2, 8, 0.8);
  overflow: hidden;
}.meter span{
  display: block;
  width: 25%;
  height: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--whisper));
  transition: width 420ms ease;
}.hero-gallery{
  width: min(var(--max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.6vw, 1.25rem);
  align-items: start;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(201, 168, 76, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(123, 47, 190, 0.18), transparent 30rem),
    linear-gradient(180deg, rgba(14, 10, 23, 0.42), rgba(3, 2, 8, 0.62));
  box-shadow: inset 0 1px 0 rgba(233, 220, 187, 0.08), 0 42px 120px rgba(0, 0, 0, 0.28);
}.feature-card{
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --foil-x: 50%;
  --foil-y: 50%;
  margin: 0;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  min-width: 0;
  min-height: clamp(15rem, 20vw, 19rem);
  padding: 0.6rem 0.6rem 0.8rem;
  border: 1px solid rgba(201, 168, 76, 0.26);
  background:
    linear-gradient(180deg, rgba(3, 2, 8, 0.18), rgba(3, 2, 8, 0.78)),
    radial-gradient(circle at 50% 72%, rgba(176, 102, 255, 0.16), transparent 14rem);
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 120ms ease-out, border-color 240ms ease, box-shadow 240ms ease;
  will-change: transform;
  filter: drop-shadow(0 34px 36px rgba(0, 0, 0, 0.58));
  overflow: hidden;
}.feature-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(233, 220, 187, 0.08) 47%, transparent 58%),
    radial-gradient(circle at 50% 20%, rgba(201, 168, 76, 0.08), transparent 18rem);
  opacity: 0.68;
  pointer-events: none;
}.feature-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    circle at var(--foil-x) var(--foil-y),
    rgba(255, 255, 255, 0.38),
    rgba(200, 155, 255, 0.22) 22%,
    transparent 46%
  );
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}.feature-card.is-active::after{
  opacity: 0.85;
}.feature-card:hover{
  border-color: rgba(201, 168, 76, 0.46);
  box-shadow: inset 0 0 0 1px rgba(200, 155, 255, 0.08), 0 24px 80px rgba(0, 0, 0, 0.26);
}.feature-card.is-idle{
  animation: cardBreathe 6s ease-in-out infinite;
}.feature-card img,
.feature-card video{
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: clamp(13rem, 18vw, 17rem);
  height: auto;
  object-fit: contain;
  align-self: end;
  justify-self: center;
  filter:
    drop-shadow(0 1.2rem 0.85rem rgba(0, 0, 0, 0.42))
    drop-shadow(0 2.4rem 2rem rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 1.3rem rgba(176, 102, 255, 0.16));
}

@keyframes cardBreathe {0%,
100%{
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0);
  }50%{
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-5px);
  }
}.feature-card figcaption{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.2rem;
  min-height: 3rem;
  padding-top: 0.6rem;
  text-align: center;
}.feature-card figcaption span{
  color: var(--bronze);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}.feature-card figcaption strong{
  color: var(--bone);
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.72rem, 1.1vw, 0.92rem);
  line-height: 1.15;
  text-transform: uppercase;
}.fated-index{
  width: min(var(--max), 100%);
  margin: clamp(1.2rem, 3vw, 2rem) auto 0;
  display: grid;
  grid-template-columns: minmax(17rem, 0.8fr) minmax(18rem, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: stretch;
}.index-copy{
  border: 1px solid var(--line);
  background: rgba(12, 8, 20, 0.52);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}.index-copy p{
  color: var(--ash);
  margin-bottom: 0;
}.rarity-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}.rarity-strip > span{
  display: grid;
  place-items: center;
  min-height: 100%;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0%, rgba(176, 102, 255, 0.14), transparent 12rem),
    rgba(12, 8, 20, 0.42);
  color: var(--ash);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}.rarity-strip strong{
  display: block;
  color: var(--gold);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}.relics{
  position: relative;
  min-height: 86svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}.relic-art{
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  filter: contrast(1.08) saturate(0.9);
}.relics::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 74% 45%, rgba(123, 47, 190, 0.08), transparent 26rem),
    linear-gradient(90deg, rgba(3, 2, 8, 0.96), rgba(3, 2, 8, 0.54), rgba(3, 2, 8, 0.88));
}.relic-content{
  width: min(var(--max), 100%);
}.relic-intro{
  max-width: 38rem;
  color: var(--parchment);
}.relic-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.25rem);
  margin-top: 2rem;
}.relic-list article{
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-height: 31rem;
  padding: clamp(1.1rem, 2vw, 1.45rem);
  backdrop-filter: blur(8px);
  transition: transform 220ms ease, border-color 220ms ease;
}.relic-list article:hover{
  transform: translateX(0.35rem);
  border-color: rgba(201, 168, 76, 0.48);
}.relic-list span{
  color: var(--gold);
  font-size: 1.05rem;
}.relic-card b{
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(201, 168, 76, 0.28);
  color: var(--gold);
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: 1.45rem;
  font-style: normal;
  font-weight: 900;
}.relic-card h3{
  margin-top: 0.45rem;
}.relic-type{
  margin: 0;
  color: var(--bronze) !important;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.relic-list p{
  margin: 0.3rem 0 0;
  color: var(--ash);
}.relic-card em{
  color: var(--bone);
  font-family: "Cinzel", Georgia, serif;
  font-style: normal;
  font-weight: 800;
}.relic-card small{
  color: var(--ash);
}.relic-card .button{
  width: 100%;
  margin-top: auto;
}.featured-relic{
  border-color: rgba(200, 155, 255, 0.42) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(123, 47, 190, 0.2), transparent 16rem),
    linear-gradient(180deg, rgba(30, 17, 46, 0.86), rgba(5, 3, 10, 0.78)) !important;
}.relic-subtitle{
  margin: 0.1rem 0 0.6rem;
  color: var(--bloom);
  font-family: "IM Fell English", Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
}/* Relik tersegel -- siluet gelap di balik kabut ungu,
tanpa judul/detail/harga. */
.relic-sealed{
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(123, 47, 190, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(8, 5, 14, 0.92), rgba(3, 2, 8, 0.96)) !important;
  filter: saturate(0.7);
}.relic-sealed::before{
  content: "";
  position: absolute;
  inset: 15%;
  background: rgba(0, 0, 0, 0.5);
  filter: blur(18px);
  border-radius: 1rem;
}.relic-sealed b{
  color: rgba(201, 168, 76, 0.32);
  border-color: rgba(201, 168, 76, 0.14);
}.relic-sealed > span{
  color: rgba(201, 168, 76, 0.5) !important;
}.relic-sealed h3{
  color: rgba(233, 220, 187, 0.42);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.05rem;
}.relic-teaser{
  color: rgba(207, 193, 160, 0.55) !important;
  font-family: "IM Fell English", Georgia, serif;
  font-style: italic;
}.sealed-tooltip{
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  padding: 0.5rem 0.75rem;
  background: rgba(3, 2, 8, 0.92);
  border: 1px solid rgba(200, 155, 255, 0.4);
  color: var(--bloom);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  z-index: 2;
}.relic-sealed.is-tapped .sealed-tooltip{
  opacity: 1;
  transform: translateY(0);
}.sealed-whisper{
  margin: 1.6rem auto 0;
  max-width: 42rem;
  text-align: center;
  color: var(--bloom);
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-style: italic;
}.merge,
.ascension{
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
}.merge{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1fr);
  gap: clamp(1.3rem, 4vw, 3rem);
  align-items: center;
  border-top: 1px solid rgba(201, 168, 76, 0.22);
  border-bottom: 1px solid rgba(201, 168, 76, 0.14);
}.merge p{
  color: var(--parchment);
}.merge-visual{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 3rem 1fr;
  align-items: center;
  min-height: 20rem;
  padding: 1rem;
}.merge-visual span{
  display: grid;
  place-items: center;
  min-height: 16rem;
  border: 1px solid rgba(201, 168, 76, 0.26);
  background:
    radial-gradient(circle at 50% 35%, rgba(123, 47, 190, 0.24), transparent 12rem),
    linear-gradient(180deg, rgba(18, 12, 28, 0.84), rgba(3, 2, 8, 0.88));
  color: var(--bone);
  font-family: "Cinzel", Georgia, serif;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}.merge-visual i{
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--bronze), var(--whisper), var(--bronze));
  box-shadow: 0 0 24px rgba(176, 102, 255, 0.44);
}.ascension-steps{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}.ascension-steps article{
  min-height: 18rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0%, rgba(176, 102, 255, 0.12), transparent 12rem),
    rgba(12, 8, 20, 0.54);
}.ascension-steps span{
  color: var(--gold);
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: 2rem;
}.ascension-steps p{
  color: var(--ash);
}.ascension-steps .invitation{
  border-color: rgba(200, 155, 255, 0.44);
}.living-world{
  position: relative;
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  min-height: 32rem;
  border: 1px solid rgba(201, 168, 76, 0.18);
  padding: clamp(1.4rem, 4vw, 3rem);
}.world-bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.46;
}.living-world::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(3, 2, 8, 0.92), rgba(3, 2, 8, 0.58));
}.living-world p,
.ritual p{
  max-width: 48rem;
}.ritual{
  position: relative;
  width: min(980px, calc(100% - 2rem));
  margin: clamp(3rem, 8vw, 6rem) auto;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}.ritual-bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}.ritual::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 0%, rgba(123, 47, 190, 0.16), transparent 24rem),
    rgba(3, 2, 8, 0.78);
}.ritual p{
  margin-left: auto;
  margin-right: auto;
  color: var(--parchment);
}.witness-form{
  width: min(620px, 100%);
  margin: 2rem auto 0;
  text-align: left;
}.witness-form label{
  display: block;
  margin-bottom: 0.45rem;
  color: var(--bronze);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.witness-form input{
  flex: 1 1 16rem;
  min-height: 3.25rem;
  min-width: 0;
  border: 1px solid rgba(201, 168, 76, 0.26);
  background: rgba(3, 2, 8, 0.72);
  color: var(--bone);
  padding: 0.8rem 1rem;
  outline: none;
}.witness-form input:focus{
  border-color: rgba(200, 155, 255, 0.74);
}footer{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 2rem clamp(1rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  color: var(--ash);
  font-size: 0.68rem;
}.footer-brand{
  flex-shrink: 0;
}.footer-lines{
  text-align: right;
}.footer-quote{
  margin: 0 0 0.35rem;
  color: #ece0c2;
  font-family: "IM Fell English", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 18px rgba(176, 102, 255, 0.18);
}.footer-credit{
  margin: 0;
  color: rgba(207, 193, 160, 0.62);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}.section-reveal{
  opacity: 0.68;
  transform: translateY(18px);
  transition: opacity 800ms ease, transform 800ms ease;
}.section-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@keyframes breatheArt {from{
    transform: translateY(0) scale(1);
  }to{
    transform: translateY(-1.25rem) scale(1.04);
  }
}/* Premium UI refinement: shorten mobile scroll and make panels feel bespoke. */
@media (hover: hover){
  .button:hover,
  .core-button:hover,
  .relic-card .button:hover,
  .witness-form button:hover {
    box-shadow: 0 20px 54px rgba(176, 102, 255, 0.24), inset 0 1px 0 rgba(233, 220, 187, 0.2);
  }
}

@media (max-width: 860px) {.site-header{
    padding: 0.75rem 0.9rem;
    background: rgba(3, 2, 8, 0.82);
  }.hero{
    padding: 5rem 1rem 2.15rem;
  }.hero-line{
    max-width: 22rem;
  }.collector-note{
    grid-template-columns: 1fr;
  }.hero-stats{
    margin-top: 1.2rem;
  }section:not(.hero){
    padding: 2.15rem 1rem;
  }.allocation-ledger,
.lore-panel,
.board-control,
.relic-list article,
.ascension-steps article,
.index-copy,
.rarity-strip > span{
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(233, 220, 187, 0.055), rgba(12, 8, 20, 0.54));
  }.threshold p,
.chapter p,
.relic-list p,
.merge p,
.ascension-steps p{
    line-height: 1.42;
  }.relic-list article,
.ascension-steps article{
    flex-basis: min(74vw, 18.5rem);
  }
}

@media (max-width: 560px) {.brand span:last-child{
    font-size: 0.78rem;
  }.lang-select{
    max-width: 4.4rem;
    min-height: 2.55rem;
  }.hero-art{
    inset: 7.5rem -8.5rem auto auto;
    opacity: 0.36;
  }h1{
    width: min(100%, 18rem);
  }.scripture{
    margin-bottom: 1.1rem;
  }.hero-actions{
    gap: 0.55rem;
  }.button{
    min-height: 2.75rem;
    border-radius: 0.95rem;
  }.hero-stats{
    gap: 0.35rem;
  }.hero-gallery,
.relic-list,
.ascension-steps{
    padding-bottom: 0.75rem;
  }
}

@keyframes relicFloat {from{
    transform: translateY(0) scale(1);
  }to{
    transform: translateY(-0.7rem) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {*,
*::before,
*::after{
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 860px) {.site-header{
    align-items: flex-start;
  }nav{
    display: flex;
  }nav a{
    display: none;
  }.hero{
    min-height: 92svh;
  }.hero-art{
    inset: auto -8rem 5rem auto;
    width: min(120vw, 720px);
    opacity: 0.72;
  }.hero-stats,
.split,
.allocation,
.merge,
.board-shell,
.fated-index,
.living-world{
    grid-template-columns: 1fr;
  }.relic-list,
.ascension-steps{
    grid-template-columns: 1fr;
  }.relic-list article,
.ascension-steps article{
    min-height: auto;
  }.merge-visual{
    grid-template-columns: 1fr;
  }.merge-visual i{
    width: 2px;
    height: 3rem;
    justify-self: center;
  }.hero-stats{
    position: static;
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }.hero-stats span{
    min-width: 0;
  }.hero-gallery{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(40rem, 100%);
    padding: 0.85rem;
  }.feature-card{
    min-height: auto;
  }.feature-card img,
.feature-card video{
    max-height: 15rem;
  }.core-stage{
    min-height: 28rem;
    grid-template-columns: minmax(12rem, 0.8fr) minmax(16rem, 1fr);
  }.stage-core{
    width: min(42vw, 320px);
  }.allocation-ledger{
    min-height: 17rem;
  }
}

@media (max-width: 560px) {body{
    font-size: 15.5px;
    line-height: 1.5;
  }.site-header{
    padding: 0.75rem 0.9rem;
  }.brand{
    gap: 0.45rem;
    font-size: 0.78rem;
  }.brand-mark{
    width: 1.85rem;
    height: 1.85rem;
  }.lang-select{
    padding: 0.38rem 0.48rem;
  }.hero{
    min-height: auto;
    padding: 5.6rem 1rem 2.4rem;
  }.hero-art{
    inset: 8rem -7rem auto auto;
    width: min(92vw, 360px);
    opacity: 0.42;
  }.hero-shade{
    background:
      radial-gradient(circle at 82% 28%, rgba(176, 102, 255, 0.18), transparent 15rem),
      linear-gradient(180deg, rgba(3, 2, 8, 0.74), rgba(3, 2, 8, 0.94) 42%, rgba(3, 2, 8, 0.98));
  }h1{
    width: min(100%, 20rem);
  }h2{
    font-size: clamp(1.65rem, 8.2vw, 2.35rem);
    line-height: 1.06;
  }h3{
    font-size: clamp(1.02rem, 4.6vw, 1.28rem);
    line-height: 1.12;
  }.kicker,
.seal,
.button,
.collector-note span,
.relic-type,
.witness-form label{
    letter-spacing: 0.06em;
  }.kicker{
    font-size: 0.66rem;
    margin-bottom: 0.55rem;
  }section:not(.hero){
    padding: 3rem 1rem;
  }.hero-actions,
.witness-form div{
    align-items: stretch;
    flex-direction: column;
    gap: 0.65rem;
  }.hero-line{
    margin-top: 0.8rem;
    font-size: 0.95rem;
    line-height: 1.32;
  }.scripture{
    margin: 0.55rem 0 1.35rem;
    font-size: 1.05rem;
  }.collector-note{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    margin-top: 1rem;
  }.collector-note span{
    padding: 0.38rem 0.55rem;
    font-size: 0.58rem;
  }.button{
    width: 100%;
    min-height: 2.85rem;
    padding: 0.78rem 0.9rem;
    font-size: 0.64rem;
  }.hero-stats{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 1.55rem;
    text-align: center;
    font-size: 0.55rem;
  }.hero-stats strong{
    font-size: 1.05rem;
  }.threshold p{
    font-size: 1.08rem;
    line-height: 1.42;
  }.allocation,
.split,
.merge,
.ascension,
.living-world,
.ritual{
    width: 100%;
  }.allocation-ledger{
    min-height: 12rem;
    padding: 1rem;
  }.allocation-ledger strong{
    font-size: 1.25rem;
  }.chapter-copy,
.lore-panel{
    padding: 0.9rem;
  }.evolution-track{
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }.evolution-track button{
    min-height: 2.55rem;
    font-size: 0.86rem;
  }.core-stage{
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 1rem;
    padding: 1rem;
  }.stage-core{
    grid-column: 1;
    grid-row: 1;
    width: min(70vw, 250px);
    opacity: 0.82;
  }.core-stage-copy{
    grid-column: 1;
    grid-row: 2;
    text-align: center;
  }.core-button{
    position: relative;
    grid-row: 3;
    width: 100%;
  }.board-control{
    padding: 1rem;
  }.hero-gallery{
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.85rem;
  }.feature-card{
    min-height: auto;
    padding: 0.5rem 0.5rem 0.7rem;
  }.feature-card img,
.feature-card video{
    max-height: 10.5rem;
  }.feature-card figcaption{
    min-height: 3.75rem;
  }.feature-card figcaption span{
    font-size: 0.52rem;
  }.feature-card figcaption strong{
    font-size: 0.95rem;
  }.fated-index{
    gap: 0.75rem;
  }.rarity-strip{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }.rarity-strip > span{
    min-height: 4.8rem;
    font-size: 0.54rem;
  }.rarity-strip strong{
    font-size: 1.35rem;
  }.relics{
    min-height: auto;
  }.relic-content{
    width: 100%;
  }.relic-list{
    gap: 0.75rem;
  }.relic-list article{
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 0.55rem;
  }.relic-card b{
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.18rem;
  }.merge{
    gap: 1rem;
  }.merge-visual{
    min-height: auto;
    padding: 0;
  }.merge-visual span{
    min-height: 8rem;
    padding: 0.75rem;
    font-size: 0.68rem;
  }.merge-visual i{
    height: 2rem;
  }.ascension-steps{
    gap: 0.65rem;
  }.ascension-steps article{
    min-height: auto;
    padding: 0.95rem;
  }.ascension-steps span{
    font-size: 1.45rem;
  }.living-world{
    min-height: 21rem;
    padding: 1rem;
  }.ritual{
    padding: 2rem 1rem;
  }.witness-form{
    margin-top: 1.35rem;
  }footer{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.4rem 1rem;
    font-size: 0.58rem;
    gap: 0.6rem;
  }.footer-lines{
    text-align: center;
  }
}

@media (max-width: 860px) {.hero{
    min-height: auto;
    padding: 5.2rem 1rem 2.4rem;
  }section:not(.hero){
    padding: 2.4rem 1rem;
  }.section-heading{
    gap: 0.75rem;
    margin-bottom: 1.3rem;
  }.chapter,
.allocation,
.split,
.merge,
.ascension,
.living-world,
.ritual{
    gap: 0.85rem;
  }.chapter-card,
.chapter-copy,
.lore-panel,
.board-control,
.relic-list article,
.ascension-steps article{
    padding: 0.85rem;
  }.feature-card img,
.feature-card video{
    max-height: 16rem;
  }.core-stage,
.relic-card,
.living-world{
    min-height: auto;
  }.relic-list,
.ascension-steps,
.rarity-strip{
    gap: 0.5rem;
  }.merge-visual span{
    min-height: 6.4rem;
  }.relic-list,
.ascension-steps{
    display: flex;
    width: calc(100vw - 2rem);
    margin-left: -1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    gap: 0.65rem;
    padding: 0.2rem 1rem 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }.relic-list::-webkit-scrollbar,
.ascension-steps::-webkit-scrollbar{
    display: none;
  }.relic-list article,
.ascension-steps article{
    flex: 0 0 min(76vw, 19rem);
    min-height: 0;
    scroll-snap-align: start;
  }.board-section,
.relics,
.ascension,
.ritual{
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }.living-world{
    min-height: 16rem;
  }.ritual p,
.living-world p,
.section-heading p{
    font-size: 0.95rem;
    line-height: 1.48;
  }.brand{
    min-height: 2.75rem;
  }.button,
button,
input{
    min-height: 2.9rem;
    border-radius: 999px;
  }.lang-select,
.evolution-track button,
.fated-index button,
.fated-index a,
.fated-index .is-active{
    min-height: 2.75rem;
  }.evolution-track button,
.fated-index button,
.fated-index a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }.feature-card{
    border-radius: 1.15rem;
  }.feature-card img,
.feature-card video{
    max-height: 14.5rem;
    object-fit: cover;
  }.feature-card figcaption{
    min-height: 3.25rem;
  }.chapter-copy,
.lore-panel,
.board-control,
.relic-list article,
.ascension-steps article{
    border-radius: 1.1rem;
  }
}/* ==========================================================================
   WEBSITE YANG IKUT TERKORUPSI — scroll-driven corruption system
   ========================================================================== */
:root{
  --corruption: 0;
}.corruption-veins{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: calc(var(--corruption) * 0.9);
  background:
    radial-gradient(circle at 12% 18%, rgba(176, 102, 255, 0.22), transparent 32rem),
    radial-gradient(circle at 88% 30%, rgba(123, 47, 190, 0.24), transparent 30rem),
    radial-gradient(circle at 50% 92%, rgba(176, 102, 255, 0.2), transparent 34rem);
  transition: opacity 400ms ease;
}/* ==========================================================================
   Aset akar/kabut buatan manual (assets/root-*.webp, smoke-s.webp).
   Latar hitam pekat pada aset otomatis jadi transparan lewat mix-blend-mode: screen.
   Reveal "tumbuh" murni CSS: mask-image dengan stop diikat calc(var(--corruption)),
sehingga otomatis reversibel mengikuti scroll tanpa perlu JS per-frame.
   ========================================================================== */
.root-asset,
.root-smoke{
  position: fixed;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity, transform;
  transition: opacity 300ms ease;
}.root-corner{
  bottom: 0;
  width: min(38vw, 520px);
  height: auto;
  opacity: calc(var(--corruption) * 0.9);
  transform: scale(calc(0.92 + var(--corruption) * 0.08));
  /* Layer 1: feather statis di tepi yang menghadap ke dalam halaman (selalu ada, tak berubah dengan scroll).
     Layer 2: reveal "tumbuh" yang diikat --corruption. mask-composite intersect menggabungkan keduanya. */
  mask-image:
    radial-gradient(circle at 0% 100%, black 0%, black 55%, transparent 85%),
    linear-gradient(45deg, black 0%, black calc(var(--corruption) * 100%), transparent calc(var(--corruption) * 100% + 22%));
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle at 0% 100%, black 0%, black 55%, transparent 85%),
    linear-gradient(45deg, black 0%, black calc(var(--corruption) * 100%), transparent calc(var(--corruption) * 100% + 22%));
  -webkit-mask-composite: source-in;
}.corner-bl{
  left: 0;
}.corner-br{
  right: 0;
  transform: scale(calc(0.92 + var(--corruption) * 0.08)) scaleX(-1);
}.root-edge{
  top: 50%;
  width: min(46vw, 620px);
  height: auto;
  transform: translateY(-50%);
  opacity: calc(var(--corruption) * 0.85);
  mask-image:
    radial-gradient(ellipse 70% 90% at 0% 50%, black 30%, transparent 85%),
    linear-gradient(90deg, black 0%, black calc(var(--corruption) * 100%), transparent calc(var(--corruption) * 100% + 25%));
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(ellipse 70% 90% at 0% 50%, black 30%, transparent 85%),
    linear-gradient(90deg, black 0%, black calc(var(--corruption) * 100%), transparent calc(var(--corruption) * 100% + 25%));
  -webkit-mask-composite: source-in;
}.edge-left{
  left: 0;
}.edge-right{
  right: 0;
  transform: translateY(-50%) scaleX(-1);
}.root-bottom{
  bottom: 0;
  left: 50%;
  width: min(140vw, 1800px);
  height: auto;
  transform: translateX(-50%) scale(calc(0.95 + var(--corruption) * 0.05));
  opacity: calc(var(--corruption) * 0.95);
  mask-image:
    radial-gradient(ellipse 70% 60% at 50% 100%, black 30%, transparent 85%),
    linear-gradient(0deg, black 0%, black calc(var(--corruption) * 100%), transparent calc(var(--corruption) * 100% + 18%));
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(ellipse 70% 60% at 50% 100%, black 30%, transparent 85%),
    linear-gradient(0deg, black 0%, black calc(var(--corruption) * 100%), transparent calc(var(--corruption) * 100% + 18%));
  -webkit-mask-composite: source-in;
}.root-smoke{
  width: 140vw;
  max-width: 1800px;
  height: auto;
  opacity: calc(var(--corruption) * 0.3);
  filter: blur(2px);
}.smoke-a{
  bottom: -12%;
  left: -18%;
  animation: smokeDriftA 50s ease-in-out infinite alternate;
}.smoke-b{
  top: -18%;
  right: -22%;
  transform: scaleX(-1);
  animation: smokeDriftB 60s ease-in-out infinite alternate;
}

@keyframes smokeDriftA {from{ transform: translate(0, 0); }to{ transform: translate(4%, -3%); }
}

@keyframes smokeDriftB {from{ transform: scaleX(-1) translate(0, 0); }to{ transform: scaleX(-1) translate(-4%, 3%); }
}

@media (prefers-reduced-motion: reduce) {.root-smoke{
    animation: none;
  }
}/* Layar sempit: redam intensitas akar (maks ~50-60% dari desktop) dan kurangi jumlah layer
   supaya konten tetap dominan -- sisakan hanya 1 sudut + sistem dasar,
sembunyikan tepi. */
@media (max-width: 480px){
  .root-edge {
    display: none;
  }

  .corner-br {
    display: none;
  }

  .root-corner {
    opacity: calc(var(--corruption) * 0.5);
  }

  .root-bottom {
    opacity: calc(var(--corruption) * 0.55);
  }
}

@media (max-width: 560px) {.root-corner{
    width: min(52vw, 340px);
  }.root-edge{
    width: min(58vw, 360px);
  }.root-bottom{
    width: min(180vw, 1100px);
  }.root-smoke{
    filter: blur(1px);
  }
}body[data-corruption="1"] .feature-card,
body[data-corruption="2"] .feature-card,
body[data-corruption="3"] .feature-card{
  border-color: rgba(176, 102, 255, calc(0.26 + var(--corruption) * 0.4));
}body[data-corruption="2"] .core-button,
body[data-corruption="3"] .core-button,
body[data-corruption="2"] .button-primary,
body[data-corruption="3"] .button-primary{
  box-shadow: 0 0 calc(36px + var(--corruption) * 30px) rgba(176, 102, 255, calc(0.3 + var(--corruption) * 0.3));
}body[data-corruption="3"] .site-header{
  background: linear-gradient(180deg, rgba(15, 4, 26, 0.9), rgba(3, 2, 8, 0));
}body[data-corruption="3"] nav a:hover{
  color: var(--bloom);
}body[data-corruption="3"] .relic-list article,
body[data-corruption="3"] .ascension-steps article{
  border-color: rgba(176, 102, 255, 0.4);
}/* Text "whispers" — brief chromatic-aberration flicker on headings,
gated to deep scroll. */
.glitching{
  animation: glitchFlicker 260ms steps(2, end);
}.glitch-heavy{
  animation: glitchFlicker 2.4s steps(2, end) infinite;
}

@keyframes glitchFlicker {0%,
100%{
    text-shadow: none;
    transform: translate(0, 0);
  }20%{
    text-shadow: -2px 0 rgba(255, 60, 220, 0.7), 2px 0 rgba(120, 255, 255, 0.5);
    transform: translate(-1px, 0);
  }40%{
    text-shadow: 2px 0 rgba(255, 60, 220, 0.6), -2px 0 rgba(120, 255, 255, 0.45);
    transform: translate(1px, 0);
  }60%{
    text-shadow: -1px 0 rgba(200, 155, 255, 0.6);
    transform: translate(0, 0);
  }
}/* ==========================================================================
   Hero subtitle + Kickstarter signals
   ========================================================================== */
.relic-eyebrow{
  margin: 0.5rem 0 0;
  color: var(--gold);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}.hero-subtitle{
  margin: 0.2rem 0 0;
  color: var(--bloom);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}.kickstarter-window{
  margin: 0.75rem 0 0;
  color: var(--ash);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}.button-kickstarter{
  border-color: rgba(176, 102, 255, 0.55);
  background: rgba(123, 47, 190, 0.14);
}.witness-counter{
  margin-top: 1rem;
  color: var(--bloom);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}.world-cta-note{
  margin: 0.65rem 0 0;
  color: var(--ash);
  font-size: 0.85rem;
}/* ==========================================================================
   Trailer slot + cinemagraph fallback
   ========================================================================== */
.trailer-section{
  padding-top: 0 !important;
  padding-bottom: clamp(2rem, 5vw, 3.5rem) !important;
}.trailer-frame{
  position: relative;
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.4);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(233, 220, 187, 0.08);
}.trailer-cinemagraph{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenBurns 22s ease-in-out infinite alternate;
}

@keyframes kenBurns {from{
    transform: scale(1) translate(0, 0);
  }to{
    transform: scale(1.12) translate(-1.5%, -1%);
  }
}.trailer-shade{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(3, 2, 8, 0.65) 100%),
    linear-gradient(180deg, rgba(3, 2, 8, 0.35), rgba(3, 2, 8, 0.55));
}.trailer-play{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid rgba(233, 220, 187, 0.5);
  border-radius: 50%;
  background: rgba(3, 2, 8, 0.5);
  color: var(--bone);
  font-size: 1.4rem;
  cursor: pointer;
}.trailer-label{
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  color: var(--parchment);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.trailer-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}/* ==========================================================================
   Evolution spotlight — The Exiled Prince (Jalur B prosedural)
   ========================================================================== */
.evolution-spotlight{
  width: min(var(--max), 100%);
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  display: grid;
  grid-template-columns: minmax(16rem, 0.85fr) minmax(18rem, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}.evolution-portrait{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.3);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
}.evolution-portrait img,
.evolution-portrait video{
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  transition: filter 500ms ease, opacity 220ms ease;
}.evolution-portrait img.is-crossfading,
.evolution-portrait video.is-crossfading{
  opacity: 0;
}.evo-veins{
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(72deg, transparent 0 18px, rgba(176, 102, 255, 0.16) 19px, transparent 21px),
    repeating-linear-gradient(-38deg, transparent 0 24px, rgba(200, 155, 255, 0.12) 25px, transparent 27px);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 500ms ease;
}.evo-vignette{
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(3, 2, 8, 0.85) 100%);
  opacity: 0;
  transition: opacity 500ms ease;
}#evolutionPortrait.evo-stage-1{
  filter: saturate(1) contrast(1) hue-rotate(0deg);
}/* evo-real: stage punya artwork evolusi dedikasi (Sun Emperor, Shadow King, Corrupted
   Herald) — korupsi sudah dilukis di kartunya sendiri,
jadi overlay prosedural dimatikan. */
#evolutionPortrait.evo-real{
  filter: none;
}#evolutionPortrait.evo-real ~ .evo-veins,
#evolutionPortrait.evo-real ~ .evo-vignette{
  opacity: 0;
}.board-backstory{
  margin: 0.6rem 0 0;
  color: var(--parchment);
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(0.98rem, 1.6vw, 1.18rem);
  font-style: italic;
  line-height: 1.4;
}.stage-panel{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}.stage-flavor{
  margin: 0 0 0.85rem;
  color: var(--bloom);
  font-family: "IM Fell English", Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
}.stat-bars{
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}.stat-bar{
  display: grid;
  grid-template-columns: 2.6rem 1fr 2rem;
  align-items: center;
  gap: 0.6rem;
}.stat-bar-label{
  color: var(--bronze);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}.stat-bar-track{
  height: 0.4rem;
  border: 1px solid var(--line);
  background: rgba(3, 2, 8, 0.8);
  overflow: hidden;
}.stat-bar-fill{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--whisper));
  transition: width 400ms ease;
}.stat-bar-value{
  color: var(--bone);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
}.stage-ability{
  margin: 0;
  color: var(--ash);
  font-size: 0.95rem;
}.stage-ability .seal{
  margin-right: 0.4rem;
}/* ==========================================================================
   Living Core orb
   ========================================================================== */
.hero-core{
  --orb-px: 0px;
  --orb-py: 0px;
  transform: translate(var(--orb-px), var(--orb-py)) scale(1);
  transition: transform 260ms ease-out;
  mix-blend-mode: screen;
}.hero-core.orb-pulse-strong{
  filter: saturate(1.15) contrast(1.2) drop-shadow(0 0 90px rgba(176, 102, 255, 0.55));
}.orb-whisper{
  position: absolute;
  right: clamp(1rem, 6vw, 5rem);
  bottom: 26%;
  z-index: 2;
  max-width: 16rem;
  color: var(--bloom);
  font-family: "IM Fell English", Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  text-align: right;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 700ms ease, transform 700ms ease;
  pointer-events: none;
}.orb-whisper.is-visible{
  opacity: 0.92;
  transform: translateY(0);
}

@media (max-width: 860px) {.evolution-spotlight{
    grid-template-columns: 1fr;
  }.evolution-portrait{
    max-width: 22rem;
    margin: 0 auto;
  }.orb-whisper{
    display: none;
  }
}

@media (max-width: 560px) {.stat-bar{
    grid-template-columns: 2.2rem 1fr 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {.trailer-cinemagraph{
    animation: none;
  }.feature-card.is-idle{
    animation: none;
  }.glitch-heavy{
    animation: none;
  }
}/* ==========================================================================
   Box-first restructuring: open fantasy scenes,
not dashboard panels
   ========================================================================== */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}.hero{
  min-height: 96svh;
  padding-bottom: clamp(3.8rem, 7vw, 6rem);
}.hero-content{
  position: relative;
}.hero-content::before{
  content: "";
  position: absolute;
  left: -1.2rem;
  top: 0.45rem;
  width: 2px;
  height: min(76%, 28rem);
  background: linear-gradient(180deg, transparent, rgba(201, 168, 76, 0.62), rgba(176, 102, 255, 0.32), transparent);
  box-shadow: 0 0 24px rgba(176, 102, 255, 0.42);
}.collector-note{
  gap: 0.2rem clamp(0.75rem, 2vw, 1.2rem);
}.collector-note span{
  position: relative;
  border: 0;
  background: transparent;
  padding: 0 0 0 1.1rem;
}.collector-note span::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.36rem;
  height: 0.36rem;
  border: 1px solid rgba(201, 168, 76, 0.72);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 12px rgba(176, 102, 255, 0.4);
}.button-ghost:hover{
  background: transparent;
  border-color: rgba(200, 155, 255, 0.9);
}.hero-stats,
.rarity-strip{
  border-top: 1px solid rgba(201, 168, 76, 0.34);
  border-bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.08), transparent);
  padding-top: 0.85rem;
}.hero-stats span,
.rarity-strip > span{
  border: 0;
  background: transparent;
  min-height: auto;
  place-items: start;
}.hero-stats > span + span,
.rarity-strip > span + span{
  border-left: 1px solid rgba(201, 168, 76, 0.22);
  padding-left: clamp(0.65rem, 2vw, 1.4rem);
}.trailer-section{
  padding-inline: 0 !important;
}.trailer-frame{
  width: 100%;
  height: min(94svh, 58rem);
  aspect-ratio: auto;
  border: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #fff 8%, #fff 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #fff 8%, #fff 88%, transparent);
}.trailer-shade{
  background:
    radial-gradient(circle at 58% 42%, transparent 20%, rgba(3, 2, 8, 0.18) 48%, rgba(3, 2, 8, 0.86) 100%),
    linear-gradient(180deg, rgba(3, 2, 8, 0.64), transparent 24%, transparent 64%, rgba(3, 2, 8, 0.92));
}.trailer-label{
  left: clamp(1rem, 6vw, 5.5rem);
  bottom: clamp(2.4rem, 7vw, 5.5rem);
  padding-left: 1.3rem;
}.trailer-label::before,
.section-heading::after,
.stage-panel::before,
.sealed-whisper::before{
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.78));
  box-shadow: 0 0 14px rgba(176, 102, 255, 0.3);
}.split{
  border: 0;
  min-height: clamp(30rem, 64vw, 48rem);
  align-items: center;
}.lore-panel,
.board-control,
.index-copy,
.living-world,
.ritual,
.relic-list article{
  border: 0;
  background: transparent;
  box-shadow: none;
}.lore-panel{
  align-self: end;
  padding: 0 0 0 1.2rem;
  border-left: 1px solid rgba(201, 168, 76, 0.42);
}.core-stage{
  border: 0;
  background:
    radial-gradient(circle at 28% 48%, rgba(123, 47, 190, 0.3), transparent 17rem),
    radial-gradient(circle at 67% 52%, rgba(201, 168, 76, 0.08), transparent 20rem);
  box-shadow: none;
  padding-inline: 0;
  overflow: visible;
}.core-stage::after{
  inset: auto 18% 15% auto;
  width: 5rem;
  height: 5rem;
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-left: 0;
  border-bottom: 0;
  background: none;
}.stage-core{
  width: min(38vw, 520px);
}.core-stage-copy{
  padding-left: clamp(0.5rem, 3vw, 2rem);
}.core-button{
  justify-self: start;
  margin-left: clamp(2rem, 18vw, 18rem);
  border-radius: 999px;
}.evolution-spotlight{
  position: relative;
  grid-template-columns: minmax(17rem, 0.78fr) minmax(20rem, 1fr);
  gap: clamp(2rem, 7vw, 6rem);
}.evolution-portrait{
  border: 0;
  box-shadow: none;
  overflow: visible;
  filter: drop-shadow(0 34px 32px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 34px rgba(176, 102, 255, 0.2));
}.evolution-track{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  margin: 1.45rem 0 1.1rem;
}.evolution-track button{
  position: relative;
  min-height: auto;
  border: 0;
  background: transparent;
  color: rgba(207, 193, 160, 0.72);
  padding: 0.25rem 0 0.25rem 1.2rem;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.74rem;
  font-weight: 800;
  text-align: left;
}.evolution-track button::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}.evolution-track button.is-active{
  color: var(--bone);
  text-shadow: 0 0 16px rgba(176, 102, 255, 0.7);
  box-shadow: none;
}.stage-panel{
  border-top: 0;
  padding-top: 0;
}.stat-bars{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.9rem 0;
  color: var(--gold);
  font-family: "Cinzel", Georgia, serif;
  font-weight: 800;
}.stat-bar{
  display: inline-flex;
  gap: 0.35rem;
}.stat-bar + .stat-bar::before{
  content: "/";
  margin-right: 0.65rem;
  color: rgba(201, 168, 76, 0.46);
}.stat-bar-track,
.stat-bar-fill{
  display: none;
}.meter{
  height: 1px;
  border: 0;
  background: rgba(201, 168, 76, 0.2);
}.hero-gallery{
  position: relative;
  width: min(100%, 92rem);
  min-height: clamp(36rem, 58vw, 54rem);
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.1vw, 1rem);
  padding: clamp(1rem, 4vw, 3rem) 0;
  border: 0;
  background:
    radial-gradient(circle at 42% 46%, rgba(176, 102, 255, 0.14), transparent 26rem),
    linear-gradient(90deg, rgba(3, 2, 8, 0.88), transparent 35%, rgba(3, 2, 8, 0.76));
  box-shadow: none;
  overflow: hidden;
}.feature-card{
  flex: 0 0 clamp(9rem, 13vw, 14rem);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  opacity: 0.46;
  transform: translateY(calc((var(--card-depth, 0) + 1) * 0.35rem));
}.feature-card:nth-child(1){
  --card-depth: -2;
  flex-basis: clamp(17rem, 30vw, 28rem);
  margin-left: clamp(0rem, 4vw, 3rem);
  opacity: 1;
  z-index: 3;
}.feature-card:nth-child(2n){
  transform: translateY(2rem) scale(0.88);
}.feature-card:nth-child(3n){
  transform: translateY(-1.6rem) scale(0.82);
}.feature-card::before{
  inset: -18% -12%;
  opacity: 0.32;
}.feature-card:hover{
  box-shadow: none;
  opacity: 0.9;
}.feature-card img,
.feature-card video{
  max-height: none;
}.feature-card figcaption{
  position: absolute;
  left: 105%;
  bottom: 12%;
  width: min(20rem, 45vw);
  min-height: 0;
  padding: 0 0 0 1rem;
  border-left: 1px solid rgba(201, 168, 76, 0.42);
  text-align: left;
  opacity: 0;
  pointer-events: none;
}.feature-card:nth-child(1) figcaption,
.feature-card:hover figcaption{
  opacity: 1;
}.fated-index{
  align-items: end;
}.index-copy{
  padding: 0;
}.relics::after{
  background:
    radial-gradient(circle at 22% 45%, rgba(176, 102, 255, 0.14), transparent 30rem),
    linear-gradient(90deg, rgba(3, 2, 8, 0.98), rgba(3, 2, 8, 0.58), rgba(3, 2, 8, 0.9));
}.relic-list{
  position: relative;
  display: block;
  min-height: clamp(32rem, 48vw, 42rem);
  margin-top: clamp(2rem, 5vw, 4rem);
}.relic-card{
  position: absolute;
  max-width: 29rem;
  min-height: auto !important;
  padding: 0 !important;
  backdrop-filter: none;
}.relic-card:first-child{
  left: 0;
  top: 0;
  width: min(58vw, 34rem);
  max-width: 34rem;
  transform: scale(1.08);
}.relic-card:nth-child(2){
  right: clamp(7rem, 16vw, 16rem);
  top: 12%;
  width: min(24vw, 18rem);
  opacity: 0.54;
  filter: blur(0.2px) saturate(0.78);
}.relic-card:nth-child(3){
  right: 0;
  bottom: 8%;
  width: min(20vw, 15rem);
  opacity: 0.32;
  filter: blur(1px) saturate(0.55);
}.relic-card b{
  place-items: start;
  width: auto;
  height: auto;
  border: 0;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.85;
  opacity: 0.8;
}.relic-card .button{
  width: auto;
}.relic-sealed{
  background: transparent !important;
}.relic-sealed::before{
  inset: -12% -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 102, 255, 0.18), transparent 68%);
}.sealed-tooltip{
  inset: auto auto -1.6rem 0;
  border: 0;
  background: transparent;
  padding: 0;
}.living-world{
  width: 100%;
  min-height: min(78svh, 46rem);
  padding-inline: clamp(1rem, 5vw, 4rem);
  -webkit-mask-image: linear-gradient(180deg, transparent, #fff 12%, #fff 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #fff 12%, #fff 88%, transparent);
}.ritual{
  width: 100%;
  min-height: min(86svh, 52rem);
  display: grid;
  align-content: center;
  padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 5vw, 4rem);
}.ritual-bg{
  opacity: 0.42;
}.ritual::after{
  background:
    radial-gradient(circle at 50% 34%, rgba(123, 47, 190, 0.2), transparent 28rem),
    linear-gradient(90deg, rgba(3, 2, 8, 0.92), rgba(3, 2, 8, 0.46), rgba(3, 2, 8, 0.9));
}.witness-form{
  margin-top: 2.5rem;
}.witness-form div{
  padding: 0;
}

@media (max-width: 860px) {.hero-content::before{
    display: none;
  }.hero-stats,
.rarity-strip{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }.trailer-frame{
    height: 72svh;
  }.evolution-spotlight{
    grid-template-columns: 1fr;
  }.core-stage{
    grid-template-columns: 1fr;
    text-align: center;
  }.core-stage-copy{
    justify-self: center;
    padding-left: 0;
  }.core-button{
    justify-self: center;
    margin-left: 0;
  }.hero-gallery{
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    padding-inline: 0;
  }.feature-card,
.feature-card:nth-child(1){
    margin-left: 0;
    opacity: 0.9;
    transform: none;
  }.feature-card:nth-child(1){
    grid-column: 1 / -1;
    width: min(78vw, 21rem);
    justify-self: center;
  }.feature-card figcaption{
    position: static;
    width: auto;
    padding: 0.65rem 0 0;
    border-left: 0;
    text-align: center;
    opacity: 1;
  }.relic-list{
    display: grid !important;
    grid-template-columns: 1fr;
    min-height: 0;
    width: 100%;
    margin-left: 0;
    overflow: visible;
    padding: 0;
  }.relic-card,
.relic-card:first-child,
.relic-card:nth-child(2),
.relic-card:nth-child(3){
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    transform: none;
  }
}

@media (max-width: 560px) {.collector-note{
    grid-template-columns: 1fr;
  }.button-ghost{
    width: auto;
    align-self: flex-start;
  }.hero-stats,
.rarity-strip{
    font-size: 0.54rem;
  }.hero-stats > span + span,
.rarity-strip > span + span{
    padding-left: 0.45rem;
  }.trailer-frame{
    height: 62svh;
  }.evolution-track{
    display: grid;
    grid-template-columns: 1fr;
  }.ritual{
    min-height: 74svh;
  }
}body,
.fated,
.relics{
  overflow-x: hidden;
}/* ==========================================================================
   Corrective pass: restore affordance without returning to box-first UI
   ========================================================================== */
@media (min-width: 1180px){
  :root {
    --max: min(1560px, calc(100vw - 7rem));
  }

  body {
    font-size: clamp(16px, 0.92vw, 18px);
  }

  nav,
  .button,
  .core-button,
  .witness-form input {
    font-size: clamp(0.72rem, 0.58vw, 0.86rem);
  }
}.section-heading{
  max-width: 1560px;
}.core-stage::after{
  display: none;
}.board-section{
  background:
    radial-gradient(circle at 22% 28%, rgba(176, 102, 255, 0.08), transparent 26rem),
    linear-gradient(180deg, rgba(3, 2, 8, 0), rgba(9, 5, 15, 0.62) 48%, rgba(5, 3, 10, 0));
}.evolution-spotlight{
  grid-template-columns: minmax(13rem, 0.62fr) minmax(20rem, 1fr) minmax(20rem, 0.94fr);
  align-items: center;
}.evolution-origin-label{
  display: block;
  margin-bottom: 0.75rem;
  color: var(--gold);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.evolution-output,
.evolution-portrait{
  position: relative;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}.evolution-output video{
  display: block;
  width: 100%;
  height: auto;
  max-height: min(72svh, 42rem);
  object-fit: contain;
  filter: drop-shadow(0 34px 38px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 34px rgba(176, 102, 255, 0.24));
  transition: opacity 220ms ease, filter 420ms ease;
}.evolution-portrait img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}.evolution-choice-copy{
  margin-top: 1.35rem;
}.evolution-choice-copy span{
  display: block;
  color: var(--gold);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.evolution-choice-copy p{
  display: block;
  margin: 0.3rem 0 0;
  color: rgba(207, 193, 160, 0.76);
  font-family: "IM Fell English", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
}.evolution-track{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}.evolution-track button,
.evolution-track button.evolution-marker{
  min-height: 5.2rem;
  display: grid;
  grid-template-columns: 2.2rem 4.3rem 1fr;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.3rem 0.55rem 0;
  border: 0;
  border-bottom: 1px solid rgba(201, 168, 76, 0.28);
  background:
    radial-gradient(circle at 20% 42%, rgba(176, 102, 255, 0.1), transparent 5rem),
    linear-gradient(90deg, rgba(201, 168, 76, 0.08), transparent 78%);
  color: rgba(207, 193, 160, 0.82);
  cursor: pointer;
}.evolution-track button::before{
  display: none;
}.evolution-marker-num{
  color: rgba(201, 168, 76, 0.7);
  font-size: 0.68rem;
}.evolution-marker-thumb{
  width: 4.3rem;
  height: 4.3rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.22), 0 0 18px rgba(176, 102, 255, 0.12);
}.evolution-marker-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) brightness(0.78);
}.evolution-marker-name{
  color: inherit;
  font-size: 0.8rem;
  line-height: 1.1;
}.evolution-track button:hover,
.evolution-track button:focus-visible{
  color: var(--bone);
  outline: 0;
  border-color: rgba(200, 155, 255, 0.62);
  transform: translateY(-2px);
}.evolution-track button.is-active{
  color: var(--bone);
  border-color: rgba(201, 168, 76, 0.78);
  background:
    radial-gradient(circle at 22% 44%, rgba(176, 102, 255, 0.24), transparent 5rem),
    linear-gradient(90deg, rgba(201, 168, 76, 0.18), transparent 82%);
}.evolution-track button.is-active .evolution-marker-thumb{
  box-shadow: inset 0 0 0 1px rgba(233, 220, 187, 0.46), 0 0 28px rgba(176, 102, 255, 0.46);
}.gallery-console{
  width: min(var(--max), 100%);
  margin: 0 auto 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: clamp(0.8rem, 2vw, 1.4rem);
}.gallery-console p{
  margin: 0.2rem 0 0;
  color: var(--bone);
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}.gallery-counter{
  color: var(--gold);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}.gallery-arrows{
  display: flex;
  gap: 0.6rem;
}.gallery-arrows button{
  min-width: 3.4rem;
  min-height: 2.75rem;
  border: 0;
  border-bottom: 1px solid rgba(201, 168, 76, 0.54);
  background: transparent;
  color: var(--parchment);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}.gallery-arrows button:hover,
.gallery-arrows button:focus-visible{
  color: var(--bone);
  border-color: rgba(200, 155, 255, 0.86);
  outline: 0;
}.hero-gallery{
  min-height: 0;
  height: auto;
  display: flex;
  align-items: flex-end;
  gap: clamp(0.8rem, 1.4vw, 1.3rem);
  padding: clamp(0.8rem, 3vw, 2rem) max(clamp(1rem, 4vw, 3rem), calc((100% - var(--max)) / 2));
  background:
    radial-gradient(ellipse at 24% 48%, rgba(176, 102, 255, 0.12), transparent 28rem),
    linear-gradient(90deg, rgba(8, 5, 14, 0.72), rgba(8, 5, 14, 0.12) 54%, rgba(8, 5, 14, 0.22));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}.hero-gallery::-webkit-scrollbar{
  display: none;
}.feature-card,
.feature-card:nth-child(1),
.feature-card:nth-child(2n),
.feature-card:nth-child(3n){
  flex: 0 0 clamp(10rem, 13vw, 14.5rem);
  width: auto;
  min-width: 0;
  min-height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 0.72;
  transform: none;
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  scroll-snap-align: center;
}.feature-card.is-idle{
  animation: none;
}.feature-card.is-gallery-active{
  flex-basis: clamp(17rem, 25vw, 26rem);
  opacity: 1;
  z-index: 3;
}.feature-card img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  max-height: none;
}.feature-card figcaption,
.feature-card:nth-child(1) figcaption,
.feature-card:hover figcaption{
  position: static;
  width: auto;
  padding: 0.7rem 0 0;
  border-left: 0;
  text-align: left;
  opacity: 1;
  pointer-events: none;
}.feature-card:not(.is-gallery-active) figcaption span{
  display: none;
}.feature-card:focus-visible{
  outline: 2px solid rgba(200, 155, 255, 0.8);
  outline-offset: 0.35rem;
}.fated-index{
  margin-top: 1.3rem;
}.living-world{
  margin-bottom: -1px;
  background-color: #05030a;
}.living-world::after{
  background:
    radial-gradient(circle at 74% 38%, rgba(176, 102, 255, 0.1), transparent 24rem),
    linear-gradient(180deg, rgba(3, 2, 8, 0.55), rgba(3, 2, 8, 0.2) 45%, rgba(3, 2, 8, 0.68)),
    linear-gradient(90deg, rgba(3, 2, 8, 0.92), rgba(3, 2, 8, 0.42));
}.ritual{
  margin-top: 0;
  background-color: #05030a;
}.ritual::after{
  background:
    radial-gradient(ellipse at 50% 38%, rgba(233, 220, 187, 0.1), transparent 18rem),
    radial-gradient(circle at 50% 34%, rgba(123, 47, 190, 0.2), transparent 30rem),
    linear-gradient(180deg, rgba(3, 2, 8, 0.26), rgba(3, 2, 8, 0.5) 54%, rgba(3, 2, 8, 0.82));
}.ritual h2{
  font-size: clamp(2.6rem, 6.2vw, 5.7rem);
  text-shadow: 0 0 28px rgba(176, 102, 255, 0.32), 0 3px 18px rgba(0, 0, 0, 0.8);
}.ritual p{
  color: var(--bone);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}.witness-form{
  width: min(760px, 100%);
}.witness-form input,
.witness-form button{
  min-height: clamp(3.2rem, 4.2vw, 3.85rem);
}

@media (max-width: 980px) {.evolution-spotlight{
    grid-template-columns: minmax(12rem, 0.75fr) minmax(16rem, 1fr);
  }.evolution-output{
    grid-column: 2;
    grid-row: 1;
  }.board-control{
    grid-column: 1 / -1;
  }.evolution-track{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {.gallery-console{
    grid-template-columns: 1fr auto;
  }.gallery-arrows{
    grid-column: 1 / -1;
  }.hero-gallery{
    display: flex;
    padding-inline: 1rem;
    overflow-x: auto;
  }.feature-card,
.feature-card:nth-child(1),
.feature-card:nth-child(2n),
.feature-card:nth-child(3n){
    flex-basis: 44vw;
  }.feature-card.is-gallery-active{
    flex-basis: min(76vw, 21rem);
  }.evolution-spotlight,
.evolution-output,
.board-control{
    grid-column: auto;
    grid-row: auto;
  }.evolution-spotlight{
    grid-template-columns: 1fr;
  }.evolution-track{
    grid-template-columns: 1fr;
  }.evolution-track button,
.evolution-track button.evolution-marker{
    grid-template-columns: 2rem 3.6rem 1fr;
    min-height: 4.6rem;
  }.evolution-marker-thumb{
    width: 3.6rem;
    height: 3.6rem;
  }
}.core-stage{
  background:
    radial-gradient(ellipse at 30% 48%, rgba(176, 102, 255, 0.2), transparent 20rem),
    radial-gradient(ellipse at 66% 52%, rgba(201, 168, 76, 0.06), transparent 18rem);
}.stage-core{
  opacity: 0.96;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 48%, #fff 48%, rgba(255, 255, 255, 0.7) 64%, transparent 84%);
  mask-image: radial-gradient(ellipse 68% 62% at 50% 48%, #fff 48%, rgba(255, 255, 255, 0.7) 64%, transparent 84%);
}.evolution-spotlight{
  background:
    radial-gradient(ellipse at 48% 48%, rgba(176, 102, 255, 0.12), transparent 34rem),
    linear-gradient(180deg, transparent, rgba(9, 5, 15, 0.42) 52%, transparent);
}.evolution-output{
  isolation: isolate;
}.evolution-output::before{
  content: "";
  position: absolute;
  inset: 8% -8% 6%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(176, 102, 255, 0.22), transparent 58%),
    radial-gradient(ellipse at 50% 72%, rgba(201, 168, 76, 0.08), transparent 48%);
  filter: blur(18px);
  pointer-events: none;
}.evolution-output video{
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 32px 36px rgba(0, 0, 0, 0.54)) drop-shadow(0 0 30px rgba(176, 102, 255, 0.22));
  -webkit-mask-image: radial-gradient(ellipse 74% 70% at 50% 48%, #fff 58%, rgba(255, 255, 255, 0.86) 74%, transparent 96%);
  mask-image: radial-gradient(ellipse 74% 70% at 50% 48%, #fff 58%, rgba(255, 255, 255, 0.86) 74%, transparent 96%);
}.evolution-choice-copy{
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
}

/* ========================================================================== 
   Final focus pass: world -> core -> evolution -> heroes -> relics -> witness
   ========================================================================== */
html,
body {
  overflow-x: hidden;
}

section:not(.hero) {
  padding-top: clamp(3rem, 6.5vw, 6.2rem);
  padding-bottom: clamp(3rem, 6.5vw, 6.2rem);
}

.site-header {
  background: linear-gradient(180deg, rgba(3, 2, 8, 0.78), rgba(3, 2, 8, 0));
}

nav a,
.lang-select {
  color: rgba(233, 220, 187, 0.88);
  font-size: clamp(0.72rem, 0.72vw, 0.86rem);
}

.button,
.core-button {
  border-radius: 999px;
  clip-path: none;
}

.button-ghost {
  clip-path: none;
}

.hero {
  min-height: min(94svh, 58rem);
}

.hero-actions {
  margin-top: 1.3rem;
}

.hero-stats {
  left: clamp(1rem, 5vw, 4rem);
  right: auto;
  bottom: clamp(1rem, 4vw, 2rem);
  width: min(42rem, calc(100% - 2rem));
  justify-content: flex-start;
  gap: 0;
  border-top: 1px solid rgba(201, 168, 76, 0.32);
  background: none;
}

.hero-stats > span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.42rem;
  min-width: 0;
}

.hero-stats > span + span {
  margin-left: 1rem;
  padding-left: 1rem;
}

.hero-stats strong {
  display: inline;
  font-size: 1.05rem;
}

.trailer-frame {
  height: min(86svh, 52rem);
}

.split {
  min-height: clamp(24rem, 48vw, 38rem);
}

.chapter-copy p {
  max-width: 48rem;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  font-style: normal;
  line-height: 1.62;
}

.board-section {
  padding-bottom: clamp(2.8rem, 5vw, 5rem) !important;
}

.core-stage {
  min-height: clamp(20rem, 32vw, 29rem);
  gap: clamp(1rem, 3vw, 3rem);
}

.core-stage-copy p {
  font-size: clamp(1.06rem, 1.55vw, 1.34rem);
}

.evolution-spotlight {
  margin-top: clamp(1.4rem, 3.2vw, 2.8rem);
  grid-template-columns: minmax(13rem, 0.68fr) minmax(18rem, 0.95fr) minmax(20rem, 0.9fr);
  gap: clamp(1.6rem, 4vw, 4.2rem);
}

.evolution-portrait img {
  max-height: min(70svh, 34rem);
}

.evolution-output video {
  max-height: min(70svh, 35rem);
}

.board-control {
  width: 100%;
}

.evolution-track {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fated {
  padding-top: clamp(3rem, 6vw, 5.5rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3.4rem) !important;
  background:
    radial-gradient(ellipse at 42% 18%, rgba(176, 102, 255, 0.09), transparent 28rem),
    linear-gradient(180deg, transparent, rgba(5, 3, 10, 0.82));
}

.gallery-console {
  margin-bottom: 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.hero-gallery {
  max-width: 100%;
  gap: clamp(0.8rem, 1.2vw, 1.1rem);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
}

.hero-gallery:active {
  cursor: grabbing;
}

.feature-card,
.feature-card:nth-child(1),
.feature-card:nth-child(2n),
.feature-card:nth-child(3n) {
  flex-basis: clamp(9.5rem, 12vw, 13rem);
  opacity: 0.78;
}

.feature-card.is-gallery-active {
  flex-basis: clamp(17rem, 24vw, 24rem);
}

.feature-card:not(.is-gallery-active) figcaption {
  opacity: 0.82;
}

.fated-index {
  margin-top: 0.9rem;
  grid-template-columns: minmax(0, 1fr);
}

.index-copy {
  display: none;
}

.rarity-strip {
  display: flex;
  width: min(var(--max), 100%);
  margin: 0 auto;
  gap: 0.7rem;
  align-items: baseline;
  justify-content: center;
  border-top: 0;
  background: none;
  padding-top: 0;
}

.rarity-strip > span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.36rem;
  color: rgba(207, 193, 160, 0.76);
}

.rarity-strip > span + span {
  border-left: 0;
  padding-left: 0;
}

.rarity-strip > span + span::before {
  content: "/";
  margin-right: 0.65rem;
  color: rgba(201, 168, 76, 0.5);
}

.rarity-strip strong {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.relics {
  margin-top: 0;
  min-height: min(82svh, 48rem);
  padding-top: clamp(3rem, 5vw, 5rem) !important;
}

.relic-list {
  margin-top: clamp(1.6rem, 3vw, 2.8rem);
}

.relic-card:first-child {
  transform: none;
}

.living-world {
  min-height: min(62svh, 38rem);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.world-bg {
  opacity: 0.68;
  filter: saturate(1.05) contrast(1.08);
}

.living-world::after {
  background:
    radial-gradient(circle at 72% 46%, rgba(176, 102, 255, 0.08), transparent 24rem),
    linear-gradient(90deg, rgba(3, 2, 8, 0.82), rgba(3, 2, 8, 0.32) 58%, rgba(3, 2, 8, 0.44));
}

.living-world p {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.62;
}

.world-cta-note {
  grid-column: 1 / -1;
}

.ritual {
  min-height: min(76svh, 46rem);
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.ritual-bg {
  opacity: 0.62;
  filter: saturate(1.04) contrast(1.08);
}

.ritual::after {
  background:
    radial-gradient(ellipse at 50% 36%, rgba(233, 220, 187, 0.12), transparent 20rem),
    radial-gradient(circle at 50% 34%, rgba(123, 47, 190, 0.18), transparent 30rem),
    linear-gradient(180deg, rgba(3, 2, 8, 0.2), rgba(3, 2, 8, 0.48) 62%, rgba(3, 2, 8, 0.78));
}

.ritual > p:not(.kicker):not(.kickstarter-window):not(.witness-counter) {
  font-size: clamp(1.04rem, 1.45vw, 1.24rem);
  line-height: 1.58;
}

@media (max-width: 980px) {
  .evolution-spotlight {
    grid-template-columns: minmax(12rem, 0.8fr) minmax(16rem, 1fr);
  }

  .board-control {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  section:not(.hero) {
    padding-top: 2.7rem;
    padding-bottom: 2.7rem;
  }

  .hero-art {
    max-width: none;
  }

  .hero-stats {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.58rem;
  }

  .hero-stats > span + span {
    margin-left: 0.55rem;
    padding-left: 0.55rem;
  }

  .trailer-frame {
    height: 58svh;
  }

  .split {
    min-height: 24rem;
  }

  .core-stage,
  .evolution-spotlight {
    grid-template-columns: 1fr;
  }

  .stage-core {
    width: min(72vw, 280px);
  }

  .evolution-portrait,
  .evolution-output {
    width: min(100%, 22rem);
    margin: 0 auto;
  }

  .evolution-track {
    grid-template-columns: 1fr;
  }

  .gallery-console {
    grid-template-columns: 1fr auto;
  }

  .gallery-arrows {
    grid-column: 1 / -1;
  }

  .feature-card,
  .feature-card:nth-child(1),
  .feature-card:nth-child(2n),
  .feature-card:nth-child(3n) {
    flex-basis: 42vw;
  }

  .feature-card.is-gallery-active {
    flex-basis: min(76vw, 21rem);
  }

  .rarity-strip {
    justify-content: flex-start;
    overflow: hidden;
    font-size: 0.6rem;
  }

  .relics {
    min-height: auto;
  }

  .living-world {
    min-height: 31rem;
    display: grid;
    grid-template-columns: 1fr;
    align-content: end;
    gap: 0.75rem;
  }

  .living-world::after {
    background:
      linear-gradient(180deg, rgba(3, 2, 8, 0.28), rgba(3, 2, 8, 0.58) 54%, rgba(3, 2, 8, 0.86));
  }

  .world-bg {
    opacity: 0.72;
  }

  .living-world .button {
    width: fit-content;
  }

  .ritual {
    min-height: 34rem;
    text-align: left;
  }

  .ritual p,
  .ritual h2,
  .witness-form {
    margin-left: 0;
    margin-right: 0;
  }
}

.evolution-output {
  background-image: var(--evolution-poster);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.evolution-output video {
  mix-blend-mode: normal;
}

@media (max-width: 760px) {
  .evolution-output {
    min-height: 24rem;
  }

  .evolution-output video {
    width: 100%;
    min-height: 24rem;
    object-fit: contain;
  }
}

/* ==========================================================================
   Overlap rescue pass: compact, readable flow on desktop and mobile
   ========================================================================== */
.hero-stats {
  align-items: center;
}

.evolution-spotlight {
  align-items: center;
}

.evolution-portrait,
.evolution-output {
  align-self: center;
  min-width: 0;
}

.evolution-portrait img {
  max-height: min(64svh, 31rem);
  object-fit: contain;
}

.evolution-output {
  min-height: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
}

.evolution-output video {
  width: 100%;
  max-height: min(64svh, 31rem);
  min-height: 0;
  object-fit: contain;
}

.board-control {
  min-width: 0;
  align-self: center;
}

.relic-card {
  min-width: 0;
}

.living-world,
.ritual {
  min-width: 0;
}

@media (max-width: 980px) {
  .evolution-spotlight {
    grid-template-columns: minmax(11rem, 0.76fr) minmax(14rem, 1fr);
    gap: 1.25rem;
  }

  .evolution-output {
    grid-column: 2;
  }

  .board-control {
    grid-column: 1 / -1;
    max-width: 44rem;
    justify-self: center;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  header {
    padding: 0.72rem 0;
    background: rgba(3, 2, 8, 0.88);
    backdrop-filter: blur(14px);
  }

  nav {
    gap: 0.65rem;
    font-size: 0.68rem;
  }

  .hero {
    min-height: auto;
    padding-top: 6rem;
    padding-bottom: 2.8rem;
  }

  .hero-actions {
    align-items: flex-start;
  }

  .hero-stats {
    position: static;
    margin-top: 1rem;
    gap: 0.4rem;
  }

  .board-section {
    padding-top: 2.4rem !important;
    padding-bottom: 2.35rem !important;
  }

  .evolution-spotlight {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.75rem;
    margin-top: 1.1rem;
  }

  .evolution-portrait,
  .evolution-output {
    width: 100%;
    max-width: 100%;
  }

  .evolution-portrait img,
  .evolution-output video {
    max-height: min(38svh, 19rem);
  }

  .evolution-output {
    min-height: 0 !important;
    aspect-ratio: 2 / 3;
    grid-column: auto;
    grid-row: auto;
  }

  .evolution-output video {
    min-height: 0 !important;
  }

  .board-control {
    grid-column: 1 / -1 !important;
    width: 100%;
    padding: 0.9rem !important;
    border-radius: 0.75rem;
  }

  .board-control h3 {
    font-size: clamp(1.35rem, 8vw, 2.15rem);
  }

  .board-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .board-stats span {
    font-size: 0.62rem;
  }

  .board-stats strong {
    font-size: 0.95rem;
  }

  .evolution-track {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem;
  }

  .evolution-marker {
    min-height: 4rem;
    padding: 0.55rem;
  }

  .evolution-marker img {
    width: 2.35rem;
    height: 2.35rem;
  }

  .gallery-console {
    align-items: end;
    gap: 0.65rem;
  }

  .hero-gallery {
    width: calc(100vw - 1rem);
    margin-left: -0.5rem;
    padding-inline: 0.5rem;
    overscroll-behavior-x: contain;
  }

  .feature-card,
  .feature-card:nth-child(1),
  .feature-card:nth-child(2n),
  .feature-card:nth-child(3n) {
    flex: 0 0 48vw;
  }

  .feature-card.is-gallery-active {
    flex: 0 0 min(72vw, 18rem);
  }

  .relics {
    padding-top: 2.25rem !important;
    padding-bottom: 2.5rem !important;
  }

  .relic-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    overflow: visible;
    gap: 0.7rem;
  }

  .relic-list article,
  .relic-card:first-child,
  .relic-card:nth-child(2),
  .relic-card:nth-child(3) {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    min-height: 0;
    flex: initial;
  }

  .living-world {
    min-height: 29rem;
    padding: 2rem 1rem;
    align-content: end;
    grid-template-columns: 1fr !important;
  }

  .living-world p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .living-world h2 {
    max-width: 9ch;
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1.08;
   }

  .living-world .button {
    width: max-content;
    max-width: 100%;
  }

  .world-bg {
    opacity: 0.78;
    object-position: 58% center;
  }

  .living-world::after {
    background:
      linear-gradient(180deg, rgba(3, 2, 8, 0.16), rgba(3, 2, 8, 0.34) 42%, rgba(3, 2, 8, 0.78)),
      linear-gradient(90deg, rgba(3, 2, 8, 0.78), rgba(3, 2, 8, 0.22));
  }

  .ritual {
    width: 100%;
    min-height: auto;
    margin: 0 auto;
    padding: 2.5rem 1rem 3rem;
    display: block;
  }

  .ritual h2 {
    max-width: 9.5ch;
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1.12;
    margin-top: 0.25rem;
  }

  .ritual > p:not(.kicker):not(.kickstarter-window):not(.witness-counter) {
    font-size: 1rem;
    line-height: 1.55;
    margin-top: 0.9rem;
  }

.witness-form {
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 1rem;
  }
}

.section-heading::after,
.core-stage::after,
.stage-panel::before,
.sealed-whisper::before {
  content: none !important;
  display: none !important;
}

.section-heading h2 {
  max-width: 46rem;
  line-height: 1.06;
}

.fated .section-heading {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
}

.fated .section-heading h2 {
  max-width: 42rem;
  font-size: clamp(2.2rem, 4.1vw, 3.8rem);
  line-height: 1.18;
}

.fated .gallery-console {
  margin-top: clamp(1rem, 2vw, 1.75rem);
}

@media (max-width: 760px) {
  .section-heading h2 {
    max-width: 100%;
    line-height: 1.08;
  }

  .fated .section-heading {
    margin-bottom: 0.9rem;
  }

  .fated .section-heading h2 {
    font-size: clamp(1.9rem, 10vw, 2.65rem);
    line-height: 1.14;
  }
}

/* ==========================================================================
   Readability and scroll rescue pass
   ========================================================================== */
h1,
h2,
h3,
p,
a,
button,
span,
small,
strong,
em {
  overflow-wrap: anywhere;
}

.fated .section-heading h2,
.living-world h2,
.ritual h2 {
  word-break: normal;
  hyphens: none;
}

.fated .section-heading h2 {
  max-width: 35rem;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1.32;
}

h2,
.chapter h2,
.board-section h2,
.relics h2 {
  line-height: 1.18;
  padding-bottom: 0.08em;
}

h3 {
  line-height: 1.18;
  padding-bottom: 0.06em;
}

.gallery-console {
  position: relative;
  z-index: 3;
  row-gap: 0.75rem;
}

section {
  scroll-margin-top: 6rem;
}

.site-header {
  position: sticky;
  top: 0;
  background: rgba(3, 2, 8, 0.94);
  backdrop-filter: blur(14px);
}

.hero-gallery {
  position: relative;
  z-index: 2;
  touch-action: pan-y pinch-zoom;
}

@media (max-width: 980px) {
  .fated .section-heading h2 {
    max-width: 28rem;
    font-size: clamp(1.9rem, 5.4vw, 2.8rem);
    line-height: 1.28;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .site-header {
    position: sticky;
    top: 0;
    background: rgba(3, 2, 8, 0.94);
  }

  section {
    scroll-margin-top: 5.5rem;
  }

  main,
  section,
  .hero-content,
  .section-heading,
  .board-shell,
  .evolution-spotlight,
  .board-control,
  .gallery-console,
  .relic-content,
  .living-world,
  .ritual {
    max-width: 100%;
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
    line-height: 1.18;
    padding-bottom: 0.08em;
  }

  .kicker,
  .seal,
  nav a,
  .button,
  .gallery-arrows button,
  .evolution-origin-label,
  .evolution-marker-name,
  .kickstarter-window {
    overflow-wrap: normal;
    word-break: normal;
  }

  nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    line-height: 1.25;
  }

  .hero-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .hero-stats {
    width: 100%;
    line-height: 1.35;
  }

  .hero-stats > span {
    white-space: normal;
  }

  .evolution-spotlight {
    align-items: start;
  }

  .evolution-origin-label {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
  }

  .board-backstory,
  .stage-flavor,
  .stage-ability,
  .relic-intro,
  .living-world p,
  .ritual p {
    max-width: 100%;
  }

  .evolution-marker {
    min-width: 0;
  }

  .evolution-marker-name {
    font-size: 0.56rem;
    line-height: 1.15;
  }

  .gallery-console {
    grid-template-columns: 1fr;
    align-items: start;
    margin-bottom: 0.75rem;
  }

  .gallery-arrows {
    grid-column: auto;
  }

  .hero-gallery {
    width: 100%;
    margin-left: 0;
    padding-inline: 0;
    touch-action: pan-y pinch-zoom;
    scroll-snap-type: none;
  }

  .feature-card,
  .feature-card:nth-child(1),
  .feature-card:nth-child(2n),
  .feature-card:nth-child(3n) {
    flex-basis: 50vw;
  }

  .feature-card.is-gallery-active {
    flex-basis: min(78vw, 18rem);
  }

  .relic-card h3,
  .relic-card p,
  .relic-card small {
    max-width: 100%;
  }

  .living-world h2 {
    max-width: 8.5ch;
    line-height: 1.14;
  }

  .ritual h2 {
    max-width: 9.5ch;
    line-height: 1.14;
  }

  .witness-form input,
  .witness-form button {
    min-width: 0;
    width: 100%;
    flex: 0 0 auto;
  }
}

.witness-form input {
  flex: 1 1 auto;
}

@media (max-width: 760px) {
  .witness-form input {
    flex: 0 0 auto !important;
    min-height: 3.1rem !important;
    height: auto !important;
    border-radius: 0 !important;
  }

  .witness-form button {
    flex: 0 0 auto !important;
  }
}

/* ==========================================================================
   Stable carousel pass: no native horizontal scroll, no gesture lock
   ========================================================================== */
.hero-gallery {
  display: grid !important;
  grid-template-columns: minmax(7rem, 0.55fr) minmax(8rem, 0.72fr) minmax(15rem, 1.18fr) minmax(8rem, 0.72fr) minmax(7rem, 0.55fr);
  align-items: end;
  justify-content: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  overflow: visible !important;
  padding-inline: 0 !important;
  touch-action: pan-y pinch-zoom !important;
}

.feature-card,
.feature-card:nth-child(1),
.feature-card:nth-child(2n),
.feature-card:nth-child(3n) {
  display: none;
  width: 100%;
  min-width: 0;
  flex: initial !important;
  scroll-snap-align: none;
  transform: none !important;
}

.feature-card.is-gallery-window {
  display: block;
}

.feature-card.is-gallery-prev-2 {
  grid-column: 1;
  grid-row: 1;
  opacity: 0.52;
}

.feature-card.is-gallery-prev-1 {
  grid-column: 2;
  grid-row: 1;
  opacity: 0.72;
}

.feature-card.is-gallery-active {
  grid-column: 3;
  grid-row: 1;
  opacity: 1;
}

.feature-card.is-gallery-next-1 {
  grid-column: 4;
  grid-row: 1;
  opacity: 0.72;
}

.feature-card.is-gallery-next-2 {
  grid-column: 5;
  grid-row: 1;
  opacity: 0.52;
}

.feature-card img {
  width: 100%;
  max-height: min(64svh, 30rem);
}

.feature-card:not(.is-gallery-active) img {
  max-height: min(48svh, 21rem);
}

.feature-card figcaption {
  min-height: 2.7rem;
}

@media (max-width: 980px) {
  .hero-gallery {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.2fr) minmax(0, 0.72fr);
    gap: 0.55rem;
  }

  .feature-card.is-gallery-prev-2,
  .feature-card.is-gallery-next-2 {
    display: none;
  }

  .feature-card.is-gallery-prev-1 {
    grid-column: 1;
  }

  .feature-card.is-gallery-active {
    grid-column: 2;
  }

  .feature-card.is-gallery-next-1 {
    grid-column: 3;
  }
}

@media (max-width: 760px) {
  .hero-gallery {
    width: 100% !important;
    margin-left: 0 !important;
    grid-template-columns: minmax(0, 1fr) minmax(4.8rem, 0.34fr);
    align-items: end;
    gap: 0.55rem;
  }

  .feature-card.is-gallery-prev-1,
  .feature-card.is-gallery-prev-2,
  .feature-card.is-gallery-next-2 {
    display: none;
  }

  .feature-card.is-gallery-active {
    grid-column: 1;
  }

  .feature-card.is-gallery-next-1 {
    display: block;
    grid-column: 2;
    opacity: 0.58;
  }

  .feature-card img {
    max-height: min(58svh, 25rem);
  }

  .feature-card:not(.is-gallery-active) img {
    max-height: min(34svh, 14rem);
  }

  .feature-card:not(.is-gallery-active) figcaption {
    display: none;
  }
}

/* ==========================================================================
   Evolution reset: clear origin -> evolved form -> choices
   ========================================================================== */
.evolution-spotlight {
  width: min(1320px, calc(100% - clamp(2rem, 5vw, 5rem)));
  margin: clamp(2.2rem, 5vw, 4.5rem) auto 0;
  display: grid !important;
  grid-template-columns: minmax(8rem, 0.42fr) minmax(18rem, 0.9fr) minmax(19rem, 0.95fr);
  grid-template-areas: "origin evolved control";
  align-items: center;
  gap: clamp(1.6rem, 3.2vw, 3.4rem);
  overflow: visible;
}

.evolution-portrait {
  grid-area: origin;
  width: 100%;
  max-width: 12rem;
  justify-self: end;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.evolution-output {
  grid-area: evolved;
  width: 100%;
  max-width: 22rem;
  justify-self: center;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.board-control {
  grid-area: control;
  width: 100%;
  max-width: 25rem;
  justify-self: start;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.evolution-portrait img,
.evolution-output video {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0 !important;
  max-height: min(72svh, 34rem);
  object-fit: contain;
}

.evolution-portrait img {
  max-height: min(54svh, 24rem);
  opacity: 0.72;
}

.evolution-output::before,
.evo-veins,
.evo-vignette {
  display: none !important;
}

.evolution-origin-label {
  display: block;
  position: static;
  margin-bottom: 0.45rem;
  color: var(--gold);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-control .seal {
  display: block;
  margin-bottom: 0.45rem;
}

.board-control h3 {
  font-size: clamp(1.7rem, 2.7vw, 2.45rem);
  line-height: 1.12;
}

.board-backstory {
  margin-top: 0.65rem;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.48;
  max-height: 8.5rem;
  overflow: hidden;
}

.evolution-choice-copy {
  margin-top: 1rem;
}

.evolution-track {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.evolution-track button,
.evolution-track button.evolution-marker {
  min-height: 4rem;
  grid-template-columns: auto 1fr;
  padding: 0.55rem;
}

.stage-panel {
  margin-top: 1rem;
  padding-top: 0.9rem;
}

@media (max-width: 980px) {
  .evolution-spotlight {
    width: min(760px, calc(100% - 2rem));
    grid-template-columns: minmax(7rem, 0.38fr) minmax(0, 1fr);
    grid-template-areas:
      "origin evolved"
      "control control";
    gap: 1rem;
  }

  .evolution-portrait,
  .evolution-output {
    max-width: none;
    justify-self: stretch;
  }

  .board-control {
    max-width: 100%;
    justify-self: stretch;
    margin-top: 0.3rem;
  }
}

@media (max-width: 760px) {
  .evolution-spotlight {
    width: calc(100% - 2rem) !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "origin"
      "evolved"
      "control";
    gap: 1rem;
    margin-top: 1.4rem;
  }

  .evolution-portrait,
  .evolution-output {
    justify-self: center;
  }

  .evolution-portrait {
    width: min(42vw, 8.8rem);
  }

  .evolution-output {
    width: min(100%, 18.5rem);
  }

  .evolution-portrait img,
  .evolution-output video {
    max-height: min(52svh, 25rem);
  }

  .evolution-portrait img {
    max-height: 12.5rem;
  }

  .board-control {
    width: 100%;
  }

  .board-control h3 {
    font-size: clamp(1.55rem, 8vw, 2.25rem);
  }

  .board-backstory {
    font-size: 0.98rem;
    line-height: 1.5;
    max-height: none;
  }

  .evolution-choice-copy p,
  .board-backstory {
    display: none;
  }

  .evolution-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .evolution-track button,
  .evolution-track button.evolution-marker {
    min-height: 3.3rem;
    border-radius: 0 !important;
    grid-template-columns: auto 1fr;
    gap: 0.45rem;
    padding: 0.48rem;
  }

  .evolution-marker-thumb {
    width: 2.35rem;
    height: 2.35rem;
  }

  .evolution-marker-name {
    font-size: 0.54rem;
    line-height: 1.12;
  }

  .stage-panel {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
  }

  .stage-flavor {
    margin-bottom: 0.55rem;
  }

  .stage-ability {
    font-size: 0.9rem;
    line-height: 1.35;
  }
}

/* ==========================================================================
   Evolution simplification: remove duplicated origin card from the active scene
   ========================================================================== */
.evolution-spotlight {
  grid-template-columns: minmax(18rem, 0.92fr) minmax(20rem, 0.88fr) !important;
  grid-template-areas: "evolved control" !important;
  width: min(1040px, calc(100% - clamp(2rem, 6vw, 6rem))) !important;
}

.evolution-portrait {
  display: none !important;
}

.evolution-output {
  max-width: 21rem;
  justify-self: end;
}

.evolution-output video {
  max-height: min(68svh, 32rem);
}

.board-control {
  max-width: 24rem;
  justify-self: start;
}

.board-backstory {
  display: none;
}

.evolution-choice-copy p {
  display: none;
}

.stage-panel {
  border-top-color: rgba(201, 168, 76, 0.18);
}

@media (max-width: 980px) {
  .evolution-spotlight {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) !important;
    grid-template-areas: "evolved control" !important;
    width: min(820px, calc(100% - 2rem)) !important;
  }

  .evolution-output {
    justify-self: stretch;
  }
}

@media (max-width: 760px) {
  .evolution-spotlight {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "evolved"
      "control" !important;
    width: calc(100% - 2rem) !important;
    gap: 0.85rem;
  }

  .evolution-output {
    width: min(100%, 17rem);
    max-width: 17rem;
    justify-self: center;
  }

  .evolution-output video {
    max-height: min(47svh, 22.5rem);
  }

  .board-control {
    max-width: 100%;
  }

  .board-control .seal {
    margin-bottom: 0.25rem;
  }

  .board-control h3 {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .evolution-choice-copy {
    margin-top: 0.65rem;
  }

  .stage-panel {
    margin-top: 0.65rem;
  }
}

/* ==========================================================================
   Evolution cleanup pass: reduce visual density after audit
   ========================================================================== */
.board-section {
  padding-bottom: clamp(2.6rem, 5vw, 4.5rem) !important;
}

.fated {
  padding-top: clamp(3.2rem, 6vw, 6rem) !important;
}

.evolution-spotlight {
  align-items: center;
  margin-top: clamp(1.6rem, 3vw, 2.6rem) !important;
}

.evolution-output {
  max-width: 19rem;
}

.evolution-output video {
  max-height: min(60svh, 29rem);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.42));
}

.board-control {
  max-width: 22rem;
}

.evolution-track {
  gap: 0.42rem;
}

.evolution-track button,
.evolution-track button.evolution-marker {
  min-height: 3.35rem;
}

.evolution-marker-thumb {
  width: 2.5rem;
  height: 2.5rem;
}

.stage-flavor {
  display: none;
}

.stat-bars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.stat-bar {
  display: inline-flex;
  width: auto;
  gap: 0.35rem;
}

.stage-ability {
  font-size: 0.92rem;
  line-height: 1.36;
}

@media (max-width: 980px) {
  .evolution-output {
    max-width: 17rem;
  }

  .board-control {
    max-width: 20rem;
  }
}

@media (max-width: 760px) {
  .board-section {
    padding-top: 2.1rem !important;
    padding-bottom: 2.1rem !important;
  }

  .evolution-spotlight {
    gap: 0.65rem;
    margin-top: 1rem !important;
  }

  .evolution-output {
    width: min(100%, 14.5rem);
    max-width: 14.5rem;
  }

  .evolution-output video {
    max-height: min(38svh, 18.5rem);
  }

  .board-control {
    max-width: 100%;
  }

  .board-control h3 {
    font-size: clamp(1.35rem, 6.2vw, 1.8rem);
  }

  .evolution-track {
    gap: 0.4rem;
  }

  .evolution-track button,
  .evolution-track button.evolution-marker {
    min-height: 3rem;
  }

  .evolution-marker-thumb {
    width: 2rem;
    height: 2rem;
  }

  .stage-panel {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
  }

  .stage-ability {
    font-size: 0.86rem;
  }
}

/* ==========================================================================
   Mobile stability pass: static media, simpler scroll, shorter dense sections
   ========================================================================== */
@media (max-width: 760px), (pointer: coarse) {
  body.mobile-safe-motion .void-canvas {
    display: none !important;
  }

  body.mobile-safe-motion *,
  body.mobile-safe-motion *::before,
  body.mobile-safe-motion *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  video,
  canvas,
  .hero-gallery,
  .feature-card,
  .evolution-output {
    touch-action: pan-y pinch-zoom !important;
  }

  video {
    pointer-events: none;
  }

  #evolutionPortrait,
  .evolution-output video {
    pointer-events: auto !important;
  }

  .board-section {
    padding-top: 1.8rem !important;
    padding-bottom: 1.8rem !important;
  }

  .fated {
    padding-top: 2.6rem !important;
  }

  .core-stage {
    min-height: auto !important;
    padding: 0.8rem !important;
    gap: 0.65rem !important;
  }

  .stage-core {
    width: min(54vw, 12rem) !important;
    max-height: 12rem !important;
  }

  .core-stage-copy p {
    font-size: 0.92rem;
    line-height: 1.42;
  }

  .core-button {
    min-height: 2.75rem;
    width: 100%;
  }

  .evolution-spotlight {
    padding: 0 !important;
    gap: 0.55rem !important;
  }

  .evolution-output {
    width: min(100%, 13rem) !important;
    max-width: 13rem !important;
  }

  .evolution-origin-label {
    margin-bottom: 0.25rem;
    font-size: 0.54rem;
  }

  .evolution-output video {
    max-height: 16.5rem !important;
    filter: none !important;
  }

  .board-control {
    padding: 0 !important;
  }

  .board-control h3 {
    font-size: clamp(1.25rem, 5.8vw, 1.65rem) !important;
  }

  .evolution-choice-copy {
    margin-top: 0.45rem !important;
  }

  .evolution-track {
    gap: 0.32rem !important;
  }

  .evolution-track button,
  .evolution-track button.evolution-marker {
    min-height: 2.75rem !important;
    padding: 0.38rem !important;
  }

  .evolution-marker-thumb {
    width: 1.75rem !important;
    height: 1.75rem !important;
  }

  .evolution-marker-name {
    font-size: 0.5rem !important;
  }

  .stage-panel {
    margin-top: 0.45rem !important;
    padding-top: 0.45rem !important;
  }

  .stat-bars {
    gap: 0.5rem !important;
  }

  .stage-ability {
    font-size: 0.82rem !important;
    line-height: 1.32 !important;
  }

  .hero-gallery {
    overflow: hidden !important;
  }

  .feature-card:not(.is-gallery-active) {
    pointer-events: none;
  }
}

/* ==========================================================================
   Mobile/tablet compression pass: shorten board and clip decorative overflow
   ========================================================================== */
@media (max-width: 980px), (pointer: coarse) {
  .hero,
  .chapter,
  .relics,
  .living-world,
  .ritual {
    overflow: hidden !important;
  }

  .hero-art,
  .chapter-bg,
  .relic-art,
  .world-bg {
    max-width: none;
    pointer-events: none;
  }

  .board-section .section-heading {
    margin-bottom: 0.75rem !important;
  }

  .board-section h2 {
    max-width: 12ch;
    font-size: clamp(1.65rem, 7vw, 2.6rem);
    line-height: 1.12;
  }

  .evolution-spotlight {
    margin-top: 0.75rem !important;
  }

  .evolution-output {
    width: min(100%, 11.5rem) !important;
    max-width: 11.5rem !important;
  }

  .evolution-origin-label {
    display: none !important;
  }

  .evolution-output video {
    max-height: 14rem !important;
  }

  .board-control .seal {
    font-size: 0.58rem;
  }

  .board-control h3 {
    margin-top: 0.05rem;
    font-size: clamp(1.15rem, 5.3vw, 1.55rem) !important;
  }

  .evolution-choice-copy {
    margin-top: 0.35rem !important;
  }

  .evolution-choice-copy span {
    font-size: 0.6rem;
  }

  .evolution-track {
    margin-top: 0.45rem !important;
  }

  .evolution-track button,
  .evolution-track button.evolution-marker {
    min-height: 2.45rem !important;
  }

  .evolution-marker-num {
    font-size: 0.58rem;
  }

  .evolution-marker-thumb {
    width: 1.45rem !important;
    height: 1.45rem !important;
  }

  .evolution-marker-name {
    font-size: 0.46rem !important;
  }

  .stage-panel {
    display: grid;
    gap: 0.35rem;
  }

  .stat-bars {
    margin-bottom: 0 !important;
  }

  .stage-ability {
    font-size: 0.78rem !important;
  }
}

@media (max-width: 390px) {
  .stage-core {
    width: 7.5rem !important;
  }

  .evolution-output {
    width: 10.25rem !important;
  }

  .evolution-output video {
    max-height: 12.5rem !important;
  }
}

/* ==========================================================================
   Core + Evolution unified composition
   ========================================================================== */
.core-evolution-layout {
  width: min(1320px, calc(100% - clamp(2rem, 6vw, 6rem)));
  margin: clamp(1.4rem, 3vw, 2.5rem) auto 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(560px, 1.22fr);
  gap: clamp(3rem, 5.2vw, 6rem);
  align-items: center;
  background:
    radial-gradient(ellipse at 42% 52%, rgba(176, 102, 255, 0.12), transparent 24rem),
    radial-gradient(ellipse at 58% 50%, rgba(201, 168, 76, 0.05), transparent 22rem);
}

.core-evolution-layout .board-shell {
  width: 100%;
  margin: 0;
}

.core-evolution-layout .core-stage {
  min-height: 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: center;
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
  padding: 0 !important;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.core-evolution-layout .stage-core {
  grid-column: auto !important;
  grid-row: auto !important;
  width: min(100%, 17rem) !important;
  max-height: 23rem !important;
  justify-self: center;
  object-fit: contain;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-mask-image: radial-gradient(ellipse 74% 68% at 50% 48%, #fff 48%, rgba(255, 255, 255, 0.72) 66%, transparent 86%);
  mask-image: radial-gradient(ellipse 74% 68% at 50% 48%, #fff 48%, rgba(255, 255, 255, 0.72) 66%, transparent 86%);
}

.core-evolution-layout .core-stage-copy {
  grid-column: auto !important;
  grid-row: auto !important;
  max-width: 22rem;
  justify-self: center;
  text-align: left;
}

.core-evolution-layout .core-stage-copy p {
  display: block;
  margin: 0.35rem 0 0;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.5;
}

.core-evolution-layout .core-button {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: center;
  width: auto !important;
  min-height: 3rem !important;
}

.core-evolution-layout .evolution-spotlight {
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 0.95fr) minmax(280px, 1.05fr) !important;
  grid-template-areas: "evolved control" !important;
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: center;
  overflow: visible;
  background: transparent !important;
}

.core-evolution-layout .evolution-output {
  width: 100% !important;
  max-width: 21rem !important;
  justify-self: center;
}

.core-evolution-layout .evolution-origin-label {
  display: block !important;
  text-align: center;
}

.core-evolution-layout .evolution-output video {
  max-height: min(66svh, 32rem) !important;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.42));
}

.core-evolution-layout .board-control {
  width: 100%;
  max-width: none !important;
  justify-self: stretch;
}

.core-evolution-layout .board-control h3 {
  font-size: clamp(1.8rem, 2.8vw, 2.65rem) !important;
}

.core-evolution-layout .evolution-track {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.core-evolution-layout .evolution-track button,
.core-evolution-layout .evolution-track button.evolution-marker {
  min-height: 3.5rem !important;
  border-color: rgba(201, 168, 76, 0.16);
  background: radial-gradient(circle at 80% 34%, rgba(176, 102, 255, 0.14), transparent 5rem);
}

.core-evolution-layout .evolution-track button.is-active {
  border-color: rgba(201, 168, 76, 0.7);
  background:
    radial-gradient(circle at 80% 34%, rgba(176, 102, 255, 0.28), transparent 5rem),
    linear-gradient(90deg, rgba(201, 168, 76, 0.16), transparent 88%);
}

.core-evolution-layout .stage-flavor {
  display: block;
  margin-bottom: 0.55rem;
}

.core-evolution-layout .stat-bars {
  display: flex;
}

@media (min-width: 1200px) {
  .board-section {
    padding-top: clamp(4rem, 6vw, 6.5rem) !important;
    padding-bottom: clamp(4rem, 6vw, 6.5rem) !important;
  }

  .board-section .section-heading {
    width: min(1320px, calc(100% - clamp(2rem, 6vw, 6rem)));
    margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem) !important;
  }
}

@media (max-width: 1199px) {
  .core-evolution-layout {
    width: min(900px, calc(100% - 2rem));
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .core-evolution-layout .core-stage {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1.2rem;
    align-items: center;
  }

  .core-evolution-layout .stage-core {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: min(28vw, 13rem) !important;
  }

  .core-evolution-layout .core-stage-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .core-evolution-layout .core-button {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 899px) {
  .core-evolution-layout,
  .core-evolution-layout .evolution-spotlight {
    grid-template-columns: 1fr !important;
  }

  .core-evolution-layout .evolution-spotlight {
    grid-template-areas:
      "evolved"
      "control" !important;
  }
}

@media (max-width: 760px), (pointer: coarse) {
  .core-evolution-layout {
    width: calc(100% - 2rem);
    gap: 1rem;
    margin-top: 1rem;
  }

  .core-evolution-layout .core-stage {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
  }

  .core-evolution-layout .stage-core {
    grid-column: auto !important;
    grid-row: auto !important;
    width: min(54vw, 12rem) !important;
    max-height: 12rem !important;
  }

  .core-evolution-layout .core-stage-copy {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .core-evolution-layout .core-stage-copy p {
    display: block;
    font-size: 1rem;
    line-height: 1.45;
  }

  .core-evolution-layout .core-button {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: center;
    min-height: 2.8rem !important;
  }

  .core-evolution-layout .evolution-output {
    width: min(100%, 11.5rem) !important;
    max-width: 11.5rem !important;
  }

  .core-evolution-layout .evolution-origin-label {
    display: block !important;
    font-size: 0.6rem;
  }

  .core-evolution-layout .evolution-output video {
    max-height: 14rem !important;
  }

  .core-evolution-layout .board-control h3 {
    font-size: clamp(1.35rem, 7vw, 1.85rem) !important;
  }

  .core-evolution-layout .stage-flavor {
    display: none;
  }
}

/* ==========================================================================
   Symmetry pass: board chapter
   ========================================================================== */
.board-section .section-heading {
  text-align: center;
}

.board-section .section-heading h2,
.board-section .section-heading p {
  margin-left: auto;
  margin-right: auto;
}

.board-section .section-heading h2 {
  max-width: 15ch;
}

.core-evolution-layout {
  grid-template-columns: minmax(340px, 0.9fr) minmax(620px, 1.1fr);
  gap: clamp(2.5rem, 4vw, 5rem);
  justify-items: center;
}

.core-evolution-layout .board-shell,
.core-evolution-layout .evolution-spotlight {
  align-self: center;
}

.core-evolution-layout .core-stage {
  width: 100%;
  max-width: 24rem;
  text-align: center;
}

.core-evolution-layout .core-stage-copy {
  text-align: center;
}

.core-evolution-layout .evolution-spotlight {
  grid-template-columns: minmax(270px, 1fr) minmax(270px, 1fr) !important;
  gap: clamp(1.5rem, 2.8vw, 2.8rem);
}

.core-evolution-layout .evolution-output,
.core-evolution-layout .board-control {
  align-self: center;
}

.core-evolution-layout .board-control {
  text-align: left;
}

.core-evolution-layout .evolution-track {
  grid-auto-rows: minmax(3.5rem, auto);
}

.core-evolution-layout .evolution-track button,
.core-evolution-layout .evolution-track button.evolution-marker {
  width: 100%;
}

.core-evolution-layout .stat-bars {
  justify-content: flex-start;
}

@media (max-width: 1199px) {
  .core-evolution-layout {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .core-evolution-layout .core-stage {
    max-width: 100%;
  }
}

@media (max-width: 899px) {
  .core-evolution-layout,
  .core-evolution-layout .evolution-spotlight {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .core-evolution-layout .evolution-spotlight {
    grid-template-areas:
      "evolved"
      "control" !important;
    justify-items: center;
    width: 100% !important;
  }

  .core-evolution-layout .board-control {
    width: min(100%, 38rem);
    text-align: center;
  }

  .core-evolution-layout .stat-bars {
    justify-content: center;
  }
}

@media (max-width: 760px), (pointer: coarse) {
  .board-section .section-heading h2 {
    max-width: 12ch;
  }

  .core-evolution-layout .core-stage {
    width: 100% !important;
    max-width: 22rem;
    margin: 0 auto;
  }

  .core-evolution-layout .evolution-spotlight,
  .core-evolution-layout .board-control {
    width: 100% !important;
    max-width: 100% !important;
  }

  .core-evolution-layout .board-control {
    width: 100%;
  }

  .core-evolution-layout .evolution-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(2.75rem, auto);
  }

  .core-evolution-layout .stage-ability {
    text-align: center;
  }
}

/* ==========================================================================
   Footer readability and core CTA removal
   ========================================================================== */
.core-evolution-layout .core-stage {
  grid-template-rows: auto auto;
}

.footer-lines {
  text-align: center;
  margin: 0 auto;
}

.footer-quote {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.5;
}

.footer-credit {
  font-size: clamp(0.72rem, 0.9vw, 0.9rem);
}

footer {
  justify-content: center;
}

.footer-brand {
  display: none;
}

/* ==========================================================================
   Global symmetry cleanup: decorative media and footer
   ========================================================================== */
.hero,
.chapter,
.relics,
.living-world {
  overflow: hidden !important;
}

.hero-art.hero-core {
  left: auto !important;
  right: 0 !important;
  width: min(60vw, 820px) !important;
  max-width: min(60vw, 820px);
  transform: none !important;
}

.relic-art,
.world-bg {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
}

.gallery-console p,
.rarity-strip span,
.rarity-strip strong {
  line-height: 1.2;
  padding-bottom: 0.08em;
}

footer,
.footer-lines {
  text-align: center !important;
}

@media (max-width: 980px) {
  .hero-art.hero-core {
    left: auto !important;
    right: 0 !important;
    width: min(64vw, 30rem) !important;
    transform: none !important;
  }

  .chapter-bg,
  .relic-art,
  .world-bg {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
  }
}

@media (max-width: 760px), (pointer: coarse) {
  .hero-art.hero-core {
    left: 50% !important;
    right: auto !important;
    width: min(72vw, 20rem) !important;
    transform: translateX(-50%) !important;
  }
}

/* ==========================================================================
   Hard layout safety pass: stop visual stacking on tablet and phones
   ========================================================================== */
@media (max-width: 1199px) {
  .board-section {
    min-height: auto !important;
    padding-block: clamp(3rem, 7vw, 5rem) !important;
  }

  .core-evolution-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: min(900px, calc(100% - 2rem)) !important;
    gap: clamp(1.4rem, 4vw, 2.4rem) !important;
  }

  .core-evolution-layout .board-shell,
  .core-evolution-layout .core-stage,
  .core-evolution-layout .evolution-spotlight,
  .core-evolution-layout .evolution-output,
  .core-evolution-layout .board-control {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .core-evolution-layout .core-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    max-width: 36rem !important;
    gap: 0.7rem !important;
    text-align: center !important;
  }

  .core-evolution-layout .stage-core {
    width: min(16rem, 44vw) !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
  }

  .core-evolution-layout .core-stage-copy {
    max-width: 30rem !important;
    text-align: center !important;
  }

  .core-evolution-layout .evolution-spotlight {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 44rem !important;
    gap: 1rem !important;
    margin: 0 auto !important;
  }

  .core-evolution-layout .evolution-output {
    display: grid !important;
    place-items: center !important;
    max-width: min(22rem, 78vw) !important;
    aspect-ratio: 2 / 3 !important;
    margin: 0 auto !important;
  }

  .core-evolution-layout .evolution-output video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: min(48rem, 58svh) !important;
    object-fit: contain !important;
  }

  .core-evolution-layout .board-control {
    max-width: 40rem !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: clamp(1rem, 3vw, 1.35rem) !important;
  }

  .core-evolution-layout .stat-bars {
    justify-content: center !important;
  }
}

@media (max-width: 760px), (pointer: coarse) {
  html,
  body {
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }

  .void-canvas,
  .corruption-veins,
  .root-asset,
  .root-smoke,
  .orb-whisper {
    display: none !important;
  }

  .hero-art.hero-core {
    display: none !important;
  }

  .site-header {
    min-height: 3.6rem !important;
  }

  .hero {
    min-height: auto !important;
    padding: 5rem 1rem 2.5rem !important;
  }

  .hero-content,
  .hero-stats,
  .collector-note,
  .hero-actions {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-stats,
  .collector-note {
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
  }

  .hero-stats span,
  .collector-note span {
    min-width: 0 !important;
    white-space: normal !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
  }

  .button,
  .hero-actions .button {
    width: 100% !important;
    min-height: 2.9rem !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  .core-evolution-layout {
    width: calc(100% - 1.5rem) !important;
    gap: 1.25rem !important;
  }

  .core-evolution-layout .stage-core {
    width: min(13rem, 56vw) !important;
  }

  .core-evolution-layout .evolution-output {
    max-width: min(17rem, 74vw) !important;
  }

  .core-evolution-layout .evolution-output video {
    max-height: 22rem !important;
  }

  .core-evolution-layout .board-control h3 {
    font-size: clamp(1.45rem, 7.4vw, 2rem) !important;
    line-height: 1.12 !important;
  }

  .core-evolution-layout .board-control {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.25rem 0 0 !important;
  }

  .core-evolution-layout .board-stats,
  .core-evolution-layout .stage-ability {
    padding: 0.75rem 0 !important;
    border-block: 1px solid rgba(201, 168, 76, 0.14) !important;
  }

  .core-evolution-layout .board-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .core-evolution-layout .board-stats span {
    min-width: 0 !important;
  }

  .core-evolution-layout .evolution-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
  }

  .core-evolution-layout .evolution-track button,
  .core-evolution-layout .evolution-track button.evolution-marker {
    min-height: 3.25rem !important;
    background: rgba(12, 7, 20, 0.48) !important;
    border-radius: 0 !important;
    text-align: left !important;
  }

  .split,
  .fated,
  .relics,
  .living-world,
  .ritual {
    min-height: auto !important;
  }
}

/* ==========================================================================
   Anti-stacking pass: simplify dense compositions across browser and mobile
   ========================================================================== */
.core-evolution-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(1080px, calc(100% - clamp(2rem, 8vw, 8rem))) !important;
  gap: clamp(2.5rem, 5vw, 4.5rem) !important;
}

.core-evolution-layout .board-shell {
  width: 100% !important;
  max-width: 34rem !important;
  margin: 0 auto !important;
}

.core-evolution-layout .core-stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.85rem !important;
  width: 100% !important;
  max-width: 34rem !important;
}

.core-evolution-layout .stage-core {
  width: min(18rem, 100%) !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
}

.core-evolution-layout .evolution-spotlight {
  display: grid !important;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1fr) !important;
  grid-template-areas: "evolved control" !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(880px, 100%) !important;
  max-width: 880px !important;
  gap: clamp(2rem, 4vw, 3rem) !important;
  margin: 0 auto !important;
}

.core-evolution-layout .evolution-output {
  grid-area: evolved !important;
  width: 100% !important;
  max-width: 22rem !important;
  justify-self: center !important;
}

.core-evolution-layout .board-control {
  grid-area: control !important;
  width: 100% !important;
  max-width: 26rem !important;
  justify-self: center !important;
}

.evolution-play {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  z-index: 5;
  transform: translateX(-50%);
  min-height: 2.6rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid rgba(201, 168, 76, 0.5);
  background: linear-gradient(135deg, rgba(94, 42, 137, 0.82), rgba(201, 168, 76, 0.72));
  color: var(--bone);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.evolution-play[hidden] {
  display: none !important;
}

.hero-gallery {
  min-height: auto !important;
  overflow: hidden !important;
}

.feature-card,
.feature-card:nth-child(1),
.feature-card:nth-child(2n),
.feature-card:nth-child(3n),
.feature-card.is-gallery-prev-2,
.feature-card.is-gallery-prev-1,
.feature-card.is-gallery-active,
.feature-card.is-gallery-next-1,
.feature-card.is-gallery-next-2 {
  transform: none !important;
}

.feature-card.is-gallery-window {
  align-self: end !important;
}

.relics,
.living-world,
.ritual {
  isolation: isolate !important;
}

.chapter-bg {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

.relic-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 46rem !important;
}

.relic-art,
.world-bg,
.ritual-bg {
  z-index: -2 !important;
}

.relic-art {
  opacity: 0.28 !important;
  filter: saturate(0.95) contrast(0.92) !important;
}

.world-bg {
  opacity: 0.42 !important;
  filter: saturate(1) contrast(1.02) !important;
}

.ritual-bg {
  opacity: 0.34 !important;
  filter: saturate(0.98) contrast(1.02) !important;
}

.relics::after,
.living-world::after,
.ritual::after {
  z-index: -1 !important;
}

.relics::after {
  background:
    linear-gradient(90deg, rgba(3, 2, 8, 0.94), rgba(3, 2, 8, 0.78) 48%, rgba(3, 2, 8, 0.58)),
    linear-gradient(180deg, rgba(3, 2, 8, 0.28), rgba(3, 2, 8, 0.72)) !important;
}

.living-world::after {
  background:
    linear-gradient(90deg, rgba(3, 2, 8, 0.9), rgba(3, 2, 8, 0.66) 54%, rgba(3, 2, 8, 0.34)),
    linear-gradient(180deg, rgba(3, 2, 8, 0.2), rgba(3, 2, 8, 0.76)) !important;
}

.ritual::after {
  background:
    linear-gradient(180deg, rgba(3, 2, 8, 0.42), rgba(3, 2, 8, 0.82)),
    radial-gradient(circle at 52% 46%, rgba(3, 2, 8, 0.28), rgba(3, 2, 8, 0.78) 68%) !important;
}

@media (max-width: 980px) {
  .core-evolution-layout {
    width: min(760px, calc(100% - 2rem)) !important;
  }

  .core-evolution-layout .evolution-spotlight {
    display: flex !important;
    flex-direction: column !important;
    max-width: 38rem !important;
    gap: 1.2rem !important;
  }

  .core-evolution-layout .evolution-output,
  .core-evolution-layout .board-control {
    width: 100% !important;
  }

  .hero-gallery {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    width: min(100%, 24rem) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .feature-card,
  .feature-card.is-gallery-window,
  .feature-card.is-gallery-prev-2,
  .feature-card.is-gallery-prev-1,
  .feature-card.is-gallery-next-1,
  .feature-card.is-gallery-next-2 {
    display: none !important;
  }

  .feature-card.is-gallery-active {
    display: block !important;
    grid-column: 1 !important;
    width: min(100%, 20rem) !important;
    max-width: 20rem !important;
    opacity: 1 !important;
  }

  .feature-card.is-gallery-active img {
    max-height: min(58svh, 28rem) !important;
    object-fit: contain !important;
  }

  .relics {
    padding-block: 3rem !important;
  }

  .living-world,
  .ritual {
    display: block !important;
    padding: 3rem 1rem !important;
    text-align: left !important;
  }

  .living-world .button {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 1rem !important;
  }

  .world-cta-note {
    margin-top: 0.7rem !important;
  }
}

@media (max-width: 760px), (pointer: coarse) {
  .board-section .section-heading {
    margin-bottom: 1.25rem !important;
  }

  .core-evolution-layout {
    width: calc(100% - 2rem) !important;
    gap: 2rem !important;
  }

  .core-evolution-layout .stage-core {
    width: min(12rem, 58vw) !important;
  }

  .core-evolution-layout .evolution-output {
    max-width: min(15.5rem, 72vw) !important;
  }

  .core-evolution-layout .evolution-output video {
    max-height: 20rem !important;
  }

  .core-evolution-layout .board-control {
    max-width: 100% !important;
  }

  .fated .section-heading,
  .gallery-console,
  .fated-index {
    width: 100% !important;
    max-width: 100% !important;
  }

  .relic-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }

  .relic-list article {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
  }

  .relic-art,
  .world-bg,
  .ritual-bg {
    opacity: 0.24 !important;
    filter: saturate(0.98) contrast(1.02) !important;
  }

  .relic-content {
    max-width: 100% !important;
  }

  .relics::after,
  .living-world::after,
  .ritual::after {
    background: linear-gradient(180deg, rgba(3, 2, 8, 0.72), rgba(3, 2, 8, 0.9)) !important;
  }

  .living-world h2,
  .ritual h2 {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   Relic layout correction: no overlap for sealed Relic II / III
   ========================================================================== */
.relic-list {
  display: grid !important;
  grid-template-columns: minmax(20rem, 1.05fr) minmax(16rem, 0.78fr) !important;
  grid-template-areas:
    "primary sealed2"
    "primary sealed3" !important;
  align-items: stretch !important;
  gap: clamp(1.25rem, 3vw, 2.5rem) !important;
  min-height: 0 !important;
  width: min(100%, 64rem) !important;
  margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
  overflow: visible !important;
}

.relic-card,
.relic-card:first-child,
.relic-card:nth-child(2),
.relic-card:nth-child(3) {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: auto !important;
  transform: none !important;
}

.relic-card:first-child {
  grid-area: primary !important;
  align-self: stretch !important;
  opacity: 1 !important;
  filter: none !important;
}

.relic-card:nth-child(2) {
  grid-area: sealed2 !important;
  align-self: end !important;
  opacity: 0.76 !important;
  filter: saturate(0.82) !important;
}

.relic-card:nth-child(3) {
  grid-area: sealed3 !important;
  align-self: start !important;
  opacity: 0.58 !important;
  filter: saturate(0.68) !important;
}

.relic-sealed::before {
  inset: 0 !important;
  border-radius: 0 !important;
  filter: blur(10px) !important;
}

.relic-card:hover {
  transform: none !important;
}

@media (max-width: 980px) {
  .relic-list {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "primary"
      "sealed2"
      "sealed3" !important;
    width: 100% !important;
  }

  .relic-card:nth-child(2),
  .relic-card:nth-child(3) {
    align-self: stretch !important;
    opacity: 0.68 !important;
  }
}

/* ==========================================================================
   Closing/footer blend: remove the hard black ending
   ========================================================================== */
.ritual {
  margin-bottom: 0 !important;
}

.ritual::after {
  background:
    linear-gradient(180deg, rgba(3, 2, 8, 0.38), rgba(3, 2, 8, 0.62) 62%, rgba(3, 2, 8, 0.78) 100%),
    radial-gradient(circle at 50% 42%, rgba(176, 102, 255, 0.16), transparent 34rem) !important;
}

footer {
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;
  border-top: 0 !important;
  background:
    linear-gradient(180deg, rgba(3, 2, 8, 0.78), rgba(3, 2, 8, 0.9)),
    url("assets/03_First_Whisper_Shattering.png") center bottom / cover no-repeat !important;
}

footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(176, 102, 255, 0.12), transparent 24rem),
    linear-gradient(180deg, rgba(3, 2, 8, 0.1), rgba(3, 2, 8, 0.72));
  pointer-events: none;
}

.footer-lines {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Living World gradient-only background
   ========================================================================== */
.living-world {
  background:
    linear-gradient(180deg, #030208 0%, rgba(12, 5, 20, 0.98) 18%, rgba(78, 30, 117, 0.72) 50%, rgba(12, 5, 20, 0.98) 82%, #030208 100%) !important;
}

.living-world::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(176, 102, 255, 0.22), transparent 34rem),
    radial-gradient(ellipse at 72% 50%, rgba(201, 168, 76, 0.08), transparent 24rem);
  pointer-events: none;
}

.living-world::after {
  background:
    linear-gradient(180deg, rgba(3, 2, 8, 0.92) 0%, rgba(3, 2, 8, 0.24) 46%, rgba(3, 2, 8, 0.88) 100%) !important;
}

.world-bg {
  display: none !important;
}

/* ==========================================================================
   Living World blend with Relic and Closing
   ========================================================================== */
.relics {
  margin-bottom: 0 !important;
  padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
}

.living-world {
  width: 100% !important;
  max-width: none !important;
  margin: -1px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: clamp(26rem, 54vw, 42rem) !important;
  padding: clamp(5rem, 10vw, 8rem) clamp(1rem, 7vw, 6rem) !important;
  background:
    linear-gradient(180deg,
      #030208 0%,
      rgba(5, 3, 10, 0.98) 13%,
      rgba(28, 10, 43, 0.94) 31%,
      rgba(94, 35, 136, 0.72) 52%,
      rgba(31, 11, 48, 0.94) 72%,
      rgba(5, 3, 10, 0.99) 89%,
      #030208 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #fff 16%, #fff 84%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, #fff 16%, #fff 84%, transparent 100%) !important;
}

.living-world::before {
  inset: -18% 0 !important;
  background:
    radial-gradient(ellipse at 48% 50%, rgba(176, 102, 255, 0.3), transparent 38rem),
    radial-gradient(ellipse at 78% 50%, rgba(201, 168, 76, 0.08), transparent 28rem),
    radial-gradient(ellipse at 16% 50%, rgba(91, 38, 138, 0.24), transparent 28rem) !important;
}

.living-world::after {
  inset: -1px 0 !important;
  background:
    linear-gradient(180deg,
      rgba(3, 2, 8, 1) 0%,
      rgba(3, 2, 8, 0.54) 20%,
      rgba(3, 2, 8, 0.08) 48%,
      rgba(3, 2, 8, 0.52) 80%,
      rgba(3, 2, 8, 1) 100%) !important;
}

.ritual {
  margin-top: -1px !important;
}

@media (max-width: 760px), (pointer: coarse) {
  .living-world {
    min-height: 28rem !important;
    padding: 4.75rem 1rem !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #fff 12%, #fff 88%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, #fff 12%, #fff 88%, transparent 100%) !important;
  }
}

/* ==========================================================================
   Core copy removal cleanup
   ========================================================================== */
.board-section > .section-heading {
  display: none !important;
}

.core-evolution-layout .core-stage {
  grid-template-rows: auto !important;
}

.core-evolution-layout .stage-core {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Core orb removed from board, keep hero orb only
   ========================================================================== */
.core-evolution-layout {
  width: min(900px, calc(100% - clamp(2rem, 8vw, 8rem))) !important;
}

.core-evolution-layout .board-shell,
.core-evolution-layout .core-stage,
.core-evolution-layout .stage-core {
  display: none !important;
}

.core-evolution-layout .evolution-spotlight {
  margin-top: 0 !important;
}

/* ==========================================================================
   Full-bleed First Whisper image
   ========================================================================== */
.split.chapter {
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(34rem, 62vw, 58rem) !important;
  margin-inline: 0 !important;
  padding-inline: clamp(1rem, 8vw, 7rem) !important;
}

.split.chapter .chapter-bg {
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.72 !important;
  filter: saturate(1.02) contrast(1.08) !important;
}

.split.chapter::after {
  background:
    linear-gradient(90deg, rgba(3, 2, 8, 0.9), rgba(3, 2, 8, 0.46) 45%, rgba(3, 2, 8, 0.76)),
    linear-gradient(180deg, rgba(3, 2, 8, 0.42), rgba(3, 2, 8, 0.08) 48%, rgba(3, 2, 8, 0.7)) !important;
}

@media (max-width: 760px), (pointer: coarse) {
  .split.chapter {
    min-height: 31rem !important;
    padding-inline: 1rem !important;
  }

  .split.chapter .chapter-bg {
    object-position: center center !important;
    opacity: 0.58 !important;
  }
}

/* ==========================================================================
   Living World darker final pass
   ========================================================================== */
.living-world {
  background:
    linear-gradient(180deg,
      #030208 0%,
      rgba(3, 2, 8, 0.995) 16%,
      rgba(9, 4, 16, 0.98) 36%,
      rgba(24, 9, 38, 0.84) 52%,
      rgba(8, 4, 14, 0.98) 70%,
      rgba(3, 2, 8, 0.995) 88%,
      #030208 100%) !important;
}

.living-world::before {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(119, 50, 176, 0.16), transparent 34rem),
    radial-gradient(ellipse at 74% 50%, rgba(120, 86, 39, 0.035), transparent 22rem) !important;
}

.living-world::after {
  background:
    linear-gradient(180deg,
      rgba(3, 2, 8, 1) 0%,
      rgba(3, 2, 8, 0.82) 24%,
      rgba(3, 2, 8, 0.42) 50%,
      rgba(3, 2, 8, 0.84) 76%,
      rgba(3, 2, 8, 1) 100%) !important;
}

/* ==========================================================================
   Hero intro video
   ========================================================================== */
.hero-intro-video {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.58 !important;
  filter: saturate(1.05) contrast(1.08) brightness(0.74) !important;
  transform: none !important;
  animation: none !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hero-shade {
  background:
    radial-gradient(circle at 62% 42%, rgba(176, 102, 255, 0.16), rgba(3, 2, 8, 0.22) 34%, rgba(3, 2, 8, 0.88) 82%),
    linear-gradient(90deg, rgba(3, 2, 8, 0.96), rgba(3, 2, 8, 0.58) 46%, rgba(3, 2, 8, 0.76)),
    linear-gradient(180deg, rgba(3, 2, 8, 0.2), rgba(3, 2, 8, 0.52) 66%, rgba(3, 2, 8, 0.98)) !important;
}

.hero-sound-toggle {
  position: absolute;
  right: clamp(1rem, 5vw, 4rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 6;
  min-width: 7.5rem;
  min-height: 2.75rem;
  border: 1px solid rgba(201, 168, 76, 0.48);
  background: rgba(3, 2, 8, 0.58);
  color: var(--parchment);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(3, 2, 8, 0.52), inset 0 1px 0 rgba(233, 220, 187, 0.1);
}

.hero-sound-toggle[aria-pressed="true"] {
  border-color: rgba(200, 155, 255, 0.72);
  color: var(--bone);
  box-shadow: 0 0 28px rgba(176, 102, 255, 0.28), inset 0 1px 0 rgba(233, 220, 187, 0.14);
}

/* ==========================================================================
   Hero video-first composition
   ========================================================================== */
.hero {
  align-items: end !important;
  min-height: 100svh !important;
  padding-top: clamp(5rem, 10vw, 7rem) !important;
  padding-bottom: clamp(5.4rem, 8vw, 7rem) !important;
}

.hero-intro-video {
  opacity: 0.82 !important;
  filter: saturate(1.08) contrast(1.06) brightness(0.8) !important;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(3, 2, 8, 0.84), rgba(3, 2, 8, 0.22) 46%, rgba(3, 2, 8, 0.58)),
    linear-gradient(180deg, rgba(3, 2, 8, 0.14), rgba(3, 2, 8, 0.12) 42%, rgba(3, 2, 8, 0.92) 100%) !important;
}

.hero-content {
  width: min(560px, 100%) !important;
  align-self: end !important;
}

.hero-content::before {
  height: min(68%, 20rem) !important;
}

.wordmark {
  width: min(100%, 500px) !important;
}

.hero-line {
  max-width: 35rem !important;
  font-size: clamp(0.98rem, 1.25vw, 1.22rem) !important;
}

.scripture {
  margin-bottom: 1.15rem !important;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important;
}

.hero-actions {
  gap: 0.65rem !important;
}

.hero-actions .button {
  min-height: 2.85rem !important;
  padding: 0.72rem 1.05rem !important;
}

.collector-note {
  margin-top: 0.85rem !important;
}

.hero-stats {
  width: min(520px, calc(100% - clamp(2rem, 10vw, 8rem))) !important;
  right: auto !important;
  bottom: 1.2rem !important;
  justify-content: flex-start !important;
  gap: 1rem !important;
}

@media (max-width: 760px), (pointer: coarse) {
  .hero {
    min-height: 100svh !important;
    align-items: end !important;
    padding: 5.3rem 1rem 2.2rem !important;
  }

  .hero-intro-video {
    opacity: 0.78 !important;
    object-position: center center !important;
    filter: saturate(1.08) contrast(1.04) brightness(0.72) !important;
  }

  .hero-shade {
    background:
      linear-gradient(180deg, rgba(3, 2, 8, 0.2), rgba(3, 2, 8, 0.08) 42%, rgba(3, 2, 8, 0.94) 100%) !important;
  }

  .hero-content {
    display: block !important;
    padding: 0 !important;
  }

  .wordmark {
    width: min(78vw, 19rem) !important;
  }

  .hero .kicker,
  .hero .relic-eyebrow,
  .hero-line,
  .scripture,
  .collector-note {
    display: none !important;
  }

  .hero-subtitle {
    margin-top: 0.35rem !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
    margin-top: 0.85rem !important;
  }

  .hero-actions .button {
    min-height: 2.65rem !important;
    padding: 0.62rem 0.85rem !important;
    font-size: 0.62rem !important;
  }

  .kickstarter-window {
    margin-top: 0.55rem !important;
    font-size: 0.72rem !important;
  }

  .hero-stats {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 0.7rem !important;
    margin-top: 0.65rem !important;
    padding-top: 0.55rem !important;
    font-size: 0.56rem !important;
  }

  .hero-stats strong {
    display: inline !important;
    font-size: 0.95rem !important;
  }

  .hero-sound-toggle {
    position: absolute;
    top: 4.75rem;
    right: 1rem;
    bottom: auto;
    width: auto;
    min-width: 6.8rem;
    min-height: 2.4rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.58rem;
    margin-top: 0;
  }
}

/* ==========================================================================
   Hero clean opening: video first, copy after the first viewport
   ========================================================================== */
.hero {
  display: block !important;
  min-height: calc(100svh + 38rem) !important;
  padding: calc(100svh + 2.5rem) clamp(1rem, 5vw, 4rem) 4rem !important;
  background: #030208 !important;
}

.hero-intro-video,
.hero-shade {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 100svh !important;
}

.hero-intro-video {
  opacity: 0.92 !important;
  filter: saturate(1.08) contrast(1.06) brightness(0.82) !important;
}

.hero-shade {
  background:
    linear-gradient(180deg, rgba(3, 2, 8, 0.1), rgba(3, 2, 8, 0.04) 46%, rgba(3, 2, 8, 0.9) 100%),
    linear-gradient(90deg, rgba(3, 2, 8, 0.32), rgba(3, 2, 8, 0.08) 50%, rgba(3, 2, 8, 0.34)) !important;
}

.hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: min(720px, 100%) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.hero-content::before {
  display: none !important;
}

.hero-content .wordmark {
  width: min(100%, 480px) !important;
}

.hero-line,
.scripture {
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-actions,
.collector-note {
  justify-content: center !important;
}

.hero-stats {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  width: min(620px, 100%) !important;
  margin: 1.2rem auto 0 !important;
  justify-content: center !important;
}

.hero-sound-toggle {
  top: calc(100svh - 7.2rem) !important;
  right: clamp(1rem, 5vw, 4rem) !important;
  bottom: auto !important;
}

@media (max-width: 760px), (pointer: coarse) {
  .hero {
    min-height: calc(56.25vw + 28rem) !important;
    padding: calc(56.25vw + 1.4rem) 1rem 2.5rem !important;
  }

  .hero-intro-video {
    opacity: 0.9 !important;
    filter: saturate(1.08) contrast(1.04) brightness(0.78) !important;
  }

  .hero-content {
    text-align: center !important;
  }

  .hero-content .wordmark {
    width: min(76vw, 18rem) !important;
  }

  .hero .kicker {
    display: block !important;
    margin-bottom: 0.45rem !important;
  }

  .hero .relic-eyebrow,
  .hero-line,
  .scripture,
  .collector-note {
    display: flex !important;
  }

  .hero-line,
  .scripture {
    display: block !important;
    max-width: 60ch !important;
  }

  .hero-subtitle {
    margin-bottom: 0.7rem !important;
  }

  .hero-actions {
    margin-top: 0.85rem !important;
  }

  .hero-stats {
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-sound-toggle {
    top: calc(100svh - 7.4rem) !important;
    right: 1rem !important;
    bottom: auto !important;
  }
}

/* ==========================================================================
   Task 15 (revised) — mobile hero video: magoj-full.mp4 is 16:9 landscape
   (1280x720). No portrait cut of this footage exists yet (asset request
   flagged to the team). The earlier "contain inside a full 100svh box"
   approach traded crop for a big empty mist band above the video, which
   read as broken. Locking the video's own box to its native 16:9 ratio
   (height: 56.25vw) means object-fit:cover fills it exactly — no crop,
   no letterbox, no empty space, because the box IS the video's shape.
   ========================================================================== */
@media (max-width: 768px) {
  .hero-intro-video {
    position: absolute !important;
    top: 0 !important;
    height: 56.25vw !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
  }

  .hero::before {
    inset: 56.25vw 0 0 !important;
  }

  .hero-sound-toggle {
    top: calc(56.25vw - 3.4rem) !important;
  }
}

/* ==========================================================================
   Header MAGOJ wordmark
   ========================================================================== */
.site-header .brand {
  min-height: 2.8rem !important;
  gap: 0 !important;
}

.site-header .brand-wordmark {
  display: block;
  width: clamp(7.4rem, 11vw, 10.5rem);
  height: auto;
  max-height: 2.8rem;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(176, 102, 255, 0.34)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.62));
}

@media (max-width: 760px), (pointer: coarse) {
  .site-header .brand-wordmark {
    width: clamp(6.8rem, 32vw, 8.4rem);
    max-height: 2.3rem;
  }
}

/* ==========================================================================
   Wide-screen scale pass: intro block and evolution only
   ========================================================================== */
.hero {
  min-height: calc(100svh + clamp(34rem, 42vw, 48rem)) !important;
  padding: calc(100svh + clamp(2.4rem, 4.2vw, 5.2rem)) clamp(1rem, 6vw, 5rem) clamp(3.2rem, 6vw, 6.2rem) !important;
  background:
    radial-gradient(ellipse at 50% calc(100svh + 22rem), rgba(176, 102, 255, 0.16), transparent 38rem),
    radial-gradient(ellipse at 12% calc(100svh + 20rem), rgba(91, 38, 138, 0.14), transparent 34rem),
    radial-gradient(ellipse at 88% calc(100svh + 20rem), rgba(91, 38, 138, 0.14), transparent 34rem),
    #030208 !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 100svh 0 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 2, 8, 0), rgba(3, 2, 8, 0.86) 12%, rgba(3, 2, 8, 0.64) 54%, rgba(3, 2, 8, 0.96)),
    radial-gradient(ellipse at 50% 34%, rgba(176, 102, 255, 0.12), transparent 44rem);
}

.hero-content {
  width: var(--w-content) !important;
}

.hero-content .wordmark {
  display: block !important;
  width: min(100%, clamp(30rem, 46vw, 52rem)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-content h1 {
  width: 100% !important;
}

.hero .kicker,
.hero .relic-eyebrow,
.hero-subtitle {
  font-size: clamp(0.78rem, 0.78vw, 1rem) !important;
}

.hero-line,
.scripture {
  max-width: var(--w-text) !important;
}

/* Task 9 — trust badge row: each icon+label is one inline-flex unit with a
   small fixed gap, then the row centers the three units with a larger gap.
   No space-between, no flex-stretched children pulling the "◇" off the text. */
.hero-actions {
  gap: clamp(1rem, 2vw, 2rem) !important;
}

.collector-note {
  width: var(--w-inline) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  gap: 0.5rem clamp(2rem, 4vw, 4.5rem) !important;
}

.collector-note span {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 0.6rem !important;
  text-align: left !important;
  font-size: clamp(0.66rem, 0.9vw, 0.78rem) !important;
  padding-left: 0 !important;
}

.collector-note span::before {
  position: static !important;
  flex: none !important;
  transform: rotate(45deg) !important;
}

.collector-note .kickstarter-window {
  padding: 0.15rem 0.7rem !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  color: var(--ash) !important;
  font-size: 0.62rem !important;
  opacity: 0.72;
}

.collector-note .kickstarter-window::before {
  content: none !important;
}

/* Task 10 — stat row: number+label stay one inline-flex unit (baseline
   aligned), the row centers the three units, and the divider matches the
   row's own width instead of stretching edge-to-edge. */
.hero-stats {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: var(--w-inline) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: clamp(0.68rem, 0.72vw, 0.92rem) !important;
}

.hero-stats > span {
  display: inline-flex !important;
  align-items: baseline !important;
  flex: 0 0 auto !important;
  gap: 0.5rem !important;
}

.hero-stats > span + span {
  margin-left: 0 !important;
  padding-left: clamp(1.5rem, 4vw, 3.5rem) !important;
  border-left: 1px solid rgba(201, 168, 76, 0.28);
}

.hero-stats strong {
  font-size: clamp(1.45rem, 1.8vw, 2.3rem) !important;
}

.board-section {
  padding-top: clamp(4rem, 6.5vw, 7.5rem) !important;
  padding-bottom: clamp(4rem, 6.5vw, 7.5rem) !important;
}

.core-evolution-layout {
  display: block !important;
  width: var(--w-wide) !important;
  max-width: none !important;
}

.core-evolution-layout .evolution-spotlight {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
  grid-template-areas: "evolved control" !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(2rem, 4vw, 5rem) !important;
}

/* Task 13a/b — card sits fully inside the section (no bottom crop) and no
   longer hugs the viewport edge. */
.core-evolution-layout .evolution-output {
  width: auto !important;
  max-width: 100% !important;
  justify-self: center !important;
}

.core-evolution-layout .evolution-output video {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 80vh !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

.core-evolution-layout .evolution-origin-label {
  width: 100% !important;
  margin-left: 0 !important;
  text-align: left !important;
  font-size: clamp(0.66rem, 0.7vw, 0.9rem) !important;
}

.core-evolution-layout .board-control {
  width: 100% !important;
  max-width: min(100%, 44rem) !important;
  justify-self: stretch !important;
}

.core-evolution-layout .board-control h3 {
  font-size: clamp(1.75rem, 2.2vw, 3rem) !important;
}

.core-evolution-layout .board-control p,
.core-evolution-layout .stage-ability,
.core-evolution-layout .board-stats,
.core-evolution-layout .evolution-choice-copy {
  font-size: clamp(0.9rem, 0.92vw, 1.12rem) !important;
}

/* Task 13e — evolution selector: no card boxes, no square buttons. Active
   state reads through a soft glow + underline, not a filled/bordered cell. */
.core-evolution-layout .evolution-track button,
.core-evolution-layout .evolution-track button.evolution-marker {
  min-height: auto !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  background: none !important;
  opacity: 0.58;
  transition: opacity 220ms ease, border-color 220ms ease;
}

.core-evolution-layout .evolution-track button:hover,
.core-evolution-layout .evolution-track button.evolution-marker:hover,
.core-evolution-layout .evolution-track button:focus-visible {
  opacity: 0.8;
  border-color: transparent !important;
}

.core-evolution-layout .evolution-track button.is-active {
  border-bottom-color: rgba(201, 168, 76, 0.75) !important;
  background: none !important;
  opacity: 1;
}

.core-evolution-layout .evolution-track button.is-active .evolution-marker-thumb {
  box-shadow: 0 0 22px rgba(176, 102, 255, 0.55) !important;
}

/* Task 13f — portrait thumbnail, full face visible, no forced circle crop. */
.core-evolution-layout .evolution-marker-thumb {
  width: clamp(2.6rem, 3.4vw, 3.4rem) !important;
  height: clamp(3.6rem, 4.8vw, 4.8rem) !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: rgba(3, 2, 8, 0.5);
}

.core-evolution-layout .evolution-marker-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Task 17a/b — the earlier per-span backdrop on #activeStageAbility itself
   read as a leftover highlight box. Removed; the panel-level background
   below is what actually stops the ambient vein art from bleeding through
   the text as a stray line. */
.core-evolution-layout .stage-panel {
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  background: rgb(6, 3, 12);
}

/* The line under the ability text was never a background artifact — it was
   the corruption-progress .meter bar (a separate, legitimate element) sitting
   right under the now-shorter panel after the duplicate quote/stats were
   removed. Give it real breathing room so it doesn't read as an underline. */
.core-evolution-layout .meter {
  margin-top: 1.4rem;
}

@media (min-width: 1600px) {
  .hero-content,
  .hero-stats {
    width: var(--w-content) !important;
  }

  .core-evolution-layout {
    width: var(--w-wide) !important;
  }
}

@media (max-width: 760px), (pointer: coarse) {
  .hero {
    min-height: calc(56.25vw + 28rem) !important;
    padding: calc(56.25vw + 1.4rem) 1rem 2.5rem !important;
    padding-top: max(calc(56.25vw + 1.4rem), env(safe-area-inset-top)) !important;
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom)) !important;
  }

  .hero-content {
    width: 100% !important;
  }

  .hero-content .wordmark {
    width: min(76vw, 18rem) !important;
  }

  .hero-actions {
    gap: 0.75rem !important;
  }

  .collector-note {
    width: 100% !important;
    justify-content: center !important;
    gap: 0.55rem 1.2rem !important;
  }

  .collector-note span {
    flex: 0 0 auto !important;
  }

  .hero-stats {
    width: 100% !important;
    justify-content: center !important;
    row-gap: 0.5rem !important;
  }

  .core-evolution-layout {
    width: calc(100% - 2rem) !important;
  }

  .core-evolution-layout .evolution-spotlight {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .core-evolution-layout .evolution-output {
    width: 100% !important;
    margin-top: 0.4rem;
  }

  .core-evolution-layout .evolution-origin-label {
    margin-bottom: 0.6rem !important;
  }

  .core-evolution-layout .evolution-output video {
    max-height: 44vh !important;
  }

  .core-evolution-layout .board-control {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   Task 12 — Relics: even three-column grid, no leftover empty column
   ========================================================================== */
.relic-content {
  max-width: var(--w-wide) !important;
  width: 100%;
}

.relic-content h2 {
  max-width: none !important;
}

.relic-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas: none !important;
  align-items: start !important;
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.relic-card,
.relic-card:first-child,
.relic-card:nth-child(2),
.relic-card:nth-child(3) {
  grid-area: auto !important;
  align-self: start !important;
}

.relics::after {
  background:
    linear-gradient(90deg, rgba(3, 2, 8, 0.9), rgba(3, 2, 8, 0.82) 50%, rgba(3, 2, 8, 0.86)),
    linear-gradient(180deg, rgba(3, 2, 8, 0.4), rgba(3, 2, 8, 0.8)) !important;
}

.sealed-whisper {
  max-width: var(--w-text) !important;
  margin: 2rem auto 0 !important;
  text-align: center !important;
}

@media (max-width: 980px) {
  .relic-list {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Task 16 — Evolution selector rebuilt for symmetry, structure ported from
   the reference .evolution-rail / .evolution-choice pattern. Same 4 cells
   (data/markup untouched — script.js still renders one .evolution-marker
   button per stage), just a consistent card-frame + label layout instead of
   the previous 2x2 grid with mismatched thumb crops.
   ========================================================================== */
.core-evolution-layout .evolution-track {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.6rem, 1.2vw, 1.1rem) !important;
}

.core-evolution-layout .evolution-track button,
.core-evolution-layout .evolution-track button.evolution-marker {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: none !important;
  color: var(--ash);
  text-align: center;
  opacity: 0.68;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.core-evolution-layout .evolution-track button:hover,
.core-evolution-layout .evolution-track button.evolution-marker:hover,
.core-evolution-layout .evolution-track button:focus-visible {
  opacity: 0.88;
  color: var(--bone);
  transform: translateY(-3px);
  border-color: transparent !important;
}

.core-evolution-layout .evolution-track button.is-active {
  opacity: 1;
  color: var(--gold-bright, var(--gold));
  transform: translateY(-4px);
  background: none !important;
}

/* Card frame: aspect-ratio locked to the same 2:3 ratio as the source card
   art, so object-fit:cover crops nothing — the thumbnail is already that
   shape, it's just displayed smaller. */
.core-evolution-layout .evolution-marker-thumb {
  order: 2;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3;
  margin: 0.5rem 0 0.6rem !important;
  border: 1px solid rgba(166, 124, 58, 0.4);
  border-radius: 0.3rem !important;
  background: rgba(4, 1, 8, 0.78);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.4);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.core-evolution-layout .evolution-track button.is-active .evolution-marker-thumb {
  border-color: rgba(201, 168, 76, 0.85);
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(124, 47, 201, 0.6),
    0 0 24px rgba(150, 74, 235, 0.42);
}

.core-evolution-layout .evolution-marker-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit;
  filter: saturate(0.65) brightness(0.75);
  transition: filter 180ms ease;
}

.core-evolution-layout .evolution-track button.is-active .evolution-marker-thumb img {
  filter: none;
}

.core-evolution-layout .evolution-marker-num {
  order: 1;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.core-evolution-layout .evolution-marker-name {
  order: 3;
  overflow: hidden;
  width: 100%;
  font-size: clamp(0.62rem, 0.8vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Mobile: same cells, horizontal scroll-snap carousel instead of a squeeze
   into 4 tiny columns. */
@media (max-width: 760px), (pointer: coarse) {
  .core-evolution-layout .evolution-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.85rem !important;
    overflow-x: auto;
    margin-inline: -1rem;
    padding: 0.3rem 1rem 0.6rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .core-evolution-layout .evolution-track::-webkit-scrollbar {
    display: none;
  }

  .core-evolution-layout .evolution-track button,
  .core-evolution-layout .evolution-track button.evolution-marker {
    flex: 0 0 34vw;
    max-width: 8.5rem;
    scroll-snap-align: center;
  }
}

/* ==========================================================================
   Task 19 — custom language dropdown (replaces the plain native <select>)
   ========================================================================== */
.lang-switch {
  position: relative;
}

.lang-switch-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(201, 168, 76, 0.32);
  border-radius: 999px;
  background: rgba(3, 2, 8, 0.72);
  color: var(--bone);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.75rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 220ms ease;
}

.lang-switch-trigger:hover,
.lang-switch-trigger[aria-expanded="true"] {
  border-color: rgba(200, 155, 255, 0.72);
  outline: none;
}

.lang-switch-caret {
  width: 0.6rem;
  height: 0.5rem;
  color: var(--gold);
  transition: transform 200ms ease;
}

.lang-switch-trigger[aria-expanded="true"] .lang-switch-caret {
  transform: rotate(180deg);
}

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 40;
  min-width: 10rem;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 0.5rem;
  background: rgb(8, 4, 14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(123, 47, 190, 0.2);
}

.lang-switch-menu li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.3rem;
  color: var(--ash);
  font-size: 0.76rem;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.lang-switch-menu li:hover,
.lang-switch-menu li:focus-visible {
  background: rgba(176, 102, 255, 0.16);
  color: var(--bone);
  outline: none;
}

.lang-switch-menu li.is-active {
  color: var(--gold);
}

.lang-switch-code {
  min-width: 1.9rem;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.lang-switch-name {
  font-family: "Crimson Text", Georgia, serif;
}

/* CJK fallback — only when the active language needs it (ja/zh), so the
   other 5 languages keep the original decorative Latin fonts untouched. */
body.is-cjk {
  font-family: "Noto Sans JP", "Noto Sans SC", "Crimson Text", Georgia, serif;
}

body.is-cjk h1,
body.is-cjk h2,
body.is-cjk h3,
body.is-cjk .kicker,
body.is-cjk .seal,
body.is-cjk .scripture,
body.is-cjk .lang-switch-code,
body.is-cjk button,
body.is-cjk .button,
body.is-cjk nav a {
  font-family: "Noto Sans JP", "Noto Sans SC", sans-serif;
}

@media (max-width: 480px) {
  .lang-switch-menu {
    right: -0.5rem;
  }
}