/* Iron Bearing — ironbearing.com. One stylesheet, no framework, no web font (the system UI stack at weight 900, as the
   game's own title screen). Tokens first; the accent follows the side the visitor chooses (html[data-side]). */
:root {
  --bg: #070b11; --bg2: #0b111a; --panel: #0f1722; --panel2: #141e2b; --line: rgba(150, 180, 210, .16); --line2: rgba(150, 180, 210, .28);
  --text: #e7eef6; --muted: #a6b5c6; --faint: #7d8ea2;
  --ore: #f2b54d; --c: #3ec9d6; --c-team: #3ea6ff; --c-glow: rgba(62, 201, 214, .35); --d: #ff7a2f; --d-team: #ff4a4a; --d-glow: rgba(255, 106, 47, .35);
  --accent: var(--ore); --accent-ink: #120c03; --accent-glow: rgba(242, 181, 77, .3);
  --title-a: #f4f8fc; --title-b: #9fb6c8;
  --paper: var(--bg2); --paper-text: var(--text); --paper-muted: var(--muted); --paper-card: var(--panel); --paper-line: var(--line); --paper-accent: var(--accent);
  --gutter: clamp(16px, 4vw, 48px); --max: 1240px; --bar-h: 56px;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
html[data-side="c"] { --accent: var(--c); --accent-ink: #031316; --accent-glow: var(--c-glow); --title-b: #7fd3e0; }
html[data-side="d"] { --accent: var(--d); --accent-ink: #1a0802; --accent-glow: var(--d-glow); --title-b: #ffb27f; }
/* light scheme: the story and the hero stay night-sky dark (they are space art); the reading sections turn to paper */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --paper: #eef2f6; --paper-text: #111821; --paper-muted: #46546a; --paper-card: #ffffff; --paper-line: rgba(20, 40, 70, .14); --paper-accent: #8a5700; }
}
:root[data-theme="light"] { --paper: #eef2f6; --paper-text: #111821; --paper-muted: #46546a; --paper-card: #ffffff; --paper-line: rgba(20, 40, 70, .14); --paper-accent: #8a5700; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 clamp(16px, 1.05vw + 12px, 19px)/1.6 var(--ui); overflow-x: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 800; letter-spacing: .01em; text-wrap: balance; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); font-weight: 700; border-radius: 6px; text-decoration: none; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; }

/* ---- buttons ---- */
.btn { --b: var(--accent); display: inline-flex; align-items: center; gap: .55em; min-height: 48px; padding: .7em 1.4em; border-radius: 4px; border: 1.5px solid var(--b);
  font: 700 15px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; color: var(--text); background: transparent;
  transition: background-color .25s, color .25s, box-shadow .25s, transform .25s var(--ease); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { box-shadow: 0 0 0 4px var(--accent-glow); transform: translateY(-1px); }
.btn--ghost { --b: rgba(231, 238, 246, .55); background: rgba(7, 11, 17, .35); }
.btn--ghost:hover { --b: var(--text); background: rgba(7, 11, 17, .6); }
.btn--small { min-height: 38px; padding: .55em 1em; font-size: 12px; }
.btn--soon { opacity: .92; }
.btn--soon[aria-pressed="true"] { opacity: 1; }

/* ---- header bar ---- */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar-h); display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter);
  background: linear-gradient(rgba(7, 11, 17, .7), rgba(7, 11, 17, 0)); transition: background-color .3s, box-shadow .3s; }
.bar.is-solid { background: rgba(7, 11, 17, .92); box-shadow: 0 1px 0 var(--line); }
@supports (backdrop-filter: blur(8px)) { .bar.is-solid { background: rgba(7, 11, 17, .72); backdrop-filter: blur(10px); } }
.bar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; font-size: 14px; white-space: nowrap; }
.bar__nav { display: flex; gap: 4px; margin-left: auto; }
.bar__nav a { padding: 8px 12px; text-decoration: none; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-radius: 4px; }
.bar__nav a:hover { color: var(--text); }
@media (max-width: 900px) { .bar__nav { display: none; } .bar .btn { margin-left: auto; } }
@media (max-width: 520px) { .bar__brand span { display: none; } .bar { gap: 12px; } }
.bar .btn { white-space: nowrap; }

