:root{
  --void:#080b13;
  --void-2:#0c111c;
  --panel:#111827;
  --panel-2:#0e1420;
  --line:#1f2c43;
  --line-soft:#172234;
  --orbit:#52d6ff;       /* high-orbit cyan: rules / structure */
  --orbit-dim:#2b6f8c;
  --atmos:#ff8b3d;       /* planet glow amber: faction / ground game */
  --atmos-dim:#9c5a2a;
  --warn:#ff5d6c;        /* crippling / damage red */
  --good:#5ee7a0;
  --violet:#9d8bff;
  --ink:#e9eff8;
  --ink-2:#aab6cc;
  --muted:#76849d;
  --maxw:1120px;
  --bracket: polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px));
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(255,139,61,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, rgba(82,214,255,.10), transparent 55%),
    var(--void);
  color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--orbit);text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

/* ---- Top bar ---- */
header.top{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(to bottom, rgba(8,11,19,.97), rgba(8,11,19,.86));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.top-inner{display:flex;align-items:center;gap:18px;padding:14px 0;flex-wrap:wrap;}
.mark{display:flex;align-items:center;gap:12px;min-width:0;}
.glyph{
  width:34px;height:34px;flex:none;border-radius:50%;
  border:2px solid var(--orbit);
  background:radial-gradient(circle at 35% 30%, #1d4a63, #081019 70%);
  box-shadow:0 0 0 3px rgba(82,214,255,.08), inset 0 0 12px rgba(82,214,255,.25);
  position:relative;
}
.glyph::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(255,139,61,.55);}
.title-line{display:flex;flex-direction:column;line-height:1.05;min-width:0;}
.title-line .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.32em;color:var(--orbit-dim);text-transform:uppercase;}
.title-line a{color:inherit;text-decoration:none;}
.title-line a:hover{text-decoration:none;}
.title-line h1{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:18px;letter-spacing:.04em;margin:1px 0 0;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---- Tabs ---- */
nav.tabs{display:flex;gap:6px;margin-left:auto;}
.tab{
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;border:1px solid var(--line);
  padding:9px 16px;cursor:pointer;clip-path:var(--bracket);display:inline-block;text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.tab:hover{color:var(--ink);border-color:var(--orbit-dim);text-decoration:none;}
.tab[aria-selected="true"],.tab[aria-current="page"]{
  color:var(--void);background:var(--orbit);border-color:var(--orbit);
}
.tab:focus-visible{outline:2px solid var(--atmos);outline-offset:2px;}

/* ---- Pages ---- */
.page{display:none;}
.page.active{display:block;animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---- Hero ---- */
.hero{padding:60px 0 30px;border-bottom:1px solid var(--line-soft);}
.hero .kicker{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.28em;color:var(--atmos);text-transform:uppercase;}
.hero h2{
  font-family:"Chakra Petch",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,6vw,52px);line-height:1.02;letter-spacing:.01em;margin:14px 0 12px;
}
.hero h2 .lo{color:var(--orbit);}
.hero h2 .hi{color:var(--atmos);}
.hero p.lede{max-width:64ch;color:var(--ink-2);font-size:16.5px;}
.factionchips{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.fchip{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;border:1px solid var(--line);padding:7px 13px;clip-path:var(--bracket);color:var(--ink-2);}
.fchip b{color:var(--atmos);}

/* ---- Section scaffold ---- */
section.block{padding:42px 0;border-bottom:1px solid var(--line-soft);}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;}
.sec-num{font-family:"IBM Plex Mono",monospace;color:var(--orbit-dim);font-size:13px;letter-spacing:.1em;}
.sec-head h3{font-family:"Chakra Petch",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(20px,3vw,27px);letter-spacing:.03em;margin:0;}
.sec-sub{color:var(--muted);font-size:14px;margin:0 0 22px;font-family:"IBM Plex Mono",monospace;letter-spacing:.04em;}

p{margin:0 0 14px;}
.body p{color:var(--ink-2);}
strong{color:var(--ink);font-weight:600;}
.hl-orbit{color:var(--orbit);font-weight:600;}
.hl-atmos{color:var(--atmos);font-weight:600;}
.hl-warn{color:var(--warn);font-weight:600;}

/* ---- Panels ---- */
.panel{
  background:linear-gradient(155deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);clip-path:var(--bracket);
  padding:22px 24px;position:relative;
}
/* .panel + .panel{margin-top:16px;} */
.panel h4{font-family:"Chakra Petch",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:15px;margin:0 0 10px;color:var(--ink);display:flex;align-items:center;gap:9px;}
.panel h4 .dot{width:8px;height:8px;background:var(--orbit);flex:none;transform:rotate(45deg);}
.panel.amber h4 .dot{background:var(--atmos);}
.panel.warn h4 .dot{background:var(--warn);}
.panel ul{margin:0;padding-left:18px;color:var(--ink-2);}
.panel li{margin:6px 0;}
.panel li::marker{color:var(--orbit-dim);}

.grid{display:grid;gap:16px;}
.grid.c2{grid-template-columns:repeat(2,1fr);}
.grid.c3{grid-template-columns:repeat(3,1fr);}

/* ---- Round flow strip ---- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.phase{background:var(--panel-2);border:1px solid var(--line);clip-path:var(--bracket);padding:16px 16px 18px;}
.phase .pn{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;color:var(--orbit-dim);}
.phase h5{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.04em;margin:4px 0 9px;color:var(--orbit);}
.phase ol{margin:0;padding-left:16px;font-size:13.5px;color:var(--ink-2);}
.phase li{margin:4px 0;}

/* ---- Altitude diagram ---- */
.altitude{border:1px solid var(--line);clip-path:var(--bracket);overflow:hidden;}
.layer{padding:18px 22px;position:relative;}
.layer .tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
.layer h5{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;letter-spacing:.04em;margin:4px 0 6px;font-size:18px;}
.layer p{margin:0;font-size:14px;color:var(--ink-2);}
.layer.orbit{background:linear-gradient(180deg,#0a1422,#0c1726);}
.layer.orbit .tag{color:var(--orbit);}
.layer.orbit h5{color:var(--ink);}
.layer.div{height:0;border-top:1px dashed var(--atmos-dim);}
.layer.atmo{background:linear-gradient(180deg,#1a1208,#120c06);}
.layer.atmo .tag{color:var(--atmos);}
.layer.atmo h5{color:var(--ink);}

/* ---- Tables ---- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);clip-path:var(--bracket);}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px;}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top;}
thead th{
  font-family:"Chakra Petch",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:12px;
  color:var(--orbit);background:var(--panel-2);border-bottom:1px solid var(--line);
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(82,214,255,.04);}
td.k{font-family:"Chakra Petch",sans-serif;color:var(--ink);font-weight:600;white-space:nowrap;}
td .roll{font-family:"IBM Plex Mono",monospace;color:var(--atmos);font-weight:600;white-space:nowrap;}

.callout{border-left:3px solid var(--atmos);background:rgba(255,139,61,.06);padding:12px 16px;margin:0 0 14px;font-size:14.5px;color:var(--ink-2);}
.callout b{color:var(--atmos);}
.callout.orbit{border-left-color:var(--orbit);background:rgba(82,214,255,.06);}
.callout.orbit b{color:var(--orbit);}

.steps{counter-reset:s;list-style:none;padding:0;margin:0;}
.steps li{position:relative;padding:12px 0 12px 50px;border-bottom:1px solid var(--line-soft);}
.steps li:last-child{border-bottom:none;}
.steps li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:11px;width:32px;height:32px;
  display:grid;place-items:center;clip-path:var(--bracket);
  background:var(--panel-2);border:1px solid var(--orbit-dim);color:var(--orbit);
  font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:14px;
}
.steps li b{color:var(--ink);}
.steps li span{color:var(--ink-2);}

/* ---- Glossary ---- */
.search-shell{margin-top:24px;}
.search-line{
  display:flex;align-items:center;gap:12px;border:1px solid var(--orbit-dim);
  background:var(--panel-2);clip-path:var(--bracket);padding:4px 16px;
}
.search-line .prompt{font-family:"IBM Plex Mono",monospace;color:var(--orbit);font-size:14px;flex:none;}
#gsearch{
  flex:1;background:transparent;border:none;color:var(--ink);font-family:"IBM Plex Mono",monospace;
  font-size:15px;padding:13px 0;letter-spacing:.02em;
}
#gsearch::placeholder{color:var(--muted);}
#gsearch:focus{outline:none;}
.search-line:focus-within{border-color:var(--orbit);box-shadow:0 0 0 3px rgba(82,214,255,.1);}
#gclear{background:none;border:none;color:var(--muted);cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:18px;line-height:1;padding:4px 6px;}
#gclear:hover{color:var(--warn);}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.chip{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);padding:6px 12px;cursor:pointer;
  clip-path:var(--bracket);transition:all .14s;
}
.chip:hover{border-color:var(--orbit-dim);color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--orbit);color:var(--void);border-color:var(--orbit);}
.chip:focus-visible{outline:2px solid var(--atmos);outline-offset:2px;}

.gcount{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);margin:20px 0 4px;letter-spacing:.04em;}

.gx-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px;padding-bottom:60px;}
.entry{
  background:linear-gradient(155deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  clip-path:var(--bracket);padding:16px 18px;
}
.entry .top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.entry .term{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--ink);}
.entry .def{color:var(--ink-2);font-size:14px;margin:0;}
.entry .def em{color:var(--orbit);font-style:normal;font-weight:600;}
.cat-tag{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;flex:none;border:1px solid currentColor;border-radius:2px;
}
.cat-core{color:#7fd4ff;} .cat-orders{color:#79e0c3;} .cat-abilities{color:#c7b8ff;}
.cat-ship{color:#52d6ff;} .cat-weapon{color:#9d8bff;} .cat-crippling{color:#ff7d8a;}
.cat-dropsite{color:#ffc36a;} .cat-bioficer{color:#ff8b3d;} .cat-resistance{color:#ffd34d;}
.cat-ucm{color:#5b9dff;} .cat-scourge{color:#cc5dff;} .cat-phr{color:#d8dde6;} .cat-shaltari{color:#8ce86a;}

.noresult{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--muted);font-family:"IBM Plex Mono",monospace;}
.noresult b{color:var(--ink);display:block;font-size:16px;margin-bottom:6px;}

/* ---- Faction pages ---- */
.fac-subnav{display:flex;flex-wrap:wrap;gap:8px;padding:30px 0 4px;}
.fac-banner{
  border:1px solid var(--line);border-left:4px solid var(--fac);clip-path:var(--bracket);
  padding:22px 26px;background:linear-gradient(155deg,var(--panel),var(--panel-2));margin:22px 0 18px;
}
.fac-sub{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.fac-name{font-family:"Chakra Petch",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(26px,5vw,42px);letter-spacing:.02em;margin:5px 0 4px;color:var(--fac);line-height:1;}
.fac-tag{font-family:"Chakra Petch",sans-serif;font-size:16px;color:var(--ink);margin:0;letter-spacing:.02em;}
.glance{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:22px;}
.glance .cell{border:1px solid var(--line);border-top:2px solid var(--fac);background:var(--panel-2);padding:12px 14px;clip-path:var(--bracket);}
.glance .lab{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);}
.glance .val{font-family:"Chakra Petch",sans-serif;font-size:13px;color:var(--ink);margin-top:4px;line-height:1.3;}
.fac-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;}
.fac-body .panel + .panel{margin-top:0;}
.panel.good{border-left:3px solid var(--good);} .panel.good h4 .dot{background:var(--good);}
.panel.warn{border-left:3px solid var(--warn);}
.fac-page .panel p{color:var(--ink-2);margin:0;}
.fac-page .panel em{color:var(--fac);font-style:normal;font-weight:600;}
.syslist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;}
.syslist li{position:relative;padding-left:18px;color:var(--ink-2);font-size:14px;}
.syslist li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--fac);transform:rotate(45deg);}

