/* ================================================================
   The Loyalty Vault, bespoke styles for /vault.html only.
   Layers ON TOP of /css/styles.css. Uses the existing CSS variables
   for the gold/dark palette, then introduces vault-specific tokens
   and overrides --font-display / --font-mono to the proper Cinzel
   and JetBrains Mono loaded via Google Fonts in the page head.
   ================================================================ */

/* ----------------------------------------------------------------
   Variables (vault scope)
---------------------------------------------------------------- */
.vault-page {
  /* Override site fonts on this page only. Cinzel + JetBrains Mono
     are loaded via Google Fonts in vault.html's head. */
  --font-display: 'Cinzel', 'Georgia', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;

  /* Pack type accents */
  --pack-basic: #b6bcc4;
  --pack-basic-glow: rgba(182, 188, 196, 0.30);
  --pack-premium: #4a92ff;
  --pack-premium-glow: rgba(74, 146, 255, 0.40);
  --pack-cache: #b66bff;
  --pack-cache-glow: rgba(182, 107, 255, 0.45);
  --pack-vault: #f0c958;
  --pack-vault-glow: rgba(240, 201, 88, 0.55);
  --pack-hoard: #ef4444;
  --pack-hoard-glow: rgba(239, 68, 68, 0.55);

  /* Tier accent (set by JS at runtime). Defaults to gold for unauth state. */
  --tier-color: var(--accent-gold);
  --tier-glow: rgba(201, 162, 39, 0.40);

  /* Vault atmospherics */
  --vault-deep: #050507;
  --vault-mid:  #0d0c12;
  --vault-edge: rgba(201, 162, 39, 0.18);

  /* Residuum (green crystal), used wherever Residuum is shown,
     not just inside .vault-residuum. Hoisted here so the per-tier
     table, the totals crystal, and any future Residuum surface all
     share one source of truth. */
  --res-bright: #4ade80;
  --res-mid:    #22c55e;
  --res-deep:   #166534;
  --res-glow:   rgba(74, 222, 128, 0.55);

  /* Sticky CTA bar accent. Set by /js/vault-page.js as the user scrolls
     between sections. Defaults to gold so the bar always has SOMETHING
     even before the first scrollspy fires. */
  --cta-accent: var(--accent-gold);
  --cta-glow:   rgba(201, 162, 39, 0.45);
}

/* Per-tier color application via body class set by JS */
.vault-page.vault-tier--kobold     { --tier-color: #f59e0b; --tier-glow: rgba(245, 158, 11, 0.45); }
.vault-page.vault-tier--elf        { --tier-color: #22c55e; --tier-glow: rgba(34, 197, 94, 0.45); }
.vault-page.vault-tier--dwarf      { --tier-color: #3b82f6; --tier-glow: rgba(59, 130, 246, 0.45); }
.vault-page.vault-tier--dragonborn { --tier-color: #a855f7; --tier-glow: rgba(168, 85, 247, 0.45); }
.vault-page.vault-tier--demigod    { --tier-color: #ef4444; --tier-glow: rgba(239, 68, 68, 0.50); }

/* ----------------------------------------------------------------
   Page shell. Keeps the magical-background JS effects off the page
   so the vault can manage its own atmosphere.
---------------------------------------------------------------- */
.vault-page {
  background: var(--vault-deep);
  color: var(--text-primary);
  overflow-x: hidden;
}

.vault-main {
  position: relative;
}

/* Section helpers */
.vault-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.vault-section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.vault-section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  padding: 4px 12px;
  border: 1px solid var(--vault-edge);
  border-radius: 2px;
}

.vault-section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

.vault-section-lede {
  font-family: var(--font-body);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  font-style: italic;
}

/* ----------------------------------------------------------------
   SECTION 1, Hero
---------------------------------------------------------------- */
.vault-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height) + 2rem) 1.5rem 3rem;
  overflow: hidden;

  /* Atmospheric background. Tier-glow ellipse hangs around the crest,
     soft dark vignettes top + bottom that resolve to pure --vault-deep
     so the section bleeds seamlessly into the totals section beneath
     (which uses the same --vault-deep base). */
  background:
    radial-gradient(ellipse 75% 55% at 50% 40%, var(--tier-glow) 0%, transparent 70%),
    linear-gradient(180deg,
      rgba(0,0,0,0.35) 0%,
      transparent 18%,
      transparent 70%,
      var(--vault-deep) 100%),
    var(--vault-deep);
}

/* Subtle vignette + grain overlay */
.vault-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.vault-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.vault-hero__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.vault-particle {
  position: absolute;
  bottom: -12px;
  left: var(--pl);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-gold-bright);
  box-shadow: 0 0 8px var(--accent-gold-bright);
  opacity: 0;
  animation: vault-rise var(--pdur, 14s) linear infinite;
  animation-delay: var(--pd, 0s);
}
@keyframes vault-rise {
  0%   { transform: translateY(0)      scale(0.6); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-100vh) scale(1.1); opacity: 0; }
}

.vault-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vault-hero__overline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin: 0 0 1.5rem;
  padding-left: 0.5em;
  opacity: 0.85;
}

.vault-hero__tier {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tier-color);
  text-shadow:
    0 0 20px var(--tier-glow),
    0 0 60px var(--tier-glow),
    0 4px 24px rgba(0,0,0,0.8);
  margin: 0 0 2rem;
  line-height: 1;
}

.vault-hero__crest-stage {
  position: relative;
  width: clamp(280px, 45vw, 440px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0 2.5rem;
}

.vault-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--tier-color);
}
.vault-ring--outer {
  animation: vault-ring-spin 120s linear infinite;
  opacity: 0.55;
}
.vault-ring--inner {
  animation: vault-ring-spin 200s linear infinite reverse;
  opacity: 0.35;
  transform-origin: center;
}
@keyframes vault-ring-spin {
  to { transform: rotate(360deg); }
}

.vault-crest-frame {
  position: relative;
  width: 70%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* (Crest edge fire FX removed - Lewis wasn't a fan of the spinning
   particles around the badge. Crest now relies on the breathing
   drop-shadow + the rotating runic rings only, which feels more
   restrained.) */

.vault-crest {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 24px var(--tier-glow))
    drop-shadow(0 8px 30px rgba(0,0,0,0.7));
  animation: vault-breath 4.5s ease-in-out infinite;
}
@keyframes vault-breath {
  0%, 100% {
    filter: drop-shadow(0 0 24px var(--tier-glow)) drop-shadow(0 8px 30px rgba(0,0,0,0.7));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 56px var(--tier-glow)) drop-shadow(0 8px 30px rgba(0,0,0,0.7));
    transform: scale(1.02);
  }
}

/* Sealed vault icon: hidden by default, shown in unauth/non-patron states */
.vault-sealed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: var(--accent-gold-dim);
  filter: drop-shadow(0 0 18px rgba(201, 162, 39, 0.25));
}

/* In unauth/non-patron states, swap crest for sealed icon */
.vault-page.vault-state-unauth .vault-crest,
.vault-page.vault-state-non-patron .vault-crest {
  display: none;
}
.vault-page.vault-state-unauth .vault-sealed,
.vault-page.vault-state-non-patron .vault-sealed {
  display: block;
}
.vault-page.vault-state-unauth .vault-hero__tier-text,
.vault-page.vault-state-non-patron .vault-hero__tier-text {
  font-style: italic;
  letter-spacing: 0.18em;
}

/* Lapsed: dim the crest */
.vault-page.vault-state-lapsed .vault-crest {
  opacity: 0.55;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,0.12))
    grayscale(0.5);
  animation: none;
}

.vault-hero__tenure {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  color: var(--text-secondary);
  margin: 0 0 0.85rem;
  text-transform: uppercase;
}

/* Live countdown to the next 1st-of-month bundle drop. Ticks every
   second via JS. Hidden in unauth/non-patron states (no tier = no bundle). */
.vault-hero__countdown {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0 0 2rem;
  padding: 0.4em 1em;
  background: rgba(201, 162, 39, 0.06);
  border: 1px solid var(--vault-edge);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.vault-hero__countdown-label {
  opacity: 0.85;
}
.vault-hero__countdown-time {
  color: var(--accent-gold-bright);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(201, 162, 39, 0.35);
}

/* Hide countdown when not eligible */
.vault-page.vault-state-unauth      .vault-hero__countdown,
.vault-page.vault-state-non-patron  .vault-hero__countdown,
.vault-page.vault-state-lapsed      .vault-hero__countdown { display: none; }

/* Brief explainer block - "What is the Loyalty Vault?". Sits between
   countdown + CTA stack. Patron-first, reward-not-pitch framing.
   Always visible regardless of state since cold visitors via Discord
   shares need this context too. */
.vault-hero__explainer {
  max-width: 640px;
  margin: 0 auto 2rem;
  padding: 1.25rem 1.5rem;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(201, 162, 39, 0.06) 0%, transparent 65%),
    rgba(8, 8, 14, 0.5);
  border: 1px solid var(--vault-edge);
  border-radius: 6px;
  text-align: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.vault-hero__explainer-heading {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin: 0 0 0.75rem;
  opacity: 0.9;
}
.vault-hero__explainer-copy {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* CTA stack, only one variant visible per state */
.vault-hero__cta-stack {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  min-height: 3.5rem;
}
.vault-hero__cta {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.vault-page.vault-state-unauth      .vault-hero__cta--unauth,
.vault-page.vault-state-non-patron  .vault-hero__cta--non-patron,
.vault-page.vault-state-lapsed      .vault-hero__cta--lapsed { display: flex; }

.vault-hero__cta-headline {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
}

.vault-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
}
.vault-btn--gold {
  background: linear-gradient(180deg, var(--accent-gold-bright), var(--accent-gold));
  color: #1a1208;
  box-shadow: 0 0 24px var(--tier-glow), 0 6px 24px rgba(0,0,0,0.5);
}
.vault-btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px var(--tier-glow), 0 12px 32px rgba(0,0,0,0.6);
}
.vault-btn--ghost {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}
.vault-btn--ghost:hover {
  background: rgba(201, 162, 39, 0.1);
  color: var(--accent-gold-bright);
}

.vault-hero__scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  z-index: 2;
  animation: vault-cue-bob 2.4s ease-in-out infinite;
  transition: color 0.3s ease;
}
.vault-hero__scroll-cue:hover { color: var(--accent-gold); }
.vault-hero__scroll-cue svg { stroke: currentColor; }

/* Smart positioning: when a state-specific CTA is visible (unauth /
   non-patron / lapsed), drop the cue out of absolute positioning so
   it always flows below the CTA instead of overlapping it on tighter
   viewports. Active-patron state has no CTA, keeps the absolute pin. */
.vault-page.vault-state-unauth      .vault-hero__scroll-cue,
.vault-page.vault-state-non-patron  .vault-hero__scroll-cue,
.vault-page.vault-state-lapsed      .vault-hero__scroll-cue {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  margin-top: 2rem;
}
@keyframes vault-cue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* ----------------------------------------------------------------
   SECTION 2, Totals
---------------------------------------------------------------- */
.vault-totals {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem clamp(1.5rem, 4vw, 4rem) 6rem;
  /* Ensure anchor-scroll (e.g. from "Scroll to begin") lands the
     section's top BELOW the fixed nav, not under it. */
  scroll-margin-top: var(--nav-height);
  /* Top edge picks up a tier-glow ellipse that bleeds down from the
     hero so the section transition feels like one continuous space.
     Base resolves to --vault-deep which matches the hero's bottom. */
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, var(--tier-glow) 0%, transparent 55%),
    var(--vault-deep);
  overflow: hidden;
}
.vault-totals::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 65%,
      rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.vault-totals__inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  z-index: 1;
}

.vault-totals__header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.vault-totals__overline {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 1.5rem;
  opacity: 0.85;
}

.vault-totals__hero-number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(7rem, 22vw, 16rem);
  letter-spacing: -0.02em;
  /* line-height 0.85 was clipping the gradient text-fill (same bug
     as the price block and the MORTALAZUR title). The drop-shadow +
     text-shadow extend outside the line box and crop visually. Lift
     to 1.02 + small horizontal padding for the negative letter-
     spacing's overshoot. */
  line-height: 1.02;
  padding: 0.05em 0.08em;
  margin: 0;
  background: linear-gradient(180deg,
    var(--accent-gold-bright) 0%,
    var(--accent-gold) 45%,
    var(--accent-gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px var(--tier-glow);
  filter: drop-shadow(0 8px 30px rgba(0,0,0,0.5));
}

.vault-totals__hero-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 1rem 0 0;
}

.vault-totals__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 4rem);
  padding-top: clamp(2rem, 4vw, 4rem);
  border-top: 1px solid var(--vault-edge);
}

.vault-totals__subhead {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 1.25rem;
  font-weight: 500;
}

/* Pack list */
.vault-pack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vault-pack-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--vault-edge);
  border-radius: 4px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.vault-pack-item:hover {
  border-color: var(--accent-gold-dim);
  background: rgba(201, 162, 39, 0.05);
}
/* The vault-tt class adds a dotted underline + help cursor by default,
   meant for inline text. Suppress those when applied to a row item -
   the item already has its own hover treatment. */