/* ---- hero ---- */
.hero { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; padding: calc(var(--bar-h) + 24px) var(--gutter) clamp(72px, 12vh, 140px); background: #04070b; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 1.2s; }
.hero__video.is-playing { opacity: 1; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(120% 90% at 20% 100%, rgba(4, 7, 11, .92) 0%, rgba(4, 7, 11, .55) 45%, rgba(4, 7, 11, .15) 75%),
  linear-gradient(180deg, rgba(4, 7, 11, .5) 0%, rgba(4, 7, 11, 0) 25%, rgba(4, 7, 11, 0) 60%, var(--bg) 100%); }
.hero__content { max-width: var(--max); width: 100%; margin: 0 auto; }
.eyebrow { font-size: clamp(12px, .5vw + 10px, 16px); letter-spacing: .42em; text-transform: uppercase; color: #cfe0ec; margin: 0 0 .4em .2em; }
.title { font-size: clamp(56px, 12vw, 176px); font-weight: 900; letter-spacing: .1em; line-height: .9; text-transform: uppercase; margin: 0 0 .22em -.04em;
  color: var(--title-a); filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .55)); }
/* the gradient sits on each line (a clipped background on the h1 would not follow lines that move on their own) */
.title span { display: block; background: linear-gradient(180deg, var(--title-a) 20%, var(--title-b) 72%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; color: #d7e2ec; font-size: clamp(14px, .4vw + 12px, 17px); letter-spacing: .06em; margin-bottom: 28px; }
.hero__meta span:not(.tag) + span:not(.tag)::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 14px 3px -11px; background: var(--accent); transform: rotate(45deg); }
.tag { display: inline-block; padding: 3px 10px; border: 1px solid var(--accent); color: var(--accent); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #c8d6e2; text-decoration: none; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; padding: 8px; }
.hero__cue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(5px); opacity: 1; } }
@media (max-width: 640px) { .hero { align-items: end; text-align: left; } .hero__cta .btn { flex: 1 1 100%; justify-content: center; } .hero__meta { gap: 6px 16px; } .hero__meta span:not(.tag) + span:not(.tag)::before { display: none; } }
@media (orientation: landscape) and (max-height: 520px) { .hero { padding-bottom: 56px; } .title { font-size: clamp(44px, 9vw, 96px); } .hero__meta { margin-bottom: 16px; } .hero__cue { display: none; } }

/* ---- story: the starfield sits behind the chapters ---- */
main { overflow-x: clip; }   /* reveals slide in from the sides: never widen the page while they do */
.story { position: relative; }
.stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s; }
.stars.is-on { opacity: 1; }
.chapter { position: relative; z-index: 1; padding: clamp(88px, 14vh, 180px) var(--gutter); }
.chapter__text { max-width: 720px; position: relative; }
.chapter__text--center { margin: 0 auto; text-align: center; }
.chapter__text h2 { font-size: clamp(30px, 3.6vw + 10px, 62px); margin-bottom: .5em; }
.chapter__text p { color: var(--muted); font-size: clamp(17px, .5vw + 14px, 21px); }
.chapter__no { color: var(--accent) !important; font-size: 13px !important; letter-spacing: .38em; text-transform: uppercase; font-weight: 700; margin-bottom: 1.2em; }

.chapter--rim { display: grid; gap: clamp(24px, 5vw, 72px); align-items: center; max-width: var(--max); margin: 0 auto; }
.planet { position: relative; width: min(100%, 640px); aspect-ratio: 1; margin: 0 auto; filter: drop-shadow(0 30px 80px rgba(0, 0, 0, .6)); }
.planet picture, .planet img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 900px) { .chapter--rim { grid-template-columns: 1.05fr 1fr; min-height: 92vh; } }

.beats { list-style: none; margin: clamp(32px, 6vw, 72px) auto 0; padding: 0; max-width: var(--max); display: grid; gap: clamp(28px, 4vw, 48px); counter-reset: beat; }
.beat { text-align: center; }
.beat picture { width: min(78%, 360px); margin: 0 auto -6px; }
.beat h3 { font-size: clamp(26px, 2vw + 14px, 40px); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .45em; }
.beat:nth-child(1) h3 { color: var(--ore); } .beat:nth-child(2) h3 { color: #ffe08a; } .beat:nth-child(3) h3 { color: #f4f8fc; }
.beat p { color: var(--muted); max-width: 34ch; margin: 0 auto; }
@media (min-width: 900px) { .beats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px) and (max-width: 899px) { .beats { grid-template-columns: 1fr 1fr; } .beat:last-child { grid-column: 1 / -1; } }

.chapter--worlds { padding: 0; min-height: 100vh; display: grid; align-items: center; overflow: hidden; background: #03050a; }
.galaxy { position: absolute; inset: -7% 0; }
.galaxy__img, .galaxy__img img, .galaxy__fill, .galaxy__twinkle { position: absolute; inset: 0; width: 100%; height: 100%; }
.galaxy__img img { object-fit: cover; }
.galaxy::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(3, 5, 10, 0) 30%, rgba(3, 5, 10, .55) 100%), linear-gradient(180deg, var(--bg) 0, rgba(3, 5, 10, 0) 18%, rgba(3, 5, 10, 0) 82%, var(--bg) 100%); }
.worlds__text { padding: clamp(96px, 16vh, 200px) var(--gutter); z-index: 1; }
.worlds__text h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, .8); }
.counter { display: flex; flex-direction: column; align-items: center; margin: .3em 0 .6em; }
.counter__n { font-size: clamp(64px, 11vw, 168px); font-weight: 900; letter-spacing: .04em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff4dc;
  text-shadow: 0 0 40px rgba(242, 181, 77, .55), 0 2px 18px rgba(0, 0, 0, .8); }
