/* ===== FONTS — Alegreya (the game's typeface), Latin subset, inlined ===== */
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/aleg-400.woff2) format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/aleg-500.woff2) format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/aleg-700.woff2) format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/aleg-800.woff2) format("woff2");
}

/* ===== TOKENS — the dark "Ironhold" palette, the game's real brand.
     Weathered gold is the single accent. ===== */
:root {
  --ground: #141418;
  --bar: #1b1b21;
  --panel: #212129;
  --panel-2: #262630;
  --inset: #191920;
  --track: #101014;
  --border: #33333d;
  --border-soft: #2a2a33;
  --text: #e6e0d0;
  --muted: #97917f;
  --faint: #6f6a5c;
  --accent: #b8933d;
  --accent-strong: #96762c;
  --gold: #d3ac52;
  --success: #7d9a4e;
  --danger: #a03b2e;
  --glow: rgba(184, 147, 61, 0.14);
  /* Loot rarity ramp — grey → green → blue → purple → gold → crimson */
  --rar-common: #8a8a93;
  --rar-uncommon: #6ea24b;
  --rar-rare: #4f83c4;
  --rar-epic: #9a5bd0;
  --rar-legendary: #d3ac52;
  --rar-mythic: #c2513f;
  --bezel: linear-gradient(155deg, #4c463f 0%, #332d29 48%, #221e1b 100%);
  --bezel-shadow:
    0 0 0 1px rgba(240, 235, 226, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 30px 60px -18px rgba(0, 0, 0, 0.7);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Alegreya", Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums;
  overflow-x: hidden;
}
::selection {
  background: var(--accent);
  color: #141418;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p {
  margin: 0;
}
img {
  max-width: 100%;
  display: block;
}
.num {
  font-variant-numeric: lining-nums tabular-nums;
}

:root {
  --wrap-pad: 28px;
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* ---------- NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bar) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 20px;
}
.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: cover;
}
.release-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-variant-numeric: normal;
}
.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 15px;
  color: var(--muted);
}
.nav-links a {
  transition: color 0.18s;
}
.nav-links a:hover {
  color: var(--text);
}
/* Discord link inside the mobile dropdown — only shown below 560px, where
   the header's Discord button no longer fits beside the burger */
