/* W0RD3L Studio: near-black field, neon pink/cyan, gold plates. Matches w0rd3l.art. */
@font-face{font-family:Silk;src:url(fonts/Silkscreen-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Atk;src:url(fonts/AtkinsonHyperlegible-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Atk;src:url(fonts/AtkinsonHyperlegible-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--ink:#07060b;--ink2:#0e0c16;--ink3:#171425;--line:#2a2440;--pink:#ff46d7;--cyan:#28f5ff;--gold:#ffcd3c;--red:#ff5a5a;--text:#ece8f6;--dim:#a49fbb}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);color:var(--text)}
body{margin:0;font:400 16px/1.55 Atk,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--cyan)}a:hover{color:var(--pink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2{font-family:Silk,monospace;font-weight:400;letter-spacing:.04em}
h1{font-size:1.5rem;color:var(--pink)}h2{font-size:.95rem;color:var(--dim);margin:.6rem 0 .5rem}
.top{display:flex;align-items:center;gap:22px;padding:12px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font:1.15rem Silk,monospace;color:var(--pink);text-decoration:none;letter-spacing:.08em}
.top nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.top nav a{text-decoration:none}
.grow{flex:1}.who{font:.8rem ui-monospace,monospace;color:var(--dim)}
.counter{padding:8px 24px;font:.8rem Silk,monospace;color:var(--gold);background:var(--ink2);border-bottom:1px solid var(--line)}
main{flex:1;padding:20px 24px;max-width:1300px;width:100%;margin:0 auto}
footer{padding:16px 24px;color:var(--dim);font-size:.85rem;border-top:1px solid var(--line)}
.btn{display:inline-block;background:none;border:1px solid var(--cyan);color:var(--cyan);padding:7px 14px;border-radius:10px;
  font:.8rem Silk,monospace;cursor:pointer;text-decoration:none;margin:2px 0}
.btn:hover{background:rgba(40,245,255,.1);color:var(--cyan)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#000}.btn.gold:hover{filter:brightness(1.1)}
.btn.danger{border-color:var(--red);color:var(--red)}.btn.small{padding:4px 9px;font-size:.7rem}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.link,.link{background:none;border:0;color:var(--cyan);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.inline{display:inline}
.panel{background:var(--ink2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.narrow{max-width:520px}
.meta{color:var(--dim);font-size:.82rem}.warn{color:var(--gold)}.center{text-align:center;justify-content:center}
label{display:block;font:.72rem Silk,monospace;color:var(--dim);margin:12px 0 4px}
label.check{font:400 .9rem Atk,sans-serif;color:var(--text);display:flex;gap:8px;align-items:flex-start}
input,select,textarea{width:100%;background:var(--ink3);border:1px solid var(--line);color:var(--text);padding:8px;border-radius:8px;font:15px ui-monospace,monospace}
input[type=checkbox]{width:auto;margin-top:4px}input[type=range]{padding:0}
textarea{min-height:70px}
.tool{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:24px;align-items:start}
@media(max-width:820px){.tool{grid-template-columns:1fr}}
.tabs,.chips{display:flex;flex-wrap:wrap;gap:6px}
.tabs button.on{background:var(--cyan);color:#000}
.chip{border:1px solid var(--line);border-radius:20px;padding:3px 11px;font-size:.82rem;background:none;color:var(--text);cursor:pointer}
.chip.on{border-color:var(--pink);color:var(--pink)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stage{display:flex;flex-direction:column;align-items:center;gap:10px}
.frame{background:#000;border:1px solid var(--line);border-radius:6px;padding:0;line-height:0;max-width:100%}
.frame img{width:400px;max-width:100%;height:auto;image-rendering:pixelated}
.bar{width:400px;max-width:100%;height:8px;background:var(--ink3);border-radius:4px}.bar i{display:block;height:100%;width:0;background:var(--cyan);border-radius:4px;transition:width .3s}
.hero{max-width:760px}.hero h1{font-size:2rem}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wall.small{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.slot{aspect-ratio:400/560;border:1px solid var(--line);border-radius:5px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;text-decoration:none;color:var(--text)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .num,.slot .t,.slot .a{position:relative;background:rgba(7,6,11,.82);padding:1px 6px;font-size:.75rem}
.slot .num{font-family:Silk,monospace;color:var(--gold)}.slot .a{color:var(--dim)}
.slot .empty{margin:auto;font:1.1rem Silk,monospace;color:#3a3452}
.piece{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
@media(max-width:820px){.piece{grid-template-columns:1fr}}
.piece .num{font:1.1rem Silk,monospace;color:var(--gold)}
.list{border-collapse:collapse;width:100%}.list td{border-bottom:1px solid var(--line);padding:8px;vertical-align:top}
.thumb{width:72px;height:auto;border-radius:3px;image-rendering:pixelated}.thumb.big{width:140px}
.tag{display:inline-block;font:.65rem Silk,monospace;border:1px solid var(--line);border-radius:6px;padding:1px 6px;margin-left:4px}
.tag.gold{color:var(--gold);border-color:var(--gold)}.tag.danger{color:var(--red);border-color:var(--red)}
.actions{margin-top:6px}.note{display:flex;gap:6px;margin-top:6px}.note input{max-width:420px;padding:4px 8px;font-size:13px}
.prose{max-width:760px}
details summary{cursor:pointer;color:var(--dim);margin-top:16px}