.vault-pack-item.vault-tt {
  cursor: pointer;
  border-bottom: 1px solid var(--vault-edge);  /* keep border consistent */
}
.vault-pack-item.vault-tt:hover,
.vault-pack-item.vault-tt:focus-visible {
  border-bottom-color: var(--accent-gold-dim);
}

/* Same suppression for the Residuum crystal container - it's a
   block element, not inline text; the dotted underline and help
   cursor would look weird on it. */
.vault-residuum-crystal.vault-tt {
  border-bottom: none;
  cursor: pointer;
}

.vault-pack-item__swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--swatch-color, var(--accent-gold));
  box-shadow: 0 0 12px var(--swatch-glow, var(--tier-glow));
}
.vault-pack-item[data-pack="basic"]   { --swatch-color: var(--pack-basic);   --swatch-glow: var(--pack-basic-glow); }
.vault-pack-item[data-pack="premium"] { --swatch-color: var(--pack-premium); --swatch-glow: var(--pack-premium-glow); }
.vault-pack-item[data-pack="cache"]   { --swatch-color: var(--pack-cache);   --swatch-glow: var(--pack-cache-glow); }
.vault-pack-item[data-pack="vault"]   { --swatch-color: var(--pack-vault);   --swatch-glow: var(--pack-vault-glow); }
.vault-pack-item[data-pack="hoard"]   { --swatch-color: var(--pack-hoard);   --swatch-glow: var(--pack-hoard-glow); }

.vault-pack-item__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.vault-pack-item__qty {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-gold-bright);
  min-width: 3ch;
  text-align: right;
}

/* Residuum crystal, true green ("Residuum is the green crystal").
   Spring/grass green family, NOT emerald (which reads blue-green).
   CSS grid overlap so the readout layers cleanly over the hexagon. */
/* (--res-* palette is hoisted to .vault-page above so it applies to
   the per-tier table residuum column too. Kept this empty rule as a
   marker in case we want to scope-tweak the crystal alone later.) */

.vault-residuum-crystal {
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
  max-width: 380px;       /* widened from 320 for more readout room */
  margin: 0 auto 1rem;
}
.vault-residuum-crystal__shape,
.vault-residuum-crystal__readout {
  grid-area: stack;
}
.vault-residuum-crystal__shape {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 28px var(--res-glow));
}
.vault-residuum-crystal__readout {
  /* Inline-flex shrink-wraps to the number's width. The unit "R" is
     positioned ABSOLUTELY to the right (see .__unit below) so it
     doesn't pull the flex centering off-axis. Result: the number
     itself sits perfectly centered in the hex, with the unit
     overhanging slightly to the right. Old version had the unit in
     the flex flow which made the visual centre of the BIG number sit
     left of the hex centre by ~half-a-unit-width. */
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-self: center;
  line-height: 1;
}
.vault-residuum-crystal__number {
  font-family: var(--font-display);
  font-weight: 600;
  /* Scaled tighter than before so 6-7 char numbers (102,500) sit
     comfortably inside the widened hexagon */
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  color: var(--res-bright);
  text-shadow: 0 0 20px var(--res-glow), 0 0 6px var(--res-bright);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vault-residuum-crystal__unit {
  /* Absolutely positioned to the immediate right of the number so it
     doesn't tug the number off-centre. See .__readout above. */
  position: absolute;
  left: calc(100% + 0.4rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--res-mid);
  opacity: 0.95;
}

/* ----------------------------------------------------------------
   Section XI - Battles cinematic teaser banner.
   Demo screenshot of where the game's visual layer is heading,
   with an honest "first edition will be simpler" disclosure so
   nobody mistakes the cinematic for the launch product.
---------------------------------------------------------------- */
.vault-battles__banner {
  position: relative;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.45);
  box-shadow:
    0 0 50px rgba(201, 162, 39, 0.14),
    0 24px 60px rgba(0, 0, 0, 0.55);
}
.vault-battles__banner-img {
  display: block;
  width: 100%;
  height: auto;
  /* 16:9 matches the demo video native aspect (1920x1080) so it shows
     without cropping. When the asset is a still image, object-fit:
     cover handles any other source aspect cleanly. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}
.vault-battles__banner-caption {
  padding: clamp(1.25rem, 2.5vw, 1.85rem) clamp(1.5rem, 3vw, 2.25rem);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201, 162, 39, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8, 8, 14, 0.96) 0%, var(--bg-card) 100%);
  border-top: 1px solid rgba(201, 162, 39, 0.3);
}
.vault-battles__banner-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-gold);
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 2px;
  margin-bottom: 1rem;
}
.vault-battles__banner-copy {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  max-width: 760px;
}
.vault-battles__banner-copy strong {
  color: var(--text-primary);
  font-weight: 600;
}

.vault-residuum-note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

.vault-totals__cardcount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--vault-edge);
  gap: 1rem;
}
.vault-totals__cardcount-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.vault-totals__cardcount-number {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

@media (max-width: 800px) {
  .vault-totals__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* Mobile: content is taller than the viewport once stacked, so flex
     centering pushes the TOP of the content under the fixed nav.
     Switch to top-aligned with explicit nav clearance and let the
     section grow naturally instead of forcing 100vh. */
  .vault-totals {
    align-items: flex-start;
    min-height: auto;
    padding-top: calc(var(--nav-height) + 3rem);
    padding-bottom: 4rem;
  }
}

/* Note clarifying the packs-clamped/Residuum-uncapped split */
.vault-totals__split-note {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 640px;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.6;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--vault-edge);
}

/* ----------------------------------------------------------------
   SECTION 3, Pack inventory grid
---------------------------------------------------------------- */
.vault-inventory {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--vault-mid);
}
.vault-inventory::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--vault-deep) 0%, transparent 8%, transparent 92%, var(--vault-deep) 100%);
  pointer-events: none;
}

/* ----------------------------------------------------------------
   "Three paths to Residuum" reassurance block. Sits between the
   section header and the pack grid so the not-pay-to-win statement
   lands BEFORE anyone scans the pack tiles. Visually distinct from
   the pack cards, gold-edged, three lanes side-by-side.
---------------------------------------------------------------- */
.vault-residuum-paths {
  position: relative;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  max-width: 1100px;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
  background:
    radial-gradient(ellipse at 50% -20%, rgba(74, 222, 128, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, rgba(201, 162, 39, 0.05) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid var(--accent-gold-dim);
  border-radius: 8px;
  overflow: hidden;
}
.vault-residuum-paths::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold-bright), transparent);
  opacity: 0.6;
}

.vault-residuum-paths__intro {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 1.5rem;
}
.vault-residuum-paths__intro-strong {
  color: var(--accent-gold-bright);
  font-weight: 600;
  margin-right: 0.25em;
}

.vault-residuum-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-bottom: 1.5rem;
}

.vault-residuum-path {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  background: linear-gradient(165deg,
    rgba(255,255,255,0.025) 0%,
    transparent 100%);
  border: 1px solid rgba(201, 162, 39, 0.12);
  border-radius: 5px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
/* All three lanes now get their own thematic accent so they read as
   parallel valid paths, not "the F2P one and two also-rans." Colours
   pulled from the existing tier palette so they feel native to the
   site: F2P green (Elf tier), Patreon violet (Dragonborn tier),
   Buy red (Demigod's Hoard / luxury). */
.vault-residuum-path[data-path="play"] {
  --path-accent: #4ade80;
  --path-glow: rgba(74, 222, 128, 0.35);
  background: linear-gradient(165deg,
    rgba(74, 222, 128, 0.07) 0%,
    rgba(74, 222, 128, 0.01) 100%);
  border-color: rgba(74, 222, 128, 0.25);
}
.vault-residuum-path[data-path="patreon"] {
  --path-accent: #a855f7;
  --path-glow: rgba(168, 85, 247, 0.40);
  background: linear-gradient(165deg,
    rgba(168, 85, 247, 0.07) 0%,
    rgba(168, 85, 247, 0.01) 100%);
  border-color: rgba(168, 85, 247, 0.25);
}
.vault-residuum-path[data-path="buy"] {
  --path-accent: #ef4444;
  --path-glow: rgba(239, 68, 68, 0.40);
  background: linear-gradient(165deg,
    rgba(239, 68, 68, 0.07) 0%,
    rgba(239, 68, 68, 0.01) 100%);
  border-color: rgba(239, 68, 68, 0.25);
}
.vault-residuum-path:hover {
  border-color: var(--path-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 24px var(--path-glow);
}

.vault-residuum-path__rune {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--path-accent);
  opacity: 0.7;
}

.vault-residuum-path__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--path-accent);
  margin: 0 0 0.6rem;
  line-height: 1.1;
}

.vault-residuum-path__body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.vault-residuum-paths__kicker {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-align: center;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 162, 39, 0.12);
  font-style: italic;
  line-height: 1.55;
}
.vault-residuum-paths__kicker::before,
.vault-residuum-paths__kicker::after {
  content: '\2756';   /* black diamond minus white x — quiet decorative glyph */
  display: inline-block;
  margin: 0 0.6em;
  color: var(--accent-gold-dim);
  font-size: 0.7em;
  vertical-align: middle;
  opacity: 0.6;
}

@media (max-width: 800px) {
  .vault-residuum-paths__grid {
    grid-template-columns: 1fr;
  }
}

.vault-pack-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  perspective: 1200px;
}

.vault-pack-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  background: linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid var(--pack-color, var(--vault-edge));
  border-radius: 6px;
  /* No overflow:hidden here so the tooltip on the pack name (.vault-tt
     child) can escape upward instead of being clipped. The art
     container already has its own overflow:hidden to keep the image
     scale and clipping contained. */
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  /* OUTSIDE glow in the pack's color, intensifies on hover. Plus a
     drop shadow so the tile lifts off the section background. */
  box-shadow:
    0 0 24px var(--pack-glow, transparent),
    0 0 60px -10px var(--pack-glow, transparent),
    0 12px 32px rgba(0,0,0,0.45);
}
.vault-pack-card:hover {
  border-color: var(--pack-color, var(--accent-gold));
  box-shadow:
    0 0 40px var(--pack-glow, var(--tier-glow)),
    0 0 100px -10px var(--pack-glow, var(--tier-glow)),
    0 20px 48px rgba(0,0,0,0.65);
}

.vault-pack-card[data-pack="basic"]   { --pack-color: var(--pack-basic);   --pack-glow: var(--pack-basic-glow); }
.vault-pack-card[data-pack="premium"] { --pack-color: var(--pack-premium); --pack-glow: var(--pack-premium-glow); }
.vault-pack-card[data-pack="cache"]   { --pack-color: var(--pack-cache);   --pack-glow: var(--pack-cache-glow); }
.vault-pack-card[data-pack="vault"]   { --pack-color: var(--pack-vault);   --pack-glow: var(--pack-vault-glow); }
.vault-pack-card[data-pack="hoard"]   { --pack-color: var(--pack-hoard);   --pack-glow: var(--pack-hoard-glow); }

/* Subtle top-edge accent */
.vault-pack-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pack-color), transparent);
  opacity: 0.6;
  transition: opacity 0.3s ease;
  z-index: 2;   /* keep accent line above the front card content */
}
.vault-pack-card:hover::before { opacity: 1; }

/* ----------------------------------------------------------------
   PACK COVER + DECK SLIVERS
   Each pack tile shows a face-down card BACK (the M-monogram
   artwork) covering the character image. A small bottom-right
   corner is "peeled" via clip-path so a hint of the underlying
   character pokes through. On hover/tap the cover lifts off
   (translate up + rotate + fade) revealing the full character art.
   Behind the front card, three thin slivers offset 2-3px each
   suggest a deck of cards stacked beneath. Subtle, premium, no
   wiggling.
---------------------------------------------------------------- */

/* The cover sits over the character image inside __art. clip-path
   cuts a triangle off the bottom-right corner so the character
   peeks through. Default state: cover IS the visual. Hover: lifts
   off. */
.vault-pack-card__cover {
  position: absolute;
  inset: 0;
  z-index: 2;       /* over the character image */
  /* The 'cornered' card-back PNG has the peeled-corner effect baked
     into the artwork itself (and its own rounded card silhouette via
     transparent corners), so no CSS clip-path or border-radius needed.
     Character art shows through the transparent peel + corner regions. */
  background-image: url('../assets/images/decor/card-back.png');
  background-size: 100% 100%;       /* exact fit over the character art behind */
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  transition:
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.45s ease,
    filter 0.45s ease;
  pointer-events: none;
  /* Pivot anchored at the peel corner (bottom-right) so the card
     visually swings UP-LEFT away from the curl - direction of motion
     follows the direction of the peel. */
  transform-origin: bottom right;
  overflow: hidden;   /* contain the shimmer overlay */
}

/* AMBIENT BLOOM — radial gold-glow that breathes 6s loop. Makes the
   gilded filigree on the card back feel alive instead of flat-printed. */
.vault-pack-card__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(232, 215, 138, 0.20) 0%,
    rgba(201, 162, 39, 0.08) 40%,
    transparent 75%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: vault-pack-cover-bloom 6s ease-in-out infinite;
}
@keyframes vault-pack-cover-bloom {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.95; }
}