.nav-discord-mobile {
  display: none;
}
.nav-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 26px;
}
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 11px;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform 0.12s ease,
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
  font-variant-numeric: normal;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--accent);
  color: #141418;
  border-color: var(--accent-strong);
}
.btn-primary:hover {
  background: var(--gold);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--gold);
}
.btn-lg {
  font-size: 17px;
  padding: 15px 28px;
  border-radius: 13px;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 70% at 84% 8%, var(--glow), transparent 70%);
}
.hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 54px;
  align-items: center;
  /* top/bottom only — shorthand would zero out .wrap's side padding */
  padding-top: 74px;
  padding-bottom: 66px;
}
h1 {
  font-size: clamp(40px, 5.4vw, 62px);
}
.hero h1 .em {
  color: var(--gold);
}
.lede {
  margin-top: 22px;
  font-size: 20px;
  color: var(--muted);
  max-width: 34ch;
}
.lede b {
  color: var(--text);
  font-weight: 700;
}
.cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.stores {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  background: color-mix(in srgb, var(--inset) 55%, transparent);
}
.store svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: 0.6;
  flex: none;
}
.store > span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.store .soon {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.store b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* ---------- PHONE ---------- */
.phone-stage {
  display: flex;
  justify-content: center;
}
.phone {
  width: min(310px, 80vw);
  border-radius: 44px;
  padding: 11px;
  background: var(--bezel);
  box-shadow: var(--bezel-shadow);
}
.screen {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  aspect-ratio: 300/632;
  background: #141418;
  color: #e6e0d0;
  font-variant-numeric: normal;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.slide.on {
  opacity: 1;
}
/* real game screenshots inside the phone frame */
.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
/* labeled placeholder shown until each screenshot file exists (see index.html) */
.slide::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background:
    radial-gradient(70% 45% at 50% 32%, var(--glow), transparent 70%),
    var(--track);
}

/* ---------- SECTIONS ---------- */
section.pillar {
  padding: 78px 0;
  border-bottom: 1px solid var(--border-soft);
}
.p-head {
  max-width: 62ch;
}
.p-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-top: 16px;
}
.p-head p {
  margin-top: 16px;
  font-size: 19px;
  color: var(--muted);
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.feature {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}
.feature .fi {
  font-size: 22px;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 13%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  margin-bottom: 14px;
  overflow: hidden;
}
.feature .fi img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feature .fi svg {
  width: 24px;
  height: 24px;
  color: var(--gold);
}
.feature h3 {
  font-size: 19px;
}
.feature p {
  margin-top: 8px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.5;
}

/* real skill-icon wall */
.iconwall {
  margin-top: 22px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 18px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.iconwall figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.iconwall img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}
.iconwall figcaption {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-align: center;
}

/* compact skill strip — a slim, lower-weight row of the skill icons, shown as
   supporting texture below the Progression cards rather than as a headline */
.skillstrip {
  margin-top: 34px;
}
.skillstrip-cap {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
}
.iconwall.compact {
  margin-top: 0;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  padding: 16px 14px;
}
.iconwall.compact img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.iconwall.compact figcaption {
  font-size: 9px;
}

/* ===== The Atlas — interactive world map ===== */
.atlas {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 22px;
  align-items: stretch;
}
.map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--bezel-shadow);
}
.map > img {
  width: 100%;
  display: block;
}
.maphint {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e6e0d0;
  background: rgba(10, 9, 8, 0.6);
  border: 1px solid var(--border-soft);
  padding: 4px 10px;
  border-radius: 99px;
  pointer-events: none;
}
.hot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: var(--hc);
  border: 2px solid rgba(255, 255, 255, 0.92);
  cursor: pointer;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--hc) 40%, transparent),
    0 0 10px 2px color-mix(in srgb, var(--hc) 55%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.6);
  transition:
    box-shadow 0.25s ease,
    transform 0.15s ease;
}
/* idle radar pulse so each marker reads on the painted map */
.hot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--hc) 55%, transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hot::before {
    animation: hotPulse 2.4s ease-out infinite;
  }
}
@keyframes hotPulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hc) 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 15px color-mix(in srgb, var(--hc) 0%, transparent);
  }
}
.hot::after {
  content: attr(data-nm);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  color: var(--text);
  background: var(--bar);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
/* Deep Sea sits low on the map — render its label above the marker so it
   isn't clipped by the map's bottom edge (the map clips overflow). */
.hot[data-nm="Deep Sea"]::after {
  top: auto;
  bottom: calc(100% + 8px);
}
.hot:hover,
.hot:focus-visible,
.hot.active {
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--hc) 32%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.5);
  outline: none;
}
.hot:hover::after,
.hot:focus-visible::after,
.hot.active::after {
  opacity: 1;
}

