/* ============================================================================
   Arcanomechanical Arena — site stylesheet (2026-09 rebuild)

   The game's FrostKit chrome, ported: cold bronze on iron, Crimson Pro for the voice,
   mono for the machine's own diction, and the ACTUAL 9-slice sprites the in-game
   buttons and panels are drawn with (wwwroot/img/ui, copied from Sprites/UI) used as
   border-images. Nothing here is a Material rectangle in a costume.

   Sections: tokens · base · chrome (buttons, plates, chips) · topbar/menu · hero ·
   proof · sections · rig/families · loop · factions · heroes · conductor · media +
   lightbox · playtest · roadmap · ladder · footer/dock · legal/forge/404 · reveal · a11y
   ========================================================================== */

/* ===== self-hosted Crimson Pro (the game's UI face, OFL) ===== */
@font-face {
  font-family: "Crimson Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/CrimsonPro-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/CrimsonPro-SemiBold.woff2") format("woff2");
}

:root {
  --font-display: "Crimson Pro", "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
  --font-body: "Crimson Pro", ui-serif, Georgia, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* --- cold Gearmancy palette (from in-engine UITheme / RigEditorStyle) --- */
  --iron: #0b0d12;          /* deepest bg / deck base */
  --iron-2: #141821;        /* plate tint */
  --seam: #04050a;          /* plate seam shadow */
  --panel: #101216;         /* section panel */
  --card: #15171c;          /* card / console card */

  --bronze: #9c8a54;        /* PRIMARY accent (cold, muted — never bright gold) */
  --bronze-bright: #c7b875; /* hover / emphasis */
  --bronze-dim: #6b6140;    /* borders, rules */
  --copper: #807052;        /* secondary / output */
  --rivet: #b8a870;         /* rivet dots, fittings */

  --arcanum: #598cd1;       /* sapphire — magic + gauge fill */
  --arcane-glow: #7399ff;   /* magic node glow */
  --wire: #73f2ff;          /* cyan auto-wire */
  --wire-gold: #ffc759;     /* manual wire */
  --cyan: #66dbff;          /* Gearmancer identity accent */

  --ink: #f2ebd9;
  --ink-dim: #b3ad99;
  --ink-muted: #807a6b;

  --danger: #d94040;
  --success: #4cbf66;
  --warning: #e6b333;

  --line: rgba(156, 138, 84, 0.16);
  --line-soft: rgba(156, 138, 84, 0.12);

  /* rarity (from Data/Config/rarity_config.json) */
  --r-common: #9d9d9d; --r-uncommon: #1eff00; --r-rare: #0070dd;
  --r-epic: #a335ee; --r-legendary: #ff8800; --r-artifact: #44dd88;

  --container: 1140px;
  --bar-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* legacy aliases so older rules keep resolving */
  --ground: var(--iron);
  --brass: var(--bronze);
}

/* ===== base ===== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body {
  margin: 0; background: var(--iron); color: var(--ink);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; }
body.has-dock { padding-bottom: 76px; }
body.lb-open { overflow: hidden; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); }
section[id], [id].section { scroll-margin-top: calc(var(--bar-h) + 8px); }
.hide-sm { display: inline; } .only-sm { display: none; }
@media (max-width: 599px) { .hide-sm { display: none; } .only-sm { display: inline; } }

/* ============================================================================
   CHROME — the game's stamped controls, as border-images
   ========================================================================== */
/* A button is a 9-slice brass frame (btn_idle: cold rim, dark plate) at 2× pixel scale.
   Hover swaps in btn_hover — the arcane corner brackets the in-game buttons light up
   with — and a press sinks the plate one pixel onto its seam (btn_pressed). */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  box-sizing: border-box;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; line-height: 1.1; text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--ink); background: none;
  border: 14px solid transparent;
  border-image: url("/img/ui/btn_idle@2.png") 16 fill / 14px / 0 stretch;
  image-rendering: pixelated; image-rendering: crisp-edges;
  padding: 0 .55rem; min-height: 48px;
  transition: transform .08s ease, box-shadow .2s ease;
  box-shadow: 0 3px 0 rgba(4, 5, 10, .9), 0 8px 18px -6px rgba(0, 0, 0, .6);
}
.btn .glyph { flex: 0 0 auto; }
.btn:hover, .btn:focus-visible { border-image-source: url("/img/ui/btn_hover@2.png"); color: #fff; }
.btn:active { border-image-source: url("/img/ui/btn_pressed@2.png"); transform: translateY(2px); box-shadow: 0 1px 0 rgba(4, 5, 10, .9); }

/* --- primary: the same frame, but the plate inside is BRASS — the hero action --- */
.btn-primary {
  color: #17140c;
  border-image: url("/img/ui/btn_idle@2.png") 16 / 14px / 0 stretch;
  background: linear-gradient(180deg, #dcc98a 0%, #b89e56 46%, #977f3e 54%, #7f6a34 100%);
  background-clip: padding-box;
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, .5), inset 0 -1px 0 rgba(20, 15, 4, .45), 0 3px 0 rgba(4, 5, 10, .9), 0 8px 18px -6px rgba(0, 0, 0, .6);
}
.btn-primary:hover, .btn-primary:focus-visible {
  color: #17140c;
  background: linear-gradient(180deg, #ead89a 0%, #c8ae63 46%, #a68e49 54%, #8c763c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 228, .7), inset 0 -1px 0 rgba(20, 15, 4, .45),
              0 3px 0 rgba(4, 5, 10, .9), 0 0 22px -6px rgba(115, 242, 255, .55);
}
.btn-primary:active { background: linear-gradient(180deg, #a68e49, #7f6a34); box-shadow: inset 0 2px 5px rgba(20, 15, 4, .55); }
/* the little tag inside the wishlist button: "Free demo first" — price anchored on the button itself */
.btn-tag {
  font-size: .58rem; letter-spacing: .1em; font-weight: 700; margin-left: .2rem;
  padding: .18rem .4rem; border-radius: 2px; background: rgba(23, 20, 12, .85); color: var(--bronze-bright);
}

/* --- secondary: the dark plate, cyan-lit on hover (the in-game idle → hover) --- */
.btn-secondary { color: var(--ink); }
.btn-secondary:hover { color: #fff; box-shadow: 0 0 22px -8px rgba(102, 219, 255, .9); }

.btn-lg { min-height: 56px; font-size: .86rem; padding: 0 .8rem; }
.btn-sm { min-height: 40px; font-size: .68rem; border-width: 11px; border-image-width: 11px; padding: 0 .35rem; }
.btn-steam .glyph { color: currentColor; }
.btn[aria-disabled="true"] { border-image-source: url("/img/ui/btn_disabled@2.png"); color: var(--ink-muted); pointer-events: none; }

/* icon-only control in the bar */
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 3px;
  color: var(--ink-dim); border: 1px solid var(--bronze-dim); background: rgba(4, 5, 10, .5);
  transition: color .15s, border-color .15s, box-shadow .2s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--bronze); box-shadow: 0 0 16px -6px rgba(102, 219, 255, .8); }

/* A PLATE is the game's brass panel frame (panel_brass) around a dark card. */
.plate {
  box-sizing: border-box;
  border: 12px solid transparent;
  border-image: url("/img/ui/panel_brass@2.png") 16 / 12px / 0 stretch;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: linear-gradient(180deg, var(--card), var(--panel));
  background-clip: padding-box;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .7);
}

/* filter / segment chips */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); background: rgba(4, 5, 10, .45); border: 1px solid var(--bronze-dim);
  border-radius: 3px; padding: .5rem .75rem; cursor: pointer; display: inline-flex; gap: .5rem; align-items: center;
  transition: color .15s, background .15s, border-color .15s;
}
.chip:hover { color: var(--ink); border-color: var(--bronze); }
.chip.on { color: #17140c; background: linear-gradient(180deg, #c2ab68, #937c3c); border-color: #6d5c2e; font-weight: 700; }
.chip-n { font-size: .6rem; opacity: .75; padding: .05rem .3rem; border-radius: 2px; background: rgba(4, 5, 10, .35); }
.chip.on .chip-n { background: rgba(23, 20, 12, .35); opacity: 1; }

/* ============================================================================
   TOPBAR + MENU
   ========================================================================== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--bar-h);
  background: rgba(11, 13, 18, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); transition: background .2s;
}
.topbar.scrolled { background: rgba(11, 13, 18, .88); }
.topbar-inner {
  max-width: var(--container); margin-inline: auto; height: 100%; padding-inline: 1rem;
  display: flex; align-items: center; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.brand-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: .01em; }
.nav-links { display: none; gap: 1.25rem; align-items: center; margin-left: auto; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-link {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; padding: .3rem 0; border-bottom: 1px solid transparent;
  white-space: nowrap; transition: color .15s, border-color .15s;
}
/* German labels are longer ("Der Ablauf", "Die Welt"): below 1200px the wordmark yields to the links */
@media (max-width: 1199px) { .nav-links { gap: 1rem; } .topbar .brand-title { display: none; } }
.nav-link:hover { color: var(--ink); border-bottom-color: var(--bronze); }
/* the one nav item that is happening right now */
.nav-link-live::before, .mnav-panel a.is-live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: .45rem;
  background: var(--wire); box-shadow: 0 0 8px var(--wire); vertical-align: middle; animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: .35; } }
