@font-face{font-family:'PS2P';src:url(fonts/PressStart2P.ttf) format('truetype');font-display:block}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#07060d;overflow:hidden;font-family:'PS2P',monospace;color:#f4ecd6;font-size:10px}
#c,#fp{position:fixed;inset:0;width:100vw;height:100vh;image-rendering:pixelated;display:block}
.hidden{display:none!important}
.frame{background:linear-gradient(#1c1840,#100d26);border:3px solid #f0d27a;box-shadow:0 0 0 3px #000,0 0 0 5px #7a5c1e,0 8px 24px #000a,inset 0 0 0 2px #000,inset 0 0 0 4px #2f2a66;border-radius:4px}
input,button,select{font-family:'PS2P',monospace;font-size:9px;padding:8px;background:#0b0a1c;color:#f4ecd6;border:2px solid #4d4790;outline:none;border-radius:2px}
input:focus{border-color:#f0d27a}
button{cursor:pointer;background:linear-gradient(#5a3fb0,#38277a);border-color:#000;box-shadow:inset 0 -3px 0 #24184f,inset 0 2px 0 #8e74ff;color:#fff}
button:hover{filter:brightness(1.2)}button:active{transform:translateY(1px)}
.ov{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:8}
#title{background:radial-gradient(ellipse at center,#0000 30%,#07060dcc 100%)}
.logo{display:flex;gap:2px;font-size:46px;letter-spacing:2px;filter:drop-shadow(0 6px 0 #000)}
.logo span{display:inline-block;background:linear-gradient(#fff6c0 0%,#ffd54a 40%,#d78a16 60%,#ffef9a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:2px #3a1d00;animation:wave 2.4s ease-in-out infinite}
.logo span.sp{width:24px}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.logo::after{content:'';position:absolute}
.sub{margin:0;color:#9fd2ff;text-shadow:2px 2px #000;letter-spacing:3px}
.tbox{padding:18px;display:flex;flex-direction:column;gap:12px;align-items:center}
#pick{display:flex;gap:12px}.card{padding:10px;cursor:pointer;text-align:center;width:170px;background:#0b0a1c;border:3px solid #2f2a66;line-height:1.6;transition:.15s}
.card:hover{transform:translateY(-3px)}.card.sel{border-color:#f0d27a;box-shadow:0 0 16px #f0d27a77}.card canvas{width:96px;height:96px;image-rendering:pixelated}
.card small{color:#9a94c8;font-size:7px}.fields{display:flex;gap:8px}.fields input{width:220px}
.big{font-size:12px;padding:12px 20px}#err{color:#ff7a7a;min-height:10px;margin:0}
.hint{color:#bdb4ff;text-shadow:2px 2px #000}.blink{animation:blink 1.2s steps(2) infinite}@keyframes blink{50%{opacity:.25}}
#help{background:#000a}.helpbox{padding:20px 26px;max-width:560px;line-height:2}.helpbox h2{color:#f0d27a;margin-top:0}
.panel{position:fixed;right:16px;top:16px;width:400px;max-height:calc(100vh - 32px);overflow:auto;padding:12px;z-index:6;line-height:1.5}
#inv{left:16px;right:auto}#fr{top:auto;bottom:16px}
.ph{display:flex;justify-content:space-between;margin-bottom:8px;color:#f0d27a;font-size:11px}.x{cursor:pointer;color:#fff}
#log{height:200px;overflow:auto;background:#07061388;padding:6px;margin-bottom:6px;font-size:8px;border:2px solid #2f2a66;line-height:1.8}
#log b{color:#ffd54a}#log i{color:#9fd2ff}
.row{display:flex;gap:6px;margin:5px 0;align-items:center}.row input{flex:1;min-width:0}.wide{flex:1}
.sec{color:#9a94c8;font-size:7px;margin-top:8px;border-top:1px dashed #2f2a66;padding-top:6px}
.filebtn{background:#0b0a1c;border:2px solid #4d4790;padding:7px;cursor:pointer;font-size:9px}.filebtn input{display:none}#fname{flex:1;font-size:7px;color:#9a94c8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#giftGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}#giftGrid button{padding:4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:6px}
.icon{width:32px;height:32px;image-rendering:pixelated}
.it{display:flex;gap:8px;border:2px solid #2f2a66;background:#0b0a1c;padding:6px;margin:5px 0;font-size:8px}.it a{color:#9fd2ff}.it .ic{font-size:22px;width:32px;text-align:center}
.it pre{white-space:pre-wrap;background:#000;padding:6px;font-family:monospace;font-size:11px}
#dialog{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);width:min(720px,90vw);min-height:92px;padding:16px 20px;z-index:7;line-height:2;font-size:11px}
#dname{position:absolute;top:-14px;left:16px;background:#f0d27a;color:#1c1840;padding:4px 8px;font-size:9px;border:2px solid #000}
.more{position:absolute;right:14px;bottom:8px;animation:blink .8s steps(2) infinite;color:#f0d27a}
#toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);padding:10px 14px;display:none;z-index:9;font-size:9px}
#hud{position:fixed;left:16px;top:16px;z-index:5;display:flex;flex-direction:column;gap:6px;text-shadow:2px 2px #000;pointer-events:none}
#hudWho{color:#ffd54a;font-size:11px}.keys{color:#d8d0ff;font-size:7px;background:#0008;padding:4px 6px}
#fpHud{position:fixed;inset:0;pointer-events:none;z-index:4}
#cross{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%)}
#cross::before,#cross::after{content:'';position:absolute;background:#fff;box-shadow:0 0 0 1px #000,0 0 6px #f0d27a}
#cross::before{left:8px;top:0;width:2px;height:18px}#cross::after{top:8px;left:0;height:2px;width:18px}
#fpPrompt{position:absolute;left:50%;top:58%;transform:translateX(-50%);background:#100d26dd;border:2px solid #f0d27a;padding:8px 12px;font-size:10px;animation:blink 1.4s steps(2) infinite}
#compass{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:#100d26cc;border:2px solid #f0d27a;padding:6px 14px;font-size:11px;color:#f0d27a}
.tabs{display:flex;gap:6px}.tab{background:#0b0a1c;box-shadow:none;border:2px solid #2f2a66}.tab.on{border-color:#f0d27a;color:#f0d27a}
.pane{display:flex;flex-direction:column;gap:10px;align-items:center}.note{color:#9a94c8;font-size:7px;display:flex;gap:6px;align-items:center}
#stylePick{display:flex;gap:6px}.sty{cursor:pointer;border:2px solid #2f2a66;background:#0b0a1c;padding:4px}.sty.sel{border-color:#f0d27a}.sty canvas{width:48px;height:48px;image-rendering:pixelated}
input[type=color]{padding:0;width:40px;height:28px}#cont{display:flex;gap:8px}

.giftline{background:#2a1f48;border:1px solid #f0d27a55;padding:4px 6px;margin:3px 0;display:flex;align-items:center;gap:6px}.bigemo{font-size:24px;line-height:1}
.pcard{border:2px solid #9fd2ff;background:#0d1a2e;margin:4px 0;padding:6px}.pch{color:#9fd2ff;font-size:7px;margin-bottom:4px}.pcard pre{white-space:pre-wrap;margin:0;font-family:monospace;font-size:11px;color:#e8f4ff}
.fcard{display:flex;gap:8px;border:2px solid #f0d27a;background:#0b0a1c;margin:4px 0;padding:6px}.fth{width:72px;height:72px;flex:none;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fth img,.fth video{max-width:100%;max-height:100%;object-fit:cover}.ficon{font-size:32px}.fmeta{flex:1;min-width:0}.fn{color:#fff;font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}.fs{color:#9a94c8;font-size:7px}
.fbtn{display:flex;gap:6px;margin-top:6px}.btn{background:linear-gradient(#5a3fb0,#38277a);color:#fff!important;text-decoration:none;padding:5px 8px;font-size:7px;border:2px solid #000}
#prog{position:fixed;left:50%;top:70px;transform:translateX(-50%);padding:10px;width:340px;z-index:9;font-size:8px}.pbar{height:12px;background:#000;border:2px solid #4d4790;margin-top:6px}#progBar{height:100%;width:0;background:linear-gradient(90deg,#f0d27a,#ffef9a);transition:width .1s}
.vb{display:inline-block;margin:4px 0;padding:3px 6px;font-size:7px;border:2px solid #000}.v-clean{background:#1f6b3a}.v-caution{background:#8a6a10}.v-dangerous{background:#8e1f2a}.v-scan{background:#2f2a66}
.why{margin:2px 0 4px 14px;padding:0;font-size:7px;color:#ffd0a0;line-height:1.6}.ok{color:#7dff9a;font-size:8px}.no{color:#ff8080;font-size:8px}
.guard{border-left:4px solid #9fd2ff;background:#0d1a2e;padding:4px 6px;margin:3px 0}.g-dangerous{border-color:#ff5d5d}.g-caution{border-color:#f0c040}.g-clean{border-color:#5dff8a}
.areply{border-left:4px solid #7dff9a;background:#0f2418;padding:4px 6px;margin:3px 0}.areply.streaming{opacity:.8;border-color:#ffd54a}.atext{white-space:pre-wrap;font-family:monospace;font-size:11px;color:#e8ffe8;margin-top:2px}.asys{color:#9fd2ff;font-style:italic;margin:3px 0}

/* chat panel: ~2x, centred, responsive (both views) */
#chat.panel{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:min(800px,90vw);max-height:85vh;display:flex;flex-direction:column;z-index:8}
#chat.panel.hidden{display:none}
#chat #log{height:min(400px,40vh);min-height:160px;font-size:10px;flex:0 0 auto}
#chat input{font-size:11px}
.askbox{margin:6px 0 2px;display:flex;flex-direction:column;gap:4px}
.askq{color:#ffd54a}.asknote{color:#9fd2ff;font-style:italic}
.askopt{text-align:left;font:inherit;font-size:9px;padding:6px 8px;background:#1b1740;color:#fff;border:2px solid #4b43a8;cursor:pointer;line-height:1.5}
.askopt:hover:not(:disabled){background:#2c2670;border-color:#ffd54a}.askopt:disabled{opacity:.45;cursor:default}.askopt.chosen{opacity:1;border-color:#5dff8a}
.eco{font-size:7px;padding:1px 4px;border:1px solid #6a63b8;color:#bdb8ff}.eco.mine{border-color:#5dff8a;color:#5dff8a}
#realList select{font:inherit;font-size:8px;background:#1b1740;color:#fff;border:2px solid #4b43a8}
.brandmark{width:150px;height:150px;image-rendering:auto;filter:drop-shadow(0 8px 0 #000a) drop-shadow(0 0 24px #3b8cff66);margin-bottom:10px;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.hudtop{display:flex;align-items:center;gap:8px}.hudlogo{width:32px;height:32px;filter:drop-shadow(2px 2px 0 #000)}
@media (max-height:640px){.brandmark{width:90px;height:90px}}

#shop{left:50%;transform:translateX(-50%);top:18%;width:min(420px,92vw);right:auto}#shopMenu{display:flex;flex-direction:column;gap:6px;margin-top:8px}#shopMenu button{text-align:left}
#dtext{white-space:pre-line}
#dialog{cursor:pointer}

/* Mac app download (title screen) */
.dlmac-wrap{margin:10px 0 6px;text-align:center}.dlmac{display:inline-block;padding:9px 16px;border-radius:8px;background:#f2c14e;color:#1b1533;font:bold 13px monospace;text-decoration:none;box-shadow:0 2px 0 #9c7a22}.dlmac:hover{filter:brightness(1.08)}.dlnote{margin-top:5px;font:11px monospace;color:#b9add8}
/* v5: bag USE + phone task swap */
#invList button.use,#phoneList button.reroll{font:inherit;font-size:9px;margin-top:4px;padding:3px 7px;background:#2a2560;color:#ffd54a;border:1px solid #ffd54a;border-radius:4px;cursor:pointer}
#invList button.use:hover,#phoneList button.reroll:hover{background:#3a3480}