.counter__l { font-size: 14px; letter-spacing: .5em; text-transform: uppercase; color: var(--ore); margin-top: .3em; text-shadow: 0 1px 8px #000, 0 0 2px #000; }
.worlds__q { font-size: clamp(22px, 1.6vw + 14px, 34px) !important; color: var(--text) !important; font-weight: 300; text-shadow: 0 2px 16px rgba(0, 0, 0, .9); }
.worlds__q em { font-style: normal; font-weight: 900; color: var(--ore); }

/* the split: the core and its two halves */
.core { position: relative; width: min(64vw, 380px); aspect-ratio: 1; margin: clamp(24px, 5vw, 56px) auto clamp(40px, 7vw, 88px); }
.core__half { position: absolute; inset: 0; transition: transform 1.6s var(--ease) .5s, filter 1.6s var(--ease) .5s; }
.core__half--c { clip-path: polygon(0 0, 50% 0, 54% 18%, 47% 30%, 55% 44%, 46% 58%, 53% 70%, 48% 84%, 51% 100%, 0 100%); }
.core__half--d { clip-path: polygon(50% 0, 100% 0, 100% 100%, 51% 100%, 48% 84%, 53% 70%, 46% 58%, 55% 44%, 47% 30%, 54% 18%); }
.core__half--c img { filter: hue-rotate(160deg) saturate(1.4) brightness(1.05); transition: filter 1.4s .6s; }
.core__half--d img { filter: hue-rotate(-12deg) saturate(1.3); transition: filter 1.4s .6s; }
.core__crack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.core__crack path { fill: none; stroke: #fff6e0; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px #ffcf7a); transition: stroke-dashoffset .6s ease-in, opacity .5s 1.4s; }
.spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #fff1cf; box-shadow: 0 0 10px 3px #ffb347; opacity: 0; }
.core.is-split .core__crack path { stroke-dashoffset: 0; opacity: 0; }
.core.is-split .core__half--c { transform: translateX(-16%) rotate(-5deg); filter: drop-shadow(0 0 40px var(--c-glow)); }
.core.is-split .core__half--d { transform: translateX(16%) rotate(5deg); filter: drop-shadow(0 0 40px var(--d-glow)); }
.core.is-split .spark { animation: spark 1.4s var(--ease) .55s forwards; }
.s1 { --x: -140px; --y: -90px; } .s2 { --x: 150px; --y: -60px; } .s3 { --x: -120px; --y: 110px; } .s4 { --x: 130px; --y: 120px; } .s5 { --x: -30px; --y: -170px; } .s6 { --x: 40px; --y: 170px; }
.s2, .s4 { background: #ffe1c8; box-shadow: 0 0 10px 3px #ff6a2f; } .s1, .s3 { background: #dffbff; box-shadow: 0 0 10px 3px #3ec9d6; }
@keyframes spark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.2); } }

