:root{
  --bg:#1b1b1f; --panel:#c6c6c6; --slot:#8b8b8b; --lite:#ffffff; --dark:#373737; --ink:#3f3f3f;
  --txt:#f2f2f2; --mute:#a9a9b3; --ok:#5cba50; --bad:#de2424; --gold:#ffdd40;
  --px:'Press Start 2P',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font:14px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background-image:linear-gradient(#0000 0 0),repeating-conic-gradient(#202024 0 25%,#1b1b1f 0 50%);background-size:auto,32px 32px}
img.px{image-rendering:pixelated;image-rendering:crisp-edges}
#app{display:flex;flex-direction:column;height:100%;max-width:560px;margin:0 auto}
header{padding:10px 12px 8px;display:flex;align-items:center;gap:10px}
header h1{font:11px var(--px);margin:0;letter-spacing:.5px;flex:1;color:var(--gold);text-shadow:2px 2px 0 #3f3f00}
.stat{font:9px var(--px);padding:6px 7px;background:#0008;border:2px solid #000;white-space:nowrap}
.stat b{color:var(--ok)} .stat.down b{color:var(--bad)}
main{flex:1;overflow-y:auto;padding:0 10px 12px;-webkit-overflow-scrolling:touch}
section{display:none} section.on{display:block}
.gui{background:var(--panel);color:var(--ink);border:3px solid;border-color:var(--lite) #555 #555 var(--lite);
  box-shadow:0 0 0 2px #000;padding:10px;margin:10px 2px 14px}
.gui h2{font:9px var(--px);margin:0 0 9px;color:var(--ink);line-height:1.5}
.gui p.hint{margin:6px 0 0;font-size:12px;color:#555}
/* слоты как в инвентаре */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.slot{background:var(--slot);border:3px solid;border-color:var(--dark) var(--lite) var(--lite) var(--dark);
  padding:7px 3px 5px;text-align:center;cursor:pointer;position:relative;min-height:84px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;user-select:none}
.slot img{width:40px;height:40px}
.slot span{font-size:10.5px;line-height:1.15;color:#1c1c1c;font-weight:600;overflow-wrap:break-word;hyphens:auto;max-width:100%}
.slot:active,.slot.busy{background:#b9b9d8;border-color:var(--lite) var(--dark) var(--dark) var(--lite)}
.slot.ench img{filter:drop-shadow(0 0 3px #b45cff) drop-shadow(0 0 1px #e9c8ff)}
.slot.set::after{content:"набор";position:absolute;top:2px;right:3px;font:6px var(--px);color:#fff;background:#3b6ea5;padding:2px 3px}
.slot.wide{grid-column:span 2}
.slot.sel{outline:3px solid var(--gold);outline-offset:-3px}
/* кнопки как в меню игры */
.btn{font:9px var(--px);color:#fff;background:#6f6f6f;border:3px solid;border-color:#aaa #2a2a2a #2a2a2a #aaa;
  box-shadow:0 0 0 2px #000;padding:11px 8px;cursor:pointer;text-shadow:2px 2px 0 #2a2a2a;line-height:1.4;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;user-select:none}
.btn img{width:20px;height:20px}
.btn:active,.btn.busy{background:#7d8fbf;border-color:#2a2a2a #aaa #aaa #2a2a2a}
.btn.on{background:#3d7a36;border-color:#8fd486 #1c3c18 #1c3c18 #8fd486}
.btn.danger{background:#8a2b2b;border-color:#d98a8a #3c1414 #3c1414 #d98a8a}
.row{display:grid;gap:8px;margin-bottom:8px}
.row.c2{grid-template-columns:1fr 1fr}.row.c3{grid-template-columns:repeat(3,1fr)}.row.c4{grid-template-columns:repeat(4,1fr)}
.row.c4 .btn{flex-direction:column;padding:9px 2px;font-size:8px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{font:8px var(--px);white-space:nowrap;padding:9px 9px;background:#3a3a40;color:#ddd;border:2px solid #000;cursor:pointer;
  display:flex;align-items:center;gap:6px}
.chip img{width:16px;height:16px}
.chip.on{background:var(--gold);color:#2a2400}
.target{position:sticky;top:0;z-index:5;background:var(--bg);padding:6px 0 2px;margin:0 -2px}
.target label{font:8px var(--px);color:var(--mute);display:block;margin:0 2px 6px}
input[type=text]{width:100%;font:15px system-ui;padding:11px;border:3px solid;border-color:var(--dark) var(--lite) var(--lite) var(--dark);
  background:#111;color:#fff;border-radius:0;outline:none;margin-bottom:8px}
pre{background:#111;color:#cfe;border:2px solid #000;padding:8px;font:11px/1.35 ui-monospace,Menlo,Consolas,monospace;
  white-space:pre-wrap;word-break:break-word;max-height:46vh;overflow:auto;margin:8px 0 0}
nav{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#111;border-top:3px solid #000;
  padding-bottom:env(safe-area-inset-bottom)}
nav button{all:unset;cursor:pointer;text-align:center;padding:9px 2px 8px;font:7px var(--px);color:var(--mute);
  display:flex;flex-direction:column;align-items:center;gap:6px}
nav button img{width:26px;height:26px;opacity:.65}
nav button.on{color:var(--gold);background:#26262c} nav button.on img{opacity:1}
#toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);opacity:0;transition:.18s;
  background:#111e;border:3px solid var(--ok);color:#fff;padding:10px 12px;max-width:92%;width:max-content;z-index:30;
  font-size:13px;pointer-events:none;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)} #toast.bad{border-color:var(--bad)}
#toast b{display:block;font:9px var(--px);margin-bottom:5px;line-height:1.5}
#sheet{position:fixed;inset:0;background:#000a;display:none;align-items:flex-end;z-index:20}
#sheet.on{display:flex}
#sheet .gui{width:100%;max-width:560px;margin:0 auto;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
#sheet .head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#sheet .head img{width:44px;height:44px}
#sheet .head div{font-weight:700;color:#222}
.empty{color:#555;font-size:13px;padding:6px 2px}
.wl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wl .tag{background:var(--slot);border:2px solid;border-color:var(--dark) var(--lite) var(--lite) var(--dark);color:#1c1c1c;
  font-size:12.5px;font-weight:600;padding:5px 4px 5px 8px;display:flex;align-items:center;gap:6px}
.wl .tag b{font:8px var(--px);color:#fff;background:#3b6ea5;padding:3px 4px}
.wl .tag i{font-style:normal;cursor:pointer;background:#8a2b2b;color:#fff;font:9px var(--px);padding:5px 6px}
#gate{padding:40px 22px;text-align:center;color:var(--mute);font-size:14px;line-height:1.5}
#gate b{display:block;font:11px var(--px);color:var(--gold);margin-bottom:14px;line-height:1.6}