/* The landing page, the handbook and the news of draftborn.com. The tokens,
   shapes, buttons, bar, page heads, documents, foot and the page change come
   from radiant.css (scripts/server/brand/, docs/art-direction.md section 12),
   loaded first; this file lays out the landing page's sections, the guide and
   the news. No script and no inline style: the site's Content-Security-Policy
   allows neither, so every motion here is CSS and stops for visitors who ask
   for reduced motion. Following the owner's rule of 2026-10-29 nothing blinks
   and nothing glows blue. The fonts are the game's own, self-hosted
   (assets/fonts, SIL OFL). */
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/fonts/ChakraPetch-Bold.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch Figures"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/fonts/ChakraPetchFigures-Bold.woff2") format("woff2"); }
@font-face { font-family: "Saira Semi Condensed"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("assets/fonts/SairaSemiCondensed-Medium.woff2") format("woff2"); }
@font-face { font-family: "Saira Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/fonts/SairaSemiCondensed-Bold.woff2") format("woff2"); }

:root { --gutter: clamp(16px, 5vw, 96px); --wide: 1400px;
  --pad: max(var(--gutter), (100% - var(--wide)) / 2); }
html { scroll-padding-top: 88px; }
body { font: 500 var(--fs-body)/var(--lh-text) var(--text); overflow-x: hidden; }
p { margin: 0 0 var(--space-l); text-wrap: pretty; }
/* Titles and short lines break into even lines, never leave one word alone. */
h1, h2, h3, h4, .lead, .claim, .platforms, .head > p, figcaption { text-wrap: balance; }

/* Blade corners: top left and bottom right cut, as every frame of the game. */
.card, .path, .shot img, .frame, .numbers, .stage, .compare-wrap, .roster li, .faq details,
.steps li, .reactions li, .promise li {
  --c: 16px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }

/* The bar of the landing page. */
/* How far down the page the reader is: a gold line under the bar. */
.bar::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; pointer-events: none; }
/* The opening: a boss fight under open sky, slowly drawing closer, embers
   rising, the name in the middle. */
.hero { position: relative; isolation: isolate; display: grid; place-items: end center; min-height: max(680px, 100svh);
  padding: calc(var(--space-5xl) + var(--space-xl)) var(--gutter) calc(var(--space-5xl) + var(--space-3xl)); overflow: hidden; text-align: center; }
.hero-art { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--bg); }
.hero-slide { position: absolute; inset: 0; }
.hero-slide + .hero-slide { opacity: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform-origin: 50% 30%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse 60% 42% at 50% 74%, rgba(5, 11, 22, .7), transparent 75%),
    linear-gradient(0deg, var(--bg) 4%, rgba(8, 17, 32, .78) 30%, rgba(8, 17, 32, .1) 58%, rgba(8, 17, 32, .5) 100%); }
@media (max-width: 560px) {
  .hero::before { background: radial-gradient(ellipse 110% 46% at 50% 40%, rgba(5, 11, 22, .8), transparent 82%),
    linear-gradient(0deg, var(--bg) 4%, rgba(8, 17, 32, .78) 30%, rgba(8, 17, 32, .2) 58%, rgba(8, 17, 32, .55) 100%); } }
