/* Don't Stand in the Fire: site styles.
   Tokens and the first block of components come from design/styles/tokens.css.
   Use the tokens; do not introduce new colours or fonts. */

:root {
  /* Grounds */
  --bg: #0D0F17;            /* page */
  --bg-deep: #0A0B11;       /* alternating band, insets */
  --bg-footer: #07080D;
  --panel: #141722;         /* flat card */
  --panel-top: #1C2030;     /* framed panel gradient start */
  --panel-bottom: #12141D;  /* framed panel gradient end */
  --header-top: #1A1D2B;

  /* Text */
  --text: #EDE6D6;
  --text-bright: #FFF6D6;
  --text-soft: #D8D1C1;
  --text-muted: #C9C2B2;    /* lowest contrast allowed for text on --bg */

  /* Gold */
  --gold: #F2CE73;          /* headings on cards, links, active markers */
  --gold-line: #B8923F;     /* panel borders, header rule */
  --gold-dim: #8A6F33;      /* dashed/empty outlines */
  --gold-dark: #6E5621;     /* card hairline border */
  --gold-shadow: #5E4A1F;   /* outer ring, section rules */
  --hairline: #3A3220;
  --hairline-cool: #2B2F40;
  --edge-cool: #4A4F60;     /* the "Rest in peace" card */
  --edge-idle: #3A3D4A;     /* inactive thumbnail, device outline */

  /* Section glows */
  --glow-blue: #1F2440;
  --glow-violet: #2A2140;
  --glow-teal: #12303A;
  --glow-ember: #3A2A12;
  --choice-top: #2A2012;

  /* Gradients */
  --grad-heading: linear-gradient(180deg, #FFF6D6 0%, #F2CE73 50%, #C98A22 100%);   /* clipped to text */
  --grad-button: linear-gradient(180deg, #FDE7A3 0%, #F2BB45 48%, #C97F17 100%);
  --grad-button-nav: linear-gradient(180deg, #FBDD8A 0%, #EEB23C 50%, #C97F17 100%);
  --grad-frame: linear-gradient(180deg, #F2CE73 0%, #8A6420 100%);                  /* screenshot frame */
  --grad-panel: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%);

  /* Button */
  --button-text: #2A1703;
  --button-border: #FFF1C2;
  --button-ring: #5A3A0B;
  --button-inset: rgba(90, 58, 11, 0.45);

  /* Drawn devices in the cross-platform line-up */
  --device: #0B0C10;
  --device-stand-top: #050608;
  --device-stand: #1B1E2A;
  --device-metal: linear-gradient(180deg, #E6E8EC 0%, #9499A5 100%);

  --focus: #7CC0F2;

  /* Type */
  --font-display: 'Cinzel', Georgia, serif;     /* headings, nav, buttons, labels: UPPERCASE */
  --font-body: 'Alegreya', Georgia, serif;
  --size-body: 20px;        /* 18px on phones */
  --size-lead: 22px;        /* 19px on phones */
  --size-hero-lead: 23px;   /* 19px on phones */
  --size-intro: 24px;       /* 19px on phones */
  --size-h2: clamp(30px, 4vw, 54px);
  --size-h3: 22px;

  /* Layout */
  --container: 1240px;
  --gutter: 24px;           /* 18px on phones */
  --section-y: 88px;        /* 56px on phones */
  --radius-card: 6px;
  --radius-panel: 8px;
}

@media (max-width: 720px) {
  :root {
    --size-body: 18px;
    --size-lead: 19px;
    --size-hero-lead: 19px;
    --size-intro: 19px;
    --gutter: 18px;
    --section-y: 56px;
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.5;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }

a { color: var(--gold); }
a:hover { color: var(--button-border); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* img is display:block above, so the hidden attribute needs restating. */
[hidden] { display: none !important; }
/* Without JavaScript nothing can page through these, so show them all. */
html:not(.js) [data-slide][hidden],
html:not(.js) [data-shot][hidden] { display: block !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--gold-line);
  color: var(--text-bright);
}
.skip-link:focus { top: 8px; }

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, var(--header-top) 0%, var(--bg) 100%);
  border-bottom: 2px solid var(--gold-line);
  box-shadow: 0 2px 0 var(--bg-deep), 0 3px 0 var(--gold-shadow);
}

.site-header__inner {
  max-width: calc(var(--container) + 48px);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 32px;
}

.site-logo { display: flex; align-items: center; min-height: 48px; }
.site-logo img { height: 68px; width: auto; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav__link {
  color: var(--text);
  text-decoration: none;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.site-nav__link[aria-current="page"] { color: var(--gold); }
.site-nav__link--phone { display: none; }

.nav-cta {
  color: var(--button-text);
  text-decoration: none;
  padding: 0 22px;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: var(--grad-button-nav);
  border: 2px solid var(--button-border);
  box-shadow: 0 0 0 2px var(--button-ring), inset 0 -3px 0 var(--button-inset);
}
.nav-cta:hover { color: var(--button-text); filter: brightness(1.08); }

.menu-toggle { display: none; }

@media (max-width: 899px) {
  .site-header__inner { padding: 6px 16px; gap: 0 12px; }
  .site-logo { min-height: 52px; }
  .site-logo img { height: 50px; }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--gold-line);
    border-radius: 6px;
    background: transparent;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
  }

  .site-nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 12px;
    font-size: 16px;
  }
  .site-nav__link { border-top: 1px solid var(--hairline-cool); }
  .site-nav__link--phone { display: flex; }
  .nav-cta { margin-top: 12px; min-height: 56px; justify-content: center; }

  /* Collapsed until the Menu button opens it. Without JavaScript it stays open. */
  .js .site-nav { display: none; }
  .js .site-header.is-open .site-nav { display: flex; }
  html:not(.js) .menu-toggle { display: none; }
}

/* ---------- Footer ---------- */

.site-footer { background: var(--bg-footer); border-top: 2px solid var(--gold-line); }

.site-footer__inner {
  max-width: calc(var(--container) + 48px);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  font-size: 17px;
}

.site-footer__legal { color: var(--text-muted); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.site-footer__nav a { color: var(--text); min-height: 44px; display: flex; align-items: center; }
.site-footer__nav a:hover { color: var(--button-border); }

/* ---------- Sections ---------- */

.section { background: var(--bg); }
.section--deep { background: var(--bg-deep); }

.band { background: var(--bg-deep); border-top: 2px solid var(--gold-shadow); border-bottom: 2px solid var(--gold-shadow); }
.rule-top { border-top: 2px solid var(--gold-shadow); }
.rule-bottom { border-bottom: 2px solid var(--gold-shadow); }

.section--glow {
  background: radial-gradient(ellipse at var(--glow-at, 50% 0%), var(--glow-color, var(--glow-blue)) 0%, var(--glow-base, var(--bg)) var(--glow-stop, 62%));
}
.glow-top { --glow-at: 50% 0%; }
.glow-hero { --glow-at: 50% 120%; --glow-base: var(--bg-footer); }
.glow-violet-right { --glow-at: 80% 50%; --glow-color: var(--glow-violet); --glow-stop: 60%; }
.glow-violet-left { --glow-at: 20% 40%; --glow-color: var(--glow-violet); --glow-stop: 60%; }
.glow-teal { --glow-at: 20% 40%; --glow-color: var(--glow-teal); }
.glow-ember { --glow-at: 50% 100%; --glow-color: var(--glow-ember); }

/* A section with a screenshot behind it and a dark shade on top. */
.section--cover { position: relative; overflow: hidden; }
.section__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.section__bg--blur { left: -3%; top: -3%; width: 106%; height: 106%; filter: blur(10px); }
.section__shade { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.shade-side { background: linear-gradient(90deg, rgba(10, 11, 17, 0.95) 0%, rgba(10, 11, 17, 0.86) 55%, rgba(10, 11, 17, 0.62) 100%); }
.shade-play { background: linear-gradient(180deg, rgba(13, 15, 23, 0.86) 0%, rgba(13, 15, 23, 0.55) 55%, rgba(13, 15, 23, 0.9) 100%); }
.shade-fade { background: linear-gradient(180deg, rgba(10, 11, 17, 0.6) 0%, rgba(10, 11, 17, 0.82) 60%, var(--bg) 100%); }
.shade-dim { background: linear-gradient(180deg, rgba(13, 15, 23, 0.7) 0%, rgba(13, 15, 23, 0.92) 100%); }

.container {
  position: relative;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--pad-top, var(--section-y)) var(--gutter) var(--pad-bottom, var(--section-y));
}

/* Sections whose vertical padding differs from the standard --section-y. */
.pad-pillars { --pad-top: 0px; --pad-bottom: 40px; }
.pad-roomy { --pad-top: 96px; --pad-bottom: 96px; }
.pad-grand { --pad-top: 104px; --pad-bottom: 104px; }
.pad-spells-hero { --pad-top: 72px; --pad-bottom: 88px; }
.pad-guilds-hero { --pad-top: 120px; --pad-bottom: 104px; }
.pad-lore-hero { --pad-top: 140px; --pad-bottom: 128px; }
.pad-media-hero { --pad-top: 96px; --pad-bottom: 80px; }
.pad-download-hero { --pad-top: 104px; --pad-bottom: 88px; }

@media (max-width: 720px) {
  .pad-pillars { --pad-bottom: 32px; }
  .pad-roomy, .pad-grand { --pad-top: 64px; --pad-bottom: 64px; }
  .pad-spells-hero { --pad-top: 48px; --pad-bottom: 56px; }
  .pad-guilds-hero { --pad-top: 80px; --pad-bottom: 64px; }
  .pad-lore-hero { --pad-top: 88px; --pad-bottom: 80px; }
  .pad-media-hero { --pad-top: 64px; --pad-bottom: 56px; }
  .pad-download-hero { --pad-top: 72px; --pad-bottom: 56px; }
}

/* ---------- Layout helpers ---------- */

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 28px); }
.stack--center { align-items: center; }
.stack--start { align-items: flex-start; }
.gap-20 { --stack-gap: 20px; }
.gap-22 { --stack-gap: 22px; }
.gap-24 { --stack-gap: 24px; }
.gap-26 { --stack-gap: 26px; }
.gap-36 { --stack-gap: 36px; }

.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.note { font-size: 18px; color: var(--text-muted); }

.measure-14 { max-width: 14em; }
.measure-16 { max-width: 16em; }
.measure-30 { max-width: 30em; }
.measure-32 { max-width: 32em; }
.measure-34 { max-width: 34em; }

.w-1040 { max-width: 1040px; }
.w-1080 { max-width: 1080px; }

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 280px), 100%), 1fr));
  gap: var(--grid-gap, 24px);
}
.grid--quads { --grid-min: 240px; }
.grid--features { --grid-min: 460px; --grid-gap: 28px; }
.grid--choices { --grid-min: 320px; --grid-gap: 28px; }
.grid--platforms { --grid-min: 260px; --grid-gap: 28px; }
.grid--after-frame { margin-top: 20px; }