.topbar-actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
@media (min-width: 1024px) { .topbar-actions { margin-left: 1rem; } }
@media (max-width: 599px) { .brand-title { display: none; } .topbar-actions { gap: .4rem; } .topbar .icon-btn { display: none; } .topbar-inner { padding-inline: .7rem; } }

/* language switch — a segmented pair, the current one always visible */
.lang-switch { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--bronze-dim); border-radius: 3px; background: rgba(4, 5, 10, .5); }
.lang-opt {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; font-weight: 700;
  color: var(--ink-muted); text-decoration: none; padding: .55rem .58rem; line-height: 1;
  transition: color .15s ease, background .15s ease; display: inline-grid; place-items: center;
}
.lang-opt + .lang-opt { border-left: 1px solid var(--bronze-dim); }
.lang-opt:hover { color: var(--ink); background: rgba(156, 138, 84, .14); }
.lang-opt.is-on { color: #17140c; background: linear-gradient(180deg, #c2ab68, #937c3c); box-shadow: inset 0 1px 0 rgba(255, 246, 214, .45); cursor: default; }
@media (max-width: 599px) { .lang-opt { padding: .5rem .45rem; font-size: .64rem; } }

/* phone menu: a <details>, no script needed to open it */
.mnav { position: relative; }
@media (min-width: 1024px) { .mnav { display: none; } }
.mnav > summary {
  list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 40px; height: 40px;
  color: var(--ink); border: 1px solid var(--bronze-dim); border-radius: 3px; background: rgba(4, 5, 10, .5);
}
.mnav > summary::-webkit-details-marker { display: none; }
.mnav .mnav-close { display: none; } .mnav[open] .mnav-close { display: inline-grid; } .mnav[open] .mnav-open { display: none; }
.mnav-panel {
  position: fixed; left: 0; right: 0; top: var(--bar-h); z-index: 899;
  display: grid; padding: .6rem 1rem 1rem;
  background: rgba(11, 13, 18, .97); border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9);
}
.mnav-panel a {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; padding: .85rem .2rem; border-bottom: 1px solid var(--line-soft);
}
.mnav-panel a:hover { color: var(--ink); }

/* ============================================================================
   HERO
   ========================================================================== */
.hero {
  min-height: 94vh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--bar-h) + 3rem) 1.25rem 4rem; position: relative; overflow: hidden;
  background-color: var(--iron);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(4,5,10,.5) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(4,5,10,.5) 63px 64px),
    radial-gradient(60% 55% at 50% 30%, rgba(89, 140, 209, 0.14), transparent 70%),
    radial-gradient(50% 45% at 50% 100%, rgba(190, 96, 40, 0.14), transparent 70%);
  background-size: 64px 64px, 64px 64px, 100% 100%, 100% 100%;
}
.hero-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  opacity: .36; filter: saturate(.85) contrast(1.05);
  -webkit-mask-image: radial-gradient(72% 78% at 50% 46%, rgba(0,0,0,.25) 0%, #000 62%);
  mask-image: radial-gradient(72% 78% at 50% 46%, rgba(0,0,0,.25) 0%, #000 62%);
  pointer-events: none;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(58% 60% at 50% 42%, rgba(11,13,18,.55) 20%, var(--iron) 92%),
    linear-gradient(180deg, rgba(11,13,18,.5) 0%, transparent 28%, transparent 58%, var(--iron) 100%);
}
.hero-inner { position: relative; z-index: 3; max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.hero-mark { filter: drop-shadow(0 0 26px rgba(89, 140, 209, 0.30)); margin-bottom: 1.2rem; }

.eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--bronze); margin: 0 0 1rem; }
.eyebrow.sys { color: var(--arcanum); }
.eyebrow.sys::before { content: "[ "; opacity: .6; } .eyebrow.sys::after { content: " ]"; opacity: .6; }