/* SWEEPING SHIMMER — diagonal gold highlight travels across the card
   surface every ~9s. mix-blend-mode: color-dodge means the highlight
   mathematically AMPLIFIES already-bright pixels (the gold filigree)
   while barely touching dark recesses. That's how light actually
   catches an embossed/gilded surface in the real world - the gold
   pops, the shadowed valleys stay shadowed. */
.vault-pack-card__cover::before {
  content: '';
  position: absolute;
  inset: -10%;
  /* Alpha values halved (was 0.18 / 0.30 / 0.18). Subtler shimmer
     that catches the gold filigree without blowing it out. */
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 235, 180, 0.09) 47%,
    rgba(255, 245, 210, 0.15) 50%,
    rgba(255, 235, 180, 0.09) 53%,
    transparent 65%);
  mix-blend-mode: color-dodge;     /* embossed-gold catch-the-light feel */
  pointer-events: none;
  animation: vault-pack-cover-shimmer 9s linear infinite;
  will-change: transform;
}
@keyframes vault-pack-cover-shimmer {
  0%   { transform: translateX(-110%) translateY(-30%); }
  100% { transform: translateX(110%)  translateY(30%); }
}

/* (Folded-corner CSS pseudo-elements removed - the new 'cornered'
   card-back artwork has the folded paper peel built into the image,
   so the CSS fakery isn't needed any more.) */

/* (Corner flap pseudo-elements removed - the new 'cornered' card-back
   artwork has the folded peel built into the image itself.) */

/* On hover/tap, the cover LIFTS OFF in the direction of the peel.
   Translate UP-LEFT (negative X), rotate clockwise. With pivot at
   bottom-right (the peel corner), the cover swings up-and-left
   like a real page being lifted off from its curling corner. */
.vault-pack-card:hover .vault-pack-card__cover,
.vault-pack-card:focus-within .vault-pack-card__cover {
  transform: translate(-14px, -28px) rotate(6deg);
  opacity: 0;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.7));
}

/* DECK SLIVERS — three thin gold-edged cards stacked tightly behind
   the front card art (NOT the whole tile - they should look like
   actual cards stacked, not the full container with body text).
   Sized to match .vault-pack-card__art exactly so they sit beneath
   the art portion only, with the body text floating freely below. */
.vault-pack-card__deck {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 425 / 640;       /* matches the art container aspect */
  border-top-left-radius: 5px;   /* matches __art's top-corner radius */
  border-top-right-radius: 5px;
  background: linear-gradient(165deg,
    rgba(20, 18, 12, 0.95) 0%,
    rgba(8, 7, 10, 0.98) 100%);
  border: 1px solid color-mix(in srgb, var(--pack-color) 30%, rgba(201, 162, 39, 0.25));
  pointer-events: none;
  transition: transform 0.4s ease;
}
/* Slivers lean LEFT (negative X) so they peek out the left edge of
   the front card, with only a slight downward drift. The bottom of
   the pack (deepest sliver) sits visually anchored as the base, the
   shallower cards offset to the left like a deck pushed sideways
   slightly. Plays nicer with the bottom-right peel on the cover too. */
.vault-pack-card__deck--1 {
  z-index: 0;
  transform: translate(-3px, 2px);
}
.vault-pack-card__deck--2 {
  z-index: -1;
  transform: translate(-6px, 3px);
  opacity: 0.85;
}
.vault-pack-card__deck--3 {
  z-index: -2;
  transform: translate(-9px, 4px);
  opacity: 0.7;
}

/* Front card content (art + body) sits above the deck slivers */
.vault-pack-card > .vault-pack-card__art,
.vault-pack-card > .vault-pack-card__body {
  position: relative;
  z-index: 1;
}

/* On hover, the deck slivers shift slightly more for a tiny "settling" cue */
.vault-pack-card:hover .vault-pack-card__deck--1 { transform: translate(3px, 3px); }
.vault-pack-card:hover .vault-pack-card__deck--2 { transform: translate(6px, 6px); }
.vault-pack-card:hover .vault-pack-card__deck--3 { transform: translate(9px, 9px); }

/* Reduced motion: cover still lifts on hover (people NEED to be able
   to see the character art) but the transition is shorter and simpler */
@media (prefers-reduced-motion: reduce) {
  .vault-pack-card__cover {
    transition: opacity 0.2s ease;
  }
  .vault-pack-card:hover .vault-pack-card__cover {
    transform: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

.vault-pack-card__art {
  position: relative;
  aspect-ratio: 425 / 640;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, var(--vault-deep) 100%);
  overflow: hidden;
  /* Top corners rounded to match the card now that the card itself
     no longer clips its children. Without these, the art's square
     top would peek out of the card's rounded outer corners. */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Padding minimal so character image fills the art area edge-to-edge
     with negligible black surround. Was 1rem/0.75rem/0.5rem which left
     visible dark borders around each character. */
  padding: 0;
}
.vault-pack-card__art-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6));
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), filter 0.4s ease;
}
.vault-pack-card:hover .vault-pack-card__art-img {
  transform: scale(1.03);
  filter: drop-shadow(0 8px 28px var(--pack-glow)) drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

.vault-pack-card__body {
  padding: 1.25rem 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.vault-pack-card__name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--pack-color);
  margin: 0 0 0.25rem;
  text-shadow: 0 0 12px var(--pack-glow);
}

.vault-pack-card__count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

.vault-pack-card__guarantee {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-primary);
  margin: 0.5rem 0 0;
  line-height: 1.45;
}

.vault-pack-card__earn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .vault-pack-grid { grid-template-columns: repeat(3, 1fr); }
  .vault-pack-card:nth-child(n+4) { grid-column: span 1; }
  .vault-pack-card:nth-child(4) { grid-column: 1 / span 1; margin-left: 16.66%; }
  .vault-pack-card:nth-child(5) { grid-column: 3 / span 1; margin-right: 16.66%; }
}
@media (max-width: 720px) {
  .vault-pack-grid { grid-template-columns: 1fr 1fr; }
  .vault-pack-card,
  .vault-pack-card:nth-child(4),
  .vault-pack-card:nth-child(5) {
    grid-column: auto;
    margin: 0;
  }
}

/* ----------------------------------------------------------------
   SECTION 4, Uniques (earned, never pulled)
   Distinct cyan accent (canonical "Unique" rarity colour from the
   TCG palette) so the section reads as set-apart from packs.
---------------------------------------------------------------- */
.vault-uniques {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(6, 182, 212, 0.10) 0%, transparent 60%),
    var(--vault-mid);
  --uniq-color: #06b6d4;
  --uniq-bright: #67e8f9;
  --uniq-glow: rgba(6, 182, 212, 0.40);
}

.vault-uniques-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.vault-unique-pillar {
  position: relative;
  padding: 2.25rem 1.75rem 2rem;
  background:
    linear-gradient(165deg,
      rgba(6, 182, 212, 0.05) 0%,
      rgba(255,255,255,0.01) 50%,
      transparent 100%);
  border: 1px solid rgba(6, 182, 212, 0.20);
  border-radius: 6px;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.vault-unique-pillar:hover {
  transform: translateY(-4px);
  border-color: var(--uniq-color);
  box-shadow: 0 0 32px var(--uniq-glow), 0 16px 40px rgba(0,0,0,0.5);
}
.vault-unique-pillar__rune {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--uniq-color);
  opacity: 0.7;
}
.vault-unique-pillar__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: 0.04em;
  color: var(--uniq-bright);
  margin: 0 0 0.85rem;
  line-height: 1.2;
  text-shadow: 0 0 14px var(--uniq-glow);
}
.vault-unique-pillar__line {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* Uniques showcase: visual proof. Two real Unique cards forged at
   the Episode 154 watch party, displayed side-by-side beneath the
   three pillars. Demonstrates what a Unique looks like + how earning
   one feels (forged in the live show, owned forever). */
.vault-uniques-showcase {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.vault-uniques-showcase__header {
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
.vault-uniques-showcase__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--uniq-color);
  margin-bottom: 0.85rem;
  padding: 4px 12px;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 2px;
}
.vault-uniques-showcase__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.05em;
  color: var(--uniq-bright);
  text-shadow: 0 0 20px var(--uniq-glow);
  margin: 0 0 0.85rem;
  line-height: 1.2;
}
.vault-uniques-showcase__lede {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.vault-unique-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 700px;
  margin: 0 auto clamp(2rem, 3vw, 2.5rem);
}

.vault-unique-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(6, 182, 212, 0.05) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid rgba(6, 182, 212, 0.30);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}
.vault-unique-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: var(--uniq-bright);
  box-shadow: 0 0 36px var(--uniq-glow), 0 18px 50px rgba(0,0,0,0.65);
}
.vault-unique-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--uniq-bright), transparent);
  opacity: 0.7;
  z-index: 1;
}

.vault-unique-card__art {
  width: 100%;
  aspect-ratio: 425 / 640;
  background: var(--vault-deep);
  overflow: hidden;
}
.vault-unique-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), filter 0.4s ease;
}
.vault-unique-card:hover .vault-unique-card__art img {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.vault-unique-card__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(6, 182, 212, 0.20);
}

.vault-unique-card__badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--uniq-bright);
  font-weight: 700;
  padding: 3px 10px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: 3px;
}

.vault-unique-card__forged {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.vault-uniques-showcase__footer {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px dashed rgba(6, 182, 212, 0.20);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 800px) {
  .vault-uniques-pillars { grid-template-columns: 1fr; }
  .vault-unique-cards { grid-template-columns: 1fr; max-width: 360px; }
  .vault-unique-card__caption { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ----------------------------------------------------------------
   SECTION 5, Starters: Pick your founding hero
   Bronze accent, the colour of foundations and origins.
---------------------------------------------------------------- */
.vault-starters {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(192, 134, 84, 0.10) 0%, transparent 60%),
    var(--vault-deep);
  --start-color:  #c08654;
  --start-bright: #e0a878;
  --start-deep:   #6b4324;
  --start-glow:   rgba(192, 134, 84, 0.45);
}

.vault-starter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.vault-starter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(192, 134, 84, 0.06) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid rgba(192, 134, 84, 0.25);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.vault-starter-card:hover {
  transform: translateY(-6px);
  border-color: var(--start-color);
  box-shadow: 0 0 32px var(--start-glow), 0 16px 48px rgba(0,0,0,0.6);
}
.vault-starter-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--start-bright), transparent);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.vault-starter-card:hover::before { opacity: 1; }

.vault-starter-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 425 / 640;
  background: var(--vault-deep);
  overflow: hidden;
}
.vault-starter-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), filter 0.4s ease;
}
.vault-starter-card:hover .vault-starter-card__art img {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.vault-starter-card__body {
  padding: 1.5rem 1.4rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vault-starter-card__rarity {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--start-color);
  margin-bottom: 0.25rem;
}

.vault-starter-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  letter-spacing: 0.05em;
  color: var(--start-bright);
  text-shadow: 0 0 16px var(--start-glow);
  line-height: 1;
  margin: 0;
}

.vault-starter-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin: 0 0 0.65rem;
}

.vault-starter-card__desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 0.85rem;
}

.vault-starter-card__flavor {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--start-bright);
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(192, 134, 84, 0.25);
}

.vault-starters-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--start-color);
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(192, 134, 84, 0.20);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .vault-starter-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* ----------------------------------------------------------------
   SECTION 9, How Battles Actually Play
   Steel-blue accent: tactical, considered, the colour of the engine.
---------------------------------------------------------------- */
.vault-battles {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(74, 146, 255, 0.10) 0%, transparent 60%),
    var(--vault-mid);
  --batt-color:  #4a92ff;
  --batt-bright: #7fb3ff;
  --batt-glow:   rgba(74, 146, 255, 0.40);
}

.vault-battle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.vault-battle-tile {
  position: relative;
  padding: 2.25rem 1.75rem 2rem;
  background:
    linear-gradient(165deg,
      rgba(74, 146, 255, 0.05) 0%,
      rgba(255,255,255,0.01) 50%,
      transparent 100%);
  border: 1px solid rgba(74, 146, 255, 0.20);
  border-radius: 6px;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Only lift/glow on hover if the tile actually has a tooltip to show.
   Tiles without info (the new character-growth ones) stay flat so we
   don't promise more depth than they have. */
.vault-battle-tile:hover:has(.vault-tt) {
  transform: translateY(-4px);
  border-color: var(--batt-color);
  box-shadow: 0 0 28px var(--batt-glow), 0 14px 36px rgba(0,0,0,0.5);
}
.vault-battle-tile__rune {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--batt-color);
  opacity: 0.7;
}
.vault-battle-tile__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  letter-spacing: 0.05em;
  color: var(--batt-bright);
  margin: 0 0 0.85rem;
  line-height: 1.2;
  text-shadow: 0 0 12px var(--batt-glow);
}
.vault-battle-tile__body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 980px) {
  .vault-battle-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .vault-battle-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   TEAM-SIZE PRESETS (sub-panel inside vault-battles)
   Compact gold-bordered panel with four size tiles in a row. Visual
   weight escalates left-to-right (number size + accent intensity)
   so the eye reads 'these get bigger and harder' without needing
   the words to do it.
---------------------------------------------------------------- */
.vault-battle-team {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 980px;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%),
    rgba(13, 12, 18, 0.55);
  border: 1px solid var(--vault-edge);
  border-radius: 6px;
  position: relative;
}
.vault-battle-team::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold-dim), transparent);
  opacity: 0.55;
}

