:root {
  --bg:#14132b; --bg-2:#1d1b3a; --panel:#232048; --ink:#f3f0e7; --muted:#9b97c4;
  --gold:#ffcc33; --green:#4caf3f; --red:#e8662a; --cyan:#2ec4d6; --line:#3a3766;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--ink); font-family:"VT323",monospace;
  font-size:21px; line-height:1.35; min-height:100vh; overflow-x:hidden; position:relative;
}
body::before { content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.18) 3px,rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply; }
body::after { content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.4) 100%); }
h1,h2,h3,h4,.pixel { font-family:"Press Start 2P",monospace; line-height:1.4; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1100px; margin:0 auto; padding:0 22px; }

/* ===== NAV BAR ===== */
.nav { position:sticky; top:0; z-index:100; background:var(--bg-2);
  border-bottom:4px solid #000; box-shadow:0 4px 0 rgba(0,0,0,.4); }
.nav .bar { max-width:1100px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:18px; }
.brand { font-family:"Press Start 2P",monospace; font-size:.8rem; color:var(--gold);
  text-shadow:2px 2px 0 var(--red); cursor:pointer; }
.brand:hover { color:#fff; }
.nav .spacer { flex:1; }
.menu { position:relative; }
.menu > button { font-family:"Press Start 2P",monospace; font-size:.62rem; cursor:pointer; color:var(--ink);
  background:var(--panel); border:3px solid var(--line); box-shadow:3px 3px 0 #000; padding:11px 14px; }
.menu > button:hover { border-color:var(--cyan); }
.dropdown { position:absolute; right:0; top:calc(100% + 8px); min-width:260px; display:none;
  background:var(--bg-2); border:4px solid #000; box-shadow:8px 8px 0 #000; padding:6px; z-index:120; }
.dropdown.open { display:block; }
.dropdown .game-row { font-family:"VT323",monospace; font-size:1.15rem; color:var(--ink); cursor:pointer;
  padding:9px 12px; display:flex; align-items:center; gap:10px; border-bottom:1px dashed var(--line); }
.dropdown .game-row:hover { background:var(--panel); }
.dropdown .game-row .arrow { margin-left:auto; color:var(--muted); font-size:1rem; transition:transform .12s; }
.dropdown .game-row.exp .arrow { transform:rotate(90deg); }
.dropdown .pages { display:none; padding:2px 0 8px 34px; }
.dropdown .pages.open { display:block; }
.dropdown .pages a { display:block; font-size:1.1rem; color:var(--muted); padding:6px 0; }
.dropdown .pages a:hover { color:var(--gold); }

/* ===== HERO ===== */
.hero { text-align:center; padding:64px 22px 46px;
  background:radial-gradient(circle at 50% 0%,rgba(46,196,214,.12),transparent 60%),var(--bg); }
.hero .blocks { display:flex; justify-content:center; gap:14px; margin-bottom:30px; }
.block { width:52px; height:52px; display:grid; place-items:center; font-size:24px; background:var(--gold);
  border:4px solid #1a1407; box-shadow:inset -4px -4px 0 rgba(0,0,0,.25),inset 4px 4px 0 rgba(255,255,255,.35),0 6px 0 #000;
  animation:bob 1.6s ease-in-out infinite; }
.block:nth-child(2){background:var(--red);animation-delay:.15s} .block:nth-child(3){background:var(--green);animation-delay:.30s}
.block:nth-child(4){background:var(--cyan);animation-delay:.45s} .block:nth-child(5){background:var(--gold);animation-delay:.60s}
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hero h1 { font-size:clamp(1.5rem,5vw,3rem); text-shadow:4px 4px 0 var(--red),8px 8px 0 rgba(0,0,0,.6); }
.hero .sub { font-size:1.3rem; color:var(--gold); margin-top:20px; letter-spacing:2px; }
.hero .start { margin-top:26px; font-family:"Press Start 2P",monospace; font-size:.72rem; color:var(--cyan);
  animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }

/* ===== HUD ===== */
.hud { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0 auto 28px; max-width:760px; }
.stat { flex:1 1 120px; background:var(--panel); border:3px solid var(--line); box-shadow:4px 4px 0 #000; padding:13px; text-align:center; }
.stat .n { font-family:"Press Start 2P",monospace; font-size:1.2rem; color:var(--gold); }
.stat .l { font-size:1rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

/* ===== HOME GRID ===== */
.grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); padding-bottom:30px; }
.cart { background:var(--panel); border:4px solid #000; box-shadow:6px 6px 0 #000; cursor:pointer; overflow:hidden;
  transition:transform .1s,box-shadow .1s; animation:pop .35s ease both; }
.cart:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 #000; }
.cart:active { transform:translate(2px,2px); box-shadow:3px 3px 0 #000; }
@keyframes pop { from{opacity:0;transform:scale(.94)} }
.cart .face { height:96px; display:grid; place-items:center; font-size:46px; border-bottom:4px solid #000; }
.cart .body { padding:14px 15px 16px; }
.cart h3 { font-size:.72rem; line-height:1.5; margin-bottom:8px; }
.cart .row { display:flex; align-items:center; gap:8px; font-size:1.05rem; color:var(--muted); }
.cart .sys { background:var(--bg); border:2px solid var(--line); padding:1px 7px; font-size:.95rem; }
.cart .blurb { font-size:1.05rem; color:var(--muted); margin-top:10px; }
.cart .pgline { font-size:1rem; color:var(--cyan); margin-top:12px; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:1rem; }
.dot { width:10px; height:10px; }
.dot.playing{background:var(--cyan)} .dot.beaten{background:var(--green)} .dot.backlog{background:var(--muted)}

/* ===== PAGE VIEW ===== */
.page { padding:34px 0 60px; animation:fade .25s ease both; }
@keyframes fade { from{opacity:0;transform:translateY(8px)} }
.crumbs { font-size:1.1rem; color:var(--muted); margin-bottom:14px; }
.crumbs a:hover { color:var(--gold); }
.page h1 { font-size:clamp(1.1rem,3.5vw,1.7rem); margin-bottom:8px; }
.page .pageicon { font-size:42px; margin-bottom:10px; }
.page .meta { font-size:1.15rem; color:var(--muted); margin-bottom:10px; }
.intro { background:var(--bg-2); border-left:5px solid var(--cyan); padding:14px 16px; font-size:1.2rem;
  color:var(--ink); margin:14px 0 26px; }
.pagebtns { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.pagebtn { background:var(--panel); border:4px solid #000; box-shadow:5px 5px 0 #000; padding:18px;
  cursor:pointer; transition:transform .1s,box-shadow .1s; }
.pagebtn:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 #000; }
.pagebtn h3 { font-size:.72rem; color:var(--gold); margin-bottom:8px; line-height:1.5; }
.pagebtn .t { font-size:1rem; color:var(--muted); }

/* ===== GUIDE ===== */
.section { margin-bottom:22px; }
.section h4 { font-size:.68rem; color:var(--cyan); margin-bottom:12px; }
.section ol { list-style:none; counter-reset:step; }
.section li { counter-increment:step; position:relative; padding:6px 0 6px 38px; font-size:1.2rem; border-bottom:1px dashed var(--line); }
.section li::before { content:counter(step); position:absolute; left:0; top:6px; font-family:"Press Start 2P",monospace;
  font-size:.55rem; color:var(--gold); background:var(--panel); border:2px solid var(--line); width:26px; height:26px;
  display:grid; place-items:center; }

/* ===== BESTIARY ===== */
.best-toggle { display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:1.15rem; }
.best-toggle button { font-family:"Press Start 2P",monospace; font-size:.58rem; cursor:pointer; color:var(--ink);
  background:var(--panel); border:3px solid var(--line); box-shadow:3px 3px 0 #000; padding:9px 12px; }
.best-toggle button[aria-pressed="true"] { background:var(--gold); color:#1a1407; border-color:#1a1407; }
.enemy { background:var(--bg-2); border:3px solid var(--line); box-shadow:4px 4px 0 #000; padding:14px 16px; margin-bottom:12px; }
.enemy .top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.enemy h4 { font-size:.66rem; color:var(--ink); }
.enemy .loc { font-size:1.05rem; color:var(--muted); }
.enemy .note { font-size:1.15rem; color:var(--ink); opacity:.85; margin-top:8px; }
.flag { font-family:"Press Start 2P",monospace; font-size:.5rem; padding:5px 8px; border:2px solid #000; }
.flag.boss { background:var(--red); color:#fff; }
.flag.area { background:var(--gold); color:#1a1407; }
.flag.hard { background:#d63a6a; color:#fff; }
.flag.none { background:var(--panel); color:var(--muted); }

/* ===== JOBS (progressive reveal) ===== */
.job { background:var(--bg-2); border:3px solid var(--line); box-shadow:4px 4px 0 #000; margin-bottom:12px; cursor:pointer; }
.job .jhead { display:flex; align-items:center; gap:12px; padding:15px 16px; }
.job .jhead h4 { font-size:.7rem; color:var(--gold); }
.job .jhead .hint { margin-left:auto; font-size:1rem; color:var(--muted); }
.job .reveal { padding:0 16px 16px; border-top:1px dashed var(--line); }
.job .obtain { font-size:1.2rem; color:var(--ink); padding:14px 0; }
.job .crystal { font-family:"Press Start 2P",monospace; font-size:.5rem; color:var(--cyan); margin-bottom:6px; display:block; }
.abil { width:100%; border-collapse:collapse; margin-top:6px; }
.abil th { font-family:"Press Start 2P",monospace; font-size:.5rem; color:var(--muted); text-align:left; padding:6px 8px; border-bottom:2px solid var(--line); }
.abil td { font-size:1.15rem; padding:7px 8px; border-bottom:1px dashed var(--line); vertical-align:top; }
.abil td.ab { color:var(--gold); white-space:nowrap; }
.abil td.cost { color:var(--cyan); white-space:nowrap; font-variant-numeric:tabular-nums; }
.abil td.d { color:var(--ink); opacity:.85; }

footer { text-align:center; padding:38px 22px; color:var(--muted); font-size:1rem; border-top:3px solid var(--line); }

/* ===== WATERFALL (custom nestable headers) ===== */
.wf { margin-top:4px; }
.wf-node { border-left:3px solid var(--line); margin:8px 0 8px 2px; }
.wf-head { display:flex; align-items:center; gap:10px; cursor:pointer; padding:11px 14px;
  background:var(--bg-2); border:3px solid var(--line); box-shadow:3px 3px 0 #000; }
.wf-head:hover { border-color:var(--cyan); }
.wf-arrow { color:var(--gold); font-size:.9rem; transition:transform .12s; }
.wf-node.open > .wf-head .wf-arrow { transform:rotate(90deg); }
.wf-title { font-family:"Press Start 2P",monospace; font-size:.62rem; color:var(--ink); line-height:1.5; }
.wf-body { display:none; padding:10px 0 2px 18px; }
.wf-node.open > .wf-body { display:block; }
.wf-text { font-size:1.2rem; color:var(--ink); opacity:.9; padding:6px 0 10px; }
.wf-list { list-style:none; padding:0 0 8px; }
.wf-list li { font-size:1.2rem; padding:6px 0 6px 24px; position:relative; border-bottom:1px dashed var(--line); }
.wf-list li::before { content:"▸"; position:absolute; left:4px; color:var(--gold); }
/* nested headers get progressively cooler accents */
.wf-node .wf-node .wf-title { font-size:.56rem; color:var(--cyan); }
.wf-node .wf-node .wf-node .wf-title { color:var(--gold); }