/* ═══════════════════════════════════════════════════════════════
   PSEUDO-COMPONENTS
   Every block below is a self-contained, composable unit named
   `c-*`. Each one owns its local custom properties and draws all
   of its ornament with ::before / ::after — no images, no extra
   markup, no framework.
   ═══════════════════════════════════════════════════════════ */

/* ── c-skip ────────────────────────────────────────────────── */
.c-skip {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-skip);
  padding: 0.7rem 1.1rem;
  background: var(--gold-400);
  color: var(--void-950);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  translate: 0 -160%;
  transition: translate var(--dur-2) var(--ease);
}
.c-skip:focus { translate: 0 0; }

/* ── c-ico ─────────────────────────────────────────────────── */
.c-ico {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  overflow: visible;
}
.c-ico--xs { width: 1rem; height: 1rem; }
.c-ico--lg { width: 2rem; height: 2rem; }

/* ── c-btn ─────────────────────────────────────────────────── */
.c-btn {
  --btn-bg: color-mix(in oklab, var(--void-700) 80%, transparent);
  --btn-fg: var(--text-hi);
  --btn-edge: var(--line);
  --btn-glow: transparent;
  --btn-cut: 10px;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  overflow: hidden;

  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--btn-fg);

  background: var(--btn-bg);
  border: 1px solid var(--btn-edge);
  clip-path: polygon(var(--btn-cut) 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%, 0 var(--btn-cut));
  box-shadow: var(--btn-glow);
  transition: translate var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
/* shimmer sweep */
.c-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .22), transparent);
  translate: -40% 0;
  transition: translate var(--dur-4) var(--ease-out);
}
.c-btn:hover { translate: 0 -2px; }
.c-btn:hover::after { translate: 460% 0; }
.c-btn:active { translate: 0 0; }

.c-btn--primary {
  --btn-fg: var(--accent-ink);
  --btn-edge: color-mix(in oklab, var(--ember-300) 55%, transparent);
  --btn-glow: 0 10px 28px -14px var(--ember-500);
  background: var(--grad-ember);
  text-shadow: 0 1px 0 rgb(0 0 0 / .35);
}
.c-btn--primary:hover { --btn-glow: 0 16px 38px -14px var(--ember-400); }

.c-btn--gold {
  --btn-fg: var(--gold-300);
  --btn-edge: color-mix(in oklab, var(--gold-500) 70%, transparent);
  --btn-bg: color-mix(in oklab, var(--gold-600) 12%, transparent);
}
.c-btn--gold:hover {
  --btn-bg: color-mix(in oklab, var(--gold-600) 24%, transparent);
  --btn-glow: 0 14px 34px -18px var(--gold-500);
}

.c-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-dim);
  --btn-edge: var(--line);
}
.c-btn--ghost:hover { --btn-fg: var(--text-hi); --btn-edge: var(--line-strong); }

.c-btn--sm { min-height: 38px; padding: 0.45rem 0.85rem; font-size: var(--fs-300); --btn-cut: 8px; }
.c-btn--lg { min-height: 54px; padding: 1rem 1.6rem; font-size: var(--fs-500); --btn-cut: 13px; }
.c-btn--block { width: 100%; }

/* ── c-eyebrow ─────────────────────────────────────────────── */
.c-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gold-400);
}
.c-eyebrow::before,
.c-eyebrow::after {
  content: "";
  height: 1px;
  width: clamp(1.25rem, 6vw, 2.5rem);
  flex: none;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}
.c-eyebrow::after { display: none; }
.c-eyebrow--center { justify-content: center; text-align: center; }
.c-eyebrow--center::after { display: block; background: linear-gradient(90deg, var(--gold-500), transparent); }

/* ── c-title / c-lede / c-sectionhead ──────────────────────── */
.c-title { font-size: var(--fs-700); font-weight: 900; }
.c-title--xl { font-size: var(--fs-800); }

.c-lede {
  margin-top: var(--sp-4);
  max-width: 58ch;
  font-size: var(--fs-500);
  color: var(--text-dim);
}
.c-lede--center { margin-inline: auto; text-align: center; }

