/* ==========================================================================
   THE THRONE PROJECT — public/styles.css
   Hand-written. No framework, no build step, no third-party host.

   Structure
     00  Tokens              (SPEC 7.1 palette, 7.2 type scale, 7.3 layout)
     01  Fonts               (self-hosted; font-src 'self')
     02  Reset and base
     03  Utilities
     04  Ambient background
     05  Header
     06  Buttons
     07  The hero
     08  Stat band
     09  Claim panel, forms, the amount picker
     10  Rules
     11  The Fallen
     12  Leaderboard
     13  Footer, sticky claim bar, banners
     14  Legal / out / return / crowned
     15  THE THRONE HAS FALLEN
     16  Motion inventory + reduced motion

   Rules enforced throughout (SPEC 7.11)
     - No hex outside the token block. Every colour is a var().
     - --text-muted never sits on --ink-600, including hover states.
     - --text-faint never styles text below 24px; --gold-700 never styles text.
     - Every focusable element has a visible :focus-visible ring.
     - Every price and timer is tabular with a reserved ch width.
     - 100svh, never 100vh. Inputs are >= 16px on mobile.
     - Dark only. No light mode, no theme toggle. Crimson appears ONLY in the
       dethroning event — if you see it in the resting page, that is a bug.
   ========================================================================== */

/* ==========================================================================
   00  TOKENS
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Ink (surfaces, darkest to lightest) ---- */
  --ink-900: #07070A;
  --ink-800: #0E0E13;
  --ink-700: #16161D;
  --ink-600: #1F1F28;
  --ink-500: #2C2C38;

  /* ---- Gold (the accent) ---- */
  --gold-100: #FFF3D0;
  --gold-300: #F2D08A;
  --gold-400: #E8C167;
  --gold-500: #D4AF37;
  --gold-600: #B08D2A;
  --gold-700: #7A5F16;

  /* ---- Crimson (the fall — reserved) ---- */
  --crimson-400: #E05A4E;
  --crimson-600: #8E2A22;
  --crimson-800: #3A0F0C;

  /* ---- Text ---- */
  --text-primary: #F5F1E8;
  --text-secondary: #B9B3A6;
  --text-muted: #878176;
  --text-faint: #6B665C;
  --text-on-gold: #07070A;

  /* ---- Lines ---- */
  --line-hair: rgba(245, 241, 232, 0.08);
  --line-soft: #2C2C38;
  --line-strong: #78736A;
  --line-gold: rgba(212, 175, 55, 0.22);
  --line-gold-strong: #B08D2A;

  /* ---- Effects ---- */
  --glow-gold: radial-gradient(closest-side,
                 rgba(212,175,55,0.34) 0%, rgba(212,175,55,0.14) 42%, rgba(212,175,55,0.00) 100%);
  --glow-gold-cold: radial-gradient(closest-side,
                 rgba(212,175,55,0.14) 0%, rgba(212,175,55,0.05) 45%, transparent 100%);
  --glow-crimson: radial-gradient(closest-side,
                 rgba(224,90,78,0.55) 0%, rgba(142,42,34,0.42) 45%, rgba(58,15,12,0.92) 100%);
  --foil: linear-gradient(180deg, #FFF3D0 0%, #F2D08A 26%, #E8C167 52%, #B08D2A 100%);
  /* The CTA face, quoted from SPEC 7.7. Declared here so no rule below this
     block contains a raw hex value. #BE9A2E is the pressed-edge gold; it exists
     only inside these two gradients. */
  --grad-gold-cta: linear-gradient(180deg, #F2D08A 0%, #D4AF37 55%, #BE9A2E 100%);
  --grad-gold-chip: linear-gradient(180deg, #F2D08A 0%, #D4AF37 100%);
  --sweep: linear-gradient(100deg,
             rgba(255,243,208,0) 0%, rgba(255,243,208,0) 38%, rgba(255,243,208,0.55) 50%,
             rgba(255,243,208,0) 62%, rgba(255,243,208,0) 100%);

  --shadow-card: 0 1px 0 0 rgba(245,241,232,0.04) inset, 0 12px 32px -12px rgba(0,0,0,0.9);
  --shadow-throne: 0 1px 0 0 rgba(255,243,208,0.10) inset,
                   0 40px 120px -40px rgba(212,175,55,0.22),
                   0 24px 64px -24px rgba(0,0,0,0.95);
  --shadow-cta: 0 8px 24px -8px rgba(212,175,55,0.45);

  --selection-bg: rgba(212,175,55,0.28);

  /* ---- Easings ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-hard: cubic-bezier(0.40, 0.00, 1.00, 1.00);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1);
  --ease-standard: cubic-bezier(0.20, 0.00, 0.00, 1.00);

  /* ---- Families ---- */
  --font-title: 'Cinzel', 'Optima', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-display: 'Cormorant', 'Cormorant Fallback', 'Hoefler Text', 'Baskerville',
                  'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Type scale ---- */
  --fs-wordmark: clamp(0.875rem, 0.78rem + 0.42vw, 1.125rem);
  --fs-eyebrow: 0.6875rem;
  --fs-ruler-name: clamp(2rem, 1.06rem + 4.2vw, 4.25rem);
  --fs-ruler-name-long: clamp(1.75rem, 1rem + 3vw, 3rem);
  --fs-msg-short: clamp(2.25rem, 1.2rem + 4.7vw, 4rem);
  --fs-msg-medium: clamp(1.625rem, 1rem + 2.8vw, 2.75rem);
  --fs-msg-long: clamp(1.25rem, 0.94rem + 1.4vw, 1.875rem);
  --fs-section: clamp(1.5rem, 1.2rem + 1.35vw, 2.25rem);
  --fs-stat-value: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem);
  --fs-price-hero: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-lg: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-micro: 0.6875rem;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 820px;
  --throne-inner: 960px;
  --gutter: 20px;
  --grid-gap: 16px;
  --header-h: 56px;

  /* ---- Spacing ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* ---- Radii ---- */
  --r-chip: 4px; --r-ctrl: 8px; --r-card: 12px; --r-panel: 18px;
  --r-crest: 26%; --r-pill: 999px;

  /* ---- Z-index ---- */
  --z-base: 0; --z-sticky-header: 100; --z-sticky-cta: 200; --z-popover: 300;
  --z-modal-backdrop: 400; --z-modal: 500; --z-fallen: 900; --z-toast: 1000;

  /* ---- Section rhythm ---- */
  --section-pad: var(--sp-16);
}

@media (min-width: 640px) {
  :root { --gutter: 32px; --grid-gap: 20px; --header-h: 60px; --section-pad: var(--sp-20); }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; --grid-gap: 24px; --header-h: 64px; --section-pad: var(--sp-24); }
}
@media (min-width: 1440px) {
  :root { --gutter: 56px; }
}

/* ==========================================================================
   01  FONTS — self-hosted, subsetted. Nothing is fetched from a third party.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TYPEFACES — Cinzel (roman capitals), Cormorant (the ruler's own words),
   Inter (every piece of UI and every number).

   These are loaded from Google Fonts by the <link> in src/views/layout.ts, and
   the CSP allows exactly those two hosts and no others:

       style-src ... https://fonts.googleapis.com
       font-src   'self' https://fonts.gstatic.com

   TO SELF-HOST INSTEAD (SPEC's preferred end state — zero third-party requests
   from a visitor's browser, and `font-src 'self'` alone):
     1. drop subsetted variable woff2 files into public/fonts/,
     2. uncomment the three @font-face rules below,
     3. delete the Google Fonts <link> block in src/views/layout.ts,
     4. narrow FONT_SRC/STYLE_SRC in src/index.ts back to 'self'.
   Nothing else changes; the family names and the fallback stacks are identical
   either way, which is the point of doing it through variables.

@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/cinzel-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Cormorant';
  src: url('/fonts/cormorant-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-display: swap; font-style: normal;
}
   -------------------------------------------------------------------------- */