/* region dossier that reacts to the map */
.dossier-live {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.dossier-live .rlabel {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
/* prev/next region stepper flanking the dossier header */
.d-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.d-arrow {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--faint);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.d-arrow:hover,
.d-arrow:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--bar);
  outline: none;
}
.dossier-live .r-name {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  margin: 6px 0 2px;
  transition: color 0.2s ease;
}
.dossier-live .r-range {
  font-size: 15px;
  color: var(--muted);
}
.dossier-live .d-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 18px 0;
}
.d-fk {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
}
.d-foes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.d-mon {
  display: flex;
  align-items: center;
  gap: 12px;
}
.d-mon-art {
  width: 48px;
  height: 48px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.d-mon-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.d-mon-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.d-mon-lvl {
  font-size: 12px;
  color: var(--muted);
}
.d-mon .weak-chip {
  margin-top: 0;
  flex: none;
}
.d-hint {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12.5px;
  color: var(--faint);
}

/* weakness chip — neutral by default, gold when a real weakness exists */
.weak-chip {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  color: var(--muted);
  background: var(--inset);
  border: 1px solid var(--border-soft);
}
/* per-style weakness chips — melee red, ranged green, magic blue, matching
   the archetype-card accents used elsewhere on the page */
.weak-chip.melee,
.weak-chip.ranged,
.weak-chip.magic {
  color: var(--wc);
  border-color: color-mix(in srgb, var(--wc) 55%, var(--border));
  background: color-mix(in srgb, var(--wc) 16%, var(--inset));
}
.weak-chip.melee {
  --wc: #b25844;
}
.weak-chip.ranged {
  --wc: #6ea24b;
}
.weak-chip.magic {
  --wc: #4f83c4;
}

/* combat mechanic notes — the ◆ blurbs, laid across a row */
.checks.combat-notes {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 34px;
}
.checks.combat-notes li {
  flex: 1 1 240px;
}

/* fine-print — a <details> wrapper around each section's ◆ notes. On desktop
   the summary is hidden and the list renders as before; below 900px it
   becomes a tap-to-expand row (main.js closes it on load for small screens) */
.fine-print > summary {
  display: none;
}

.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
  margin-top: 36px;
}
.checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.checks li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.checks .ck {
  color: var(--accent);
  flex: none;
  margin-top: 3px;
}
.checks b {
  font-weight: 700;
}
.checks span {
  color: var(--muted);
  font-size: 16px;
}

/* ===== ARCHETYPES — five mastery-page cards, one accent each ===== */
.arch-grid {
  display: grid;
  /* minmax(0) keeps the five tracks equal; the card interior is sized so
     the longest tree name (Marksmanship) fits every column on one line */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.arch-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--ac, var(--accent));
  border-radius: 12px;
  padding: 18px 14px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 10px;
  align-items: center;
}
.arch-art {
  position: relative;
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  background: var(--track);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.arch-art::before {
  /* the tree's accent aura, matching the itemization tile */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    closest-side at 50% 50%,
    var(--ac, var(--accent)),
    transparent 74%
  );
  opacity: 0.22;
}
.arch-art img {
  position: relative;
  width: 80%;
  height: auto;
  image-rendering: pixelated;
}
.arch-card .arch-role {
  grid-column: 2;
  align-self: end;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac, var(--accent));
}
.arch-card h3 {
  grid-column: 2;
  align-self: start;
  font-size: 17px;
  white-space: nowrap;
}
.arch-card > p {
  grid-column: 1 / -1;
  align-self: start;
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}
.arch-card .arch-cap {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
}
.arch-skill-tabs {
  grid-row: 1 / span 2;
  display: flex;
  gap: 6px;
}
.arch-skill-tab {
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
  transition:
    opacity 0.15s,
    border-color 0.15s;
}
.arch-skill-tab:hover {
  opacity: 0.85;
}
.arch-skill-tab[aria-selected="true"] {
  opacity: 1;
  border-color: var(--ac, var(--accent));
}
.arch-skill-tab img {
  display: block;
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
}
.arch-cap-label {
  align-self: end;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac, var(--accent));
}
.arch-cap-name {
  align-self: start;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  /* reserve two lines so 1-line names ("Whirlwind") and 2-line names
     ("Righteous Flame") give every card's .arch-cap the same height,
     keeping the separator aligned across the row */
  line-height: 1.25;
  min-height: calc(1.25em * 2);
}
.arch-cap-desc {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  /* room for 3 lines so toggling a 2-line vs 3-line ability doesn't
     resize the equal-height card row */
  min-height: calc(1.45em * 3);
}
@media (min-width: 901px) {
  /* in the narrow desktop columns the longest description (Righteous
     Flame) runs to 4 lines — reserve that everywhere so every card's
     separator sits on the same line; the ≤900px swipe row keeps the
     3-line reservation since its wider cards never reach 4 */
  .arch-cap-desc {
    min-height: calc(1.45em * 4);
  }
}