.c-sectionhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--stack);
}
.c-sectionhead .c-lede { text-align: center; }
/* a centred head always gets both rules on its eyebrow */
.c-sectionhead .c-eyebrow::after {
  display: block;
  background: linear-gradient(90deg, var(--gold-500), transparent);
}

.c-sectionfoot { margin-top: var(--stack); text-align: center; }

.c-note {
  padding: var(--sp-4);
  border: 1px dashed var(--line);
  color: var(--text-mute);
  text-align: center;
}

/* ── c-panel — the framed RPG surface ──────────────────────── */
.c-panel {
  position: relative;
  isolation: isolate;
  padding: var(--sp-5);
  background: var(--grad-edge);
  clip-path: var(--cut);
  transition: translate var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.c-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--cut);
  background-color: var(--surface-solid);
  background-image: var(--noise), var(--grad-panel);
  background-size: 160px 160px, cover;
  background-blend-mode: soft-light, normal;
}
/* the gold corner brackets: four L shapes, eight gradient layers */
.c-panel--frame::after {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  --bw: 1px;
  --bl: 15px;
  --bc: color-mix(in oklab, var(--rarity) 72%, transparent);
  background-image:
    linear-gradient(var(--bc) 0 0), linear-gradient(var(--bc) 0 0),
    linear-gradient(var(--bc) 0 0), linear-gradient(var(--bc) 0 0),
    linear-gradient(var(--bc) 0 0), linear-gradient(var(--bc) 0 0),
    linear-gradient(var(--bc) 0 0), linear-gradient(var(--bc) 0 0);
  background-repeat: no-repeat;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-size:
    var(--bl) var(--bw), var(--bw) var(--bl),
    var(--bl) var(--bw), var(--bw) var(--bl),
    var(--bl) var(--bw), var(--bw) var(--bl),
    var(--bl) var(--bw), var(--bw) var(--bl);
  transition: opacity var(--dur-3) var(--ease);
  opacity: .8;
}

/* ── c-rune — icon badge ───────────────────────────────────── */
.c-rune {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  color: var(--gold-400);
  background: linear-gradient(150deg, color-mix(in oklab, var(--gold-600) 26%, transparent), transparent 70%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.c-rune::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--void-850);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  z-index: -1;
}
.c-rune::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid color-mix(in oklab, var(--gold-500) 30%, transparent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}

/* ── c-tag ─────────────────────────────────────────────────── */
.c-tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-50);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--rarity) 82%, white);
  background: color-mix(in oklab, var(--rarity) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--rarity) 38%, transparent);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* ── c-status ──────────────────────────────────────────────── */
.c-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.c-status strong { font-weight: 600; color: var(--text); }
.c-status__dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--venom-400);
  box-shadow: 0 0 10px var(--venom-400);
}
.c-status__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--venom-400);
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0%   { opacity: .8; scale: .6; }
  70%  { opacity: 0;  scale: 1.5; }
  100% { opacity: 0;  scale: 1.5; }
}

/* ── c-ticker ──────────────────────────────────────────────── */
.c-ticker {
  position: relative;
  overflow: hidden;
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.c-ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 42s linear infinite;
}
.c-ticker:hover .c-ticker__track,
.c-ticker:focus-within .c-ticker__track { animation-play-state: paused; }
.c-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  padding-right: 1.25rem;
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}
.c-ticker__sep {
  width: 5px;
  height: 5px;
  flex: none;
  rotate: 45deg;
  background: var(--gold-500);
}
@keyframes ticker { to { translate: -50% 0; } }

/* ── c-wordmark ────────────────────────────────────────────── */
.c-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.c-wordmark__crest {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  color: var(--gold-400);
  background: linear-gradient(160deg, color-mix(in oklab, var(--ember-600) 60%, transparent), color-mix(in oklab, var(--void-700) 90%, transparent));
  border: 1px solid color-mix(in oklab, var(--gold-500) 45%, transparent);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  transition: box-shadow var(--dur-2) var(--ease);
}
.c-wordmark:hover .c-wordmark__crest { box-shadow: 0 0 18px -4px var(--gold-500); }
.c-wordmark__text { display: grid; line-height: 1; }
.c-wordmark__sup {
  font-family: var(--font-ui);
  font-size: var(--fs-50);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-mute);
}
.c-wordmark__main {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── c-nav — off-canvas on phones, inline from lg ──────────── */
.c-nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-nav);
  width: min(20rem, 86vw);
  padding: calc(var(--header-h) + var(--sp-6)) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--void-900);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 60px -30px #000;
  translate: 100% 0;
  visibility: hidden;
  transition: translate var(--dur-3) var(--ease-out), visibility var(--dur-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.c-nav::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-600), transparent);
  opacity: .7;
}
.nav-open .c-nav { translate: 0 0; visibility: visible; }
.nav-open { overflow: hidden; }   /* scroll lock while the drawer is open */