.vault-battle-team__head {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}
.vault-battle-team__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-gold);
  opacity: 0.85;
  margin-bottom: 0.6rem;
}
.vault-battle-team__line {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  color: var(--text-secondary);
  margin: 0;
  font-style: italic;
}

.vault-battle-team__sizes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.5vw, 1rem);
}

.vault-battle-team__size {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.1rem 0.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid rgba(201, 162, 39, 0.18);
  border-radius: 5px;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.vault-battle-team__size:hover {
  transform: translateY(-2px);
}
/* Visual escalation per tier: tier 1 modest, tier 4 most weighted.
   Border intensity, text-shadow, and number-glow all step up. */
.vault-battle-team__size[data-tier="1"] { --tier-accent: rgba(154, 149, 144, 0.7); }
.vault-battle-team__size[data-tier="2"] { --tier-accent: rgba(201, 162, 39, 0.65); }
.vault-battle-team__size[data-tier="3"] { --tier-accent: rgba(249, 115, 22, 0.7); }
.vault-battle-team__size[data-tier="4"] { --tier-accent: rgba(239, 68, 68, 0.8); }

.vault-battle-team__size:hover {
  border-color: var(--tier-accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4),
              0 0 14px var(--tier-accent);
}

.vault-battle-team__num {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(180deg,
    var(--accent-gold-bright) 0%,
    var(--accent-gold) 60%,
    var(--accent-gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px var(--tier-accent);
}
/* Number scales up across the four tiers - subtle visual weight ladder */
.vault-battle-team__size[data-tier="1"] .vault-battle-team__num { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.vault-battle-team__size[data-tier="2"] .vault-battle-team__num { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.vault-battle-team__size[data-tier="3"] .vault-battle-team__num { font-size: clamp(2.1rem, 3.8vw, 2.8rem); }
.vault-battle-team__size[data-tier="4"] .vault-battle-team__num { font-size: clamp(2.3rem, 4.2vw, 3.1rem); }

.vault-battle-team__label {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-align: center;
}
.vault-battle-team__tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.vault-battle-team__foot {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: center;
  margin: clamp(1.25rem, 2vw, 1.5rem) 0 0;
}

@media (max-width: 720px) {
  .vault-battle-team__sizes { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------
   SECTION 10, Modes of Play
   Royal violet accent: variety, exploration, mystery.
---------------------------------------------------------------- */
.vault-modes {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--vault-deep);
  --mod-color:  #a855f7;
  --mod-bright: #c896ff;
  --mod-glow:   rgba(168, 85, 247, 0.40);
}

.vault-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.vault-mode-tile {
  position: relative;
  padding: 1.75rem 1.5rem 1.85rem;
  background:
    linear-gradient(165deg,
      rgba(168, 85, 247, 0.05) 0%,
      rgba(255,255,255,0.01) 50%,
      transparent 100%);
  border: 1px solid rgba(168, 85, 247, 0.20);
  border-radius: 6px;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.vault-mode-tile:hover {
  transform: translateY(-4px);
  border-color: var(--mod-color);
  box-shadow: 0 0 28px var(--mod-glow), 0 14px 36px rgba(0,0,0,0.5);
}

.vault-mode-tile__icon {
  display: inline-block;
  font-size: 1.6rem;
  color: var(--mod-bright);
  margin-bottom: 0.85rem;
  text-shadow: 0 0 16px var(--mod-glow);
  line-height: 1;
}

.vault-mode-tile__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin: 0 0 0.6rem;
  line-height: 1.2;
}

.vault-mode-tile__body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 900px) {
  .vault-mode-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .vault-mode-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   SECTION 11, For Keeps (Blood Wager)
   Crimson accent: high stakes, the colour of consequences.
   Single dramatic spotlight, NOT a tile grid.
---------------------------------------------------------------- */
.vault-blood {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 50%, rgba(220, 38, 38, 0.12) 0%, transparent 65%),
    var(--vault-mid);
  --blood-color:  #dc2626;
  --blood-bright: #ef4444;
  --blood-glow:   rgba(220, 38, 38, 0.50);
  overflow: hidden;
}
.vault-blood::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.4) 0%, transparent 50%);
  pointer-events: none;
}

.vault-blood-stage {
  position: relative;
  max-width: 920px;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem);
  background:
    linear-gradient(180deg, rgba(220, 38, 38, 0.06) 0%, rgba(0,0,0,0.2) 100%);
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 8px;
}
.vault-blood-stage::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blood-bright), transparent);
  opacity: 0.7;
}

.vault-blood-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
}

.vault-blood-stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--blood-bright);
  text-shadow: 0 0 24px var(--blood-glow);
  letter-spacing: 0.05em;
  line-height: 1;
}

.vault-blood-stat__line {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0.02em;
}

.vault-blood-kicker {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: var(--text-secondary);
}
.vault-blood-kicker strong {
  color: var(--blood-bright);
  font-weight: 500;
}

/* The deck-only ante callout - lands the "your ante fights the match"
   mechanic between the three-step flow and the kicker line. */
.vault-blood-callout {
  position: relative;
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(220, 38, 38, 0.08) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 6px;
  text-align: center;
}
.vault-blood-callout::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blood-bright, #ef4444), transparent);
  opacity: 0.6;
}
.vault-blood-callout__heading {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--blood-bright, #ef4444);
  margin: 0 0 0.85rem;
  text-shadow: 0 0 24px rgba(239, 68, 68, 0.3);
}
.vault-blood-callout__body {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.vault-blood-callout__body strong {
  color: var(--accent-gold-bright);
  font-weight: 600;
  font-style: italic;
}

@media (max-width: 720px) {
  .vault-blood-stage { grid-template-columns: 1fr; gap: 2rem; }
}

/* ----------------------------------------------------------------
   SECTION 12, Trading & Marketplace
   Emerald accent: currency, economy, Residuum-adjacent.
---------------------------------------------------------------- */
.vault-market {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(16, 185, 129, 0.08) 0%, transparent 60%),
    var(--vault-deep);
  --mkt-color:  #10b981;
  --mkt-bright: #34d399;
  --mkt-glow:   rgba(16, 185, 129, 0.40);
}

.vault-market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.vault-market-tile {
  position: relative;
  padding: 2rem 1.6rem 2rem;
  background:
    linear-gradient(165deg,
      rgba(16, 185, 129, 0.05) 0%,
      rgba(255,255,255,0.01) 50%,
      transparent 100%);
  border: 1px solid rgba(16, 185, 129, 0.20);
  border-radius: 6px;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.vault-market-tile:hover {
  transform: translateY(-4px);
  border-color: var(--mkt-color);
  box-shadow: 0 0 28px var(--mkt-glow), 0 14px 36px rgba(0,0,0,0.5);
}
.vault-market-tile__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: 0.05em;
  color: var(--mkt-bright);
  margin: 0 0 0.85rem;
  line-height: 1.2;
  text-shadow: 0 0 12px var(--mkt-glow);
}
.vault-market-tile__body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 800px) {
  .vault-market-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

/* ----------------------------------------------------------------
   SECTION 6, Collectible content stats (TCG scale tease)
---------------------------------------------------------------- */
.vault-collection {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--vault-deep);
}

.vault-collection-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.vault-collection-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid var(--vault-edge);
  border-radius: 6px;
  text-align: center;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  --stat-color: var(--accent-gold);
  --stat-glow: rgba(201, 162, 39, 0.4);
}
.vault-collection-stat[data-cat="characters"] { --stat-color: #e8d78a; --stat-glow: rgba(232, 215, 138, 0.45); }
.vault-collection-stat[data-cat="spells"]     { --stat-color: #a855f7; --stat-glow: rgba(168, 85, 247, 0.45); }
.vault-collection-stat[data-cat="perks"]      { --stat-color: #22c55e; --stat-glow: rgba(34, 197, 94, 0.45); }
.vault-collection-stat[data-cat="items"]      { --stat-color: #d18a52; --stat-glow: rgba(209, 138, 82, 0.45); }
.vault-collection-stat[data-cat="weapons"]    { --stat-color: #ef4444; --stat-glow: rgba(239, 68, 68, 0.50); }

.vault-collection-stat:hover {
  border-color: var(--stat-color);
  transform: translateY(-3px);
  box-shadow: 0 0 28px var(--stat-glow), 0 12px 32px rgba(0,0,0,0.5);
}

.vault-collection-stat__count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--stat-color);
  text-shadow: 0 0 16px var(--stat-glow);
  letter-spacing: 0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.vault-collection-stat__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Sampler ticker beneath each stat label. Cycles names from a curated
   list (see /js/vault-page.js) so the dry count gets a parade of actual
   names underneath. Fixed height + truncate to avoid layout reflow.
   Animations restricted to opacity + transform only (GPU-composite,
   no layout/paint cost) so 5 tiles can run concurrently without
   stuttering the page. Earlier letter-spacing + filter:blur version
   forced per-frame text relayout and choked the main thread. */
.vault-collection-stat__flicker {
  display: block;
  margin-top: 0.6rem;
  /* min-height so italic descenders (g, p, q, j, y, "Stormcaller's
     Torque" etc.) don't get bottom-clipped by a too-tight box. Was
     height:1.2em which left no room below the baseline for italic
     tails. Single-line text with nowrap means all names render at the
     same height, no reflow risk. */
  min-height: 1.55em;
  line-height: 1.2;
  padding-bottom: 0.15em;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-secondary);
  opacity: 0.55;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transform: translateY(0);
}
.vault-collection-stat:hover .vault-collection-stat__flicker {
  color: var(--stat-color);
  opacity: 0.85;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Out: dim and lift a touch. Only animating opacity + transform. */
@keyframes vault-flicker-out {
  0%   { opacity: 0.55; transform: translateY(0); }
  100% { opacity: 0;    transform: translateY(-2px); }
}
/* In: rise from below, settle to neutral. Only animating opacity + transform. */
@keyframes vault-flicker-in {
  0%   { opacity: 0;    transform: translateY(2px); }
  100% { opacity: 0.55; transform: translateY(0); }
}
.vault-collection-stat__flicker.is-flicker-out {
  animation: vault-flicker-out 200ms ease-in forwards;
  will-change: opacity, transform;
}
.vault-collection-stat__flicker.is-flicker-in {
  animation: vault-flicker-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .vault-collection-stat__flicker.is-flicker-out,
  .vault-collection-stat__flicker.is-flicker-in {
    animation: none;
  }
}

/* The grand total card sits on its own beneath the per-category grid */
.vault-collection-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.25rem clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, rgba(201, 162, 39, 0.04) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid var(--accent-gold-dim);
  border-radius: 6px;
  text-align: center;
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.vault-collection-total::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  opacity: 0.7;
}

.vault-collection-total__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-gold);
  opacity: 0.85;
}

.vault-collection-total__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(180deg,
    var(--accent-gold-bright) 0%,
    var(--accent-gold) 50%,
    var(--accent-gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 50px rgba(201, 162, 39, 0.3);
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}

.vault-collection-total__note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

@media (max-width: 900px) {
  .vault-collection-grid { grid-template-columns: repeat(2, 1fr); }
  .vault-collection-stat[data-cat="weapons"] { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
}
@media (max-width: 540px) {
  .vault-collection-grid { grid-template-columns: 1fr; }
  .vault-collection-stat[data-cat="weapons"] { max-width: 100%; }
}

/* ----------------------------------------------------------------
   SECTION 5, Per-tier reference grid
---------------------------------------------------------------- */
.vault-tiers {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.08) 0%, transparent 50%),
    var(--vault-deep);
}

.vault-tier-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: stretch;
}

.vault-tier-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.1rem 1.75rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid var(--vault-edge);
  border-radius: 6px;
  text-align: center;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.vault-tier-col[data-tier="kobold"]     { --col-tier-color: #f59e0b; --col-tier-glow: rgba(245, 158, 11, 0.45); }
.vault-tier-col[data-tier="elf"]        { --col-tier-color: #22c55e; --col-tier-glow: rgba(34, 197, 94, 0.45); }
.vault-tier-col[data-tier="dwarf"]      { --col-tier-color: #3b82f6; --col-tier-glow: rgba(59, 130, 246, 0.45); }
.vault-tier-col[data-tier="dragonborn"] { --col-tier-color: #a855f7; --col-tier-glow: rgba(168, 85, 247, 0.45); }
.vault-tier-col[data-tier="demigod"]    { --col-tier-color: #ef4444; --col-tier-glow: rgba(239, 68, 68, 0.50); }

.vault-tier-col:hover {
  border-color: var(--col-tier-color);
  box-shadow: 0 0 24px var(--col-tier-glow);
}

.vault-tier-col.is-current {
  transform: scale(1.04);
  border-color: var(--accent-gold);
  background:
    linear-gradient(180deg, rgba(201, 162, 39, 0.08) 0%, rgba(201, 162, 39, 0.02) 100%);
  box-shadow:
    0 0 0 1px var(--accent-gold),
    0 0 40px var(--tier-glow),
    0 16px 40px rgba(0,0,0,0.5);
  z-index: 2;
}
.vault-tier-col.is-current::before {
  content: 'YOUR TIER';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-gold);
  color: #1a1208;
  padding: 3px 10px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  white-space: nowrap;
}

.vault-tier-col__crest {
  width: 72px;
  height: 72px;
  margin-bottom: 1rem;
}
.vault-tier-col__crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px var(--col-tier-glow));
}

.vault-tier-col__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--col-tier-color);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}