.hero-title { font-size: clamp(2.5rem, 1.4rem + 4.8vw, 5.2rem); line-height: 1.04; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.hero-accent {
  background: linear-gradient(92deg, var(--bronze-bright), var(--copper) 50%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lede { max-width: 46ch; margin: 1.5rem auto 0; font-size: clamp(1.08rem, 1rem + .5vw, 1.35rem); line-height: 1.6; color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2rem; }
.hero-cta.center { justify-content: center; }

.steam-note {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; line-height: 1.6;
  color: var(--ink-muted); margin: .9rem auto 0; max-width: 54ch;
}
.steam-note::before { content: "◆ "; color: var(--bronze-dim); }

.trust-row {
  list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
}
.trust-row li { display: inline-flex; align-items: center; gap: .4rem; }
.trust-row .glyph { color: var(--success); }

.hero-note { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin: 1.6rem 0 0; }
.hero-see {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 2rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); text-decoration: none;
}
.hero-see .glyph { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.hero-see:hover { color: #fff; }

.hero-boot { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--arcanum); margin: 2rem 0 0; min-height: 1.2em; }
.hero-boot .caret { color: var(--wire); animation: boot-blink 1s steps(2) infinite; }
@keyframes boot-blink { 50% { opacity: 0; } }

/* ============================================================================
   SECTIONS (plates bolted to a deck)
   ========================================================================== */
.section {
  padding: clamp(4rem, 9vw, 7.5rem) 1.25rem; position: relative;
  border-top: 1px solid rgba(4, 5, 10, .9); box-shadow: inset 0 1px 0 rgba(226, 210, 160, .07);
}
.section::before {
  content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; pointer-events: none; opacity: .75;
  background: radial-gradient(circle at 36% 32%, #d8c78d, #5c4c22 68%, #241d0c 100%);
  box-shadow: 0 0 0 1px rgba(4, 5, 10, .9), 0 1px 2px rgba(0, 0, 0, .8);
}
.section-alt {
  background:
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(4,5,10,.35) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(4,5,10,.35) 63px 64px),
    var(--panel);
  background-size: 64px 64px, 64px 64px, 100% 100%;
}
.section-inner { max-width: var(--container); margin-inline: auto; }
.section-inner.center { text-align: center; }
.section-title { font-family: var(--font-display); font-weight: 600; line-height: 1.08; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); margin: .6rem 0 0; text-wrap: balance; }
.two-col { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 2.5rem); }
@media (min-width: 880px) { .two-col { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.body-lg { font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem); line-height: 1.68; margin: 1rem 0 0; }
.body-dim { color: var(--ink-dim); line-height: 1.68; margin: 1rem 0 0; }
.pull-quote { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--ink); border-left: 2px solid var(--bronze); padding-left: 1.1rem; margin: 1.6rem 0 0; }
.pull-quote cite { display: block; font-style: normal; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-top: .5rem; }
.mw-20 { max-width: 20ch; } .mw-22 { max-width: 22ch; } .mw-24 { max-width: 24ch; } .mw-26 { max-width: 26ch; }
.mw-52 { max-width: 52ch; } .mw-62 { max-width: 62ch; } .mx-auto { margin-inline: auto; } .mt-2 { margin-top: 1.4rem; }

/* ============================================================================
   PROOF BAND — counted, not claimed
   ========================================================================== */
.proof { padding-top: clamp(3rem, 6vw, 5rem); }
.proof-grid { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }
.proof-cell { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; min-height: 150px; }
.proof-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--bronze-bright); font-variant-numeric: tabular-nums; }
.proof-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-top: .35rem; }
.proof-sub { color: var(--ink-muted); font-size: .92rem; line-height: 1.45; margin-top: .25rem; }
.proof-foot { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; line-height: 1.6; color: var(--ink-muted); margin: 1.6rem 0 0; max-width: 70ch; }
.proof-foot::before { content: "◆ "; color: var(--bronze-dim); }

/* ============================================================================
   RIG — features + the eleven families
   ========================================================================== */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin-top: 2.2rem; }
.feature-card { background: var(--iron); padding: 1.7rem 1.5rem; transition: background .2s, transform .2s, box-shadow .3s; }
.section-alt .feature-card { background: var(--panel); }
.feature-card:hover { background: var(--card); transform: translateY(-3px); box-shadow: 0 14px 34px -20px var(--bronze); }
.feature-card .fi { display: block; color: var(--bronze); margin-bottom: .9rem; }
.feature-card .fi-svg { width: 40px; height: 40px; display: block; transition: color .2s ease, transform .35s ease; }
.feature-card:hover .fi { color: var(--bronze-bright); }
.feature-card:hover .fi-svg { transform: rotate(8deg); }
.feature-card h3 { font-family: var(--font-display); font-size: 1.3rem; margin: .3rem 0 .5rem; }
.feature-card p { color: var(--ink-dim); font-size: .98rem; margin: 0; line-height: 1.6; }

.rig-shot { margin: 2.2rem 0 0; }
.rig-shot .media-tile { width: 100%; }
.rig-caption { margin-top: 1rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; line-height: 1.6; color: var(--ink-muted); max-width: 80ch; }

.fam-kicker { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin: 2.6rem 0 1rem; }
.fam-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .6rem; }
.fam { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .7rem .3rem .8rem; border: 1px solid var(--line); border-radius: 4px; background: rgba(4, 5, 10, .35); transition: border-color .2s, background .2s; }
.fam:hover { border-color: var(--bronze-dim); background: var(--card); }
/* the badge is the game's own animated 6-frame strip (192×32), shown at 2× */
.fam-badge { width: 64px; height: 64px; background-repeat: no-repeat; background-size: 384px 64px; image-rendering: pixelated; image-rendering: crisp-edges; animation: fam-cycle 1.2s steps(6) infinite; }
@keyframes fam-cycle { to { background-position: -384px 0; } }
.fam:nth-child(2n) .fam-badge { animation-delay: -.4s; } .fam:nth-child(3n) .fam-badge { animation-delay: -.8s; }
.fam-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); text-align: center; }

/* ============================================================================
   LOOP
   ========================================================================== */
.loop-steps { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
@media (min-width: 720px) { .loop-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .loop-steps { grid-template-columns: repeat(4, 1fr); } }
.loop-step { background: var(--iron); padding: 1.6rem 1.4rem 1.5rem; position: relative; transition: background .2s ease; }
.section-alt .loop-step { background: var(--panel); }
.loop-step:hover { background: var(--card); }
.loop-num { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; color: var(--bronze); display: block; margin-bottom: .7rem; }
.loop-step::after { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 2.55rem; height: 1px; background: linear-gradient(90deg, var(--bronze-dim), transparent); }
.loop-step h3 { font-family: var(--font-display); font-size: 1.22rem; margin: 0 0 .5rem; }
.loop-step p { color: var(--ink-dim); font-size: .96rem; line-height: 1.62; margin: 0; }
.loop-notes { margin-top: 1.8rem; display: grid; gap: .7rem; }
.loop-note { margin: 0; color: var(--ink-dim); line-height: 1.65; max-width: 66ch; display: grid; grid-template-columns: 1.4rem 1fr; align-items: start; }
.loop-note-mark { color: var(--bronze-dim); }

/* ============================================================================
   FACTIONS
   ========================================================================== */
.faction-cage { position: relative; display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 2.4rem; padding: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; }
@media (min-width: 760px) { .faction-cage { grid-template-columns: 1fr 1fr; } }
.faction-cage::before, .faction-cage::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; border-color: var(--bronze-dim); border-style: solid; opacity: .7; }
.faction-cage::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.faction-cage::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.faction-card { border-top: 2px solid var(--fac, var(--bronze)); padding: 1.7rem 1.6rem; background: var(--panel); transition: background .2s, box-shadow .3s, border-color .2s; }
.faction-card.is-guild { background: linear-gradient(180deg, var(--panel), var(--iron)); }
.faction-card.is-guild:hover { background: linear-gradient(180deg, var(--card), var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fac) 30%, transparent); }
.faction-card.is-you {
  margin-top: -1px; border: 1px solid rgba(102,219,255,.3); border-top-width: 2px; border-radius: 0 0 4px 4px;
  background: radial-gradient(120% 160% at 12% 0%, rgba(102,219,255,.13), transparent 62%), linear-gradient(180deg, rgba(102,219,255,.05), var(--panel));
  box-shadow: 0 18px 44px -30px rgba(102,219,255,.75);
  display: grid; grid-template-columns: 1fr; gap: 0 1.6rem; align-items: start; padding: 1.9rem 1.7rem;
}
@media (min-width: 760px) { .faction-card.is-you { grid-template-columns: 64px 1fr; } }
.faction-card.is-you:hover { border-color: var(--cyan); box-shadow: 0 22px 52px -28px rgba(102, 219, 255, .9); }
.faction-card.is-you .crest { width: 56px; height: 56px; }
.faction-card.is-you .fac-creed { font-size: 1.34rem; }
.faction-card.is-you .fac-body { max-width: 68ch; }
.fac-tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fac, var(--bronze)); display: block; }
.fac-creed { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; margin: .5rem 0 .7rem; color: var(--ink); }
.fac-body { color: var(--ink-dim); font-size: .96rem; margin: 0; line-height: 1.6; }
.crest-wrap { color: var(--fac, var(--bronze)); margin-bottom: .8rem; line-height: 0; }
.crest { width: 46px; height: 46px; display: block; }
.faction-card.is-you .crest { animation: crest-glow 2.6s ease-in-out infinite; }
@keyframes crest-glow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(102,219,255,.45)); } 50% { filter: drop-shadow(0 0 11px rgba(102,219,255,.9)); } }

