:root{--bg:#0f0d0b;--panel:#120f0ce6;--panel-solid:#1a1612;--border:#d4a93659;--border-soft:#ffffff1f;--text:#f3ead8;--muted:#f3ead899;--gold:#e0b94a;--accent:#8a5a2b;--accent-hover:#a8733a;--hp:#c93a3a;--mp:#3a78d4;--xp:#c99a2e;--success:#79d48c;--error:#ff7a7a}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0;font-family:Segoe UI,Arial,sans-serif}body{background:radial-gradient(ellipse at top, #8a5a2b40, transparent 60%), var(--bg)}h1,h2,h3{color:var(--gold);font-family:Georgia,Times New Roman,serif;font-weight:400}kbd{border:1px solid var(--border);min-width:1.4em;color:var(--gold);text-align:center;background:#0006;border-radius:4px;padding:0 4px;font:600 .75rem/1.4 Segoe UI,Arial,sans-serif;display:inline-block}.muted{color:var(--muted)}.small{font-size:.85rem}.gold{color:var(--gold)}.button{color:#fff4dc;font:inherit;cursor:pointer;background:linear-gradient(#9a6a35,#7a4f24);border:1px solid #e0b94a80;border-radius:6px;padding:8px 14px;text-decoration:none;display:inline-block}.button:hover:not(:disabled){background:linear-gradient(#b07a3e,#8a5a2b)}.button:disabled{opacity:.45;cursor:not-allowed}.small-button{padding:4px 9px;font-size:.8rem}.link-button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-size:.9em;text-decoration:underline}.link-button:hover{color:var(--text)}.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:18px}.form{flex-direction:column;gap:14px;display:flex}.field{border:0;flex-direction:column;gap:6px;margin:0;padding:0;display:flex}.field legend{margin-bottom:6px;padding:0}input:not([type=radio]){border:1px solid var(--border-soft);color:var(--text);font:inherit;background:#ffffff0f;border-radius:6px;padding:10px 12px}input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.choice:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}.color-choice:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}.error{color:var(--error);margin:0}.page{max-width:820px;margin:0 auto;padding:32px 16px 48px}.page-center{flex-direction:column;justify-content:center;max-width:420px;min-height:100vh;display:flex}.hero h1{margin:0 0 8px;font-size:2.6rem}.hero p{margin:0 0 24px;line-height:1.5}.tabs{background:#ffffff0d;border-radius:8px;gap:4px;margin-bottom:18px;padding:4px;display:flex}.tab{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:1;padding:8px}.tab.active{background:var(--accent);color:#fff4dc}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.page-header h1{margin:0}.account{align-items:center;gap:12px;display:flex}.character-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.character-card{align-items:center;gap:14px;padding:14px;display:flex}.character-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.swatch{border:2px solid #ffffff59;border-radius:50%;flex-shrink:0;width:28px;height:28px;display:inline-block}.class-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;display:grid}.choice{border:1px solid var(--border-soft);cursor:pointer;border-radius:8px;gap:10px;padding:12px;display:flex}.choice:has(input:checked){border-color:var(--gold);background:#e0b94a1a}.choice-body{flex-direction:column;gap:4px;display:flex}.skill-preview{margin:4px 0 0;padding:0;font-size:.82rem;line-height:1.6;list-style:none}.color-row{flex-wrap:wrap;gap:12px;display:flex}.color-choice input{opacity:0;position:absolute}.color-choice .swatch{cursor:pointer;width:34px;height:34px}.color-choice input:checked+.swatch{box-shadow:0 0 0 3px var(--gold);border-color:#fff}.game-root{-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}.game-canvas{width:100%;height:100%}.hud{pointer-events:none;font-size:.92rem;position:fixed;inset:0}.panel{background:var(--panel);border:1px solid var(--border);pointer-events:auto;border-radius:10px;box-shadow:0 6px 24px #00000059}.panel-title{color:var(--gold);margin-bottom:6px;font-family:Georgia,serif}.bar{background:#0000008c;border-radius:4px;height:14px;margin:3px 0;position:relative;overflow:hidden}.bar-fill{height:100%;transition:width .25s ease-out}.bar-hp .bar-fill,.bar-target .bar-fill{background:linear-gradient(#e05252, var(--hp))}.bar-mp .bar-fill{background:linear-gradient(#5a95ea, var(--mp))}.bar-xp{height:8px}.bar-xp .bar-fill{background:linear-gradient(#e6bd52, var(--xp))}.bar-label{text-align:center;text-shadow:0 1px 2px #000;font-size:.7rem;line-height:14px;position:absolute;inset:0}.bar-xp .bar-label{display:none}.bar-xp:hover .bar-label{font-size:.6rem;line-height:8px;display:block}.player-frame{gap:12px;width:300px;padding:12px;display:flex;position:absolute;top:14px;left:14px}.portrait{border:2px solid var(--gold);background:radial-gradient(#3a2e22,#15110d);border-radius:50%;flex-shrink:0;place-items:center;width:54px;height:54px;font-size:1.6rem;display:grid;position:relative}.portrait-level{border:1px solid var(--gold);min-width:22px;color:var(--gold);text-align:center;background:#15110d;border-radius:10px;padding:1px 4px;font-size:.75rem;position:absolute;bottom:-6px;right:-6px}.player-frame-body{flex:1;min-width:0}.player-name{white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-weight:600;overflow:hidden}.buffs{gap:4px;margin-top:6px;display:flex}.buff{border:1px solid var(--gold);background:#00000080;border-radius:5px;place-items:center;width:26px;height:26px;display:grid;position:relative;overflow:hidden}.buff-timer{background:var(--gold);transform-origin:0;width:100%;height:3px;animation-name:shrink;animation-timing-function:linear;animation-fill-mode:forwards;position:absolute;bottom:0;left:0}@keyframes shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.target-frame{width:300px;margin-left:-150px;padding:10px 12px;position:absolute;top:14px;left:50%}.target-frame.boss{border-color:#ff5b5b}.target-name{text-align:center;margin-bottom:4px;font-weight:600}.boss-tag{color:#ffd0d0;background:#8a1f1f;border-radius:4px;margin-left:6px;padding:0 5px;font-size:.7rem}.hud-right{flex-direction:column;align-items:flex-end;gap:10px;width:240px;display:flex;position:absolute;top:14px;right:14px}.minimap{pointer-events:auto;flex-direction:column;align-items:center;display:flex}.minimap canvas{border-radius:50%;width:180px;height:180px;box-shadow:0 6px 24px #00000080}.minimap-caption{background:#0009;border-radius:10px;gap:10px;margin-top:4px;padding:2px 10px;font-size:.8rem;display:flex}.quest-tracker{width:100%;padding:10px 12px}.tracked-quest+.tracked-quest{margin-top:8px}.tracked-name{font-weight:600}.quest-done{color:var(--success)}.bottom-center{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.interact-hint{border:1px solid var(--border);background:var(--panel);border-radius:20px;padding:6px 14px}.action-bar{border:1px solid var(--border);background:var(--panel);pointer-events:auto;border-radius:10px;gap:6px;padding:8px;display:flex}.action-separator{background:var(--border);width:1px;margin:4px}.action-slot{width:52px;height:52px;color:var(--text);cursor:pointer;background:radial-gradient(#2e261d,#15110d);border:1px solid #e0b94a8c;border-radius:7px;place-items:center;padding:0;display:grid;position:relative;overflow:hidden}.action-slot:hover{border-color:var(--gold)}.action-slot.locked,.action-slot.empty{opacity:.45}.action-slot.no-mana .action-icon{filter:grayscale()brightness(.6)}.action-icon{font-size:1.5rem}.action-key{color:var(--gold);font-size:.7rem;font-weight:700;position:absolute;top:2px;left:4px}.action-mana,.action-count,.action-lock{text-shadow:0 1px 2px #000;font-size:.65rem;font-weight:700;position:absolute;bottom:2px;right:4px}.action-mana{color:#8fbaff}.cooldown{transform-origin:bottom;background:#000000b3;animation-name:cooldown;animation-timing-function:linear;animation-fill-mode:forwards;position:absolute;inset:0}@keyframes cooldown{0%{transform:scaleY(1)}to{transform:scaleY(0)}}.menu-buttons{pointer-events:auto;gap:6px;display:flex}.menu-button{border:1px solid var(--border);background:var(--panel);color:var(--text);font:inherit;cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:4px 10px;font-size:.8rem;text-decoration:none;display:inline-flex}.menu-button:hover{border-color:var(--gold)}.chat{pointer-events:auto;width:340px;position:absolute;bottom:14px;left:14px}.chat-log{text-shadow:0 1px 2px #000;background:linear-gradient(#0000,#0000008c 25%);border-radius:8px 8px 0 0;max-height:160px;padding:6px 8px;font-size:.82rem;line-height:1.4;overflow-y:auto}.chat-line strong{color:#9fe0ff}.chat-line.system{color:var(--gold);font-style:italic}.chat-input{width:100%;background:#0009!important;border-radius:0 0 8px 8px!important;font-size:.85rem!important}.toasts{flex-direction:column;align-items:center;gap:6px;width:min(620px,100% - 32px);display:flex;position:absolute;top:90px;left:50%;transform:translate(-50%)}.toast{text-align:center;text-shadow:0 1px 2px #000;background:#000000bf;border-radius:8px;padding:7px 14px;animation:.2s ease-out toast-in}.toast-loot{color:#ffe9a8}.toast-quest{color:var(--success);border:1px solid #79d48c66}.toast-error{color:var(--error)}.toast-level{border:1px solid var(--gold);color:var(--gold);padding:10px 22px;font-family:Georgia,serif;font-size:1.25rem}@keyframes toast-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.zone-banner{text-align:center;text-shadow:0 2px 8px #000;animation:3.2s ease-out forwards banner;position:absolute;top:28%;left:0;right:0}.zone-title{color:var(--gold);font-family:Georgia,serif;font-size:2.4rem}.zone-subtitle{color:var(--text);font-size:1rem}@keyframes banner{0%{opacity:0;transform:translateY(10px)}15%{opacity:1;transform:none}75%{opacity:1}to{opacity:0}}.help{width:250px;padding:10px 12px;font-size:.78rem;position:absolute;bottom:14px;right:14px}.help dl{margin:0}.help dl div{justify-content:space-between;gap:8px;padding:2px 0;display:flex}.help dt{color:var(--gold);font-weight:600}.help dd{color:var(--muted);text-align:right;margin:0}.window-layer{pointer-events:none;place-items:center;padding:90px 16px 120px;display:grid;position:absolute;inset:0}.window{background:var(--panel-solid);flex-direction:column;width:min(680px,100%);max-height:100%;display:flex}.npc-window{width:min(760px,100%)}.quest-window{width:min(560px,100%)}.window-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-start;padding:12px 16px;display:flex}.window-header h2{margin:0;font-size:1.3rem}.window-close{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:1.1rem}.window-close:hover{color:var(--text)}.window-body{padding:12px 16px 16px;overflow-y:auto}.window-body h3{margin:10px 0 8px;font-size:1.05rem}.character-layout{grid-template-columns:1fr 1.3fr;gap:20px;display:grid}.equipment{flex-direction:column;gap:8px;display:flex}.equipment-row{align-items:center;gap:10px;display:flex}.slot{border:1px solid var(--border-soft);width:46px;height:46px;color:var(--text);cursor:pointer;background:#00000073;border-radius:6px;place-items:center;padding:0;font-size:1.4rem;display:grid;position:relative}.slot:hover:not(:disabled):not(.empty){background:#ffffff14}.slot:disabled,.slot.empty{cursor:default}.slot-qty{text-shadow:0 1px 2px #000;font-size:.7rem;font-weight:700;position:absolute;bottom:1px;right:3px}.bag{grid-template-columns:repeat(6,46px);gap:6px;margin-bottom:8px;display:grid}.stats{grid-template-columns:1fr auto;gap:4px 12px;margin:0;display:grid}.stats dd{text-align:right;margin:0;font-weight:600}.quest-entry{border:1px solid var(--border-soft);background:#ffffff08;border-radius:8px;margin-bottom:10px;padding:10px 12px}.quest-entry h3{margin:0 0 4px}.quest-entry p{margin:6px 0;line-height:1.45}.quest-entry .button{margin-top:8px}.rewards{margin-top:6px}.done-list{color:var(--muted);margin:0;padding-left:4px;list-style:none}.npc-greeting{margin-top:0;font-family:Georgia,serif;font-style:italic;line-height:1.5}.shop{grid-template-columns:1.2fr 1fr;gap:16px;display:grid}.shop-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.shop-row{background:#ffffff08;border-radius:6px;align-items:center;gap:8px;padding:5px 6px;display:flex}.shop-row.disabled{opacity:.45}.shop-icon{font-size:1.3rem}.shop-info{flex:1;min-width:0}.shop-buttons{gap:4px;display:flex}.tooltip{z-index:50;border:1px solid var(--border);pointer-events:none;background:#0c0a08f7;border-radius:8px;width:280px;padding:10px 12px;font-size:.82rem;line-height:1.45;position:fixed}.tooltip-name{font-size:.95rem;font-weight:700}.tooltip-stat{color:var(--success)}.tooltip-warning{color:var(--error)}.tooltip-price{color:var(--gold);margin-top:4px}.overlay{pointer-events:auto;background:#0000008c;place-items:center;display:grid;position:absolute;inset:0}.overlay.death{background:radial-gradient(#0000,#5a0000b3)}.overlay-card{border:1px solid var(--border);background:var(--panel-solid);text-align:center;border-radius:12px;padding:24px 32px}.overlay-card h2{margin-top:0}.overlay-actions{flex-direction:column;align-items:center;gap:10px;display:flex}@media (max-width:900px){.help,.quest-tracker{display:none}.chat{width:240px;bottom:150px}.target-frame{top:110px}}@media (max-width:640px){.player-frame{width:220px}.hud-right{width:auto}.minimap canvas{width:110px;height:110px}.action-slot{width:42px;height:42px}.menu-buttons kbd{display:none}.character-layout,.shop{grid-template-columns:1fr}.bag{grid-template-columns:repeat(6,40px)}}@media (prefers-reduced-motion:reduce){.bar-fill{transition:none}.toast,.zone-banner{animation:none}}