/* ---- Compare ---- */
.cmp-note{color:var(--muted);font-size:13px;font-family:"IBM Plex Mono",monospace;margin:14px 0 18px;letter-spacing:.02em;line-height:1.6;}
table.cmp{min-width:840px;}
table.cmp th.attr,table.cmp td.attr{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--orbit);background:var(--panel-2);position:sticky;left:0;white-space:nowrap;border-right:1px solid var(--line);
}
table.cmp thead th.fac-col{font-family:"Chakra Petch",sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--fac-col);border-bottom:2px solid var(--fac-col);background:var(--panel-2);}
table.cmp td{font-size:13px;color:var(--ink-2);min-width:140px;}
table.cmp tbody tr:hover td{background:rgba(82,214,255,.04);}
table.cmp tbody tr:hover td.attr{background:var(--panel);}

@media(max-width:900px){
  .glance{grid-template-columns:repeat(2,1fr);}
  .fac-body{grid-template-columns:1fr;}
  .syslist{grid-template-columns:1fr;}
}
footer{padding:30px 0 50px;color:var(--muted);font-size:12.5px;font-family:"IBM Plex Mono",monospace;letter-spacing:.03em;}
footer span{color:var(--orbit-dim);}

/* ---- Responsive ---- */
@media(max-width:860px){
  .grid.c2,.grid.c3{grid-template-columns:1fr;}
  .flow{grid-template-columns:1fr 1fr;}
  .gx-list{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .top-inner{gap:12px;}
  nav.tabs{width:100%;margin-left:0;flex-wrap:wrap;}
  .tab{flex:1 1 40%;text-align:center;padding:9px 8px;}
  .flow{grid-template-columns:1fr;}
  .title-line h1{font-size:15px;}
  .glance{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto;}
}