/* Metric-matched fallback so the hero does not jump on swap. Kept in ALL
   configurations — it is what stops a layout jolt while the webfont loads. */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 88%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%;
}

/* ==========================================================================
   02  RESET AND BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink-500) var(--ink-900);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text-secondary);
  font: 400 var(--fs-base)/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
code { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--gold-400); text-decoration-color: var(--line-gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-300); text-decoration-color: var(--gold-600); }

::selection { background: var(--selection-bg); color: var(--text-primary); }

/* One global focus rule. Never `outline: none` without a replacement. */
:focus-visible {
  outline: 2px solid var(--gold-100);
  outline-offset: 3px;
  border-radius: inherit;
}

/* ==========================================================================
   03  UTILITIES
   ========================================================================== */

.container,
.site-header__inner,
.site-footer__inner,
.stats__band,
.claim,
.rules,
.fallen,
.leaderboard,
.page-section,
.legal,
.out,
.crowned,
.return-panel,
.banner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stats__band, .fallen, .site-footer__inner { max-width: var(--container-wide); }
.legal, .out, .return-panel, .banner { max-width: var(--container-narrow); }

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

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-toast);
  background: var(--gold-500); color: var(--text-on-gold);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-ctrl);
  font: 600 var(--fs-sm)/1 var(--font-ui); text-decoration: none;
  transition: top 160ms var(--ease-standard);
}
.skip-link:focus { top: var(--sp-4); }

.tnum, .price, .reign-timer, .stat__value, .amount,
.chip__amount, .price-chip__value, .btn-gold__price, .lb-row__amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.foil { color: var(--gold-300); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .foil {
    background-image: var(--foil);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
@media (forced-colors: active) {
  .foil { background-image: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
}

/* Defence in depth for every element that holds user text. */
.ugc {
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  contain: layout paint;
  max-height: 9.5em;
  overflow: hidden;
  hyphens: none;
}
.ugc--name { display: block; max-height: 2.4em; overflow: hidden; }

.eyebrow {
  font: 600 var(--fs-eyebrow)/1.2 var(--font-title);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0;
}
.eyebrow--crimson { color: var(--crimson-400); }

.section-head { text-align: center; margin-bottom: var(--sp-10); }
.section-head .eyebrow { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); }
.section-head .eyebrow::before,
.section-head .eyebrow::after {
  content: ""; width: 24px; height: 1px; background: var(--line-gold);
}
.section-title {
  margin-top: var(--sp-4);
  font: 600 var(--fs-section)/1.15 var(--font-title);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.section-sub {
  margin: var(--sp-4) auto 0;
  max-width: 52ch;
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.section-more { margin-top: var(--sp-10); text-align: center; }
.empty-note {
  text-align: center; color: var(--text-muted); font-size: var(--fs-base);
  padding-block: var(--sp-16);
}
.sep { color: var(--text-faint); }

.claim, .rules, .fallen, .leaderboard, .page-section { padding-block: var(--section-pad); }

.noscript-note {
  padding: var(--sp-4) var(--gutter); text-align: center;
  color: var(--text-muted); font-size: var(--fs-sm);
}

/* ==========================================================================
   04  AMBIENT BACKGROUND — one fixed layer behind everything
   ========================================================================== */

.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(0,0,0,0.55) 100%),
    var(--ink-900);
}
/* Grain: an inline SVG turbulence tile. Stops flat near-black banding on cheap
   phone panels. Governed by img-src 'self' data:, so it needs no asset file. */
.ambient__grain {
  position: absolute; inset: 0; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* ==========================================================================
   05  HEADER
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky-header);
  height: var(--header-h);
  background: rgba(7,7,10,0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-hair);
  transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--ink-900); }
}
.site-header.is-scrolled { border-bottom-color: var(--line-gold); box-shadow: var(--shadow-card); }

.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-4); height: 100%;
}
.site-header__spacer { flex: 1 1 auto; }

.wordmark {
  font: 600 var(--fs-wordmark)/1 var(--font-title);
  letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}

.live { display: none; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-xs); }
@media (min-width: 640px) { .live { display: flex; } }
.live__dot {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--gold-500); box-shadow: 0 0 0 0 rgba(212,175,55,0.55);
  animation: live-pulse 2400ms var(--ease-out-quart) infinite;
}
.live__count { color: var(--gold-300); font-weight: 600; min-width: 2ch; text-align: right; }
.live__label { white-space: nowrap; }

.price-chip {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-gold); border-radius: var(--r-pill);
  background: rgba(212,175,55,0.05);
  text-decoration: none; white-space: nowrap;
  transition: border-color 160ms var(--ease-standard), background-color 160ms var(--ease-standard);
}
.price-chip:hover { border-color: var(--line-gold-strong); background: rgba(212,175,55,0.12); }
.price-chip__label {
  font: 600 var(--fs-micro)/1 var(--font-title); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.price-chip__value { color: var(--gold-300); font-weight: 600; font-size: var(--fs-sm); min-width: 5ch; text-align: right; }

.site-header .site-header__cta { display: none; }
@media (min-width: 1024px) { .site-header .site-header__cta { display: inline-flex; } }

/* ==========================================================================
   06  BUTTONS
   ========================================================================== */

.btn-gold, .btn-ghost {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 52px; padding: 0 26px; border-radius: var(--r-ctrl);
  font: 600 var(--fs-sm)/1 var(--font-title);
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 640px) { .btn-gold, .btn-ghost { min-height: 56px; } }

.btn-gold {
  color: var(--text-on-gold);
  background: var(--grad-gold-cta);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255,243,208,0.55);
  transition: transform 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard),
              background-color 160ms var(--ease-standard);
}
.btn-gold::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--sweep); background-size: 220% 100%; background-position: -120% 0;
  opacity: 0;
}
@media (hover: hover) {
  .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(212,175,55,0.55); }
  .btn-gold:hover::after { opacity: 1; animation: cta-sweep 520ms var(--ease-out-quart) 1; }
}
.btn-gold:active { transform: translateY(0); background: var(--gold-600); box-shadow: none; transition-duration: 80ms; }
.btn-gold:focus-visible {
  outline-color: var(--ink-900);
  box-shadow: var(--shadow-cta), 0 0 0 5px rgba(255,243,208,0.55);
}
.btn-gold[disabled], .btn-gold[aria-disabled="true"] {
  background: var(--ink-600); color: var(--text-secondary); box-shadow: none;
  cursor: progress; transform: none;
}
.btn-gold[disabled]::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%;
  background: var(--gold-500); animation: indeterminate 1200ms linear infinite;
}
.btn-gold--block { width: 100%; }
.btn-gold--sm { min-height: 40px; padding: 0 16px; font-size: var(--fs-micro); letter-spacing: 0.12em; }

.btn-ghost {
  background: transparent; border: 1px solid var(--line-gold); color: var(--gold-300);
  transition: background-color 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
}
.btn-ghost:hover { background: rgba(212,175,55,0.10); border-color: var(--line-gold-strong); color: var(--gold-300); }

.btn-text {
  color: var(--gold-400); font-size: var(--fs-sm); text-decoration: underline;
  text-underline-offset: 3px; padding: var(--sp-2) 0;
}

.btn-gold__text { display: inline-flex; }
.btn-gold__short { display: inline; }
.btn-gold__long { display: none; }
@media (min-width: 380px) {
  .btn-gold__short { display: none; }
  .btn-gold__long { display: inline; }
}
.btn-gold__price { min-width: 6ch; text-align: right; }

