:root{--night: #14120d;--panel: #1f1a12;--panel-2: #2a2318;--brass: #8a6d3b;--brass-hi: #d8b365;--parchment: #e6d9b8;--muted: #9a8d70;--hp: #a8322a;--mana: #2f5d9e;--xp: #7a8f3a;--danger: #c0392b;--font-display: "IM Fell English SC", serif;--font-body: "Alegreya Sans", system-ui, sans-serif}*{box-sizing:border-box;margin:0}html,body{height:100%;overflow:hidden;background:var(--night)}body{font-family:var(--font-body);color:var(--parchment)}#game-root{position:fixed;top:0;right:0;bottom:0;left:0}#game-root canvas{display:block}#ui-root{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#ui-root>*{pointer-events:auto}.panel{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--brass);border-radius:3px;box-shadow:0 4px 18px #0009,inset 0 0 0 1px #d8b36514;position:relative;padding:10px}.panel:before,.panel:after{content:"";position:absolute;width:9px;height:9px;border:2px solid var(--brass-hi);pointer-events:none}.panel:before{top:-2px;left:-2px;border-right:0;border-bottom:0}.panel:after{bottom:-2px;right:-2px;border-left:0;border-top:0}h3{font-family:var(--font-display);font-weight:400;letter-spacing:.04em;color:var(--brass-hi);margin-bottom:8px;font-size:17px}h3 small{color:var(--muted);font-family:var(--font-body);font-size:11px}button{font-family:var(--font-body);cursor:pointer}.login-veil{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,#241f14 0%,var(--night) 70%)}.login-panel{width:min(420px,92vw);display:flex;flex-direction:column;gap:10px;padding:26px}.title{font-family:var(--font-display);font-weight:400;font-size:34px;text-align:center;color:var(--brass-hi);line-height:1.05}.subtitle{text-align:center;color:var(--muted);font-size:13px;margin-top:-6px}.login-tabs{display:flex;gap:6px;margin-top:6px}.tab{flex:1;padding:7px;background:none;border:1px solid var(--brass);color:var(--muted);border-radius:2px}.tab.on{background:var(--brass);color:var(--night);font-weight:700}.login-panel input,.chat input{background:#12100b;border:1px solid var(--brass);color:var(--parchment);padding:9px 10px;border-radius:2px;font-size:14px;font-family:var(--font-body)}.login-panel input:focus,.chat input:focus{outline:1px solid var(--brass-hi)}.class-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.class-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--panel);border:1px solid var(--brass);color:var(--parchment);padding:8px;border-radius:2px;text-align:left}.class-card small{color:var(--muted);font-size:11px;line-height:1.25}.class-card.on{border-color:var(--brass-hi);background:#2e2618;box-shadow:inset 0 0 0 1px var(--brass-hi)}.class-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.cta{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#1a1409;border:0;padding:11px;font-weight:700;font-size:15px;border-radius:2px;letter-spacing:.02em}.cta:disabled{opacity:.45;cursor:default}.err{color:#e08d84;font-size:13px}.hint{color:var(--muted);font-size:11px;text-align:center;line-height:1.5}.connecting{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--muted);font-family:var(--font-display);font-size:20px}.bar{position:relative;height:17px;background:#0d0b07;border:1px solid #3c321f;border-radius:2px;overflow:hidden;margin-top:4px}.bar-fill{height:100%;transition:width .18s ease}.bar.hp .bar-fill{background:linear-gradient(180deg,#c14a40,var(--hp))}.bar.mana .bar-fill{background:linear-gradient(180deg,#4a7ac0,var(--mana))}.bar.xp{height:11px}.bar.xp .bar-fill{background:var(--xp)}.bar-text{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:10px;color:#f2ead6;text-shadow:0 1px 2px #000}.top-left{position:absolute;top:12px;left:12px;width:250px}.char-line{display:flex;align-items:baseline;gap:8px}.char-name{font-size:15px}.char-class,.char-line small{color:var(--muted);font-size:11px}.seal{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 4px;background:radial-gradient(circle at 35% 30%,#c14a40,#7c221c 75%);border:1px solid #d8b365;border-radius:50%;font-family:var(--font-display);font-size:13px;color:#f6e8c8;align-self:center}.target-frame{position:absolute;top:12px;left:50%;transform:translate(-50%);width:230px}.buff-icons{display:flex;gap:4px;margin-top:4px;font-size:13px}.buff-row{position:absolute;top:132px;left:12px;display:flex;gap:5px}.buff{background:var(--panel);border:1px solid var(--brass);border-radius:2px;display:flex;flex-direction:column;align-items:center;padding:3px 5px;min-width:30px}.buff.debuff{border-color:var(--danger)}.buff small{font-size:9px;color:var(--muted)}.action-bar{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;gap:6px;padding:8px}.skill{position:relative;width:48px;height:48px;background:#171310;border:1px solid var(--brass);border-radius:2px;color:var(--parchment)}.skill:hover{border-color:var(--brass-hi)}.skill-icon{font-size:21px}.skill-key{position:absolute;top:1px;left:3px;font-size:9px;color:var(--muted)}.skill.cd:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0000009e}.skill-cd{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:13px;color:#fff;z-index:1}.skill.oom .skill-icon{filter:grayscale(1);opacity:.5}.side-panel{position:absolute;right:12px;width:252px}.inv-panel{top:12px}.char-panel{top:12px;right:274px}.equip-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}.eq-slot{aspect-ratio:1;background:#171310;border:1px solid var(--brass);border-radius:2px;color:var(--parchment);font-size:11px;display:grid;place-items:center}.eq-slot small{color:#5c5240}.inv-grid{display:grid;gap:4px}.inv-slot{position:relative;aspect-ratio:1;background:#171310;border:1px solid #4a3c22;border-radius:2px}.inv-slot:hover{border-color:var(--brass-hi)}.item-abbr{font-size:13px;font-weight:700}.qty{position:absolute;bottom:1px;right:3px;font-size:10px;color:var(--parchment);text-shadow:0 1px 2px #000}.inv-footer{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--muted)}.attr-alert{background:#3a3013;border:1px solid var(--brass-hi);color:var(--brass-hi);font-size:12px;padding:5px 8px;border-radius:2px;margin-bottom:6px}.attr-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.attr-row{display:flex;align-items:center;gap:8px;font-size:13px}.attr-row span{flex:1;color:var(--muted)}.plus{width:22px;height:22px;background:var(--brass);border:0;border-radius:2px;color:var(--night);font-weight:700}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;border-top:1px solid #3c321f;padding-top:8px}.stat-row{display:flex;justify-content:space-between;font-size:11.5px}.stat-row span{color:var(--muted)}.passives{margin-top:8px;border-top:1px solid #3c321f;padding-top:6px}.passive{font-size:11.5px;color:var(--muted)}.chat{position:absolute;bottom:14px;left:12px;width:330px;display:flex;flex-direction:column;gap:6px}.chat-log{height:128px;overflow-y:auto;font-size:12.5px;line-height:1.45;scrollbar-width:thin;scrollbar-color:var(--brass) transparent}.chat-line.system{color:#b5cf6b}.chat-line.global{color:#d8a13a}.chat-line.local{color:var(--parchment)}.chat-line b{color:var(--brass-hi);font-weight:500}.toast{position:absolute;top:70px;left:50%;transform:translate(-50%);background:#33150f;border:1px solid var(--danger);color:#ecc;padding:7px 16px;border-radius:2px;font-size:13px}.level-flash{position:absolute;top:30%;left:50%;transform:translate(-50%);font-family:var(--font-display);font-size:44px;color:var(--brass-hi);text-shadow:0 0 24px rgba(216,179,101,.5),0 2px 4px #000;animation:rise 3s ease forwards;pointer-events:none}@keyframes rise{0%{opacity:0;translate:0 20px}15%{opacity:1;translate:0 0}80%{opacity:1}to{opacity:0}}.death-veil{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0a0404b8}.death-panel{width:300px;text-align:center;padding:24px;display:flex;flex-direction:column;gap:10px}.death-panel h2{font-family:var(--font-display);font-weight:400;color:var(--danger);font-size:30px}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:900px){.char-panel{right:12px;top:300px}.chat{width:260px}}.npc-veil{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a09068c;display:flex;align-items:center;justify-content:center;z-index:60}.npc-panel{width:380px;max-height:70vh;display:flex;flex-direction:column}.npc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.npc-head h3{margin:0}.npc-head .x{background:none;border:1px solid #8a6d3b;color:#e6d9b8;border-radius:4px;cursor:pointer;padding:2px 8px}.shop-gold{font-size:13px;margin:4px 0 8px;color:#d8b365}.shop-list{overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px}.shop-row{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#e6d9b80d;border-radius:4px;font-size:13px}.shop-row span{flex:1}.shop-row small{color:#9a8a6a}.mini{background:#2a2417;border:1px solid #8a6d3b;color:#e6d9b8;border-radius:4px;padding:3px 9px;cursor:pointer;font-size:12px;white-space:nowrap}.mini:hover:not(:disabled){background:#3a3222}.mini:disabled{opacity:.4;cursor:default}.cta-mini{background:#4a3a15;border-color:#d8b365;color:#f5e6a0}.quest-row{display:flex;align-items:center;gap:8px;padding:7px 8px;background:#e6d9b80d;border-radius:4px}.quest-row.done{opacity:.55}.quest-main{flex:1;display:flex;flex-direction:column;gap:2px}.quest-main small{color:#9a8a6a;font-size:11px}.quest-reward{color:#b5cf6b!important}.quest-count{font-size:12px;color:#d8b365;white-space:nowrap}.zone-flash{position:fixed;top:18%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;background:#14120dd9;border:1px solid #8a6d3b;border-radius:8px;padding:12px 28px;z-index:55;pointer-events:none;animation:zoneIn 3.5s ease forwards}.zone-flash b{font-size:20px;color:#f5e6a0;font-family:Alegreya,serif;letter-spacing:1px}.zone-flash small{color:#b5a37a;font-size:12px}@keyframes zoneIn{0%{opacity:0;transform:translate(-50%) translateY(-12px)}12%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1}to{opacity:0}}