.c-nav__list { display: grid; gap: 0.25rem; }
.c-nav__link {
  position: relative;
  display: block;
  padding: 0.85rem 0.25rem 0.85rem 1.1rem;
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line-soft);
  transition: color var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
}
.c-nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  translate: 0 -50%;
  rotate: 45deg;
  background: var(--gold-500);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.c-nav__link:hover { color: var(--text-hi); }
.c-nav__link:hover::before { opacity: 1; }
.c-nav__cta { display: grid; gap: var(--sp-3); margin-top: auto; }

/* ── c-burger ──────────────────────────────────────────────── */
.c-burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--text);
  border: 1px solid var(--line);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.c-burger__i { grid-area: 1 / 1; transition: opacity var(--dur-2) var(--ease), rotate var(--dur-2) var(--ease); }
.c-burger__i--close { opacity: 0; rotate: -45deg; }
.nav-open .c-burger__i--open { opacity: 0; rotate: 45deg; }
.nav-open .c-burger__i--close { opacity: 1; rotate: 0deg; }

/* ── c-scrim ───────────────────────────────────────────────── */
.c-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgb(2 3 8 / .72);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease);
}
.nav-open .c-scrim { opacity: 1; pointer-events: auto; }

/* ── c-statbar / c-stat ────────────────────────────────────── */
.c-statbar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: var(--sp-7);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  clip-path: var(--cut-both);
}
.c-stat {
  display: grid;
  gap: 0.2rem;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  background: color-mix(in oklab, var(--void-900) 86%, transparent);
}
.c-stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 5vw, 2rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-stat__label {
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ── c-rail — snap carousel on phones, grid from md ────────── */
.c-rail { margin-inline: calc(var(--gutter) * -1); }
.c-rail__track {
  grid-auto-flow: column;
  grid-auto-columns: min(18rem, 80vw);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: 0.5rem 1.25rem;
}
.c-rail__track > * { scroll-snap-align: start; }
.c-rail__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-mute);
}
.c-rail__hint .c-ico { animation: nudge 1.9s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* ── c-card--class ─────────────────────────────────────────── */
.c-card--class {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding-top: var(--sp-6);
}
.c-card--class:hover,
.c-card--class:focus-within { translate: 0 -5px; box-shadow: var(--glow-rarity); }
.c-card--class:hover::after { opacity: 1; }

.c-card__rarity {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.3rem 0.85rem 0.3rem 1.4rem;
  font-family: var(--font-ui);
  font-size: var(--fs-50);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--void-950);
  background: color-mix(in oklab, var(--rarity) 88%, white 4%);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
}
.c-card__sigil {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--rarity);
  background: radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--rarity) 26%, transparent), transparent 68%);
  transition: scale var(--dur-3) var(--ease-out);
}
.c-card__sigil::before,
.c-card__sigil::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklab, var(--rarity) 45%, transparent);
  rotate: 45deg;
}
.c-card__sigil::after { inset: 6px; opacity: .45; rotate: 0deg; }
.c-card--class:hover .c-card__sigil { scale: 1.07; }

.c-card__name { font-size: var(--fs-600); font-weight: 700; letter-spacing: .01em; }
.c-card__role {
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--rarity) 80%, white);
  margin-top: -0.35rem;
}
.c-card__text { font-size: var(--fs-300); color: var(--text-mute); }
.c-card__foot { margin-top: 0.25rem; }

