:root{
  --ink:#1a1c2c; --ink2:#0c0d18; --ground:#1e2136; --ground2:#23263e; --slot:#2a2d47; --slot2:#3b3f52;
  --cream:#fff4d6; --cream2:#f1e2b8; --gold:#ffcd38; --gold2:#d9931c; --teal:#3ec6b6; --teal2:#1f7f76;
  --red:#d9534f; --grass:#6abe30; --sky:#8fcbef; --mute:#9aa5b1; --white:#ffffff;
  --display:'Press Start 2P', 'Courier New', monospace; --body:'VT323', 'Courier New', monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--cream); font-family:var(--body); font-size:22px; line-height:1.25;
  background-image:linear-gradient(45deg,var(--ground2) 25%,transparent 25%,transparent 75%,var(--ground2) 75%),linear-gradient(45deg,var(--ground2) 25%,transparent 25%,transparent 75%,var(--ground2) 75%);
  background-size:16px 16px; background-position:0 0,8px 8px;
  padding-inline:clamp(16px,4vw,40px); padding-block:0 64px;
}
canvas{image-rendering:pixelated; image-rendering:crisp-edges; display:block}
a{color:inherit}
:focus-visible{outline:4px solid var(--gold); outline-offset:3px}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

.wrap{max-width:1120px; margin-inline:auto}

/* ---- HUD nav ---- */
.hud{position:sticky; top:0; z-index:20; margin-inline:calc(-1*clamp(16px,4vw,40px)); padding-inline:clamp(16px,4vw,40px); background:var(--ink); border-bottom:4px solid var(--cream); box-shadow:0 4px 0 var(--ink2)}
.hud .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; flex-wrap:wrap; padding-block:8px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; font-family:var(--display); font-size:14px; color:var(--gold); letter-spacing:1px}
.logo small{display:block; font-family:var(--body); font-size:16px; color:var(--teal); letter-spacing:0; margin-top:4px}
.nav{display:flex; gap:4px 20px; flex-wrap:wrap; font-family:var(--display); font-size:9px; letter-spacing:1px}
.nav a{text-decoration:none; color:var(--cream); padding:8px 2px; border-bottom:3px solid transparent}
.nav a:hover{color:var(--gold); border-bottom-color:var(--gold)}
@media (max-width:720px){ .nav{display:none} }