/* ==========================================================================
   07  THE HERO
   ========================================================================== */

.throne {
  position: relative; overflow: clip; isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  max-height: 900px;
  display: grid; place-items: center;
  padding: var(--sp-12) var(--gutter) var(--sp-16);
  text-align: center;
}
.throne:has(.throne__message[data-len="long"]) { max-height: none; }

.throne__glow {
  position: absolute; left: 50%; top: -8vh; transform: translateX(-50%);
  width: min(1100px, 140vw); aspect-ratio: 3 / 2;
  background: var(--glow-gold); filter: blur(24px);
  z-index: -1; pointer-events: none;
  animation: breathe 12000ms ease-in-out infinite alternate;
}
.throne[data-empty="true"] .throne__glow,
.throne[data-cold="true"] .throne__glow { background: var(--glow-gold-cold); }

.throne__inner {
  width: 100%; max-width: var(--throne-inner); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
}

.throne__eyebrow { display: flex; align-items: center; gap: var(--sp-4); }
.throne__eyebrow::before, .throne__eyebrow::after {
  content: ""; width: 24px; height: 1px; background: var(--line-gold);
}

/* --- crest --- */
.crest {
  position: relative; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--r-crest); background: var(--ink-700);
  box-shadow: 0 0 0 1px var(--gold-600), 0 0 0 5px rgba(212,175,55,0.10),
              0 0 32px -6px rgba(212,175,55,0.45);
}
.crest--throne { width: 56px; height: 56px; margin-top: var(--sp-6); }
@media (min-width: 640px) { .crest--throne { width: 72px; height: 72px; margin-top: var(--sp-8); } }
@media (min-width: 1024px) { .crest--throne { width: 88px; height: 88px; } }
.crest--card { width: 32px; height: 32px; flex: 0 0 auto; }
.crest--preview { width: 48px; height: 48px; margin-top: var(--sp-4); }

.crest__img { width: 100%; height: 100%; object-fit: cover; }
.crest__emoji { font: 400 60%/1 var(--font-emoji); }
.crest--throne .crest__emoji { font-size: 34px; }
@media (min-width: 640px) { .crest--throne .crest__emoji { font-size: 43px; } }
@media (min-width: 1024px) { .crest--throne .crest__emoji { font-size: 53px; } }
.crest--card .crest__emoji { font-size: 19px; }
.crest--preview .crest__emoji { font-size: 29px; }
.crest__letter {
  font: 600 60%/1 var(--font-title); color: var(--gold-400); text-transform: uppercase;
}
.crest--throne .crest__letter { font-size: 30px; }
.crest--card .crest__letter { font-size: 17px; }
.crest--preview .crest__letter { font-size: 26px; }

.crest--vacant {
  background: transparent; box-shadow: none;
  border: 1px dashed var(--gold-700); color: var(--gold-700);
}
.crest--vacant .crown-svg { width: 50%; height: auto; }
.crown-svg { width: 44px; height: auto; color: inherit; }

/* --- name --- */
.throne__name {
  margin-top: var(--sp-5);
  font: 700 var(--fs-ruler-name)/0.94 var(--font-display);
  letter-spacing: -0.015em;
  max-width: 18ch; margin-inline: auto;
}
@media (min-width: 1024px) { .throne__name { margin-top: var(--sp-6); } }
.throne__name[data-namelen="long"] {
  font-size: var(--fs-ruler-name-long); line-height: 0.98; letter-spacing: -0.01em;
}
.throne__name--vacant {
  font: 400 var(--fs-ruler-name)/1 var(--font-title);
  /* SPEC 7.5 sets --fs-ruler-name x 0.62 and justifies --text-faint with
     ">=24px, so 3.53:1 passes as large text". That arithmetic does not hold:
     --fs-ruler-name is 32.08px at a 360px viewport, so x0.62 is 19.89px and the
     large-text exemption (24px, or 18.66px bold) does not apply - every phone
     below ~519px failed AA on the largest word on the launch screen. The floor
     below makes the spec's own justification true instead of dropping the
     token: at >=24px, 3.53:1 IS a pass for large text. */
  font-size: max(24px, calc(var(--fs-ruler-name) * 0.62));
  letter-spacing: 0.22em; color: var(--text-faint);
}

/* --- message: the hero element --- */
.throne__message {
  position: relative;
  margin: var(--sp-4) auto 0;
  color: var(--text-primary);
  font-family: var(--font-display); font-weight: 400;
  text-wrap: balance;

  /* THE HERO IS EXEMPT FROM THE .ugc CLAMP. `.ugc` clamps height, hides
     overflow and applies paint containment as a zalgo defence for arbitrary
     user text. On the hero it did two kinds of damage instead:

       1. `--fs-msg-long` resolves to ~20px at a 360px viewport, so 9.5em is
          ~191px = 6.7 lines - but a 280-grapheme message needs 8 lines in a
          320px-wide box. The paid-for message, the entire product, was sliced
          horizontally through the seventh line with no ellipsis, fade, scroll
          or expander. It only happened below ~500px, so it was invisible on a
          desktop and near-universal on the device most traffic arrives on.
       2. Hidden overflow and paint containment both clip to the padding box,
          and this element is the containing block for the decorative
          quotation-mark pseudo-elements that sit at `left: -0.55em` /
          `right: -0.4em`. SPEC 7.4 [D] requires them on short and medium
          messages; they had never once rendered.

     The clamp buys nothing here: the message is grapheme-limited server-side
     (280 max, bucketed into short/medium/long) and already carries
     `overflow-wrap: anywhere`. `contain: layout` is kept - it is the half that
     isolates layout without clipping paint. SPEC 2440 agrees: "content wins". */
  max-height: none;
  overflow: visible;
  contain: layout;
}
@media (min-width: 1024px) { .throne__message { margin-top: var(--sp-5); } }
.throne__message[data-len="short"]  { font-size: var(--fs-msg-short);  max-width: 16ch; line-height: 1.14; letter-spacing: -0.01em; }
.throne__message[data-len="medium"] { font-size: var(--fs-msg-medium); max-width: 26ch; line-height: 1.24; letter-spacing: -0.005em; }
.throne__message[data-len="long"]   { font-size: var(--fs-msg-long);   max-width: 46ch; line-height: 1.42; }
.throne__message[data-len="short"]::before,
.throne__message[data-len="medium"]::before {
  content: "\201C"; position: absolute; left: -0.55em; top: -0.1em;
  color: var(--gold-700); font-size: 1.4em; opacity: 0.55; pointer-events: none;
}
.throne__message[data-len="short"]::after,
.throne__message[data-len="medium"]::after {
  content: "\201D"; position: absolute; right: -0.4em; bottom: -0.35em;
  color: var(--gold-700); font-size: 1.4em; opacity: 0.55; pointer-events: none;
}
.throne[data-empty="true"] .throne__message {
  color: var(--text-secondary); font-size: var(--fs-msg-medium); max-width: 22ch;
}

/* --- links --- */
.throne__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
  margin-top: var(--sp-8);
}
@media (min-width: 1024px) { .throne__links { margin-top: var(--sp-10); } }
.throne__links[hidden] { display: none; }
.link-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px 14px; border: 1px solid var(--line-gold); border-radius: var(--r-pill);
  background: rgba(212,175,55,0.05); color: var(--gold-400);
  font: 500 var(--fs-sm)/1 var(--font-ui); text-decoration: none;
  transition: border-color 160ms var(--ease-standard), background-color 160ms var(--ease-standard);
}
.link-pill:hover { border-color: var(--line-gold-strong); background: rgba(212,175,55,0.12); color: var(--gold-300); }
.link-pill__label { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-pill__host {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-muted); font-size: var(--fs-xs);
}
.ext-svg { width: 12px; height: 12px; opacity: 0.6; }