/* faction art: the real in-game bodies (captured from the Guild Roster showcase at arena scale,
   keyed and scaled 3x nearest) on a lit stage in the faction's own colour */
.fac-stage {
  position: relative; height: 230px; margin: -1.7rem -1.6rem 1.1rem; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 100%, color-mix(in srgb, var(--fac) 28%, transparent), transparent 70%),
              linear-gradient(180deg, rgba(4,5,10,.35), transparent 60%);
  border-bottom: 1px solid color-mix(in srgb, var(--fac) 25%, transparent);
}
.fac-stage::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 14px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fac) 55%, transparent), transparent); }
.fac-art { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); height: 200px; width: auto; max-width: 96%; object-fit: contain; object-position: center bottom;
  image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 6px 10px rgba(0,0,0,.65)); }
.faction-card.is-you .fac-stage { height: auto; margin: 0; background: none; border: 0; }
.faction-card.is-you .fac-stage::after { display: none; }
.faction-card.is-you .fac-art { position: static; transform: none; height: 220px; }
.faction-card.is-you .fac-art { animation: crest-glow 2.6s ease-in-out infinite; }
@media (min-width: 760px) { .faction-card.is-you { grid-template-columns: 200px 1fr; align-items: center; } }

/* ============================================================================
   HEROES
   ========================================================================== */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; margin-top: 2.2rem; }