.arch-more {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}
.arch-more .pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
  margin-right: 5px;
  vertical-align: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .arch-more .pulse {
    animation: pulse 2.4s infinite;
  }
}
.arch-more a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== ITEMIZATION SHOWCASE — one oversized "inspect" card, its whole
   frame tinted by the rarity of the item on display ===== */
.rar-common {
  --rc: var(--rar-common);
}
.rar-uncommon {
  --rc: var(--rar-uncommon);
}
.rar-rare {
  --rc: var(--rar-rare);
}
.rar-epic {
  --rc: var(--rar-epic);
}
.rar-legendary {
  --rc: var(--rar-legendary);
}
.rar-mythic {
  --rc: var(--rar-mythic);
}
.loot-show {
  max-width: 900px;
  margin: 32px auto 0;
}
/* the rarity picker is one joined bar; every segment carries a strip of its
   own colour along the bottom edge so the grey → crimson ramp always reads,
   and the open tier lights up and tints toward the card below it */
.rar-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}
.rar-tab {
  position: relative;
  padding: 10px 6px 12px;
  border: 0;
  border-left: 1px solid var(--border-soft);
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition:
    color 0.25s ease,
    background 0.25s ease;
}
.rar-tab:first-child {
  border-left: 0;
}
.rar-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--rc);
  opacity: 0.5;
  transition:
    opacity 0.25s ease,
    height 0.25s ease,
    box-shadow 0.25s ease;
}
.rar-tab:hover {
  color: var(--text);
}
.rar-tab:hover::after {
  opacity: 1;
}
.rar-tab[aria-selected="true"] {
  color: var(--rc);
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--rc) 22%, transparent),
      transparent 75%
    ),
    var(--panel-2);
}
.rar-tab[aria-selected="true"]::after {
  opacity: 1;
  height: 4px;
  box-shadow: 0 0 12px var(--rc);
}
.item-showcase {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--rc) 45%, var(--border));
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 26px 70px -34px color-mix(in srgb, var(--rc) 55%, transparent);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.show-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
}
.show-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  background: var(--track);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
}
.show-art::before {
  /* the rarity aura behind the item */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    closest-side at 50% 50%,
    var(--rc),
    transparent 74%
  );
  opacity: 0.24;
  transition: background 0.4s ease;
}
.show-art img {
  position: relative;
  width: 78%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}
