:root{--panel-bg: rgba(16, 18, 24, .82);--panel-border: rgba(255, 255, 255, .12);--panel-radius: 10px;--text: #e8e6e0;--text-dim: #9a978f;--accent: #d8a03c;--accent-dim: #8a6a2c;--danger: #d04a3a;--health: #3fae4a;--mana: #3a6fd0;--xp: #8a5fd0;--cast: #d8a03c;--q-poor: #9d9d9d;--q-common: #ffffff;--q-uncommon: #1eff00;--q-rare: #0070dd;--q-epic: #a335ee;font-family:Segoe UI,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0b0d12;color:var(--text);font-size:14px}#render-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;outline:none;touch-action:none}#app{position:absolute;inset:0;pointer-events:none}#app>*{pointer-events:auto}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--panel-radius);backdrop-filter:blur(6px)}button{font:inherit;color:var(--text);background:#ffffff14;border:1px solid var(--panel-border);border-radius:6px;padding:7px 14px;cursor:pointer}button:hover:not(:disabled){background:#ffffff29;border-color:#ffffff4d}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent-dim);border-color:var(--accent)}button.primary:hover:not(:disabled){background:var(--accent);color:#14100a}input,select{font:inherit;color:var(--text);background:#00000059;border:1px solid var(--panel-border);border-radius:6px;padding:7px 10px;outline:none}input:focus{border-color:var(--accent)}.error-text{color:#ff7a6a;min-height:18px;font-size:13px}.logo{position:absolute;top:10px;left:14px;font-weight:700;font-size:18px;letter-spacing:1px;color:var(--accent);text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none;z-index:40}.panel-title{font-size:15px;font-weight:600;padding:10px 14px;border-bottom:1px solid var(--panel-border);display:flex;align-items:center;justify-content:space-between}.panel-close{background:none;border:none;color:var(--text-dim);font-size:15px;padding:0 4px;line-height:1}.panel-close:hover{color:var(--text);background:none}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(90,70,30,.25),transparent 60%),linear-gradient(#0d1018,#090b10)}.menu-card{width:360px;padding:26px 30px;display:flex;flex-direction:column;gap:12px}.menu-card h1{margin:0 0 4px;font-size:24px;text-align:center;color:var(--accent);letter-spacing:.5px}.menu-card label{font-size:12px;color:var(--text-dim);display:flex;flex-direction:column;gap:4px}.menu-row{display:flex;gap:10px}.menu-row>*{flex:1}.lang-row{display:flex;justify-content:center;gap:8px;margin-top:4px}.lang-row button{padding:3px 10px;font-size:12px}.lang-row button.active{border-color:var(--accent);color:var(--accent)}.char-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto}.char-entry{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border:1px solid var(--panel-border);border-radius:8px;cursor:pointer}.char-entry:hover,.char-entry.selected{border-color:var(--accent);background:#d8a03c14}.char-entry .char-name{font-weight:600}.char-entry .char-meta{color:var(--text-dim);font-size:12px}.realm-line{text-align:center;color:var(--text-dim);font-size:12px}.screen-banner{position:absolute;top:18px;left:50%;transform:translate(-50%);padding:8px 18px;border-radius:8px;background:#78281ed9;border:1px solid var(--danger);z-index:50}.hud{position:absolute;inset:0;pointer-events:none;overflow:hidden}.hud>*{pointer-events:auto}.unit-frame{position:absolute;top:14px;width:230px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}.unit-frame.player-frame{left:14px}.unit-frame.target-frame{left:260px}.unit-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.unit-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.unit-level{font-size:12px;color:var(--accent);flex:none}.bar{position:relative;height:14px;border-radius:4px;background:#00000080;border:1px solid rgba(255,255,255,.08);overflow:hidden}.bar-fill{position:absolute;inset:0;transform-origin:left;border-radius:3px}.bar-fill.health{background:linear-gradient(#5ac765,var(--health))}.bar-fill.mana{background:linear-gradient(#5b8ce8,var(--mana))}.bar-fill.cast{background:linear-gradient(#e8bd6a,var(--cast))}.bar-fill.xp{background:linear-gradient(#a37fe8,var(--xp))}.bar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;text-shadow:0 1px 2px #000;pointer-events:none}.bar.slim{height:8px}.target-cast{margin-top:2px}.cast-bar{position:absolute;left:50%;bottom:170px;transform:translate(-50%);width:280px;padding:6px 8px}.cast-bar .bar{height:16px}.cast-bar .cast-name{font-size:12px;text-align:center;margin-bottom:3px}.cast-bar.interrupted .bar-fill.cast{background:var(--danger)}.xp-bar-wrap{position:absolute;left:50%;bottom:6px;transform:translate(-50%);width:min(720px,70vw);display:flex;align-items:center;gap:8px}.xp-bar-wrap .bar{flex:1;height:8px}.level-badge{min-width:28px;height:28px;border-radius:50%;background:var(--panel-bg);border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}.action-bar{position:absolute;left:50%;bottom:22px;transform:translate(-50%);display:flex;gap:6px;padding:6px}.action-slot{position:relative;width:46px;height:46px;border-radius:8px;border:1px solid var(--panel-border);background:#00000073;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 2px #000;overflow:hidden;user-select:none}.action-slot:hover{border-color:#fff6}.action-slot.active{border-color:var(--danger);box-shadow:0 0 8px #d04a3ab3}.action-slot .slot-key{position:absolute;top:1px;right:3px;font-size:9px;font-weight:400;color:var(--text-dim)}.action-slot .slot-cd{position:absolute;inset:0;pointer-events:none}.action-slot .slot-cd-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#ffd76a;pointer-events:none}.nameplate{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;text-shadow:0 1px 2px #000;white-space:nowrap;z-index:5}.nameplate .np-name{font-size:12px;font-weight:600}.nameplate .np-hp{width:70px;height:5px;border-radius:2px;background:#0009;overflow:hidden}.nameplate .np-hp-fill{height:100%;background:var(--health);transform-origin:left}.nameplate .np-quest{font-size:16px;font-weight:800;line-height:1}.nameplate.targeted .np-name{font-size:14px;color:#fff}.float-text{position:absolute;transform:translate(-50%,-100%);font-weight:700;font-size:16px;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none;animation:float-up 1.2s ease-out forwards;z-index:6}.float-text.crit{font-size:26px;color:#fc3}.float-text.heal{color:#4ae05a}.float-text.miss{color:#cfcfcf;font-style:italic;font-weight:400}@keyframes float-up{0%{opacity:1;margin-top:0}80%{opacity:1}to{opacity:0;margin-top:-60px}}.toast-area{position:absolute;left:50%;bottom:240px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.toast{padding:5px 14px;border-radius:6px;background:#000000a6;border:1px solid var(--panel-border);animation:toast-fade 2.6s ease-out forwards}.toast.error{border-color:var(--danger);color:#ff9a8a}.toast.xp{color:#c9a7ff}.toast.levelup{color:var(--accent);font-weight:700}@keyframes toast-fade{0%{opacity:0;transform:translateY(8px)}8%{opacity:1;transform:translateY(0)}80%{opacity:1}to{opacity:0}}.chat-box{position:absolute;left:14px;bottom:14px;width:340px;display:flex;flex-direction:column;gap:4px}.chat-log{max-height:160px;overflow-y:auto;padding:8px 10px;font-size:13px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}.chat-line.system{color:#ffd76a}.chat-line .chat-from{color:#8ab4ff;font-weight:600}.chat-input{width:100%;display:none}.chat-box.open .chat-input{display:block}.quest-log{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:420px;max-height:70vh;display:flex;flex-direction:column}.quest-log-body{overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:12px}.quest-entry{display:flex;flex-direction:column;gap:4px;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:10px}.quest-entry:last-child{border-bottom:none}.quest-title{font-weight:600;color:var(--accent);display:flex;justify-content:space-between;align-items:center;gap:8px}.quest-title .quest-level{color:var(--text-dim);font-size:12px;font-weight:400}.quest-objective{font-size:13px;color:var(--text-dim);padding-left:10px}.quest-objective.done{color:var(--health)}.quest-desc{font-size:13px;color:var(--text-dim);font-style:italic}.quest-abandon{align-self:flex-end;font-size:12px;padding:3px 10px}.quest-tracker{position:absolute;top:14px;right:14px;width:240px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:13px}.quest-tracker:empty{display:none}.quest-tracker .qt-title{font-weight:600;color:var(--accent);font-size:13px}.quest-tracker .qt-obj{color:var(--text-dim);padding-left:8px;font-size:12px}.quest-tracker .qt-obj.done{color:var(--health)}.gossip-window{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:400px;max-height:70vh;display:flex;flex-direction:column}.gossip-body{overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}.gossip-text{font-size:14px;line-height:1.5;color:var(--text);white-space:pre-wrap}.gossip-option,.gossip-quest{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;border:1px solid transparent;cursor:pointer}.gossip-option:hover,.gossip-quest:hover{border-color:var(--panel-border);background:#ffffff0f}.gossip-icon{font-weight:800;width:16px;text-align:center;flex:none}.gossip-icon.offer,.gossip-icon.turnIn{color:#ffd200}.gossip-icon.turnInIncomplete{color:#9d9d9d}.gossip-icon.chat{color:var(--text-dim)}.gossip-actions{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid var(--panel-border)}.loot-window{position:absolute;left:55%;top:45%;width:260px;display:flex;flex-direction:column}.loot-body{padding:8px 10px;display:flex;flex-direction:column;gap:4px}.loot-entry{display:flex;justify-content:space-between;gap:8px;padding:5px 8px;border-radius:6px;border:1px solid var(--panel-border);cursor:pointer;background:#0000004d}.loot-entry:hover{border-color:#ffffff59}.loot-money{color:#ffd76a;font-size:13px;padding:2px 8px}.loot-actions{padding:8px 10px;display:flex;justify-content:flex-end}.quality-poor{color:var(--q-poor)}.quality-common{color:var(--q-common)}.quality-uncommon{color:var(--q-uncommon)}.quality-rare{color:var(--q-rare)}.quality-epic{color:var(--q-epic)}.inventory-panel{position:absolute;right:14px;bottom:60px;width:300px;display:flex;flex-direction:column}.inv-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:10px}.inv-slot{position:relative;aspect-ratio:1;border-radius:6px;border:1px solid var(--panel-border);background:#0006;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;overflow:hidden}.inv-slot .inv-count{position:absolute;bottom:1px;right:3px;font-size:10px;color:#fff;text-shadow:0 1px 2px #000}.inv-money{padding:6px 12px 10px;text-align:right;color:#ffd76a;font-size:13px}.death-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#3c050573;z-index:30;pointer-events:none}.death-overlay .death-text{font-size:30px;font-weight:700;color:#ff8a7a;text-shadow:0 2px 8px #000}.hidden{display:none}