/* ===== 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-mono, ui-monospace, "Cascadia Code", "SF Mono", Consolas, 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;

  /* borders / hairlines */
  --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;

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

html, body {
  margin: 0;
  background: var(--iron);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
  font-family: var(--font-display);
}

.brand-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}

/* ===== buttons: brass machine plates, not Material rectangles =====
   MudBlazor ships a flat filled rectangle with a ripple. The game's controls are stamped
   brass: a bevelled plate with a lit top edge, a dark seam under it, rivets in the corners
   and a press that physically sinks. Restyled here rather than replaced, so MudButton keeps
   its routing/ripple/disabled handling. */
.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-outlined {
  position: relative;
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: transform .09s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

/* --- primary: a stamped brass plate --- */
.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%);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 214, .55),   /* lit top edge */
    inset 0 -1px 0 rgba(20, 15, 4, .5),       /* shadowed bottom */
    0 2px 0 #4b3d1c,                          /* the plate has thickness */
    0 6px 16px -8px rgba(0, 0, 0, .9);
}
.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
  background: linear-gradient(180deg, #e6d494 0%, #c2a95f 46%, #a08945 54%, #8a7439 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 228, .7),
    inset 0 -1px 0 rgba(20, 15, 4, .5),
    0 2px 0 #4b3d1c,
    0 10px 24px -10px rgba(199, 184, 117, .5);
}
/* pressed = the plate actually sinks onto its seam */
.mud-button-root.mud-button-filled.mud-button-filled-primary:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 5px rgba(20, 15, 4, .55),
    0 0 0 #4b3d1c;
}
/* corner rivets */
.mud-button-root.mud-button-filled.mud-button-filled-primary::before,
.mud-button-root.mud-button-filled.mud-button-filled-primary::after {
  content: ""; position: absolute; top: 50%; width: 3px; height: 3px; border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 35%, #fff3cf, #6a5526 70%);
  opacity: .75; pointer-events: none;
}
.mud-button-root.mud-button-filled.mud-button-filled-primary::before { left: 7px; }
.mud-button-root.mud-button-filled.mud-button-filled-primary::after { right: 7px; }

/* --- secondary: an etched panel, cyan-lit on hover --- */
.mud-button-root.mud-button-outlined.mud-button-outlined-secondary {
  color: var(--ink);
  border: 1px solid rgba(102, 219, 255, .38);
  background: linear-gradient(180deg, rgba(102, 219, 255, .07), rgba(102, 219, 255, .02));
  box-shadow: inset 0 1px 0 rgba(190, 240, 255, .12);
}
.mud-button-root.mud-button-outlined.mud-button-outlined-secondary:hover {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(102, 219, 255, .16), rgba(102, 219, 255, .05));
  box-shadow: inset 0 1px 0 rgba(190, 240, 255, .22), 0 0 20px -8px rgba(102, 219, 255, .8);
}
.mud-button-root.mud-button-outlined.mud-button-outlined-secondary:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .mud-button-root.mud-button-filled:active,
  .mud-button-root.mud-button-outlined:active { transform: none; }
}

/* ===== app bar ===== */
.arcano-appbar {
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}
.nav-cta { white-space: nowrap; }

/* ===== language switch =====
   Two languages, so a segmented pair beats a dropdown: the current one is always visible
   and swapping costs one click. Replaces a bare Material globe that showed neither. */
.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: .7rem; letter-spacing: .1em; font-weight: 700;
  color: var(--ink-muted); text-decoration: none;
  padding: .34rem .58rem; line-height: 1.35;
  transition: color .15s ease, background .15s ease;
}
.lang-opt + .lang-opt { border-left: 1px solid var(--bronze-dim); }
.lang-opt:hover { color: var(--ink); background: rgba(156, 138, 84, .14); }
/* the language you are reading, stated plainly */
.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;
}
.lang-opt:focus-visible { outline: 2px solid var(--wire); outline-offset: -2px; }
@media (max-width: 599px) { .lang-opt { padding: .3rem .45rem; font-size: .66rem; } }
/* Phone: the wordmark and a multi-word CTA can't share a 390px bar — the gear mark
   carries the brand on its own and the CTA drops to one word (see MainLayout). */
@media (max-width: 599px) {
  .brand-title { display: none; }
  .nav-cta { padding-inline: .8rem; font-size: .82rem; }
}

/* ===== deck-plate backdrop motif (echoes RigBenchPlateShader) ===== */
.deck-plate {
  background-color: var(--iron);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(4,5,10,.55) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(4,5,10,.55) 63px 64px),
    radial-gradient(circle at 1px 1px, rgba(184,168,112,.10) 1px, transparent 1.6px);
  background-size: 64px 64px, 64px 64px, 64px 64px;
}