/* --- hairline + ledger --- */
.throne__rule {
  width: 88px; height: 1px; background: var(--line-gold);
  margin-top: var(--sp-8);
}
@media (min-width: 1024px) { .throne__rule { margin-top: var(--sp-10); } }

.throne__ledger {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  gap: var(--sp-4); margin-top: var(--sp-6);
}
@media (min-width: 640px) {
  .throne__ledger { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-5); }
}
@media (min-width: 1024px) { .throne__ledger { margin-top: var(--sp-8); } }
.throne__ledger .ledger__sep { display: none; color: var(--text-faint); }
@media (min-width: 640px) {
  /* The container aligns on the first baseline, which is the LABEL row, so an
     un-nudged separator floats up beside "PAID" instead of the amount. */
  .throne__ledger .ledger__sep { display: block; align-self: end; padding-bottom: 0.28em; }
}
.ledger__item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.ledger__label {
  font: 600 var(--fs-micro)/1.3 var(--font-ui); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.ledger__value { margin: 0; font: 700 var(--fs-price-hero)/1 var(--font-ui); letter-spacing: -0.02em; }
.ledger__item .amount { color: var(--gold-300); min-width: 6ch; }
.reign-timer { color: var(--text-primary); min-width: 10ch; }
.reign-timer time { font: inherit; }
.throne__ledger--empty {
  /* This element carries BOTH `.throne__ledger` and `.throne__ledger--empty`,
     and `.throne__ledger` is `display: grid; grid-template-columns: 1fr 1fr`
     below 640px (the centring flex variant starts at 640px). Without these two
     resets the single vacant line was laid out inside the LEFT half only:
     ~100px wide, wrapped to three ragged lines, sitting ~60px left of the
     centre every other hero element shares. Above 640px it looked correct, so
     it never showed up on the developer's screen - and SPEC 7.5 says this is
     the launch-day screen that "will be screenshotted". */
  display: block;
  grid-template-columns: none;
  margin-top: var(--sp-6); font: 600 var(--fs-micro)/1.6 var(--font-ui);
  letter-spacing: 0.14em; text-transform: uppercase;
  /* SPEC 7.5's table asks for --text-faint here, but --fs-micro is 11px and
     #6B665C on #07070A is 3.53:1 - below the 4.5:1 AA floor with no large-text
     exemption available at 11px. SPEC 7.11 checklist item 3 ("--text-faint
     never styles text below 24px") is the PR-blocking rule and it wins.
     --text-muted is 5.20:1 and still clearly recessive against the gold. */
  color: var(--text-muted);
  text-wrap: balance; max-width: 30ch; margin-inline: auto;
}

.throne__cold {
  margin-top: var(--sp-6);
  font: 600 var(--fs-micro)/1 var(--font-title); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold-600);
}

.throne__cta { margin-top: var(--sp-6); }
@media (min-width: 1024px) { .throne__cta { margin-top: var(--sp-8); } }

.throne__hint {
  margin-top: var(--sp-3); max-width: 34ch;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.throne__hint b { color: var(--gold-300); font-weight: 600; }
.hint-gold { color: var(--gold-400); }

.scroll-cue { display: none; }
@media (min-width: 640px) {
  .scroll-cue {
    display: block; position: absolute; bottom: var(--sp-6); left: 50%;
    width: 1px; height: 40px; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--gold-600), transparent);
    animation: scroll-drift 2800ms ease-in-out infinite;
  }
}

/* ==========================================================================
   08  STAT BAND
   ========================================================================== */

.stats { padding-block: var(--sp-10); }
.stats__band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (min-width: 480px) { .stats__band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .stats__band {
    gap: 0; border: 1px solid var(--line-hair); border-radius: var(--r-card);
    background: var(--ink-800);
  }
  .stat { border: none; border-radius: 0; background: transparent; }
  .stat + .stat { border-left: 1px solid var(--line-hair); }
}
.stat {
  background: var(--ink-700); border: 1px solid var(--line-soft);
  border-radius: var(--r-card); padding: var(--sp-5); text-align: center;
}
.stat__label {
  font: 600 var(--fs-micro)/1.3 var(--font-ui); letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text-muted);
}
.stat__value {
  margin-top: var(--sp-2);
  font: 600 var(--fs-stat-value)/1 var(--font-ui); letter-spacing: -0.02em;
  color: var(--text-primary);
}
.stat--gold .stat__value { color: var(--gold-300); }
.stat--zero .stat__value { color: var(--text-faint); }

/* ==========================================================================
   09  CLAIM PANEL, FORMS, THE AMOUNT PICKER
   ========================================================================== */

.claim { max-width: var(--container-narrow); }
@media (min-width: 1024px) { .claim { max-width: var(--container); } }

.claim__grid { display: flex; flex-direction: column; gap: var(--sp-10); }
@media (min-width: 1024px) {
  .claim__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
  .composer { grid-column: 1 / span 6; }
  .preview { grid-column: 8 / span 5; position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}

.composer { display: flex; flex-direction: column; gap: var(--sp-6); order: 2; }
.preview { order: 1; }
@media (min-width: 1024px) { .composer, .preview { order: 0; } }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label {
  font: 600 var(--fs-xs)/1.4 var(--font-ui); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-secondary);
}
.field__req { color: var(--gold-500); }
.field__opt { color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.field__help { font-size: var(--fs-xs); color: var(--text-muted); }
.field__help b { color: var(--gold-400); }
.field__error { font-size: var(--fs-xs); color: var(--crimson-400); }
.field__error[hidden] { display: none; }

.input {
  width: 100%;
  background: var(--ink-600); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctrl); color: var(--text-primary);
  padding: 12px 14px;
  font: 400 16px/1.4 var(--font-ui);
  transition: border-color 160ms var(--ease-standard);
}
.input::placeholder { color: var(--text-secondary); opacity: 0.75; }
.input:focus { border-color: var(--line-gold-strong); }
.input:focus-visible { outline: 2px solid var(--gold-100); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--crimson-400); }
.input--area { min-height: 120px; resize: vertical; line-height: 1.5; }
/* `appearance: none` strips the platform chevron, so one has to be put back or
   a required <select> reads as a text input with 36px of dead space. Same inline
   data-URI technique as `.checkbox:checked`, in --text-secondary. */
select.input {
  appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5l4 4 4-4' fill='none' stroke='%23B9B3A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
}

.counter {
  align-self: flex-end; font-size: var(--fs-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.counter[data-state="near"] { color: var(--gold-400); }
.counter[data-state="over"] { color: var(--crimson-400); }

.checkbox {
  appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-chip);
  background: var(--ink-600); cursor: pointer;
  transition: background-color 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
}
.checkbox:checked {
  background: var(--gold-500); border-color: var(--gold-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%2307070A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px; background-position: center; background-repeat: no-repeat;
}

.links-fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.links-fieldset legend { padding: 0; margin-bottom: var(--sp-2); }
.link-row { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .link-row { grid-template-columns: 1fr 1.4fr; align-items: start; } }

/* --- crest picker --- */
.crest-picker { border: 1px solid var(--line-soft); border-radius: var(--r-ctrl); background: var(--ink-700); }
.crest-picker__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4); cursor: pointer;
  font: 600 var(--fs-xs)/1.4 var(--font-ui); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-secondary);
}
.crest-picker__current { font-size: 20px; font-family: var(--font-emoji); line-height: 1; }
.crest-picker__body { padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.emoji-groups { display: flex; flex-direction: column; gap: var(--sp-4); max-height: 300px; overflow-y: auto; }
.emoji-group__label {
  font: 600 var(--fs-micro)/1.3 var(--font-ui); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-2);
}
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: var(--sp-2); }
.emoji-option {
  display: grid; place-items: center; height: 40px;
  border: 1px solid transparent; border-radius: var(--r-ctrl); background: var(--ink-600);
  transition: border-color 160ms var(--ease-standard), background-color 160ms var(--ease-standard);
}
.emoji-option:hover { border-color: var(--line-gold); }
.emoji-option[aria-pressed="true"] { border-color: var(--line-gold-strong); background: rgba(212,175,55,0.14); }
.emoji-option__glyph { font: 400 20px/1 var(--font-emoji); }

