:root{--ink:#f3e9d2;--bg:#1b2b2e;--panel:rgba(20,28,32,.78);--line:#caa45a}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#2b5f6e;color:var(--ink);font:14px/1.3 system-ui,sans-serif;overflow:hidden;touch-action:none}
#game{position:fixed;inset:0}canvas{image-rendering:pixelated;display:block}
.panel{position:fixed;left:12px;top:12px;min-width:190px;padding:8px 10px;background:var(--panel);border:2px solid var(--line);border-radius:8px}
.bar{position:relative;height:14px;margin-top:6px;background:#0008;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;width:100%;background:#c4453b}
.bar span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:14px}
#online{position:fixed;right:12px;top:12px;padding:4px 8px;background:var(--panel);border-radius:6px;font-size:12px}
#chat{position:fixed;left:12px;bottom:12px;width:min(340px,60vw);pointer-events:none}#log{max-height:140px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font-size:12px;text-shadow:0 1px 2px #000}
#log div{padding:1px 0}#chatIn{pointer-events:auto;width:100%;margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:5px 8px;display:none}
#stick,#atkBtn{display:none}.touch #stick{display:block;position:fixed;left:24px;bottom:24px;width:120px;height:120px;border-radius:50%;background:#0003;border:2px solid #fff4}.touch #stick i{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#fff6}
.touch #atkBtn{display:block;position:fixed;right:28px;bottom:36px;width:84px;height:84px;border-radius:50%;border:2px solid var(--line);background:var(--panel);color:var(--ink);font-size:34px}.touch #chat{bottom:160px}
#join{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(#2b5f6eee,#10262cf2)}.card{width:min(340px,90vw);padding:22px;background:var(--bg);border:2px solid var(--line);border-radius:12px;text-align:center}
.card h1{margin:0;letter-spacing:.15em}.card input,.card button{width:100%;margin-top:12px;padding:10px;border-radius:8px;border:2px solid var(--line);font-size:16px}.card input{background:#0008;color:var(--ink)}.card button{background:var(--line);color:#2b1d08;font-weight:700}#err{color:#ff8a7a;min-height:1em}small{opacity:.7}
[hidden]{display:none!important}

.skills{display:flex;gap:12px;margin-top:6px;font-size:12px}.skills b{color:#ffe28a}
#cls{display:flex;gap:6px;margin-top:12px}#cls button{margin:0;flex:1;padding:8px;background:#0008;color:var(--ink);font-weight:600}#cls button.on{background:var(--line);color:#2b1d08}

#tabs{display:flex;gap:6px;margin-top:12px}#tabs button{margin:0;flex:1;padding:8px;background:#0008;color:var(--ink);font-weight:600}#tabs button.on{background:var(--line);color:#2b1d08}
#err{color:#ff8a7a;min-height:1.2em;margin:10px 0 0}#clsInfo{display:block;margin-top:8px;opacity:.8}
#gainNote{font-size:11px;color:#9be39b;margin-top:4px;min-height:14px}.skills{flex-wrap:wrap;gap:4px 12px}