*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font:14px system-ui,sans-serif}
img{max-width:100%}

/* Layout: full-bleed canvas world, HUD as carved-wood panels pinned to corners, modals as wooden boards */
:root{
  --ink:#16110c;
  --bark:#2f2418;
  --plank:#4a3a27;
  --plank-hi:#6b5539;
  --cream:#f1e6cd;
  --muted:#b9aa88;
  --amber:#e6ab3c;
  --moss:#6f9446;
  --berry:#c9483a;
  --night:#121a10;
  --f-display:"Pixelify Sans", "Courier New", monospace;
  --f-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;background:var(--night);color:var(--cream)}
body{font-family:var(--f-body);font-size:15px}
#game{position:relative;width:100%;height:100%;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#screen{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.wood{background:var(--plank);box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px var(--plank-hi),inset 0 -4px 0 2px rgba(0,0,0,.25)}
.pxbtn{font-family:var(--f-display);font-weight:600;background:var(--plank);border:0;padding:8px 12px;
  box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px var(--plank-hi),inset 0 -4px 0 0 rgba(0,0,0,.3);color:var(--cream);font-size:15px;line-height:1}
.pxbtn:hover:not(:disabled){background:#5a4730}
.pxbtn:active:not(:disabled){transform:translateY(1px);box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px var(--plank-hi)}
.pxbtn:disabled{opacity:.45;cursor:not-allowed}
.pxbtn.go{background:#4d6d2f;box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px #7ea154,inset 0 -4px 0 0 rgba(0,0,0,.3)}
.pxbtn.go:hover:not(:disabled){background:#5a7d37}
.pxbtn.gold{background:#8a6420;box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px #d9a441,inset 0 -4px 0 0 rgba(0,0,0,.3)}
kbd{font-family:var(--f-display);font-size:11px;padding:1px 4px;background:rgba(0,0,0,.3);margin-left:4px;color:var(--muted)}
img.px{image-rendering:pixelated}

/* HUD */
#hud{position:absolute;inset:0;pointer-events:none}
#hud > *{pointer-events:auto}
.stats{position:absolute;top:12px;left:max(12px, env(safe-area-inset-left,0px));padding:10px 12px;display:grid;gap:6px;min-width:190px}
.hp{display:flex;align-items:center;gap:8px}
.hpbar{width:120px;height:12px;background:#2a130f;box-shadow:0 0 0 2px var(--ink);position:relative}
.hpbar i{position:absolute;inset:0 auto 0 0;background:var(--berry);box-shadow:inset 0 3px 0 rgba(255,255,255,.25)}
.num{font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:6px;white-space:nowrap}
.row img{width:20px;height:20px}
.lbl{color:var(--muted);font-size:13px}
.pts{color:var(--amber);font-size:20px}
.woods{display:flex;gap:8px;flex-wrap:wrap}
.woods span{display:flex;align-items:center;gap:2px;font-size:13px}
.woods span.zero{opacity:.35}
.woods img{width:18px;height:18px}
.topbtns{position:absolute;top:12px;right:max(12px, env(safe-area-inset-right,0px));display:flex;gap:8px}
.topbtns .pxbtn{padding:9px 11px}
#hotbar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:6px;max-width:calc(100% - 32px);overflow-x:auto}
#hotbar button{position:relative;width:46px;height:46px;border:0;background:#2b2116;box-shadow:inset 0 0 0 2px #5a4730;display:grid;place-items:center;flex:none}
#hotbar button.on{background:#5a4320;box-shadow:inset 0 0 0 2px var(--amber)}
#hotbar img{width:32px;height:32px}
#hotbar small{position:absolute;font-family:var(--f-display);font-size:10px;line-height:1}
#hotbar .k{left:3px;top:3px;color:var(--muted)}
#hotbar .lv{right:3px;bottom:3px;color:var(--amber)}
#toasts{position:absolute;top:84px;left:50%;transform:translateX(-50%);display:grid;gap:6px;justify-items:center;width:min(92%,460px);pointer-events:none}
.toast{font-family:var(--f-display);font-size:16px;padding:8px 14px;text-align:center;animation:tin .25s ease-out;text-wrap:balance}
.toast.gold{color:#ffe2a0}
@keyframes tin{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}

/* touch */
#touch{position:absolute;inset:0;pointer-events:none;display:none}
body.touch #touch{display:block}
#zone{position:absolute;left:0;bottom:0;width:55%;top:110px;pointer-events:auto}
#stick{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:rgba(241,230,205,.08);box-shadow:inset 0 0 0 3px rgba(241,230,205,.25);display:none}
#knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(241,230,205,.35)}
.tbtn{position:absolute;pointer-events:auto;border:0;font-family:var(--f-display);font-weight:700;color:var(--cream)}
#t-attack{right:max(22px, env(safe-area-inset-right,0px));bottom:84px;width:86px;height:86px;border-radius:50%;background:rgba(201,72,58,.75);box-shadow:0 0 0 3px var(--ink),inset 0 -5px 0 rgba(0,0,0,.3);font-size:17px}
#t-swap{right:max(118px, calc(env(safe-area-inset-right,0px) + 96px));bottom:96px;width:60px;height:60px;border-radius:50%;background:rgba(74,58,39,.85);box-shadow:0 0 0 3px var(--ink);font-size:13px}
body.touch #hotbar{bottom:auto;top:12px;left:auto;right:max(12px, env(safe-area-inset-right,0px));transform:none;margin-top:52px;max-width:calc(100% - 240px);flex-wrap:wrap;justify-content:flex-end;padding:4px}
body.touch #hotbar button{width:38px;height:38px}
body.touch #hotbar img{width:26px;height:26px}

/* overlays */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,14,8,.62);padding-block:16px;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));z-index:5}
.board{width:min(100%,780px);max-height:100%;overflow:auto;padding:22px;display:grid;gap:14px}
.board h2{font-family:var(--f-display);font-size:26px;margin:0;text-wrap:balance}
.board h3{font-family:var(--f-display);font-size:18px;margin:6px 0 0;color:var(--amber)}
.board p{margin:0;line-height:1.5;max-width:62ch}
.title-board{width:min(100%,560px);text-align:center;justify-items:center;padding:30px 24px}
.logo{font-family:var(--f-display);font-weight:700;font-size:clamp(38px,9vw,64px);line-height:.95;margin:0;color:var(--cream);text-shadow:0 4px 0 var(--ink),0 0 0 var(--ink);letter-spacing:.01em}
.logo em{font-style:normal;color:var(--amber);display:block}
.tagline{color:var(--muted)}
.hero-sprites{display:flex;gap:10px;align-items:flex-end;justify-content:center}
.hero-sprites img{height:44px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;text-align:left}
.keys b{font-family:var(--f-display);font-weight:600;color:var(--amber);white-space:nowrap}

.shop-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.wallet{display:flex;align-items:center;gap:6px;font-size:20px}
.wallet img{width:24px;height:24px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs .pxbtn[aria-selected="true"]{background:#7a5a24;box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px var(--amber)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{background:#382b1d;box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px #574430;padding:12px;display:grid;gap:8px;grid-template-rows:auto 1fr auto;min-width:0}
.card.own{box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px #7ea154}
.card-top{display:flex;gap:10px;align-items:center}
.card-top img{width:48px;height:48px;background:#251c13;padding:4px;flex:none}
.card-top strong{font-family:var(--f-display);font-size:17px;display:block}
.card-top span{font-size:12px;color:var(--muted)}
.card p{font-size:13px;color:#dccfb2;line-height:1.4}
.stat{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.stat b{color:var(--cream);font-family:var(--f-display);font-weight:600}
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acts .pxbtn{font-size:13px;padding:7px 9px}
.inhand{font-family:var(--f-display);font-size:13px;color:#a8d07a}
.reqs{display:flex;gap:8px;flex-wrap:wrap;font-size:12px}
.reqs span{display:flex;align-items:center;gap:3px;padding:2px 6px 2px 2px;background:#251c13}
.reqs span.ok{color:#a8d07a}
.reqs span.no{color:#e59a8e}
.reqs img{width:18px;height:18px}
.guide{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.guide div{display:flex;gap:8px;align-items:center;background:#382b1d;padding:6px 8px;font-size:13px;min-width:0}
.guide img{width:32px;height:32px;flex:none;object-fit:contain}
.guide small{display:block;color:var(--muted)}
.close-row{display:flex;justify-content:flex-end}
#mp-chip{color:var(--muted);font-size:13px}
#mp-chip b{color:#9fd2ff;font-family:var(--f-display);letter-spacing:.08em}
.field{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.field input{font-family:var(--f-display);font-size:20px;padding:8px 10px;background:#251c13;color:var(--cream);border:0;box-shadow:inset 0 0 0 2px #6b5539;width:100%;min-width:0}
.field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--amber)}
#mp-code{text-transform:uppercase;letter-spacing:.2em}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:34px;height:34px;border:0;box-shadow:0 0 0 2px var(--ink),inset 0 0 0 3px rgba(255,255,255,.25)}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--amber)}
.mp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.mp-cols .card{grid-template-rows:auto 1fr auto}
.mp-cols strong{font-family:var(--f-display);font-size:18px}
.bigcode{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,10vw,64px);letter-spacing:.18em;color:#9fd2ff;text-shadow:0 4px 0 var(--ink);line-height:1}
.plist{display:flex;gap:8px;flex-wrap:wrap}
.plist span{display:flex;align-items:center;gap:6px;background:#251c13;padding:4px 10px;font-family:var(--f-display)}
.plist i{width:12px;height:12px;display:inline-block;box-shadow:0 0 0 2px var(--ink)}
.note{background:#2a1f15;padding:10px 12px;font-size:13px;color:#dccfb2;line-height:1.45}
@media (max-width:700px){
  .stats{top:64px}
  .topbtns{left:max(12px, env(safe-area-inset-left,0px));justify-content:flex-end;flex-wrap:wrap}
  body.touch #hotbar{margin-top:52px}
  #toasts{top:150px}
}
@media (max-width:520px){
  .stats{min-width:0;padding:8px 10px}
  .hpbar{width:84px}
  .board{padding:16px}
  .topbtns .lbl-long{display:none}
}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* v2: basket, quests, ticks */
#basket-row img{width:20px;height:20px}
#basket-row.full #basket-n{color:#ff9a80}
#basket-row.full::after{content:"pełny!";color:#ff9a80;font-family:var(--f-display);font-size:13px}
.quest{font-size:13px;line-height:1.35;max-width:260px;color:#f0dcae;white-space:normal}
.quest b{font-family:var(--f-display);color:var(--amber);font-weight:600}
.tickbtn{position:absolute;left:50%;transform:translateX(-50%);bottom:80px;background:#7a2a20;box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px #c9483a,inset 0 -4px 0 0 rgba(0,0,0,.3);animation:tickpulse 1s ease-in-out infinite}
@keyframes tickpulse{50%{transform:translateX(-50%) scale(1.06)}}
body.touch .tickbtn{bottom:auto;top:auto;left:auto;right:max(22px, env(safe-area-inset-right,0px));transform:none;bottom:186px;animation:none}

/* v2: menu, achievements, ranking, changelog */
.ver{font-size:13px;color:var(--muted)}
.linkbtn{background:none;border:0;padding:0;color:var(--amber);text-decoration:underline;font:inherit}
.menu-board{width:min(100%,480px)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.menu-grid .pxbtn{padding:12px}
.menu-grid .pxbtn[aria-pressed="false"]{opacity:.7}
.achs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.ach{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#382b1d;padding:8px 10px;min-width:0}
.ach i{width:16px;height:16px;background:#251c13;box-shadow:inset 0 0 0 2px #574430}
.ach.got i{background:var(--amber);box-shadow:inset 0 0 0 2px #fff0a0}
.ach strong{display:block;font-family:var(--f-display);font-weight:600}
.ach small{display:block;color:var(--muted);font-size:12px}
.ach em{font-style:normal;font-family:var(--f-display);font-size:12px;color:var(--muted);white-space:nowrap}
.ach.got em{color:#a8d07a}
.tablewrap{overflow-x:auto}
table.rank{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.rank th,table.rank td{text-align:left;padding:6px 8px;border-bottom:1px solid #574430}
table.rank th{font-family:var(--f-display);font-weight:600;color:var(--amber)}
table.rank tr.me td{background:#4a3814;color:#ffe2a0}
ul.news{margin:0;padding-left:20px;display:grid;gap:6px;line-height:1.45;max-width:66ch}
.card.legend{background:#4a3814}
.card.legend strong{color:#ffd84a}
.card.locked{opacity:.7}
.lockmsg{font-size:13px;color:#e59a8e}

/* smaller notifications on phones so they never cover the screen */
@media (max-width:700px){
  #toasts{top:auto;bottom:150px;width:min(86%,330px);gap:4px}
  .toast{font-size:13px;padding:5px 10px;line-height:1.25}
  .quest{max-width:200px;font-size:12px}
}
@media (max-width:700px){ body.touch #toasts{bottom:250px} }