/* Text beside an image. Wraps to one column when the two no longer fit. */
.split { display: flex; flex-wrap: wrap; align-items: center; gap: var(--split-gap, 56px); }
.split__text, .split__media { min-width: 0; }
.split__text { flex: 1 1 var(--text-basis, 400px); }
.split__media { flex: var(--media-grow, 1.5) 1 var(--media-basis, 480px); }
.split--cast { --split-gap: 48px; }
.split--vault { --split-gap: 48px; --text-basis: 380px; --media-grow: 1.6; --media-basis: 520px; }
.split--elements { --text-basis: 420px; --media-grow: 1; --media-basis: 420px; }
.split--elements .split__media { max-width: 580px; }
.split--discord { --text-basis: 420px; --media-grow: 1.4; }
.split--hall { --text-basis: 380px; --media-grow: 1.4; }
.split--story { --text-basis: 380px; }

@media (max-width: 720px) {
  .split, .split--cast, .split--vault { --split-gap: 32px; }
}

/* ---------- Type ---------- */

.heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--h-size, var(--size-h2));
  line-height: var(--h-lh, 1.1);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  background: var(--grad-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heading--shadow { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.95)); }
.heading--home { --h-size: clamp(30px, 4.6vw, 64px); --h-lh: 1.08; }
.heading--guilds { --h-size: clamp(34px, 5vw, 68px); --h-lh: 1.06; max-width: 14em; }
.heading--lore { --h-size: clamp(38px, 6.4vw, 92px); --h-lh: 1.04; max-width: 12em; }
.heading--media { --h-size: clamp(40px, 6vw, 84px); --h-lh: 1.04; letter-spacing: 0.04em; }
.heading--download { --h-size: clamp(38px, 6vw, 84px); --h-lh: 1.04; }
.heading--display { --h-size: clamp(34px, 5.4vw, 76px); }
.heading--compact { --h-size: clamp(30px, 3.6vw, 48px); }