/* --- the amount picker --- */
.picker-wrap {
  border: 1px solid var(--line-gold); border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(212,175,55,0.05), transparent 60%), var(--ink-800);
  padding: var(--sp-5);
}
@media (min-width: 640px) { .picker-wrap { padding: var(--sp-6); } }
.picker-title {
  font: 600 var(--fs-lg)/1.2 var(--font-title); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--sp-5);
}
.picker { display: flex; flex-direction: column; gap: var(--sp-5); }
.picker__milestones, .picker__tiers { display: grid; gap: var(--sp-3); }
/* Two across, at every width. The picker lives in a ~640px form column, so a
   4-up row cramps "wall $25.50 · +4.2d" onto three lines — and that line is the
   thing being sold. */
@media (min-width: 480px) { .picker__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.chip {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-4); text-align: left;
  background: var(--ink-600); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctrl); color: var(--text-secondary);
  transition: background-color 160ms var(--ease-standard), border-color 160ms var(--ease-standard),
              color 160ms var(--ease-standard);
}
.chip:hover { border-color: var(--line-gold-strong); }
.chip__label {
  font: 600 var(--fs-micro)/1.2 var(--font-title); letter-spacing: 0.14em; text-transform: uppercase;
  /* --text-muted on an --ink-600 fill is 4.23:1, below AA and banned outright
     by SPEC 7.11 checklist item 2. The chip fill IS --ink-600, and this label
     is the word that says what each preset amount IS. SPEC 7.9's own chip
     recipe already specifies --text-secondary for an unselected chip. */
  color: var(--text-secondary);
}
.chip__amount { font: 700 1.75rem/1.1 var(--font-ui); letter-spacing: -0.02em; color: var(--text-primary); }
.chip__wall { font-size: var(--fs-xs); color: var(--text-secondary); }
.chip__wall b { color: var(--gold-400); font-weight: 600; }
.chip__runway { color: var(--gold-600); }
.chip__flag {
  position: absolute; top: -9px; right: var(--sp-4);
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--ink-800); border: 1px solid var(--line-gold);
  font: 600 var(--fs-micro)/1.4 var(--font-ui); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-400);
}
.chip--milestone { border-color: var(--line-gold-strong); background: rgba(212,175,55,0.06); }
.chip--milestone .chip__label { color: var(--gold-400); }
.chip[aria-pressed="true"] {
  background: var(--grad-gold-chip);
  border-color: var(--gold-500); color: var(--text-on-gold);
}
.chip[aria-pressed="true"] .chip__label,
.chip[aria-pressed="true"] .chip__amount,
.chip[aria-pressed="true"] .chip__wall,
.chip[aria-pressed="true"] .chip__wall b,
.chip[aria-pressed="true"] .chip__runway { color: var(--text-on-gold); }
.chip[aria-pressed="true"] .chip__flag { background: var(--ink-900); color: var(--gold-300); }

.picker__custom { display: flex; flex-direction: column; gap: var(--sp-2); }
.amount-field {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--ink-600); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctrl); padding: 0 14px;
  transition: border-color 160ms var(--ease-standard);
}
.amount-field:focus-within { border-color: var(--line-gold-strong); }
.amount-field__prefix { color: var(--gold-400); font-weight: 600; }
.amount-field__input {
  /* NO bare `outline: none` here. This class is 646 lines after the global
     `:focus-visible` ring and carries identical specificity, so `outline: none`
     silently deleted the ring from the highest-value field on the page - the
     overbid amount - leaving only a 1px border hue shift (1.50:1, far under the
     3:1 WCAG 1.4.11 asks of a state indicator). SPEC 7.11 checklist item 4. */
  flex: 1 1 auto; width: 100%; background: none; border: none;
  padding: 12px 0; font: 600 18px/1.4 var(--font-ui); color: var(--text-primary);
}
.amount-field__input:focus-visible { outline: 2px solid var(--gold-100); outline-offset: 2px; }
.picker__slider {
  appearance: none; width: 100%; height: 28px; background: none; cursor: pointer;
}
.picker__slider::-webkit-slider-runnable-track {
  height: 3px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-600), var(--ink-500));
}
.picker__slider::-moz-range-track {
  height: 3px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-600), var(--ink-500));
}
.picker__slider::-webkit-slider-thumb {
  appearance: none; width: 20px; height: 20px; margin-top: -8.5px;
  border-radius: var(--r-pill); background: var(--gold-500);
  border: 2px solid var(--ink-900); box-shadow: 0 0 0 1px var(--gold-600);
}
.picker__slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: var(--r-pill);
  background: var(--gold-500); border: 2px solid var(--ink-900);
}
.picker__sealed { color: var(--gold-300); font-size: var(--fs-base); }

.wall-readout {
  font-size: var(--fs-base); color: var(--text-secondary);
  padding-top: var(--sp-4); border-top: 1px solid var(--line-hair);
}
.wall-readout b { color: var(--gold-300); font-weight: 700; font-variant-numeric: tabular-nums; }
.wall-readout__runway { display: block; margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); }
.wall-readout__runway[hidden] { display: none; }
.wall-readout.is-ticking b { animation: wall-tick 220ms var(--ease-out-quart) 1; }

