/* Anorak Arcade — shared site shell */
:root{
  --bg:#0a0e14; --bg2:#070a10; --panel:#121826; --panel2:#0f1623;
  --ink:#e7ecf5; --dim:#7d8aa0; --line:#1e2638; --line2:#2a3447;
  --acc:#ffb13d;            /* anorak amber */
  --cinder:#ff6a3d; --strata:#5ad1ff; --conduit:#b98cff; --homeostat:#36d399;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(1400px 900px at 50% -10%,#16203a,#0a0e14 55%);
  color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  min-height:100vh; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:#8ea2cf;text-decoration:none}
a:hover{color:var(--ink)}

/* ---- top nav ---- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:14px 22px;background:rgba(8,11,17,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.16em;color:var(--ink);font-size:14px}
.nav .brand .dot{width:11px;height:11px;border-radius:2px;background:var(--acc);box-shadow:0 0 12px var(--acc);transform:rotate(45deg)}
.nav .spacer{flex:1}
.nav a.link{color:var(--dim);font-size:12px;letter-spacing:.18em;padding:5px 2px;border-bottom:2px solid transparent}
.nav a.link:hover{color:var(--ink)}
.nav a.link.active{color:var(--ink);border-bottom-color:var(--acc)}
@media(max-width:560px){.nav{gap:14px;padding:12px 14px}.nav a.link{font-size:11px;letter-spacing:.1em}}

/* ---- layout ---- */
.wrap{max-width:920px;margin:0 auto;padding:44px 20px 90px}
.wrap.narrow{max-width:760px}
.eyebrow{color:var(--dim);letter-spacing:.32em;font-size:12px}
h1.title{font-size:38px;margin:10px 0 8px;letter-spacing:.02em;line-height:1.1}
h1.title .amber{color:var(--acc)}
.lede{color:#b6c0d4;max-width:680px;font-size:15px}
.lede b{color:var(--ink)}
.section-h{letter-spacing:.2em;font-size:13px;color:var(--dim);margin:42px 0 14px;border-top:1px solid var(--line);padding-top:24px}

/* ---- game cards ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}
@media(max-width:680px){.grid{grid-template-columns:1fr}}
a.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;transition:.16s;position:relative;overflow:hidden;color:inherit}
a.card:hover{transform:translateY(-3px);border-color:var(--line2)}
a.card .verb{font-size:11px;letter-spacing:.22em;color:#0a0e14;background:var(--c);display:inline-block;padding:3px 10px;border-radius:20px;font-weight:700}
a.card h2{margin:14px 0 4px;font-size:24px;letter-spacing:.18em}
a.card .tag{color:var(--dim);font-size:12px;letter-spacing:.1em;margin-bottom:10px}
a.card p{color:#b6c0d4;font-size:13px;margin:0}
a.card .pill{margin-top:14px;font-size:11px;color:var(--dim)}
a.card .glow{position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--c);opacity:.14;filter:blur(20px)}

/* ---- featured (full game) card ---- */
a.card.feature{grid-column:1/-1;background:linear-gradient(120deg,#1c1408,var(--panel) 62%)}
a.card.feature h2{font-size:30px}
a.card.feature .verb{background:var(--c)}

/* ---- generic panels / prose ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;margin:16px 0}
.prose p{color:#c4cde0;margin:14px 0}
.prose b{color:var(--ink)}
.prose blockquote{margin:18px 0;padding:14px 18px;border-left:3px solid var(--acc);background:var(--panel2);border-radius:0 8px 8px 0;color:#b6c0d4}
.prose blockquote p{margin:6px 0}
.prose ul,.prose ol{color:#c4cde0;padding-left:22px}
.prose li{margin:6px 0}
.prose code{background:#1b2335;border:1px solid var(--line2);border-radius:5px;padding:1px 6px;font-size:.92em;color:#dfe7f5}
.prose pre{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:16px;overflow:auto;line-height:1.45}
.prose pre code{background:none;border:0;padding:0;color:#bcd0ff}
.prose h1,.prose h2,.prose h3{line-height:1.25;margin:28px 0 8px}
.prose h1{font-size:28px}.prose h2{font-size:21px;color:var(--acc)}.prose h3{font-size:16px;color:var(--ink)}
.prose table{border-collapse:collapse;width:100%;margin:18px 0;font-size:12.5px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--panel2);color:var(--dim);letter-spacing:.06em}
.prose hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.prose a{color:#8ea2cf}

/* ---- pillars ---- */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
@media(max-width:680px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.pillar .n{color:var(--acc);font-weight:700;font-size:12px;letter-spacing:.12em}
.pillar .nm{font-weight:700;margin:3px 0 5px;letter-spacing:.04em}
.pillar p{color:#9fb0c9;font-size:12.5px;margin:0}

/* ---- doc viewer ---- */
.doclinks a{display:flex;gap:10px;align-items:baseline;padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--panel);color:var(--ink);transition:.15s}
.doclinks a:hover{border-color:var(--line2);transform:translateX(3px)}
.doclinks .num{color:var(--acc);font-weight:700}
.doclinks .d{color:var(--dim);font-size:12px}
#docbody{min-height:40vh}
.loading{color:var(--dim);padding:30px 0}

/* ---- table of contents ---- */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:18px 0 24px}
.toc-h{color:var(--dim);letter-spacing:.2em;font-size:11px;margin-bottom:8px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;columns:2;column-gap:28px}
@media(max-width:560px){.toc ol{columns:1}}
.toc li{margin:3px 0;break-inside:avoid}
.toc a{color:#a9b6cf;font-size:13px;display:inline-block;padding:2px 0}
.toc a:hover{color:var(--acc)}
.toc a::before{counter-increment:toc;content:counter(toc) "  ";color:var(--acc);font-weight:700}
.toc.sub a.lvl3{padding-left:16px;font-size:12px;color:#8895ad}
.toc.sub a.lvl3::before{content:""}
:target{scroll-margin-top:72px}
.prose h1,.prose h2,.prose h3{scroll-margin-top:72px}

/* ---- back to top ---- */
#toTop{position:fixed;right:22px;bottom:22px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(18,24,38,.9);color:var(--ink);font-size:18px;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s;z-index:60;backdrop-filter:blur(6px)}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{border-color:var(--acc);color:var(--acc)}

/* ---- misc ---- */
.note{color:var(--dim);font-size:12px;margin-top:30px;line-height:1.7}
.note b{color:var(--ink)}
.footer{max-width:920px;margin:0 auto;padding:30px 20px 50px;color:var(--dim);font-size:12px;border-top:1px solid var(--line)}
.footer a{color:var(--dim)}.footer a:hover{color:var(--ink)}
.btnrow{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--acc);color:#1a0d06;font-weight:700;letter-spacing:.1em;padding:11px 22px;border-radius:9px;font-size:13px}
.btn.ghost{background:none;border:1px solid var(--line2);color:var(--dim)}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink)}