.lead { font-size: var(--size-lead); }
.lead--center { text-align: center; margin-bottom: 12px; }
.lead--hero { font-size: var(--size-hero-lead); text-shadow: 0 2px 6px #000000; }
.lead--intro { font-size: var(--size-intro); color: var(--text-muted); }

.label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.label--muted { color: var(--text-muted); }
.label--caption { font-size: 17px; color: var(--gold); }

.text-link { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Shared components ---------- */

.ornament { display: flex; align-items: center; gap: 14px; width: min(520px, 90%); }
.ornament::before, .ornament::after { content: ""; flex: 1; height: 2px; }
.ornament::before { background: linear-gradient(90deg, rgba(242, 206, 115, 0), var(--gold)); }
.ornament::after { background: linear-gradient(90deg, var(--gold), rgba(242, 206, 115, 0)); }
.ornament > span { width: 16px; height: 16px; border: 2px solid var(--gold); transform: rotate(45deg); }

.btn {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--button-text);
  display: inline-flex;
  align-items: center;
  min-height: 66px;
  padding: 0 30px;
  border-radius: 8px;
  background: var(--grad-button);
  border: 3px solid var(--button-border);
  box-shadow: 0 0 0 3px var(--button-ring), inset 0 -5px 0 var(--button-inset);
}
.btn:hover { color: var(--button-text); filter: brightness(1.08); }
.btn--hero {
  font-size: 26px;
  letter-spacing: 0.08em;
  min-height: 82px;
  padding: 0 56px;
  box-shadow: 0 0 0 3px var(--button-ring), 0 0 44px rgba(242, 187, 69, 0.55), inset 0 -5px 0 var(--button-inset);
}
.btn--lg {
  font-size: 22px;
  letter-spacing: 0.08em;
  min-height: 74px;
  padding: 0 44px;
  box-shadow: 0 0 0 3px var(--button-ring), 0 0 44px rgba(242, 187, 69, 0.45), inset 0 -5px 0 var(--button-inset);
}
.btn--store { min-height: 70px; }
.btn--block { display: flex; align-self: stretch; justify-content: center; text-align: center; font-size: 17px; min-height: 62px; padding: 0 22px; }

.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.btn-row--after { margin-top: 12px; }

.round-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--button-text);
  background: var(--grad-button);
  border: 2px solid var(--button-border);
  box-shadow: 0 0 0 2px var(--button-ring);
}