.embers { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%, #000 55%, transparent 92%);
  mask-image: linear-gradient(0deg, transparent 0%, #000 22%, #000 55%, transparent 92%); }
.embers::before, .embers::after { content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: calc(100% + 640px);
  background-repeat: repeat; }
.embers::before { background-size: 640px 640px; opacity: .85;
  background-image:
    radial-gradient(circle at 12% 18%, #ffd27a 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 38% 62%, #ff9a4a 0 2px, transparent 3px),
    radial-gradient(circle at 71% 31%, #ffc061 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 86% 77%, #ff8a3d 0 2.2px, transparent 3.4px),
    radial-gradient(circle at 54% 8%, #ffe2a0 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 24% 88%, #ffb257 0 1.8px, transparent 2.8px); }
.embers::after { background-size: 420px 420px; opacity: .6;
  background-image:
    radial-gradient(circle at 20% 40%, #ffb257 0 1.2px, transparent 2px),
    radial-gradient(circle at 64% 14%, #ff8a3d 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 82% 58%, #ffd27a 0 1px, transparent 1.8px),
    radial-gradient(circle at 44% 86%, #ff9a4a 0 1.2px, transparent 2px); }
.hero-inner { width: 100%; max-width: 1180px; }
.crest { width: 84px; height: 84px; margin: 0 auto var(--space-l); filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .55)); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-l); margin: 0 0 var(--space-s); color: var(--gold-bright);
  font: 700 var(--fs-s)/1.3 var(--display); letter-spacing: .28em; text-transform: uppercase; }
.eyebrow::before, .eyebrow::after { content: ""; width: clamp(24px, 6vw, 64px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow::after { transform: scaleX(-1); }
@media (max-width: 520px) { .eyebrow { gap: var(--space-s); font-size: var(--fs-xs); letter-spacing: .12em; } .eyebrow::before, .eyebrow::after { width: 16px; } }
.hero h1 { margin: 0; font: 700 var(--fs-display)/.95 var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); background: radial-gradient(closest-side, rgba(5, 11, 22, .6), transparent); }
/* The gold sits on the inner span and the dark halo on the heading, with no filter: iOS Safari draws
   a filtered element with text-clipped gradient as a low-resolution bitmap, and the name came out blurred. */
.hero h1 span { background: linear-gradient(180deg, #fff3cf 8%, var(--gold) 52%, var(--gold-deep) 96%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.claim { margin: var(--space-l) 0 var(--space-m); font: 700 var(--fs-feature)/1.2 var(--display); letter-spacing: .02em;
  text-shadow: 0 2px 18px rgba(5, 11, 22, .9); }
.lead { max-width: 46rem; margin: 0 auto var(--space-2xl); font-size: var(--fs-lead); color: var(--ink);
  text-shadow: 0 1px 12px rgba(5, 11, 22, .95); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-l) var(--space-l); }
/* On a phone the two buttons stand one above the other at one width. */
@media (max-width: 560px) { .actions { flex-direction: column; align-items: stretch; max-width: 360px; margin: 0 auto; } }
.platforms { margin: var(--space-xl) 0 0; color: var(--dim); font-size: var(--fs-m); text-shadow: 0 1px 10px rgba(5, 11, 22, .95); }
/* On a phone the two lines stand one above the other, without the dot. */
@media (max-width: 560px) { .platforms span { display: block; } .platforms .sep { display: none; } }
.scroll-cue { position: absolute; left: 50%; bottom: 104px; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; }
.scroll-cue::before { content: ""; width: 14px; height: 14px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); }

/* The numbers: one band of glass over the bottom of the opening. */
.numbers { --c: 18px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr);
  margin: -86px var(--pad) 0; padding: var(--space-s); background: rgba(15, 27, 46, .86); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.numbers div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: var(--space-l) var(--space-l); text-align: center; }
.numbers div + div { border-left: 1px solid var(--line); }
.numbers div:nth-child(odd) { border-left: 0; }
.numbers dt { color: var(--dim); font-size: var(--fs-m); line-height: 1.35; }
.numbers dd { margin: 0 0 var(--space-xs); color: var(--gold); font: 700 var(--fs-figure)/1.05 var(--figures); }
@media (min-width: 700px) { .numbers { grid-template-columns: repeat(3, 1fr); }
  .numbers div:nth-child(odd) { border-left: 1px solid var(--line); } .numbers div:nth-child(3n + 1) { border-left: 0; } }
@media (min-width: 1200px) { .numbers { grid-template-columns: repeat(6, 1fr); }
  .numbers div:nth-child(3n + 1) { border-left: 1px solid var(--line); } .numbers div:first-child { border-left: 0; } }

/* Sections. */
.band { position: relative; padding: clamp(56px, 7vw, 104px) var(--pad); }
.band.deep { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(47, 74, 115, .32), transparent 70%),
  linear-gradient(180deg, var(--slate), var(--bg)); }
h2 { margin: 0 0 var(--space-l); color: var(--gold); font: 700 var(--fs-h2)/1.08 var(--display); letter-spacing: .03em;
  text-transform: uppercase; }
/* The title of a card: gold capitals, as the game names its modes and
   abilities, on every card of every page. */
h3 { margin: 0 0 var(--space-s); color: var(--gold); font: 700 var(--fs-card)/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; }
/* A title inside a section, under its h2: gold capitals behind a diamond,
   a step under the section's title and above a card's name. */
.subhead { display: flex; align-items: center; gap: var(--space-m); margin: var(--space-4xl) 0 var(--space-l);
  font-size: var(--fs-card-l); line-height: 1.2; }
.subhead::before { content: ""; flex: none; width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); }
.head { text-align: center; margin-bottom: clamp(32px, 4vw, 52px); }
.head .kicker { justify-content: center; }
.head .kicker::after { content: ""; flex: none; width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); }
.head h2::after { content: ""; display: block; width: 120px; height: 2px; margin: var(--space-l) auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.split { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 980px) {
  .split { grid-template-columns: 5fr 7fr; gap: clamp(36px, 4.5vw, 80px); }
  .split.flip { grid-template-columns: 7fr 5fr; }
  .split.flip > :first-child { order: 2; }
}
.shot { position: relative; margin: 0; }
.shot img { --c: 22px; width: 100%; background: var(--slate); }
.shot::after { content: ""; position: absolute; left: -10px; top: -10px; width: 64px; height: 64px; pointer-events: none;
  border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.shot::before { content: ""; position: absolute; right: -10px; bottom: 26px; width: 64px; height: 64px; pointer-events: none;
  border-right: 2px solid var(--azure); border-bottom: 2px solid var(--azure); }
.shot:has(figcaption)::before { bottom: 26px; }
.shot:not(:has(figcaption))::before { bottom: -10px; }
/* On a phone the brackets stay inside the page's margin. */
@media (max-width: 560px) { .shot::after { left: -6px; top: -6px; } .shot::before { right: -6px; }
  .shot:not(:has(figcaption))::before { bottom: -6px; } }
figcaption { margin-top: var(--space-m); color: var(--dim); font-size: var(--fs-m); }

.points { margin: var(--space-l) 0 0; padding: 0; list-style: none; }
.points li { position: relative; margin: var(--space-m) 0; padding-left: var(--space-xl); }
.points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px;
  transform: rotate(45deg); background: var(--gold); }

.steps { display: grid; gap: var(--space-m); margin: var(--space-xl) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { --c: 12px; position: relative; padding: var(--space-l) var(--space-l) var(--space-l) calc(52px + var(--space-l)); background: var(--slate-2); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 18px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink-dark); background: var(--gold);
  font: 700 var(--fs-body)/1 var(--display); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.steps b { display: block; color: var(--gold); font: 700 var(--fs-body)/1.3 var(--display); text-transform: uppercase; letter-spacing: .06em; }

/* Cards: an icon, a name, a line; they lift where a pointer rests. */
.cards { display: grid; gap: var(--space-l); margin-top: var(--space-xl); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 900px) { .cards.six { grid-template-columns: repeat(3, 1fr); } }
.cards.tight { margin-top: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (min-width: 560px) { .cards.tight:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { position: relative; padding: var(--space-xl) var(--space-xl) var(--space-xl); background: linear-gradient(180deg, var(--slate-2), var(--slate));
  border-top: 2px solid var(--steel); transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s; }
.card:hover { transform: translateY(-4px); border-top-color: var(--gold); }
.card img { width: 64px; height: 64px; margin-bottom: var(--space-l); transition: transform .4s var(--ease); }
.card:hover img { transform: scale(1.08) rotate(-3deg); }
.card p { margin: 0; color: var(--dim); }
/* On a phone the icon stands beside the text, so a list of cards stays short. */
@media (max-width: 600px) {
  .card { display: grid; grid-template-columns: 52px 1fr; column-gap: var(--space-l); padding: var(--space-l) var(--space-l); }
  .card img { grid-row: span 2; width: 52px; height: 52px; margin: 0; }
}

/* Ways to play: one large card and four beside it. */
.paths { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 640px) { .paths { grid-template-columns: repeat(2, 1fr); } .path-main { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .paths { grid-template-columns: repeat(4, 1fr); } }
.path { --c: 18px; position: relative; display: flex; flex-direction: column; color: var(--ink); text-decoration: none;
  background: var(--slate); transition: transform .35s var(--ease); }
.path:hover { color: var(--ink); transform: translateY(-5px); }
.path-art { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.path-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.path:hover .path-art img { transform: scale(1.07); }
.path-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 27, 46, .9), transparent 55%); }
.path-text { position: relative; display: flex; flex: 1; flex-direction: column; align-items: flex-start;
  padding: var(--space-xs) var(--space-xl) var(--space-xl); margin-top: -28px; }
.path h3 { font-size: var(--fs-card); }
.path-line { display: block; color: var(--dim); }
.path::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.path:hover::after { transform: scaleX(1); }
.tag { display: inline-block; margin-bottom: var(--space-s); padding: var(--space-xs) var(--space-m); color: var(--azure-light);
  background: rgba(8, 17, 32, .88); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 700 var(--fs-xs)/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.more { display: inline-flex; align-items: center; gap: var(--space-m); margin-top: auto; padding-top: var(--space-l); color: var(--gold);
  font: 700 var(--fs-s)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.more::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg); transition: translate .3s var(--ease); }
.path:hover .more::after { translate: 4px 0; }
@media (min-width: 1100px) {
  .path-main { grid-column: 1 / -1; display: grid; grid-template-columns: 8fr 4fr; }
  .path-main .path-art { aspect-ratio: auto; min-height: 420px; }
  .path-main .path-art::after { background: linear-gradient(90deg, transparent 55%, rgba(15, 27, 46, 1)); }
  .path-main .path-text { align-self: center; margin: 0; padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) var(--space-s); }
  .path-main h3 { font-size: var(--fs-feature); color: var(--gold); text-transform: uppercase; }
  .path-main .path-line { font-size: var(--fs-lead); }
}

/* Chapters: a picture across the whole width, the text over it. */
.chapter, .download { position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden;
  min-height: min(100svh, 940px); padding: clamp(96px, 10vw, 150px) var(--pad); }
.chapter-art { position: absolute; inset: -6% 0; z-index: -2; }
.chapter-art img { width: 100%; height: 100%; object-fit: cover; }
.chapter::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5, 11, 22, .94) 0%, rgba(5, 11, 22, .78) 34%, rgba(5, 11, 22, .18) 72%, rgba(5, 11, 22, .05) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 22%), linear-gradient(180deg, var(--bg) 0%, transparent 18%); }
/* A picture whose subject stands in the middle moves right, out from under
   the text, and fades in from the dark. */
@media (min-width: 861px) {
  .art-right { left: 32%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
    mask-image: linear-gradient(90deg, transparent, #000 34%); }
  .art-right img { object-position: 0% 50%; }
}
.chapter-copy { width: 100%; max-width: 640px; }
.chapter-copy p { text-shadow: 0 1px 12px rgba(5, 11, 22, .9); }
@media (max-width: 860px) {
  .chapter { align-items: flex-end; min-height: 0; padding-top: 52vw; }
  .chapter-art { inset: 0 0 auto; height: 70vw; }
  .chapter::before { background: linear-gradient(0deg, var(--bg) 0%, var(--bg) calc(100% - 70vw), rgba(8, 17, 32, .2) calc(100% - 30vw), transparent 100%); }
}

/* Element reactions: tiles that name the pair in its two colors, a diamond
   for what sets it up and one for what sets it off. */
.reactions { display: grid; gap: var(--space-m); margin: var(--space-xl) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.reactions li { --c: 12px; --a: var(--gold); --b: var(--gold); position: relative; padding: var(--space-l) var(--space-xl) var(--space-l);
  color: var(--dim); background: linear-gradient(180deg, var(--slate-2), var(--slate)); border-top: 2px solid var(--steel);
  transition: border-color var(--t-base) var(--ease-out); }
.reactions li:hover { border-top-color: var(--b); }
.reactions b { display: flex; align-items: center; gap: var(--space-m); margin-bottom: var(--space-xs); color: var(--gold); font: 700 var(--fs-card)/1.3 var(--display);
  letter-spacing: .04em; text-transform: uppercase; }
.reactions b::before { content: ""; flex: none; width: 26px; height: 10px;
  background: linear-gradient(90deg, var(--a) 0 10px, transparent 10px 16px, var(--b) 16px);
  clip-path: polygon(0 50%, 5px 0, 10px 50%, 5px 100%, 0 50%, 16px 50%, 21px 0, 26px 50%, 21px 100%, 16px 50%); }
/* The two diamonds name the elements in their handbook colors. */
.reactions .frost { --a: var(--azure-light); --b: var(--blue); }
.reactions .steam { --a: var(--azure-light); --b: var(--orange); }
.reactions .fire { --a: var(--orange); --b: var(--el-nature); }
.reactions .light { --a: var(--gold-bright); --b: var(--violet); }
.reactions .physical { --a: var(--el-physical); --b: var(--muted); }
.reactions .shadow { --a: var(--violet); --b: var(--el-nature); }

/* Reels: pictures in a row that a thumb swipes and a mouse scrolls. */
/* Three pictures fill the width of the page; a fourth peeks in from the
   right edge, so the row tells it scrolls on. */
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 440px); gap: var(--space-l); margin: var(--space-3xl) 0 0;
  margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) var(--space-l); list-style: none; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--gold) rgba(123, 157, 204, .18); }
@media (min-width: 1100px) { .reel { grid-auto-columns: calc((100% - 36px) / 3); } }
.reel li { scroll-snap-align: start; }
.reel figure { margin: 0; }
.frame { --c: 16px; display: block; overflow: hidden; background: var(--slate); }
.frame img { width: 100%; transition: transform .7s var(--ease); }
.reel li:hover .frame img { transform: scale(1.06); }
.reel figcaption { position: relative; padding-left: var(--space-l); }
.reel figcaption::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--azure); }