/* ===== hero ===== */
.hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 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-inner {
  max-width: 720px;
  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.4rem;
}

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

.hero-title {
  font-size: clamp(2.6rem, 1.5rem + 4.8vw, 5.2rem);
  line-height: 1.05;
  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.6rem 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: 2.2rem;
}

.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-creed {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-dim);
  margin: 2.4rem 0 0;
  font-size: 1.15rem;
}

/* typed conductor boot-line under the hero */
.hero-boot {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--arcanum);
  margin: 1.4rem 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; } }
@media (prefers-reduced-motion: reduce) { .hero-boot .caret { animation: none; } }

/* ===== blazor error ui ===== */
#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; }

/* ===== app-bar nav links ===== */
.nav-links { display: flex; gap: 1.4rem; align-items: center; }
.nav-link {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim);
}
.nav-link:hover { color: var(--ink); }

/* ===== generic section =====
   Sections are plates bolted to a deck: a dark seam with a lit edge under it, and a rivet
   centred on the join. A plain 1px rule read as a generic web divider. */
.section {
  padding: clamp(4rem, 9vw, 8rem) 1.5rem;
  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;
  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);
  opacity: .75;
}
.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: 1140px; 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: 0 0 1rem; }
.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; }

/* ===== feature grid (rig pillars) ===== */
.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; }
.section-alt .feature-card { background: var(--panel); }
.feature-card:hover { background: var(--card); }
/* Authored SVG (FeatureIcon.razor), not a unicode glyph in whatever face the OS had. */
.feature-card .fi { display: block; color: var(--bronze); margin-bottom: .9rem; }
.feature-card .fi-svg { width: 40px; height: 40px; display: block; }
.feature-card:hover .fi { color: var(--bronze-bright); }
.feature-card .fi-svg { transition: color .2s ease, transform .35s ease; }
.feature-card:hover .fi-svg { transform: rotate(8deg); }
@media (prefers-reduced-motion: reduce) { .feature-card:hover .fi-svg { transform: none; } }
.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; }

/* ===== faction cards ===== */
/* THE CAGE — the two orders, boxed together and facing each other. Bracketed corners on
   the wrapper do the "cage" work without a literal drawing of one. */
.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);
}
.faction-card.is-guild { background: linear-gradient(180deg, var(--panel), var(--iron)); }

/* …AND THE THIRD THING. Sits outside the cage, wider, lit, and slightly overlapping it —
   loose, not filed alongside the two that built it. */
.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 .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; }

/* ===== 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); }
.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; }
.hero-card .bio { font-style: italic; color: var(--ink); }

/* ===== the Conductor — a presence at the centre of its control-web ===== */
.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;
}

/* small conductor voice panel (reused by the /forge confirmation) */
.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); }

/* ===== roadmap timeline ===== */
.timeline { list-style: none; margin: 2.6rem 0 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--wire), var(--bronze) 30%, var(--copper) 70%, rgba(128,112,82,.15));
  border-radius: 2px;
}
.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); }
}
@media (prefers-reduced-motion: reduce) { .tl-item.is-now .tl-node { animation: none; } }
.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(--wire); padding: .12rem .45rem; border-radius: 999px;
}
.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; font-style: normal;
}

/* ===== the loop — four beats of a run, then the two rules that bracket it ===== */
.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;
}
/* the thread running through the four beats */
.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); }

/* ===== cta band ===== */
.cta-band {
  text-align: center;
  background: radial-gradient(70% 130% at 50% 0%, rgba(89,140,209,.14), transparent 60%), var(--panel);
}
.cta-band .hero-cta { margin-top: 1.8rem; }
.cta-band .body-lg { margin-top: 1rem; }

/* ===== footer ===== */
.site-footer { border-top: 1px solid var(--line); background: var(--iron); padding: 3rem 1.5rem 2.2rem; }
.footer-inner { max-width: 1140px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.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: 1.2rem; }
.footer-nav a { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); text-decoration: none; }
.footer-nav a:hover { color: var(--bronze); }
.footer-legal { max-width: 1140px; margin: 1.8rem auto 0; display: flex; flex-direction: column; gap: .3rem; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted); }

/* ===== legal pages ===== */
.legal-page { padding: 7rem 1.5rem 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; }
/* one line of English context on the two German-by-law pages */
.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; }

/* ===== 404 ===== */
.nf-page { padding-top: 8rem; border-top: 0; }
.nf-term { max-width: 46ch; margin-inline: auto; text-align: left; }
.nf-page .hero-cta { margin-top: 2.2rem; }