.ghost-btn {
  align-self: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--gold-dim);
}

.panel {
  background: var(--grad-panel);
  border: 2px solid var(--gold-line);
  border-radius: var(--radius-panel);
  box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 4px var(--gold-shadow);
}

.card {
  background: var(--panel);
  border: 1px solid var(--gold-dark);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-card);
  padding: 26px;
}
.card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-h3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}

.frame {
  width: 100%;
  padding: 5px;
  background: var(--grad-frame);
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 4px var(--gold-shadow), 0 30px 70px rgba(0, 0, 0, 0.65);
}
.frame > img { width: 100%; border-radius: 4px; }
.frame--sm { padding: 3px; border-radius: 6px; box-shadow: 0 0 0 2px var(--bg-deep), 0 12px 28px rgba(0, 0, 0, 0.6); }

.icon { border-radius: 16%; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chips li {
  background: var(--panel);
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  padding: 10px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-bright);
}

/* ---------- Home ---------- */

/* The art fills the hero and the text block sits over its lower half. The box is a
   little taller than the 16:9 art so the boss stays clear above the heading, and on
   very wide screens it grows to the height of the window so the boss is not cut off. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(640px, 60vw, max(960px, 100vh - 90px));
  overflow: hidden;
  background: var(--bg);
}
.hero__art {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 54% top;
}
.hero__shade {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(13, 15, 23, 0) 34%, rgba(13, 15, 23, 0.6) 60%, rgba(13, 15, 23, 0.9) 86%, var(--bg) 100%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  padding: 0 var(--gutter) 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pillars li { padding: 28px 24px; text-align: center; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pillars li:last-child { border-right: 0; }
.pillars span { display: block; font-size: 18px; color: var(--text-soft); }
.pillars__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.shots { margin-bottom: 12px; }
.shot img { aspect-ratio: 2 / 1; object-fit: cover; }
/* A shot is a link that opens the larger image in the modal. */
.shot__zoom { position: relative; display: block; cursor: zoom-in; }
.shot__zoom:hover > img { filter: brightness(1.12); }
.shot__zoom-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 38px;
  height: 38px;
  padding: 7px;
  border-radius: 6px;
  background: rgba(10, 11, 17, 0.8);
  border: 1px solid var(--gold-line);
  color: var(--gold);
}
.shot figcaption {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-top: 12px;
}

