:root{
  --paper:#EDE8DC; --card:#FBF8F1; --ink:#1A1A22; --soft:#6B6577; --faint:#918BA0;
  --line:#D8D1C0; --violet:#5B3FD6; --sky:#3AA9C9; --amber:#D9832A;
  --screen:#171326; --screen-2:#241D3D; --ok:#3F9B5E;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#111117; --card:#1A1A23; --ink:#EFEBE1; --soft:#A39DB3; --faint:#7A7490;
    --line:#2C2C39; --violet:#9B84FF; --sky:#62CDE8; --amber:#F0A855;
    --screen:#0E0B1A; --screen-2:#1C1630;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55;
  padding:24px 16px 48px;
}
.wrap{max-width:420px; margin:0 auto; display:flex; flex-direction:column; gap:18px}

.brand{display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center}
.brand h1{
  font-family:Silkscreen,monospace; font-weight:700; font-size:15px; letter-spacing:.06em;
  margin:0; text-wrap:balance;
}
.brand p{margin:0; font-size:12px; color:var(--faint); letter-spacing:.14em; text-transform:uppercase; font-weight:600}

.card{background:var(--card); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--line)}
.head{position:sticky; top:0; z-index:5}
.card-top{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 12px; border-bottom:2px solid var(--ink); background:var(--violet); color:#fff;
}
.card-top .sp{font-family:Silkscreen,monospace; font-size:11px; letter-spacing:.1em}
.card-top .sn{font-family:"IBM Plex Mono",monospace; font-size:11px; font-variant-numeric:tabular-nums; opacity:.85}

.screen{
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 0%, var(--screen-2), var(--screen));
  padding:18px 14px 16px; display:flex; flex-direction:column; align-items:center; gap:10px;
  border-bottom:2px solid var(--ink);
}
canvas.pix{width:152px; height:152px; image-rendering:pixelated; display:block}
.plate{display:flex; flex-direction:column; gap:2px; align-items:center; text-align:center; min-width:0}
.nameplate{font-family:Silkscreen,monospace; font-size:15px; color:#fff; letter-spacing:.04em; word-break:break-word}
.subplate{font-family:"IBM Plex Mono",monospace; font-size:11px; color:#B9AEE8}

.body{padding:14px 14px 16px; display:flex; flex-direction:column; gap:14px}
.stat{display:grid; grid-template-columns:78px 1fr 30px; align-items:center; gap:8px}
.stat .k{font-family:Silkscreen,monospace; font-size:9px; letter-spacing:.06em; color:var(--soft)}
.stat .v{font-family:"IBM Plex Mono",monospace; font-size:12px; text-align:right; font-variant-numeric:tabular-nums}
.bar{display:flex; gap:2px}
.bar i{flex:1; height:12px; border:1px solid var(--line); background:transparent}
.bar i.on{border-color:transparent}
.bar.vit i.on{background:var(--ok)}
.bar.sta i.on{background:var(--sky)}
.bar.noi i.on{background:var(--amber)}

.traits{display:flex; flex-wrap:wrap; gap:6px; padding-top:2px}
.chip{
  font-family:Silkscreen,monospace; font-size:9px; letter-spacing:.05em;
  border:1.5px solid var(--ink); padding:5px 7px; color:var(--ink);
}
.chip.sw{display:inline-flex; align-items:center; gap:5px}
.quirk{margin:0; font-size:13.5px; color:var(--soft); font-style:italic}
.meta{
  display:flex; justify-content:space-between; gap:10px; border-top:1.5px dashed var(--line);
  padding-top:10px; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--faint);
}

.links{display:flex; flex-direction:column; gap:8px}
a.btn{
  display:block; text-align:center; text-decoration:none;
  font-family:Silkscreen,monospace; font-size:11px; letter-spacing:.06em;
  border:2px solid var(--ink); padding:12px 14px; box-shadow:3px 3px 0 var(--line);
}
a.btn.primary{background:var(--violet); color:#fff}
a.btn.ghost{background:var(--card); color:var(--ink)}
a.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line)}
a:focus-visible{outline:3px solid var(--violet); outline-offset:2px}
.note{font-size:12.5px; color:var(--faint); margin:0; text-align:center}
.lede{margin:0; font-size:14.5px; color:var(--soft)}
.state{text-align:center; padding:26px 14px; color:var(--faint); font-family:Silkscreen,monospace; font-size:10px; letter-spacing:.06em}