:root{--paper:#f8f1e1;--ink:#4a3628;--ink-soft:#7d6552;--accent:#b5372d;--shadow:0 6px 18px #3c28142e;font-family:Hiragino Maru Gothic ProN,Yu Gothic,PingFang TC,Noto Sans TC,system-ui,sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;background:#d4e9f0;margin:0;overflow:hidden}#app canvas{touch-action:none;cursor:grab;display:block}#app canvas:active{cursor:grabbing}.env{flex:none;width:26px;height:20px}.env rect{fill:var(--paper);stroke:var(--ink);stroke-width:1.6px}.env path{fill:none;stroke:var(--accent);stroke-width:1.6px;stroke-linejoin:round}#hud{top:calc(16px + env(safe-area-inset-top,0px));left:calc(16px + env(safe-area-inset-left,0px));pointer-events:none;position:fixed}.card{background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);border-radius:14px;align-items:center;gap:12px;padding:10px 16px 10px 12px;font-size:15px;font-weight:600;display:flex;transform:rotate(-1deg)}#hud{justify-items:start;gap:10px;display:grid}.card.mini{padding:7px 12px;font-size:13px;transform:rotate(.6deg)}#hp{align-items:center;gap:8px;display:flex}.hp-bar{border:2px solid var(--ink);background:#fffaf0;border-radius:7px;width:120px;height:11px;overflow:hidden}.hp-bar i{background:#5aa14a;width:100%;height:100%;transition:width .25s,background-color .25s;display:block}#hp.mid .hp-bar i{background:#e0a030}#hp.low .hp-bar i{background:#d6322b}#hp.low{animation:.9s ease-in-out infinite throb}@keyframes throb{50%{transform:rotate(.6deg)scale(1.05)}}#hp-num{text-align:right;font-variant-numeric:tabular-nums;min-width:2ch}#hurt{pointer-events:none;opacity:0;background:radial-gradient(#d6322b00 45%,#d6322b8c 100%);position:fixed;inset:0}#hurt.flash{animation:.55s ease-out hurt}body.lowhp #hurt{opacity:.4}@keyframes hurt{0%{opacity:var(--hurt,.9)}to{opacity:0}}#dead{z-index:3;background:#7814108c;place-items:center;transition:opacity .5s;display:grid;position:fixed;inset:0}#dead.hidden{opacity:0;pointer-events:none}#dead .box{background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);text-align:center;border-radius:18px;justify-items:center;gap:10px;padding:22px 30px;display:grid}#dead h2{color:var(--accent);margin:0;font-size:26px}#dead p{color:var(--ink-soft);margin:0}#relogin{font:inherit;color:var(--paper);background:var(--accent);border:2px solid var(--ink);cursor:pointer;border-radius:12px;padding:10px 22px;font-size:17px;font-weight:700}.card.mini.hidden{display:none}.card .sub{color:var(--ink-soft);margin-top:2px;font-size:12px;font-weight:500}#prompt{left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);cursor:pointer;border-radius:999px;align-items:center;gap:10px;padding:10px 18px 10px 10px;font-size:16px;font-weight:600;animation:1.6s ease-in-out infinite bob;display:flex;position:fixed;transform:translate(-50%)}#prompt kbd{width:28px;height:28px;font:inherit;color:var(--paper);background:var(--accent);border-radius:50%;place-items:center;font-size:14px;display:inline-grid}@keyframes bob{50%{transform:translate(-50%)translateY(-4px)}}#toast{background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);pointer-events:none;border-radius:12px;padding:12px 22px;font-size:18px;font-weight:700;transition:opacity .3s,transform .3s;position:fixed;top:18%;left:50%;transform:translate(-50%)}#toast.hidden,#prompt.hidden{opacity:0;pointer-events:none}#toast.hidden{transform:translate(-50%)translateY(-8px)}#help{left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));color:var(--ink);white-space:nowrap;pointer-events:none;background:#f8f1e1c7;border-radius:999px;padding:6px 14px;font-size:12px;position:fixed;transform:translate(-50%)}#jump{right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(70px + env(safe-area-inset-bottom,0px));width:68px;height:68px;font:inherit;color:var(--paper);background:var(--accent);border:3px solid var(--ink);box-shadow:var(--shadow);touch-action:none;border-radius:50%;font-size:20px;font-weight:700;display:none;position:fixed}#jump:active{transform:scale(.92)}#gun{right:calc(30px + env(safe-area-inset-right,0px));bottom:calc(150px + env(safe-area-inset-bottom,0px));width:52px;height:52px;font:inherit;color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);touch-action:none;border-radius:50%;font-size:17px;font-weight:700;display:none;position:fixed}body.armed #gun{color:var(--paper);background:var(--ink)}#stick{--rest-x:92px;--rest-y:calc(min(52vh, 320px) - 104px);width:min(44vw,300px);height:min(52vh,320px);padding-bottom:env(safe-area-inset-bottom,0px);touch-action:none;display:none;position:fixed;bottom:0;left:0}#stick .base,#stick .knob{pointer-events:none;border-radius:50%;position:absolute;top:0;left:0}#stick .base{width:116px;height:116px;box-shadow:var(--shadow);transform:translate(var(--rest-x), var(--rest-y));background:#f8f1e147;border:3px solid #4a36288c;margin:-58px 0 0 -58px}#stick .knob{background:var(--paper);border:3px solid var(--ink);width:52px;height:52px;box-shadow:var(--shadow);transform:translate(var(--rest-x), var(--rest-y));margin:-26px 0 0 -26px}#stick:not(.active) .base{opacity:.75}#prompt{z-index:2}#help .touch{display:none}@media (pointer:coarse){#jump,#gun,#stick{display:block}#help{top:calc(92px + env(safe-area-inset-top,0px));bottom:auto}#help .keys{display:none}#help .touch{display:inline}}#crosshair{pointer-events:none;width:26px;height:26px;margin:-13px 0 0 -13px;transition:opacity .15s;position:fixed;top:50%;left:50%}#crosshair.hidden{opacity:0}#crosshair i,#crosshair b{background:var(--ink);border-radius:2px;position:absolute;box-shadow:0 0 0 1.5px #f8f1e1d9}#crosshair i{width:3px;height:7px;left:11.5px}#crosshair i:first-child{top:0}#crosshair i:nth-child(2){bottom:0}#crosshair i:nth-child(3),#crosshair i:nth-child(4){width:7px;height:3px;top:11.5px;left:auto}#crosshair i:nth-child(3){left:0}#crosshair i:nth-child(4){right:0}#crosshair b{background:var(--accent);border-radius:50%;width:4px;height:4px;top:11px;left:11px}body.armed #app canvas,body.armed #app canvas:active{cursor:none}#fps{color:var(--ink);font:11px ui-monospace,monospace;position:fixed;top:12px;right:12px}#loading{letter-spacing:.1em;background:#f8f1e1;place-content:center;justify-items:center;gap:10px;font-size:14px;transition:opacity .6s;display:grid;position:fixed;inset:0}#loading .env{width:48px;height:36px;animation:1.2s ease-in-out infinite bob2}@keyframes bob2{50%{transform:translateY(-6px)rotate(-4deg)}}#login{letter-spacing:0;justify-items:stretch;gap:10px;width:min(300px,100vw - 48px);margin-top:14px;display:grid}#login label{color:var(--ink-soft);text-align:center;font-size:13px;font-weight:600}#nick{font:inherit;text-align:center;color:var(--ink);border:2px solid var(--ink);-webkit-user-select:text;user-select:text;background:#fffaf0;border-radius:12px;outline:none;padding:10px 12px;font-size:18px;font-weight:600}#nick:focus{box-shadow:0 0 0 3px #b5372d47}#enter{font:inherit;color:var(--paper);background:var(--accent);border:2px solid var(--ink);box-shadow:var(--shadow);cursor:pointer;border-radius:12px;padding:10px 12px;font-size:17px;font-weight:700}#enter:disabled{opacity:.55;cursor:wait}#solo{font:inherit;color:var(--ink-soft);cursor:pointer;background:0 0;border:none;padding:4px;font-size:13px;text-decoration:underline}#loading.done{opacity:0;pointer-events:none}@media (width<=600px){#help{white-space:normal;text-align:center;width:calc(100% - 32px)}#prompt{bottom:110px}}