.factions { display: grid; gap: clamp(16px, 3vw, 32px); max-width: 1100px; margin: 0 auto; }
@media (min-width: 760px) { .factions { grid-template-columns: 1fr 1fr; } }
.faction { --f: var(--c); --fg: var(--c-glow); position: relative; padding: clamp(24px, 3vw, 40px); background: linear-gradient(160deg, rgba(20, 30, 43, .92), rgba(10, 15, 22, .92)); border: 1px solid var(--line);
  border-top: 3px solid var(--f); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.faction--dominion { --f: var(--d); --fg: var(--d-glow); }
.faction::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 0%, var(--fg), transparent 70%); opacity: .45; pointer-events: none; }
.faction > * { position: relative; }
.faction h3 { font-size: clamp(32px, 3vw + 12px, 54px); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--f); margin-bottom: .35em; }
.faction__motto { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: #dfe8f0; margin-bottom: .6em; }
.faction__lore { font-size: clamp(19px, .6vw + 16px, 23px); color: var(--text); font-weight: 300; }
.faction p { color: var(--muted); }
.faction__sig { font-size: 15px; border-top: 1px solid var(--line); padding-top: 1em; margin: 0; }
.faction__sig span { display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--f); margin-bottom: .3em; }
.emblem { width: clamp(96px, 10vw, 132px); height: auto; color: var(--f); margin-bottom: 18px; overflow: visible; }
.emblem .em-l { stroke-dasharray: 1; stroke-dashoffset: 0; }
.emblem .em-f { opacity: 1; }
.js .emblem:not(.emblem--small) .em-l { stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease); }
.js .emblem:not(.emblem--small) .em-f { opacity: 0; transition: opacity .8s .9s; }
.js .emblem:not(.emblem--small) .em-2 { transition-delay: .2s; } .js .emblem:not(.emblem--small) .em-3 { transition-delay: .35s; } .js .emblem:not(.emblem--small) .em-4 { transition-delay: .6s; }
.js .is-in .emblem .em-l { stroke-dashoffset: 0; }
.js .is-in .emblem .em-f { opacity: 1; }
.js .is-in .emblem .em-6 { opacity: 1; }

.commanders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px clamp(12px, 3vw, 40px); align-items: center; max-width: 1100px; margin: clamp(40px, 7vw, 96px) auto 0; }
.commander { margin: 0; text-align: center; }
.commander img { width: 100%; max-width: 380px; margin: 0 auto; }
.commander--d picture { transform: scaleX(-1); }
.commander figcaption { font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--c); margin-top: -4px; }
.commander--d figcaption { color: var(--d); }
.commanders__q { grid-column: 1 / -1; grid-row: 2; margin: 0; text-align: center; }
.commanders__q p { font-size: clamp(20px, 1.2vw + 14px, 30px); font-weight: 300; max-width: 26ch; margin: 0 auto; }
@media (min-width: 760px) { .commanders { grid-template-columns: 1fr 1.1fr 1fr; } .commanders__q { grid-column: 2; grid-row: 1; } }

