@font-face{font-family:"PS2";src:url(fonts/press-start-2p-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Silk";src:url(fonts/silkscreen-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Silk";font-weight:700;src:url(fonts/silkscreen-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Mono";src:url(fonts/space-mono-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Mono";font-weight:700;src:url(fonts/space-mono-latin-700-normal.woff2) format("woff2");font-display:swap}

@font-face{font-family:"Silk";src:url(fonts/silkscreen-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}
@font-face{font-family:"Silk";font-weight:700;src:url(fonts/silkscreen-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}
@font-face{font-family:"Mono";src:url(fonts/space-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}
@font-face{font-family:"Mono";font-weight:700;src:url(fonts/space-mono-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}

:root{
  --void:#07060f; --ink:#e8e4ff; --dim:#9a94b8; --gold:#f2c230; --gold-d:#8a5a00; --cyan:#39e6ff; --cyan-d:#1a6a7a;
  --violet:#b04cff; --line:#2a2546; --card:#100d1e; --ok:#5dff9a; --bad:#ff5a6a;
  --l0:#3e2a1c; --l1:#5a2e1a; --l2:#2c333d; --l3:#241010; --l4:#160f2c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--ink);font-family:"Mono",ui-monospace,monospace;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
img.px,.px img{image-rendering:pixelated;image-rendering:crisp-edges}
h1,h2,h3,.pixel{font-family:"Silk",monospace;font-weight:700;letter-spacing:.5px;line-height:1.15;margin:0}
.ps{font-family:"PS2",monospace}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:#07060fe6;backdrop-filter:blur(6px);border-bottom:2px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:"PS2";font-size:14px;color:var(--gold)}
.brand img{width:34px;height:34px;image-rendering:pixelated;border:2px solid var(--line)}
.brand b{color:var(--cyan);font-weight:normal}
.nav .links{display:flex;gap:18px;margin-left:auto;font-family:"Silk";font-size:15px}
.nav .links a{color:var(--ink)}
.nav .links a.on,.nav .links a:hover{color:var(--gold);text-decoration:none}
@media(max-width:760px){.nav .links{gap:12px;font-size:13px}.nav .links .hide-m{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:"Silk";font-weight:700;font-size:15px;padding:11px 18px;border:2px solid var(--void);background:var(--gold);color:#1a1100;cursor:pointer;box-shadow:4px 4px 0 var(--gold-d),4px 4px 0 2px var(--void);transition:transform .06s,box-shadow .06s;text-decoration:none!important;white-space:nowrap}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--gold-d),5px 5px 0 2px var(--void)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--gold-d)}
.btn.cyan{background:var(--cyan);color:#001a20;box-shadow:4px 4px 0 var(--cyan-d),4px 4px 0 2px var(--void)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:4px 4px 0 var(--line)}
.btn.x{background:#000;color:#fff;border-color:#333;box-shadow:4px 4px 0 #333}
.btn.sm{font-size:13px;padding:7px 12px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- cards / panels ---------- */
.panel{background:var(--card);border:2px solid var(--line);box-shadow:6px 6px 0 #000;padding:22px}
.tag{display:inline-block;font-family:"Silk";font-size:12px;padding:3px 8px;border:2px solid currentColor;line-height:1.2}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:"Silk";font-size:13px;padding:6px 12px;background:#000;border:2px solid var(--line)}
.dot{width:9px;height:9px;background:var(--dim)}
.dot.live{background:var(--ok);box-shadow:0 0 10px var(--ok);animation:blink 1s steps(2) infinite}
.dot.off{background:var(--bad)}
@keyframes blink{50%{opacity:.35}}
.muted{color:var(--dim)}
.mono{font-family:"Mono"}
.small{font-size:13px}
code,.code{font-family:"Mono";background:#000;border:1px solid var(--line);padding:1px 6px;font-size:13px;word-break:break-all}

/* ---------- miner card ---------- */
.mcard{background:#000;border:2px solid var(--line);box-shadow:5px 5px 0 #000;display:flex;flex-direction:column;transition:transform .1s}
.mcard:hover{transform:translateY(-3px);border-color:var(--cyan)}
.mcard .img{aspect-ratio:1;background:#0b0d12 center/40% no-repeat;image-rendering:pixelated;width:100%;display:block}
.mcard .meta{padding:10px 12px;display:flex;flex-direction:column;gap:4px;border-top:2px solid var(--line)}
.mcard .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mcard .id{font-family:"Silk";font-weight:700;font-size:15px}
.mcard .sub{font-size:12px;color:var(--dim)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}

/* layer colors */
.L0{color:#9bc85a}.L1{color:#e08a52}.L2{color:#a9b6c8}.L3{color:#ff6a2a}.L4{color:var(--cyan)}

/* ---------- prompt box ---------- */
.prompt{position:relative;background:#000;border:2px solid var(--line);padding:16px 16px 16px;font-size:14px;white-space:pre-wrap;color:#d8ffe6}
.prompt .copy{position:absolute;top:10px;right:10px}
.prompt h4{margin:0 0 8px;font-family:"Silk";color:var(--gold);font-size:15px}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--line);padding:30px 0 50px;margin-top:40px;color:var(--dim);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
footer .sp{flex:1}

/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(120px);background:var(--gold);color:#1a1100;font-family:"Silk";font-weight:700;padding:10px 18px;border:2px solid #000;box-shadow:4px 4px 0 #000;z-index:99;transition:transform .2s}
#toast.show{transform:translateX(-50%) translateY(0)}

/* modal */
.modal{position:fixed;inset:0;background:#000c;display:none;align-items:center;justify-content:center;z-index:80;padding:20px}
.modal.open{display:flex}
.modal .panel{max-width:560px;width:100%;max-height:90vh;overflow:auto}
input,select,textarea{font-family:"Mono";font-size:14px;background:#000;color:var(--ink);border:2px solid var(--line);padding:9px 11px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--cyan)}
label{font-family:"Silk";font-size:13px;color:var(--dim);display:block;margin-bottom:5px}