.show-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.show-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 26px 20px;
}
.show-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc, var(--accent));
}
.show-stats h3 {
  font-size: 23px;
}
.show-flavor {
  color: var(--muted);
  font-style: italic;
  font-size: 15px;
}
.show-base {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 26px;
}
.show-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 15px;
}
.show-label {
  color: var(--muted);
}
.show-val {
  font-weight: 700;
  color: var(--text);
}
.show-val.neg {
  color: #c96a55;
}
.show-rolls {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--rc) 30%, var(--border));
  background: color-mix(in srgb, var(--rc) 7%, var(--inset));
}
.show-rolls-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.show-rolls-h i {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--faint);
}
.show-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.show-chip {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}
.show-chip.pri {
  border-color: color-mix(in srgb, var(--rc) 55%, transparent);
  color: var(--rc);
  font-weight: 700;
}
.show-req {
  padding-top: 10px;
  color: var(--faint);
  font-size: 14px;
}
@media (prefers-reduced-motion: no-preference) {
  .item-showcase.swap .show-stats {
    animation: showSwap 0.45s ease;
  }
}
@keyframes showSwap {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.rar-key {
  margin-top: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}
.rar-key b {
  color: var(--text);
}
.rar-key-hl {
  color: var(--gold);
  font-weight: 700;
}

/* roadmap — a glow field behind punchier "coming soon" cards */
.roadmap {
  position: relative;
  overflow: hidden;
}
.roadmap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% -6%, var(--glow), transparent 62%);
}
.roadmap .wrap {
  position: relative;
  z-index: 1;
}
.roadmap .grid3 {
  margin-top: 34px;
}
.road2 {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 22px 24px;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.road2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.road2::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--glow), transparent 70%);
  pointer-events: none;
}
.road2:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.9);
}
.road2 .ri {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--gold);
  margin-bottom: 16px;
}
.road2 .ri img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.road2 .tag2 {
  position: absolute;
  top: 20px;
  right: 18px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.road2 .tag2 .pulse {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 0 var(--gold);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 70%, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.road2 h3 {
  font-size: 21px;
  color: var(--text);
}
.road2 p {
  margin-top: 8px;
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* roadmap minor tier — quieter cards under the big three */
.road-minor-head {
  margin-top: 44px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.roadmap .grid4 {
  margin-top: 14px;
}
.road3 {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px 16px;
  transition: border-color 0.2s ease;
}
.road3:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.road3 .tag3 {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 12px;
}
.road3 h3 {
  font-size: 16px;
  color: var(--text);
}
.road3 p {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* final CTA */
.final {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 96px 0 100px;
  border-bottom: 1px solid var(--border-soft);
}
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 90% at 50% 0%, var(--glow), transparent 65%);
}
.final-in {
  position: relative;
  z-index: 1;
}
.final h2 {
  font-size: clamp(32px, 4.6vw, 52px);
}
.final p {
  color: var(--muted);
  font-size: 19px;
  margin: 18px auto 0;
  max-width: 40ch;
}
.final .cta-row {
  justify-content: center;
  margin-top: 34px;
}
.final .note {
  font-size: 13px;
  color: var(--faint);
  letter-spacing: 0.06em;
  margin-top: 18px;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- LEGAL PAGES (terms / privacy) ---------- */
.legal {
  max-width: 760px;
  padding-top: 56px;
  padding-bottom: 72px;
}
.legal .eyebrow {
  margin-bottom: 14px;
}
.legal h1 {
  font-size: clamp(32px, 4.4vw, 46px);
}
.legal .updated {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
}
.legal .disclaimer {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--muted);
  font-size: 16px;
}
.legal h2 {
  font-size: clamp(21px, 2.6vw, 27px);
  margin-top: 44px;
}
.legal p,
.legal li {
  margin-top: 14px;
  color: var(--muted);
  font-size: 17px;
}
.legal p b,
.legal li b {
  color: var(--text);
  font-weight: 700;
}
.legal ul {
  margin: 14px 0 0;
  padding-left: 22px;
}
.legal li {
  margin-top: 8px;
}
.legal a.inline {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a.inline:hover {
  color: var(--accent);
}

/* footer */
footer {
  padding: 40px 0 60px;
  border-top: 1px solid var(--border-soft);
}
.foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.foot .brand {
  font-size: 18px;
}
.foot .links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 14px;
  color: var(--muted);
}
.foot .links a:hover {
  color: var(--gold);
}
.copy {
  margin-top: 20px;
  font-size: 13px;
  color: var(--faint);
}

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (max-width: 1120px) {
  /* five-across can't hold single-line tree names on narrow desktops —
     fall back to a 3+2 grid until the 900px swipe row takes over */
  .arch-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* four minor roadmap cards get too narrow — 2x2 until the swipe row */
  .grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .hero-in {
    /* flex column so the store badges can be reordered below the phone;
       gap:0 keeps the copy's own margin-based spacing intact */
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 56px;
    padding-bottom: 36px;
  }
  section.pillar {
    padding: 56px 0;
  }
  /* dissolve the copy wrapper so its children (incl. .stores) become
     direct flex items of .hero-in and can be reordered independently */
  .hero-copy {
    display: contents;
  }
  .phone-stage {
    order: 1;
    margin-top: 40px;
  }
  .hero .stores {
    order: 2;
    margin-top: 30px;
    margin-bottom: 26px;
    justify-content: center;
  }
  .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* card grids become edge-bleed swipe rows — one viewport-height per
     section instead of a long single-column stack. The sliver of the next
     card peeking in from the right is the swipe affordance. */
  .grid3,
  .grid4,
  .arch-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    margin-left: calc(-1 * var(--wrap-pad));
    margin-right: calc(-1 * var(--wrap-pad));
    padding-left: var(--wrap-pad);
    padding-right: var(--wrap-pad);
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--wrap-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .grid3::-webkit-scrollbar,
  .grid4::-webkit-scrollbar,
  .arch-grid::-webkit-scrollbar {
    display: none;
  }
  .grid3 > *,
  .grid4 > *,
  .arch-grid > * {
    flex: 0 0 min(78%, 300px);
    scroll-snap-align: start;
  }
  .grid4 > * {
    flex: 0 0 min(64%, 240px);
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px 20px 12px;
    /* solid — a nested backdrop-filter under .nav's doesn't apply, so a
       translucent panel would let the page bleed through */
    background: var(--bar);
    border-bottom: 1px solid var(--border-soft);
    font-size: 16px;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    padding: 12px 0;
  }
  .nav-links a + a {
    border-top: 1px solid var(--border-soft);
  }
  .nav-burger {
    display: inline-flex;
  }
  .nav-tools {
    margin-left: auto;
  }
  .nav-discord {
    padding: 11px;
  }
  .nav-discord-label {
    display: none;
  }
  .iconwall {
    grid-template-columns: repeat(4, 1fr);
  }
  .iconwall.compact {
    grid-template-columns: repeat(6, 1fr);
  }
  .atlas {
    grid-template-columns: 1fr;
  }
  /* the bar wraps to two rows of three; re-draw the seams for the grid */
  .rar-tabs {
    grid-template-columns: repeat(3, 1fr);
  }
  .rar-tab {
    border-top: 1px solid var(--border-soft);
  }
  .rar-tab:nth-child(-n + 3) {
    border-top: 0;
  }
  .rar-tab:nth-child(4) {
    border-left: 0;
  }
  .show-head {
    gap: 14px;
  }
  .show-art {
    width: 96px;
    height: 96px;
    border-radius: 10px;
  }
  .show-art img {
    width: 82%;
  }
  .show-stats {
    padding: 16px 16px 14px;
  }
  .show-stats h3 {
    font-size: 20px;
  }
  .show-base {
    grid-template-columns: 1fr;
  }
  /* the ◆ notes collapse behind a one-line expander */
  .fine-print {
    margin-top: 26px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--inset);
  }
  .fine-print > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
  }
  .fine-print > summary::-webkit-details-marker {
    display: none;
  }
  .fine-print > summary::after {
    content: "▾";
    color: var(--faint);
    transition: transform 0.2s ease;
  }
  .fine-print[open] > summary {
    color: var(--text);
  }
  .fine-print[open] > summary::after {
    transform: rotate(180deg);
  }
  .fine-print .checks.combat-notes {
    margin-top: 0;
    padding: 2px 16px 16px;
    flex-direction: column;
    gap: 16px;
  }
  /* the row layout's 240px flex-basis would become a 240px HEIGHT per
     bullet once the list turns into a column */
  .fine-print .checks.combat-notes li {
    flex: none;
  }
}
@media (max-width: 560px) {
  :root {
    --wrap-pad: 20px;
  }
  body {
    font-size: 17px;
  }
  /* the "Scout a region" hint crowds the shrunken map on phones */
  .maphint {
    display: none;
  }
  /* the region label reads oversized against the shrunken map */
  .hot::after {
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 5px;
  }
  .iconwall {
    grid-template-columns: repeat(3, 1fr);
  }
  .iconwall.compact {
    grid-template-columns: repeat(4, 1fr);
  }
  .foot .links {
    margin-left: 0;
    width: 100%;
  }
  /* the header can't fit brand + Discord + Play + burger on phones —
     the Discord link moves into the burger dropdown instead */
  .nav-discord {
    display: none;
  }
  .nav-links .nav-discord-mobile {
    display: block;
  }
  .nav-in {
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .slide {
    transition: none;
  }
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .road2 .tag2 .pulse {
    animation: none;
  }
  * {
    transition-duration: 0.001s !important;
  }
}