/* ---- the war (opaque from here on) ---- */
.chapter--war { background: linear-gradient(180deg, var(--bg) 0%, #0a1018 100%); }
.stills { display: grid; gap: 12px; max-width: var(--max); margin: clamp(32px, 5vw, 64px) auto 0; }
.still { margin: 0; position: relative; overflow: hidden; background: #000; }
.still img { width: 100%; transition: transform 6s var(--ease); }
.still:hover img { transform: scale(1.04); }
.still figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; font-size: 14px; letter-spacing: .06em; color: #e9f0f6; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
@media (min-width: 700px) { .stills { grid-template-columns: 1fr 1fr; } .still--big { grid-column: 1 / -1; } .still--big figcaption { font-size: 18px; padding: 40px 24px 18px; } }

.sub { text-align: center; font-size: clamp(24px, 1.6vw + 14px, 36px); letter-spacing: .14em; text-transform: uppercase; font-weight: 900; margin: clamp(72px, 10vw, 128px) 0 .4em; }
.sub__note { text-align: center; color: var(--muted); max-width: 60ch; margin: 0 auto clamp(28px, 4vw, 48px); font-size: 16px; }
.units { list-style: none; padding: 0; margin: 0 auto; max-width: var(--max); display: grid; gap: clamp(14px, 2vw, 24px); }
@media (min-width: 640px) { .units { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .units { grid-template-columns: repeat(3, 1fr); } }
.unit { --tx: 0deg; --ty: 0deg; --f: var(--accent); position: relative; background: linear-gradient(170deg, var(--panel2), var(--panel)); border: 1px solid var(--line); overflow: hidden;
  transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform .5s var(--ease), border-color .3s; }
.unit.is-tilting { transition: transform .08s linear, border-color .3s; }
.unit:hover, .unit:focus-within { border-color: var(--line2); }
.unit__art { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(52% 50% at 50% 56%, rgba(255, 214, 160, .2), transparent 72%), radial-gradient(75% 75% at 50% 60%, var(--accent-glow), transparent 74%); }
.unit__art picture { position: absolute; inset: 8px; }
.unit__art img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.unit:hover .unit__art img { transform: scale(1.04); }
.unit__txt { padding: 4px 20px 22px; }
.unit__kind { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: .4em; }
.unit h4 { font-size: 26px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .3em; }
.unit p:last-child { color: var(--muted); font-size: 15px; margin: 0; }
/* dual cards: both factions' renders; the visible one follows the chosen side, else the card's own default */
.dual picture { opacity: 0; transition: opacity .7s var(--ease); }
.dual picture.for-c, .dual[data-default="d"] picture.for-d { opacity: 1; }
.dual[data-default="d"] picture.for-c { opacity: 0; }
html[data-side="c"] .dual picture.for-c, html[data-side="d"] .dual picture.for-d { opacity: 1; }
html[data-side="c"] .dual picture.for-d, html[data-side="d"] .dual picture.for-c { opacity: 0; }
.dual span.for-d, .dual[data-default="d"] span.for-c { display: none; }
.dual[data-default="d"] span.for-d { display: inline; }
html[data-side="c"] .dual span.for-c, html[data-side="d"] .dual span.for-d { display: inline; }
html[data-side="c"] .dual span.for-d, html[data-side="d"] .dual span.for-c { display: none; }

.trailer { max-width: 1100px; margin: 0 auto; scroll-margin-top: calc(var(--bar-h) + 24px); }
.trailer__frame { position: relative; background: #000; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.trailer__video { width: 100%; height: 100%; }
.trailer__note { text-align: center; color: var(--faint); font-size: 14px; margin-top: 12px; }

/* ---- paper sections (light in the light scheme) ---- */
.paper { background: var(--paper); color: var(--paper-text); }
.paper .chapter__text p:not(.chapter__no) { color: var(--paper-muted); }
.chapter--maps { padding-right: 0; padding-left: 0; }
.chapter--maps .chapter__text { padding: 0 var(--gutter); }
.maps { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 4px var(--gutter) 20px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 44vw, 240px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; scrollbar-width: thin; }
.maps:focus-visible { outline-offset: -3px; }
.map { scroll-snap-align: start; background: var(--paper-card); border: 1px solid var(--paper-line); padding: 10px 10px 14px; }
.map img { width: 100%; image-rendering: pixelated; aspect-ratio: 1; }
.map h3 { font-size: 17px; margin: 12px 2px 4px; letter-spacing: .04em; }
.map p { font-size: 13px; color: var(--paper-muted); margin: 0 2px 6px; }
.map__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.map__tags span { font-size: 11px; letter-spacing: .08em; padding: 2px 7px; border: 1px solid var(--paper-line); border-radius: 3px; }

.chapter--how { padding-top: clamp(40px, 6vh, 80px); }
.how { list-style: none; margin: clamp(32px, 5vw, 56px) auto 0; padding: 0; max-width: var(--max); display: grid; gap: 16px; }
@media (min-width: 640px) { .how { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .how { grid-template-columns: repeat(4, 1fr); } }
.how li { background: var(--paper-card); border: 1px solid var(--paper-line); padding: 24px 22px; }
.how__ico { width: 44px; height: 44px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.how h3 { font-size: 20px; margin-bottom: .5em; }
.how p { color: var(--paper-muted); font-size: 16px; margin: 0; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"])[data-side="c"] { --paper-accent: #0a6f7a; }
  :root:not([data-theme="dark"])[data-side="d"] { --paper-accent: #a83a08; }
}
:root[data-theme="light"][data-side="c"] { --paper-accent: #0a6f7a; } :root[data-theme="light"][data-side="d"] { --paper-accent: #a83a08; }
.paper .chapter__no { color: var(--paper-accent) !important; }
.paper .how__ico { stroke: var(--paper-accent); }

/* ---- choose your side ---- */
.chapter--side { overflow: hidden; text-align: center; background: var(--bg); }
.side__bg { position: absolute; inset: 0; background: radial-gradient(60% 80% at 0% 50%, var(--c-glow), transparent 70%), radial-gradient(60% 80% at 100% 50%, var(--d-glow), transparent 70%); opacity: .5; transition: opacity .6s; }
html[data-side="c"] .side__bg { background: radial-gradient(90% 90% at 25% 50%, var(--c-glow), transparent 70%); opacity: .7; }
html[data-side="d"] .side__bg { background: radial-gradient(90% 90% at 75% 50%, var(--d-glow), transparent 70%); opacity: .7; }
.chooser { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 24px); max-width: 860px; margin: clamp(28px, 4vw, 48px) auto 18px; }
.choose { --f: var(--c); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: clamp(18px, 3vw, 36px) 12px; min-height: 48px; cursor: pointer;
  background: rgba(12, 18, 27, .85); color: var(--text); border: 1.5px solid var(--line2); font: inherit; transition: border-color .3s, background-color .3s, transform .3s var(--ease), box-shadow .3s; }
.choose--d { --f: var(--d); }
.choose:hover { border-color: var(--f); transform: translateY(-2px); }
.choose[aria-pressed="true"] { border-color: var(--f); background: rgba(12, 18, 27, .95); box-shadow: 0 0 0 1px var(--f), 0 0 50px -10px var(--f); }
.choose .emblem { color: var(--f); margin: 0; width: clamp(64px, 9vw, 104px); }
.choose__name { font-size: clamp(22px, 2vw + 12px, 38px); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--f); }
.choose__motto { font-size: clamp(11px, .3vw + 10px, 13px); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.side__status { position: relative; color: var(--muted); min-height: 1.6em; }
.soon { position: relative; margin-top: 18px; }
.soon__note { color: var(--muted); font-size: 15px; max-width: 46ch; margin: 14px auto 0; }
.soon__note.is-flash { color: var(--text); }

/* ---- footer ---- */
.foot { background: var(--paper); color: var(--paper-text); border-top: 1px solid var(--paper-line); padding: 40px var(--gutter) calc(40px + env(safe-area-inset-bottom)); }
.foot__in { max-width: var(--max); margin: 0 auto; display: grid; gap: 6px; }
.foot__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 0 0 6px; }
.foot__links { display: flex; gap: 22px; margin: 0 0 8px; }
.foot__links a { color: var(--paper-text); text-underline-offset: 3px; }
.foot__small { color: var(--paper-muted); font-size: 14px; margin: 0; }

/* ---- the trailer dialog ---- */
.player { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; color: var(--text); }
.player::backdrop { background: rgba(2, 4, 8, .92); }
.player__in { position: relative; width: min(96vw, calc((100vh - 96px) * 16 / 9), 1600px); margin: 0 auto; top: 50%; transform: translateY(-50%); }
.player__video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.player__close { position: absolute; right: 0; top: -52px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line2); background: rgba(10, 15, 22, .8); color: var(--text); cursor: pointer; border-radius: 4px; }
.player__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (orientation: landscape) and (max-height: 520px) { .player__in { width: min(calc((100vw - 120px)), calc(100vh * 16 / 9 - 24px)); } .player__close { right: -54px; top: 0; } }

/* ---- reveals (only when the script runs; without it everything is simply there) ---- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.js h2[data-reveal] { transform: translateY(44px); }
.chapter__text > [data-reveal]:nth-child(2) { transition-delay: .12s; } .chapter__text > [data-reveal]:nth-child(3) { transition-delay: .24s; } .chapter__text > [data-reveal]:nth-child(4) { transition-delay: .36s; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="rise"] { transform: translateY(46px); }
.js [data-reveal="left"] { transform: translateX(-48px); }
.js [data-reveal="right"] { transform: translateX(48px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.beats .beat:nth-child(2), .how li:nth-child(2), .faction--dominion { transition-delay: .12s; }
.beats .beat:nth-child(3), .how li:nth-child(3) { transition-delay: .24s; }
.how li:nth-child(4) { transition-delay: .36s; }

/* =====================================================================================================================
   Motion, round 2: the hero entrance, directed chapter reveals, the turning planet, the split's flash, the stills'
   slow pan, the arsenal's cross-fade and sheen, the drifting battlefields strip, the side wipe and the chapter rail.
   Transforms and opacity only (the title's tracking settles once, on load). Everything here is switched off under
   prefers-reduced-motion at the end of this block.
   ===================================================================================================================== */
/* chapter labels: a rule grows in before the text */
.chapter__no::before { content: ""; display: inline-block; vertical-align: middle; width: 34px; height: 1.5px; margin: 0 14px 3px 0; background: currentColor; transform-origin: left center; }
.js .chapter__no[data-reveal]::before { transform: scaleX(0); transition: transform .7s var(--ease) .15s; }
.js .chapter__no.is-in::before { transform: scaleX(1); }

/* hero: the lines rise and settle, then the tagline, then the meta line and the buttons */
@keyframes ib-title { from { opacity: 0; transform: translateY(.42em); letter-spacing: .34em; } to { opacity: 1; transform: none; letter-spacing: .1em; } }
@keyframes ib-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ib-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes ib-cue { 0%, 100% { opacity: .55; } 50% { opacity: 1; text-shadow: 0 0 12px var(--accent); } }
.hero__embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero__poster { transform-origin: 62% 40%; }
@media (prefers-reduced-motion: no-preference) {
  .title .t1 { animation: ib-title .85s var(--ease) .05s both; }
  .title .t2 { animation: ib-title .85s var(--ease) .22s both; }
  .eyebrow { animation: ib-up .7s var(--ease) .75s both; }
  .hero__meta { animation: ib-up .7s var(--ease) .95s both; }
  .hero__cta { animation: ib-up .7s var(--ease) 1.1s both; }
  .hero__cue { animation: ib-up .7s var(--ease) 1.4s both; }
  .hero__cue span { animation: ib-cue 2.2s ease-in-out 2.2s infinite; }
  .hero__poster { animation: ib-kenburns 20s ease-in-out infinite alternate; }
  .hero.is-video .hero__poster { animation-play-state: paused; }
}

/* the iron world turns (one turn in 120 s) under its fixed light; its ore veins breathe */
@keyframes ib-spin { to { transform: rotate(360deg); } }
@keyframes ib-veins { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .planet__surface img, .planet__veins img { animation: ib-spin 120s linear infinite; }
  .planet__veins { animation: ib-veins 3.8s ease-in-out infinite alternate; }
  .planet:not(.is-live) img, .planet:not(.is-live) .planet__veins { animation-play-state: paused; }
}

/* the galaxy: "why?" arrives with a two-frame flicker once the count is done */
@keyframes ib-flicker { 0% { opacity: 0; } 18% { opacity: 1; } 30% { opacity: .1; } 44% { opacity: 1; } 56% { opacity: .2; } 70%, 100% { opacity: 1; } }
.js .worlds__q em { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-why]:not(.is-asked) em { opacity: 0; }
  .js [data-why].is-asked em { animation: ib-flicker .5s steps(1, end) both; }
}

/* the split: a white flash of the core at the crack and a 300 ms shake of this section */
.core__flash { position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255, 244, 220, .85) 25%, rgba(255, 210, 150, .3) 50%, transparent 70%); opacity: 0; pointer-events: none; z-index: 2; }
@keyframes ib-flash { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes ib-shake { 0%, 100% { transform: none; } 15% { transform: translate(-6px, 2px); } 30% { transform: translate(5px, -3px); } 45% { transform: translate(-4px, -2px); } 60% { transform: translate(4px, 3px); } 80% { transform: translate(-2px, 1px); } }
@media (prefers-reduced-motion: no-preference) {
  .core.is-split .core__flash { animation: ib-flash .7s ease-out .42s both; }
  .chapter--split.is-shaking { animation: ib-shake .3s linear both; }
}

/* the stills: a slow pan and zoom while on screen, a closer look on hover; captions slide up */
@keyframes ib-pan { from { transform: scale(1.13) translate(0, 0); } to { transform: scale(1.2) translate(-2%, -1.2%); } }

.still picture { transition: scale .8s var(--ease); }
.still:hover picture { scale: 1.03; }
.still img { transition: none; }
.still:hover img { transform: none; }
.js .still figcaption { transform: translateY(105%); opacity: 0; transition: transform .7s var(--ease) .35s, opacity .7s var(--ease) .35s; }
.js .still.is-in figcaption { transform: none; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .still img { animation: ib-pan 22s ease-in-out infinite alternate; }
  .still:not(.is-live) img { animation-play-state: paused; }
  .still:hover img { animation-duration: 9s; }
}

/* the arsenal: a sheen that follows the tilt, and a glow in the card's accent */
.unit__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 35%), rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 40%, transparent 65%); mix-blend-mode: screen; }
.unit.is-tilting .unit__art::after, .unit:focus-visible .unit__art::after { opacity: 1; }
.unit { transition: transform .5s var(--ease), border-color .3s, box-shadow .35s; }
.unit:hover, .unit:focus-visible { box-shadow: 0 0 0 1px var(--accent), 0 18px 50px -18px var(--accent-glow), 0 0 42px -10px var(--accent-glow); }
.unit:focus-visible { outline: none; }

/* battlefields: the strip drifts (site.js), the start rings pulse once as it enters */
.map__thumb { position: relative; }
.map__dot { display: none; }
.js .map__dot { display: block; position: absolute; width: 10%; aspect-ratio: 1; margin: -5% 0 0 -5%; border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none; }
@keyframes ib-ring { 0% { opacity: .95; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.6); } }
.maps.is-marquee { scroll-snap-type: none; }
@media (prefers-reduced-motion: no-preference) { .maps.is-in .map__dot { animation: ib-ring 1.1s ease-out both; } }