/* --- terms + submit --- */
.terms-accept { display: flex; gap: var(--sp-3); align-items: flex-start; }
.terms-accept__label, .terms-accept span { font-size: var(--fs-sm); color: var(--text-secondary); }
.terms-accept b { color: var(--text-primary); }
.terms-accept--compact { margin-top: var(--sp-3); }
.turnstile-wrap { min-height: 0; }
.form-error {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-ctrl);
  border: 1px solid var(--crimson-400); background: rgba(142,42,34,0.18);
  color: var(--text-primary); font-size: var(--fs-sm);
}
.form-error[hidden] { display: none; }
.form-success {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-ctrl);
  border: 1px solid var(--line-gold-strong); background: rgba(212,175,55,0.10);
  color: var(--text-primary); font-size: var(--fs-sm);
}
.form-success[hidden] { display: none; }
.composer__fine { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

/* --- live preview --- */
.preview__title { text-align: center; margin-bottom: var(--sp-3); }
.preview__frame {
  border: 1px solid var(--line-soft); border-radius: var(--r-panel);
  background: radial-gradient(120% 80% at 50% 0%, rgba(212,175,55,0.07), transparent 70%), var(--ink-800);
  padding: var(--sp-6) var(--sp-5); text-align: center;
  box-shadow: var(--shadow-card);
}
.throne__inner--preview .throne__name { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); margin-top: var(--sp-4); }
.throne__inner--preview .throne__message { font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.4rem); max-width: 30ch; }
.throne__inner--preview .throne__rule { margin-top: var(--sp-5); }
.throne__inner--preview .throne__links { margin-top: var(--sp-5); }
.preview__ledger { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.preview__ledger b { color: var(--gold-300); }
.preview__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

/* ==========================================================================
   10  RULES
   ========================================================================== */

.rules__grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 1024px) { .rules__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rule-card {
  background: var(--ink-700); border: 1px solid var(--line-soft);
  border-radius: var(--r-card); padding: var(--sp-6);
}
.rule-card__n {
  font: 600 var(--fs-micro)/1 var(--font-title); letter-spacing: 0.2em; color: var(--gold-600);
}
.rule-card__title {
  margin-top: var(--sp-3);
  font: 600 var(--fs-lg)/1.3 var(--font-title); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-primary);
}
.rule-card__body { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.rule-card__body b { color: var(--gold-300); font-variant-numeric: tabular-nums; }
.rules__fine {
  margin-top: var(--sp-8); text-align: center;
  font: 600 var(--fs-micro)/1.6 var(--font-title); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ==========================================================================
   11  THE FALLEN
   ========================================================================== */

.fallen__grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 640px) { .fallen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fallen__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fallen-card {
  background: var(--ink-700); border: 1px solid var(--line-soft);
  border-left: 2px solid var(--gold-700);
  border-radius: var(--r-card); padding: var(--sp-5);
  transition: background-color 180ms var(--ease-standard), border-color 180ms var(--ease-standard);
}
.fallen-card:hover { background: var(--ink-600); border-color: var(--line-gold); border-left-color: var(--gold-600); }
/* Hovering swaps the card fill to --ink-600, on which --text-muted is 4.23:1.
   Every muted descendant has to be promoted with it, or the interaction meant
   to reveal the dead king's message makes it harder to read (SPEC 7.11 item 2
   covers hover states explicitly). */
.fallen-card:hover .fallen-card__ledger,
.fallen-card:hover .fallen-card__message,
.fallen-card:hover .badge { color: var(--text-secondary); }
.fallen-card__head { display: flex; align-items: center; gap: var(--sp-3); }
.fallen-card__name {
  font: 600 var(--fs-lg)/1.2 var(--font-display); color: var(--text-secondary);
}
.fallen-card__message {
  margin-top: var(--sp-3);
  font: 400 var(--fs-base)/1.5 var(--font-display); color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  max-height: 4.6em;
}
.fallen-card__message--redacted { font-family: var(--font-ui); font-style: italic; }
.fallen-card__ledger {
  margin-top: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-muted);
  transition: color 180ms var(--ease-standard);
}
.fallen-card__ledger b { color: var(--gold-400); font-variant-numeric: tabular-nums; }
.badge {
  display: inline-block; margin-top: var(--sp-3); padding: 2px 8px;
  border-radius: var(--r-pill); border: 1px solid var(--line-soft);
  font: 600 var(--fs-micro)/1.5 var(--font-ui); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ==========================================================================
   12  LEADERBOARD
   ========================================================================== */

.lb-tabs { position: relative; display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--line-hair); }
@media (min-width: 1024px) { .lb-tabs { display: none; } }
.lb-tab {
  padding: var(--sp-3) 0;
  font: 600 var(--fs-xs)/1 var(--font-title); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}
.lb-tab[aria-selected="true"] { color: var(--gold-300); }
.lb-tabs__underline {
  position: absolute; bottom: -1px; left: 0; height: 2px; width: 0;
  background: var(--gold-500);
  transition: transform 240ms var(--ease-out-expo), width 240ms var(--ease-out-expo);
}
.lb-panels { margin-top: var(--sp-6); }
@media (min-width: 1024px) {
  .lb-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap) var(--sp-16); }
  /* Both windows are visible at once on desktop and the tabs are hidden, so the
     `hidden` attribute the tab script sets must not win here. Two classes beats
     the one-class rule further down the file. */
  .lb-panels .lb-panel[hidden] { display: block; }
}
.lb-panel { transition: opacity 160ms var(--ease-standard); }
.lb-panel[hidden] { display: none; }
.lb-panel__title {
  display: none;
  font: 600 var(--fs-xs)/1 var(--font-title); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-4);
}
@media (min-width: 1024px) { .lb-panel__title { display: block; } }
.lb-row {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center;
  gap: var(--sp-4); padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-hair);
}
.lb-row__rank { font: 600 var(--fs-sm)/1 var(--font-title); color: var(--text-muted); }
.lb-row[data-rank="1"] { background: linear-gradient(90deg, rgba(212,175,55,0.07), transparent 60%); }
.lb-row[data-rank="1"] .lb-row__rank { color: var(--gold-500); }
.lb-row[data-rank="2"] .lb-row__rank { color: var(--gold-600); }
.lb-row[data-rank="3"] .lb-row__rank { color: var(--text-secondary); }
.lb-row__name { color: var(--text-secondary); font-size: var(--fs-sm); }
.lb-row__amount { color: var(--gold-300); font-weight: 600; }

/* ==========================================================================
   13  FOOTER, STICKY CLAIM BAR, BANNERS
   ========================================================================== */

.site-footer {
  margin-top: var(--sp-16);
  border-top: 1px solid var(--line-hair);
  background: var(--ink-800);
  padding-block: var(--sp-12);
}
.site-footer__inner { display: flex; flex-direction: column; gap: var(--sp-8); text-align: center; }
@media (min-width: 1024px) {
  .site-footer__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); text-align: left; }
  .site-footer__legal { grid-column: 1 / -1; }
}
.site-footer__crown { display: block; color: var(--gold-700); }
.site-footer__inner .crown-svg { width: 32px; margin-inline: auto; }
@media (min-width: 1024px) { .site-footer__inner .crown-svg { margin-inline: 0; } }
.site-footer__brand .wordmark { display: block; margin-top: var(--sp-3); }
.site-footer__tag { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); }
.site-footer__nav { display: flex; gap: var(--sp-10); justify-content: center; }
@media (min-width: 1024px) { .site-footer__nav { justify-content: flex-end; } }
.site-footer__nav ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__nav a { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-sm); }
.site-footer__nav a:hover { color: var(--gold-300); }
.site-footer__legal { border-top: 1px solid var(--line-hair); padding-top: var(--sp-6); }
.site-footer__hard {
  font: 600 var(--fs-xs)/1.6 var(--font-title); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary);
}
.site-footer__meta { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }

.sticky-claim {
  position: fixed; bottom: 0; inset-inline: 0; z-index: var(--z-sticky-cta);
  height: 64px; padding: 0 var(--gutter); padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  background: rgba(7,7,10,0.88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-gold);
  transform: translateY(100%); opacity: 0;
  transition: transform 200ms var(--ease-standard), opacity 200ms var(--ease-standard);
}
.sticky-claim[hidden] { display: flex; }
.sticky-claim.is-visible {
  transform: translateY(0); opacity: 1;
  transition: transform 280ms var(--ease-out-expo), opacity 280ms var(--ease-out-expo);
}
@media (min-width: 1024px) { .sticky-claim { display: none !important; } }
.sticky-claim__price { display: flex; flex-direction: column; }
.sticky-claim__label {
  font: 600 var(--fs-micro)/1.2 var(--font-title); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.sticky-claim__value { font: 700 var(--fs-lg)/1.2 var(--font-ui); color: var(--gold-300); }
body.has-sticky-claim { padding-bottom: 64px; }

.banner {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  border: 1px solid var(--line-gold); border-radius: var(--r-card);
  background: rgba(212,175,55,0.06); color: var(--text-secondary); font-size: var(--fs-sm);
}
.banner--frozen { border-color: var(--line-strong); background: var(--ink-700); }

.report-link { margin-top: var(--sp-3); font-size: var(--fs-xs); }
.report-link a { color: var(--text-muted); }

/* ==========================================================================
   14  LEGAL / OUT / RETURN / CROWNED
   ========================================================================== */

.page-section, .legal, .out, .return-panel, .crowned { padding-block: var(--section-pad); }

.legal__section { margin-top: var(--sp-10); }
.legal__h2 {
  font: 600 var(--fs-lg)/1.3 var(--font-title); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--sp-4);
}
.legal__n { color: var(--gold-600); }
.legal__h3 { margin-top: var(--sp-5); font: 600 var(--fs-base)/1.4 var(--font-ui); color: var(--text-primary); }
.legal p { margin-top: var(--sp-3); font-size: var(--fs-base); color: var(--text-secondary); }
.legal__lede { font-size: var(--fs-lg); color: var(--text-secondary); }
.legal__callout {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--gold-500); background: rgba(212,175,55,0.06);
  border-radius: 0 var(--r-ctrl) var(--r-ctrl) 0;
  color: var(--text-primary); font-weight: 600;
}
.legal__list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.legal__list li {
  position: relative; padding-left: var(--sp-5); font-size: var(--fs-base); color: var(--text-secondary);
}
.legal__list li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 1px; background: var(--gold-600);
}
.legal__version { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
.legal__foot { margin-top: var(--sp-12); text-align: center; }
.legal--form .report-form { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-8); }

