/* Console palette, copied from client/src/style.css rather than imported: this site has no build
   step and must render with the client unbuilt. site/README.md. */

:root{
  --void:#04060c; --panel:#0a1019; --panel-2:#0e1522; --panel-3:#111b2b;
  --line:#1b2a3f; --line-hot:#28455f;
  --phos:#5fdcff; --phos-dim:#2b6a86; --phos-glow:rgba(95,220,255,.45);
  --indigo:#7c9cff;
  --ink:#e6f1f8; --ink-dim:#8ba3ba; --ink-faint:#91a4b8;
  --alert:#ff6a52; --warn:#ffb27a; --good:#7cf2a4;
  /* Identity hues, the `sheet` column of shared/catalogue/factions.json. */
  --f-terran:#d8402f; --f-plexxan:#b06bff; --f-orfine:#ffb020;
  --f-preserver:#c3d0e8; --f-hive:#b6d94c; --f-kolari:#4dd8ff;
  --f-slahke:#3fbf6f; --f-genus:#e8476b; --f-pirate:#b9a68c;
  --f-reaver:#f24ecf; --f-critter:#1fcdd6; --f-lattice:#3d8bff;
  /* Not a faction: the Morchedi have no entry, and never will. */
  --f-morchedi:#a8925f;
  --display:"Rajdhani","Arial Narrow","Liberation Sans Narrow","Roboto Condensed",ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  --r:2px;
  --wide:1160px;
}