/* choose your side: a radial wipe from the clicked card; the chosen emblem draws itself; the header shows the side */
.wipe { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0; background: var(--wc, var(--accent)); clip-path: circle(0 at var(--wx, 50%) var(--wy, 50%)); }
@keyframes ib-wipe { 0% { opacity: .55; clip-path: circle(0 at var(--wx) var(--wy)); } 60% { opacity: .38; } 100% { opacity: 0; clip-path: circle(150vmax at var(--wx) var(--wy)); } }
.wipe.is-go { animation: ib-wipe .6s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes ib-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ib-fill { from { opacity: 0; } to { opacity: 1; } }
.emblem.is-draw .em-l { animation: ib-draw .9s var(--ease) both; }
.emblem.is-draw .em-2 { animation-delay: .1s; } .emblem.is-draw .em-3 { animation-delay: .2s; } .emblem.is-draw .em-4 { animation-delay: .35s; }
.emblem.is-draw .em-f { animation: ib-fill .5s ease .6s both; }
.bar__emblem:empty { display: none; }
.bar__emblem { display: inline-flex; width: 18px; height: 18px; margin-right: 2px; }
.bar__emblem svg { width: 18px; height: 18px; margin: 0; color: var(--accent-ink); }
.bar__emblem .em-6[fill-opacity] { display: none; }

/* the chapter rail (desktop): I-VI at the right edge, the current one lit */
.rail { display: none; }
@media (min-width: 1024px) {
  .rail { position: fixed; right: 18px; top: 50%; z-index: 40; display: flex; flex-direction: column; gap: 14px; transform: translateY(-50%); padding: 10px 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
  .rail.is-on { opacity: 1; pointer-events: auto; }
  .rail::before { content: ""; position: absolute; right: 13px; top: 0; bottom: 0; width: 1px; background: var(--line2); }
  .rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; color: var(--faint); min-height: 24px; padding-right: 0; }
  .rail__no { position: relative; display: grid; place-items: center; width: 27px; height: 27px; font-size: 10px; font-weight: 800; letter-spacing: .04em; border: 1px solid var(--line2); border-radius: 50%; background: var(--bg); transition: color .3s, border-color .3s, box-shadow .3s, background-color .3s; }
  .rail__name { position: absolute; right: 38px; top: 50%; margin-top: -11px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; white-space: nowrap; background: rgba(7, 11, 17, .8); padding: 3px 8px; border-radius: 3px; }
  .rail a:hover .rail__name, .rail a:focus-visible .rail__name, .rail a.is-current .rail__name { opacity: 1; transform: none; }
  .rail a.is-current { color: var(--text); }
  .rail a.is-current .rail__no { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 16px var(--accent-glow); }
  .rail a:not(.is-current) .rail__name { color: var(--muted); }
}
.bar__nav a.is-current { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .wipe { display: none; }
  .js .chapter__no[data-reveal]::before { transform: none; }
  .js .still figcaption { transform: none; opacity: 1; }
  .js .map__dot { display: none; }
  .emblem.is-draw .em-l, .emblem.is-draw .em-f { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__video { display: none; }
  .unit { transform: none !important; }
  .js .emblem .em-l { stroke-dashoffset: 0; } .js .emblem .em-f { opacity: 1; }
  .core .core__crack path { opacity: 0; }
  .core .core__half--c { transform: translateX(-16%) rotate(-5deg); } .core .core__half--d { transform: translateX(16%) rotate(5deg); }
  .core .spark { display: none; }
}
@media print { .bar, .hero__media, .stars, .player, .hero__cue { display: none !important; } body { background: #fff; color: #000; } }

/* ---- credits and 404 ---- */
.doc-page { background: var(--paper); }
.doc { max-width: 760px; margin: 0 auto; padding: calc(var(--bar-h) + 48px) var(--gutter) 72px; color: var(--paper-text); }
.doc h1 { font-size: clamp(36px, 4vw + 12px, 60px); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4em; }
.doc h2 { font-size: 22px; margin: 2em 0 .6em; letter-spacing: .04em; }
.doc p, .doc li { color: var(--paper-muted); }
.doc strong { color: var(--paper-text); }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: .6em; }
.doc__lead { font-size: 20px; }
.doc__block { white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; background: var(--paper-card); color: var(--paper-text); border: 1px solid var(--paper-line); padding: 16px 18px; }
.lost-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 40%, #122033, var(--bg) 70%); }
.lost { text-align: center; padding: 48px var(--gutter); max-width: 640px; }
.lost img { margin: 0 auto 24px; }
.lost h1 { font-size: clamp(30px, 4vw + 10px, 52px); font-weight: 900; margin-bottom: .5em; }
.lost p { color: var(--muted); }