.hero-card { border: 1px solid var(--line); border-radius: 3px; padding: 1.6rem; background: var(--iron); transition: transform .2s ease, box-shadow .3s ease, border-color .2s; }
.hero-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -20px var(--bronze); border-color: var(--bronze-dim); }
.hero-card h3 { font-family: var(--font-display); font-size: 1.45rem; margin: 0 0 .5rem; }
.hero-card p { color: var(--ink-dim); margin: 0; line-height: 1.6; }
.hcard-head { display: flex; align-items: center; gap: .85rem; margin-bottom: .5rem; }
.hcard-head h3 { margin: 0; }
.hmark { width: 38px; height: 38px; flex: 0 0 auto; display: block; }
.hmark svg { width: 100%; height: 100%; }
.hmark.steel { color: #c7c0b0; filter: drop-shadow(0 0 4px rgba(199,192,176,.3)); }
.hmark.arcane { color: var(--wire); filter: drop-shadow(0 0 6px rgba(115,242,255,.4)); }

/* ============================================================================
   THE CONDUCTOR
   ========================================================================== */
.conductor { position: relative; overflow: hidden; background: #06070b; text-align: center; padding-block: clamp(6rem, 12vw, 10rem); }
.conductor-web { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.conductor-copy { position: relative; z-index: 1; max-width: 640px; }
.conductor-copy::before { content: ""; position: absolute; inset: -40% -25%; z-index: -1; pointer-events: none; background: radial-gradient(52% 60% at 50% 50%, rgba(6,7,11,.74) 26%, transparent 80%); }
.conductor-eyebrow { color: var(--arcanum); letter-spacing: .34em; text-shadow: 0 0 12px #06070b; }
.conductor-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.3rem); margin-top: .8rem; text-shadow: 0 2px 16px #06070b, 0 0 34px #06070b; }
.conductor-lede { color: var(--ink-dim); line-height: 1.75; margin: 1.5rem auto 0; max-width: 52ch; text-shadow: 0 1px 12px #06070b; }
.conductor-voice { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .24em; text-transform: uppercase; color: var(--arcanum); margin: 2.6rem auto 0; text-shadow: 0 0 20px rgba(89,140,209,.55); }
.conductor-whisper { font-family: var(--font-display); font-style: italic; font-size: 1.12rem; color: var(--ink-muted); margin: .9rem auto 0; max-width: 46ch; line-height: 1.5; }
.conductor-term { margin-top: 2.4rem; border: 1px solid rgba(89,140,209,.3); border-radius: 6px; background: #0b0e15; padding: 1.2rem 1.4rem; }
.cterm-line { font-family: var(--font-mono); font-size: .9rem; line-height: 1.7; letter-spacing: .04em; color: var(--arcanum); margin: 0; }
.cterm-line .tag { color: var(--wire); }
.cterm-line.cterm-dim { color: var(--ink-muted); font-size: .72rem; }

/* ============================================================================
   MEDIA — the gallery
   ========================================================================== */
.media-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.media-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
@media (min-width: 760px) { .media-grid { grid-template-columns: repeat(2, 1fr); } .media-tile.is-wide { grid-column: 1 / -1; } }
.media-tile {
  position: relative; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; padding: 0; cursor: zoom-in;
  background: var(--panel); aspect-ratio: 16 / 9; display: block; width: 100%;
  transition: border-color .2s ease, box-shadow .3s ease, transform .2s ease;
}
.media-tile[hidden] { display: none; }
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.media-tile:hover img, .media-tile:focus-visible img { transform: scale(1.04); }
.media-tile:hover, .media-tile:focus-visible { border-color: rgba(156,138,84,.5); box-shadow: 0 18px 40px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(156,138,84,.25); }
.media-idx {
  /* top-RIGHT, beside the zoom glyph: the store captures carry their own title top-left */
  position: absolute; top: .6rem; right: 3.1rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--ink-dim); background: rgba(11,13,18,.72); border: 1px solid rgba(156,138,84,.3); border-radius: 3px; padding: .2rem .45rem;
}
.media-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3.2rem 1.1rem .95rem;
  font-family: var(--font-mono); font-size: .74rem; line-height: 1.55; letter-spacing: .03em; text-align: left; color: var(--ink);
  background: linear-gradient(180deg, transparent 0%, rgba(4,5,10,.55) 42%, rgba(4,5,10,.93) 100%);
  text-shadow: 0 1px 3px rgba(4,5,10,.9);
}
.media-zoom {
  position: absolute; top: .6rem; right: .6rem; width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center;
  color: var(--ink); background: rgba(11,13,18,.72); border: 1px solid rgba(156,138,84,.3);
  opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease;
}
.media-tile:hover .media-zoom, .media-tile:focus-visible .media-zoom { opacity: 1; transform: none; }

/* lightbox: a real dialog — stage, counter + caption, filmstrip, arrows */
.lightbox { position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: 1fr auto; padding: 3vh 4.5rem 2vh; background: rgba(6,5,8,.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; min-height: 0; display: grid; grid-template-rows: 1fr auto; gap: .8rem; align-items: center; justify-items: center; }
.lb-stage { min-height: 0; max-height: 100%; display: grid; place-items: center; }
.lb-img { max-width: 100%; max-height: 74vh; border: 1px solid rgba(156,138,84,.35); border-radius: 4px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.lb-foot { display: flex; gap: 1rem; align-items: baseline; justify-content: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--ink-dim); text-align: center; }
.lb-count { color: var(--bronze); letter-spacing: .14em; white-space: nowrap; }
.lb-strip { display: flex; gap: .5rem; justify-content: center; overflow-x: auto; padding: .8rem .2rem .2rem; scrollbar-width: thin; }
.lb-th { flex: 0 0 auto; width: 96px; height: 54px; padding: 0; border: 1px solid rgba(156,138,84,.3); border-radius: 3px; overflow: hidden; background: var(--panel); cursor: pointer; opacity: .55; transition: opacity .15s, border-color .15s, transform .15s; }
.lb-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-th:hover { opacity: .9; }
.lb-th.on { opacity: 1; border-color: var(--bronze-bright); box-shadow: 0 0 0 1px var(--bronze-bright); transform: translateY(-2px); }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(21,23,28,.85); color: var(--ink); border: 1px solid rgba(156,138,84,.34); border-radius: 4px; cursor: pointer;
  font-size: 1.8rem; line-height: 1; width: 48px; height: 48px; display: grid; place-items: center; transition: color .15s, border-color .15s;
}
.lb-btn:hover { color: var(--bronze-bright); border-color: var(--bronze); }
.lb-prev { left: 1rem; } .lb-next { right: 1rem; }
.lb-close { top: 1rem; right: 1rem; transform: none; }
@media (max-width: 700px) {
  .lightbox { padding: 2vh 1rem 1vh; }
  .lb-btn { width: 40px; height: 40px; font-size: 1.4rem; background: rgba(21,23,28,.7); }
  .lb-prev { left: .4rem; } .lb-next { right: .4rem; }
  .lb-th { width: 72px; height: 40px; }
}

/* ============================================================================
   PLAYTEST — the one thing you can do today
   ========================================================================== */
.pt-band { background: radial-gradient(70% 90% at 80% 20%, rgba(102,219,255,.08), transparent 60%), var(--panel); }
.pt-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 960px) { .pt-grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; } }
.pt-rules { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .7rem; max-width: 62ch; }
.pt-rules li { display: grid; grid-template-columns: 30px 1fr; gap: .7rem; align-items: start; color: var(--ink-dim); line-height: 1.55; }
.pt-rule-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--bronze-dim); border-radius: 3px; background: rgba(4,5,10,.5); color: var(--bronze-bright); }
.pt-live { padding: 1.1rem 1.2rem 1.3rem; }
.pt-live-k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; }
.pt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wire); box-shadow: 0 0 10px var(--wire); animation: live-pulse 1.8s ease-in-out infinite; }
.seat-meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: .3rem; }
.seat { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--bronze-dim); border-radius: 3px; background: rgba(4,5,10,.55); color: var(--ink-muted); }
.seat.is-taken { color: #17140c; background: linear-gradient(180deg, #c2ab68, #937c3c); border-color: #6d5c2e; box-shadow: inset 0 1px 0 rgba(255,246,214,.45); }
/* A taken seat wears its occupant. The avatar FILLS the tile (it is the seat, not a badge inside
   one) and drops the chip border it carries in a table row, so the seat's own brass frame is the
   only edge. Its background stays opaque so a PNG with alpha does not let the brass through. */
.seat > .pt-avatar { width: 100%; height: 100%; border: 0; border-radius: 2px; background: #15171c; }
.seat > .pt-avatar svg { width: 100%; height: 100%; }
.seat-count { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin: .6rem 0 0; }
.seat-count b { color: var(--bronze-bright); font-size: 1rem; }
.pt-empty { color: var(--ink-muted); font-style: italic; margin: 1.2rem 0 0; line-height: 1.5; }
.pt-topwave { margin: 1.2rem 0 0; line-height: 1; display: flex; align-items: baseline; gap: .5rem; }
.pt-topwave b { font-family: var(--font-display); font-size: 2.1rem; color: var(--bronze-bright); }
.pt-topwave span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.pt-rank { font-family: var(--font-mono); color: var(--bronze); font-size: .8rem; }
.pt-who { display: grid; color: var(--ink); overflow: hidden; }
.pt-who em { font-style: normal; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.pt-wave { display: grid; text-align: right; line-height: 1; }
.pt-wave b { font-family: var(--font-display); font-size: 1.5rem; color: var(--bronze-bright); }
.pt-wave small { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.pt-records { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0 0; }
.pt-records div { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 3px; }
.pt-records dt { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.pt-avatar { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--bronze-dim); background: var(--card); image-rendering: pixelated; vertical-align: middle; flex: 0 0 auto; display: inline-block; }
.pt-avatar svg { display: block; width: 100%; height: 100%; }
.pt-who { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.pt-legend { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; max-width: 82ch; }
.pt-legend li { color: var(--ink-dim); line-height: 1.55; padding-left: 1.2rem; position: relative; font-size: .95rem; }
.pt-legend li::before { content: "◆"; position: absolute; left: 0; top: .32rem; color: var(--bronze-dim); font-size: .68rem; }
.pt-records dd { margin: .2rem 0 0; font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.pt-kills { color: var(--bronze-bright); }
.pt-more { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); text-decoration: none; white-space: nowrap; }
.pt-more:hover { text-decoration: underline; }


/* ============================================================================
   PLAYTEST BOARD + DETAIL — /playtest and /playtest/p/<pid>
   ---------------------------------------------------------------------------
   GLOBAL, not scoped to either page, and that is the point. These rules were a
   Playtest.razor.css when only the board used them; the detail view needs the
   same tiles and tables, Blazor's CSS isolation cannot share a scoped sheet
   across two components, and half the vocabulary (.pt-avatar, .pt-legend,
   .pt-who) already lived here for exactly that reason. One home beats a copy
   that drifts.
   ========================================================================== */
.pt-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.7rem;
    margin-top: 1.6rem;
}
.pt-tile {
    background: var(--card);
    border: 1px solid var(--bronze-dim);
    border-radius: 6px;
    padding: 0.9rem 1rem;
}
.pt-tile b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--ink);
}
.pt-tile span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 0.2rem;
}
.pt-tile em {
    display: block;
    font-style: normal;
    font-size: 0.8rem;
    color: var(--bronze-bright);
    margin-top: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-h2 {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bronze-bright);
    margin: 2.2rem 0 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}
/* A build stamp. Monospace and quiet: it is a fact about the row, never a headline. */
.pt-ver {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* ── PANELS ────────────────────────────────────────────────────────────────────
   The page is five questions, not one long scroll: who is playing, who holds what, who is ahead,
   what they are winning with, and what just happened. Each gets a titled panel with a one-line
   subtitle saying which question it answers — the page had grown a nineteen-column table, eleven
   tiles and sixteen paragraphs of legend with nothing between them, and a reader could not tell
   where one idea stopped. The heading rule below (.pt-h2) already existed; what was missing was
   anything to attach it to. */
.pt-panel {
    margin-top: 2.4rem;
    padding-top: 0.1rem;
}
.pt-panel > .pt-h2 { margin-top: 0; }
.pt-sub {
    margin: 0.5rem 0 0;
    color: var(--ink-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 70ch;
}
.pt-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.1rem; }

/* The board's action cell carries two controls (open, and the full page), so it must not wrap
   them onto two lines in a row that is one line high everywhere else. */
.pt-actions { display: flex; align-items: center; gap: 0.7rem; white-space: nowrap; }
.pt-board td > .pt-ell { max-width: 14ch; }

/* The armoury's share column: a bar the width of the share, beside the number it is the width of. */
.pt-bar-cell { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.pt-inline-bar {
    display: inline-block;
    width: 56px;
    height: 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    overflow: hidden;
    flex: 0 0 auto;
}
.pt-inline-bar i { display: block; height: 100%; background: var(--bronze); }
.pt-arms td > .pt-ell { max-width: 26ch; }

/* An opened player: two columns of grouped chips, so ten numbers read as four questions. */
.pt-groups { display: grid; grid-template-columns: 1fr; gap: 0.4rem 2rem; }
@media (min-width: 860px) { .pt-groups { grid-template-columns: 1.25fr 1fr; } }
.pt-groups .pt-h3 { margin-top: 1rem; }
.pt-groups > div > .pt-h3:first-child { margin-top: 0; }
.pt-chip b.pt-sm { font-family: var(--font-body); font-size: 0.85rem; line-height: 1.3; }

/* ── the help, folded away ─────────────────────────────────────────────────────
   Sixteen paragraphs and a lookup table. Inline it sat between the board and the runs and pushed
   the two apart; it is read once and then never again, which is exactly what a disclosure is. */
.pt-help {
    margin-top: 2.4rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(4, 5, 10, 0.35);
}
.pt-help > summary {
    cursor: pointer;
    padding: 0.8rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bronze-bright);
    list-style: none;
}
.pt-help > summary::-webkit-details-marker { display: none; }
.pt-help > summary::before { content: "\25b8"; display: inline-block; margin-right: 0.6rem; transition: transform 0.15s ease; }
.pt-help[open] > summary::before { transform: rotate(90deg); }
.pt-help > summary:hover { color: var(--cyan); }
.pt-help > *:not(summary) { padding: 0 1rem; }
.pt-help > *:last-child { padding-bottom: 1rem; }

/* ── PLAYING RIGHT NOW ─────────────────────────────────────────────────────────
   A card per run in progress. Cards and not table rows on purpose: a live run has six numbers
   worth reading at a glance from across a room, and a nineteenth column on an already-wide table
   is the opposite of that. `is-quiet` is a run whose reports have stopped — dimmed rather than
   dropped, because a closed game sends no ending and removing it would be a guess. */
.pt-live {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
    justify-content: start;
    gap: 0.7rem;
    margin-top: 0.9rem;
}
.pt-live-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 0.8rem;
    padding: 0.8rem 0.9rem;
    background: var(--card);
    border: 1px solid var(--bronze-dim);
    border-radius: 6px;
}
.pt-live-card.is-hot { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(102, 219, 255, 0.15) inset; }
.pt-live-card.is-quiet { opacity: 0.62; }
.pt-live-top { grid-column: 1; display: grid; gap: 0.35rem; min-width: 0; }
.pt-live-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pt-live-wave { grid-column: 2; grid-row: 1; display: grid; text-align: right; line-height: 1; }
.pt-live-wave b { font-family: var(--font-display); font-size: 2rem; color: var(--bronze-bright); }
.pt-live-wave small {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.pt-live-stats {
    grid-column: 1 / -1;
    margin: 0.7rem 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem 0.5rem;
}
.pt-live-stats dt {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.pt-live-stats dd {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
/* Truncation. THE DISPLAY RULE ONLY EVER APPLIES TO A SPAN INSIDE A CELL, never to the cell:
   `display: inline-block` on a <td> takes it out of the table's row layout altogether, and the
   row then renders as loose boxes with the wave number floating above the hero name on a line of
   its own. That shipped on the board and the recent-runs table and is exactly what it looked
   like. Give the cell a max-width if it needs one; give the SPAN the ellipsis. */
/* A run that has begun and banked nothing yet: prose instead of a grid of zeros. */
.pt-warming {
    grid-column: 1 / -1;
    margin: 0.7rem 0 0;
    color: var(--ink-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.pt-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td > .pt-ell, dd.pt-ell { display: inline-block; vertical-align: bottom; max-width: 100%; }

/* The live mark. One dot, three places (the ticker, a live card, a board row), so "this is
   happening now" always looks the same. */
.pt-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wire);
    box-shadow: 0 0 8px var(--wire);
    display: inline-block;
    flex: 0 0 auto;
    animation: live-pulse 1.8s ease-in-out infinite;
}
.pt-ticker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cyan);
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .pt-dot { animation: none; }
}

/* ── a run, opened ─────────────────────────────────────────────────────────── */
.pt-open-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.pt-open-btn:hover { text-decoration: underline; }
.pt-caret { transition: transform 0.15s ease; display: inline-block; }
.pt-caret.is-open { transform: rotate(180deg); }
.pt-table tr.pt-open td { color: var(--ink); background: rgba(102, 219, 255, 0.05); }
.pt-detail-row > td { padding: 0 !important; border-top: 0 !important; white-space: normal !important; }
.pt-rundetail {
    padding: 1rem 0.6rem 1.3rem;
    border-bottom: 1px solid var(--line);
    background: rgba(4, 5, 10, 0.35);
    position: sticky;
    left: 0;
    width: min(100%, calc(100vw - 2.4rem));
}
.pt-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}
.pt-chip {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(4, 5, 10, 0.5);
}
.pt-chip b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.pt-chip span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 0.25rem;
}
.pt-h3 {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bronze-bright);
    margin: 0 0 0.3rem;
}
.pt-h3 + .pd-bars { margin-bottom: 1rem; }
/* The nested table is a lookup inside a panel, not a board: it opts out of .pt-table's
   board-sized min-width so it never gives the panel a scrollbar of its own. */
