:root{--bg:#0f1218;--panel:#10141cd1;--border:#ffffff1f;--text:#e8ecf1;--muted:#9aa5b5;--accent:#4f8cff;--hp:#e04f5f;--exp:#f2b73f;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans Thai,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;overflow:hidden}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:12px}.screen{position:fixed;inset:0}#login{background:radial-gradient(circle at 30% 20%,#1d2a44,#0f1218 60%);place-items:center;display:grid}.card{border:1px solid var(--border);background:var(--panel);border-radius:14px;gap:12px;width:min(420px,92vw);padding:28px;display:grid}.card h1{margin:0;font-size:32px}.card label{gap:6px;font-size:14px;display:grid}input,button{font:inherit;color:inherit}input{border:1px solid var(--border);background:#ffffff0f;border-radius:8px;outline:none;padding:8px 10px}input:focus{border-color:var(--accent)}button{border:1px solid var(--border);cursor:pointer;background:#ffffff14;border-radius:8px;padding:9px 14px}button:hover{background:#ffffff24}button.primary{background:var(--accent);border-color:#0000}button.primary:hover{filter:brightness(1.1)}button.small{padding:5px 9px;font-size:12px}input.small{width:72px;padding:5px 8px;font-size:12px}#phaser{position:absolute;inset:0}#phaser canvas{display:block}.panel{background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:10px;padding:10px 12px;position:absolute}.hud-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.badge{background:#4f8cff40;border:1px solid #4f8cff80;border-radius:999px;padding:1px 8px;font-size:12px}#hud{gap:6px;width:260px;display:grid;top:12px;left:12px}.bar{background:#ffffff14;border-radius:6px;height:16px;position:relative;overflow:hidden}.bar>div{width:100%;height:100%;transition:width .2s}.bar.hp>div{background:var(--hp)}.bar.exp>div{background:var(--exp)}.bar span{text-align:center;text-shadow:0 1px 2px #000;font-size:11px;line-height:16px;position:absolute;inset:0}#party{gap:6px;width:250px;display:grid;top:12px;right:12px}.list{gap:2px;margin:0;padding:0;font-size:13px;list-style:none;display:grid}.list li{justify-content:space-between;display:flex}.list .leader:before{content:"👑 "}#chat{gap:6px;width:min(420px,60vw);display:grid;bottom:12px;left:12px}.tabs{gap:4px;display:flex}.tab{background:0 0;padding:3px 10px;font-size:12px}.tab.active{background:#4f8cff4d;border-color:#4f8cff99}.tab.unread{border-color:var(--exp);color:var(--exp)}#chat-log{align-content:end;gap:2px;height:150px;font-size:13px;display:grid;overflow-y:auto}.msg{align-items:baseline;gap:6px;display:flex}.msg .who{color:#9ec1ff;white-space:nowrap}.msg .me .who,.msg.me .who{color:#ffd479}.msg .text{word-break:break-word;flex:1}.msg .report{opacity:0;color:var(--muted);background:0 0;border:none;padding:0 5px;font-size:11px}.msg:hover .report{opacity:1}.msg.system{color:var(--muted);font-style:italic}#chat-form input{width:100%}#actions{gap:6px;display:flex;bottom:12px;right:12px}#toasts{pointer-events:none;gap:6px;display:grid;position:absolute;top:90px;left:50%;transform:translate(-50%)}.toast{border:1px solid var(--border);background:#141820e6;border-radius:8px;padding:8px 14px;font-size:14px;animation:4s forwards fade}.toast.warn{border-color:#f2b73f}.toast.error{border-color:var(--hp)}@keyframes fade{0%{opacity:0;transform:translateY(-6px)}10%{opacity:1;transform:none}80%{opacity:1}to{opacity:0}}