:root{
  --bg:#2b1f15; --panel:#4a3422; --panel-hi:#5c422c; --panel-lo:#342417;
  --edge:#8f6b3d; --brass:#e6b95a; --ink:#f4e8cb; --ink-dim:#cdbb93;
  --hp:#d33d2f; --mp:#3f76e2; --xp:#a8d95c; --well:#1e150e;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#1a120c; --panel:#3a2819; --panel-hi:#4a3421; --panel-lo:#281a10; }
}
:root[data-theme="dark"]{ --bg:#1a120c; --panel:#3a2819; --panel-hi:#4a3421; --panel-lo:#281a10; }
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pixelify Sans",ui-rounded,"Trebuchet MS",system-ui,sans-serif;
  overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#app{height:100%;display:flex;flex-direction:column}
#stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#1b3a5c}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;image-rendering:pixelated}

/* HUD */
#hud{position:absolute;left:8px;top:8px;display:flex;gap:8px;align-items:flex-start;pointer-events:none}
.lvl{width:40px;height:40px;padding:0;display:grid;place-items:center;background:var(--panel);border:2px solid var(--brass);color:var(--ink);font:inherit;
  border-radius:50%;font-weight:700;font-size:18px;box-shadow:0 2px 0 rgba(0,0,0,.4);pointer-events:auto;cursor:pointer;touch-action:manipulation}
.lvl:active{transform:translateY(1px)}.lvl:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.bars{display:flex;flex-direction:column;gap:3px;width:min(46vw,210px)}
.bar{position:relative;height:15px;background:var(--well);border:2px solid var(--panel-lo);border-radius:3px;overflow:hidden}
.bar i{position:absolute;inset:0;transform-origin:left;transition:transform .15s}
.bar.hp i{background:linear-gradient(#e8574a,var(--hp) 60%,#9c2a20)}
.bar.mp i{background:linear-gradient(#6a97ee,var(--mp) 60%,#2a4fa6)}
.bar.xp{height:6px;border-width:1px}
.bar.xp i{background:var(--xp)}
.bar span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;line-height:1;text-shadow:0 1px 0 #000,0 0 3px #000}
#gold{font-size:13px;color:var(--brass);text-shadow:0 1px 0 #000;margin-top:1px}
#target{position:absolute;left:50%;top:100px;transform:translateX(-50%);min-width:150px;padding:4px 8px 6px;
  background:rgba(30,20,12,.82);border:2px solid #9b3a30;border-radius:4px;text-align:center;font-size:13px;pointer-events:none}
#target .bar{height:7px;margin-top:3px;border-width:1px}
#target .bar i{background:var(--hp)}
#miniWrap{position:absolute;right:8px;top:8px;padding:3px;background:var(--panel);border:2px solid var(--edge);border-radius:4px}
#mini{display:block;width:92px;height:92px;image-rendering:pixelated}
#log{position:absolute;left:8px;bottom:8px;max-width:min(70%,360px);pointer-events:none;display:flex;flex-direction:column;gap:2px}
#log div{font-size:13px;line-height:1.3;padding:2px 6px;background:rgba(20,13,8,.62);border-radius:3px;
  text-shadow:0 1px 0 #000;transition:opacity 1s}
#log div.old{opacity:0}
#log .loot{color:#cfe6a1}#log .xp{color:#f4d27a}#log .bad{color:#ff9585}#log .info{color:#a9c8ff}

/* Dock */
#dock{flex:none;display:flex;gap:4px;padding:6px;background:var(--panel);
  border-top:2px solid var(--edge);box-shadow:inset 0 1px 0 var(--panel-hi);justify-content:center}
.grp{display:flex;gap:4px;flex:1;justify-content:center;max-width:560px}
#side{position:absolute;right:8px;top:116px;display:flex;flex-direction:column;gap:6px}
#side .btn{width:44px;height:44px;flex:none;max-width:none;min-width:0}
#side .btn img{width:28px;height:28px}
.btn{position:relative;flex:1 1 0;min-width:28px;max-width:54px;height:48px;padding:0;
  background:var(--panel-hi);border:2px solid var(--panel-lo);border-radius:5px;color:var(--ink);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 2px 0 rgba(0,0,0,.35);display:grid;place-items:center;
  cursor:pointer;font:inherit;touch-action:manipulation}
.btn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.btn img{width:26px;height:26px;image-rendering:pixelated;pointer-events:none}
.btn .n{position:absolute;right:3px;bottom:1px;font-size:12px;text-shadow:0 1px 0 #000}
.btn .k{position:absolute;left:3px;top:1px;font-size:10px;color:var(--ink-dim);display:none}
@media (hover:hover){.btn .k{display:block}}
.btn .cd{position:absolute;inset:0;border-radius:3px;pointer-events:none;
  background:conic-gradient(rgba(10,6,3,.72) calc(var(--cd,0)*360deg),transparent 0)}
.btn .lk{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;border-radius:3px;background:rgba(10,6,3,.5);text-shadow:0 1px 0 #000}
#buffs{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
#buffs span{font-size:11px;padding:1px 5px;border-radius:3px;background:rgba(20,13,8,.72)}
.btn.off img{opacity:.35;filter:grayscale(1)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(10,6,3,.55);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.modal[hidden]{display:none}
.sheet{width:100%;max-width:470px;max-height:82%;display:flex;flex-direction:column;background:var(--panel);
  border:2px solid var(--edge);border-bottom:0;border-radius:8px 8px 0 0;box-shadow:inset 0 2px 0 var(--panel-hi);
  padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:640px){.modal{align-items:center}.sheet{border-bottom:2px solid var(--edge);border-radius:8px}}
.sheet header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:2px solid var(--panel-lo)}
.sheet h2{margin:0;font-size:20px;font-weight:700;color:var(--brass)}
.x{width:36px;height:36px;border-radius:5px;background:var(--panel-hi);border:2px solid var(--panel-lo);color:var(--ink);font:inherit;font-size:18px;cursor:pointer}
#mBody{padding:12px 14px 16px;overflow-y:auto}
#mBody p{margin:0 0 10px;line-height:1.45;font-size:15px;max-width:60ch}
.act{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.b2{padding:9px 14px;background:var(--panel-hi);border:2px solid var(--panel-lo);border-radius:5px;color:var(--ink);
  font:inherit;font-size:15px;cursor:pointer;box-shadow:inset 0 2px 0 rgba(255,255,255,.12)}
.b2.pri{background:#7a5a22;border-color:#4a3510;color:#fff3d1}
.b2:disabled{opacity:.45;cursor:default}
.b2:focus-visible,.x:focus-visible,.slot:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.talk{display:flex;gap:12px;align-items:flex-start}
.talk img{width:64px;height:64px;image-rendering:pixelated;background:var(--well);border:2px solid var(--panel-lo);border-radius:5px;flex:none}
.eq{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:8px}
.eq .slot{width:100%}
.eq label{display:block;font-size:12px;color:var(--ink-dim);text-align:center;margin-top:3px}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.slot{position:relative;aspect-ratio:1;background:var(--well);border:2px solid var(--panel-lo);border-radius:4px;
  display:grid;place-items:center;cursor:pointer;padding:0;color:var(--ink);font:inherit}
.slot img{width:78%;height:78%;image-rendering:pixelated}
.slot .n{position:absolute;right:3px;bottom:1px;font-size:12px;text-shadow:0 1px 0 #000}
.slot.sel{border-color:var(--brass)}
.stats{font-size:14px;color:var(--ink-dim);margin:4px 0 10px}
.detail{margin-top:12px;padding:10px;background:var(--panel-lo);border-radius:5px;min-height:64px;font-size:14px;line-height:1.4}
.detail b{color:var(--brass);font-weight:500}
.rows{display:flex;flex-direction:column;gap:6px}
.row{display:flex;align-items:center;gap:10px;padding:6px 8px;background:var(--panel-lo);border-radius:5px}
.row img{width:32px;height:32px;image-rendering:pixelated}
.row .t{flex:1;font-size:14px;line-height:1.3}
.row .t small{display:block;color:var(--ink-dim);font-size:12px}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs .b2[aria-pressed="true"]{background:#7a5a22;color:#fff3d1}
.prog{height:8px;background:var(--well);border-radius:3px;overflow:hidden;margin:4px 0 12px}
.prog i{display:block;height:100%;background:var(--xp)}
.muted{color:var(--ink-dim)}
.rar{font-size:12px}
.sk{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.sk .nm{font-size:15px}.sk .v{font-size:15px;color:var(--brass);text-align:right;font-variant-numeric:tabular-nums}
.sk .prog{grid-column:1/-1;height:6px;margin:0 0 6px}
.sk .nm small{color:var(--ink-dim);font-size:12px;margin-left:6px}
.sec{font-size:14px;color:var(--ink-dim);margin:16px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--panel-lo)}
.note{padding:8px 10px;background:#3b5424;border:2px solid #6b8f3a;border-radius:5px;font-size:14px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.note .b2{padding:5px 12px;font-size:14px}
.row .own{color:#b5e27a}.row .up{color:#b5e27a}.row .down{color:#e8a07a}
.row.flash{animation:fl .9s ease-out}
@keyframes fl{0%{background:#5b7f2e;box-shadow:0 0 0 2px #a8d95c}100%{background:var(--panel-lo);box-shadow:none}}
@media (prefers-reduced-motion:reduce){.row.flash{animation:none;box-shadow:0 0 0 2px #a8d95c}}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}

/* Komunikaty PWA: nowa wersja (u góry) i podpowiedź instalacji (u dołu) */
.toast{position:fixed;left:50%;top:calc(60px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:11;width:max-content;max-width:min(92%,380px);
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;background:rgba(30,20,12,.94);border:2px solid var(--edge);border-radius:6px;
  box-shadow:0 3px 0 rgba(0,0,0,.35);font-size:14px;line-height:1.35}
.toast span{flex:1}
.toast .b2{padding:6px 12px;font-size:14px;flex:none}
.toast .x{width:32px;height:32px;font-size:15px;flex:none}
.toast.low{top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));border-color:var(--panel-hi);font-size:13px;color:var(--ink-dim)}
.toast .ico{width:15px;height:15px;vertical-align:-2px;color:var(--ink)}