/* ===== focus visibility (keyboard) =====
   MudBlazor's ripple gives a mouse affordance but no clear keyboard ring; without
   this, tabbing through the nav and CTAs is invisible against the dark plate. */
a:focus-visible,
button:focus-visible,
.mud-button-root:focus-visible,
.nav-link:focus-visible,
.footer-nav a:focus-visible {
  outline: 2px solid var(--wire);
  outline-offset: 3px;
  border-radius: 3px;
}
/* skip link — first tab stop, off-screen until focused */
.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; }

/* ===== hero backdrop: real capture, then rig canvas, then scrim, then type ===== */
.hero-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; opacity: .34; filter: saturate(.8) contrast(1.05);
  /* fade the shot out toward the type so nothing competes with the headline */
  -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-inner { position: relative; z-index: 3; }
.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%);
}

/* honest "the store page isn't up yet" line under the CTAs */
.hero-soon {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; line-height: 1.6;
  color: var(--ink-muted); margin: .55rem auto 0; max-width: 46ch;
}
.hero-soon::before { content: "◆ "; color: var(--bronze-dim); }

/* ===== scroll reveal ===== */
.reveal-ready .section-inner { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal-ready .section-inner.in { opacity: 1; transform: none; }

/* ===== card hover polish ===== */
.feature-card, .faction-card, .hero-card {
  transition: transform .2s ease, box-shadow .3s ease, background .2s, border-color .2s;
}
.feature-card:hover, .hero-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -20px var(--bronze); }
/* Guild cards must NOT lift — they share a 1px seam inside the cage, and translating one
   tears the join open. Light them in place instead. */
.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:hover {
  border-color: var(--cyan);
  box-shadow: 0 22px 52px -28px rgba(102, 219, 255, .9);
}

/* ===== faction crests ===== */
.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)); }
}
@media (prefers-reduced-motion: reduce) { .faction-card.is-you .crest { animation: none; } }

/* ===== hero marks ===== */
.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)); }

/* ===== media gallery =====
   Two columns, with the showpiece captures (.is-wide) spanning both. Screenshots are
   16:9 and dense — a third column shrinks them past the point of reading anything. */
.media-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.4rem; }
@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;
  transition: border-color .2s ease, box-shadow .3s ease, transform .2s ease;
}
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s 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,.45); box-shadow: 0 18px 40px -26px rgba(0,0,0,.9);
}
/* Captions sit on gameplay, which can be bright tan wasteland — the scrim has to be
   tall and dark enough to carry mono text over any frame, not just the dark ones. */
.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);
}
/* zoom affordance — the tile opens a lightbox, so say so */
.media-zoom {
  position: absolute; top: .6rem; right: .6rem; width: 30px; height: 30px; border-radius: 4px;
  display: grid; place-items: center; font-size: .9rem; line-height: 1;
  color: var(--ink); background: rgba(11,13,18,.68); 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; }
.media-tile:focus-visible { outline: 2px solid var(--wire); outline-offset: 2px; }

/* the real bench, right under the schematic that explains it */
.rig-shot { margin: 2.4rem 0 0; }
.rig-shot-kicker { margin-bottom: .8rem; color: var(--ink-muted); }
.rig-shot .media-tile { width: 100%; cursor: zoom-in; }
.rig-shot .rig-caption { margin-top: 1rem; }

/* ===== lightbox ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: 3vh 2vw; background: rgba(6,5,8,.93); backdrop-filter: blur(5px);
}
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; max-width: 90vw; max-height: 90vh; text-align: center; }
.lb-img { max-width: 86vw; max-height: 80vh; border: 1px solid rgba(156,138,84,.3); border-radius: 4px; }
.lb-cap { margin-top: .9rem; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-dim); letter-spacing: .04em; }
.lb-btn {
  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.6rem; line-height: 1; width: 46px; height: 46px; flex: 0 0 auto;
}
.lb-btn:hover { color: var(--bronze); border-color: var(--bronze); }
.lb-close { position: absolute; top: 3vh; right: 2vw; }
@media (max-width: 640px) { .lb-btn { width: 38px; height: 38px; font-size: 1.3rem; } }

/* ===== hidden feedback page (/forge) ===== */
/* interactive component: Blazor re-renders its DOM after prerender, so the
   scroll-reveal IntersectionObserver loses its node — keep this page always visible. */
.forge-page .section-inner { opacity: 1 !important; transform: none !important; }
.forge-page { padding-top: 7rem; }
.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; }
/* category chips (replaces the native dropdown) */
.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; }
/* staged-notes batch */
.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); }