.pt-sub { min-width: 0; margin-top: 0; }

.pt-scroll { overflow-x: auto; }
.pt-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.8rem;
    min-width: 720px;
}
.pt-table th {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 400;
    text-align: left;
    padding: 0.4rem 0.55rem;
    white-space: nowrap;
}
.pt-table td {
    padding: 0.45rem 0.55rem;
    border-top: 1px solid var(--line);
    color: var(--ink-dim);
    font-size: 0.88rem;
    white-space: nowrap;
}
.pt-table .num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
/* The scale key. It is a five-row lookup, not a board, so it opts out of .pt-table's 720px
   min-width (which would give a small table a scrollbar it never needs) and lets its two prose
   columns wrap. The mark column carries the weight, because the mark is the thing being looked
   up: a reader arrives here holding a "Qi" and needs to find that row. */
.pt-scale { min-width: 0; max-width: 78ch; }
/* .pt-note is unbounded because its other uses are one short line under a table. This one is a
   sentence, and a sentence set across a 1900px viewport is unreadable — it takes the legend's
   measure instead. */
.pt-scale-intro { max-width: 82ch; }
.pt-scale td { white-space: normal; }
.pt-scale .num { white-space: nowrap; }
.pt-scale .pt-mark {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--bronze-bright);
    white-space: nowrap;
}
@media (max-width: 560px) {
    /* On a phone the key has to stay a LOOKUP, not a sideways scroll: a reader arrives holding an
       "Qi" and wants that row, example included. The gloss column is the one that only restates
       what the power of ten already said, so it is the one that goes. */
    .pt-scale tr > *:nth-child(4) { display: none; }
}
.pt-top td { color: var(--ink); }
.pt-top .pt-rank { color: var(--bronze-bright); font-weight: 600; }
.pt-name { color: var(--ink); }
.pt-wave { color: var(--bronze-bright); font-weight: 600; font-size: 1rem; }
.pt-dim { color: var(--ink-muted); }
.pt-note {
    font-size: 0.8rem;
    color: var(--ink-muted);
    margin-top: 0.7rem;
    line-height: 1.5;
}

