[hidden]{display:none!important}
:root{--bg:rgba(24,24,20,.82);--panel:rgba(40,39,33,.88);--slot:rgba(70,68,58,.55);--slot-h:rgba(110,106,88,.7);--line:rgba(220,210,180,.14);--text:#e2dccb;--dim:#a39d89;--accent:#c4552f;--good:#7fa04a;--bad:#c4452f;--food:#c98a3a;--water:#4d8ec4;--font:'Arial Narrow','Roboto Condensed',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0d0f10;color:var(--text);font:15px/1.3 var(--font);user-select:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
button,input{font:inherit;color:inherit}button{cursor:pointer}
#menu{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 60%,rgba(0,0,0,.05),rgba(0,0,0,.6));z-index:20}
.menu-card{width:min(420px,calc(100vw - 32px));padding:28px 28px 20px;background:var(--bg);border:1px solid var(--line);backdrop-filter:blur(6px);text-align:center;margin-bottom:60px}
.menu-card img{display:block;margin:0 auto 6px}.menu-card h1{margin:0;font-size:58px;letter-spacing:14px;font-weight:900;line-height:1;padding-left:14px}
.tag{color:var(--dim);margin:6px 0 18px;letter-spacing:1px}.name{display:block;text-align:left;font-size:11px;letter-spacing:2px;color:var(--dim)}
.name input{display:block;width:100%;margin:4px 0 12px;padding:10px 12px;background:rgba(0,0,0,.35);border:1px solid var(--line);outline:none;font-size:17px}
#play{width:100%;padding:14px;background:var(--accent);border:0;font-size:20px;font-weight:800;letter-spacing:4px}#play:disabled{background:#4a4740;color:#aaa}
.menu-row{display:flex;gap:8px;margin-top:10px}.ghost{flex:1;padding:9px 6px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px;letter-spacing:1px;text-decoration:none;color:var(--text);display:inline-block}
#loadbar{height:3px;background:rgba(255,255,255,.08);margin-top:14px}#loadbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.fine{color:var(--dim);font-size:11px;margin:10px 0 0;letter-spacing:1px}
.keys{position:fixed;bottom:14px;left:16px;right:16px;text-align:center;color:var(--dim);font-size:12px}.keys b{color:var(--text);background:rgba(0,0,0,.4);padding:1px 6px;margin:0 2px 0 8px;border:1px solid var(--line)}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#compass{position:absolute;top:10px;left:50%;width:min(560px,70vw);height:30px;transform:translateX(-50%);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
#compass-strip{position:absolute;top:0;left:0;height:100%;white-space:nowrap}#compass-strip span{position:absolute;top:4px;transform:translateX(-50%);font-size:13px;color:var(--text);text-shadow:0 1px 2px #000}#compass-strip span.c{font-weight:800;font-size:16px;top:2px}#compass-strip span.t{top:18px;width:1px;height:8px;background:rgba(255,255,255,.5)}
#compass>i{position:absolute;left:50%;top:22px;border:5px solid transparent;border-bottom-color:var(--accent);transform:translateX(-50%)}
#cross{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 2px #000}
#hitmark{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;opacity:0;background:linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);mask:radial-gradient(circle,transparent 5px,#000 6px);-webkit-mask:radial-gradient(circle,transparent 5px,#000 6px)}
#hitmark.on{animation:hm .25s}#hitmark.head{filter:drop-shadow(0 0 2px red) sepia(1) saturate(9) hue-rotate(-40deg)}@keyframes hm{0%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(1)}}
#prompt{position:absolute;left:50%;top:calc(50% + 26px);transform:translateX(-50%);font-size:15px;text-shadow:0 1px 3px #000;white-space:nowrap;text-align:center}#prompt b{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.4);padding:0 6px;margin-right:6px;font-size:12px}#prompt small{display:block;color:var(--dim);font-size:12px}
#progress{position:absolute;left:50%;top:calc(50% + 60px);width:160px;height:5px;margin-left:-80px;background:rgba(0,0,0,.5);display:none}#progress i{display:block;height:100%;background:#fff}
#vitals{position:absolute;right:18px;bottom:18px;width:220px;display:grid;gap:4px}
.vit{display:grid;grid-template-columns:22px 1fr 34px;align-items:center;height:24px;background:var(--bg);font-weight:700}.vit svg{width:14px;height:14px;margin:auto;fill:var(--text)}.vit .bar{height:16px;background:rgba(255,255,255,.07);position:relative}.vit .bar i{position:absolute;inset:0;width:0}.vit span{text-align:right;padding-right:6px;font-size:14px}
#status{position:absolute;right:18px;bottom:104px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}.st{padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:1px;background:var(--bg)}.st.bad{background:rgba(160,50,30,.85)}.st.good{background:rgba(90,120,50,.85)}.st.info{background:rgba(60,80,100,.85)}
#belt{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:4px}
.slot{position:relative;width:64px;height:64px;background:var(--slot);border:1px solid rgba(255,255,255,.04);pointer-events:auto}.slot img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.slot .n{position:absolute;right:4px;bottom:2px;font-size:13px;font-weight:700;text-shadow:0 1px 2px #000}.slot .k{position:absolute;left:4px;top:2px;font-size:11px;color:var(--dim)}.slot .cond{position:absolute;left:2px;top:4px;bottom:4px;width:3px;background:rgba(0,0,0,.4)}.slot .cond i{position:absolute;bottom:0;left:0;right:0;background:#9ac15a}
.slot .am{position:absolute;right:4px;top:2px;font-size:11px;color:#d9c47a}.slot.sel{background:rgba(160,150,110,.55);outline:2px solid rgba(230,220,180,.6);outline-offset:-2px}.slot:hover{background:var(--slot-h)}
#ammo{position:absolute;left:calc(50% + 214px);bottom:22px;font-size:26px;font-weight:800;text-shadow:0 2px 3px #000}#ammo small{font-size:15px;color:var(--dim)}
#pickups{position:absolute;right:18px;bottom:200px;display:flex;flex-direction:column;align-items:flex-end;gap:3px}.pk{display:flex;align-items:center;gap:6px;background:rgba(40,60,30,.78);padding:2px 10px 2px 2px;font-weight:700;animation:pk 3s forwards}.pk img{width:26px;height:26px}.pk.neg{background:rgba(90,40,30,.78)}@keyframes pk{0%{opacity:0;transform:translateX(30px)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#queue{position:absolute;left:18px;bottom:18px;display:flex;gap:4px}#queue .slot{width:52px;height:52px}#queue .t{position:absolute;bottom:2px;left:4px;font-size:11px;font-weight:700}
#chat{position:absolute;left:18px;bottom:96px;width:min(420px,60vw)}#chat-log div{background:rgba(0,0,0,.35);padding:2px 8px;margin-top:2px;text-shadow:0 1px 2px #000;animation:fade 12s forwards}#chat-log div b{color:#d9b46a}#chat.open #chat-log div{animation:none;opacity:1}
#chat-in{width:100%;margin-top:4px;padding:6px 8px;background:rgba(0,0,0,.6);border:1px solid var(--line);outline:none;pointer-events:auto}@keyframes fade{0%,85%{opacity:1}100%{opacity:0}}
#notice{position:absolute;left:50%;top:22%;transform:translateX(-50%);padding:8px 18px;background:rgba(0,0,0,.6);font-size:16px;opacity:0;transition:opacity .3s}#notice.on{opacity:1}
#damage{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(150,0,0,.55));opacity:0;transition:opacity .4s}
#dirhit{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px;opacity:0;transition:opacity .6s}#dirhit::before{content:'';position:absolute;left:50%;top:0;margin-left:-22px;border:22px solid transparent;border-bottom:16px solid rgba(200,30,20,.8);border-top:0}
#buildhud{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);text-align:center;text-shadow:0 1px 3px #000}#buildhud b{font-size:18px;letter-spacing:2px}#buildhud small{display:block;color:var(--dim)}
/* panels */
#inv,#craft,#death,#radial{position:fixed;inset:0;z-index:10;background:rgba(10,10,8,.55);backdrop-filter:blur(2px)}
.invwrap{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:grid;grid-template-columns:auto auto auto;gap:18px;align-items:end;max-width:calc(100vw - 32px)}
.pane{background:var(--panel);padding:10px;border:1px solid var(--line)}.pane h3{margin:0 0 8px;font-size:13px;letter-spacing:3px;color:var(--dim);font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px}
.grid{display:grid;grid-template-columns:repeat(6,64px);gap:4px}.grid.box{grid-template-columns:repeat(6,58px)}.grid.box .slot{width:58px;height:58px}
.wear{display:grid;grid-template-columns:repeat(7,52px);gap:4px}.wear .slot{width:52px;height:52px}.wear .slot .k{font-size:9px;letter-spacing:1px}
.doll{width:220px;height:210px;margin-bottom:8px;background:rgba(0,0,0,.25);display:grid;place-items:center;color:var(--dim);font-size:12px;text-align:center;line-height:1.7}
.boxbtns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.boxbtns button,.btn{padding:7px 14px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-weight:700;letter-spacing:1px}.btn.on,.boxbtns button.on{background:var(--good)}.btn.red{background:var(--accent);border-color:transparent}
.furnace .slot.fuel::after{content:'FUEL';position:absolute;left:4px;bottom:2px;font-size:9px;color:var(--dim)}.furnace .slot.out::after{content:'OUT';position:absolute;left:4px;bottom:2px;font-size:9px;color:var(--dim)}
.craftwrap{position:absolute;inset:50px max(16px,calc(50vw - 520px)) 110px;display:grid;grid-template-columns:150px 1fr 300px;gap:10px}
.cats{display:flex;flex-direction:column;gap:3px}.cats button{padding:9px 12px;text-align:left;background:var(--panel);border:1px solid var(--line);letter-spacing:1px;font-weight:700}.cats button.on{background:rgba(196,85,47,.6)}
.recipes{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,72px);gap:5px;align-content:start;background:var(--panel);padding:10px;border:1px solid var(--line)}.recipes .slot{width:72px;height:72px}.recipes .slot.no img{opacity:.35;filter:grayscale(1)}.recipes .slot.sel{outline-color:var(--accent)}.recipes .slot .k{color:#d9a44a}
.detail{background:var(--panel);padding:14px;border:1px solid var(--line)}.detail h2{margin:0;font-size:22px}.detail .big{width:120px;height:120px;margin:10px auto;display:block}.detail table{width:100%;border-collapse:collapse;margin:8px 0}.detail td{padding:4px 6px;border-bottom:1px solid var(--line)}.detail td.no{color:var(--bad)}
.amt{display:flex;gap:6px;align-items:center;margin:10px 0}.amt input{width:60px;padding:6px;background:rgba(0,0,0,.4);border:1px solid var(--line);text-align:center}.amt button{padding:6px 10px;background:rgba(255,255,255,.08);border:1px solid var(--line)}
#map{position:fixed;inset:0;z-index:10;background:rgba(10,12,14,.85);display:grid;place-items:center}#map-canvas{width:min(92vh,92vw);height:min(92vh,92vw);image-rendering:auto;box-shadow:0 0 0 1px var(--line)}#map-info{position:absolute;left:18px;top:14px;color:var(--dim)}
#death{display:grid;place-items:center;background:radial-gradient(ellipse,rgba(60,0,0,.5),rgba(0,0,0,.85))}#death h1{font-size:64px;letter-spacing:10px;margin:0;color:#d8cfc0}#death p{color:var(--dim);text-align:center}#death .bags{display:flex;flex-direction:column;gap:6px;min-width:300px;pointer-events:auto}#death button{padding:12px;background:var(--panel);border:1px solid var(--line);font-size:16px;font-weight:700;letter-spacing:2px}#death button:disabled{opacity:.5}#death button.main{background:var(--accent)}
#radial{display:grid;place-items:center;background:rgba(0,0,0,.25)}.ring{position:relative;width:420px;height:420px}.ring button{position:absolute;width:104px;height:84px;margin:-42px -52px;background:var(--panel);border:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.ring button small{color:var(--dim);font-weight:400;font-size:11px}.ring button.on,.ring button:hover{background:rgba(196,85,47,.75)}.ring button:disabled{opacity:.45}.ring .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:var(--dim)}
dialog#panel{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:22px;min-width:300px;max-width:min(560px,calc(100vw - 32px))}dialog::backdrop{background:rgba(0,0,0,.5)}#close{position:absolute;right:8px;top:6px;background:none;border:0;font-size:22px}
dialog h2{margin:0 0 10px;letter-spacing:3px}dialog input[type=range]{width:100%}dialog input:not([type]){width:100%;padding:8px;background:rgba(0,0,0,.4);border:1px solid var(--line)}
.keypad{display:grid;grid-template-columns:repeat(3,64px);gap:6px;justify-content:center;margin-top:12px}.keypad button{height:52px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:20px;font-weight:700}.code{font-size:34px;letter-spacing:14px;text-align:center;padding:6px;background:rgba(0,0,0,.4);min-height:52px}
#drag{position:fixed;width:56px;height:56px;pointer-events:none;z-index:50;display:none}#drag img{width:100%;height:100%}#drag span{position:absolute;right:0;bottom:0;font-weight:700;text-shadow:0 1px 2px #000}
#tip{position:fixed;z-index:60;pointer-events:none;background:rgba(15,15,12,.95);border:1px solid var(--line);padding:8px 10px;max-width:260px;display:none;font-size:13px}#tip b{display:block;font-size:15px}#tip small{color:var(--dim)}
#qa{position:fixed;right:8px;top:8px;z-index:90;display:flex;flex-direction:column;gap:3px;max-height:96vh;overflow:auto}#qa button{font-size:11px;padding:3px 6px;background:#333;border:1px solid #555}
@media (max-width:700px){.slot{width:48px;height:48px}.grid{grid-template-columns:repeat(6,48px)}#vitals{width:150px}.invwrap{grid-template-columns:1fr;bottom:8px}.craftwrap{grid-template-columns:1fr;inset:10px 16px}.doll{display:none}}

#resume{position:fixed;inset:0;z-index:8;display:grid;place-content:center;text-align:center;background:rgba(0,0,0,.25);cursor:pointer}#resume b{font-size:42px;letter-spacing:8px;padding:18px 40px;background:rgba(20,20,16,.75);border:1px solid var(--line)}#resume small{margin-top:10px;color:var(--text);font-size:16px;letter-spacing:2px;text-shadow:0 1px 3px #000}

#brand{position:fixed;left:14px;top:12px;z-index:9;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:1px}#brand img{width:30px;height:30px}#brand button,#brand a{padding:6px 10px;background:var(--bg);border:1px solid var(--line);color:var(--text);text-decoration:none;font:inherit;cursor:pointer}#brand button:hover,#brand a:hover{border-color:var(--accent)}
@media(max-width:600px){#brand{top:46px}#brand img{display:none}}