.vault-tier-col__price {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--text-primary);
  margin: 0 0 1rem;
  font-weight: 500;
}
.vault-tier-col__price span {
  color: var(--text-dim);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.vault-tier-col__bundle {
  list-style: none;
  margin: 0 0 1rem;
  padding: 1rem 0;
  width: 100%;
  border-top: 1px dashed var(--vault-edge);
  border-bottom: 1px dashed var(--vault-edge);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.vault-tier-col__bundle li {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.vault-tier-col__qty {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-gold-bright);
  margin-right: 0.4em;
}

.vault-tier-col__residuum {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--res-bright);
  text-shadow: 0 0 12px var(--res-glow);
  margin: 0 0 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.vault-tier-col__cardtotal {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--vault-edge);
  width: 100%;
}
.vault-tier-col__cardtotal span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  line-height: 1;
}
.vault-tier-col__residuum span {
  font-weight: 700;
}
.vault-tier-col__residuum::before {
  /* Real green gem icon. residuum-sm.png is the 64px optimized version
     (5KB). Drop-shadow gives it a soft green halo without darkening the
     PNG itself. Shimmer animation pulses brightness + halo so the white
     highlight facets in the art feel like they're catching light. */
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url('../assets/images/vault/residuum-sm.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  animation: residuum-shimmer 3.4s ease-in-out infinite;
}

@keyframes residuum-shimmer {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px var(--res-glow))
      brightness(1)
      contrast(1);
  }
  50% {
    filter:
      drop-shadow(0 0 14px var(--res-glow))
      drop-shadow(0 0 4px rgba(255, 255, 255, 0.35))
      brightness(1.18)
      contrast(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-tier-col__residuum::before {
    animation: none;
    filter: drop-shadow(0 0 8px var(--res-glow));
  }
}

.vault-tier-col__value {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0.5rem 0 0;
}

@media (max-width: 1024px) {
  .vault-tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .vault-tier-col[data-tier="demigod"] {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .vault-tier-grid {
    grid-template-columns: 1fr;
  }
  .vault-tier-col[data-tier="demigod"] {
    max-width: 100%;
  }
}

/* ----------------------------------------------------------------
   SECTION V, RARITY LADDER. A vertical climb from Common to Mythic
   with each tier in its own colour. Two side asides for Unique
   (beside the ladder, earned-only) and Starter (beneath the ladder,
   claim-only). One footnote about Mythic/Unique being character-only.
---------------------------------------------------------------- */
.vault-rarity {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--vault-mid);
}
.vault-rarity::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--vault-deep) 0%, transparent 8%, transparent 92%, var(--vault-deep) 100%);
  pointer-events: none;
}

.vault-rarity-ladder {
  max-width: 880px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
}

.vault-rarity-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.025) 0%, transparent 100%);
  border: 1px solid rgba(201, 162, 39, 0.14);
  border-left-width: 4px;
  border-radius: 5px;
  border-left-color: var(--rar-color, var(--accent-gold-dim));
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.vault-rarity-step[data-rarity="common"]    { --rar-color: #9ca3af; --rar-glow: rgba(156, 163, 175, 0.30); }
.vault-rarity-step[data-rarity="uncommon"]  { --rar-color: #22c55e; --rar-glow: rgba(34, 197, 94, 0.35); }
.vault-rarity-step[data-rarity="rare"]      { --rar-color: #3b82f6; --rar-glow: rgba(59, 130, 246, 0.35); }
.vault-rarity-step[data-rarity="epic"]      { --rar-color: #a855f7; --rar-glow: rgba(168, 85, 247, 0.40); }
.vault-rarity-step[data-rarity="legendary"] { --rar-color: #f97316; --rar-glow: rgba(249, 115, 22, 0.40); }
.vault-rarity-step[data-rarity="mythic"]    { --rar-color: #ec4899; --rar-glow: rgba(236, 72, 153, 0.45); }

.vault-rarity-step:hover {
  border-color: var(--rar-color);
  transform: translateX(4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 24px var(--rar-glow);
}

.vault-rarity-step__pip {
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, var(--rar-color) 0%, rgba(0,0,0,0.4) 90%);
  border: 1px solid var(--rar-color);
  box-shadow: 0 0 16px var(--rar-glow), inset 0 0 8px rgba(0,0,0,0.4);
  position: relative;
}
.vault-rarity-step__pip::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.5) 0%, transparent 55%);
  opacity: 0.6;
}
/* Higher rarity = larger / brighter pip */
.vault-rarity-step[data-rarity="common"]    .vault-rarity-step__pip { width: 28px; height: 28px; }
.vault-rarity-step[data-rarity="uncommon"]  .vault-rarity-step__pip { width: 32px; height: 32px; }
.vault-rarity-step[data-rarity="rare"]      .vault-rarity-step__pip { width: 36px; height: 36px; }
.vault-rarity-step[data-rarity="epic"]      .vault-rarity-step__pip { width: 40px; height: 40px; }
.vault-rarity-step[data-rarity="legendary"] .vault-rarity-step__pip { width: 44px; height: 44px; }
.vault-rarity-step[data-rarity="mythic"]    .vault-rarity-step__pip {
  width: 48px;
  height: 48px;
  animation: vault-rarity-mythic-pulse 3.5s ease-in-out infinite;
}
@keyframes vault-rarity-mythic-pulse {
  0%, 100% { box-shadow: 0 0 16px var(--rar-glow), inset 0 0 8px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 30px var(--rar-glow), inset 0 0 12px rgba(0,0,0,0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .vault-rarity-step[data-rarity="mythic"] .vault-rarity-step__pip {
    animation: none;
    box-shadow: 0 0 24px var(--rar-glow), inset 0 0 10px rgba(0,0,0,0.4);
  }
}

.vault-rarity-step__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vault-rarity-step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.vault-rarity-step__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  letter-spacing: 0.02em;
  color: var(--rar-color);
  margin: 0;
  line-height: 1;
  text-shadow: 0 0 18px var(--rar-glow);
}

.vault-rarity-step__rate {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.3rem 0.7rem;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(201, 162, 39, 0.18);
  border-radius: 3px;
  white-space: nowrap;
}
.vault-rarity-step__rate::after {
  content: ' of pulls';
  color: var(--text-dim);
  font-size: 0.85em;
  margin-left: 0.2em;
}

.vault-rarity-step__line {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.vault-rarity-step__slots {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rar-color);
  padding: 0.3rem 0.7rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--rar-color);
  border-radius: 3px;
  opacity: 0.85;
}

/* SIDE ASIDES: Unique above the ladder, Starter beneath. Both sit
   visually distinct from the main ladder so they read as separate
   from the climb. */
.vault-rarity-asides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 880px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.vault-rarity-aside {
  position: relative;
  padding: 1.5rem 1.5rem 1.4rem;
  border: 1px solid var(--aside-color, var(--accent-gold-dim));
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 100%);
}
.vault-rarity-aside[data-aside="unique"] {
  --aside-color: #e8d78a;
  --aside-glow: rgba(232, 215, 138, 0.4);
}
.vault-rarity-aside[data-aside="starter"] {
  --aside-color: #94a3b8;
  --aside-glow: rgba(148, 163, 184, 0.3);
}
.vault-rarity-aside::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aside-color), transparent);
  opacity: 0.6;
}

.vault-rarity-aside__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.vault-rarity-aside__pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--aside-color);
  box-shadow: 0 0 14px var(--aside-glow);
  flex-shrink: 0;
}
.vault-rarity-aside__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--aside-color);
  margin: 0;
  line-height: 1;
}
.vault-rarity-aside__pos {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.vault-rarity-aside__line {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.vault-rarity-aside__link {
  color: var(--aside-color);
  text-decoration: none;
  border-bottom: 1px dotted var(--aside-color);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.vault-rarity-aside__link:hover {
  color: var(--accent-gold-bright);
  border-bottom-color: var(--accent-gold-bright);
}

.vault-rarity-footnote {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-dim);
  font-style: italic;
}
.vault-rarity-footnote strong {
  color: var(--accent-gold);
  font-style: normal;
  font-weight: 600;
}

@media (max-width: 720px) {
  .vault-rarity-step { grid-template-columns: 40px 1fr; gap: 0.85rem; padding: 1rem 1.1rem; }
  .vault-rarity-step__head { gap: 0.5rem; }
  .vault-rarity-asides { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   SECTION VIII, CUSTOMISE - one card, infinite builds.
   Layered into a single sprawling section: a hero stat band, six
   per-axis layer tiles, then a same-hero-two-builds compare panel.
   Section accent leans arcane-violet (build = wizardry) layered on
   the existing gold/dark palette. Each layer tile gets its own
   accent so the customisation axes feel distinct.
---------------------------------------------------------------- */
.vault-customise {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(168, 85, 247, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 90%, rgba(34, 211, 238, 0.05) 0%, transparent 55%),
    var(--vault-deep);
}
.vault-customise::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--vault-mid) 0%, transparent 8%, transparent 92%, var(--vault-mid) 100%);
  pointer-events: none;
}

/* HERO BAND: enormous variation count + single explanatory line */
.vault-customise__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.5fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  max-width: 1100px;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(ellipse at 0% 50%, rgba(168, 85, 247, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 8px;
  overflow: hidden;
}
.vault-customise__hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent);
  opacity: 0.7;
}

.vault-customise__hero-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.vault-customise__hero-figure-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(168, 85, 247, 0.85);
}
.vault-customise__hero-figure-num {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  letter-spacing: -0.02em;
  line-height: 0.95;
  background: linear-gradient(180deg,
    #e8d78a 0%,
    #c9a227 45%,
    #a16d1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(201, 162, 39, 0.25);
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.55));
}
.vault-customise__hero-figure-plus {
  font-size: 0.6em;
  margin-left: 0.05em;
  vertical-align: super;
  background: linear-gradient(180deg, #e8d78a 0%, #c9a227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vault-customise__hero-figure-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 18em;
}
.vault-customise__hero-line {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0;
}
.vault-customise__hero-line strong {
  color: rgba(232, 215, 138, 1);
  font-weight: 600;
}

/* LAYER TILES: 3x2 grid, each axis its own accent */
.vault-customise__layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.vault-customise__layer {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2vw, 1.75rem) 1.5rem;
  background:
    linear-gradient(165deg,
      rgba(255,255,255,0.025) 0%,
      transparent 60%);
  border: 1px solid rgba(201, 162, 39, 0.14);
  border-radius: 6px;
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.vault-customise__layer[data-layer="rarity"]    { --layer-color: #e8d78a; --layer-glow: rgba(232, 215, 138, 0.35); }
.vault-customise__layer[data-layer="level"]     { --layer-color: #4ade80; --layer-glow: rgba(74, 222, 128, 0.35); }
.vault-customise__layer[data-layer="abilities"] { --layer-color: #a855f7; --layer-glow: rgba(168, 85, 247, 0.40); }
.vault-customise__layer[data-layer="trait"]     { --layer-color: #22d3ee; --layer-glow: rgba(34, 211, 238, 0.35); }
.vault-customise__layer[data-layer="perks"]     { --layer-color: #d18a52; --layer-glow: rgba(209, 138, 82, 0.35); }
.vault-customise__layer[data-layer="items"]     { --layer-color: #ef4444; --layer-glow: rgba(239, 68, 68, 0.40); }

.vault-customise__layer:hover {
  border-color: var(--layer-color);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.5), 0 0 28px var(--layer-glow);
}

.vault-customise__layer-rune {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--layer-color);
  opacity: 0.65;
}

.vault-customise__layer-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--layer-color);
  margin: 0 0 0.85rem;
  line-height: 1.1;
  text-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.vault-customise__layer-body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}

.vault-customise__layer-meta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(201, 162, 39, 0.18);
  border-radius: 3px;
  background: rgba(0,0,0,0.25);
}
.vault-customise__layer:hover .vault-customise__layer-meta {
  color: var(--layer-color);
  border-color: var(--layer-color);
}

/* COMPARE PANEL: same hero, two builds */
.vault-customise__compare {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  border: 1px solid var(--accent-gold-dim);
  border-radius: 8px;
}
.vault-customise__compare::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold-bright), transparent);
  opacity: 0.55;
}

.vault-customise__compare-header {
  text-align: center;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.vault-customise__compare-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.6rem;
}
.vault-customise__compare-line {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 auto;
}

.vault-customise__compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.vault-customise__build {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);
  border: 1px solid rgba(201, 162, 39, 0.18);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
/* Per-archetype accent so each build feels visually distinct -
   three Tronald variants, three different vibes */
