*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;color:#f8d838;font-family:'Press Start 2P',monospace;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer}
#app{display:flex;flex-direction:column;height:100%;height:100dvh}
#hud{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;font-size:10px;gap:10px;background:#0d0d0d;border-bottom:2px solid #2c2c2c}
#res{flex:1;text-align:right;color:#ddd;font-size:9px;line-height:1.6}
#mute{background:#222;color:#aaa;border:2px solid #444;font-size:8px;padding:4px 6px}
#mute.off{color:#555;text-decoration:line-through}
#pls{color:#5ad0ff;font-size:9px}
#invite{background:#222;color:#5ad0ff;border:2px solid #5ad0ff;font-size:8px;padding:4px 6px}
#quest{background:#222;color:#f8d838;border:2px solid #f8d838;font-size:8px;padding:4px 6px}
#quests{position:fixed;left:50%;top:14vh;transform:translateX(-50%);background:rgba(0,0,0,.92);border:2px solid #f8d838;padding:14px 18px;z-index:9;font-family:'VT323',monospace;font-size:clamp(18px,3.4vw,28px);color:#f8d838;text-shadow:0 0 8px rgba(248,216,56,.55);min-width:min(420px,90vw);max-width:94vw}
#qhead{border-bottom:2px solid #f8d838;margin-bottom:8px;padding-bottom:4px}
.qrow{display:flex;justify-content:space-between;gap:24px;margin:4px 0;color:#b89c28;text-shadow:none}
.qdesc{margin:-2px 0 6px 8px;font-size:.8em;color:#8a8a8a;text-shadow:none}
.qrow.main{color:#fff;border:2px solid #f8d838;padding:2px 8px;text-shadow:0 0 8px rgba(248,216,56,.55)}
#stage{flex:1;position:relative;min-height:0;overflow:hidden;background:#050505}
#screen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
#crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 3px);box-shadow:inset 0 0 90px rgba(0,0,0,.75)}
#hint{padding:7px 10px;font-size:9px;line-height:1.6;color:#cfcfcf;background:#0d0d0d;min-height:32px;border-top:2px solid #2c2c2c}
#hint.glitchy{color:#f8d838;letter-spacing:4px}
#tools{display:flex;gap:6px;padding:8px;overflow-x:auto;background:#161616;border-top:2px solid #2c2c2c;padding-bottom:max(8px,env(safe-area-inset-bottom))}
#tools button{flex:0 0 auto;font-size:9px;padding:10px 9px;background:#262626;color:#ddd;border:2px solid #444;min-width:62px}
#tools button.sel{background:#f8d838;color:#000;border-color:#fff}
#tools button small{display:block;font-size:7px;margin-top:5px;color:#8fbf8f}
#tools button.sel small{color:#333}
#tools button.new{animation:pulse .5s steps(2) 6}
@keyframes pulse{50%{border-color:#f8d838;background:#4a3f00}}
#toast{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.85);border:2px solid #f8d838;padding:8px 12px;font-size:9px;line-height:1.6;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;max-width:90%}
#toast.show{opacity:1}
#info{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.85);border:2px solid #555;padding:6px 10px;font-family:'VT323',monospace;font-size:18px;line-height:1.1;white-space:pre;display:none;color:#f8d838;pointer-events:none}
#zoom{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;gap:6px}
#zoom button{width:34px;height:34px;background:rgba(0,0,0,.7);color:#f8d838;border:2px solid #f8d838;font-size:14px}
#mapbtn{position:absolute;left:8px;top:8px;height:22px;padding:0 6px;background:rgba(0,0,0,.7);color:#f8d838;border:2px solid #f8d838;font-family:'Press Start 2P',monospace;font-size:8px}
#mini{position:absolute;left:8px;top:36px;width:192px;height:128px;image-rendering:pixelated;border:2px solid #f8d838;background:#000;touch-action:none;cursor:crosshair}
#dialog{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:6vw;z-index:10;font-family:'VT323',monospace;font-size:clamp(22px,4.2vw,36px);color:#f8d838;text-shadow:0 0 8px rgba(248,216,56,.55)}
#dbox{width:100%;max-width:760px}
#dtext div{margin:6px 0;min-height:1em}
#dchoices{display:flex;flex-direction:column;gap:10px;margin-top:26px}
#dchoices button{font-family:inherit;font-size:inherit;background:none;border:2px solid #f8d838;color:#f8d838;padding:6px 14px;text-align:left;text-shadow:inherit}
#dchoices button:hover,#dchoices button:active{background:#f8d838;color:#000}
#dchoices button.mine{background:#f8d838;color:#000}
#dchoices .vbar{height:6px;border:2px solid #f8d838}
#dchoices .vbar i{display:block;height:100%;background:#f8d838}
#forge{position:fixed;left:50%;bottom:12vh;transform:translateX(-50%);background:rgba(0,0,0,.9);border:2px solid #f8d838;padding:14px 18px;z-index:9;font-family:'VT323',monospace;font-size:clamp(18px,3.4vw,28px);color:#f8d838;text-shadow:0 0 8px rgba(248,216,56,.55);display:flex;flex-direction:column;gap:6px;max-width:94vw}
#forge .frow{display:flex;gap:14px;align-items:center}
#forge .frow span:first-child{width:6em}
#forge .frow span:nth-child(2){flex:1;min-width:8em}
#forge button{font-family:inherit;font-size:inherit;background:none;border:2px solid #f8d838;color:#f8d838;padding:2px 10px;text-shadow:inherit}
#forge button:hover,#forge button:active{background:#f8d838;color:#000}
.hidden{display:none!important}
.glitch{animation:gl .1s steps(2) 10}
@keyframes gl{0%{filter:none;transform:translate(-50%,-50%)}50%{filter:hue-rotate(120deg) contrast(2.2) saturate(3);transform:translate(calc(-50% + 4px),calc(-50% - 3px)) skewX(4deg)}100%{filter:none;transform:translate(-50%,-50%)}}
#title,#end{position:fixed;inset:0;background:#000;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:24px}
#title .boot{font-family:'VT323',monospace;font-size:20px;color:#7f7;text-align:left;line-height:1.3;animation:fade 1.2s steps(6)}
#tc{width:132px;height:132px;animation:bob 1s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes fade{from{opacity:0}}
#title h1{font-size:clamp(22px,6vw,44px);letter-spacing:4px;text-shadow:4px 4px 0 #8a5a00}
#title .sub{font-size:9px;color:#bbb;line-height:1.6}
#title .warn{font-size:8px;color:#666;margin-top:10px}
#tbtns,#end .btns{display:flex;flex-direction:column;gap:12px}
#tbtns button,#end button{font-size:11px;padding:12px 20px;background:#f8d838;color:#000;border:3px solid #fff}
#tbtns button.alt,#end button.alt{background:#222;color:#ddd;border-color:#555}
#end h2{font-size:clamp(16px,4vw,26px);line-height:1.5}
#end .arch{font-size:clamp(20px,6vw,40px);color:#fff;text-shadow:3px 3px 0 #8a5a00}
#end p{font-family:'VT323',monospace;font-size:clamp(20px,3.6vw,28px);color:#ddd;max-width:640px;line-height:1.2}
#end p.closing{color:#7a7a8a}
#end .stats{font-size:9px;color:#9c9;line-height:2}
#white{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity 5s ease-in;z-index:15}
#white.on{opacity:1}
#recbox{position:fixed;left:50%;top:14vh;transform:translateX(-50%);background:rgba(0,0,0,.95);border:2px solid #f8d838;padding:14px 18px;z-index:21;font-family:'VT323',monospace;font-size:clamp(18px,3.4vw,28px);color:#f8d838;min-width:min(380px,90vw)}
#recbox .rhead{border-bottom:2px solid #f8d838;margin-bottom:8px;padding-bottom:4px}
#recbox .btns{margin-top:12px;display:flex;justify-content:center;gap:10px}
#recbox .qdesc{word-break:break-all}
#recbox button,#record{font-family:inherit;font-size:inherit;background:#f8d838;color:#000;border:2px solid #fff;padding:2px 12px;cursor:pointer}
#record{font-size:.7em;float:right}