.out { text-align: center; }
.out__title { margin-top: var(--sp-4); font: 600 var(--fs-section)/1.2 var(--font-title); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-primary); }
.out__card {
  margin-top: var(--sp-8); padding: var(--sp-6);
  border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--ink-700);
}
.out__label { font: 600 var(--fs-micro)/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.out__host { margin-top: var(--sp-3); font: 700 var(--fs-lg)/1.3 var(--font-ui); color: var(--gold-300); word-break: break-all; }
.out__url { margin-top: var(--sp-2); color: var(--text-secondary); word-break: break-all; font-size: var(--fs-sm); }
.out__warning { margin-top: var(--sp-6); color: var(--text-secondary); font-size: var(--fs-sm); }
.out__warning b { color: var(--text-primary); }
.out__meta { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }
.out__actions { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.out__report { margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--text-muted); }

.return-panel { text-align: center; }
.return-panel__title {
  margin-top: var(--sp-4);
  font: 600 var(--fs-section)/1.2 var(--font-title); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-primary);
}
.return-panel__body { margin-top: var(--sp-5); font-size: var(--fs-lg); color: var(--text-secondary); }
.return-panel__meta, .return-panel__refund { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.return-panel__actions { margin-top: var(--sp-8); }
.ref { color: var(--gold-400); }
.waiting-bar {
  margin: var(--sp-8) auto 0; width: min(320px, 80%); height: 2px;
  background: var(--ink-600); border-radius: var(--r-pill); overflow: hidden;
}
.waiting-bar span { display: block; width: 40%; height: 100%; background: var(--gold-500); animation: indeterminate 1200ms linear infinite; }

.reclaim {
  margin-top: var(--sp-10); padding: var(--sp-6);
  border: 1px solid var(--line-gold); border-radius: var(--r-panel);
  background: var(--ink-800); text-align: left;
}
.reclaim__pitch { font-size: var(--fs-sm); color: var(--text-secondary); }
.reclaim__row { margin-top: var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.reclaim__price { font: 700 var(--fs-price-hero)/1 var(--font-ui); color: var(--gold-300); }

.crowned { text-align: center; position: relative; }
.crowned__headline {
  margin-top: var(--sp-4);
  font: 700 clamp(2rem, 1.2rem + 3.4vw, 3.5rem)/1.05 var(--font-title);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.crowned__sub { margin-top: var(--sp-4); font-size: var(--fs-lg); color: var(--text-secondary); }
.crowned__sub b { color: var(--gold-300); }
.crowned__throne { margin-top: var(--sp-8); }
.crowned__throne .throne { min-height: 0; max-height: none; padding-block: var(--sp-10); }
.crowned__actions { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.crowned__fine { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--text-muted); }
.crowned__burst { position: absolute; inset-inline: 0; top: 0; height: 1px; pointer-events: none; }
.particle {
  position: absolute; top: 0; left: 50%; width: 6px; height: 6px;
  border-radius: var(--r-pill); background: var(--gold-400); opacity: 0;
  animation: particle 1400ms var(--ease-out-quart) forwards;
}

/* ==========================================================================
   15  "THE THRONE HAS FALLEN"
   ========================================================================== */

.fallen-overlay {
  position: fixed; inset: 0; z-index: var(--z-fallen); pointer-events: none;
  display: grid; place-content: center; padding-inline: var(--gutter);
  text-align: center; opacity: 0;
  transition: opacity 160ms var(--ease-standard);
}
.fallen-overlay.is-in { opacity: 1; }
.fallen-overlay.is-out { opacity: 0; transition-duration: 480ms; }
.fallen-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glow-crimson);
  background-size: 140% 120%; background-position: 50% 42%; background-repeat: no-repeat;
  border-top: 1px solid rgba(224,90,78,0.6);
}
.fallen-overlay--reduced::before { background: var(--crimson-800); opacity: 0.92; border-top: none; }
.fallen-overlay--you::before { background: radial-gradient(closest-side, rgba(224,90,78,0.55) 0%, rgba(142,42,34,0.5) 45%, rgba(58,15,12,0.96) 100%); }

.fallen__headline {
  font: 700 clamp(1.5rem, 0.9rem + 3vw, 3.5rem)/1.05 var(--font-title);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--crimson-400); text-shadow: 0 0 40px rgba(224,90,78,0.45);
  transition: letter-spacing 540ms var(--ease-out-expo);
}
.fallen-overlay.is-settled .fallen__headline { letter-spacing: 0.07em; }
.fallen__letter { display: inline-block; opacity: 0; transform: translateY(22px) rotateX(-40deg); }
.fallen__letter.is-in { animation: letter-in 540ms var(--ease-out-expo) forwards; }
.fallen__letter--space { width: 0.35em; }
.fallen__rule { width: 80px; height: 1px; margin: var(--sp-5) auto; background: rgba(224,90,78,0.5); }
.fallen__subline {
  font: 500 var(--fs-lg)/1.5 var(--font-ui); color: var(--text-primary);
  opacity: 0; transform: translateY(10px);
  transition: opacity 320ms var(--ease-out-quart), transform 320ms var(--ease-out-quart);
}
.fallen__subline.is-in { opacity: 1; transform: translateY(0); }
.fallen__name { color: var(--gold-300); }
.fallen__revenge { pointer-events: auto; margin-top: var(--sp-6); opacity: 0; transition: opacity 320ms var(--ease-out-quart); }
.fallen__revenge.is-in { opacity: 1; }

main.is-dimmed { filter: saturate(0.15) brightness(0.62); transition: filter 200ms var(--ease-standard); }
main.is-undimming { filter: none; transition: filter 480ms var(--ease-standard); }
.throne.is-shaking { animation: throne-shake 420ms linear 1; }
.throne__inner.is-leaving { animation: inner-out 420ms var(--ease-in-hard) forwards; }
.throne__inner.is-entering { animation: inner-in 560ms var(--ease-out-expo) forwards; }
.crest.is-pulsing { animation: crest-pulse 900ms var(--ease-out-quart) 1; }
.throne.is-sweeping::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--sweep); background-size: 220% 100%;
  mix-blend-mode: screen; animation: throne-sweep 760ms var(--ease-out-quart) 1;
}

/* ==========================================================================
   16  MOTION
   ========================================================================== */