.vault-customise__build[data-archetype="nuker"]    { --build-accent: #ef4444; --build-glow: rgba(239, 68, 68, 0.35); }
.vault-customise__build[data-archetype="warden"]   { --build-accent: #22d3ee; --build-glow: rgba(34, 211, 238, 0.35); }
.vault-customise__build[data-archetype="lifeline"] { --build-accent: #e8d78a; --build-glow: rgba(232, 215, 138, 0.35); }
.vault-customise__build:hover {
  border-color: var(--build-accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 30px var(--build-glow);
}

.vault-customise__build-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4 / 1;
  overflow: hidden;
  background: #000;
}
.vault-customise__build-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  opacity: 0.85;
  transition: opacity 0.35s ease, transform 0.5s ease;
}
.vault-customise__build:hover .vault-customise__build-art img {
  opacity: 1;
  transform: scale(1.04);
}
.vault-customise__build-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.vault-customise__build-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--build-accent);
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--build-accent);
  border-radius: 3px;
  z-index: 2;
  text-shadow: 0 0 8px var(--build-glow);
}

.vault-customise__build-body {
  padding: 1.25rem 1.25rem 1.5rem;
}
.vault-customise__build-name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
  color: var(--build-accent);
  margin: 0 0 0.3rem;
  line-height: 1.1;
}
.vault-customise__build-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0 0 1.1rem;
  line-height: 1.4;
}

/* Stack: stacked label-above-content layout so 3 cards fit comfortably
   per row at standard widths. The mono uppercase label still reads
   as "field name", just sits on its own line. */
.vault-customise__build-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.vault-customise__build-stack li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px dotted rgba(201, 162, 39, 0.12);
  font-size: 0.85rem;
  line-height: 1.45;
}
.vault-customise__build-stack li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.vault-customise__build-stack li span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.vault-customise__build-stack li strong {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-primary);
}

/* Role description block: "Good at X. Soft against Y." */
.vault-customise__build-role {
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(201, 162, 39, 0.16);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.vault-customise__build-role span {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--build-accent);
  margin-right: 0.4em;
}
.vault-customise__build-role span + span,
.vault-customise__build-role > span:nth-of-type(2) {
  /* "Soft against:" tag gets a dimmer treatment than "Good at:" */
  color: var(--text-dim);
  margin-left: 0.35em;
}

.vault-customise__compare-kicker {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-style: italic;
  text-align: center;
  color: var(--accent-gold-bright);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  letter-spacing: 0.02em;
}

/* Pillar/battle/etc. parent-hover triggers already include vault-tt
   support, but the customise layer uses its own class. Add it. */
.vault-customise__layer:hover         .vault-tt::after,
.vault-customise__layer:focus-within  .vault-tt::after,
.vault-customise__layer:hover         .vault-tt::before,
.vault-customise__layer:focus-within  .vault-tt::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Responsive collapse */
@media (max-width: 980px) {
  .vault-customise__layers { grid-template-columns: repeat(2, 1fr); }
  .vault-customise__hero { grid-template-columns: 1fr; }
}
/* Compare grid collapses later than other grids - 3 cards in a row
   is the whole point of the section, drop to single-column only when
   3 honestly stops fitting. */
@media (max-width: 880px) {
  .vault-customise__compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .vault-customise__layers { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   SECTION 5, TCG pillars
---------------------------------------------------------------- */
.vault-pillars {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--vault-mid);
}

.vault-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.vault-pillar-tile {
  position: relative;
  padding: 2.25rem 1.5rem 2rem;
  background:
    linear-gradient(165deg,
      rgba(201, 162, 39, 0.04) 0%,
      rgba(255,255,255,0.01) 50%,
      transparent 100%);
  border: 1px solid var(--vault-edge);
  border-radius: 6px;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.vault-pillar-tile:hover {
  transform: translateY(-4px);
  border-color: var(--accent-gold);
  box-shadow: 0 0 32px var(--tier-glow), 0 16px 40px rgba(0,0,0,0.5);
  /* Hoist above the sticky bottom CTA bar (z-index 100) and the orb
     (z-index 80) so the tooltip can render unclipped no matter where
     the tile sits in the viewport. */
  z-index: 110;
}

.vault-pillar-tile__rune {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--text-dim);
  opacity: 0.7;
}

.vault-pillar-tile__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0 0 1rem;
  line-height: 1;
  background: linear-gradient(180deg,
    var(--text-primary) 0%,
    var(--text-primary) 50%,
    var(--accent-gold-dim) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Some pillar words are long ("Customise", "Level Up"), let them
     overflow past the tile padding rather than getting clipped. */
  white-space: nowrap;
  overflow: visible;
}
/* (Pillar word dashed-underline / hover affordance removed alongside
   the tooltip removal - was an indicator of hoverability that no
   longer applies. Pillar words now render as plain display text.) */

.vault-pillar-tile__line {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 900px) {
  .vault-pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .vault-pillar-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   SECTION 6, YouTube parity disclosure
---------------------------------------------------------------- */
.vault-youtube {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--vault-deep);
}

.vault-youtube-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: start;
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 2.25rem;
  background:
    linear-gradient(180deg, rgba(201, 162, 39, 0.06) 0%, transparent 100%);
  border: 1px solid var(--accent-gold-dim);
  border-radius: 4px;
  position: relative;
}
.vault-youtube-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  opacity: 0.6;
}

.vault-youtube-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 0, 0, 0.08);
  border: 1px solid rgba(255, 0, 0, 0.25);
  border-radius: 4px;
  color: #ff5252;
}

.vault-youtube-card__heading {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
}

.vault-youtube-card__copy {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
.vault-youtube-card__copy strong {
  color: var(--accent-gold);
  font-weight: 600;
}

.vault-youtube-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-gold-dim);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}
.vault-youtube-card__link:hover {
  color: var(--accent-gold-bright);
  border-color: var(--accent-gold);
  gap: 0.85rem;
}

@media (max-width: 600px) {
  .vault-youtube-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .vault-youtube-card__icon {
    margin: 0 auto;
  }
}

/* ----------------------------------------------------------------
   SECTION 7, Footer fine print
---------------------------------------------------------------- */
.vault-fineprint {
  padding: 4rem 0 6rem;
  background: var(--vault-deep);
  border-top: 1px solid var(--vault-edge);
}

.vault-fineprint__inner {
  max-width: 720px;
  text-align: center;
}

.vault-fineprint__line {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0 0 0.85rem;
}
.vault-fineprint__line:last-child { margin-bottom: 0; }

.vault-fineprint__line--contact {
  margin-top: 1.5rem;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.vault-fineprint__line--contact a {
  color: var(--accent-gold);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-gold-dim);
  margin-left: 0.4em;
}
.vault-fineprint__line--contact a:hover { color: var(--accent-gold-bright); }

/* ----------------------------------------------------------------
   HOVER TOOLTIPS
   CSS-only tooltips on .vault-tt elements. Copy is pulled from a
   data-tt attribute and rendered via ::after on hover/focus.
   Tabindex=0 on each target makes them keyboard-accessible.
   Positioning is top-centered by default; right/left modifiers
   shift origin for elements near viewport edges.
---------------------------------------------------------------- */
.vault-tt {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted rgba(201, 162, 39, 0.45);
  outline: none;
}
.vault-tt:focus-visible {
  border-bottom-color: var(--accent-gold-bright);
  box-shadow: 0 1px 0 var(--accent-gold-bright);
}
.vault-tt::after {
  content: attr(data-tt);
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(15, 14, 22, 0.97);
  border: 1px solid var(--accent-gold-dim);
  border-radius: 6px;
  padding: 14px 18px;
  width: max-content;
  max-width: 340px;
  min-width: 240px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-shadow: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 200;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 30px rgba(201, 162, 39, 0.15);
  white-space: normal;
}
.vault-tt::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent-gold-dim);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 201;
  pointer-events: none;
}
.vault-tt:hover::after, .vault-tt:focus::after,
.vault-tt:hover::before, .vault-tt:focus::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Expand the hover trigger to the whole parent tile/card so users
   don't have to find the dotted heading text. Hovering anywhere on
   the parent reveals the tooltip on its child .vault-tt element. */
.vault-pack-card:hover         .vault-tt::after,
.vault-pack-card:focus-within  .vault-tt::after,
.vault-pack-card:hover         .vault-tt::before,
.vault-pack-card:focus-within  .vault-tt::before,
.vault-pack-item:hover         .vault-tt::after,
.vault-pack-item:focus-within  .vault-tt::after,
.vault-pack-item:hover         .vault-tt::before,
.vault-pack-item:focus-within  .vault-tt::before,
.vault-tier-col:hover          .vault-tt::after,
.vault-tier-col:focus-within   .vault-tt::after,
.vault-tier-col:hover          .vault-tt::before,
.vault-tier-col:focus-within   .vault-tt::before,
.vault-unique-pillar:hover     .vault-tt::after,
.vault-unique-pillar:focus-within .vault-tt::after,
.vault-unique-pillar:hover     .vault-tt::before,
.vault-unique-pillar:focus-within .vault-tt::before,
.vault-pillar-tile:hover       .vault-tt::after,
.vault-pillar-tile:focus-within .vault-tt::after,
.vault-pillar-tile:hover       .vault-tt::before,
.vault-pillar-tile:focus-within .vault-tt::before,
.vault-battle-tile:hover       .vault-tt::after,
.vault-battle-tile:focus-within .vault-tt::after,
.vault-battle-tile:hover       .vault-tt::before,
.vault-battle-tile:focus-within .vault-tt::before,
.vault-mode-tile:hover         .vault-tt::after,
.vault-mode-tile:focus-within  .vault-tt::after,
.vault-mode-tile:hover         .vault-tt::before,
.vault-mode-tile:focus-within  .vault-tt::before,
.vault-market-tile:hover       .vault-tt::after,
.vault-market-tile:focus-within .vault-tt::after,
.vault-market-tile:hover       .vault-tt::before,
.vault-market-tile:focus-within .vault-tt::before,
.vault-collection-stat:hover   .vault-tt::after,
.vault-collection-stat:focus-within .vault-tt::after,
.vault-collection-stat:hover   .vault-tt::before,
.vault-collection-stat:focus-within .vault-tt::before,
.vault-starter-card:hover      .vault-tt::after,
.vault-starter-card:focus-within .vault-tt::after,
.vault-starter-card:hover      .vault-tt::before,
.vault-starter-card:focus-within .vault-tt::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Rendering modifiers for tooltips near viewport edges */
.vault-tt--right::after { left: auto; right: 0; transform: translateX(0) translateY(8px); }
.vault-tt--right:hover::after, .vault-tt--right:focus::after { transform: translateX(0) translateY(0); }
.vault-tt--right::before { left: auto; right: 14px; transform: translateX(0) translateY(8px); }
.vault-tt--right:hover::before, .vault-tt--right:focus::before { transform: translateX(0) translateY(0); }

.vault-tt--left::after { left: 0; transform: translateX(0) translateY(8px); }
.vault-tt--left:hover::after, .vault-tt--left:focus::after { transform: translateX(0) translateY(0); }
.vault-tt--left::before { left: 14px; transform: translateX(0) translateY(8px); }
.vault-tt--left:hover::before, .vault-tt--left:focus::before { transform: translateX(0) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .vault-tt::after, .vault-tt::before {
    transition: opacity 0.15s ease;
    transform: translateX(-50%);
  }
  .vault-tt:hover::after, .vault-tt:focus::after,
  .vault-tt:hover::before, .vault-tt:focus::before { transform: translateX(-50%); }
}

/* ----------------------------------------------------------------
   SIDE TABLE OF CONTENTS
   Fixed-position vertical chapter index on the right edge. Each item
   is a small dot + Roman number; the active section's title slides in
   beside it. Hover any item to peek at its label. Click to smooth-
   scroll. Hidden on tablet/mobile (would crowd the cinematic content).
---------------------------------------------------------------- */
.vault-toc {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.vault-toc.is-ready {
  opacity: 1;
}
.vault-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}
.vault-toc__item {
  pointer-events: auto;
}
.vault-toc__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  text-decoration: none;
  font-family: var(--font-mono);
  color: var(--text-dim);
  flex-direction: row-reverse;
  transition: color 0.3s ease;
}
.vault-toc__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  position: relative;
  transition: color 0.3s ease;
}
.vault-toc__num::before {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.25);
  transform: translateY(-50%);
  transition: background 0.3s ease, width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}
.vault-toc__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.3s ease;
  white-space: nowrap;
  padding-right: 18px;
}
.vault-toc__link:hover .vault-toc__label,
.vault-toc__item.is-active .vault-toc__label {
  opacity: 1;
  transform: translateX(0);
}
.vault-toc__link:hover .vault-toc__num,
.vault-toc__item.is-active .vault-toc__num {
  color: var(--accent-gold-bright);
}
.vault-toc__link:hover .vault-toc__num::before,
.vault-toc__item.is-active .vault-toc__num::before {
  background: var(--accent-gold-bright);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 12px var(--accent-gold-bright);
}
.vault-toc__link:hover .vault-toc__label,
.vault-toc__item.is-active .vault-toc__label {
  color: var(--accent-gold-bright);
}

@media (max-width: 1180px) {
  .vault-toc { display: none; }
}