/* ---- buttons ---- */
.btn{display:inline-block; font-family:var(--display); font-size:11px; letter-spacing:1px; text-decoration:none; color:var(--ink); background:var(--gold); border:4px solid var(--ink); padding:14px 18px; box-shadow:4px 4px 0 var(--ink); cursor:pointer; line-height:1.4}
.btn:hover{background:#ffe07a}
.btn:active{transform:translate(4px,4px); box-shadow:none}
.btn.alt{background:var(--cream); color:var(--ink)}
.btn.alt:hover{background:var(--white)}
.btn.dark{background:var(--teal); color:var(--ink)}
.btn.dark:hover{background:#6ee0d2}

/* ---- game screen ---- */
.screen{position:relative; margin-top:32px; border:8px solid var(--ink); box-shadow:0 0 0 4px var(--cream),0 0 0 8px var(--ink),12px 12px 0 8px var(--ink2); background:var(--sky); overflow:hidden}
.screen canvas{margin-inline:auto}
.hudtxt{position:absolute; top:10px; font-family:var(--display); font-size:9px; letter-spacing:1px; color:var(--ink); background:var(--cream); padding:6px 8px; border:3px solid var(--ink); z-index:2}
.hudtxt.l{left:10px} .hudtxt.r{right:10px}
@media (max-width:520px){ .hudtxt.r{display:none} }

/* ---- dialog box ---- */
.panel{position:relative; background:var(--cream); color:var(--ink); border:4px solid var(--ink); box-shadow:0 0 0 4px var(--cream),0 0 0 8px var(--ink),12px 12px 0 8px var(--ink2); padding:28px 28px 24px}
.dialog{margin:-36px auto 0; max-width:880px; z-index:3; padding-bottom:40px}
@media (max-width:720px){ .dialog{margin-top:36px} }
.dialog .eyebrow{color:var(--teal2)}
.eyebrow{font-family:var(--display); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--teal); margin:0 0 14px}
h1{font-family:var(--display); font-size:clamp(16px,3vw,28px); line-height:1.6; margin:0 0 18px; text-wrap:balance; letter-spacing:1px}
.lead{font-size:24px; max-width:62ch; margin:0 0 22px}
.lead b{color:var(--teal2); font-weight:normal}
.cta{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.cursor{position:absolute; right:22px; bottom:12px; font-family:var(--display); font-size:12px; color:var(--ink); animation:blink 1s steps(2) infinite}
@keyframes blink{to{opacity:0}}

/* ---- sections ---- */
.section{padding-block:72px 8px}
.section > .wrap{max-width:1120px}
.head{display:flex; align-items:center; gap:18px; margin-bottom:32px; flex-wrap:wrap}
.head h2{font-family:var(--display); font-size:clamp(14px,2.4vw,22px); color:var(--gold); margin:0; letter-spacing:1px; line-height:1.5}
.head .rule{flex:1; min-width:60px; height:4px; background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px)}
.head .eyebrow{width:100%; margin:0}
.intro{max-width:66ch; color:var(--cream); margin:0 0 32px; font-size:23px}
.intro b{color:var(--gold); font-weight:normal}

/* quest log */
.loop{display:grid; grid-template-columns:repeat(4,1fr); gap:36px 44px}
@media (max-width:980px){ .loop{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .loop{grid-template-columns:1fr} }
.step{padding:22px 20px 20px}
.step .tag{font-family:var(--display); font-size:9px; color:var(--cream); background:var(--ink); display:inline-block; padding:6px 8px; margin-bottom:14px; letter-spacing:1px}
.step h3{font-family:var(--display); font-size:12px; margin:0 0 12px; letter-spacing:1px; line-height:1.5}
.step p{margin:0; font-size:21px; line-height:1.2}
.step .ico{position:absolute; top:-30px; right:14px; background:var(--teal); border:4px solid var(--ink); padding:6px; box-shadow:4px 4px 0 var(--ink)}
.step::after{content:'▶'; position:absolute; right:-36px; top:50%; transform:translateY(-50%); font-family:var(--display); font-size:14px; color:var(--gold)}
.step:last-child::after{content:none}
@media (max-width:980px){ .step::after{content:none} }

/* inventory */
.inv{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border:4px solid var(--slot2); background:var(--ink); padding:16px; box-shadow:8px 8px 0 var(--ink2)}
@media (max-width:900px){ .inv{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .inv{grid-template-columns:1fr} }
.item{display:grid; grid-template-columns:72px 1fr; gap:16px; align-items:start; background:var(--slot); border:3px solid var(--slot2); padding:14px}
.item:hover{border-color:var(--gold)}
.item .slot{width:72px; height:72px; background:var(--cream); border:3px solid var(--ink); display:grid; place-items:center}
.item h3{font-family:var(--display); font-size:10px; margin:2px 0 8px; color:var(--gold); letter-spacing:1px; line-height:1.5}
.item .grade{margin:0 0 6px; font-size:20px; color:var(--white)}
.item .from{margin:0; font-size:19px; color:var(--mute)}
.item .from b{color:var(--teal); font-weight:normal}

/* swarm cards */
.swarm{display:grid; grid-template-columns:repeat(5,1fr); gap:32px 28px}
@media (max-width:1100px){ .swarm{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .swarm{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .swarm{grid-template-columns:1fr} }
.card{padding:0; overflow:visible}
.card .portrait{background:var(--teal); border-bottom:4px solid var(--ink); height:112px; display:grid; place-items:center; background-image:linear-gradient(var(--teal2) 1px,transparent 1px),linear-gradient(90deg,var(--teal2) 1px,transparent 1px); background-size:12px 12px}
.card .body{padding:16px 16px 18px}
.card h3{font-family:var(--display); font-size:11px; margin:0 0 4px; letter-spacing:1px}
.card .role{font-family:var(--display); font-size:8px; color:var(--teal2); margin:0 0 10px; letter-spacing:1px}
.card p{margin:0 0 14px; font-size:20px; line-height:1.2}
.stats{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:center; font-family:var(--display); font-size:8px; letter-spacing:1px}
.pips{display:flex; gap:3px}
.pips i{width:12px; height:12px; border:2px solid var(--ink); background:var(--cream2)}
.pips i.on{background:var(--gold)}

/* lab log */
.lab{background:var(--ink); border:4px solid var(--teal); box-shadow:0 0 0 4px var(--ink),0 0 0 8px var(--teal2),12px 12px 0 8px var(--ink2); padding:28px; color:var(--teal); font-size:22px}
.lab .prompt{color:var(--gold)}
.lab .line{margin:0 0 6px; white-space:pre-wrap}
.lab .ok{color:var(--grass)}
.lab .warn{color:var(--red)}
.lab .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:22px}
@media (max-width:720px){ .lab .grid{grid-template-columns:1fr} }
.lab .cell{border:3px solid var(--teal2); padding:14px}
.lab .cell h3{font-family:var(--display); font-size:10px; color:var(--cream); margin:0 0 10px; letter-spacing:1px}
.lab .cell p{margin:0; color:var(--cream); font-size:20px}
.lab .cell p b{color:var(--teal); font-weight:normal}

/* market */
.market{display:grid; grid-template-columns:1fr 1fr; gap:40px}
@media (max-width:820px){ .market{grid-template-columns:1fr} }
.market .panel h3{font-family:var(--display); font-size:12px; margin:0 0 14px; letter-spacing:1px; line-height:1.5}
.market ul{margin:0 0 20px; padding-left:0; list-style:none; font-size:21px}
.market li{padding-left:22px; position:relative; margin-bottom:6px}
.market li::before{content:''; position:absolute; left:0; top:9px; width:10px; height:10px; background:var(--teal); border:2px solid var(--ink)}
.market .panel .eyebrow{color:var(--teal2)}

/* footer */
.coin{text-align:center; padding-block:80px 40px}
.coin h2{font-family:var(--display); font-size:clamp(14px,3vw,26px); color:var(--gold); margin:0 0 12px; animation:blink 1.4s steps(2) infinite}
.coin p{max-width:56ch; margin:0 auto 26px; font-size:23px}
.coin .mail{font-family:var(--display); font-size:10px; color:var(--teal); margin-top:22px; letter-spacing:1px}
.foot{font-family:var(--display); font-size:8px; color:var(--mute); text-align:center; letter-spacing:1px; line-height:2; border-top:4px solid var(--slot2); padding-top:24px}