:root{--bg:#0d0b0e;--panel:#16121a;--panel-border:#c8922a59;--gold:#c8922a;--gold-dim:#8a6620;--text:#d6cdbf;--text-dim:#8f8779;--hp:#a1271f;--mana:#2b4f8f;--danger:#b3402f}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);width:100%;height:100%;color:var(--text);font-family:Segoe UI,Noto Sans,system-ui,sans-serif;font-size:14px;overflow:hidden}#game{width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui>*{pointer-events:auto}.screen{background:radial-gradient(at 50% 35%,#c8922a0f,#0000 60%),linear-gradient(#0d0b0e 0%,#0a0a10 60%,#07070b 100%);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:4px;width:min(360px,92vw);padding:32px 28px 28px;box-shadow:0 0 60px #000c,inset 0 0 24px #0006}.game-title{letter-spacing:.35em;text-indent:.35em;text-align:center;color:var(--gold);text-shadow:0 0 18px #c8922a59;font-family:Georgia,Times New Roman,serif;font-size:42px;font-weight:400}.game-subtitle{text-align:center;color:var(--text-dim);letter-spacing:.15em;margin-top:4px;margin-bottom:22px;font-size:12px}.tabs{border-bottom:1px solid #c8922a33;margin-bottom:18px;display:flex}.tabs button{color:var(--text-dim);font:inherit;letter-spacing:.06em;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:9px 0;transition:color .15s,border-color .15s}.tabs button:hover{color:var(--text)}.tabs button.active{color:var(--gold);border-bottom-color:var(--gold)}.tabs button:focus-visible{outline:1px solid var(--gold-dim);outline-offset:-2px}.panel form{flex-direction:column;gap:12px;display:flex}[hidden]{display:none!important}.panel input{color:var(--text);font:inherit;background:#0c0a0f;border:1px solid #2b2430;border-radius:3px;padding:9px 10px}.panel input:focus{border-color:var(--gold-dim);outline:none}.panel button[type=submit]{border:1px solid var(--gold-dim);color:var(--gold);font:inherit;letter-spacing:.1em;cursor:pointer;background:linear-gradient(#2a2115 0%,#1c1710 100%);border-radius:3px;margin-top:6px;padding:10px 0}.panel button[type=submit]:hover{border-color:var(--gold);color:#e5b04a}.panel button[disabled]{opacity:.5;cursor:wait}.form-error{color:#d98373;background:#b3402f1f;border:1px solid #b3402f80;border-radius:3px;margin-top:12px;padding:8px 10px;font-size:13px}.loading-text{text-align:center;color:var(--text-dim);letter-spacing:.12em;margin-top:18px;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.45}50%{opacity:1}}.center-note{text-align:center}.center-note button{border:1px solid var(--gold-dim);color:var(--gold);font:inherit;cursor:pointer;background:linear-gradient(#2a2115 0%,#1c1710 100%);border-radius:3px;margin-top:16px;padding:9px 26px}#hud{pointer-events:none;position:absolute;inset:0}.hud-topleft{flex-direction:column;gap:6px;width:220px;display:flex;position:absolute;top:12px;left:12px}.bar{border:1px solid var(--panel-border);background:#0a080cbf;border-radius:2px;height:18px;position:relative;overflow:hidden}.bar .fill{transform-origin:0;transition:transform .25s ease-out;position:absolute;inset:0}.bar.hp .fill{background:linear-gradient(180deg, #c23a2c 0%, var(--hp) 100%)}.bar.mana .fill{background:linear-gradient(180deg, #3c6ac0 0%, var(--mana) 100%)}.bar .label{text-align:center;color:#f0e8dc;text-shadow:0 1px 2px #000000e6;font-size:11px;line-height:18px;display:block;position:relative}.hud-gold{border:1px solid var(--panel-border);color:var(--gold);letter-spacing:.05em;background:#0a080cbf;border-radius:2px;align-self:flex-start;padding:3px 8px;font-size:12px}.hud-topright{text-align:right;color:var(--text-dim);font-size:12px;position:absolute;top:12px;right:12px}.hud-topright .online{color:var(--gold)}.hud-players{background:#0a080c99;border:1px solid #c8922a33;border-radius:2px;width:150px;max-height:40vh;padding:6px 8px;font-size:12px;position:absolute;top:64px;right:12px;overflow:hidden}.hud-players .caption{color:var(--text-dim);letter-spacing:.08em;margin-bottom:4px;font-size:11px}.hud-players ul{list-style:none}.hud-players li{color:var(--text);white-space:nowrap;text-overflow:ellipsis;padding:1px 0;overflow:hidden}.hud-chat{pointer-events:auto;flex-direction:column;gap:4px;width:min(380px,60vw);display:flex;position:absolute;bottom:12px;left:12px}.chat-log{scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;background:#0a080c8c;border:1px solid #c8922a2e;border-radius:2px;max-height:180px;padding:6px 8px;font-size:13px;overflow-y:auto}.chat-log .msg{overflow-wrap:anywhere;padding:1px 0}.chat-log .msg .who{color:var(--gold)}.chat-log .msg.system{color:var(--text-dim);font-style:italic}.chat-input{width:100%;color:var(--text);font:inherit;background:#0a080cbf;border:1px solid #2b2430;border-radius:2px;padding:7px 9px;font-size:13px}.chat-input:focus{border-color:var(--gold-dim);outline:none}.chat-input::placeholder{color:#5c554b}