/* The boss: a stage of phases that cross-fade, the list of his blows beside it
   marking the one on stage. Eight phases of four seconds. */
.boss { position: relative; padding: clamp(72px, 9vw, 130px) var(--pad); overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 30% 55%, rgba(255, 110, 40, .16), transparent 70%),
    radial-gradient(ellipse 50% 50% at 90% 10%, rgba(201, 138, 23, .12), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg-deep) 50%, var(--bg)); }
.encounter { display: grid; gap: var(--space-xl); }
/* The stage and the list of blows share their top and their bottom. */
@media (min-width: 1100px) { .encounter { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; gap: var(--space-xl); }
  .encounter .stage { aspect-ratio: auto; min-height: 100%; }
  .encounter .moves { grid-auto-rows: 1fr; } }
.stage { --c: 24px; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--slate); }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; }
.slide:first-child { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 11, 22, .94), rgba(5, 11, 22, .5) 24%, transparent 44%),
    linear-gradient(180deg, rgba(5, 11, 22, .35), transparent 18%); }
.nameplate { position: absolute; left: clamp(16px, 3vw, 36px); bottom: clamp(12px, 2.4vw, 30px); z-index: 2; margin: 0;
  color: var(--dim); font-size: var(--fs-m); }
.nameplate b { display: block; color: var(--gold); font: 700 var(--fs-feature)/1.1 var(--display);
  letter-spacing: .04em; text-transform: uppercase; }