/* ── c-meter ───────────────────────────────────────────────── */
.c-meters { display: grid; gap: 0.5rem; margin-top: 0.35rem; }
.c-meter { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 0.6rem; }
.c-meter dt {
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.c-meter dd { display: grid; grid-template-columns: 1fr 1.75rem; align-items: center; gap: 0.55rem; margin: 0; }
.c-meter__track {
  position: relative;
  display: block;
  height: 7px;
  overflow: hidden;
  background: color-mix(in oklab, var(--void-600) 85%, transparent);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.c-meter__track::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  background: linear-gradient(90deg, color-mix(in oklab, var(--rarity) 55%, var(--ember-600)), var(--rarity));
  box-shadow: 0 0 12px -2px var(--rarity);
  transition: width 1.1s var(--ease-out);
}
.c-meter__track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgb(0 0 0 / .5) 7px 8px);
}
.c-meter b {
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  text-align: right;
}
/* Meters inside a reveal container fill as it scrolls into view; meters
   anywhere else (the register page's character sheet) fill immediately. */
.js [data-reveal] .c-meter__track::before { width: 0; }
.js [data-reveal].is-in .c-meter__track::before { width: var(--fill, 0%); }

/* ── c-feature ─────────────────────────────────────────────── */
.c-feature { display: grid; gap: 0.75rem; align-content: start; }
.c-feature:hover { translate: 0 -4px; box-shadow: var(--sh-3); }
.c-feature:hover .c-rune::after { opacity: 1; }
.c-feature__title { font-size: var(--fs-600); }
.c-feature__text { font-size: var(--fs-300); color: var(--text-mute); }

/* ── c-world ───────────────────────────────────────────────── */
.c-world {
  position: relative;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--line-soft);
  clip-path: var(--cut);
  transition: translate var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
}
.c-world:hover { translate: 0 -4px; border-color: var(--line-strong); }
.c-world__art {
  position: relative;
  height: 9rem;
  overflow: hidden;
  background: linear-gradient(175deg, var(--w-a, var(--arcane-500)) 0%, var(--w-b, var(--void-900)) 88%);
}
.c-world__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 160px 160px;
  opacity: .18;
  mix-blend-mode: overlay;
}
.c-world__glow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 13rem;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / .55), transparent 60%);
  filter: blur(8px);
}
.c-world__ridge { position: absolute; inset: auto 0 0 0; }
.c-world__ridge--far {
  height: 74%;
  opacity: .6;
  background: color-mix(in oklab, var(--void-950) 62%, var(--w-b, #000));
  clip-path: polygon(0 62%, 12% 38%, 24% 56%, 38% 20%, 52% 48%, 66% 28%, 80% 52%, 92% 34%, 100% 54%, 100% 100%, 0 100%);
}
.c-world__ridge--near {
  height: 48%;
  background: var(--void-950);
  clip-path: polygon(0 70%, 14% 46%, 30% 66%, 46% 32%, 60% 58%, 74% 38%, 88% 62%, 100% 44%, 100% 100%, 0 100%);
}
.c-world__body { display: grid; gap: 0.4rem; padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.c-world__level {
  font-family: var(--font-ui);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-400);
}
.c-world__name { font-size: var(--fs-600); }
.c-world__text { font-size: var(--fs-300); color: var(--text-mute); }
.c-world__boss {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blood-400);
}

/* ── c-rank ────────────────────────────────────────────────── */
/* flex column so the CTA can be pinned to the bottom of every card,
   whatever the perk list length */
.c-rank {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: var(--sp-6);
}
.c-rank:hover { translate: 0 -4px; box-shadow: var(--glow-rarity); }
.c-rank[data-featured="true"] { box-shadow: var(--glow-rarity); }
.c-rank[data-featured="true"]::after { opacity: 1; }
.c-rank__flag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.3rem 1.4rem 0.3rem 0.85rem;
  font-family: var(--font-ui);
  font-size: var(--fs-50);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--void-950);
  background: color-mix(in oklab, var(--rarity) 90%, white 5%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.c-rank__name {
  font-size: var(--fs-600);
  color: color-mix(in oklab, var(--rarity) 72%, var(--parchment));
}
.c-rank__price { display: flex; align-items: baseline; gap: 0.35rem; }
.c-rank__price b {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  font-weight: 900;
  line-height: 1;
  color: var(--text-hi);
}
.c-rank__price span {
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.c-rank__text { font-size: var(--fs-300); color: var(--text-mute); }
.c-rank__perks {
  display: grid;
  gap: 0.5rem;
  margin: 0.4rem 0 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-300);
}
.c-rank__perks li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.6rem; align-items: start; color: var(--text-dim); }
.c-rank__perks .c-ico { margin-top: 0.3rem; color: color-mix(in oklab, var(--rarity) 80%, white); }
.c-rank .c-btn { margin-top: auto; }