@keyframes breathe {
  from { transform: translateX(-50%) scale(1); opacity: 0.55; }
  to   { transform: translateX(-50%) scale(1.06); opacity: 0.8; }
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0.55); }
  100% { box-shadow: 0 0 0 7px rgba(212,175,55,0); }
}
@keyframes cta-sweep {
  from { background-position: -120% 0; }
  to   { background-position: 220% 0; }
}
@keyframes indeterminate {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}
@keyframes scroll-drift {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}
@keyframes wall-tick {
  from { opacity: 0.35; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes repriced {
  0%   { box-shadow: var(--shadow-cta), 0 0 0 0 rgba(255,243,208,0.0); }
  40%  { box-shadow: var(--shadow-cta), 0 0 0 6px rgba(255,243,208,0.45); }
  100% { box-shadow: var(--shadow-cta), 0 0 0 0 rgba(255,243,208,0.0); }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tick-digit {
  from { opacity: 0.55; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes throne-shake {
  0%   { transform: translate3d(0, 0, 0); }
  18%  { transform: translate3d(-7px, 0, 0); }
  36%  { transform: translate3d(6px, 0, 0); }
  54%  { transform: translate3d(-4px, 0, 0); }
  76%  { transform: translate3d(2px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes inner-out {
  from { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  to   { opacity: 0; transform: scale(0.945) translateY(14px); filter: blur(7px); }
}
@keyframes inner-in {
  from { opacity: 0; transform: scale(0.985) translateY(18px); filter: blur(5px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes letter-in {
  from { opacity: 0; transform: translateY(22px) rotateX(-40deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); }
}
@keyframes crest-pulse {
  0%   { box-shadow: 0 0 0 1px var(--gold-600), 0 0 0 5px rgba(212,175,55,0.10), 0 0 0 0 rgba(212,175,55,0.55); }
  55%  { box-shadow: 0 0 0 1px var(--gold-600), 0 0 0 5px rgba(212,175,55,0.10), 0 0 0 26px rgba(212,175,55,0.35); }
  100% { box-shadow: 0 0 0 1px var(--gold-600), 0 0 0 5px rgba(212,175,55,0.10), 0 0 0 0 rgba(212,175,55,0); }
}
@keyframes throne-sweep {
  from { background-position: -140% 0; }
  to   { background-position: 240% 0; }
}
@keyframes particle {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to   { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -120px)) scale(0.4); }
}

/* The submit button flashes when the server re-prices it under an open form. */
.btn-gold.is-repriced { animation: repriced 620ms var(--ease-out-quart) 1; }

/* Section reveal — opt-in, added by app.js so no-JS pages are never blank. */
.reveal { opacity: 0; }
.reveal.is-revealed { animation: reveal 480ms var(--ease-out-expo) forwards; }

/* Reign timer per-digit tick, desktop only. */
@media (min-width: 1024px) {
  .reign-timer.is-ticking { animation: tick-digit 140ms var(--ease-out-quart) 1; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — a different, calm version of the same events, not "off".
   Each component below states its own intent; the blanket rule at the end is
   the safety net for anything missed, never the design.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* 1  ambient breathe -> static */
  .throne__glow { animation: none; transform: translateX(-50%) scale(1.02); opacity: 0.6; }

  /* 2  reign tick -> no per-digit motion */
  .reign-timer.is-ticking { animation: none; }

  /* 3  live dot -> static */
  .live__dot { animation: none; box-shadow: 0 0 0 3px rgba(212,175,55,0.18); }

  /* 5  section reveal -> opacity only, no transform, 200ms */
  .reveal.is-revealed { animation: none; opacity: 1; transition: opacity 200ms linear; }

  /* 6, 7  CTA sweep and lift -> background change only */
  .btn-gold::after { display: none; }
  .btn-gold:hover { transform: none; background: var(--gold-400); box-shadow: var(--shadow-cta); }

  .btn-gold.is-repriced { animation: none; }

  /* 8  wall readout tick -> instant */
  .wall-readout.is-ticking b { animation: none; }

  /* 9  scroll cue -> static */
  .scroll-cue { animation: none; }

  /* 10  sticky bar -> opacity only */
  .sticky-claim { transform: none; transition: opacity 150ms linear; }
  .sticky-claim.is-visible { transform: none; transition: opacity 150ms linear; }

  /* 12  tab underline -> jumps */
  .lb-tabs__underline { transition: none; }

  /* 13  the fall -> flat wash, no stagger, no blur, no shake, no sweep */
  .fallen-overlay { transition: opacity 200ms linear; }
  .fallen-overlay.is-out { transition-duration: 200ms; }
  .fallen__headline { letter-spacing: 0.07em; transition: none; }
  .fallen__letter { opacity: 1; transform: none; animation: none !important; }
  .fallen__subline { opacity: 1; transform: none; transition: none; }
  .fallen__revenge { opacity: 1; transition: none; }
  main.is-dimmed { filter: none; }
  .throne.is-shaking { animation: none; }
  .throne__inner.is-leaving { animation: none; opacity: 0; }
  .throne__inner.is-entering { animation: none; opacity: 1; }
  .crest.is-pulsing { animation: none; }
  .throne.is-sweeping::after { display: none; }

  /* 14  celebration -> no particles */
  .particle { display: none; }

  /* The safety net. Catches whatever the rules above forgot; on its own it
     would leave elements stuck mid-transform, which is why every component
     has an explicit branch. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   FORCED COLORS
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .btn-gold, .btn-ghost, .chip, .input, .crest { border: 1px solid CanvasText; }
  .throne__glow, .ambient { display: none; }
}

/* ==========================================================================
   DEV CHECKOUT — DEV_MODE ONLY (src/views/devcheckout.ts)

   Deliberately styled to look like a test harness rather than like the
   product. A dev fixture that looks like production is a dev fixture someone
   eventually mistakes for production.
   ========================================================================== */

.dev-checkout { max-width: 34rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }

.dev-checkout__flag {
  font: 600 var(--fs-micro)/1.4 var(--font-ui);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--crimson-400);
  border: 1px dashed var(--crimson-600);
  border-radius: var(--r-sm, 6px);
  padding: 0.6rem 0.9rem; margin: 0 0 1.75rem; text-align: center;
}

.dev-checkout__title {
  font: 600 var(--fs-section)/1.1 var(--font-title);
  color: var(--text-primary); margin: 0 0 0.75rem;
}

.dev-checkout__lede { color: var(--text-secondary); margin: 0 0 2rem; }
.dev-checkout__lede code { color: var(--gold-300); }

.dev-checkout__summary {
  display: grid; grid-template-columns: minmax(6rem, auto) 1fr;
  gap: 0.5rem 1.25rem; margin: 0 0 2rem;
  padding: 1.25rem; border: 1px solid var(--line-soft); border-radius: var(--r-md, 10px);
  background: var(--ink-800);
}
.dev-checkout__summary dt {
  font: 600 var(--fs-micro)/1.6 var(--font-ui);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.dev-checkout__summary dd {
  margin: 0; color: var(--text-primary); overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.dev-checkout__form { margin: 0 0 1.5rem; }

.dev-checkout__pay {
  display: block; width: 100%; cursor: pointer;
  padding: 0.95rem 1.25rem; border: 0; border-radius: var(--r-md, 10px);
  background: var(--gold-500); color: var(--text-on-gold);
  font: 600 var(--fs-sm)/1 var(--font-title);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.dev-checkout__pay:hover { background: var(--gold-400); }
.dev-checkout__pay:focus-visible { outline: 2px solid var(--gold-100); outline-offset: 3px; }

.dev-checkout__note { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 0.5rem; }
.dev-checkout__note a { color: var(--gold-300); }