.moves { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; counter-reset: move; align-content: stretch; }
.moves li { --c: 10px; position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-s) var(--space-l) var(--space-s) var(--space-3xl); color: var(--dim); background: rgba(15, 27, 46, .7);
  counter-increment: move; font-size: var(--fs-s); line-height: 1.35; overflow: hidden;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.moves li::before { content: counter(move); position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: grid; place-items: center;
  width: 26px; height: 26px; color: var(--hairline); background: var(--slate-3); font: 700 var(--fs-s)/1 var(--figures);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.moves b { display: block; color: var(--ink); font: 700 var(--fs-m)/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.moves li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; }

/* The raid's bosses: four plaques in their order. */
.roster-band { padding-top: 0; }
.chapter-raid::before { background: linear-gradient(90deg, rgba(5, 11, 22, .94) 0%, rgba(5, 11, 22, .76) 36%, rgba(30, 14, 60, .2) 72%, transparent 100%),
  linear-gradient(0deg, var(--bg) 0%, transparent 26%), linear-gradient(180deg, var(--bg) 0%, transparent 18%); }
@media (max-width: 860px) {
  .chapter-raid::before { background: linear-gradient(0deg, var(--bg) 0%, var(--bg) calc(100% - 70vw), rgba(8, 17, 32, .2) calc(100% - 30vw), transparent 100%); }
}
.roster { display: grid; gap: var(--space-l); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.roster li { --c: 18px; position: relative; padding: var(--space-xl) var(--space-xl) var(--space-xl); background: linear-gradient(160deg, rgba(76, 46, 130, .32), var(--slate) 60%);
  border-top: 2px solid var(--violet); transition: transform .3s var(--ease); }
.roster li:hover { transform: translateY(-4px); }
.roster .num { position: absolute; right: 18px; top: 10px; color: rgba(166, 140, 230, .35); font: 700 var(--fs-figure)/1 var(--display); }
.roster b { display: block; color: var(--gold); font: 700 var(--fs-card)/1.25 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.roster i { display: block; margin-bottom: var(--space-m); color: var(--dim); font-style: normal; font-size: var(--fs-m); }
.roster q { display: block; padding-top: var(--space-m); color: var(--ink); quotes: "\201C" "\201D";
  background: linear-gradient(var(--gold), var(--gold)) 0 0 / 36px 2px no-repeat; }

/* Fair by design: the table of what money can and cannot buy. */
.compare-wrap { --c: 20px; overflow-x: auto; background: var(--slate); border-top: 2px solid var(--gold); }
.compare { width: 100%; min-width: 520px; border-collapse: collapse; }
.compare th, .compare td { padding: var(--space-l) var(--space-xl); text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { color: var(--gold); font: 700 var(--fs-s)/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase;
  background: var(--slate-2); }
.compare thead th + th, .compare td { text-align: center; width: 22%; }
.compare tbody th { font-weight: 700; color: var(--ink); }
.compare tbody tr { transition: background-color .25s; }
.compare tbody tr:hover { background: rgba(34, 53, 83, .55); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare td { font-weight: 700; }
.compare .yes { color: var(--green); }
.compare .no { color: var(--hairline); }
.compare .yes::before, .compare .no::before { content: ""; display: inline-block; vertical-align: middle; margin-right: var(--space-m); }
.compare .yes::before { width: 7px; height: 13px; margin-top: -5px; border-right: 3px solid var(--green); border-bottom: 3px solid var(--green);
  transform: rotate(45deg); }
.compare .no::before { width: 12px; height: 3px; background: var(--hairline); }
@media (max-width: 640px) {
  .compare { min-width: 0; font-size: var(--fs-s); }
  .compare th, .compare td { padding: var(--space-m) var(--space-m); }
  .compare thead th { font-size: var(--fs-xs); letter-spacing: .06em; }
  .compare thead th + th, .compare td { width: 25%; }
  .compare .yes::before, .compare .no::before { display: block; margin: 0 auto var(--space-xs); }
  .compare .yes::before { margin-top: 0; }
}
.promise { display: grid; gap: var(--space-l); margin: var(--space-2xl) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.promise li { --c: 14px; padding: var(--space-xl) var(--space-xl) var(--space-xl); background: var(--slate-2); border-top: 2px solid var(--azure); }
.promise b { display: block; margin-bottom: var(--space-xs); color: var(--gold); font: 700 var(--fs-card)/1.3 var(--display); text-transform: uppercase;
  letter-spacing: .04em; }

/* The way into the game: the gate, the stores, the next steps and a picture. */
.download { min-height: min(92svh, 860px); }
.download::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 30% 50%, rgba(5, 11, 22, .82), rgba(5, 11, 22, .45) 70%),
    linear-gradient(0deg, var(--bg) 0%, transparent 25%), linear-gradient(180deg, var(--bg) 0%, transparent 25%); }
.download-inner { display: grid; gap: var(--space-3xl); align-items: center; width: 100%; }
@media (min-width: 1000px) { .download-inner { grid-template-columns: 1fr 1fr; } }
.download-copy .crest { width: 88px; height: 88px; margin: 0 0 var(--space-l); }
.download-copy h2 { font-size: var(--fs-h1); }
.download-copy p { font-size: var(--fs-lead); text-shadow: 0 1px 12px rgba(5, 11, 22, .95); }
.stores { display: flex; flex-wrap: wrap; gap: var(--space-l) var(--space-2xl); margin: var(--space-xl) 0 0; padding: 0;
  list-style: none; }
/* The stores as names under a hairline: not buttons yet, since the game is
   not out. */
.store { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 160px; padding-top: var(--space-s);
  color: var(--ink); border-top: 1px solid var(--line-strong); font: 700 var(--fs-card-l)/1.1 var(--display); letter-spacing: .02em; }
.store small { color: var(--azure-light); font: 700 var(--fs-xs)/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.actions.start { justify-content: flex-start; align-items: center; gap: var(--space-l) var(--space-2xl); margin-top: var(--space-2xl); }
@media (max-width: 560px) { .actions.start { align-items: flex-start; max-width: none; } }
.download .shot { justify-self: center; width: 100%; max-width: 720px; }
/* On a phone the gate stands above the text and fades into the navy under it. */
@media (max-width: 860px) { .download .chapter-art { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent);
  mask-image: linear-gradient(180deg, #000 50%, transparent); } }

/* FAQ. */
.faq { columns: 1; column-gap: var(--space-l); }
@media (min-width: 980px) { .faq { columns: 2; } }
.faq details { --c: 12px; break-inside: avoid; margin: 0 0 var(--space-m); background: linear-gradient(180deg, var(--slate-2), var(--slate));
  border-top: 2px solid var(--steel); transition: border-color .25s; }
.faq details[open] { border-top-color: var(--gold); }
.faq summary { position: relative; padding: var(--space-l) var(--space-3xl) var(--space-l) var(--space-xl); min-height: 52px; list-style: none; color: var(--ink);
  font: 700 var(--fs-body)/1.4 var(--display); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 22px; width: 9px; height: 9px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.faq summary:hover { color: var(--gold-bright); }
.faq p { margin: 0; padding: 0 var(--space-xl) var(--space-l); color: var(--dim); }
@media (prefers-reduced-motion: no-preference) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip;
    transition: block-size var(--t-base) var(--ease-out), content-visibility var(--t-base) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; } }

/* Two showcases that a tap switches, without a script: a radio button per
   entry, its label as the tab, the panel shown by :checked. */
.bestiary, .armory { display: grid; gap: var(--space-l); margin-top: var(--space-xl); }
.bestiary-tabs, .armory-tabs { display: grid; gap: var(--space-s); align-content: start; }
.bestiary-tabs label, .armory-tabs label { --c: 12px; display: flex; align-items: center; gap: var(--space-m); cursor: pointer;
  background: var(--slate); border-bottom: 2px solid var(--steel);
  transition: background-color .25s, border-color .25s, transform .3s var(--ease);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.bestiary-tabs label:hover, .armory-tabs label:hover { background: var(--slate-2); }
.bestiary-stage, .armory-stage { --c: 24px; position: relative; overflow: hidden; background: var(--slate);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.guardian, .weapon { display: none; }
#g-crypt:checked ~ .bestiary-stage .g-crypt,
#g-emberforge:checked ~ .bestiary-stage .g-emberforge,
#g-frostfang:checked ~ .bestiary-stage .g-frostfang,
#g-thornwild:checked ~ .bestiary-stage .g-thornwild,
#g-tidebound:checked ~ .bestiary-stage .g-tidebound,
#g-clockwork:checked ~ .bestiary-stage .g-clockwork,
#g-veil:checked ~ .bestiary-stage .g-veil,
#g-ashen:checked ~ .bestiary-stage .g-ashen,
#w-sword:checked ~ .armory-stage .w-sword,
#w-sword_shield:checked ~ .armory-stage .w-sword_shield,
#w-greatsword:checked ~ .armory-stage .w-greatsword,
#w-daggers:checked ~ .armory-stage .w-daggers,
#w-mace:checked ~ .armory-stage .w-mace,
#w-spear:checked ~ .armory-stage .w-spear,
#w-bow:checked ~ .armory-stage .w-bow,
#w-staff:checked ~ .armory-stage .w-staff,
#w-wand:checked ~ .armory-stage .w-wand { display: grid; }
#g-crypt:checked ~ .bestiary-tabs label[for=g-crypt],
#g-emberforge:checked ~ .bestiary-tabs label[for=g-emberforge],
#g-frostfang:checked ~ .bestiary-tabs label[for=g-frostfang],
#g-thornwild:checked ~ .bestiary-tabs label[for=g-thornwild],
#g-tidebound:checked ~ .bestiary-tabs label[for=g-tidebound],
#g-clockwork:checked ~ .bestiary-tabs label[for=g-clockwork],
#g-veil:checked ~ .bestiary-tabs label[for=g-veil],
#g-ashen:checked ~ .bestiary-tabs label[for=g-ashen],
#w-sword:checked ~ .armory-tabs label[for=w-sword],
#w-sword_shield:checked ~ .armory-tabs label[for=w-sword_shield],
#w-greatsword:checked ~ .armory-tabs label[for=w-greatsword],
#w-daggers:checked ~ .armory-tabs label[for=w-daggers],
#w-mace:checked ~ .armory-tabs label[for=w-mace],
#w-spear:checked ~ .armory-tabs label[for=w-spear],
#w-bow:checked ~ .armory-tabs label[for=w-bow],
#w-staff:checked ~ .armory-tabs label[for=w-staff],
#w-wand:checked ~ .armory-tabs label[for=w-wand] { background: var(--slate-3); border-bottom-color: var(--gold); }
#g-crypt:focus-visible ~ .bestiary-tabs label[for=g-crypt],
#g-emberforge:focus-visible ~ .bestiary-tabs label[for=g-emberforge],
#g-frostfang:focus-visible ~ .bestiary-tabs label[for=g-frostfang],
#g-thornwild:focus-visible ~ .bestiary-tabs label[for=g-thornwild],
#g-tidebound:focus-visible ~ .bestiary-tabs label[for=g-tidebound],
#g-clockwork:focus-visible ~ .bestiary-tabs label[for=g-clockwork],
#g-veil:focus-visible ~ .bestiary-tabs label[for=g-veil],
#g-ashen:focus-visible ~ .bestiary-tabs label[for=g-ashen],
#w-sword:focus-visible ~ .armory-tabs label[for=w-sword],
#w-sword_shield:focus-visible ~ .armory-tabs label[for=w-sword_shield],
#w-greatsword:focus-visible ~ .armory-tabs label[for=w-greatsword],
#w-daggers:focus-visible ~ .armory-tabs label[for=w-daggers],
#w-mace:focus-visible ~ .armory-tabs label[for=w-mace],
#w-spear:focus-visible ~ .armory-tabs label[for=w-spear],
#w-bow:focus-visible ~ .armory-tabs label[for=w-bow],
#w-staff:focus-visible ~ .armory-tabs label[for=w-staff],
#w-wand:focus-visible ~ .armory-tabs label[for=w-wand] { outline: 2px solid var(--azure-light); outline-offset: 2px; }
.guardian-place { margin: 0 0 var(--space-xs); color: var(--azure-light); font: 700 var(--fs-s)/1.3 var(--display); letter-spacing: .16em;
  text-transform: uppercase; }
h4 { margin: 0; color: var(--gold); font: 700 var(--fs-feature)/1.1 var(--display); letter-spacing: .03em;
  text-transform: uppercase; }

/* The eight guardians: the dungeons as tabs, the boss in the fight beside them. */
.bestiary-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .bestiary-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bestiary { grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; }
  .bestiary-tabs { grid-template-columns: 1fr; } }
.bestiary-tabs label { padding: var(--space-s) var(--space-m) var(--space-s) var(--space-s); }
.bestiary-tabs img { flex: none; width: 52px; height: 52px; transition: transform .35s var(--ease); }
.bestiary-tabs label:hover img { transform: rotate(-6deg) scale(1.06); }
.bestiary-tabs span { min-width: 0; color: var(--dim); font-size: var(--fs-s); line-height: 1.25; }
.bestiary-tabs b { display: block; color: var(--ink); font: 700 var(--fs-m)/1.25 var(--display); }
.bestiary-tabs, .armory-tabs, .weapon-stats { overflow-wrap: normal; hyphens: auto; }
/* Below the desktop the guardians are medallions with their names, four by
   two on a tablet and a row to swipe through on a phone. */
@media (max-width: 1099px) {
  .bestiary-tabs label { flex-direction: column; gap: var(--space-s); padding: var(--space-m) var(--space-s); text-align: center; }
  .bestiary-tabs span { font-size: 0; }
  .bestiary-tabs b { font-size: var(--fs-s); }
}
@media (max-width: 699px) {
  .bestiary-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 112px; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: var(--space-s); scrollbar-width: thin; scrollbar-color: var(--gold) rgba(123, 157, 204, .18); }
  .bestiary-tabs label { scroll-snap-align: start; }
}
.guardian { position: relative; height: 100%; grid-template-rows: auto 1fr; }
.guardian > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.guardian-copy { padding: var(--space-xl) var(--space-xl) var(--space-xl); }
.guardian-title { margin: var(--space-xs) 0 var(--space-m); color: var(--dim); }
/* A quote opens under a short gold line, never beside a bar. */
.guardian q, .dungeon-card q { display: block; margin: 0 0 var(--space-l); padding-top: var(--space-l); color: var(--ink);
  quotes: "\201C" "\201D"; background: linear-gradient(var(--gold), var(--gold)) 0 0 / 36px 2px no-repeat; }
.guardian-label { margin: 0 0 var(--space-s); color: var(--hairline); font: 700 var(--fs-xs)/1.2 var(--display); letter-spacing: .16em;
  text-transform: uppercase; }
.guardian-moves { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: 0 0 var(--space-l); padding: 0; list-style: none; }
.guardian-moves li { padding: var(--space-xs) var(--space-m); color: var(--ink); background: var(--slate-3);
  box-shadow: inset 0 0 0 1px var(--line-strong); font: 700 var(--fs-xs)/1.3 var(--display); letter-spacing: .08em;
  text-transform: uppercase; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.guardian-phase { margin: 0; color: var(--dim); font-size: var(--fs-m); }
@media (min-width: 1100px) {
  .guardian { grid-template-rows: 1fr; }
  .guardian > img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .guardian-copy { position: relative; align-self: end; max-width: 620px; margin: 0 0 0 auto; padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
    background: linear-gradient(160deg, rgba(8, 17, 32, .92), rgba(8, 17, 32, .8)); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); border-top: 2px solid var(--gold); }
  .bestiary-stage { min-height: 560px; }
}

/* The armory: nine weapons as tabs, the hero holding the chosen one. */
.armory-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 700px) { .armory-tabs { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.armory-tabs label { flex-direction: column; gap: var(--space-s); padding: var(--space-m) var(--space-s) var(--space-m); text-align: center;
  border-bottom: 3px solid var(--steel); }
.armory-tabs img { width: 56px; height: 56px; transition: transform .35s var(--ease); }
.armory-tabs label:hover img { transform: translateY(-4px) rotate(4deg); }
.armory-tabs span { color: var(--dim); font-size: var(--fs-s); line-height: 1.2; }
#w-sword:checked ~ .armory-tabs label[for=w-sword],
#w-sword_shield:checked ~ .armory-tabs label[for=w-sword_shield],
#w-greatsword:checked ~ .armory-tabs label[for=w-greatsword],
#w-daggers:checked ~ .armory-tabs label[for=w-daggers],
#w-mace:checked ~ .armory-tabs label[for=w-mace],
#w-spear:checked ~ .armory-tabs label[for=w-spear],
#w-bow:checked ~ .armory-tabs label[for=w-bow],
#w-staff:checked ~ .armory-tabs label[for=w-staff],
#w-wand:checked ~ .armory-tabs label[for=w-wand] { border-bottom-color: var(--gold); }
#w-sword:checked ~ .armory-tabs label[for=w-sword] span,
#w-sword_shield:checked ~ .armory-tabs label[for=w-sword_shield] span,
#w-greatsword:checked ~ .armory-tabs label[for=w-greatsword] span,
#w-daggers:checked ~ .armory-tabs label[for=w-daggers] span,
#w-mace:checked ~ .armory-tabs label[for=w-mace] span,
#w-spear:checked ~ .armory-tabs label[for=w-spear] span,
#w-bow:checked ~ .armory-tabs label[for=w-bow] span,
#w-staff:checked ~ .armory-tabs label[for=w-staff] span,
#w-wand:checked ~ .armory-tabs label[for=w-wand] span { color: var(--ink); }
.armory-stage { background: radial-gradient(ellipse 40% 60% at 28% 70%, rgba(242, 193, 78, .14), transparent 70%),
  linear-gradient(180deg, var(--slate-2), var(--slate)); }
.weapon { align-items: center; gap: var(--space-s) var(--space-2xl); padding: var(--space-l) var(--space-xl) var(--space-2xl); }
@media (min-width: 900px) { .weapon { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: var(--space-m) var(--space-3xl) var(--space-m) var(--space-xl); } }
.weapon-figure { display: grid; place-items: center; }
.weapon-figure img { width: min(100%, 340px); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.weapon-copy > p { margin: var(--space-m) 0 var(--space-l); font-size: var(--fs-body); }
.weapon-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); margin: 0 0 var(--space-l); }
.weapon-stats div { display: flex; flex-direction: column-reverse; padding: var(--space-m) var(--space-l); background: rgba(8, 17, 32, .55);
  border-top: 2px solid var(--steel); }
.weapon-stats dt { color: var(--dim); font-size: var(--fs-s); }
.weapon-stats dd { margin: 0; color: var(--gold); font: 700 var(--fs-card-l)/1.15 var(--display); }
/* The element names itself in its own color, as in the handbook. */
.weapon-stats dd[class^="el-"] { color: var(--el); }
.weapon-cost { --c: 10px; margin: 0; padding: var(--space-m) var(--space-l); color: var(--dim); background: rgba(8, 17, 32, .55); border-top: 2px solid var(--orange);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.weapon-cost b { display: block; color: var(--orange); font: 700 var(--fs-xs)/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.weapon-stats div { --c: 10px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
/* On a phone the three stats stand as rows, the value at the right. */
@media (max-width: 699px) {
  .weapon-stats { grid-template-columns: 1fr; gap: var(--space-s); }
  .weapon-stats div { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; padding: var(--space-m) var(--space-l); }
  .weapon-stats dd { font-size: var(--fs-card); } }

/* 404: the gate back, over the whole screen. */
.lost { position: relative; isolation: isolate; display: grid; place-items: center; min-height: max(560px, 86svh); overflow: hidden;
  padding: calc(var(--space-5xl) + var(--space-3xl)) var(--pad) var(--space-5xl); text-align: center; }
.lost .chapter-art { inset: 0; height: auto; }
.lost::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(5, 11, 22, .85), rgba(5, 11, 22, .45) 75%),
    linear-gradient(0deg, var(--bg) 0%, transparent 30%); }
.lost-copy .kicker { justify-content: center; }
.lost-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s) var(--space-xl); margin-top: var(--space-xl); }
.lost-links a { display: inline-flex; align-items: center; gap: var(--space-s); min-height: 44px; color: var(--ink); font-weight: 700;
  text-decoration: none; }
.lost-links a::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.lost-links a:hover { color: var(--gold-bright); }
.lost h1 { margin: 0 0 var(--space-l); color: var(--gold); font: 700 var(--fs-h1)/1.05 var(--display); text-transform: uppercase; }
.lost-copy > p:not(.kicker) { margin: 0 0 var(--space-2xl); font-size: var(--fs-lead); text-shadow: 0 1px 12px rgba(5, 11, 22, .95); }


/* The handbook (guide/) and the news (news/), made by site_pages.py. */
/* A page of one column starts where its head starts. */
.layout.one { grid-template-columns: minmax(0, 1fr); max-width: calc(1100px + 2 * max(clamp(16px, 5vw, 96px), (100% - 1400px) / 2));
  margin: 0; }
.guide-doc .intro { font-size: var(--fs-lead); color: var(--ink); }
.topic h2, .category h2, .guide-doc section > h2 { display: flex; align-items: center; gap: var(--space-l); }
.topic-icon { flex: none; width: 44px; height: 44px; padding: var(--space-s); background: var(--slate-2);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.topic h2::before, .guide-doc section > h2:has(.topic-icon)::before { display: none; }
.topic h2:has(.topic-icon) { padding-left: 0; }
.topic p { color: var(--ink); }
.category h2 small { margin-left: auto; color: var(--hairline); font-size: var(--fs-m); letter-spacing: .08em; }

/* Abilities: a square painting, the name in gold, the kind line, what it
   does, its two evolutions and its values as chips. */
.abilities { display: grid; gap: var(--space-l); margin: var(--space-l) 0 var(--space-s); padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.doc .abilities > li { margin: 0; padding: 0; }
/* A card left alone at the end of a list takes the whole row. */
.abilities > :last-child:nth-child(odd), .weapons > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .doc .abilities > li.ability { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-m); padding: var(--space-l) var(--space-l) var(--space-m) !important; }
  .ability img { width: 56px; height: 56px; } }
.doc .abilities > li::before { content: none; }
.ability { --c: 14px; --el: var(--gold); position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-l);
  padding: var(--space-l) var(--space-l) var(--space-l) !important; background: linear-gradient(180deg, var(--slate-2), var(--slate));
  border-top: 2px solid var(--steel); scroll-margin-top: 110px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.ability:hover, .ability:target { border-top-color: var(--el); transform: translateY(-3px); }
.ability img { width: 72px; height: 72px; box-shadow: 0 0 0 1px var(--line-strong);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.ability h3 { margin: 0; color: var(--gold); font: 700 var(--fs-card)/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ability .kind { margin: var(--space-xs) 0 var(--space-s); color: var(--dim); font-size: var(--fs-s); }
.ability .kind i { font-style: normal; color: var(--steel); padding: 0 var(--space-xs); }
.ability .el { color: var(--el); font-weight: 700; }
.ability p { margin: 0 0 var(--space-s); font-size: var(--fs-m); line-height: 1.55; }
/* The two evolutions: a small orange diamond before each, as the game's
   growth rows. */
.ability .grow { position: relative; padding-left: var(--space-l); color: var(--dim); }
.ability .grow::before { content: ""; position: absolute; left: 1px; top: .62em; width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--orange); }
.ability .grow b { color: var(--orange); }
.values { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: var(--space-m) 0 0 !important; padding: 0; list-style: none; }
/* Values: small blades, so a long one wraps inside its own frame. */
.doc .values > li { margin: 0; padding: 3px var(--space-m); color: var(--azure-light); background: rgba(10, 61, 99, .45); font: 700 var(--fs-xs)/1.45 var(--figures);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.doc .values > li::before { content: none; }
.el-fire { --el: var(--orange); } .el-frost { --el: var(--azure-light); } .el-shadow { --el: var(--violet); }
.el-light { --el: var(--gold-bright); } .el-nature { --el: var(--el-nature); } .el-lightning { --el: var(--blue); }
.el-physical { --el: var(--el-physical); }

/* Weapons, dungeons, the raid, the 3 vs 3 modes. */
.weapons, .dungeons, .mode-cards { display: grid; gap: var(--space-l); margin: var(--space-l) 0 var(--space-s); padding: 0; list-style: none; }
.weapons { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.doc .weapons > li, .doc .dungeons > li, .doc .mode-cards > li { margin: 0; padding: 0; }
.doc .weapons > li::before, .doc .dungeons > li::before, .doc .mode-cards > li::before, .doc .raid-bosses > li::before { content: none; }
.weapon-card, .dungeon-card, .mode-cards li, .raid-card { --c: 16px; display: grid; gap: var(--space-l); align-items: start;
  padding: var(--space-xl) !important; background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(242, 193, 78, .09), transparent 70%),
    linear-gradient(180deg, var(--slate-2), var(--slate)); border-top: 2px solid var(--steel); scroll-margin-top: 110px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.weapon-card:hover, .dungeon-card:hover, .mode-cards li:hover { border-top-color: var(--gold); transform: translateY(-3px); }
.weapon-card { grid-template-columns: 120px minmax(0, 1fr); }
.weapon-card img { width: 120px; height: 120px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
  transition: transform var(--t-slow) var(--ease-out); }
.weapon-card:hover img { transform: rotate(-6deg) scale(1.06); }
.weapon-card h3, .dungeon-card h3, .mode-cards h3 { margin: var(--space-xs) 0 var(--space-s); color: var(--gold); font: 700 var(--fs-card)/1.2 var(--display);
  letter-spacing: .04em; text-transform: uppercase; }
.weapon-card p, .dungeon-card p, .mode-cards p { margin: 0 0 var(--space-s); font-size: var(--fs-m); }
.weapon-card .chip { margin: 0; min-height: 26px; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; }
.dungeons { grid-template-columns: 1fr; }
.dungeon-card { grid-template-columns: 112px minmax(0, 1fr); }
.dungeon-card img, .raid-card img { width: 112px; height: 112px;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.dungeon-card .place { margin: 0; color: var(--azure-light); font: 700 var(--fs-xs)/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.dungeon-card .tags { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: var(--space-s) 0 var(--space-m); }
.dungeon-card .tags .chip { min-height: 26px; font-size: var(--fs-xs); }
.guardian-line { margin: 0 0 var(--space-s) !important; }
.guardian-line b { color: var(--ink); font: 700 var(--fs-m)/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.guardian-line span { color: var(--dim); }
.dungeon-card q { margin: 0; color: var(--dim); }
.raid-card { grid-template-columns: 140px minmax(0, 1fr); margin: var(--space-l) 0 var(--space-s); border-top-color: var(--violet);
  background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(181, 131, 255, .14), transparent 70%), linear-gradient(180deg, var(--slate-2), var(--slate)); }
.raid-card img { width: 140px; height: 140px; }
.doc .raid-bosses { display: grid; gap: var(--space-s); margin: var(--space-m) 0 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.doc .raid-bosses > li { --c: 10px; margin: 0; padding: var(--space-m) var(--space-l) var(--space-m) calc(38px + var(--space-m)); background: rgba(8, 17, 32, .55); border-top: 2px solid var(--violet);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.doc .raid-bosses > li::before { content: counter(item); left: 12px; top: 50%; translate: 0 -50%; background: var(--lilac); }
.raid-bosses b { display: block; color: var(--gold); font: 700 var(--fs-m)/1.3 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.raid-bosses span { color: var(--dim); font-size: var(--fs-s); }
.mode-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mode-cards li { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-l); }
@media (max-width: 560px) {
  .weapon-card, .dungeon-card, .raid-card { grid-template-columns: 1fr; }
  /* On a phone the tile stands beside the name and its kind; what it does
     runs under both across the whole card. */
  .ability { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-xs) var(--space-l); }
  .ability > div { display: contents; }
  .ability img { grid-row: span 2; align-self: center; width: 56px; height: 56px; }
  .ability h3 { align-self: end; }
  .ability .kind { align-self: start; margin-bottom: 0; }
  .ability > div > :not(h3):not(.kind) { grid-column: 1 / -1; }
  .ability > div > :nth-child(3) { margin-top: var(--space-m); }
}

/* The handbook's front page: seven chapters as cards, then the first steps. */
.guide-index { padding-top: clamp(40px, 5vw, 72px); }
.chapters { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
/* Two by two on a tablet; an odd last chapter takes the whole row. */
@media (min-width: 640px) and (max-width: 1099px) { .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapters > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Seven chapters on a wide screen: three over four, so no row ends early. */
@media (min-width: 1100px) { .chapters:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .chapters:has(> :nth-child(7):last-child) > * { grid-column: span 3; }
  .chapters:has(> :nth-child(7):last-child) > :nth-child(-n+3) { grid-column: span 4; } }
.chapter-card { --c: 18px; position: relative; display: flex; flex-direction: column; gap: var(--space-s); min-height: 220px; padding: var(--space-xl) var(--space-xl) var(--space-xl);
  color: var(--dim); text-decoration: none; background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(54, 200, 255, .08), transparent 70%),
    linear-gradient(180deg, var(--slate-2), var(--slate)); border-top: 2px solid var(--steel);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-fast); }
.chapter-card .num { position: absolute; right: 20px; top: 14px; color: rgba(123, 157, 204, .3); font-size: var(--fs-figure); line-height: 1; }
.chapter-card img { width: 56px; height: 56px; margin-bottom: var(--space-m); transition: transform var(--t-slow) var(--ease-out); }
.chapter-card b { color: var(--gold); font: 700 var(--fs-card)/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.chapter-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease-out); }
.chapter-card:hover { color: var(--ink); border-top-color: var(--gold); transform: translateY(-5px); }
.chapter-card:hover img { transform: rotate(-8deg) scale(1.08); }
.chapter-card:hover::after { transform: scaleX(1); }
.first-steps { margin-top: clamp(40px, 5vw, 64px); }

/* Previous and next under a chapter or an article. */
.pagers { display: grid; gap: var(--space-l); margin-top: var(--space-3xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pager { --c: 14px; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-l) var(--space-xl); color: var(--gold); text-decoration: none;
  background: linear-gradient(180deg, var(--slate-2), var(--slate)); border-top: 2px solid var(--steel);
  font: 700 var(--fs-body)/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-base) var(--ease-out); }
.pager { text-wrap: balance; }
.pager small { color: var(--dim); font: 700 var(--fs-xs)/1.3 var(--text); letter-spacing: .14em; }
.pager.next { text-align: right; }
.pager:hover { color: var(--gold-bright); background: var(--slate-3); border-color: var(--gold); }
.pager.prev:hover { transform: translateX(-4px); } .pager.next:hover { transform: translateX(4px); }

/* The news: the newest article large, the others beside it. */
.news-index { padding-top: clamp(40px, 5vw, 72px); }
.news-grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
/* Under the newest article the others share the width without a gap at
   the end of their row. */
@media (min-width: 1000px) { .news-grid:has(> .lead-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid:has(> .lead-card):has(> :nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.news-card .chip { min-height: 26px; font-size: var(--fs-xs); }
/* On a tablet two cards share a row; the newest article and a card left
   alone at the end take the whole row, picture beside text. */
@media (min-width: 640px) and (max-width: 999px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid > .lead-card,
  .news-grid:not(:has(> .lead-card)) > :last-child:nth-child(odd),
  .news-grid:has(> .lead-card) > :last-child:nth-child(even):not(.lead-card) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .news-grid > .lead-card .news-art,
  .news-grid:not(:has(> .lead-card)) > :last-child:nth-child(odd) .news-art,
  .news-grid:has(> .lead-card) > :last-child:nth-child(even):not(.lead-card) .news-art { aspect-ratio: auto; min-height: 260px; }
  .news-grid > .lead-card .news-text,
  .news-grid:not(:has(> .lead-card)) > :last-child:nth-child(odd) .news-text,
  .news-grid:has(> .lead-card) > :last-child:nth-child(even):not(.lead-card) .news-text { justify-content: center; }
}
a.more { text-decoration: none; }
a.more:hover { color: var(--gold-bright); }
a.more:hover::after { translate: 4px 0; }
.news-card { --c: 18px; position: relative; display: flex; flex-direction: column; color: var(--dim); text-decoration: none;
  background: var(--slate); border-top: 2px solid var(--steel);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.news-art { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.news-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.news-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-s); padding: var(--space-xl) var(--space-xl) var(--space-xl); }
.news-text b { color: var(--gold); font: 700 var(--fs-card)/1.25 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.news-card .more { margin-top: auto; }
.news-card:hover { color: var(--ink); border-top-color: var(--gold); transform: translateY(-5px); }
.news-card:hover .news-art img { transform: scale(1.06); }
.news-card:hover b { color: var(--gold-bright); }
@media (min-width: 1000px) {
  .lead-card { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; }
  .lead-card .news-art { aspect-ratio: auto; min-height: 380px; }
  .lead-card .news-text { justify-content: center; padding: var(--space-2xl) var(--space-2xl); }
  .lead-card b { color: var(--gold); font-size: var(--fs-feature); text-transform: uppercase; }
}
.news-card time, .byline time { min-height: 26px; font-size: var(--fs-xs); letter-spacing: .08em; }
.feed { margin: var(--space-xl) 0 0; }
.head ~ .feed, .band > .feed { text-align: center; }
.article { font-size: var(--fs-body); }
.article > p:not(.byline) { color: var(--ink); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m) var(--space-l); margin: 0 0 var(--space-xl); color: var(--dim); font-size: var(--fs-m); }

@supports (animation-timeline: view()) {
  body { timeline-scope: --opening; }
  .hero { view-timeline-name: --opening; }
  .top .cta.btn-ghost { background: var(--gold-plate); animation: cta-ink linear both; animation-timeline: --opening;
    animation-range: exit 55% exit 85%; }
  .top .cta.btn-ghost::before { animation: cta-plate linear both; animation-timeline: --opening; animation-range: exit 55% exit 85%; }
  @keyframes cta-ink { from { color: var(--gold-bright); } to { color: var(--ink-dark); } }
  @keyframes cta-plate { from { opacity: 1; } to { opacity: 0; } }
}

/* Motion. Everything below moves only for visitors who did not ask for less. */
@media (prefers-reduced-motion: no-preference) {
  /* Three bosses behind the name, eight seconds each, slowly drawing closer. */
  .hero-slide { animation: hero-show 24s infinite; }
  .hero-slide:first-child { animation-name: hero-first; }
  .hero-slide:nth-child(2) { animation-delay: 8s; }
  .hero-slide:nth-child(3) { animation-delay: 16s; }
  .hero-slide img { animation: drift-in 24s linear infinite; }
  .hero-slide:nth-child(2) img { animation-delay: 8s; }
  .hero-slide:nth-child(3) img { animation-delay: 16s; }
  .hero h1 { animation: title-in 1.4s var(--ease) both .2s; }
  .bar::after { animation: read-on linear both; animation-timeline: scroll(root); }
  .embers::before { animation: rise-embers 22s linear infinite; }
  .embers::after { animation: rise-embers-small 15s linear infinite; }
  .hero-inner > * { animation: arrive 1s var(--ease) both; }
  .hero-inner > :nth-child(1) { animation-delay: .05s; }
  .hero-inner > :nth-child(2) { animation-delay: .15s; }
  .hero-inner > :nth-child(3) { animation-delay: .25s; }
  .hero-inner > :nth-child(4) { animation-delay: .4s; }
  .hero-inner > :nth-child(5) { animation-delay: .5s; }
  .hero-inner > :nth-child(6) { animation-delay: .62s; }
  .hero-inner > :nth-child(7) { animation-delay: .72s; }
  .scroll-cue::before { animation: nudge 2.4s ease-in-out infinite; }

  .guardian, .weapon { animation: panel-in .5s var(--ease) both; }
  .weapon-figure img { animation: figure-in .6s var(--ease) both; }
  @keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes figure-in { from { opacity: 0; translate: 0 18px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }

  /* The boss stage: 8 phases × 4 s. */
  .slide { animation: phase 32s infinite; }
  .slide img { animation: phase-zoom 32s linear infinite; }
  .moves li { animation: called 32s infinite; }
  .moves li::after { animation: called-bar 32s linear infinite; }
  .slide:nth-child(2), .slide:nth-child(2) img, .moves li:nth-child(2), .moves li:nth-child(2)::after { animation-delay: 4s; }
  .slide:nth-child(3), .slide:nth-child(3) img, .moves li:nth-child(3), .moves li:nth-child(3)::after { animation-delay: 8s; }
  .slide:nth-child(4), .slide:nth-child(4) img, .moves li:nth-child(4), .moves li:nth-child(4)::after { animation-delay: 12s; }
  .slide:nth-child(5), .slide:nth-child(5) img, .moves li:nth-child(5), .moves li:nth-child(5)::after { animation-delay: 16s; }
  .slide:nth-child(6), .slide:nth-child(6) img, .moves li:nth-child(6), .moves li:nth-child(6)::after { animation-delay: 20s; }
  .slide:nth-child(7), .slide:nth-child(7) img, .moves li:nth-child(7), .moves li:nth-child(7)::after { animation-delay: 24s; }
  .slide:nth-child(8), .slide:nth-child(8) img, .moves li:nth-child(8), .moves li:nth-child(8)::after { animation-delay: 28s; }
  .slide:first-child { animation-name: phase-first; }

  @keyframes drift-in { 0% { transform: scale(1.02); } 40% { transform: scale(1.1) translate(-1.2%, -.8%); } 100% { transform: scale(1.1) translate(-1.2%, -.8%); } }
  @keyframes hero-show { 0% { opacity: 0; } 4%, 33.3% { opacity: 1; } 37.5%, 100% { opacity: 0; } }
  @keyframes hero-first { 0%, 33.3% { opacity: 1; } 37.5%, 96% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes title-in { from { opacity: 0; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .06em; } }
  @keyframes read-on { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes rise-embers { from { transform: translateY(0); } to { transform: translateY(-640px); } }
  @keyframes rise-embers-small { from { transform: translate(0, 0); } to { transform: translate(-60px, -420px); } }
  @keyframes arrive { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes drop-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
  @keyframes nudge { 0%, 100% { transform: translateY(-4px) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }
  @keyframes phase { 0% { opacity: 0; } 2.5%, 12.5% { opacity: 1; } 15%, 100% { opacity: 0; } }
  /* The first phase starts in view, so the stage is never empty. */
  @keyframes phase-first { 0%, 12.5% { opacity: 1; } 15%, 97.5% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes phase-zoom { 0% { transform: scale(1.02); } 15% { transform: scale(1.09); } 100% { transform: scale(1.09); } }
  @keyframes called { 0% { color: var(--dim); background-color: rgba(15, 27, 46, .7); transform: none; }
    1.5%, 12.5% { color: var(--ink); background-color: rgba(34, 53, 83, .95); transform: translateX(6px); }
    14%, 100% { color: var(--dim); background-color: rgba(15, 27, 46, .7); transform: none; } }
  @keyframes called-bar { 0% { transform: scaleX(0); opacity: 1; } 12.5% { transform: scaleX(1); opacity: 1; }
    13%, 100% { transform: scaleX(1); opacity: 0; } }

  /* Pieces rise into place and pictures drift while scrolling, where the
     browser can tie motion to the scroll. */
  @supports (animation-timeline: view()) {
    .shot, .path, .card, .reel li, .reactions li, .roster li, .promise li, .compare-wrap, .steps li, .bestiary, .armory,
    .faq details, .head, .stage, .moves, .numbers, .ability, .weapon-card, .dungeon-card, .mode-cards > li, .chapter-card,
    .news-card, .raid-bosses > li {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
    .cards > :nth-child(2), .paths > :nth-child(3), .roster > :nth-child(2), .promise > :nth-child(2) {
      animation-range: entry 6% entry 44%; }
    .cards > :nth-child(3), .paths > :nth-child(4), .roster > :nth-child(3), .promise > :nth-child(3) { animation-range: entry 12% entry 50%; }
    .chapter-art img, .download .chapter-art img { animation: parallax linear both; animation-timeline: view(); animation-range: cover; }
    .chapter-copy, .download-copy { animation: rise linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    /* The line under a section title is drawn out of light as it comes in. */
    .head h2::after { animation: draw-line linear both; animation-timeline: view(); animation-range: entry 20% entry 80%; }
    /* translate, not transform, so a hover can still lift a card. */
    @keyframes rise { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
    @keyframes parallax { from { transform: translateY(-5%) scale(1.05); } to { transform: translateY(5%) scale(1.05); } }
  }
}
/* Without motion the boss's phases stand side by side. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage { aspect-ratio: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-s);
    clip-path: none; background: none; }
  .stage::after { display: none; }
  .slide { position: static; opacity: 1; }
  .slide:nth-child(n+5) { display: none; }
  .encounter { align-items: start; }
  .encounter .stage { min-height: 0; }
  .encounter .moves { grid-auto-rows: auto; }
  .nameplate { position: static; grid-column: 1 / -1; padding: var(--space-s) 0; }
}