/* ----------------------------------------------------------------
   SECTION XV - STEP INTO THE VAULT (the conversion close)
   The page's rhetorical close. Designed to be the most visually
   weighted moment after the cinematic Hero. Generous breathing room,
   large typography, ceremonial pacing, single focal CTA. Built around
   Lewis's locked YouTube to Patreon conversion playbook.
---------------------------------------------------------------- */
.vault-close {
  position: relative;
  padding: clamp(6rem, 12vw, 11rem) 0 clamp(5rem, 10vw, 8rem);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(201, 162, 39, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(74, 222, 128, 0.04) 0%, transparent 55%),
    var(--vault-deep);
}
.vault-close::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  opacity: 0.45;
}
.vault-close::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold-dim), transparent);
  opacity: 0.3;
}

/* Three-line ritual title. Each line stacks vertically. The middle
   line gets the gold-gradient text fill so the eye lands on
   "Patreon kept them" as the structural pivot of the sentence. */
.vault-close__title {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: center;
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.vault-close__title span {
  display: block;
}
.vault-close__title span:nth-child(2) {
  background: linear-gradient(180deg,
    var(--accent-gold-bright) 0%,
    var(--accent-gold) 60%,
    var(--accent-gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(201, 162, 39, 0.25);
}
.vault-close__title span:nth-child(3) {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.85em;
  margin-top: 0.25rem;
}

/* ----------------------------------------------------------------
   Value stack - hierarchical bullet list with 3D-anime glyphs.
   Six items, two ranked as 'hero' (bigger glyph + lead type), one
   as 'kicker' (italic, dim, end-of-list flourish), three standard.
   The hierarchy lets the eye land on the killer benefits first,
   then absorb the supporting ones, then lift on the closer.
---------------------------------------------------------------- */
.vault-close__stack {
  list-style: none;
  margin: clamp(3rem, 5vw, 4rem) auto clamp(3rem, 5vw, 4.5rem);
  padding: 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

.vault-close__stack-item {
  display: grid;
  /* Fixed 88px gutter on every bullet so glyphs of different sizes
     (48/64/80) all land on the same vertical centerline regardless
     of rank. Without this the hero (80px) bullets pulled the column
     wider, kicker (48px) sat left of the standard (64px), and the
     whole stack lost its visual axis. */
  grid-template-columns: 88px 1fr;
  gap: clamp(0.85rem, 1.8vw, 1.4rem);
  align-items: center;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.6;
  color: var(--text-primary);
  position: relative;
  padding: 0.4rem 0;
}

.vault-close__stack-glyph {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  /* Centers the glyph wrapper inside the 88px column so all sizes
     share the same axis. */
  justify-self: center;
}
.vault-close__stack-glyph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(201, 162, 39, 0.35));
  position: relative;
  z-index: 1;
}

.vault-close__stack-text {
  display: block;
}
.vault-close__stack-lead {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-gold-bright);
  margin-bottom: 0.2rem;
  text-shadow: 0 0 14px rgba(232, 215, 138, 0.18);
}

/* Hero rank - the two heaviest-hitting bullets get bigger glyphs,
   a soft gold halo behind the glyph, and lifted typography. Note we
   keep the 88px grid column so the bigger 80px glyph still centers
   on the same axis as the standard 64px ones. */
.vault-close__stack-item[data-rank="hero"] {
  font-size: clamp(1.05rem, 1.55vw, 1.18rem);
}
.vault-close__stack-item[data-rank="hero"] .vault-close__stack-glyph {
  width: 80px;
  height: 80px;
}
.vault-close__stack-item[data-rank="hero"] .vault-close__stack-glyph::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.25) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.vault-close__stack-item[data-rank="hero"] .vault-close__stack-glyph img {
  filter: drop-shadow(0 0 18px rgba(232, 215, 138, 0.5));
}
.vault-close__stack-item[data-rank="hero"] .vault-close__stack-lead {
  font-size: 1.25em;
}

/* Kicker rank - italic flourish at the end of the list, dimmer and
   smaller, sets up the price block as the next visual beat. */
.vault-close__stack-item[data-rank="kicker"] {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(201, 162, 39, 0.18);
}
.vault-close__stack-item[data-rank="kicker"] .vault-close__stack-glyph {
  width: 48px;
  height: 48px;
  opacity: 0.85;
}
.vault-close__stack-item[data-rank="kicker"] em {
  font-style: italic;
  color: var(--text-secondary);
}

/* Mobile - glyph stacks above text, centered, tighter spacing. */
@media (max-width: 640px) {
  .vault-close__stack-item,
  .vault-close__stack-item[data-rank="hero"],
  .vault-close__stack-item[data-rank="kicker"] {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.85rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .vault-close__stack-glyph,
  .vault-close__stack-item[data-rank="hero"] .vault-close__stack-glyph {
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-close__stack-item[data-rank="hero"] .vault-close__stack-glyph::before {
    animation: none;
  }
}

/* The big call - the focal anchor of the entire close section.
   Centered, generous space, gold-bordered card with the price as
   the visual hero and the CTA as the action. */
.vault-close__call {
  position: relative;
  max-width: 540px;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 215, 138, 0.08) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
  border: 1px solid var(--accent-gold);
  border-radius: 8px;
  box-shadow:
    0 0 40px rgba(201, 162, 39, 0.15),
    0 24px 60px rgba(0, 0, 0, 0.55);
}
.vault-close__call::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-gold-bright), transparent);
  opacity: 0.7;
}
.vault-close__call-overline {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin: 0 0 1rem;
  opacity: 0.85;
}
.vault-close__call-price {
  /* Line-height 1 was clipping the descender on the "9" because of
     the background-clip: text gradient — text-fill doesn't include
     descender room when the line box is exactly 1em tall. Lifted
     to 1.15 + a small bottom padding so the gold drop-shadow has
     somewhere to land too. */
  margin: 0 0 0.6rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1.15;
  padding-bottom: 0.15em;
}
.vault-close__call-price-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 4.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  background: linear-gradient(180deg,
    var(--accent-gold-bright) 0%,
    var(--accent-gold) 50%,
    var(--accent-gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 50px rgba(201, 162, 39, 0.35);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}
.vault-close__call-price-unit {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.vault-close__call-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0 0 0.85rem;
}
/* Reinforces that the TCG vault is ADDITIVE to existing Patreon perks,
   not a replacement. Centered italic dim line that flows naturally
   inside the centered call card. Gold highlights on the three key
   perks (early access, live drops, "above") draw the eye without a
   competing border treatment. */
.vault-close__call-stack {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 auto 1.75rem;
  max-width: 440px;
  line-height: 1.6;
}
.vault-close__call-stack strong {
  font-style: normal;
  color: var(--accent-gold-bright);
  font-weight: 600;
}
.vault-close__call-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  background: linear-gradient(180deg, var(--accent-gold-bright) 0%, var(--accent-gold) 100%);
  color: var(--vault-deep);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid var(--accent-gold-bright);
  box-shadow:
    0 0 0 0 rgba(201, 162, 39, 0),
    0 14px 32px rgba(201, 162, 39, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vault-close__call-btn svg { transition: transform 0.25s ease; }

/* Existing-patron-shortcut line, sits directly under the Join now
   button so anyone who already pledges sees the link route at the
   exact moment they're deciding. Small, dim, italic so it doesn't
   compete with the gold CTA but also doesn't get missed. */
.vault-close__call-existing {
  margin: 1.1rem 0 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.vault-close__call-existing-link {
  color: var(--accent-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 39, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.vault-close__call-existing-link:hover {
  color: var(--accent-gold-bright);
  border-bottom-color: var(--accent-gold-bright);
}
.vault-close__call-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 24px rgba(232, 215, 138, 0.5),
    0 18px 44px rgba(201, 162, 39, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.55);
}
.vault-close__call-btn:hover svg { transform: translateX(4px); }

/* Reassurance block - now a multi-paragraph emotional arc that
   removes the "Lewis is locking us out" objection AND builds momentum
   into the closing ritual. Last line ('Come with.') is the visual
   payoff - upsized, gold, italic Cinzel. */
.vault-close__reassure {
  max-width: 620px;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.88rem, 1.3vw, 1rem);
  line-height: 1.7;
  color: var(--text-secondary);
}
.vault-close__reassure p {
  margin: 0 0 1.1rem;
}
.vault-close__reassure p:last-child {
  margin-bottom: 0;
}
.vault-close__reassure-call {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-gold-bright);
  text-shadow: 0 0 20px rgba(232, 215, 138, 0.35);
  margin-top: 1.5rem !important;
}

/* The closing ritual lines - the most emotional moment of the page.
   Cinzel italic, gold gradient, biggest visual weight after the price. */
.vault-close__ritual {
  text-align: center;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.vault-close__ritual-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin: 0;
  background: linear-gradient(180deg,
    var(--accent-gold-bright) 0%,
    var(--accent-gold) 60%,
    var(--accent-gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(201, 162, 39, 0.2);
}
.vault-close__ritual-line--quiet {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  background: none;
  -webkit-text-fill-color: var(--text-primary);
  color: var(--text-primary);
  opacity: 0.85;
  text-shadow: none;
}

/* Edge cases - small lines for the rare patron who lands here without
   knowing they need to link, or the ex-YouTube member who needs the
   parity offer below. Quiet treatment so they don't compete with
   the main close. */
.vault-close__edges {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: clamp(2rem, 3vw, 2.5rem);
  border-top: 1px dotted rgba(201, 162, 39, 0.12);
}
.vault-close__edges-line {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin: 0;
}
.vault-close__edges-link {
  color: var(--accent-gold);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-gold-dim);
  transition: color 0.3s ease, border-color 0.3s ease;
  margin-left: 0.25em;
}
.vault-close__edges-link:hover {
  color: var(--accent-gold-bright);
  border-bottom-color: var(--accent-gold-bright);
}

@media (max-width: 720px) {
  .vault-close__call { padding: 2rem 1.25rem; }
  .vault-close__call-btn { padding: 0.85rem 1.5rem; font-size: 0.78rem; letter-spacing: 0.18em; }
}

/* ----------------------------------------------------------------
   ALPHA / STAGED LAUNCH DISCLAIMER
   Lives inside the fineprint footer but gets a slightly more
   prominent treatment so people actually read the expectations.
---------------------------------------------------------------- */
.vault-fineprint__line--alpha {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(201, 162, 39, 0.04);
  border-left: 2px solid var(--accent-gold-dim);
  border-radius: 0 4px 4px 0;
  text-align: left;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.vault-fineprint__line--alpha strong {
  color: var(--accent-gold);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------
   Reveal-on-scroll: opacity baseline; JS toggles .vault-reveal--in
---------------------------------------------------------------- */
.vault-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}
.vault-reveal.vault-reveal--in {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------
   Reduced motion: kill transforms, keep opacity
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vault-particle,
  .vault-ring--outer,
  .vault-ring--inner,
  .vault-crest,
  .vault-hero__scroll-cue {
    animation: none !important;
  }
  .vault-reveal {
    transform: none;
    transition: opacity 0.4s ease;
  }
  .vault-pack-card {
    transform: none !important;
  }
  .vault-tier-col.is-current {
    transform: none;
  }
}

/* ----------------------------------------------------------------
   STICKY CONVERSION BAR
   Lives across the bottom of the viewport. The accent border + glow
   shift colour as the user scrolls between sections via --cta-accent
   set on body by /js/vault-page.js. Glass effect over a near-opaque
   dark base so the bar always reads against busy backgrounds.
---------------------------------------------------------------- */
.vault-page {
  /* Reserve space at the bottom so content can scroll past the bar
     without being permanently obscured. Matches bar height. */
  padding-bottom: 76px;
}
@media (max-width: 720px) {
  .vault-page { padding-bottom: 110px; }
}

.vault-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg,
    rgba(13, 12, 18, 0.92) 0%,
    rgba(5, 5, 7, 0.97) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--cta-accent, var(--accent-gold));
  box-shadow:
    0 -2px 0 var(--cta-glow, rgba(201,162,39,0.30)),
    0 -16px 40px rgba(0,0,0,0.5);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.vault-cta-bar::before {
  /* A subtle accent glow line that brightens with the section colour */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--cta-accent, var(--accent-gold)),
    transparent);
  opacity: 0.7;
  transition: background 0.5s ease;
}

.vault-cta-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 76px;
}

.vault-cta-bar__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.vault-cta-bar__hook {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: 0.02em;
  color: var(--cta-accent, var(--accent-gold-bright));
  line-height: 1.2;
  text-shadow: 0 0 14px var(--cta-glow, rgba(201,162,39,0.4));
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.vault-cta-bar__stat {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .vault-cta-bar__stat {
    white-space: normal;
    font-size: 0.78rem;
  }
}

.vault-cta-bar__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0) 100%);
  border: 1px solid var(--cta-accent, var(--accent-gold));
  border-radius: 4px;
  color: var(--cta-accent, var(--accent-gold-bright));
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.5s ease, color 0.5s ease,
              box-shadow 0.3s ease, transform 0.2s ease;
  box-shadow: 0 0 16px var(--cta-glow, rgba(201,162,39,0.3)) inset;
}
.vault-cta-bar__cta:hover {
  background: var(--cta-accent, var(--accent-gold));
  color: var(--vault-deep);
  box-shadow: 0 8px 24px var(--cta-glow, rgba(201,162,39,0.5));
  transform: translateY(-1px);
}
.vault-cta-bar__cta svg { transition: transform 0.2s ease; }
.vault-cta-bar__cta:hover svg { transform: translateX(3px); }