.icon-row { display: grid; grid-template-columns: repeat(6, minmax(0, 56px)); gap: 10px; max-width: 100%; }

.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  max-width: 860px;
  margin-top: 12px;
}
.tag-grid li {
  background: rgba(20, 23, 34, 0.92);
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  padding: 16px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.after-list { margin-top: 12px; }

/* The cross-platform line-up: four devices drawn with CSS, each showing a screenshot.
   Frame thickness scales with the line-up's own width. */
.devices {
  position: relative;
  width: 100%;
  max-width: 1040px;
  aspect-ratio: 1040 / 540;
  margin: 24px 0 8px;
  container-type: inline-size;
  --bezel-monitor: 10px;
  --bezel-monitor-chin: 16px;
  --bezel-tablet: 12px;
  --bezel-laptop: 9px;
  --bezel-phone: 6px;
  --corner-monitor: 8px;
  --corner-handheld: 16px;
  --corner-laptop: 10px;
  --foot-height: 10px;
  --base-height: 12px;
}
.device { position: absolute; }
.device img { width: 100%; object-fit: cover; }
.device__screen, .device--tablet, .device--phone {
  background: var(--device);
  box-shadow: 0 0 0 1px var(--edge-idle), 0 24px 48px rgba(0, 0, 0, 0.75);
}

.device--monitor { left: 21%; top: 0; width: 58%; display: flex; flex-direction: column; align-items: center; }
.device--monitor .device__screen {
  width: 100%;
  border: var(--bezel-monitor) solid var(--device);
  border-bottom-width: var(--bezel-monitor-chin);
  border-radius: var(--corner-monitor);
}
.device--monitor img { aspect-ratio: 16 / 9; }
.device__neck { width: 14%; aspect-ratio: 2 / 1; background: linear-gradient(180deg, var(--device-stand-top) 0%, var(--device-stand) 100%); }
.device__foot {
  width: 40%;
  height: var(--foot-height);
  border-radius: calc(var(--foot-height) * 0.6) calc(var(--foot-height) * 0.6) 0 0;
  background: var(--device-stand);
  box-shadow: 0 0 0 1px var(--edge-idle);
}

.device--tablet {
  z-index: 2;
  left: 0;
  bottom: 3%;
  width: 31%;
  border: var(--bezel-tablet) solid var(--device);
  border-radius: var(--corner-handheld);
  transform: perspective(1100px) rotateY(16deg);
}
.device--tablet img { aspect-ratio: 4 / 3; border-radius: 4px; }

.device--laptop {
  z-index: 2;
  right: 0;
  bottom: 2%;
  width: 37%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: perspective(1100px) rotateY(-16deg);
}
.device--laptop .device__screen {
  width: 86%;
  border: var(--bezel-laptop) solid var(--device);
  border-radius: var(--corner-laptop) var(--corner-laptop) 0 0;
}
.device--laptop img { aspect-ratio: 16 / 10; }
.device__base {
  width: 100%;
  height: var(--base-height);
  border-radius: 2px 2px var(--corner-laptop) var(--corner-laptop);
  background: var(--device-metal);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.7);
}