*{ box-sizing:border-box; }
html{ color-scheme:dark; scroll-behavior:smooth; }
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--mono); font-size:14.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* The sky is gradients, not assets: a marketing page that waits on bytes reads as broken before
   it reads as anything. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 800px at 78% -12%, #14304f 0%, transparent 62%),
    radial-gradient(900px 700px at 6% 100%, #1a1338 0%, transparent 65%),
    radial-gradient(600px 400px at 50% 40%, #0a1626 0%, transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent),
    radial-gradient(1px 1px at 70% 12%, #cfe 50%, transparent),
    radial-gradient(1px 1px at 44% 72%, #fff 50%, transparent),
    radial-gradient(1px 1px at 88% 60%, #bdf 50%, transparent),
    radial-gradient(1px 1px at 12% 84%, #fff 50%, transparent),
    radial-gradient(1px 1px at 62% 44%, #eef 50%, transparent),
    radial-gradient(1px 1px at 33% 8%, #fff 50%, transparent),
    radial-gradient(1px 1px at 8% 64%, #dee 50%, transparent);
}
/* One display surface, top to bottom. */
.scan{
  position:fixed; inset:0; z-index:99; pointer-events:none; opacity:.26;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.26) 2px 3px);
}

a{ color:var(--phos); text-decoration:none; }
.wrap{ max-width:var(--wide); margin:0 auto; padding:0 26px; }

.lbl{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:11px; font-weight:700; color:var(--ink-faint);
}

/* --- rails --- */

header.top{
  position:sticky; top:0; z-index:30;
  background:rgba(6,10,18,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-hot);
}
header.top .wrap{ display:flex; align-items:center; gap:22px; min-height:56px; padding-top:8px; padding-bottom:8px; }
header.top .mark{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.3em;
  font-weight:700; font-size:15px; color:var(--phos); text-shadow:0 0 18px var(--phos-glow);
}
header.top nav{ margin-left:auto; display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; }
.fleet-title{ color:#fff; text-shadow:none; }
header.top .fleet-title{ display:inline-block; }
/* Mono here, display on the wordmark: the nav should not read as more wordmark. */
header.top nav a{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em;
  font-size:11px; font-weight:400; color:var(--ink-dim);
  display:inline-flex; align-items:center; min-height:44px;
}
header.top nav a:hover{ color:var(--phos); }
header.top nav a[aria-current]{ color:var(--ink); }
header.top nav a.key{
  border:1px solid var(--phos-dim); color:var(--phos); padding:7px 16px;
  background:rgba(95,220,255,.08); letter-spacing:.14em;
}
header.top nav a.key:hover{ background:rgba(95,220,255,.18); box-shadow:0 0 22px rgba(95,220,255,.22); }

footer.bot{
  border-top:1px solid var(--line-hot); margin-top:56px; padding:32px 0 60px;
  color:var(--ink-faint); font-size:12px;
}
footer.bot .wrap{ display:flex; gap:20px; flex-wrap:wrap; align-items:baseline; }
footer.bot nav{ margin-left:auto; display:flex; flex-wrap:wrap; gap:8px 18px; }
footer.bot nav a{ display:inline-flex; align-items:center; min-height:44px; }

/* --- corner brackets: the recurring motif --- */

.brk{
  position:relative; border:1px solid var(--line-hot);
  background:linear-gradient(var(--panel),var(--panel-2));
}
.brk::before,.brk::after{
  content:""; position:absolute; width:14px; height:14px;
  border:2px solid var(--phos); opacity:.8;
}
.brk::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; }
.brk::after{ right:-1px; bottom:-1px; border-left:0; border-top:0; }

/* --- hero --- */

.hero{ padding:74px 0 56px; }
.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.stat{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--display);
  text-transform:uppercase; letter-spacing:.18em; font-size:11.5px; font-weight:700;
  color:var(--good); margin-bottom:22px;
}
.stat i{
  width:7px; height:7px; background:var(--good); border-radius:50%;
  box-shadow:0 0 12px var(--good); animation:pulse 2s infinite;
}
@keyframes pulse{ 50%{ opacity:.35; } }

h1{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(40px,5.6vw,66px); line-height:.98; letter-spacing:.01em;
  font-weight:700; margin:0 0 20px; color:#fff; text-shadow:0 0 34px var(--phos-glow);
}
h1 em{ font-style:normal; color:var(--phos); }
.lede{ font-size:16px; color:var(--ink-dim); max-width:54ch; margin:0 0 30px; }
.lede b{ color:var(--ink); font-weight:400; }

.cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:13px; font-weight:700; padding:13px 26px; border-radius:var(--r);
  border:1px solid var(--phos); color:#04121c;
  background:linear-gradient(120deg,#6fe3ff,var(--indigo));
  box-shadow:0 0 34px rgba(95,180,255,.32);
}
.btn:hover{ filter:brightness(1.12); }
.btn.ghost{ background:none; color:var(--phos); border-color:var(--phos-dim); box-shadow:none; }
.btn.ghost:hover{ border-color:var(--phos); }
.cta .note{ width:100%; color:var(--ink-faint); font-size:12px; margin-top:4px; }

/* --- fact strip --- */

.strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin-top:52px;
}
.strip div{ background:var(--panel); padding:16px 20px; }
.strip b{
  display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.1em;
  font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px;
}
.strip span{ color:var(--ink-faint); font-size:12px; }

/* --- sections --- */

section{ padding:64px 0; }
h2{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.2em;
  font-size:15px; font-weight:700; color:var(--phos); margin:0 0 8px;
}
.h2sub{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(26px,3.4vw,38px); font-weight:700; color:#fff;
  margin:0 0 16px; line-height:1.08;
}
.sub{ color:var(--ink-dim); max-width:68ch; margin:0 0 34px; }
.rule{ height:1px; background:linear-gradient(90deg,var(--phos-dim),transparent); margin:0 0 30px; }

.grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.card{ padding:24px; }
.card .no{
  display:flex; align-items:center; gap:12px; font-family:var(--display); font-size:11px;
  letter-spacing:.2em; font-weight:700; color:var(--ink-faint); margin-bottom:14px;
}
.card .no .badge{ margin-left:auto; letter-spacing:.12em; }
.card h3{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.08em;
  font-size:17px; font-weight:700; margin:0 0 10px; color:var(--ink);
}
.card p{ margin:0; color:var(--ink-dim); font-size:14px; }
.card p + p{ margin-top:10px; }

/* Two-up: prose beside a panel, alternating side. */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
.duo + .duo{ margin-top:44px; }
.duo.flip > *:first-child{ order:2; }
.duo h3{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(20px,2.4vw,26px); font-weight:700; margin:0 0 12px; color:#fff;
}
.duo .k{
  display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.2em;
  font-size:11px; font-weight:700; color:var(--phos); margin-bottom:10px;
}
.duo p{ margin:0 0 12px; color:var(--ink-dim); max-width:52ch; }
.duo p:last-child{ margin-bottom:0; }

/* --- state badges --- */

.badge{
  display:inline-block; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.14em; font-size:9.5px; font-weight:700; line-height:1;
  padding:5px 9px; border-radius:var(--r); white-space:nowrap;
  border:1px solid var(--line-hot); color:var(--ink-dim); background:rgba(255,255,255,.02);
}
.badge.now{ color:var(--good); border-color:rgba(124,242,164,.5); background:rgba(124,242,164,.07); }
.badge.wip{ color:var(--warn); border-color:rgba(255,178,122,.5); background:rgba(255,178,122,.07); }
.badge.soon{ color:var(--ink-faint); border-color:var(--line-hot); }

.legend{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; margin:0 0 34px; }
.legend span{ display:flex; gap:9px; align-items:center; color:var(--ink-faint); font-size:12px; }

/* --- panels: every screenshot on this page is drawn, not photographed --- */

.pnl{ padding:0; overflow:hidden; }
.pnl > .ttl{
  display:flex; gap:14px; align-items:center; padding:9px 14px;
  border-bottom:1px solid var(--line-hot); font-family:var(--display);
  text-transform:uppercase; letter-spacing:.16em; font-size:10.5px; font-weight:700;
  color:var(--ink-faint);
}
.pnl > .ttl b{ color:var(--phos); font-weight:700; }
.pnl > .ttl em{ margin-left:auto; font-style:normal; }
.pnl > .ttl .badge{ margin-left:auto; }
.pnl > .ttl em + .badge{ margin-left:0; }
.pnl > .bd{ padding:18px; }

/* radar scope */
.scope{ aspect-ratio:1; padding:14px; }
.scope .in{
  position:relative; height:100%; overflow:hidden; border:1px solid #23405a;
  background:radial-gradient(circle at 50% 50%,#10283f 0%,#050a12 74%);
}
.scope .in::before{
  content:""; position:absolute; inset:0; background-image:
    linear-gradient(rgba(95,220,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,220,255,.07) 1px,transparent 1px);
  background-size:34px 34px;
}
.rg{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  border:1px solid rgba(95,220,255,.22); border-radius:50%;
}
/* The wedge's apex is the scope origin, so the beam leaves the ship rather than the corner. */
/* Sized to the outer ring rather than the box, so neither the band nor the leading edge runs past
   it into the corners. The line is the leading edge and the band trails it, which puts the wedge
   clockwise of the line while the sweep turns anticlockwise. */
.sweep{
  position:absolute; left:4%; top:4%; width:92%; height:92%;
  border-radius:50%; overflow:hidden;
  background:conic-gradient(from 0deg at 50% 50%,rgba(95,220,255,.3) 0deg,rgba(95,220,255,.06) 26deg,transparent 44deg);
  animation:sweep 4.5s linear infinite;
}
.sweep::after{
  content:""; position:absolute; left:50%; top:0; bottom:50%; width:1px;
  background:rgba(95,220,255,.55);
}
@keyframes sweep{ to{ rotate:-360deg; } }

/* Contacts are hull outlines from shared/catalogue/ships.json, mirrored and rotated to heading. */
.glyph{
  position:absolute; width:26px; height:26px; translate:-50% -50%;
  rotate:var(--rot,0deg); overflow:visible; color:var(--good);
}
.glyph use{ fill:currentColor; fill-opacity:.14; stroke:currentColor; stroke-width:.075; stroke-linejoin:round; }
.glyph.h{ color:var(--alert); filter:drop-shadow(0 0 6px rgba(255,106,82,.7)); }
.glyph.me{ color:var(--phos); width:30px; height:30px; filter:drop-shadow(0 0 8px var(--phos-glow)); }
.glyph.friend{ color:var(--good); filter:drop-shadow(0 0 6px rgba(124,242,164,.6)); }
.glyph.cold{ color:var(--ink-faint); }
.tagline{
  position:absolute; translate:-50% 0; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.12em; font-size:8.5px; font-weight:700; white-space:nowrap;
}
.rd{
  position:absolute; font-family:var(--mono); font-size:10px;
  letter-spacing:.06em; color:#9fd4ee;
}

/* bar readouts */
.bars{ display:grid; gap:12px; }
.bar span{
  display:flex; justify-content:space-between; font-family:var(--display);
  text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; font-weight:700;
  color:var(--ink-faint); margin-bottom:5px;
}
.bar span em{ font-style:normal; color:var(--ink); }
.bar i{ display:block; height:7px; background:#0c1622; border:1px solid var(--line); }
.bar i b{ display:block; height:100%; background:var(--phos); box-shadow:0 0 12px var(--phos-glow); }
.bar.warn i b{ background:var(--warn); box-shadow:0 0 12px rgba(255,178,122,.5); }
.bar.bad i b{ background:var(--alert); box-shadow:0 0 12px rgba(255,106,82,.5); }

/* deck plan */
.deck{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.deck i{
  aspect-ratio:1; border:1px solid var(--line); background:#0c1622;
  display:grid; place-items:center; font-size:9px; color:var(--ink-faint);
  font-family:var(--display); letter-spacing:.08em; text-transform:uppercase;
}
.deck i.on{ border-color:var(--phos-dim); background:rgba(95,220,255,.08); color:#9fd4ee; }
.deck i.hurt{ border-color:var(--warn); background:rgba(255,178,122,.1); color:var(--warn); }
.deck i.gone{ border-color:var(--alert); background:rgba(255,106,82,.12); color:var(--alert); animation:pulse 1.4s infinite; }

/* seat strip */
.seats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.seat{ border:1px solid var(--line); background:#0c1622; padding:14px; }
.seat b{
  display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:11px; font-weight:700; margin-bottom:8px;
}
.seat span{ display:block; color:var(--ink-dim); font-size:12px; }
.seat u{
  display:block; margin-top:10px; text-decoration:none; font-size:10.5px;
  color:var(--ink-faint); font-family:var(--display); letter-spacing:.12em; text-transform:uppercase;
}

/* market ticker */
.tick{ display:grid; gap:1px; background:var(--line); }
.tick div{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:baseline;
  background:var(--panel); padding:9px 14px; font-size:12.5px;
}
.tick b{ color:var(--ink); font-weight:400; }
.tick s{ text-decoration:none; color:var(--ink-faint); font-size:11px; }
.tick em{ font-style:normal; font-family:var(--display); font-weight:700; letter-spacing:.08em; }
.tick em.up{ color:var(--good); }
.tick em.dn{ color:var(--alert); }

/* Hyperspace plane, the same furniture the client draws: faint grid, wells as identity-coloured
   dots inside an arrival ring, your own hull inside its sensor circle, a plotted course with its
   flip point. client/src/render/hyperspace.ts. */
.map{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:radial-gradient(560px 340px at 44% 46%,#0d1c2c 0%,#04080f 78%);
}
.map::before{
  content:""; position:absolute; inset:0; background-image:
    linear-gradient(rgba(95,220,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,220,255,.055) 1px,transparent 1px);
  background-size:38px 38px;
}
.map svg{ position:absolute; inset:0; width:100%; height:100%; }
/* Anchored on the dot, not on the dot-plus-label block: the label hangs below the coordinate the
   run lines are drawn to. */
.map .well{
  position:absolute; translate:-50% -3.5px; font-family:var(--display); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap;
  text-align:center; line-height:1;
}
.map .well i{
  display:block; width:7px; height:7px; margin:0 auto; border-radius:50%;
  background:currentColor; box-shadow:0 0 10px currentColor; position:relative;
}
/* The arrival ring is the one circle here whose size means something. */
.map .well i::after{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:34px; height:34px; border-radius:50%; border:1px solid currentColor; opacity:.32;
}
.map .well b{ display:block; margin-top:14px; font-weight:700; }
.map .ship{ position:absolute; translate:-50% -50%; }
.map .ship i{
  position:relative;
  display:block; width:6px; height:6px; border-radius:50%; background:var(--phos);
  box-shadow:0 0 12px var(--phos);
}
.map .ship i::after{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:132px; height:132px; border-radius:50%;
  border:1px solid rgba(95,220,255,.2);
}
.map .flip{
  position:absolute; translate:-50% -50%; width:9px; height:9px; border-radius:50%;
  border:1px solid var(--warn); opacity:.8;
}
.map .cap{
  position:absolute; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  color:#9fd4ee;
}

/* --- races --- */

.races{ position:relative; }
.races input{ position:absolute; width:1px; height:1px; margin:0; opacity:0; }
/* Ten cards, two rows of five. Fixed count, not auto-fit: the ninth and tenth must not
   land on a row of their own. */
.racegrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.race{
  position:relative; display:block; background:var(--panel); padding:15px 16px; cursor:pointer;
  border-left:2px solid transparent; transition:.15s;
}
.race:hover{ background:var(--panel-3); }
.race b{
  display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.14em;
  font-size:12.5px; font-weight:700; margin-bottom:6px; color:var(--c);
}
.race span{ display:block; color:var(--ink-faint); font-size:11.5px; line-height:1.5; }
.race u{
  display:block; margin-top:9px; text-decoration:none; font-family:var(--display);
  text-transform:uppercase; letter-spacing:.16em; font-size:9px; font-weight:700;
  color:var(--ink-faint); opacity:0;
}

.race-summary{ display:none; margin-top:14px; padding:0; }
.race-summary .ttl b{ color:var(--c); }
.race-summary .bd{ display:grid; grid-template-columns:1fr 1fr; gap:26px; padding:22px; }
.race-summary .pull{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(18px,2.2vw,24px); line-height:1.14; font-weight:700;
  color:var(--c); margin:0 0 14px;
}
.race-summary h4{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.18em;
  font-size:10.5px; font-weight:700; color:var(--ink-faint); margin:0 0 6px;
}
.race-summary p{ margin:0 0 16px; color:var(--ink-dim); font-size:13.5px; }
.race-summary p:last-child{ margin-bottom:0; }
.race-summary .keys{ display:flex; gap:7px; flex-wrap:wrap; margin-top:4px; }
.race-summary .keys s{
  text-decoration:none; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.12em; font-size:9.5px; font-weight:700; padding:5px 9px;
  border:1px solid var(--c); color:var(--c); opacity:.85;
}

/* Checked radio lights its card and reveals its pane. No script on this site. */
.races:has(#r-terran:checked) .race-summary.terran,
.races:has(#r-plexxan:checked) .race-summary.plexxan,
.races:has(#r-orfine:checked) .race-summary.orfine,
.races:has(#r-preserver:checked) .race-summary.preserver,
.races:has(#r-hive:checked) .race-summary.hive,
.races:has(#r-kolari:checked) .race-summary.kolari,
.races:has(#r-slahke:checked) .race-summary.slahke,
.races:has(#r-genus:checked) .race-summary.genus,
.races:has(#r-pirate:checked) .race-summary.pirate,
.races:has(#r-morchedi:checked) .race-summary.morchedi{ display:block; }

.race.terran:has(input:checked),
.race.plexxan:has(input:checked),
.race.orfine:has(input:checked),
.race.preserver:has(input:checked),
.race.hive:has(input:checked),
.race.kolari:has(input:checked),
.race.slahke:has(input:checked),
.race.genus:has(input:checked),
.race.pirate:has(input:checked),
.race.morchedi:has(input:checked){
  background:var(--panel-3); border-left-color:var(--c);
}
.race.terran:has(input:checked) u,
.race.plexxan:has(input:checked) u,
.race.orfine:has(input:checked) u,
.race.preserver:has(input:checked) u,
.race.hive:has(input:checked) u,
.race.kolari:has(input:checked) u,
.race.slahke:has(input:checked) u,
.race.genus:has(input:checked) u,
.race.pirate:has(input:checked) u,
.race.morchedi:has(input:checked) u{ opacity:1; color:var(--c); }

.race.terran:has(input:focus-visible),
.race.plexxan:has(input:focus-visible),
.race.orfine:has(input:focus-visible),
.race.preserver:has(input:focus-visible),
.race.hive:has(input:focus-visible),
.race.kolari:has(input:focus-visible),
.race.slahke:has(input:focus-visible),
.race.genus:has(input:focus-visible),
.race.pirate:has(input:focus-visible),
.race.morchedi:has(input:focus-visible){ outline:3px solid var(--phos); outline-offset:-4px; }

/* Hatched card: a people you can read about and cannot fly. */
.race.gone{
  background:
    repeating-linear-gradient(135deg,transparent 0 6px,rgba(168,146,95,.09) 6px 7px),
    var(--panel);
}
.race.gone b{ color:var(--ink); }
.race.morchedi:has(input:checked) b,
.race.morchedi:has(input:checked) span{ opacity:1; }
.race-summary.morchedi .bd{
  background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(168,146,95,.05) 8px 9px);
}

.race-choice{ display:flex; flex-direction:column; min-width:0; background:var(--panel); }
.race-choice .race{ flex:1; }
.lore-open{ width:fit-content; min-height:44px; padding:8px 12px; border:1px solid var(--line-hot);
  background:var(--panel-3); color:var(--phos); font:inherit; font-size:12px; cursor:pointer; }
.race-summary .pull,.race b,.race-summary .ttl b{ color:color-mix(in srgb,var(--c) 75%,white); }
@media (max-width:860px){ .race-summary .bd{ grid-template-columns:1fr; gap:18px; } }
.lore{ position:fixed; inset:0; padding:0; width:min(820px,calc(100% - 32px)); max-height:calc(100dvh - 40px); margin:auto;
  overflow-x:hidden; overflow-y:auto; overflow-wrap:anywhere; background:var(--panel); color:var(--ink); border:1px solid var(--line-hot); }
.lore::backdrop{ background:rgba(0,0,0,.78); }
.lore .ttl{ position:sticky; top:0; z-index:1; background:var(--panel); flex-wrap:wrap; }
.lore .ttl h3{ margin:0; font-family:var(--display); font-size:18px; color:color-mix(in srgb,var(--c) 75%,white); }
.lore-close{ margin-left:auto; min-height:44px; padding:8px 14px; border:1px solid var(--line-hot);
  background:var(--panel-3); color:var(--ink); font:inherit; cursor:pointer; }
.lore-text{ padding:24px; }
.lore-text p,.lore-text ol{ margin:0 0 18px; max-width:74ch; color:var(--ink-dim); font-size:15px; line-height:1.7; }
.lore-text p:last-child{ margin-bottom:0; }
.lore-text ol{ padding-left:24px; }
@supports not selector(:popover-open){ .lore{ position:static; margin:20px 0; width:100%; max-height:none; } .lore-close{ display:none; } }

/* music stems */
.stems{ display:grid; gap:8px; }
.stem{ display:grid; grid-template-columns:76px 1fr; gap:12px; align-items:center; }
.stem b{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.14em;
  font-size:10px; font-weight:700; color:var(--ink-faint);
}
.stem i{ display:flex; gap:3px; height:22px; align-items:flex-end; }
.stem i s{ flex:1; background:rgba(95,220,255,.22); text-decoration:none; }
.stem i s.hot{ background:var(--phos); box-shadow:0 0 8px var(--phos-glow); }

/* --- readout tiles --- */

.readout{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.ro{ padding:16px 18px; }
.ro span{
  display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:10.5px; color:var(--ink-faint); margin-bottom:6px;
}
.ro b{ font-family:var(--display); font-size:24px; font-weight:700; color:var(--phos); }

/* --- factions --- */

.facs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.fac{ background:var(--panel); padding:18px 20px; }
.fac b{
  display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.14em;
  font-size:13px; font-weight:700; margin-bottom:5px;
}
.fac span{ display:block; color:var(--ink-dim); font-size:12.5px; }
.fac span .badge{ display:block; width:max-content; margin-top:10px; font-style:normal; }

.subhead{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:13px; font-weight:700; color:var(--ink); margin:34px 0 10px;
}
.subhead + .sub{ margin-bottom:16px; }

/* --- questions --- */

.qa{ border-top:1px solid var(--line); }
.qa > div{ border-bottom:1px solid var(--line); padding:20px 0; display:grid; grid-template-columns:280px 1fr; gap:30px; }
.qa h3{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em;
  font-size:16px; font-weight:700; margin:0; color:var(--ink);
}
.qa p{ margin:0; color:var(--ink-dim); max-width:62ch; }

/* --- closing block --- */

.end{ padding:52px 34px; text-align:center; }
.end .h2sub{ margin-bottom:12px; }
.end .sub{ margin:0 auto 26px; }
.end .cta{ justify-content:center; }

/* --- progress log --- */

.log{ border-left:1px solid var(--line-hot); margin-left:6px; }
.entry{ position:relative; padding:0 0 34px 26px; }
.entry::before{
  content:""; position:absolute; left:-4px; top:8px; width:7px; height:7px;
  border-radius:50%; background:var(--phos-dim); box-shadow:0 0 10px rgba(95,220,255,.5);
}
.entry.now::before{ background:var(--phos); animation:pulse 2s infinite; }
.entry h3{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.08em;
  font-size:19px; font-weight:700; margin:8px 0 4px; color:#fff;
}
.entry .when{ display:block; margin-bottom:10px; }
.entry .when b{ color:var(--phos); font-weight:700; }
.entry .when time{ font-family:var(--mono); letter-spacing:.08em; text-transform:none; }
.entry p{ margin:0 0 10px; color:var(--ink-dim); max-width:74ch; }
.entry ul{ margin:0; padding-left:18px; color:var(--ink-dim); }


@media (max-width:1100px){
  header.top .wrap{ flex-wrap:wrap; gap:4px 22px; }
  header.top nav{ width:100%; margin-left:0; }
}
@media (max-width:1000px){
  .racegrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .hero .wrap{ grid-template-columns:1fr; }
  .duo{ grid-template-columns:1fr; gap:22px; }
  .duo.flip > *:first-child{ order:0; }
  .qa > div{ grid-template-columns:1fr; gap:8px; }
}
@media (max-width:640px){
  .wrap{ padding-left:18px; padding-right:18px; }
  header.top{ position:relative; }
  header.top .mark{ padding:8px 0; }
  header.top nav{ gap:2px 16px; }
  .hero .wrap{ gap:26px; }
  .legend span{ flex-wrap:wrap; }
  .pnl > .ttl{ flex-wrap:wrap; gap:8px; }
  .tick div{ grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; padding:9px 10px; }
  .tick b{ grid-column:1 / -1; }
  .tick em{ text-align:right; }
  .end{ padding:30px 18px; }
  .card{ padding:20px; }
  .card .no{ flex-wrap:wrap; }
  .btn{ padding:13px 18px; max-width:100%; text-align:center; }
  .rd{ font-size:8px; letter-spacing:0; }
  .map .cap{ font-size:8px; }
  footer.bot nav{ margin-left:0; }
  .hero{ padding:52px 0 40px; }
  section{ padding:46px 0; }
  header.top nav a.key{ padding:7px 13px; }
  .racegrid{ grid-template-columns:1fr; }
}

/* Static navigation, readable status notes, and keyboard access. */
:where(a, input, button):focus-visible{ outline:3px solid var(--phos); outline-offset:4px; }
#main:focus{ outline:none; }
.skip-link{ position:fixed; top:8px; left:12px; z-index:120; padding:12px 18px;
  background:var(--panel); border:2px solid var(--phos); transform:translateY(-180%); }
.skip-link:focus{ transform:translateY(0); }
section[id], #main{ scroll-margin-top:150px; }
.hero .wrap > *, .duo > *, .grid > *, .race-summary .bd > *{ min-width:0; }
.hero .wrap + .wrap{ display:block; }
.picker-help{ color:var(--ink-faint); font-size:13px; }
.development{ background:var(--panel); border-block:1px solid var(--line-hot); }
.development .sub{ max-width:78ch; margin-bottom:18px; }
.status-note{ border-left:3px solid var(--phos); background:var(--panel); padding:18px 22px;
  margin:0 0 36px; color:var(--ink-dim); }
.status-note p{ margin:0; max-width:78ch; }
.status-note p + p{ margin-top:12px; }
.status-note b{ color:var(--ink); }
main p a{ text-decoration:underline; text-underline-offset:3px; }
.cta a{ text-decoration:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}
@media (forced-colors:active){
  .race{ border:1px solid ButtonText; }
  .race u, .race b, .lore .ttl h3{ color:CanvasText !important; }
  .btn, .badge{ border:1px solid ButtonText; }
}


/* Community links */
.social-panel{ display:flex; align-items:center; justify-content:space-between; gap:28px; padding:28px; }
.social-panel h3{ margin:8px 0; font-family:var(--display); font-size:26px; }
.social-panel p{ max-width:66ch; color:var(--ink-dim); }
.social-panel .btn{ flex-shrink:0; }
.development-states{ margin:24px 0; }

/* Legal pages: plain reading copy, not marketing (community-early.md). */
.legal .wrap{ max-width:820px; }
.legal h1{ font-size:42px; margin:8px 0 4px; }
.legal h2{ margin:36px 0 10px; }
.legal h3{ font-family:var(--display); font-size:17px; color:var(--ink); margin:22px 0 6px; }
.legal p, .legal li{ color:var(--ink-dim); max-width:74ch; }
.legal b{ color:var(--ink); font-weight:400; }
.legal ul{ padding-left:20px; }
.legal li + li{ margin-top:6px; }
.legal .updated{ color:var(--ink-faint); font-size:12px; margin:0 0 20px; }
.legal table{ width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:13.5px; }
.legal th, .legal td{ text-align:left; vertical-align:top; padding:8px 10px; border:1px solid var(--line); }
.legal th{ background:var(--panel-2); color:var(--ink); font-weight:400; }
.legal td{ color:var(--ink-dim); }
.legal code{ color:var(--phos); }
@media (max-width:640px){ .legal h1{ font-size:32px; } .legal th, .legal td{ padding:6px; } }
@media (max-width:640px){ .social-panel{ flex-direction:column; align-items:flex-start; padding:20px; } }