@media (max-width: 720px) {
  .vault-cta-bar__inner {
    padding: 0.75rem 1rem;
    gap: 0.85rem;
    min-height: 110px;
    flex-direction: column;
    align-items: stretch;
  }
  .vault-cta-bar__cta {
    justify-content: center;
    padding: 0.65rem 1rem;
  }
}

/* Hide the bar when the page is in flag-off placeholder mode. */
.vault-flag-off .vault-cta-bar { display: none; }

/* Reduced motion: still shift colour, just no transitions */
@media (prefers-reduced-motion: reduce) {
  .vault-cta-bar,
  .vault-cta-bar::before,
  .vault-cta-bar__hook,
  .vault-cta-bar__cta { transition: none; }
}

/* Per-section accent palette. Body class set by JS scrollspy.
   Adjacent sections kept visually distinct so the colour shift reads
   as the user scrolls between them. */
.vault-page[data-vault-section="hero"]       { --cta-accent: #e8d78a; --cta-glow: rgba(232, 215, 138, 0.45); }
.vault-page[data-vault-section="totals"]     { --cta-accent: #4ade80; --cta-glow: rgba(74, 222, 128, 0.45); }
.vault-page[data-vault-section="tiers"]      { --cta-accent: #c9a227; --cta-glow: rgba(201, 162, 39, 0.45); }
.vault-page[data-vault-section="inventory"]  { --cta-accent: #d18a52; --cta-glow: rgba(209, 138, 82, 0.45); }
.vault-page[data-vault-section="rarity"]     { --cta-accent: #ec4899; --cta-glow: rgba(236, 72, 153, 0.50); }
.vault-page[data-vault-section="uniques"]    { --cta-accent: #e8d78a; --cta-glow: rgba(232, 215, 138, 0.50); }
.vault-page[data-vault-section="starters"]   { --cta-accent: #94a3b8; --cta-glow: rgba(148, 163, 184, 0.40); }
.vault-page[data-vault-section="collection"] { --cta-accent: #a855f7; --cta-glow: rgba(168, 85, 247, 0.45); }
.vault-page[data-vault-section="customise"]  { --cta-accent: #6366f1; --cta-glow: rgba(99, 102, 241, 0.50); }
.vault-page[data-vault-section="pillars"]    { --cta-accent: #22d3ee; --cta-glow: rgba(34, 211, 238, 0.45); }
.vault-page[data-vault-section="battles"]    { --cta-accent: #ef4444; --cta-glow: rgba(239, 68, 68, 0.50); }
.vault-page[data-vault-section="modes"]      { --cta-accent: #f97316; --cta-glow: rgba(249, 115, 22, 0.45); }
.vault-page[data-vault-section="blood"]      { --cta-accent: #dc2626; --cta-glow: rgba(220, 38, 38, 0.55); }
.vault-page[data-vault-section="market"]     { --cta-accent: #10b981; --cta-glow: rgba(16, 185, 129, 0.45); }
.vault-page[data-vault-section="close"]      { --cta-accent: #e8d78a; --cta-glow: rgba(232, 215, 138, 0.55); }

/* ----------------------------------------------------------------
   LIVE GAME-WIDE STATS ORB
   Floating sphere top-right of the viewport. Gentle bob + halo pulse
   give it a "magic crystal" feel. Hidden during the cinematic Hero
   so it doesn't undercut the crest reveal, then fades in once the
   user scrolls past. Hover (desktop) reveals the per-tier breakdown
   panel. Click pops it satisfyingly + dismisses for the session.
---------------------------------------------------------------- */
.vault-orb {
  position: fixed;
  top: 156px;      /* Lower than nav so the halo + ring glow has breathing room */
  right: 56px;     /* Slight inset from the right edge */
  z-index: 80;
  width: 156px;
  height: 156px;
  pointer-events: none;        /* let children opt back in */
  opacity: 0;
  transform: translateY(-12px) scale(0.92);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vault-orb[hidden] { display: none; }
.vault-orb.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.vault-orb.is-popped {
  pointer-events: none;
  animation: vault-orb-pop 700ms cubic-bezier(0.5, 0, 0.7, 1) forwards;
}
@keyframes vault-orb-pop {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  20%  { opacity: 1; transform: translateY(0) scale(1.18); filter: brightness(1.6) saturate(1.4); }
  60%  { opacity: 0.55; transform: translateY(0) scale(0.7) rotate(8deg); filter: brightness(1.2); }
  100% { opacity: 0; transform: translateY(0) scale(0.05); filter: brightness(0.6); }
}

.vault-orb__sphere {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    /* Hot core */
    radial-gradient(circle at 35% 32%, rgba(255, 245, 200, 0.85) 0%, rgba(255, 245, 200, 0) 30%),
    /* Mid glow */
    radial-gradient(circle at 50% 50%, rgba(232, 215, 138, 0.55) 0%, rgba(201, 162, 39, 0.25) 35%, rgba(0, 0, 0, 0.5) 75%),
    /* Cold base */
    radial-gradient(circle at 65% 75%, rgba(20, 18, 12, 1) 0%, rgba(5, 5, 7, 1) 100%);
  border: 1px solid rgba(232, 215, 138, 0.55);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  font: inherit;
  color: inherit;
  outline: none;
  box-shadow:
    0 0 24px rgba(232, 215, 138, 0.35),
    0 0 60px rgba(201, 162, 39, 0.18),
    inset 0 0 30px rgba(0, 0, 0, 0.6);
  animation: vault-orb-bob 8s ease-in-out infinite;
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
}
.vault-orb__sphere:hover {
  border-color: rgba(232, 215, 138, 0.85);
  box-shadow:
    0 0 36px rgba(232, 215, 138, 0.55),
    0 0 80px rgba(201, 162, 39, 0.28),
    inset 0 0 30px rgba(0, 0, 0, 0.55);
}
.vault-orb__sphere:focus-visible {
  outline: 2px solid var(--accent-gold-bright);
  outline-offset: 4px;
}

/* Subtle glass highlight reflecting off the top-left */
.vault-orb__sphere::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 14%;
  width: 38%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.45) 0%, transparent 60%);
  pointer-events: none;
  filter: blur(2px);
}

/* Breathing halo around the sphere */
.vault-orb__halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(232, 215, 138, 0.20) 65%, transparent 80%);
  pointer-events: none;
  animation: vault-orb-halo-pulse 4s ease-in-out infinite;
}
@keyframes vault-orb-halo-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1.0; transform: scale(1.12); }
}

/* Two slowly-rotating runic rings outside the sphere */
.vault-orb__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(232, 215, 138, 0.30);
  pointer-events: none;
}
.vault-orb__ring--outer {
  inset: -6px;
  animation: vault-orb-spin 70s linear infinite;
}
.vault-orb__ring--inner {
  inset: 4px;
  border-style: dotted;
  border-color: rgba(232, 215, 138, 0.18);
  animation: vault-orb-spin 95s linear infinite reverse;
}
@keyframes vault-orb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Multi-axis wander: the sphere drifts, lifts, tilts on its own
   slightly out-of-sync rhythm so it reads as "magic hovering object"
   instead of "thing bobbing on water". 8s cycle keeps it organic. */
@keyframes vault-orb-bob {
  0%   { transform: translate(0,    0)    rotate(0deg); }
  18%  { transform: translate(-3px, -5px) rotate(-1.2deg); }
  35%  { transform: translate(2px,  -8px) rotate(1.5deg); }
  52%  { transform: translate(5px,  -3px) rotate(2deg); }
  70%  { transform: translate(1px,  3px)  rotate(0.5deg); }
  85%  { transform: translate(-4px, -1px) rotate(-1.5deg); }
  100% { transform: translate(0,    0)    rotate(0deg); }
}

/* Inner content: the actual stats */
.vault-orb__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  text-align: center;
  padding: 0 0.5rem;
  pointer-events: none;
}
.vault-orb__cards {
  font-family: var(--font-display);
  font-weight: 700;
  /* Base size, scaled by --orb-num-scale (set in JS from string length
     so "750,000" doesn't break out of the sphere as the number grows) */
  font-size: calc(clamp(1.6rem, 3vw, 2.2rem) * var(--orb-num-scale, 1));
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent-gold-bright);
  transition: font-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Heavy stacked shadow so gold text stays readable on the gold
     sphere gradient. Tight dark edge for definition, then progressively
     wider dark halos for separation, capped with a soft gold glow. */
  text-shadow:
    0 2px 4px   rgba(0, 0, 0, 1),
    0 0 10px   rgba(0, 0, 0, 0.95),
    0 0 20px   rgba(0, 0, 0, 0.85),
    0 0 32px   rgba(0, 0, 0, 0.55),
    0 0 24px   rgba(232, 215, 138, 0.45);
}
.vault-orb__cards-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-top: 0.18rem;
  opacity: 0.95;
  /* Drop shadow so the label reads against the gold sphere gradient
     no matter where on the orb it ends up during the wander animation */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(0, 0, 0, 0.7);
}
.vault-orb__patrons {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--text-primary);
  margin-top: 0.55rem;
  opacity: 0.95;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.6);
}
.vault-orb__patrons span {
  font-family: var(--font-display);
  color: var(--accent-gold);
  font-weight: 600;
}

/* PARTICLE BURST: 6 small dots that explode outward on pop */
.vault-orb__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.vault-orb__particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(232, 215, 138, 0.95);
  box-shadow: 0 0 10px rgba(232, 215, 138, 0.85);
}
.vault-orb.is-popped .vault-orb__particles { opacity: 1; }
.vault-orb.is-popped .vault-orb__particle {
  animation: vault-orb-particle-burst 600ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes vault-orb-particle-burst {
  0%   { transform: rotate(var(--pa)) translateY(0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: rotate(var(--pa)) translateY(-90px) scale(0.4); opacity: 0; }
}

/* BREAKDOWN PANEL: hover-only on desktop, sits below the sphere */
.vault-orb__breakdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 240px;
  padding: 1rem 1.1rem 0.85rem;
  background: rgba(13, 12, 18, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 215, 138, 0.4);
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(232, 215, 138, 0.15);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 81;
}
.vault-orb:hover .vault-orb__breakdown,
.vault-orb:focus-within .vault-orb__breakdown {
  opacity: 1;
  transform: translateY(0);
}
.vault-orb__breakdown-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin: 0 0 0.75rem;
  text-align: center;
  opacity: 0.9;
}
.vault-orb__breakdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.vault-orb__breakdown-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--text-secondary);
}
.vault-orb__breakdown-list li span:last-child {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 600;
}
.vault-orb__breakdown-tier {
  font-size: 0.78rem;
}
.vault-orb__breakdown-tier[data-tier="paid"] { color: #e8d78a; }   /* gold */
.vault-orb__breakdown-tier[data-tier="free"] { color: #94a3b8; }   /* slate */
.vault-orb__breakdown-foot {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: center;
  margin: 0.85rem 0 0;
  line-height: 1.4;
}

/* Mobile: smaller orb, tucked under the nav, breakdown hidden
   (hover doesn't really work on touch and the sphere itself is the
   important part - the breakdown is desktop nice-to-have). */
@media (max-width: 720px) {
  .vault-orb {
    top: 80px;
    right: 14px;
    width: 92px;
    height: 92px;
  }
  .vault-orb__cards { font-size: 1.15rem; }
  .vault-orb__cards-label { font-size: 0.5rem; letter-spacing: 0.14em; }
  .vault-orb__patrons { font-size: 0.6rem; margin-top: 0.3rem; }
  .vault-orb__breakdown { display: none; }
}

/* Hide entirely when the page is in flag-off placeholder mode */
.vault-flag-off .vault-orb { display: none; }

/* Reduced motion: keep the visual but kill the animations */
@media (prefers-reduced-motion: reduce) {
  .vault-orb,
  .vault-orb__sphere,
  .vault-orb__halo,
  .vault-orb__ring--outer,
  .vault-orb__ring--inner {
    animation: none;
    transition: opacity 0.3s ease;
  }
}

/* ----------------------------------------------------------------
   Cinematic divider banner (Collect · Trade · Battle).
   Sits between Section I (hero) and Section II (totals) as a scene-
   transition. Full bleed, edges feathered to dark so it integrates
   with the surrounding deep-black sections without looking like a
   pasted-in image.
---------------------------------------------------------------- */
.vault-divider-banner {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-dark);
  /* Mask the top + bottom edges into the dark surrounds so the banner
     reads as a scene transition, not a pasted-in image card. Soft
     gradient fade preserves the centre artwork at full clarity. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%);
}
.vault-divider-banner__image {
  display: block;
  width: 100%;
  height: auto;
  /* Image native is ~2.81:1; preserve that exactly so the COLLECT /
     TRADE / BATTLE vignettes don't get squashed or cropped. */
  aspect-ratio: 1774 / 631;
  object-fit: cover;
  filter: drop-shadow(0 0 32px rgba(201, 162, 39, 0.15));
}

/* Mobile: reduce vertical bleed since the banner is narrower. */
@media (max-width: 720px) {
  .vault-divider-banner {
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg,
      transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
}