.pd-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.pd-sub {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 1.2rem 0 0;
}

/* The two breakdowns sit side by side on a wide screen and stack on a phone — a tester reads this
   on whatever they have, and the faction split is the half that has to survive the narrow case. */
.pd-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem 2.4rem;
}
@media (min-width: 860px) {
    .pd-split { grid-template-columns: 1fr 1fr; }
}

/* A breakdown row: name · proportional bar · count · share. The bar is scaled to the BIGGEST row,
   not to the total, so a split where one faction dominates still shows the shape of the rest. */
.pd-bars {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}
.pd-bars li {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) 1fr 4.5rem 3.2rem;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
    color: var(--ink-dim);
}
.pd-bar-name {
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pd-bar {
    display: block;
    height: 8px;
    border-radius: 2px;
    background: rgba(4, 5, 10, 0.6);
    border: 1px solid var(--line);
    overflow: hidden;
}
.pd-bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    min-width: 2px;
}
.pd-bar-n {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--bronze-bright);
}
.pd-bar-p {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-muted);
}

/* A rig's part list can be long; let it wrap rather than widen the table past the viewport. */
.pd-parts {
    white-space: normal;
    max-width: 32rem;
    line-height: 1.4;
    font-size: 0.8rem;
}

/* ============================================================================
   ROADMAP — gauge + timeline
   ========================================================================== */
.rm-gauge { margin-top: 2.2rem; }
.rm-track { position: relative; height: 10px; border-radius: 6px; background: rgba(4,5,10,.7); border: 1px solid var(--bronze-dim); box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
.rm-fill { position: absolute; inset: 1px auto 1px 1px; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--wire), var(--bronze-bright)); box-shadow: 0 0 14px rgba(115,242,255,.5); transition: width 1.3s var(--ease); }
.rm-gauge.in .rm-fill, html:not(.rv-on) .rm-fill { width: var(--p); }
.rm-here { position: absolute; left: var(--p); top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .35rem; }
.rm-here b { width: 16px; height: 16px; border-radius: 50%; background: var(--wire); border: 3px solid var(--iron); box-shadow: 0 0 0 2px var(--wire), 0 0 16px rgba(115,242,255,.8); animation: tl-pulse 2.2s ease-in-out infinite; }
.rm-here em { font-style: normal; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wire); white-space: nowrap; position: absolute; top: 20px; }
.rm-ticks { display: flex; justify-content: space-between; margin-top: 2.4rem; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.rm-ticks span { flex: 1; text-align: center; padding: 0 .2rem; }
.rm-ticks span:first-child { text-align: left; } .rm-ticks span:last-child { text-align: right; }
.rm-ticks .is-now { color: var(--wire); }
@media (max-width: 640px) { .rm-ticks span:not(.is-now):not(:first-child):not(:last-child) { display: none; } }

.timeline { list-style: none; margin: 2.4rem 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--wire), var(--bronze) 30%, var(--copper) 70%, rgba(128,112,82,.15)); }
.tl-item { position: relative; padding: 0 0 2.2rem 3rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-node { position: absolute; left: 3px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--iron); border: 2px solid var(--bronze); box-shadow: 0 0 0 4px var(--iron); z-index: 1; }
.tl-item.is-highlight .tl-node { border-color: var(--wire); }
.tl-item.is-now .tl-node { border-color: var(--wire); background: var(--wire); box-shadow: 0 0 0 4px var(--iron), 0 0 16px 2px rgba(115,242,255,.7); animation: tl-pulse 2.2s ease-in-out infinite; }
@keyframes tl-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--iron), 0 0 10px 1px rgba(115,242,255,.5); } 50% { box-shadow: 0 0 0 4px var(--iron), 0 0 22px 5px rgba(115,242,255,.85); } }
.tl-date { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); display: inline-block; margin-bottom: .35rem; }
.tl-date.is-now-date { color: var(--wire); }
.tl-body h3 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 .4rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tl-body p { color: var(--ink-dim); margin: 0; line-height: 1.6; max-width: 60ch; }
.tl-badge { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; font-weight: 700; color: var(--iron); background: var(--bronze-bright); padding: .14rem .45rem; border-radius: 999px; }
.tl-badge.is-live { background: var(--wire); animation: live-pulse 1.8s ease-in-out infinite; }
.tl-disclaimer { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-muted); margin: 2.2rem 0 0; padding-left: 3rem; }

/* ============================================================================
   THE LADDER (closing band)
   ========================================================================== */
.cta-band { text-align: center; background: radial-gradient(70% 130% at 50% 0%, rgba(89,140,209,.14), transparent 60%), var(--panel); }
.ladder { list-style: none; margin: 2.4rem auto 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.1rem; text-align: left; max-width: 1040px; }
@media (min-width: 900px) { .ladder { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.rung { display: flex; flex-direction: column; gap: .8rem; padding: 1rem 1.1rem 1.2rem; }
.rung-num { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .18em; color: var(--bronze); }
.rung-body { flex: 1; }
.rung-body h3 { font-family: var(--font-display); font-size: 1.45rem; margin: 0 0 .45rem; }
.rung-body p { color: var(--ink-dim); line-height: 1.6; margin: 0; }
.rung-act { align-self: flex-start; }
@media (max-width: 899px) { .rung-act { align-self: stretch; } }

/* ============================================================================
   FOOTER + PHONE DOCK
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); background: var(--iron); padding: 3rem 1.25rem 2.2rem; }
.footer-inner { max-width: var(--container); margin-inline: auto; display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: auto 1fr auto; } }
.footer-brand { display: flex; gap: .8rem; align-items: center; }
.footer-brand strong { font-family: var(--font-display); display: block; }
.footer-brand span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-dim); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; }
.footer-nav a { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); text-decoration: none; }
.footer-nav a:hover { color: var(--bronze); }
.footer-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.footer-legal { max-width: var(--container); margin: 1.8rem auto 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-family: var(--font-mono); font-size: .66rem; color: var(--ink-muted); }
.footer-legal-links { display: inline-flex; gap: 1rem; }
.footer-legal-links a { color: var(--ink-dim); text-decoration: none; }
.footer-legal-links a:hover { color: var(--bronze); }

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: flex; gap: .5rem; align-items: center; padding: .55rem .7rem;
  padding-bottom: calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(11,13,18,.94); border-top: 1px solid var(--line); box-shadow: 0 -20px 40px -20px rgba(0,0,0,.9);
  transform: translateY(110%); transition: transform .35s var(--ease);
}
.dock.show { transform: none; }
.dock .btn { flex: 1; }
.dock-x { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 1px solid var(--bronze-dim); border-radius: 3px; color: var(--ink-dim); cursor: pointer; }
@media (min-width: 900px) { .dock { display: none; } body.has-dock { padding-bottom: 0; } }

/* ============================================================================
   LEGAL / FORGE / 404 / ADMIN
   ========================================================================== */
.legal-page { padding: calc(var(--bar-h) + 3rem) 1.25rem 5rem; }
.legal-inner { max-width: 720px; margin-inline: auto; }
.legal-inner h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); margin: 0 0 1.4rem; }
.legal-inner h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 2rem 0 .5rem; color: var(--bronze); }
.legal-inner p { line-height: 1.7; color: var(--ink); }
.legal-inner a { color: var(--cyan); }
.legal-inner code { font-family: var(--font-mono); font-size: .86em; color: var(--bronze-bright); }
.legal-todo { color: var(--danger); font-family: var(--font-mono); font-size: .8rem; border: 1px solid rgba(217,64,64,.4); border-radius: 3px; padding: .6rem .9rem; }
.legal-langnote { font-family: var(--font-mono); font-size: .72rem; line-height: 1.6; letter-spacing: .03em; color: var(--ink-muted); border-left: 2px solid var(--bronze-dim); padding: .1rem 0 .1rem .9rem; margin: 0 0 1.8rem; }
.legal-back { margin-top: 2.5rem; }
.legal-back a { font-family: var(--font-mono); font-size: .8rem; }