.device--phone {
  z-index: 3;
  left: 30%;
  bottom: 0;
  width: 25%;
  border: var(--bezel-phone) solid var(--device);
  border-radius: var(--corner-handheld);
}
.device--phone img { aspect-ratio: 19.5 / 9; border-radius: calc(var(--corner-handheld) * 0.6); }

@media (max-width: 720px) {
  .devices {
    --bezel-monitor: 4px;
    --bezel-monitor-chin: 7px;
    --bezel-tablet: 5px;
    --bezel-laptop: 4px;
    --bezel-phone: 3px;
    --corner-monitor: 4px;
    --corner-handheld: 7px;
    --corner-laptop: 5px;
    --foot-height: 5px;
    --base-height: 6px;
  }
}

/* Where container units are supported, scale the frames smoothly between the two designs. */
@supports (width: 1cqw) {
  .devices > .device {
    --bezel-monitor: clamp(4px, 0.96cqw, 10px);
    --bezel-monitor-chin: clamp(7px, 1.54cqw, 16px);
    --bezel-tablet: clamp(5px, 1.15cqw, 12px);
    --bezel-laptop: clamp(4px, 0.87cqw, 9px);
    --bezel-phone: clamp(3px, 0.58cqw, 6px);
    --corner-monitor: clamp(4px, 0.77cqw, 8px);
    --corner-handheld: clamp(7px, 1.54cqw, 16px);
    --corner-laptop: clamp(5px, 0.96cqw, 10px);
    --foot-height: clamp(5px, 0.96cqw, 10px);
    --base-height: clamp(6px, 1.15cqw, 12px);
  }
}

/* ---------- Spells ---------- */

.slideshow { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 40px; }
.slideshow__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.slideshow__dots { display: flex; align-items: center; gap: 2px; }

.dot { width: 28px; height: 44px; padding: 0; background: transparent; border: 0; display: flex; align-items: center; justify-content: center; }
.dot span { display: block; width: 16px; height: 16px; transform: rotate(45deg); border: 2px solid var(--gold); }
.dot[aria-current="true"] span { background: var(--gold); }

.recipe-row { width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; gap: 32px; }

.recipe { flex: 1 1 420px; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.recipe__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}
.recipe__slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.recipe__status { text-align: center; font-size: var(--size-lead); font-weight: 700; color: var(--text-bright); min-height: 66px; }
.recipe__group { display: flex; flex-direction: column; gap: 10px; }
.recipe__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.slot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.slot__tile { width: 100%; aspect-ratio: 1; border-radius: 16%; background: var(--bg-deep); border: 2px dashed var(--gold-dim); overflow: hidden; }
.slot__icon { width: 100%; height: 100%; }
.slot__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.slot.is-filled .slot__tile { border-style: solid; border-color: var(--gold); }
.slot.is-filled .slot__label { color: var(--text-bright); }

.option {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 17px;
  text-align: left;
  color: var(--text);
  background: var(--bg-deep);
  border: 2px solid var(--gold-dim);
}
.option span { min-width: 0; }
.option__icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 16%; }
.option[aria-pressed="true"] { border-color: var(--button-border); box-shadow: 0 0 14px var(--gold); }
.option:disabled { opacity: 0.4; cursor: default; }