/* ── c-timeline ────────────────────────────────────────────── */
.c-timeline { position: relative; display: grid; gap: var(--sp-5); padding-left: 1.75rem; }
.c-timeline::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line), var(--line), transparent);
}
.c-timeline__node { position: relative; }
.c-timeline__node::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.45rem;
  width: 0.9375rem;
  height: 0.9375rem;
  rotate: 45deg;
  background: var(--void-900);
  border: 1px solid var(--line-strong);
}
.c-timeline__node::after {
  content: "";
  position: absolute;
  left: -1.4375rem;
  top: 0.7rem;
  width: 0.4375rem;
  height: 0.4375rem;
  rotate: 45deg;
  background: var(--gold-400);
  box-shadow: 0 0 10px var(--gold-500);
}
.c-timeline__node[data-state="live"]::after {
  background: var(--ember-400);
  box-shadow: 0 0 14px var(--ember-400);
  animation: pulse-dot 1.8s var(--ease) infinite;
}
.c-timeline__node[data-state="soon"]::after { background: var(--steel-300); box-shadow: none; }
@keyframes pulse-dot { 0%, 100% { scale: 1; } 50% { scale: 1.5; } }

.c-timeline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.c-timeline__date {
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-mute);
}
.c-timeline__badge {
  padding: 0.15rem 0.55rem;
  font-family: var(--font-ui);
  font-size: var(--fs-50);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-300);
  border: 1px solid color-mix(in oklab, var(--gold-500) 40%, transparent);
}
.c-timeline__node[data-state="live"] .c-timeline__badge {
  color: var(--ember-300);
  border-color: color-mix(in oklab, var(--ember-400) 50%, transparent);
  background: color-mix(in oklab, var(--ember-600) 16%, transparent);
}
.c-timeline__body { padding: var(--sp-4) var(--sp-5); }
.c-timeline__title { font-size: var(--fs-600); }
.c-timeline__text { margin-top: 0.35rem; font-size: var(--fs-300); color: var(--text-mute); }

/* ── c-quote ───────────────────────────────────────────────── */
.c-quote { display: grid; gap: 0.75rem; align-content: start; padding-top: var(--sp-6); }
.c-quote__mark {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--gold-500);
  opacity: .22;
}
.c-quote__stars { font-size: var(--fs-300); letter-spacing: 0.2em; color: var(--gold-400); }
.c-quote__text { font-size: var(--fs-400); color: var(--text-dim); font-style: italic; }
.c-quote__by { display: grid; gap: 0.1rem; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); }
.c-quote__by b { font-family: var(--font-display); font-size: var(--fs-300); color: var(--text-hi); }
.c-quote__by span {
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ── c-social ──────────────────────────────────────────────── */
.c-social { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.c-social__link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--text-mute);
  border: 1px solid var(--line);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.c-social__link:hover {
  color: var(--gold-300);
  border-color: var(--line-strong);
  background: color-mix(in oklab, var(--gold-600) 14%, transparent);
}

/* ── c-field ───────────────────────────────────────────────── */
.c-field { display: grid; gap: 0.4rem; text-align: left; }
.c-field__label {
  font-family: var(--font-ui);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-mute);
}
.c-field__input {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  font-size: var(--fs-500);
  color: var(--text-hi);
  background: color-mix(in oklab, var(--void-950) 70%, transparent);
  border: 1px solid var(--line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.c-field__input::placeholder { color: color-mix(in oklab, var(--mist-300) 62%, transparent); }
.c-field__input:focus { outline: none; border-color: var(--gold-500); background: color-mix(in oklab, var(--void-950) 45%, transparent); }
.c-field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.c-field__msg { min-height: 1.25rem; font-size: var(--fs-200); color: var(--text-mute); }
.c-field__msg[data-tone="error"] { color: var(--blood-400); }
.c-field__msg[data-tone="ok"] { color: var(--venom-400); }