.nf-page { padding-top: calc(var(--bar-h) + 4rem); border-top: 0; }
.nf-term { max-width: 46ch; margin-inline: auto; text-align: left; }
.nf-page .hero-cta { margin-top: 2.2rem; }

.forge-page { padding-top: calc(var(--bar-h) + 3rem); }
.forge-form { display: flex; flex-direction: column; margin-top: 2rem; }
.ff-label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-bright); margin: 1.1rem 0 .4rem; }
.ff-input { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--card); border: 1px solid var(--bronze-dim); border-left: 3px solid var(--bronze); border-radius: 4px; padding: .7rem .8rem; width: 100%; box-sizing: border-box; transition: border-color .15s; }
.ff-input:focus { outline: none; border-color: var(--wire); border-left-color: var(--wire); }
.ff-area { resize: vertical; min-height: 150px; line-height: 1.55; }
.ff-count { font-family: var(--font-mono); font-size: .62rem; color: var(--ink-muted); text-align: right; margin-top: .25rem; }
.ff-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ff-error { color: var(--danger); font-family: var(--font-mono); font-size: .8rem; margin: 1rem 0 0; }
.ff-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ff-chip { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: var(--ink-dim); background: var(--card); border: 1px solid var(--bronze-dim); border-radius: 4px; padding: .55rem 1rem; transition: color .15s, background .15s, border-color .15s; }
.ff-chip:hover { color: var(--ink); border-color: var(--bronze); }
.ff-chip.on { color: var(--iron); background: var(--bronze); border-color: var(--bronze); font-weight: 600; }
.ff-submit { margin-top: 2rem; align-self: stretch; width: 100%; cursor: pointer; font-family: var(--font-mono); font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; color: var(--iron); background: var(--bronze); border: none; border-radius: 5px; padding: 1.15rem 2rem; transition: background .15s, transform .1s; }
.ff-submit:hover { background: var(--bronze-bright); transform: translateY(-1px); }
.ff-submit:disabled { opacity: .6; cursor: default; transform: none; }
.ff-note { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-muted); margin: 1rem 0 0; letter-spacing: .04em; }
.ff-add { align-self: flex-start; margin-top: .5rem; cursor: pointer; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-bright); background: transparent; border: 1px dashed var(--bronze-dim); border-radius: 4px; padding: .55rem 1rem; transition: border-color .15s, color .15s; }
.ff-add:hover { color: var(--ink); border-color: var(--bronze); }
.ff-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.6rem; }
.ff-list-hd { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-bright); margin-bottom: .2rem; }
.ff-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; background: var(--card); border: 1px solid var(--bronze-dim); border-left: 3px solid var(--bronze); border-radius: 4px; padding: .5rem .7rem; }
.ff-item-cat { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--arcanum); white-space: nowrap; }
.ff-item-msg { color: var(--ink-dim); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-item-x { background: transparent; border: none; color: var(--ink-muted); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0 .2rem; }
.ff-item-x:hover { color: var(--danger); }

/* MudBlazor buttons still exist on the admin pages — keep them on-brand. */
.mud-button-root.mud-button-filled, .mud-button-root.mud-button-outlined { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; border-radius: 3px; }
.mud-button-root.mud-button-filled.mud-button-filled-primary { color: #17140c; font-weight: 700; border: 1px solid #6d5c2e; background: linear-gradient(180deg, #d9c580 0%, #b39a52 46%, #937c3c 54%, #7d6832 100%); }
.mud-button-root.mud-button-outlined.mud-button-outlined-secondary { color: var(--ink); border: 1px solid rgba(102, 219, 255, .38); }

#blazor-error-ui { color: var(--ink); background: var(--card); border-top: 1px solid var(--bronze); bottom: 0; box-shadow: 0 -1px 12px rgba(0, 0, 0, .5); box-sizing: border-box; display: none; left: 0; padding: 0.9rem 1.4rem; position: fixed; width: 100%; z-index: 1200; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.75rem; }

/* ============================================================================
   SCROLL REVEAL — per element, never per section, and NEVER a dependency
   The old version hid entire sections until 10 % of them was on screen; on a short
   viewport a 1500 px section never got there and the page below the hero stayed black.
   Now: content is visible by default; site.js opts the page in (html.rv-on) only once
   it has an IntersectionObserver, observes each .rv with threshold 0, and marks what is
   already in view on load. --d staggers siblings.
   ========================================================================== */
html.rv-on .rv { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--d, 0) * 60ms); }
html.rv-on .rv.in { opacity: 1; transform: none; }
.forge-page .rv, .forge-page .section-inner { opacity: 1 !important; transform: none !important; }

/* ============================================================================
   A11Y + MOTION
   ========================================================================== */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .footer-nav a:focus-visible {
  outline: 2px solid var(--wire); outline-offset: 3px; border-radius: 3px;
}
/* FocusOnNavigate parks focus on the h1 — no ring on a heading */
[tabindex="-1"]:focus, h1:focus { outline: none; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 4000; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; background: var(--bronze); color: var(--iron); padding: .7rem 1.1rem; border-radius: 0 0 4px 0; }
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html.rv-on .rv { opacity: 1; transform: none; transition: none; }
  .btn:active, .feature-card:hover, .hero-card:hover { transform: none; }
  .feature-card:hover .fi-svg, .hero-see .glyph, .fam-badge, .pt-dot, .nav-link-live::before, .tl-badge.is-live,
  .tl-item.is-now .tl-node, .rm-here b, .faction-card.is-you .crest, .hero-boot .caret { animation: none; }
  .rm-fill { transition: none; }
  .dock { transition: none; }
}