/* ════════════════════════════════════════════════════════════════
   PAGES · ELDARA
   ────────────────────────────────────────────────────────────────
   The modules only Eldara has: prologue, pillars and stats, the
   skills explorer, companions, the forge, Houses, the rebirth dial,
   the boss stage, world and lore. Recipes are the game's own
   (eldara.html panels, legendAura / voidAura, House palettes);
   colours come from themes/eldara.css.

   JS hooks (js/pages/eldara.js and eldara/*.js)
     .pillars.has-spy / .pillar.is-active      scroll-spied pillar
     .skill-panel.is-out                       panel crossfade
     .rebirth { --charge }   [data-dial] .is-lit on passed notches
     .stage[data-boss]       the boss on stage (azhurak = the Void)
     .stage.is-swap          arena crossfade · .stage__flare.is-on
     .quote.is-on            the quote shown
   ════════════════════════════════════════════════════════════════ */


/* ── shared: the game's panel, sub-heads, auras ───────────────── */
.panel,.skill-panel,.rb-card,.fact,.mode,.quotes{
  border:1px solid rgba(201,168,76,.24);
  border-radius:var(--t-radius);
  background:linear-gradient(145deg,rgb(20 21 34 / .94),rgb(12 14 24 / .94) 70%);
  box-shadow:0 20px 80px #0008,inset 0 1px #f0cc6e0d;
}
.sub-head{
  display:flex; align-items:center; gap:14px;
  margin:0 0 clamp(18px,2vw,28px);
  font:500 var(--fs-h3)/1.2 var(--t-font-display);
  letter-spacing:.04em;
}
.sub-head__n{
  display:inline-grid; place-items:center;
  min-width:2.4em; height:2.4em; padding:0 .5em;
  border:1px solid var(--t-line-2); border-radius:var(--r-pill);
  font-size:.62em; letter-spacing:.06em;
  color:var(--t-accent-hi);
}
.sub-head--void .sub-head__n{ border-color:rgba(166,132,232,.5); color:var(--t-accent-2-hi); }
@keyframes legendAura{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,206,120,.30),inset 0 0 11px rgba(255,160,40,.10),0 0 14px rgba(255,160,30,.22)}50%{box-shadow:inset 0 0 0 1px rgba(255,216,140,.42),inset 0 0 15px rgba(255,160,40,.16),0 0 20px rgba(255,160,30,.36)}}
@keyframes voidAura{0%,100%{box-shadow:inset 0 0 0 1px rgba(180,180,255,.30),inset 0 0 14px rgba(0,0,0,.7),0 0 18px rgba(110,110,235,.34)}50%{box-shadow:inset 0 0 0 1px rgba(200,200,255,.44),inset 0 0 20px rgba(0,0,0,.85),0 0 28px rgba(120,120,255,.52)}}
@keyframes apexAura{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,140,120,.30),inset 0 0 11px rgba(231,76,60,.12),0 0 14px rgba(231,76,60,.24)}50%{box-shadow:inset 0 0 0 1px rgba(255,160,140,.44),inset 0 0 15px rgba(231,76,60,.18),0 0 22px rgba(231,76,60,.4)}}
@keyframes bob{ from{ transform:translateY(0); } to{ transform:translateY(-4px); } }
@keyframes breathe-glow{ 0%,100%{ opacity:.55; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.04); } }
@keyframes spin{ to{ transform:rotate(360deg); } }


/* ════════════════════════════════════════════════════════════════
   PROLOGUE · five hundred years
   ════════════════════════════════════════════════════════════════ */
.section.prologue{
  position:relative; isolation:isolate;
  display:grid; align-items:center;
  min-height:clamp(560px,78svh,860px);
}
.prologue__band{
  position:absolute; inset:0; z-index:-1;
  -webkit-mask:linear-gradient(180deg,transparent,#000 24%,#000 70%,transparent);
  mask:linear-gradient(180deg,transparent,#000 24%,#000 70%,transparent);
}
.prologue__pano{
  position:absolute; inset:0;
  width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:86% 50%;
  scale:1.16;
  opacity:.92;
}
.prologue__band::after{                  /* the text reads over the darkest band of crags */
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 56% at 50% 52%,rgb(7 8 15 / .78),rgb(7 8 15 / .42) 60%,transparent 88%);
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .prologue__pano{ animation:pano-pan linear both; animation-timeline:view(); animation-range:cover; }
  }
}
@keyframes pano-pan{ from{ transform:translateX(3%); } to{ transform:translateX(-3%); } }
@media (width < 768px){
  .section.prologue{ min-height:auto; }
  .prologue__pano{ object-position:78% 50%; }
}
.prologue__copy{ position:relative; display:flex; flex-direction:column; align-items:center; max-width:880px; text-align:center; }
.prologue__kicker{ font-size:var(--fs-label); color:var(--t-accent-hi); }
.prologue__quote{ margin:clamp(18px,2.4vw,30px) 0 0; }
.prologue__quote p{
  font:400 clamp(1.5rem,1.05rem + 1.9vw,2.75rem)/1.32 var(--t-font-display);
  letter-spacing:.02em;
  color:var(--t-ink);
  text-shadow:0 2px 18px rgb(0 0 0 / .85);
  text-wrap:balance;
}
.prologue__cite{
  margin-top:clamp(18px,2vw,26px);
  font:600 var(--fs-sm)/1.4 var(--t-font-body);
  font-variant:small-caps;
  letter-spacing:.12em;
  color:var(--t-subtitle);
}
.prologue__rule{ width:min(320px,62%); margin:clamp(26px,3vw,40px) auto 0; }
.prologue__line{ margin-top:clamp(20px,2.4vw,30px); max-width:44ch; font-size:var(--fs-lead); color:var(--t-ink-2); text-shadow:0 1px 10px #000; }


/* ════════════════════════════════════════════════════════════════
   PILLARS · LIVING WINDOW · STATS
   ════════════════════════════════════════════════════════════════ */
.pillars{ display:grid; gap:0; }
.pillar{
  position:relative;
  padding:clamp(18px,2vw,26px) 0 clamp(18px,2vw,26px) 40px;
  border-top:1px solid var(--t-line);
  transition:opacity var(--d-4) var(--ease-soft);
}
.pillar::before{                         /* the game's diamond marker */
  content:""; position:absolute; left:6px; top:calc(clamp(18px,2vw,26px) + 1.95rem);
  width:8px; height:8px;
  border:1px solid var(--t-accent-lo);
  rotate:45deg;
  transition:background-color var(--d-4) var(--ease-soft),border-color var(--d-4),box-shadow var(--d-4),scale var(--d-4) var(--ease-out);
}
.pillar.is-active::before{ background:var(--t-marker); border-color:var(--t-marker); box-shadow:0 0 12px rgba(217,174,66,.55); scale:1.15; }
.pillar__num{ margin-bottom:6px; font:500 .8125rem/1 var(--t-font-display); letter-spacing:.16em; color:var(--t-accent); }
.pillar__title{ font-size:var(--fs-h3); }
.pillar__line{ max-width:48ch; margin-top:8px; color:var(--t-ink-2); }
.pillars__window{ margin:clamp(20px,3vw,32px) 0; padding:10px; }
.pillars__frame{ position:relative; border-radius:16px; background:#05060b; box-shadow:var(--e3),0 0 60px rgba(201,168,76,.08); }
.pillars__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:16px; }
.pillars__video{
  position:relative;
  display:block; width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border:1px solid var(--t-line-2); border-radius:16px;
}
@media (width >= 1024px){
  .pillars{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--grid-gap); align-items:start; }
  .pillar{ grid-column:1 / span 5; }
  .pillar:nth-of-type(1){ grid-row:1; } .pillar:nth-of-type(2){ grid-row:2; } .pillar:nth-of-type(3){ grid-row:3; }
  .pillar:nth-of-type(4){ grid-row:4; } .pillar:nth-of-type(5){ grid-row:5; border-bottom:1px solid var(--t-line); }
  .pillars__window{ grid-column:7 / -1; grid-row:1 / span 5; position:sticky; top:calc(var(--header-h) + 10vh); margin:0; }
  .pillars.has-spy .pillar:not(.is-active){ opacity:.75; }
}

.stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(56px,7vw,112px);
  border-block:1px solid var(--t-line);
}
.stat{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:clamp(22px,2.6vw,36px) 8px;
  text-align:center;
}
.stat:nth-child(odd)::after,.stat:nth-child(n+3)::before{ content:""; position:absolute; background:var(--t-line); }
.stat:nth-child(odd)::after{ right:0; top:22%; bottom:22%; width:1px; }
.stat:nth-child(n+3)::before{ left:12%; right:12%; top:0; height:1px; }
.stat__n{
  font:500 clamp(2.25rem,1.5rem + 2.6vw,3.75rem)/1 var(--t-font-display);
  letter-spacing:.02em;
  background:var(--t-wordmark);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--t-accent);
}
.stat__l{ font:500 var(--fs-label)/1.3 var(--s-font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--t-label); }
@media (width >= 768px){
  .stats{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .stat::before{ content:none !important; }
  .stat::after{ content:"" !important; position:absolute; right:0; top:22%; bottom:22%; width:1px; background:var(--t-line); }
  .stat:last-child::after{ content:none !important; }
}


/* ════════════════════════════════════════════════════════════════
   SKILLS EXPLORER · a real tablist, data on the tiles
   ════════════════════════════════════════════════════════════════ */
.skills-sec{ position:relative; isolation:isolate; overflow-x:clip; }
.skills__backdrop{
  position:absolute; right:max(0px,(100% - 1600px) / 2); top:30%; z-index:-1;
  width:min(34vw,520px);
  opacity:.12;
  pointer-events:none;
  -webkit-mask:radial-gradient(ellipse 60% 55% at 50% 45%,#000 35%,transparent 72%);
  mask:radial-gradient(ellipse 60% 55% at 50% 45%,#000 35%,transparent 72%);
}
.skills__backdrop img{ width:100%; height:auto; }
@media (width < 900px){ .skills__backdrop{ display:none; } }

.skills{ display:grid; gap:clamp(18px,2vw,26px); }
.skills__tiles{ align-content:start; }
.skills__filters{ display:flex; flex-wrap:wrap; gap:8px; }
.filter{
  display:inline-flex; align-items:center; gap:.6em;
  min-height:40px; padding:0 16px;
  border:1px solid var(--t-line); border-radius:var(--r-pill);
  background:rgb(12 14 24 / .7);
  font:700 var(--fs-label)/1 var(--t-font-label); letter-spacing:.16em; text-transform:uppercase;
  color:var(--t-ink-2);
  transition:border-color var(--d-4) var(--ease-soft),color var(--d-4),background-color var(--d-4);
}
.filter__n{ font-family:var(--t-font-display); letter-spacing:.04em; color:var(--t-ink-3); }
@media (hover:hover){ .filter:hover{ border-color:var(--t-line-2); color:var(--t-ink); transition-duration:var(--d-3); } }
.filter[aria-pressed="true"]{ border-color:var(--t-accent); color:var(--t-on-accent); background:var(--t-btn); }
.filter[aria-pressed="true"] .filter__n{ color:var(--t-on-accent); }
@media (pointer:coarse){ .filter{ min-height:44px; } }

.skills__tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
@media (width >= 640px){ .skills__tiles{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:96px; aspect-ratio:1;
  padding:10px 4px 8px;
  border:1px solid var(--t-line); border-radius:var(--t-radius);
  background:linear-gradient(145deg,#141522,#0c0e18 70%);
  font:700 .8125rem/1.1 var(--t-font-body); letter-spacing:.01em;
  color:var(--t-ink-2);
  transition:translate var(--d-4) var(--ease-out),border-color var(--d-4) var(--ease-soft),box-shadow var(--d-4) var(--ease-soft),color var(--d-4);
}
.tile img{ width:min(64px,62%); height:auto; aspect-ratio:1; object-fit:contain; transition:scale var(--d-4) var(--ease-out); }
.tile::after{                            /* gold underglow */
  content:""; position:absolute; left:16%; right:16%; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--t-accent-hi),transparent);
  opacity:0; transition:opacity var(--d-4);
}
@media (hover:hover){
  .tile:hover{ translate:0 -4px; border-color:var(--t-line-2); color:var(--t-ink); box-shadow:0 14px 28px -14px rgba(240,180,60,.55); transition-duration:var(--d-3); }
  .tile:hover::after{ opacity:1; }
  .tile:hover img{ scale:1.06; }
}
.tile[aria-selected="true"]{
  border-color:rgba(255,206,120,.42);
  background:linear-gradient(145deg,#211c12,#100e10 72%);
  color:var(--t-ink);
  animation:legendAura 3.2s ease-in-out infinite;
}
.tile[aria-selected="true"]::after{ opacity:1; }
@media (width < 640px){ .tile{ min-height:0; font-size:.6875rem; } }
@media (prefers-reduced-motion:reduce){ .tile[aria-selected="true"]{ animation:none; box-shadow:inset 0 0 0 1px rgba(255,216,140,.42),0 0 18px rgba(255,160,30,.3); } }

.skill-panel{ position:relative; padding:clamp(22px,2.6vw,36px); outline-offset:4px; }
.skill-panel__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; transition:opacity .32s var(--ease-soft); }
.skill-panel.is-out .skill-panel__inner{ opacity:0; transition-duration:.2s; }
.skill-panel__art{ position:relative; width:min(220px,58%); aspect-ratio:1; margin-bottom:6px; }
.skill-panel__art::before{
  content:""; position:absolute; inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,204,110,.32),rgba(201,168,76,.1) 45%,transparent 68%);
}
.skill-panel__icon{ position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 22px rgb(0 0 0 / .6)); }
.skill-panel__name{ font-size:var(--fs-h2); }
.skill-panel__meta{ margin-top:8px; font:700 var(--fs-label)/1.3 var(--t-font-label); letter-spacing:.2em; text-transform:uppercase; color:var(--t-label); }
.skill-panel__fact{ max-width:34ch; margin-top:14px; font-size:var(--fs-lead); line-height:1.5; color:var(--t-ink); }
.skill-panel__pet{
  display:flex; align-items:center; gap:16px;
  width:100%; margin-top:clamp(18px,2vw,26px); padding:12px 16px;
  border:1px solid var(--t-line); border-radius:var(--t-radius);
  background:rgb(7 8 15 / .45);
  text-align:left;
}
.skill-panel__pet-img{ flex:none; width:76px; height:76px; object-fit:contain; filter:drop-shadow(0 6px 10px rgb(0 0 0 / .6)); }
.skill-panel__pet-text{ display:grid; gap:2px; min-width:0; color:var(--t-ink-2); }
.skill-panel__label{ font:700 var(--fs-micro)/1.3 var(--t-font-label); letter-spacing:.2em; text-transform:uppercase; color:var(--t-label); }
.skill-panel__pet-name{ font:500 1.0625rem/1.3 var(--t-font-display); letter-spacing:.03em; color:var(--t-ink); }
.skill-panel__bonus{ font-weight:700; color:var(--t-accent-hi); }
.skill-panel__house{ margin-top:14px; font-size:var(--fs-sm); color:var(--t-ink-2); }
.skill-panel__house b{ color:color-mix(in srgb,var(--h-ashen) 82%,#fff); font-weight:700; }
.skill-panel__house[data-house="Verdant Circle"] b{ color:var(--h-verdant); }
.skill-panel__house[data-house="Gilded Hammer"] b{ color:var(--h-gilded); }
@media (prefers-reduced-motion:no-preference){
  .skill-panel__art::before{ animation:breathe-glow 6s ease-in-out infinite; }
  .skill-panel__pet-img{ animation:bob 2.4s ease-in-out infinite alternate; }
  .skill-panel.is-in .skill-panel__icon{ animation:icon-rise .32s var(--ease-out); }
}
@keyframes icon-rise{ from{ transform:translateY(12px); } }

@media (width >= 1024px){
  .skills{ grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto 1fr; column-gap:var(--grid-gap); align-items:start; }
  .skills__filters,.skills__tiles{ grid-column:1 / span 7; }
  .skills__tiles{ grid-row:2; }
  .skill-panel{ grid-column:8 / -1; grid-row:1 / span 2; position:sticky; top:calc(var(--header-h) + 24px); }
}
@media (width < 1024px){
  .skill-panel{ order:-1; }
  .skill-panel__art{ width:min(160px,44%); }
}


/* ════════════════════════════════════════════════════════════════
   COMPANIONS · 17 skill pets, 11 rebirth companions
   ════════════════════════════════════════════════════════════════ */
.companions__fight{
  position:relative;
  max-width:36ch;
  padding:16px 20px 16px 22px;
  border:1px solid var(--t-line-2); border-left:2px solid var(--t-accent); border-radius:var(--t-radius);
  background:linear-gradient(100deg,rgba(201,168,76,.1),rgb(12 14 24 / .7) 60%);
  font-size:var(--fs-sm); line-height:1.55;
  color:var(--t-ink);
  text-align:left;
  box-shadow:0 18px 50px -24px rgba(201,168,76,.35);
}
.companions__fight-k{ display:block; margin-bottom:6px; font:700 var(--fs-micro)/1.3 var(--t-font-label); letter-spacing:.22em; text-transform:uppercase; color:var(--t-accent-hi); }
.pets{ --per:3; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(8px,1vw,14px) clamp(4px,.8vw,12px); }
.pets > li{ flex:0 0 calc((100% - (var(--per) - 1) * clamp(4px,.8vw,12px)) / var(--per)); min-width:0; }
@media (width < 640px){ .pet__name{ font-size:.875rem; letter-spacing:.01em; } .pet__skill{ font-size:.6875rem; letter-spacing:.06em; } }
@media (width >= 640px){ .pets{ --per:5; } }
@media (width >= 900px){ .pets{ --per:6; } }
@media (width >= 1200px){ .pets{ --per:9; } }
.pet{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  margin:0; padding:12px 6px 16px;
  border-radius:var(--t-radius);
  outline-offset:2px;
  transition:translate var(--d-4) var(--ease-out);
}
.pet::before{                            /* soft gold floor */
  content:""; position:absolute; left:8%; right:8%; top:46%; height:34%;
  background:radial-gradient(ellipse 50% 40% at 50% 60%,rgba(240,204,110,.26),rgba(201,168,76,.08) 55%,transparent 75%);
  pointer-events:none;
}
.pet img{
  position:relative;
  width:min(128px,100%); aspect-ratio:1; height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 10px rgb(0 0 0 / .55));
}
.pet figcaption{ position:relative; display:grid; justify-items:center; gap:2px; margin-top:4px; }
.pet__name{ font:500 1rem/1.2 var(--t-font-display); letter-spacing:.04em; color:var(--t-ink); }
.pet__skill{ font:700 .75rem/1.2 var(--t-font-body); font-variant:small-caps; letter-spacing:.12em; text-transform:lowercase; color:var(--t-label); }
.pet__bonus{
  position:absolute; left:50%; bottom:calc(100% - 4px); z-index:5;
  width:max-content; max-width:min(240px,80vw);
  padding:9px 13px;
  border:1px solid var(--t-line-2); border-radius:6px;
  background:linear-gradient(145deg,#1a1b2b,#0e1019 75%);
  box-shadow:0 16px 40px -10px #000c,0 0 18px rgba(201,168,76,.12);
  font-size:.8125rem; line-height:1.4;
  color:var(--t-ink);
  text-align:center;
  opacity:0; translate:-50% 8px;
  pointer-events:none;
  transition:opacity var(--d-3) var(--ease-soft),translate var(--d-3) var(--ease-out);
}
.pet::after{                             /* contact-flare burst, once per hover */
  content:""; position:absolute; left:50%; top:34%;
  width:150px; aspect-ratio:1;
  translate:-50% -50%;
  background:center / contain no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
}
.pets.is-in .pet::after{ background-image:none; }   /* fetched once the grid is seen */
.pet:is(:hover,:focus){ z-index:4; translate:0 -6px; }
.pet:is(:hover,:focus) .pet__bonus{ opacity:1; translate:-50% 0; }
@media (prefers-reduced-motion:no-preference){
  .pet img{ animation:bob var(--bob,4.6s) ease-in-out var(--bob-d,0s) infinite alternate; }
  .pets > li:nth-child(3n+1) .pet{ --bob:4.1s; } .pets > li:nth-child(3n+2) .pet{ --bob:5.2s; } .pets > li:nth-child(3n) .pet{ --bob:5.9s; }
  .pets > li:nth-child(2n) .pet{ --bob-d:-1.7s; } .pets > li:nth-child(5n) .pet{ --bob-d:-3.1s; }
  .pet:is(:hover,:focus)::after{ animation:flare .45s var(--ease-out); }
}
@media (prefers-reduced-motion:reduce){ .pet,.pet__bonus{ transition:none; } }
/* Cards on the row ends open inward, so they never run off the screen
   (rows: 3 below 640, 5 to 899, 6 to 1199, then 9 + 8). */
@media (width < 640px){
  .pets > li:nth-child(3n+1) .pet__bonus{ left:0; translate:0 8px; }
  .pets > li:is(:nth-child(3n),:last-child) .pet__bonus{ left:auto; right:0; translate:0 8px; }
  .pets > li:is(:nth-child(3n+1),:nth-child(3n),:last-child) .pet:is(:hover,:focus) .pet__bonus{ translate:0 0; }
}
@media (640px <= width < 900px){
  .pets > li:nth-child(5n+1) .pet__bonus{ left:0; translate:0 8px; }
  .pets > li:nth-child(5n) .pet__bonus{ left:auto; right:0; translate:0 8px; }
  .pets > li:is(:nth-child(5n+1),:nth-child(5n)) .pet:is(:hover,:focus) .pet__bonus{ translate:0 0; }
}
@media (900px <= width < 1200px){
  .pets > li:nth-child(6n+1) .pet__bonus{ left:0; translate:0 8px; }
  .pets > li:nth-child(6n) .pet__bonus{ left:auto; right:0; translate:0 8px; }
  .pets > li:is(:nth-child(6n+1),:nth-child(6n)) .pet:is(:hover,:focus) .pet__bonus{ translate:0 0; }
}
@media (width >= 1200px){
  .pets > li:is(:nth-child(1),:nth-child(10)) .pet__bonus{ left:0; translate:0 8px; }
  .pets > li:is(:nth-child(9),:nth-child(17)) .pet__bonus{ left:auto; right:0; translate:0 8px; }
  .pets > li:is(:nth-child(1),:nth-child(10),:nth-child(9),:nth-child(17)) .pet:is(:hover,:focus) .pet__bonus{ translate:0 0; }
}
@keyframes flare{ 0%{ opacity:0; scale:.35; } 30%{ opacity:1; } 100%{ opacity:0; scale:1.25; } }

.reborn{ position:relative; margin-top:clamp(64px,7vw,112px); }
.reborn::before{                         /* the violet floor */
  content:""; position:absolute; left:-4%; right:-4%; bottom:-16px; height:72%; z-index:-1;
  background:radial-gradient(ellipse 50% 70% at 50% 100%,rgba(166,132,232,.24),rgba(120,120,255,.07) 55%,transparent 75%);
  pointer-events:none;
}
.reborn::after{
  content:""; position:absolute; left:6%; right:6%; bottom:46px; height:1px; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(195,155,255,.55),transparent);
}
.rpets{ display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:clamp(4px,.6vw,10px); }
.rpet{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:100%; padding:8px 2px 4px;
  border-radius:var(--t-radius);
  text-align:center;
}
.rpet__art{ position:relative; display:block; width:100%; max-width:112px; aspect-ratio:1; }
.rpet__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.rpet__sil{ filter:brightness(0) drop-shadow(0 0 10px #a684e8); }
.rpet__img{ opacity:0; filter:drop-shadow(0 6px 12px rgb(0 0 0 / .6)); transition:opacity .6s var(--ease-out); }
.rpet__cap{
  display:block; min-height:2.6em;
  font-size:.75rem; line-height:1.3;
  color:var(--t-ink-3);
  opacity:.0; translate:0 4px;
  transition:opacity .6s var(--ease-out),translate .6s var(--ease-out),color .6s;
}
.rpet__cap b{ display:block; font:500 .875rem/1.25 var(--t-font-display); letter-spacing:.03em; color:var(--t-accent-2-hi); }
.rpet:is(:hover,:focus-visible,[aria-pressed="true"]) .rpet__img{ opacity:1; }
.rpet:is(:hover,:focus-visible,[aria-pressed="true"]) .rpet__cap{ opacity:1; translate:0 0; color:var(--t-ink-2); }
.rpet--last .rpet__sil{ filter:brightness(0) drop-shadow(0 0 12px #ffb44a) drop-shadow(0 0 4px #a684e8); }
@media (width < 1024px){
  .rpets{
    display:flex; gap:6px;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--gutter)); padding:0 var(--gutter) 8px;
    scrollbar-width:none;
  }
  .rpets > li{ flex:0 0 116px; scroll-snap-align:center; }
  .rpet__cap{ opacity:.85; translate:none; }
}


/* ════════════════════════════════════════════════════════════════
   FORGE · eight blades, seven rarities
   ════════════════════════════════════════════════════════════════ */
.blades{
  --step:clamp(8px,1.5vw,24px);
  position:relative;
  display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-items:end;
  gap:clamp(4px,1vw,14px);
  padding:calc(var(--step) * 7 + 24px) 0 40px;
}
.blades::before{                         /* the light rail, rising bronze → void */
  content:""; position:absolute; left:2%; right:2%; bottom:52px; top:calc(var(--step) * 1 + 24px);
  background:linear-gradient(90deg,#9a6a35,#c9a84c 30%,#f0e6c8 62%,#c39bff 88%,#a0a0ff);
  clip-path:polygon(0 calc(100% - 1px),100% 0,100% 2px,0 100%);
  opacity:.75;
  filter:drop-shadow(0 0 6px rgba(240,204,110,.5));
  pointer-events:none;
}
.blade{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  translate:0 calc(var(--i) * var(--step) * -1);
}
.blade img{ width:min(160px,100%); aspect-ratio:1; height:auto; object-fit:contain; filter:drop-shadow(0 10px 16px rgb(0 0 0 / .6)); }
.blade__name{ font:700 var(--fs-micro)/1.25 var(--t-font-label); letter-spacing:.14em; text-transform:uppercase; text-align:center; color:var(--t-label); }
.blade--void .blade__name{ color:var(--t-accent-2-hi); }
.blade--void::before{
  content:""; position:absolute; left:50%; top:40%;
  width:96%; aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(160,160,255,.42),rgba(120,120,255,.14) 42%,transparent 68%);
  pointer-events:none;
}
.blade--void img{ border-radius:8px; animation:voidAura 3.2s ease-in-out infinite; }
.blades::after{                          /* blade-trail swipe, once on reveal */
  content:""; position:absolute; left:0; top:8%;
  width:40%; aspect-ratio:1;
  background:center / contain no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.reduced) .blades[data-reveal="blades"]:not(.is-in) .blade{ opacity:0; }
  .blades.is-in .blade{ animation:blade-in .9s var(--ease-out) calc(var(--i) * 120ms) backwards; }
  .blades.is-in::after{ background-image:none; animation:trail 1.3s var(--ease-cine) 1s; }
}
@media (prefers-reduced-motion:reduce){ .blade--void img{ animation:none; box-shadow:0 0 22px rgba(120,120,255,.45); } }
@keyframes blade-in{ from{ opacity:0; transform:translateY(24px) rotate(-6deg); } }
@keyframes trail{ 0%{ opacity:0; transform:translateX(-30%) rotate(-12deg); } 25%{ opacity:.9; } 100%{ opacity:0; transform:translateX(210%) rotate(-12deg); } }
@media (width < 768px){
  .blades{
    --step:10px;
    display:flex; align-items:flex-end; gap:6px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .blade{ flex:0 0 34%; scroll-snap-align:center; }
  .blades::before{ left:var(--gutter); right:auto; width:calc(34% * 8 + 42px); }
}

.rarity{ display:grid; justify-items:center; gap:18px; margin-top:clamp(36px,4vw,56px); }
.rarity__label{ font:var(--t-label-weight) var(--fs-label)/1.3 var(--t-font-label); letter-spacing:var(--t-label-track); text-transform:uppercase; color:var(--t-label); }
.rarity__rail{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding-top:clamp(88px,9vw,120px); }
.rar{
  --rar:#9e9e9e;
  position:relative;
  display:inline-flex; align-items:center; gap:9px;
  min-height:40px; padding:0 16px;
  border:1px solid color-mix(in srgb,var(--rar) 55%,transparent); border-radius:6px;
  background:color-mix(in srgb,var(--rar) 10%,#0c0e18);
  font:700 var(--fs-label)/1 var(--t-font-label); letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb,var(--rar) 72%,#fff);
}
.rar::before{ content:""; width:7px; height:7px; rotate:45deg; background:var(--rar); box-shadow:0 0 8px var(--rar); }
.rar--legend{ animation:legendAura 3s ease-in-out infinite; }
.rar--apex{ animation:apexAura 3s ease-in-out infinite; }
.rar--void{ animation:voidAura 3s ease-in-out infinite; }
.rar__orb{
  position:absolute; left:50%; bottom:calc(100% + 4px);
  width:clamp(80px,8vw,120px); height:auto; aspect-ratio:1;
  translate:-50% 0;
  filter:drop-shadow(0 0 18px rgba(120,120,255,.55));
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){ .rar__orb{ animation:orb 5s ease-in-out infinite alternate; } }
@media (prefers-reduced-motion:reduce){ .rar--legend,.rar--apex,.rar--void{ animation:none; } }
@keyframes orb{ from{ transform:translateY(0) rotate(-4deg); } to{ transform:translateY(-10px) rotate(4deg); } }
@media (width < 768px){ .rarity__rail{ padding-top:96px; } }

.facts{ display:grid; gap:var(--grid-gap); margin-top:clamp(40px,5vw,72px); }
@media (width >= 768px){ .facts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.fact{ padding:clamp(20px,2.2vw,28px); }
.fact__title{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:var(--fs-h3); color:var(--t-accent-hi); }
.fact__title::before{ content:""; width:7px; height:7px; rotate:45deg; border:1px solid var(--t-accent); }
.fact p{ color:var(--t-ink-2); }


/* ════════════════════════════════════════════════════════════════
   HOUSES · three gates and the rank ladder
   ════════════════════════════════════════════════════════════════ */
.houses{ display:grid; gap:clamp(56px,7vw,72px) var(--grid-gap); padding-bottom:44px; }
.house{
  --h:var(--h-ashen); --h-deep:var(--h-ashen-deep);
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  flex:1 1 0;                             /* used by the desktop gates; set here too, so a transition never starts from 0 */
  min-width:0;
  border:1px solid color-mix(in srgb,var(--h) 30%,transparent);
  border-radius:var(--t-radius);
  background:linear-gradient(180deg,#0d0f1a,color-mix(in srgb,var(--h-deep) 55%,#07080f));
  outline-offset:4px;
  transition:border-color var(--d-5) var(--ease-soft),box-shadow var(--d-5) var(--ease-soft);
}
.house__banner{
  display:block; width:100%; aspect-ratio:16 / 9; height:auto;
  object-fit:cover; object-position:50% 50%;
  border-radius:var(--t-radius) var(--t-radius) 0 0;
}
.house::after{                           /* the House colour along the bottom edge */
  content:""; position:absolute; left:10%; right:10%; bottom:-1px; height:2px;
  background:linear-gradient(90deg,transparent,var(--h),transparent);
  box-shadow:0 0 22px var(--h),0 0 46px color-mix(in srgb,var(--h) 60%,transparent);
  opacity:.75;
  transition:opacity var(--d-5) var(--ease-soft);
}
.house__body{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  padding:22px clamp(18px,2.4vw,32px) 76px;
  text-align:center;
}
.house__flag{ font:700 var(--fs-micro)/1.3 var(--t-font-label); font-variant:small-caps; letter-spacing:.26em; text-transform:uppercase; color:color-mix(in srgb,var(--h) 60%,#f4ead0); }
.house__name{ margin-top:6px; font-size:var(--fs-h3); }
.house__motto{ margin-top:10px; font:italic 400 clamp(1.0625rem,.95rem + .45vw,1.375rem)/1.4 var(--t-font-display); color:var(--t-ink); text-wrap:balance; }
.house__perks{ display:grid; gap:8px; font-size:var(--fs-sm); color:var(--t-ink-2); }
.house__perks > li:first-child{ margin-top:16px; }   /* inside the clip, so a closed gate keeps no sliver */
.house__perks span{ display:block; font:700 var(--fs-micro)/1.4 var(--t-font-label); letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,var(--h) 55%,#f4ead0); }
.house__crest{
  position:absolute; left:50%; bottom:0; z-index:2;
  width:96px; height:96px;
  translate:-50% 50%;
  filter:drop-shadow(0 8px 14px rgb(0 0 0 / .7)) drop-shadow(0 0 12px color-mix(in srgb,var(--h) 45%,transparent));
}
@media (prefers-reduced-motion:no-preference){
  .house__crest{ animation:crest 4s ease-in-out infinite alternate; }
}
@keyframes crest{ from{ transform:scale(1); opacity:.96; } to{ transform:scale(1.02); opacity:1; } }

/* Desktop: three tall gates; the hovered or focused one opens to 2.2,
   and the first stands open while none is. Its perks unfold (grid
   rows 0fr → 1fr); the closed gates keep name and motto. */
.house__more{ display:grid; grid-template-rows:1fr; }
.house__more > .house__perks{ min-height:0; overflow:hidden; }
@media (width >= 1024px){
  .houses{ display:flex; gap:14px; height:clamp(520px,66vh,660px); }
  .houses > .house{ flex:1 1 0; transition:flex-grow .7s var(--ease-out),border-color var(--d-5),box-shadow var(--d-5); }
  .houses:not(:has(.house:is(:hover,:focus-within))) > .house:first-child,
  .houses > .house:is(:hover,:focus-within){ flex-grow:2.2; border-color:color-mix(in srgb,var(--h) 55%,transparent); box-shadow:0 30px 80px -30px color-mix(in srgb,var(--h) 45%,transparent); }
  .house__banner{ position:absolute; inset:0; z-index:-1; height:100%; aspect-ratio:auto; border-radius:inherit; object-position:var(--focus,50%) 40%; transition:scale 1.2s var(--ease-out); }
  .house::before{                        /* night rises from the floor so the words read on any banner */
    content:""; position:absolute; inset:0; z-index:0;
    border-radius:inherit;
    background:
      linear-gradient(0deg,color-mix(in srgb,var(--h-deep) 40%,#05060b) 0%,rgb(6 7 13 / .95) 30%,rgb(7 8 15 / .86) 50%,rgb(7 8 15 / .5) 64%,rgb(7 8 15 / .06) 80%,rgb(7 8 15 / .32));
  }
  .house__body{ margin-top:auto; padding-bottom:78px; }
  .house__motto{ max-width:24ch; }
  .house__more{ grid-template-rows:0fr; opacity:0; transition:grid-template-rows .6s var(--ease-out),opacity .4s var(--ease-soft); }
  .houses:not(:has(.house:is(:hover,:focus-within))) > .house:first-child .house__more,
  .houses > .house:is(:hover,:focus-within) .house__more{ grid-template-rows:1fr; opacity:1; transition-delay:.18s; }
  .houses:not(:has(.house:is(:hover,:focus-within))) > .house:first-child .house__banner,
  .houses > .house:is(:hover,:focus-within) .house__banner{ scale:1.03; }
  .house:is(:hover,:focus-within)::after{ opacity:1; }
  .house__crest{ width:112px; height:112px; }
  .house__perks{ max-width:44ch; }
}
@media (width >= 1024px) and (prefers-reduced-motion:reduce){
  .houses > .house,.house__more,.house__banner{ transition:none; }
}

.ranks{ margin-top:clamp(48px,5vw,80px); }
.ranks__label{ margin-bottom:22px; text-align:center; font:var(--t-label-weight) var(--fs-label)/1.3 var(--t-font-label); letter-spacing:var(--t-label-track); text-transform:uppercase; color:var(--t-label); }
.ranks__list{ position:relative; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); }
.ranks__list::before{
  content:""; position:absolute; left:5%; right:5%; top:6px; height:1px;
  background:linear-gradient(90deg,var(--t-rule-a),var(--t-rule-b) 50%,var(--t-rule-a));
  transform-origin:0 50%;
}
.ranks__list li{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font:700 var(--fs-micro)/1.3 var(--t-font-label); letter-spacing:.12em; text-transform:uppercase;
  color:var(--t-ink-3);
  text-align:center;
}
.ranks__list li::before{
  content:""; width:11px; height:11px;
  rotate:45deg;
  border:1px solid var(--t-gem);
  background:var(--t-bg);
  box-shadow:0 0 0 4px var(--t-bg);
}
.ranks__list li.is-oath{ color:var(--t-accent-hi); }
.ranks__list li.is-oath::before{ background:var(--t-marker); box-shadow:0 0 0 4px var(--t-bg),0 0 16px rgba(240,204,110,.7); }
.ranks__note{ display:block; margin-top:4px; font:italic 400 .8125rem/1.3 var(--t-font-display); letter-spacing:.02em; text-transform:none; color:var(--t-ink-2); }
@media (prefers-reduced-motion:no-preference){
  html.js:not(.reduced) .ranks[data-reveal="ranks"]:not(.is-in) .ranks__list::before{ transform:scaleX(0); }
  html.js:not(.reduced) .ranks[data-reveal="ranks"]:not(.is-in) .ranks__list li{ opacity:0; }
  .ranks.is-in .ranks__list::before{ animation:draw-x 1.4s var(--ease-cine) both; }
  .ranks.is-in .ranks__list li{ animation:reveal-rise .7s var(--ease-out) calc(var(--i) * 90ms + .2s) backwards; }
}
@keyframes draw-x{ from{ transform:scaleX(0); } }
@media (width < 768px){
  .ranks__list{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px; }
  .ranks__list::before{ display:none; }
  .ranks__list li{ flex-direction:row; justify-content:flex-start; gap:12px; text-align:left; }
  .ranks__list li::before{ flex:none; }
  .ranks__list li.is-oath{ flex-wrap:wrap; }
  .ranks__note{ flex-basis:100%; padding-left:23px; }
}
.houses__note{ max-width:60ch; margin:clamp(32px,3.6vw,48px) auto 0; text-align:center; color:var(--t-ink-2); }


/* ════════════════════════════════════════════════════════════════
   REBIRTH · the dial over the portal
   ════════════════════════════════════════════════════════════════ */
.section.rebirth{ position:relative; isolation:isolate; overflow:clip; --charge:.05; }
/* The portal plate is laid out at its own 3:2 so its ring (58.7% / 39.3%
   of the art) can be centred exactly: 122% wide, shifted left 21.65%. */
.rebirth__bg{
  position:absolute; left:-21.65%; top:clamp(-40px,-2vw,0px); z-index:-1;
  width:122%; aspect-ratio:3 / 2;
  -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 62%,transparent 92%);
  mask:linear-gradient(180deg,transparent,#000 14%,#000 62%,transparent 92%);
}
.rebirth__portal{ position:absolute; inset:0; width:100%; height:100%; opacity:.66; }
.rebirth__sigil{
  position:absolute; left:58.73%; top:39.3%;
  width:24%; height:auto; aspect-ratio:1;
  translate:-50% -50%;
  opacity:.2;
  filter:drop-shadow(0 0 6px rgba(240,204,110,.6));
}
@media (prefers-reduced-motion:no-preference){ .rebirth__sigil{ animation:spin 120s linear infinite; } }
.rebirth__charge{
  position:absolute; left:58.73%; top:39.3%;
  width:40%; aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(195,155,255,.55),rgba(166,132,232,.25) 38%,transparent 66%);
  mix-blend-mode:screen;
  opacity:calc(.15 + var(--charge) * .6);
  transition:opacity .3s var(--ease-soft);
}
.rebirth::after{                          /* night over the lower half for the lists */
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 70% 48% at 50% 34%,transparent,rgb(7 8 15 / .5) 70%);
  pointer-events:none;
}
@media (width < 768px){
  .rebirth__bg{ left:-67.46%; width:200%; top:40px; }
}
.rebirth__head{ position:relative; }
.rebirth__icon{ width:56px; height:56px; margin-right:6px; filter:drop-shadow(0 0 10px rgba(166,132,232,.6)); }
@media (prefers-reduced-motion:no-preference){ .rebirth__icon{ animation:icon-glow 4s ease-in-out infinite; } }
@keyframes icon-glow{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(166,132,232,.45)); } 50%{ filter:drop-shadow(0 0 16px rgba(195,155,255,.9)); } }

.dial{
  --thumb:30px;
  position:relative;
  max-width:920px; margin:0 auto;
  text-align:center;
}
.dial__readout{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.dial__big{
  font:500 clamp(4.25rem,2.6rem + 6vw,8.5rem)/1 var(--t-font-display);
  letter-spacing:.02em;
  background:linear-gradient(170deg,#fff3dc 10%,#f0cc6e 38%,#c9a84c 62%,#a684e8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--t-accent-hi);
  filter:drop-shadow(0 0 calc(10px + var(--charge) * 30px) rgba(166,132,232,calc(.25 + var(--charge) * .5)));
  font-variant-numeric:lining-nums;
}
.dial__text{ max-width:52ch; min-height:3em; font-size:var(--fs-lead); line-height:1.5; color:var(--t-ink); text-shadow:0 1px 10px #000; }
.dial__track{ position:relative; margin-top:clamp(44px,5vw,64px); }
.dial__input{
  --fill:calc(var(--v,1) / 20 * 100%);
  -webkit-appearance:none; appearance:none;
  position:relative; z-index:2;
  display:block; width:100%; height:48px; margin:0;
  background:transparent;
  cursor:pointer;
}
.dial__input:focus-visible{ outline-offset:6px; border-radius:6px; }
.dial__input::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:
    repeating-linear-gradient(90deg,rgba(240,204,110,.55) 0 1px,transparent 1px calc((100% - 1px) / 20)),
    linear-gradient(90deg,#a684e8,#f0cc6e var(--fill),rgba(201,168,76,.18) var(--fill));
  box-shadow:0 0 12px rgba(166,132,232,calc(.2 + var(--charge) * .6));
}
.dial__input::-moz-range-track{ height:4px; border-radius:2px; background:rgba(201,168,76,.18); }
.dial__input::-moz-range-progress{ height:4px; border-radius:2px; background:linear-gradient(90deg,#a684e8,#f0cc6e); }
.dial__input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:var(--thumb); height:var(--thumb); margin-top:calc(2px - var(--thumb) / 2);
  border:2px solid #f1d28c; border-radius:4px;
  rotate:45deg;
  background:radial-gradient(circle at 35% 35%,#fff3dc,#c39bff 45%,#4b336c);
  box-shadow:0 0 0 4px rgb(7 8 15 / .8),0 0 22px rgba(195,155,255,.8);
}
.dial__input::-moz-range-thumb{
  width:calc(var(--thumb) - 4px); height:calc(var(--thumb) - 4px);
  border:2px solid #f1d28c; border-radius:4px;
  rotate:45deg;
  background:radial-gradient(circle at 35% 35%,#fff3dc,#c39bff 45%,#4b336c);
  box-shadow:0 0 0 4px rgb(7 8 15 / .8),0 0 22px rgba(195,155,255,.8);
}
.dial__notches{ position:absolute; left:0; right:0; bottom:calc(100% - 4px); height:40px; pointer-events:none; }
.dial__notches li{
  position:absolute; bottom:0;
  left:calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--n) / 20);
  width:28px; height:28px;
  translate:-50% 0;
  border:1px solid var(--t-line-2); border-radius:50%;
  overflow:hidden;
  background:#0c0e18;
  opacity:.55;
  filter:grayscale(1) brightness(.6);
  transition:opacity var(--d-4),filter var(--d-4),box-shadow var(--d-4),border-color var(--d-4);
}
.dial__notches li::after{ content:""; }
.dial__notches img{ width:100%; height:100%; object-fit:cover; }
.dial__notches li.is-void{ width:34px; height:34px; }
.dial__notches li.is-lit{ opacity:1; filter:none; border-color:var(--t-accent-hi); box-shadow:0 0 0 2px rgb(7 8 15 / .8),0 0 14px rgba(240,204,110,.6); }
.dial__notches li.is-void.is-lit{ border-color:#ffb44a; box-shadow:0 0 0 2px #000,0 0 0 3px rgba(255,180,74,.7),0 0 22px rgba(255,180,74,.6); }
.dial__scale{
  display:flex; justify-content:space-between;
  margin:2px calc(var(--thumb) / 2 - .5em) 0;
  font:500 var(--fs-micro)/1 var(--t-font-display);
  color:var(--t-ink-2);
}
.dial__boss{ margin-top:clamp(18px,2vw,26px); min-height:1.6em; font:400 var(--fs-h3)/1.4 var(--t-font-display); letter-spacing:.03em; color:var(--t-accent-2-hi); text-shadow:0 0 18px rgba(166,132,232,.45),0 1px 8px #000; }
@media (width < 640px){
  .dial{ --thumb:34px; }
  .dial__input{ height:52px; }
  .dial__notches li{ width:20px; height:20px; }
  .dial__notches li.is-void{ width:26px; height:26px; }
}

.rebirth__cols{ display:grid; gap:var(--grid-gap); margin-top:clamp(64px,7vw,104px); }
@media (width >= 1024px){ .rebirth__cols{ grid-template-columns:5fr 7fr; align-items:start; } }
.rb-card{ padding:clamp(22px,2.6vw,34px); background:linear-gradient(145deg,rgb(20 18 36 / .9),rgb(10 10 22 / .92) 70%); }
.rb-card__title{ margin-bottom:16px; font-size:var(--fs-h3); }
.rb-card--split{ display:grid; gap:28px; }
@media (width >= 640px){ .rb-card--split{ grid-template-columns:1fr 1fr; } }
.checks{ display:grid; gap:14px; }
.checks li{ position:relative; padding-left:38px; font-size:var(--fs-lead); color:var(--t-ink); }
.checks li::before{
  content:""; position:absolute; left:0; top:.2em;
  width:22px; height:22px;
  rotate:45deg;
  border:1px solid rgba(195,155,255,.6);
  background:rgb(166 132 232 / .12);
}
.checks li::after{                       /* the check, drawn in on reveal */
  content:""; position:absolute; left:6px; top:.42em;
  width:11px; height:6px;
  border-left:2px solid var(--t-accent-hi); border-bottom:2px solid var(--t-accent-hi);
  rotate:-45deg;
  filter:drop-shadow(0 0 4px rgba(240,204,110,.7));
}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.reduced) .rb-card:not(.is-in) .checks li::after{ clip-path:inset(0 0 0 100%); }
  .rb-card.is-in .checks li::after{ animation:check .5s var(--ease-out) backwards; }
  .rb-card.is-in .checks li:nth-child(1)::after{ animation-delay:.35s; } .rb-card.is-in .checks li:nth-child(2)::after{ animation-delay:.5s; }
  .rb-card.is-in .checks li:nth-child(3)::after{ animation-delay:.65s; } .rb-card.is-in .checks li:nth-child(4)::after{ animation-delay:.8s; }
}
@keyframes check{ from{ clip-path:inset(0 0 0 100%); } to{ clip-path:inset(0); } }
.rb-list{ display:grid; gap:9px; color:var(--t-ink-2); }
.rb-list li{ position:relative; padding-left:20px; }
.rb-list li::before{ content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; rotate:45deg; }
.rb-list--keep li::before{ background:var(--t-accent); box-shadow:0 0 8px rgba(201,168,76,.5); }
.rb-list--reset li::before{ border:1px solid var(--t-accent-2); }
.rb-list--reset li{ color:var(--t-ink-3); }


/* ════════════════════════════════════════════════════════════════
   BOSSES · the stage, the rune track, the Void
   ════════════════════════════════════════════════════════════════ */
.section.bosses{ padding-bottom:clamp(72px,8vw,128px); }
.bosses__then{ font:400 var(--fs-h3)/1.3 var(--t-font-display); letter-spacing:.06em; color:#ffb48a; text-shadow:0 0 22px rgba(231,76,60,.45); }

.stage{
  position:relative; isolation:isolate;
  height:max(90svh,640px); max-height:980px;
  margin-top:clamp(8px,1vw,16px);
}
.stage__art{ position:absolute; inset:0; }
.stage__art{
  -webkit-mask:linear-gradient(180deg,transparent,#000 9%,#000 86%,transparent);
  mask:linear-gradient(180deg,transparent,#000 9%,#000 86%,transparent);
}
.stage__arena{ opacity:0; transition:opacity .7s var(--ease-io); }
.stage__arena.is-on{ opacity:1; }
.stage .corona{ opacity:0; animation:none; }
.stage[data-boss="azhurak"] .corona{ animation:corona-flare 1.6s var(--ease-out) .25s backwards, corona 7s var(--ease-io) 1.85s infinite alternate; }
@media (prefers-reduced-motion:reduce){ .stage[data-boss="azhurak"] .corona{ opacity:.55; } }
.stage__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgb(7 8 15 / .9) 0%,rgb(7 8 15 / .62) 34%,rgb(7 8 15 / .08) 62%,transparent 80%),
    linear-gradient(0deg,rgb(7 8 15 / .92) 0%,rgb(7 8 15 / .2) 26%,transparent 42%);
}
.stage__scrim::after{                    /* the Void: the scrim turns crimson */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgb(34 5 10 / .9) 0%,rgb(44 6 12 / .55) 36%,transparent 66%),
    radial-gradient(ellipse 60% 50% at 70% 30%,rgba(231,76,60,.16),transparent 70%);
  opacity:0;
  transition:opacity .9s var(--ease-io);
}
.stage[data-boss="azhurak"] .stage__scrim::after{ opacity:1; }
.stage__embers .ember{ --t-ember:#ffd8b8; }
.stage__flare{
  position:absolute; right:22%; top:38%; z-index:3;
  width:min(320px,40vw); aspect-ratio:1;
  translate:50% -50%;
  background:center / contain no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){ .stage__flare.is-on{ animation:flare .6s var(--ease-out); } }
.stage.is-live .stage__flare{ background-image:none; }   /* fetched when bosses.js arrives */

.stage__panel{ position:absolute; inset:0; z-index:2; outline-offset:-6px; }
.boss{ position:relative; width:var(--wrap); height:100%; margin-inline:auto; }
.boss__info{
  position:absolute; left:0; top:44%; z-index:2;
  width:min(540px,44%);
  translate:0 -50%;
}
.boss__rb{ font:var(--t-label-weight) var(--fs-label)/1.3 var(--t-font-label); letter-spacing:.26em; text-transform:uppercase; color:var(--t-accent-hi); }
.boss__name{ margin-top:10px; font-size:var(--fs-h1); line-height:1; text-shadow:0 2px 24px rgb(0 0 0 / .8); }
.boss__epithet{ display:block; margin-top:.28em; font-size:.42em; font-weight:400; letter-spacing:.06em; color:var(--t-ink-2); }
.boss__phases{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:clamp(16px,2vw,24px); }
.boss__phases li{ display:inline-flex; align-items:center; gap:10px; font:400 .9375rem/1.3 var(--t-font-display); letter-spacing:.04em; color:var(--t-ink); }
.boss__phases li::before{ content:""; flex:none; width:6px; height:6px; rotate:45deg; background:var(--t-marker); box-shadow:0 0 8px rgba(217,174,66,.5); }
.boss__stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:clamp(18px,2.2vw,28px); }
.boss__stats > div{
  padding:10px 12px;
  border:1px solid var(--t-line); border-radius:6px;
  background:rgb(10 11 20 / .66);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.boss__stats dt{ font:700 var(--fs-micro)/1.3 var(--t-font-label); letter-spacing:.16em; text-transform:uppercase; color:var(--t-label); }
.boss__stats dd{ display:flex; align-items:center; gap:8px; margin:4px 0 0; font:500 1.0625rem/1.2 var(--t-font-display); color:var(--t-ink); }
.boss__stats dd img{ flex:none; width:26px; height:26px; object-fit:contain; }
.boss__figure{
  position:absolute; right:3%; bottom:max(24%,calc(clamp(28px,10vh,104px) + 110px)); z-index:1;
  height:min(60%,600px);
  display:flex; justify-content:center; align-items:flex-end;
}
.boss__figure::before{                   /* ground shadow */
  content:""; position:absolute; left:10%; right:10%; bottom:-2%; height:9%; z-index:-1;
  border-radius:50%;
  background:radial-gradient(closest-side,rgb(0 0 0 / .75),transparent);
}
.boss__sprite{ height:100%; width:auto; max-width:none; filter:drop-shadow(0 16px 30px rgb(0 0 0 / .55)); }
@media (prefers-reduced-motion:no-preference){
  .boss__sprite{ animation:boss-in .9s var(--ease-out) both, boss-breathe 5s ease-in-out .9s infinite; }
  .boss__info{ animation:boss-text .7s var(--ease-out) .08s backwards; }
}
@keyframes boss-in{ from{ opacity:0; transform:translateX(6%) scale(.96); } }
@keyframes boss-breathe{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes boss-text{ from{ opacity:0; translate:0 calc(-50% + 12px); } }
.boss__verse{
  position:absolute; top:42%; z-index:1;
  translate:0 -50%;
  font:500 .8125rem/2.15 var(--t-font-display);
  letter-spacing:.44em;
  text-align:center;
  color:rgb(244 234 208 / .62);
  text-shadow:0 1px 8px #000;
  pointer-events:none;
}
.boss__verse--l{ left:49%; }
.boss__verse--r{ right:0; }
.boss--void .boss__rb{ color:#ffb48a; }
.boss--void .boss__name{ background:var(--t-wordmark); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.boss--void .boss__epithet{ -webkit-text-fill-color:var(--t-ink-2); }
.boss__void{ margin-top:clamp(16px,2vw,24px); }
.boss__rewards-h{ font:700 var(--fs-micro)/1.3 var(--t-font-label); letter-spacing:.2em; text-transform:uppercase; color:#ffb48a; }
.boss__rewards{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.boss__rewards li{
  position:relative;
  width:clamp(52px,4.4vw,64px); aspect-ratio:1;
  padding:6px;
  border:1px solid rgba(255,180,74,.35); border-radius:6px;
  background:radial-gradient(circle at 50% 40%,rgba(231,76,60,.2),rgb(12 10 16 / .85) 70%);
  outline-offset:2px;
}
.boss__rewards img{ width:100%; height:100%; object-fit:contain; }
.boss__rewards span{
  position:absolute; left:50%; bottom:calc(100% + 8px); z-index:3;
  width:max-content; padding:6px 10px;
  border:1px solid var(--t-line-2); border-radius:5px;
  background:#0e1019;
  font:500 .8125rem/1.2 var(--t-font-display); letter-spacing:.03em;
  color:var(--t-ink);
  opacity:0; translate:-50% 4px;
  pointer-events:none;
  transition:opacity var(--d-3),translate var(--d-3) var(--ease-out);
}
.boss__rewards li:is(:hover,:focus) span{ opacity:1; translate:-50% 0; }
.boss__rewards li:is(:hover,:focus){ border-color:rgba(255,206,120,.7); box-shadow:0 0 18px rgba(255,160,30,.3); }
@media (prefers-reduced-motion:no-preference){
  .boss__rewards li{ animation:reward-fan .7s var(--ease-out) calc(.35s + var(--i) * 90ms) backwards; }
  .boss__rewards li:is(:hover,:focus){ animation:legendAura 3s ease-in-out infinite; }
}
@keyframes reward-fan{ from{ opacity:0; transform:translate(calc(var(--i) * -14px),14px) rotate(-10deg) scale(.8); } }
.boss__teaser{ margin-top:14px; }
.boss__teaser .icon{ font-size:.85em; color:#ffb48a; }

.stage__track{
  position:absolute; left:0; right:0; bottom:clamp(28px,10vh,104px); z-index:3;
  width:var(--wrap); margin-inline:auto;
}
.stage__rail{
  position:absolute; left:20px; right:20px; top:24px; height:1px;
  background:
    repeating-linear-gradient(90deg,rgba(240,204,110,.45) 0 1px,transparent 1px calc((100% - 1px) / 19)) 0 -3px / 100% 7px no-repeat,
    linear-gradient(90deg,transparent,var(--t-line-3) 6%,var(--t-line-3) 94%,transparent);
}
.stage__tabs{
  position:relative;
  display:grid; grid-template-columns:repeat(10,minmax(0,1fr)) clamp(16px,4vw,72px) auto;
  align-items:start;
}
.node{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  min-width:44px;
  border-radius:var(--r-sm);
  outline-offset:4px;
}
.node--void{ grid-column:12; }
.node__img{
  display:block;
  width:48px; height:48px;
  overflow:hidden;
  border:1px solid var(--t-line-2); border-radius:50%;
  background:#0c0e18;
  box-shadow:0 0 0 3px rgb(7 8 15 / .85);
  filter:saturate(.55) brightness(.72);
  transition:filter var(--d-4) var(--ease-soft),border-color var(--d-4),box-shadow var(--d-4),scale var(--d-4) var(--ease-out);
}
.node__img img{ width:100%; height:100%; object-fit:cover; }
.node__n{ font:500 .75rem/1 var(--t-font-display); letter-spacing:.08em; color:var(--t-ink-3); transition:color var(--d-4); }
@media (hover:hover){ .node:hover .node__img{ filter:none; scale:1.06; transition-duration:var(--d-3); } }
.node[aria-selected="true"] .node__img{ filter:none; scale:1.1; border-color:var(--t-accent-hi); box-shadow:0 0 0 3px rgb(7 8 15 / .85),0 0 0 4px rgba(240,204,110,.65),0 0 24px rgba(240,204,110,.5); }
.node[aria-selected="true"] .node__n{ color:var(--t-accent-hi); }
.node--void .node__img{ width:64px; height:64px; margin-top:-8px; border-color:rgba(255,180,74,.55); box-shadow:0 0 0 3px #000,0 0 0 4px rgba(255,180,74,.45),0 0 26px rgba(255,140,40,.35); }
.node--void[aria-selected="true"] .node__img{ box-shadow:0 0 0 3px #000,0 0 0 5px rgba(255,190,90,.9),0 0 34px rgba(255,150,50,.7); }
.node--void .node__n{ color:#ffb48a; }

@media (width < 768px){
  .stage{ display:flex; flex-direction:column; height:auto; max-height:none; }
  .stage__art{ position:relative; inset:auto; order:0; aspect-ratio:16 / 10; -webkit-mask:linear-gradient(180deg,transparent,#000 8%,#000 88%,transparent); mask:linear-gradient(180deg,transparent,#000 8%,#000 88%,transparent); }
  .stage__scrim{ background:linear-gradient(0deg,rgb(7 8 15 / .85),transparent 40%); }
  .stage__track{ position:relative; order:1; bottom:auto; width:auto; margin:6px 0 0; }
  .stage__tabs{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px var(--gutter) 6px; scrollbar-width:none; }
  .node{ flex:none; scroll-snap-align:center; }
  .node--void{ margin-left:14px; }
  .node__img{ width:44px; height:44px; }
  .node--void .node__img{ width:52px; height:52px; margin-top:-4px; }
  .stage__rail{ display:none; }
  .stage__panel{ position:static; order:2; }
  .boss{ position:static; width:auto; height:auto; padding:18px var(--gutter) 0; }
  .boss__info{ position:static; width:auto; translate:none; }
  .boss__figure{ position:absolute; top:calc(62.5vw * .22); right:auto; left:50%; bottom:auto; height:calc(62.5vw * .7); translate:-50% 0; }
  .boss__verse{ display:none; }
  .stage__flare{ top:30vw; right:50%; }
  @media (prefers-reduced-motion:no-preference){ .boss__info{ animation-name:fade-in; } }
}
@media (768px <= width < 1024px){
  .boss__info{ width:min(480px,52%); }
  .boss__verse{ display:none; }
}

.wb{ margin-top:clamp(72px,8vw,128px); }
.wb__head{ display:grid; gap:12px; margin-bottom:clamp(24px,3vw,40px); }
@media (width >= 1024px){ .wb__head{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--grid-gap); align-items:end; } .wb__title{ grid-column:1 / span 6; } .wb__facts{ grid-column:7 / -1; } }
.wb__title{ font-size:var(--fs-h2); }
.wb__facts{ color:var(--t-ink-2); }
.wb__cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid-gap); }
.wb-card{
  position:relative; isolation:isolate;
  display:block;
  aspect-ratio:4 / 3.15;
  overflow:hidden;
  border:1px solid rgba(166,132,232,.3); border-radius:var(--t-radius);
  background:#08080f;
  outline-offset:4px;
  transition:border-color var(--d-4) var(--ease-soft),box-shadow var(--d-4) var(--ease-soft);
}
.wb-card__art{ position:absolute; inset:0; }
.wb-card__arena{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:scale 1.2s var(--ease-out); }
.wb-card__art::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,#07070e 4%,rgb(8 8 15 / .82) 30%,rgb(8 8 15 / .1) 58%,transparent); }
.wb-card__boss{ position:absolute; left:50%; bottom:22%; height:72%; width:auto; max-width:none; translate:-50% 0; filter:drop-shadow(0 10px 18px rgb(0 0 0 / .7)); transition:translate var(--d-5) var(--ease-out); }
.wb-card__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 20px 18px; }
.wb-card__name{ font:500 var(--fs-h3)/1.15 var(--t-font-display); letter-spacing:.03em; color:var(--t-ink); text-shadow:0 2px 14px #000; }
.wb-card__name span{ display:block; margin-top:4px; font-size:.62em; letter-spacing:.06em; color:var(--t-accent-2-hi); }
.wb-card__more{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--d-4) var(--ease-out),opacity var(--d-4) var(--ease-soft); }
.wb-card__drops{ display:grid; gap:8px; min-height:0; overflow:hidden; padding-top:12px; }
.wb-card__drops dt{ font:700 var(--fs-micro)/1.3 var(--t-font-label); letter-spacing:.18em; text-transform:uppercase; color:#ff8a7a; }
.wb-card__drops div:last-child dt{ color:var(--r-void); }
.wb-card__drops dd{ margin:2px 0 0; font-size:var(--fs-sm); color:var(--t-ink-2); }
.wb-card:is(:hover,:focus){ border-color:rgba(195,155,255,.6); box-shadow:0 26px 60px -26px rgba(120,120,255,.55); }
.wb-card:is(:hover,:focus) .wb-card__more{ grid-template-rows:1fr; opacity:1; }
.wb-card:is(:hover,:focus) .wb-card__arena{ scale:1.05; }
.wb-card:is(:hover,:focus) .wb-card__boss{ translate:-50% -4%; }
/* Touch: no hover to unfold the drops, so the card stacks: art, then everything below it. */
@media (hover:none){
  .wb-card{ aspect-ratio:auto; }
  .wb-card__art{ position:relative; aspect-ratio:16 / 10; }
  .wb-card__art::after{ background:linear-gradient(0deg,#08080f 2%,transparent 40%); }
  .wb-card__boss{ bottom:-2%; height:94%; }
  .wb-card__body{ position:relative; padding-top:6px; }
  .wb-card__more{ grid-template-rows:1fr; opacity:1; }
}
@media (hover:hover) and (pointer:fine){
  .wb-card::before{
    content:""; position:absolute; inset:0; z-index:3;
    background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(195,155,255,.16),transparent 62%);
    mix-blend-mode:screen;
    opacity:0;
    pointer-events:none;
    transition:opacity var(--d-4) var(--ease-soft);
  }
  .wb-card:hover::before{ opacity:1; transition-duration:var(--d-3); }
}
@media (prefers-reduced-motion:reduce){ .wb-card__more,.wb-card__arena,.wb-card__boss{ transition:none; } }
.wb__quote{ max-width:760px; margin:clamp(36px,4vw,56px) auto 0; text-align:center; }
.wb__quote p{ font:italic 400 clamp(1.125rem,1rem + .6vw,1.5rem)/1.5 var(--t-font-display); color:var(--t-ink); }
.wb__quote footer{ margin-top:12px; font:600 var(--fs-sm)/1.3 var(--t-font-body); font-variant:small-caps; letter-spacing:.12em; color:var(--t-label); }
@media (width < 768px){
  .wb__cards{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 10px; scrollbar-width:none; }
  .wb__cards > li{ flex:0 0 82%; scroll-snap-align:center; }
}


/* ════════════════════════════════════════════════════════════════
   WORLD AND LORE
   ════════════════════════════════════════════════════════════════ */
.section.world{ position:relative; isolation:isolate; overflow:clip; }
.world__bg{
  position:absolute; inset:0; z-index:-1;
  opacity:.25;
  -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent);
  mask:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent);
}
.world__rays{ --t-ray:rgba(170,215,255,.16); }
.world__grid{ display:grid; gap:clamp(36px,4vw,56px) var(--grid-gap); }
@media (width >= 1024px){
  .world__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); align-items:center; }
  .chapters{ grid-column:1 / span 6; }
  .quotes{ grid-column:8 / -1; }
}
.chapters{ display:grid; }
.chapters li{
  display:grid; grid-template-columns:5.6em 48px minmax(0,1fr); align-items:center; gap:16px;
  padding:13px 0;
  border-bottom:1px solid rgba(201,168,76,.1);
}
.chapters__n{ font:500 .8125rem/1 var(--t-font-display); letter-spacing:.14em; text-transform:uppercase; text-align:right; color:var(--t-accent); }
.chapters li::before{                    /* the gold leader line */
  content:""; grid-column:2; grid-row:1; height:1px;
  background:linear-gradient(90deg,var(--t-accent),rgba(201,168,76,.15));
  transform-origin:0 50%;
}
.chapters__n{ grid-column:1; grid-row:1; }
.chapters__t{ grid-column:3; grid-row:1; font:400 clamp(1.125rem,1rem + .6vw,1.5rem)/1.3 var(--t-font-display); letter-spacing:.03em; color:var(--t-ink); }
@media (prefers-reduced-motion:no-preference){
  html.js:not(.reduced) .chapters[data-reveal="chapters"]:not(.is-in) li{ opacity:0; }
  html.js:not(.reduced) .chapters[data-reveal="chapters"]:not(.is-in) li::before{ transform:scaleX(0); }
  .chapters.is-in li{ animation:reveal-fade .8s var(--ease-out) calc(var(--i) * 80ms) backwards; }
  .chapters.is-in li::before{ animation:draw-x .9s var(--ease-cine) calc(var(--i) * 80ms + .15s) backwards; }
}
@media (width < 640px){ .chapters li{ grid-template-columns:5em 24px minmax(0,1fr); gap:10px; } }

.quotes{
  position:relative;
  margin:0; padding:clamp(28px,3.4vw,48px) clamp(24px,3vw,44px) clamp(20px,2.4vw,28px);
  background:linear-gradient(145deg,rgb(16 20 34 / .92),rgb(9 11 20 / .94) 70%);
}
.quotes__deck{ display:grid; }
.quote{ grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .9s var(--ease-io),visibility 0s linear .9s; }
.quote.is-on{ opacity:1; visibility:visible; transition:opacity .9s var(--ease-io) .2s,visibility 0s; }
.quote p{ font:400 clamp(1.25rem,1rem + 1vw,1.875rem)/1.4 var(--t-font-display); letter-spacing:.01em; color:var(--t-ink); text-wrap:balance; }
.quote footer{ margin-top:16px; font:600 var(--fs-sm)/1.3 var(--t-font-body); font-variant:small-caps; letter-spacing:.14em; color:var(--t-label); }
.quotes__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:59px; margin-top:clamp(20px,2.4vw,30px); padding-top:14px; border-top:1px solid var(--t-line); }   /* room for the Pause button before quotes.js shows it: no shift */
.quotes__dots{ display:flex; gap:9px; }
.quotes__dots li{ width:6px; height:6px; rotate:45deg; border:1px solid var(--t-accent-lo); transition:background-color var(--d-4),border-color var(--d-4); }
.quotes__dots li.is-on{ background:var(--t-marker); border-color:var(--t-marker); }
.quotes__pause{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 14px;
  border:1px solid var(--t-line-2); border-radius:var(--r-pill);
  font:700 var(--fs-micro)/1 var(--t-font-label); letter-spacing:.18em; text-transform:uppercase;
  color:var(--t-ink-2);
  transition:border-color var(--d-4),color var(--d-4);
}
@media (hover:hover){ .quotes__pause:hover{ border-color:var(--t-line-3); color:var(--t-ink); } }
.quotes__pause .icon{ font-size:14px; }

.playway{ margin-top:clamp(64px,7vw,104px); }
.playway__cards{ display:grid; gap:var(--grid-gap); }
@media (width >= 768px){ .playway__cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.mode{ position:relative; padding:clamp(20px,2.2vw,28px); }
.mode__name{ margin-bottom:8px; font:500 var(--fs-h3)/1.2 var(--t-font-display); letter-spacing:.04em; color:var(--t-ink); }
.mode p{ color:var(--t-ink-2); }
.mode--hc{ border-color:rgba(231,76,60,.4); background:linear-gradient(145deg,rgb(34 14 18 / .92),rgb(14 9 12 / .94) 70%); }
.mode--hc .mode__name{ color:#ff9b8a; }

/* ═══ NEWS · live dispatches from Steam (ui/news.js) ══════════════ */
.enews__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); margin:0; padding:0; list-style:none; }
.enews__card{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; height:100%;
  border:1px solid var(--t-line-2); border-radius:var(--t-radius);
  background:linear-gradient(180deg,var(--t-surface),var(--t-bg-3,#07091a));
  overflow:hidden;
  color:var(--t-ink);
  transition:border-color var(--d-4) var(--ease-soft),translate var(--d-4) var(--ease-out),box-shadow var(--d-4) var(--ease-soft);
}
.enews__card::before{               /* the spotlight from pointer.js */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgb(255 226 160 / .12),transparent 60%);
  opacity:0; transition:opacity var(--d-4) var(--ease-soft);
}
.enews__art{ display:block; aspect-ratio:16 / 9; overflow:hidden; border-bottom:1px solid var(--t-line); }
.enews__art img{ width:100%; height:100%; object-fit:cover; filter:saturate(.8) brightness(.85); transition:scale .9s var(--ease-out),filter var(--d-4) var(--ease-soft); }
.enews__meta{ display:flex; align-items:center; gap:12px; padding:18px 20px 0; font:700 12px/1 var(--t-font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--t-ink-2); }
.enews__label{ color:var(--t-accent-hi); }
.enews__title{ padding:10px 20px 0; font:500 clamp(1.25rem,1rem + .6vw,1.6rem)/1.15 var(--t-font-display); letter-spacing:.02em; color:var(--t-ink); }
.enews__excerpt{ padding:10px 20px 22px; font-size:.95rem; line-height:1.55; color:var(--t-ink-2); }
@media (hover:hover){
  .enews__card:hover{ border-color:var(--t-accent); translate:0 -4px; box-shadow:0 24px 60px -24px rgb(0 0 0 / .8),0 0 32px -8px var(--t-glow); }
  .enews__card:hover::before{ opacity:1; }
  .enews__card:hover .enews__art img{ scale:1.05; filter:saturate(1) brightness(1); }
}
@media (width < 900px){ .enews__list{ grid-template-columns:1fr; } .enews__item:not(:first-child) .enews__art{ display:none; } }