.recipe-aside { flex: 1.5 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.recipe-aside__card { margin-top: 10px; }

.element-list { display: grid; gap: 10px; }
.element-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--gold-dark);
  border-radius: 8px;
  padding: 8px 16px 8px 8px;
}
.element-list .icon { flex: 0 0 52px; }
.element-list__name {
  flex: 0 0 96px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Guilds ---------- */

.feature { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.feature h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Lore ---------- */

.choice {
  background: var(--panel);
  border: 1px solid var(--edge-cool);
  border-radius: 8px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--text-muted);
}
.choice__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.choice--chosen {
  background: linear-gradient(180deg, var(--choice-top) 0%, var(--panel) 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 4px var(--gold-shadow), 0 0 60px rgba(242, 187, 69, 0.22);
  color: var(--text);
}
.choice--chosen .choice__title { background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Media ---------- */

/* content-box so the 16:9 shape applies inside the padding, as designed. */
.trailer-slot {
  box-sizing: content-box;
  aspect-ratio: 16 / 9;
  padding: 16px;
  border-radius: 4px;
  background: var(--bg-footer);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  color: var(--text-muted);
}
.trailer-slot svg { color: var(--gold); }

.viewer img { aspect-ratio: 2.2 / 1; object-fit: cover; }

.thumbs { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.thumb { padding: 0; background: var(--bg-deep); border-radius: 6px; overflow: hidden; border: 3px solid var(--edge-idle); }
.thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.thumb[aria-pressed="true"] { border-color: var(--gold); }

.artwork { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 24px; }
.artwork__tall { flex: 1 1 300px; min-width: 0; max-width: 400px; }
.artwork__grid { flex: 2 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

/* ---------- Download ---------- */

.group-label {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.grid--platforms + .group-label { margin-top: 20px; }

.platform { padding: 28px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.platform svg { color: var(--gold); }
.platform__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.platform__req { font-size: 17px; color: var(--text-muted); }

.steps {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 36px;
  margin-top: 12px;
}
.steps li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.steps h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-h3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}
.steps p { max-width: 18em; }
.steps__number {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--button-text);
  background: var(--grad-button);
  border: 2px solid var(--button-border);
  box-shadow: 0 0 0 2px var(--button-ring);
}

/* The table scrolls inside its own box so the page never scrolls sideways. */
.table-wrap {
  width: 100%;
  max-width: 920px;
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--gold-dark);
  border-radius: 8px;
}
.spec-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 19px; }
.spec-table th, .spec-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--hairline); }
.spec-table thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 2px solid var(--gold-line);
}
.spec-table tbody th { font-weight: 700; color: var(--text-bright); }

/* ---------- Bosses ---------- */

/* The header slideshow: three stacked screenshots that cross-fade, with the matching
   line of text over each one. */
.boss-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(520px, 52vw, 820px);
  overflow: hidden;
  background: var(--bg-deep);
  border-bottom: 2px solid var(--gold-shadow);
}
.boss-hero__art img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.boss-hero__art img.is-active { opacity: 1; }
.boss-hero__shade {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(13, 15, 23, 0.3) 0%, rgba(13, 15, 23, 0) 28%, rgba(13, 15, 23, 0.7) 66%, rgba(10, 11, 17, 0.95) 100%);
  pointer-events: none;
}
.boss-hero__content {
  position: relative;
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  padding: 0 var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.boss-hero__content h1 { letter-spacing: 0.3em; margin-right: -0.3em; text-shadow: 0 2px 6px #000000; }
/* Every caption shares one grid cell, so the block is as tall as the longest one. */
.boss-hero__captions { width: 100%; display: grid; justify-items: center; }
.boss-caption {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.boss-caption.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.boss-hero .round-btn { width: 48px; height: 48px; }
.round-btn--quiet { margin-left: 6px; background: rgba(10, 11, 17, 0.8); color: var(--gold); border-color: var(--gold-line); box-shadow: none; }
.round-btn.is-paused .icon-pause,
.round-btn:not(.is-paused) .icon-play { display: none; }
html:not(.js) .boss-hero .slideshow__controls { display: none; }

/* The map beside its rules. The painting is 887px wide, so the map column stops there. */
.progression__icon { width: 96px; height: 96px; margin-bottom: -8px; }
.progression {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 897px) minmax(0, 1fr);
  align-items: start;
  gap: 32px;
}
.progression__side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; }
.side-panel { padding: 22px 20px; }
.side-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 16px;
}
.rules, .legend { display: flex; flex-direction: column; gap: 14px; font-size: 18px; line-height: 1.35; }
.rules li, .legend li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px; }
.legend li { grid-template-columns: 52px minmax(0, 1fr); align-items: center; }
.rules svg, .legend svg { display: block; }

