:root{--font: "Press Start 2P", "Courier New", monospace;--panel: rgba(12, 12, 24, .78);--accent: #ffe66d}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0b0b14;color:#fff;font-family:var(--font);-webkit-font-smoothing:none;user-select:none;touch-action:none}canvas#game,canvas#ui{position:fixed;inset:0;display:block;width:100vw;height:100vh}canvas#game{cursor:crosshair;image-rendering:pixelated;image-rendering:crisp-edges}canvas#ui{pointer-events:none}#hud{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));display:flex;gap:12px;font-size:11px;background:var(--panel);padding:8px 12px;border:2px solid #2a2a44}#ping{color:#9cf}#hint{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));font-size:11px;color:#aab;background:var(--panel);padding:8px 12px;border:2px solid #2a2a44;max-width:40vw}#chat{position:fixed;left:calc(10px + env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100vw - 20px));display:flex;flex-direction:column;gap:6px}#chat-log{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:hidden;font-size:11px;line-height:1.5;opacity:.85;transition:opacity .2s}#chat-log div{background:var(--panel);padding:5px 8px;border-left:3px solid var(--accent);word-break:break-word}#chat-log b{color:var(--accent)}#chat-log .sys{color:#9ab;border-left-color:#567}#chat-input{font:inherit;font-size:12px;color:#fff;background:var(--panel);border:2px solid #2a2a44;padding:12px;outline:none;width:100%;display:none;min-height:44px}#chat.open #chat-input{display:block}#chat.open #chat-log{opacity:1}#join{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1f2a44,#0b0b14 70%)}#join.hidden{display:none}#join-form{display:flex;gap:28px;align-items:stretch;max-height:92vh}#join .panel{display:flex;flex-direction:column;align-items:center;gap:16px;background:var(--panel);border:3px solid #3a3a5c;padding:28px 32px;width:min(340px,92vw);box-shadow:0 0 0 4px #0b0b14,0 0 0 7px #3a3a5c;overflow-y:auto}#join h1{font-size:18px;margin:0;color:var(--accent);text-align:center;line-height:1.4}#join h2{font-size:13px;margin:0;color:var(--accent);text-align:center}#join .sub{font-size:11px;color:#9ab;margin:-10px 0 0}#preview{width:144px;height:216px;background:#1a2a1a;border:2px solid #2a2a44;image-rendering:pixelated}@media (max-width: 760px){#join-form{flex-direction:column;align-items:center;gap:22px;overflow-y:auto;padding:8px 0}#join .panel{overflow:visible;flex:none}}#join .row{display:flex;gap:8px;width:100%}#join input{flex:1;font:inherit;font-size:11px;padding:10px;color:#fff;background:#0b0b14;border:2px solid #3a3a5c;outline:none;min-width:0}#join input:focus{border-color:var(--accent)}#join button{font:inherit;font-size:11px;padding:10px 14px;cursor:pointer;color:#0b0b14;background:var(--accent);border:2px solid #c9b24a;border-bottom-width:4px}#join button:active{border-bottom-width:2px;transform:translateY(2px)}#join button#shuffle{background:#3b7dd8;border-color:#2a5ea8;color:#fff}#join button#enter{width:100%}#bodies,#classes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}#bodies button,#classes button{font-size:11px;padding:12px;min-height:44px;background:#1a1a2e;color:#cfd;border:2px solid #3a3a5c;border-bottom-width:3px}#bodies button.active,#classes button.active{background:var(--c);color:#fff;border-color:#fff}#join-status{font-size:11px;color:#f88;min-height:1em;margin:0;text-align:center}#status{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}#hpbar,#hungerbar{position:relative;width:240px;height:16px;background:#1a1a2e;border:2px solid #3a3a5c}#hungerbar{height:12px}#hungerfill{height:100%;width:100%;background:linear-gradient(#f6c36a,#d98c2b);transition:width .3s}#hungerbar.hungry #hungerfill{background:linear-gradient(#ff8a8a,#c9302c)}#hungertext{position:absolute;inset:0;font-size:11px;line-height:12px;text-align:center;color:#fff;text-shadow:0 0 3px #000}#inv span.usable{pointer-events:auto;cursor:pointer}#inv span.usable:hover b{color:#fff}#hpfill{height:100%;width:100%;background:linear-gradient(#7be07b,#3fa34d);transition:width .15s}#hptext{position:absolute;inset:0;font-size:11px;line-height:16px;text-align:center;color:#fff;text-shadow:0 0 3px #000}#inv{display:flex;gap:12px;font-size:11px;background:var(--panel);padding:8px 12px;border:2px solid #2a2a44}#inv span{display:inline-flex;align-items:center;gap:4px;min-height:24px}@media (pointer: coarse){#inv span{min-height:48px;min-width:48px;justify-content:center}#inv{gap:12px}}#inv b{color:var(--accent)}#inv span.bump{animation:bump .3s}@keyframes bump{50%{transform:scale(1.3)}}#bodies{flex-direction:column;align-items:stretch;width:100%;gap:6px}#bodies button.mode{width:100%}#bodies .part{display:flex;align-items:center;gap:8px;font-size:11px}#bodies .row{display:flex;gap:6px}#bodies .row button{flex:1}#bodies .part span{flex:1;color:#9ab}#bodies .part b{min-width:28px;text-align:center;color:var(--accent)}#bodies .part button{min-width:44px;padding:8px}#mysprite{display:flex;flex-direction:column;gap:6px;width:100%}#mysprite .row{display:flex;gap:6px}#mysprite .row button{flex:1}#mysprite .use{font-size:11px;color:#9ab;display:flex;align-items:center;gap:6px}#mysprite .google{display:flex;justify-content:center;min-height:0}#mysprite .note{font-size:10px;color:#9ab;margin:0;text-align:center;min-height:1em}