:root{--ui-bg:#10141cb8;--ui-bg-solid:#151a24;--ui-line:#ffffff24;--ui-text:#f4efe2;--ui-muted:#b7b2a4;--accent:#ffd36a;--accent-2:#7fe3ff;--good:#8ff08a;--warn:#ffb35c;--heart:#ff4d5e;--stamina:#7bea5a;--font:"Segoe UI", system-ui, -apple-system, Roboto, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ui-text);font-family:var(--font);background:#1b2230;margin:0;overflow:hidden}body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}#app,canvas{width:100%;height:100%;display:block;position:fixed;inset:0}.hud{pointer-events:none;z-index:5;position:fixed;inset:0}.hearts{top:max(14px, env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left));filter:drop-shadow(0 2px 2px #00000080);gap:4px;display:flex;position:absolute}.heart svg{width:30px;height:28px;display:block}.h-bg{fill:#00000073;stroke:#ffffff8c;stroke-width:1.4px}.h-fg{fill:var(--heart)}.hearts.hurt{animation:.35s heartShake}.hearts.low .heart:last-child,.hearts.low .heart:first-child{animation:.6s infinite heartBeat}@keyframes heartShake{0%,to{transform:none}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@keyframes heartBeat{50%{transform:scale(1.15)}}.stamina{opacity:0;width:46px;height:46px;margin:-23px 0 0 -23px;transition:opacity .35s;position:absolute;top:0;left:0}.stamina.show{opacity:1}.stamina svg{filter:drop-shadow(0 1px 2px #0009);width:100%;height:100%;transform:rotate(-90deg)}.st-bg{fill:#00000059;stroke:#00000073;stroke-width:6px}.st-fg{fill:none;stroke:var(--stamina);stroke-width:5px;stroke-linecap:round;transition:stroke .2s}.stamina{transition:opacity .35s,width .25s,height .25s,margin .25s}.stamina.fp{width:62px;height:62px;margin:-31px 0 0 -31px}.stamina.fp svg{filter:drop-shadow(0 0 2px #0000008c)}.stamina.fp .st-fg{stroke-width:2.6px}.stamina.fp .st-bg{fill:none;stroke-width:2.6px;opacity:.45}.stamina.exhausted .st-fg{stroke:#ff6a4a;animation:.3s infinite alternate blink}@keyframes blink{to{opacity:.45}}.crosshair{opacity:0;background:#fff;border-radius:50%;width:6px;height:6px;margin:-3px;transition:opacity .15s;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1.5px #0000008c}.crosshair.show{opacity:.9}.hitmarker{opacity:0;width:0;height:0;position:absolute;top:50%;left:50%}.hitmarker.show{opacity:1}.hitmarker i{background:#fff;width:12px;height:2.5px;position:absolute;top:-1px;left:-6px;box-shadow:0 0 2px #000}.hitmarker i:first-child{transform:rotate(45deg)translate(-12px)}.hitmarker i:nth-child(2){transform:rotate(135deg)translate(-12px)}.hitmarker i:nth-child(3){transform:rotate(225deg)translate(-12px)}.hitmarker i:nth-child(4){transform:rotate(315deg)translate(-12px)}.hitmarker.kill i{background:#f56;width:16px}.bow-reticle{opacity:0;--s:26px;width:0;height:0;transition:opacity .1s;position:absolute;top:50%;left:50%}.bow-reticle.show{opacity:1}.bow-reticle i{background:#fff;width:2px;height:9px;transition:transform 50ms linear;position:absolute;top:-4.5px;left:-1px;box-shadow:0 0 2px #000}.bow-reticle i:first-child{transform:rotate(0deg) translateY(calc(-1 * var(--s)))}.bow-reticle i:nth-child(2){transform:rotate(90deg) translateY(calc(-1 * var(--s)))}.bow-reticle i:nth-child(3){transform:rotate(180deg) translateY(calc(-1 * var(--s)))}.bow-reticle i:nth-child(4){transform:rotate(270deg) translateY(calc(-1 * var(--s)))}.bow-reticle.full i{background:var(--accent)}.lock-reticle{opacity:0;width:0;height:0;transition:opacity .12s;position:absolute;top:0;left:0}.lock-reticle.show{opacity:1}.lock-reticle b{filter:drop-shadow(0 0 2px #000);transform-origin:8px 38px;border-top:13px solid #ffcf4a;border-left:8px solid #0000;border-right:8px solid #0000;width:0;height:0;animation:2.4s linear infinite lockSpin;position:absolute;top:-38px;left:-8px}.lock-reticle b:nth-child(2){animation-delay:-.8s}.lock-reticle b:nth-child(3){animation-delay:-1.6s}@keyframes lockSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hotbar{left:50%;bottom:max(14px, env(safe-area-inset-bottom));pointer-events:auto;gap:6px;display:flex;position:absolute;transform:translate(-50%)}.slot{background:var(--ui-bg);border:2px solid var(--ui-line);cursor:pointer;border-radius:12px;place-items:center;width:54px;height:54px;transition:transform .12s,border-color .12s;display:grid;position:relative}.slot svg{width:36px;height:36px}.slot.sel{border-color:var(--accent);transform:translateY(-5px);box-shadow:0 0 0 2px #ffd36a40,0 6px 14px #0006}.slot.empty{opacity:.4}.slot .key{color:var(--ui-muted);font-size:11px;font-weight:700;position:absolute;top:1px;left:4px}.slot .count{text-shadow:0 1px 2px #000;font-size:13px;font-weight:800;position:absolute;bottom:1px;right:4px}.slot.pulse{animation:.45s pulse}@keyframes pulse{30%{border-color:var(--good);transform:translateY(-5px)scale(1.18)}}.equip-info{right:max(16px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:10px;align-items:center;gap:8px;padding:7px 12px;font-size:14px;display:flex;position:absolute}.equip-info .arrows{align-items:center;gap:3px;margin-left:6px;display:inline-flex}.equip-info .arrows svg{width:20px;height:20px}.equip-info .arrows em{font-style:normal;font-weight:800}.equip-info .arrows.zero em{color:#ff6a6a}.equip-info.shake{animation:.35s heartShake}.mode-label{right:max(16px, env(safe-area-inset-right));bottom:calc(max(18px, env(safe-area-inset-bottom)) + 42px);color:var(--ui-muted);background:var(--ui-bg);border-radius:8px;padding:3px 9px;font-size:12px;position:absolute}.dummy-stats{top:max(14px, env(safe-area-inset-top));background:var(--ui-bg);border:1px solid var(--ui-line);white-space:nowrap;border-radius:10px;padding:5px 12px;font-size:13px;position:absolute;left:50%;transform:translate(-50%)}.dummy-stats em{color:var(--accent);font-style:normal;font-weight:800}.keyhints{left:max(16px, env(safe-area-inset-left));bottom:max(18px, env(safe-area-inset-bottom));color:var(--ui-muted);background:var(--ui-bg);border-radius:10px;padding:6px 10px;font-size:12px;line-height:1.6;position:absolute}.keyhints kbd{font:inherit;color:var(--ui-text);background:#ffffff1a;border-radius:4px;padding:0 5px;font-weight:700}body.touch-mode .keyhints{display:none}.toasts{left:max(16px, env(safe-area-inset-left));flex-direction:column;align-items:flex-start;gap:6px;display:flex;position:absolute;top:30%}.toast{background:var(--ui-bg);border-left:3px solid var(--accent-2);border-radius:8px;align-items:center;gap:8px;padding:6px 12px;font-size:14px;transition:opacity .4s,transform .4s;animation:.22s ease-out toastIn;display:flex}.toast .ti svg{width:22px;height:22px;display:block}.toast.good{border-color:var(--good)}.toast.warn{border-color:var(--warn)}.toast.out{opacity:0;transform:translate(-20px)}.toast.bump{animation:.3s pulse}@keyframes toastIn{0%{opacity:0;transform:translate(-24px)}}.popups{position:absolute;inset:0;overflow:hidden}.popup{letter-spacing:.5px;white-space:nowrap;text-shadow:0 2px #000000bf,0 0 6px #0009;will-change:transform;font-weight:900;position:absolute;top:0;left:0}.screen-flash,.screen-vignette,.screen-tint{opacity:0;position:absolute;inset:0}.screen-vignette{background:radial-gradient(#0000 45%,#dc1428bf 100%)}.screen-tint{mix-blend-mode:screen;transition:opacity .2s}.modal{z-index:30;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#080a108c;place-items:center;padding:16px;display:none;position:fixed;inset:0}.modal.open{display:grid}.panel{background:var(--ui-bg-solid);border:1px solid var(--ui-line);border-radius:16px;width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 20px 60px #00000080}.panel header{border-bottom:1px solid var(--ui-line);background:var(--ui-bg-solid);justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.panel h2{margin:0;font-size:18px}.panel footer{color:var(--ui-muted);border-top:1px solid var(--ui-line);padding:10px 16px;font-size:12px}.panel button{font:inherit;color:var(--ui-text);border:1px solid var(--ui-line);cursor:pointer;background:#ffffff14;border-radius:8px;padding:6px 12px}.panel button:hover{background:#ffffff29}.hdr-btns{gap:6px;display:flex}.inv-body{grid-template-columns:1fr 240px;gap:14px;padding:14px 16px;display:grid}.grid{grid-template-columns:repeat(5,1fr);align-content:start;gap:8px;display:grid}.islot{aspect-ratio:1;border-radius:10px;place-items:center;display:grid;position:relative;padding:6px!important}.islot svg{width:70%;height:70%}.islot.sel{box-shadow:0 0 0 2px #ffd36a4d;border-color:var(--accent)!important}.islot.empty{opacity:.35}.islot .count{font-size:13px;font-weight:800;position:absolute;bottom:2px;right:5px}.islot .eq{color:#111;background:var(--accent);border-radius:4px;padding:0 4px;font-size:10px;font-weight:900;position:absolute;top:2px;left:4px}.islot .hb{color:var(--accent-2);font-size:10px;font-weight:800;position:absolute;top:2px;right:4px}.details .big svg{width:64px;height:64px}.details h3{margin:6px 0}.details h3 small{color:var(--ui-muted);font-weight:600}.details p{color:var(--ui-muted);font-size:14px;line-height:1.45}.details .equip{border-color:var(--accent);background:#ffd36a2e;width:100%;margin-bottom:10px}.assign{flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;display:flex}.assign span{color:var(--ui-muted);margin-right:4px}.assign button{padding:4px 9px}.assign button.on{border-color:var(--accent-2);background:#7fe3ff40}.muted{color:var(--ui-muted)}.help .cols,.start .cols{grid-template-columns:1fr 1fr;gap:18px;padding:14px 16px;display:grid}table{border-collapse:collapse;width:100%;font-size:13px}td{vertical-align:top;border-bottom:1px solid #ffffff0f;padding:4px 6px}td:first-child{white-space:nowrap}kbd{border:1px solid var(--ui-line);background:#ffffff1a;border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-family:inherit;font-size:12px;font-weight:700}h3{color:var(--accent);margin:0 0 8px;font-size:14px}.start{z-index:40;background:radial-gradient(at 50% 30%,#283c5a8c,#080a10e0);place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow:auto}.start-card{background:var(--ui-bg-solid);border:1px solid var(--ui-line);text-align:center;border-radius:18px;width:min(860px,100%);padding:20px 12px 18px;box-shadow:0 30px 80px #0009}.start h1{letter-spacing:.5px;margin:0;font-size:clamp(24px,5vw,40px)}.start h1 span{color:var(--accent)}.start .sub{color:var(--ui-muted);margin:4px 0 6px}.start .cols{text-align:left}.start ul{color:var(--ui-muted);margin:0;padding-left:18px;font-size:14px;line-height:1.6}.start ul b{color:var(--ui-text)}.start .go{font:inherit;color:#1b1300;cursor:pointer;background:linear-gradient(#ffe08a,#f2b73c);border:0;border-radius:12px;padding:12px 34px;font-size:18px;font-weight:800;box-shadow:0 6px #b07a14,0 10px 20px #0006}.start .go:active{transform:translateY(3px);box-shadow:0 3px #b07a14}.start .hint{color:var(--ui-muted);margin:12px 0 0;font-size:13px}.tweak-wrap{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));z-index:20;border-radius:8px;max-height:calc(100vh - 110px);position:fixed;overflow:auto}.tweak-wrap .lil-gui.tweak{--width:300px}.lil-gui.tweak.touch{--widget-height:28px;--font-size:13px}body.touch-mode .tweak-wrap{top:calc(max(8px, env(safe-area-inset-top)) + 44px);max-height:calc(100vh - 60px);display:none}body.touch-mode .tweak-wrap.open{display:block}.touch{z-index:6;pointer-events:none;display:none;position:fixed;inset:0}.touch.on{display:block}.t-move{pointer-events:auto;touch-action:none;width:42%;position:absolute;top:70px;bottom:90px;left:0}.t-look{pointer-events:auto;touch-action:none;width:58%;position:absolute;top:70px;bottom:0;right:0}.t-stick{opacity:0;background:#0a0e1440;border:2px solid #ffffff59;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;transition:opacity .12s;position:fixed;top:70%;left:18%}.t-stick.on{opacity:1}.t-knob{background:#ffffff8c;border-radius:50%;width:54px;height:54px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #0006}.touch.on .t-move:after{content:"mover";color:#ffffff59;pointer-events:none;font-size:12px;position:absolute;top:70%;left:18%;transform:translate(-50%,-50%)}.t-buttons{right:max(14px, env(safe-area-inset-right));bottom:max(78px, calc(env(safe-area-inset-bottom) + 70px));pointer-events:none;width:250px;height:230px;position:absolute}.t-btn{color:#fff;pointer-events:auto;touch-action:none;text-shadow:0 1px 2px #000;background:#12161e8c;border:2px solid #ffffff73;border-radius:50%;place-items:center;font-size:12px;font-weight:800;transition:transform 60ms,background 60ms;display:grid;position:absolute}.t-btn.on{background:#ffd36a73;transform:scale(.92)}.b-attack{border-color:#ffd36a;width:86px;height:86px;font-size:14px;bottom:0;right:0}.b-guard{border-color:#7fe3ff;width:70px;height:70px;bottom:6px;right:98px}.b-jump{border-color:#a6f08a;width:66px;height:66px;bottom:100px;right:12px}.b-jump.as-dodge{border-color:#fff}.b-sneak{border-color:#b9a6ff;width:58px;height:58px;bottom:90px;right:92px}.b-sprint{width:54px;height:54px;font-size:11px;bottom:90px;right:178px}.b-sprint.on{background:#7bea5a73;transform:none}.b-lock{border-color:#ffcf4a;width:54px;height:54px;font-size:11px;bottom:16px;right:180px}.t-top{top:max(8px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:70%;display:flex;position:absolute}.t-small{font:inherit;color:#fff;touch-action:none;background:#12161e9e;border:1px solid #ffffff4d;border-radius:9px;padding:7px 10px;font-size:12px;font-weight:700}.t-small:active{background:#ffd36a73}body.touch-mode .hearts{top:max(10px, env(safe-area-inset-top))}body.touch-mode .dummy-stats{top:calc(max(10px, env(safe-area-inset-top)) + 36px);left:max(16px, env(safe-area-inset-left));font-size:11px;transform:none}body.touch-mode .equip-info{right:auto;left:max(16px, env(safe-area-inset-left));bottom:max(14px, env(safe-area-inset-bottom));font-size:12px}body.touch-mode .mode-label{display:none}body.touch-mode .hotbar{left:50%;right:auto;bottom:max(8px, env(safe-area-inset-bottom))}body.touch-mode .slot{width:46px;height:46px}body.touch-mode .slot svg{width:30px;height:30px}body.touch-mode .toasts{top:22%}@media (max-width:700px){.inv-body,.help .cols,.start .cols{grid-template-columns:1fr}.slot{width:44px;height:44px}.slot svg{width:28px;height:28px}}.start .compact{display:none}@media (max-height:460px){.start .cols{display:none}.start .compact{color:var(--ui-muted);margin:8px 0 14px;font-size:14px;display:block}.start h1{font-size:26px}.start-card{padding:12px 10px}.start .cols{gap:10px;padding:8px 10px}.start table td{padding:2px 4px;font-size:12px}.t-buttons{transform-origin:100% 100%;transform:scale(.85)}body.touch-mode .hearts .heart svg{width:24px;height:22px}}