.map { display: block; width: 100%; height: auto; border-radius: 4px; }
.map__num, .map__name { font-family: var(--font-display); font-weight: 700; }
.map__num, .map__range { text-anchor: middle; }
.map__range { font-family: var(--font-body); font-weight: 700; }
.map__boss { cursor: pointer; }
.map__boss:focus-visible { outline: none; }
.map__hover, .map__focus, .map__name { opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
.map__focus { stroke: var(--focus); }
.map__name { paint-order: stroke; }
.map__boss:hover .map__hover,
.map__boss:hover .map__name,
.map__boss:focus-visible .map__name,
.map__boss:focus-visible .map__focus { opacity: 1; }
.map__glow { animation: map-glow 2.6s ease-in-out infinite; }
@keyframes map-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.grid--bosses { --grid-min: 400px; }
.boss-card { display: flex; align-items: flex-start; gap: 20px; padding: 22px; scroll-margin-top: 24px; }
.boss-card:target { border-color: var(--gold); }
.boss-card__portrait {
  flex: none;
  width: 104px;
  height: 104px;
  padding: 5px;
  border-radius: 50%;
  background: var(--grad-frame);
  box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 3px var(--gold-shadow);
}
.boss-card__portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: radial-gradient(circle at 50% 40%, var(--panel-top) 0%, var(--bg-deep) 100%);
}
.boss-card__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.boss-card__body .label { font-size: 13px; }
.boss-card h3 { margin: 0; }
.boss-card__sub { font-style: italic; color: var(--text-soft); }
.boss-card__raid { font-weight: 700; color: var(--text-bright); }
.boss-card__new { color: var(--gold); }

@media (max-width: 1100px) {
  .progression { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .progression__map { max-width: 897px; }
  .progression__side { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; }
  .side-panel { flex: 1 1 300px; }
}

@media (max-width: 720px) {
  .boss-hero { min-height: 560px; }
  .boss-hero__content { padding-bottom: 24px; }
  .boss-card { padding: 18px; gap: 16px; }
  .boss-card__portrait { width: 84px; height: 84px; padding: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .boss-hero__art img, .boss-caption { transition: none; }
  .map__glow { animation: none; }
}

/* ---------- Modal: larger screenshots and boss details ---------- */

html.is-modal-open { overflow: hidden; }
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: rgba(10, 11, 17, 0.9);
  color: var(--text);
}
.modal[open] { display: flex; align-items: center; justify-content: center; }
.modal::backdrop { background: rgba(10, 11, 17, 0.6); }
/* The box is sized here, not by its content, so the bar lines up with what it holds.
   --natural and --ratio are the image's own width and shape, set by the script; the
   190px is the room the bar, the paging row and the padding need. */
.modal__box { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.modal__box--boss { width: min(720px, 100%); }
.modal__box--image { width: min(100%, var(--natural), (100vh - 190px) * var(--ratio) + 8px); }
@supports (height: 100dvh) {
  .modal__box--image { width: min(100%, var(--natural), (100dvh - 190px) * var(--ratio) + 8px); }
}
.modal__bar { align-self: stretch; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.modal .round-btn { flex: none; width: 48px; height: 48px; margin-left: auto; }
.modal__nav .round-btn { margin-left: 0; }
.modal__body { align-self: stretch; min-height: 0; overflow: auto; }
.modal__image {
  padding: 4px;
  border-radius: 8px;
  background: var(--grad-frame);
  box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 4px var(--gold-shadow);
  margin: 4px;
}
.modal__image img { width: 100%; height: auto; border-radius: 4px; }
.modal__nav { display: flex; align-items: center; gap: 18px; }
.modal__nav .label { min-width: 5em; text-align: center; }
.modal .boss-card { padding: 28px; gap: 28px; }
.modal .boss-card__portrait { width: 200px; height: 200px; padding: 7px; }
.modal .boss-card__body { gap: 8px; }
.modal .boss-card__body .label { font-size: 15px; }
.modal .boss-card h3 { font-size: clamp(24px, 3vw, 32px); }

@media (max-width: 720px) {
  .modal { padding: 12px; }
  .modal .boss-card { flex-direction: column; align-items: center; text-align: center; padding: 22px; gap: 18px; }
  .modal .boss-card__portrait { width: 160px; height: 160px; }
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1023px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars li:nth-child(2n) { border-right: 0; }
}

@media (max-width: 720px) {
  .hero { min-height: 680px; }
  .hero__content { padding-bottom: 40px; }
  .icon-row { grid-template-columns: repeat(6, minmax(0, 44px)); }

  .round-btn { width: 48px; height: 48px; }
  .dot { width: 22px; }

  .recipe { padding: 16px; gap: 18px; }
  .recipe__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}

@media (max-width: 560px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars li { border-right: 0; }
}