*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#111;color:#eee;font-family:monospace}canvas{display:block;width:100%;height:100%;background:#1a1a2e}#tos-panel,#login-panel,#server-panel,#char-panel{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(10, 10, 20, 0.82);backdrop-filter:blur(6px);transition:opacity .4s ease}#tos-panel[hidden],#login-panel[hidden],#server-panel[hidden],#char-panel[hidden]{display:none}#tos-panel.hide,#login-panel.hide,#server-panel.hide,#char-panel.hide{opacity:0;pointer-events:none}#tos-panel h2,#login-panel h2,#server-panel h2,#char-panel h2{letter-spacing:6px;color:#8af;margin-bottom:8px;font-size:1.4rem}#tos-text{width:320px;background:#1c1c2e;border:1px solid #445;border-radius:4px;padding:14px 16px;font-size:.85rem;color:#aaa;line-height:1.7}#tos-text ul{padding-left:18px;margin-top:8px}#tos-text li{margin-bottom:4px}#login-panel input{width:260px;padding:9px 12px;background:#1c1c2e;border:1px solid #445;color:#eee;border-radius:4px;font-family:monospace;font-size:.95rem;outline:none}#login-panel input:focus{border-color:#8af}#status{width:260px;text-align:center;font-size:.8rem;color:#fa8;min-height:1.2em}#btn-accept-tos,#btn-login{width:260px;padding:9px;background:#8af;color:#111;border:none;border-radius:4px;cursor:pointer;font-weight:bold;font-family:monospace;font-size:.95rem;letter-spacing:1px}#btn-accept-tos{width:320px}#btn-accept-tos:hover,#btn-login:hover{background:#adf}#server-list{display:flex;flex-direction:column;gap:8px;min-width:300px}.server-entry{display:flex;align-items:center;justify-content:space-between;background:#1c1c2e;border:1px solid #445;border-radius:4px;padding:10px 14px;cursor:pointer;transition:border-color .15s}.server-entry:hover{border-color:#8af}.server-name{font-size:.95rem;color:#eee}.server-load{font-size:.75rem;color:#667}#server-status{width:300px;text-align:center;font-size:.8rem;color:#fa8;min-height:1.2em}#char-list{display:flex;flex-direction:column;gap:8px;min-width:300px}.char-entry{display:flex;align-items:center;justify-content:space-between;background:#1c1c2e;border:1px solid #445;border-radius:4px;padding:10px 14px;cursor:pointer;transition:border-color .15s}.char-entry:hover{border-color:#8af}.char-name{font-size:.95rem;color:#eee}.char-meta{font-size:.75rem;color:#667}#char-create-form{display:flex;flex-direction:column;gap:8px;width:300px}#char-create-form[hidden]{display:none}#char-name{width:100%;padding:9px 12px;background:#1c1c2e;border:1px solid #445;color:#eee;border-radius:4px;font-family:monospace;font-size:.95rem;outline:none}#char-name:focus{border-color:#8af}#btn-create-char,#btn-new-char{width:100%;padding:9px;background:#8af;color:#111;border:none;border-radius:4px;cursor:pointer;font-weight:bold;font-family:monospace;font-size:.95rem}#btn-new-char{background:transparent;border:1px solid #445;color:#8af;width:300px}#btn-create-char:hover{background:#adf}#btn-new-char:hover{border-color:#8af;background:#1a2035}#btn-new-char[hidden]{display:none}#char-status{width:300px;text-align:center;font-size:.8rem;color:#fa8;min-height:1.2em}#hud{position:fixed;bottom:10px;right:14px;font-size:.72rem;color:#555;pointer-events:none}#chat-bar{position:fixed;bottom:0;left:0;right:0;padding:6px 10px;background:rgba(10, 10, 20, 0.72);backdrop-filter:blur(4px)}#chat-input{width:100%;padding:6px 10px;background:transparent;border:none;border-top:1px solid #334;color:#eee;font-family:monospace;font-size:.88rem;outline:none}#npc-dialog{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);width:360px;background:rgba(10, 10, 20, 0.92);border:1px solid #445;border-radius:6px;padding:16px;backdrop-filter:blur(6px)}#npc-dialog h3{color:#f0a080;margin-bottom:10px;font-size:1rem;letter-spacing:2px}#npc-dialog-body p{color:#ccc;font-size:.88rem;line-height:1.6;margin-bottom:4px}#npc-dialog-close{margin-top:12px;padding:6px 16px;background:#334;border:1px solid #556;color:#aaa;border-radius:4px;cursor:pointer;font-family:monospace;font-size:.82rem}#npc-dialog-close:hover{background:#445;color:#eee}#travel-panel{position:fixed;bottom:240px;left:50%;transform:translateX(-50%);width:360px;background:rgba(10, 8, 0, 0.93);border:1px solid #654;border-radius:6px;padding:16px;backdrop-filter:blur(6px);z-index:200}#travel-panel h3{color:#f0c060;margin:0 0 12px;font-size:1rem;letter-spacing:2px}#travel-dest-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}#travel-dest-list button{width:100%;padding:7px 14px;background:#2a1e00;border:1px solid #6a4a10;border-radius:4px;color:#e8c060;cursor:pointer;font-family:monospace;font-size:.88rem;text-align:left}#travel-dest-list button:hover{background:#3a2c08;border-color:#c09030}#travel-panel-close{margin-top:4px;padding:5px 14px;background:#221800;border:1px solid #554;color:#875;border-radius:4px;cursor:pointer;font-family:monospace;font-size:.82rem}#travel-panel-close:hover{background:#320;color:#bba}#quest-panel{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background:rgba(10, 10, 20, 0.92);border:1px solid #446;border-radius:6px;padding:18px 22px;min-width:260px;max-width:380px;color:#ccd;font-family:monospace;z-index:200}#quest-panel h3{margin:0 0 6px;color:#adf;font-size:1rem}#quest-panel p{margin:0 0 8px;font-size:.84rem;color:#99b}#quest-panel ul{margin:0 0 10px;padding-left:18px;font-size:.82rem}.quest-offer+.quest-offer{border-top:1px solid #334;margin-top:12px;padding-top:12px}#quest-panel button{background:#223;border:1px solid #446;border-radius:4px;color:#adf;cursor:pointer;font-family:monospace;font-size:.82rem;padding:4px 12px}#quest-panel button:hover{background:#334}.quest-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.quest-panel-close{background:transparent;border:none;color:#667;cursor:pointer;font-family:monospace;font-size:.8rem}.quest-panel-close:hover{color:#aaa;background:transparent}.quest-abandon{background:transparent;border:1px solid #644;border-radius:4px;color:#a66;cursor:pointer;font-family:monospace;font-size:.75rem;padding:2px 8px;margin-top:4px;pointer-events:auto}.quest-abandon:hover{background:#311;color:#f88}#quest-log{position:fixed;top:12px;right:12px;background:rgba(10, 10, 20, 0.72);border:1px solid #334;border-radius:5px;padding:10px 14px;min-width:180px;max-width:260px;color:#ccd;font-family:monospace;font-size:.8rem;pointer-events:none}#quest-log button{pointer-events:auto}.quest-active{margin-bottom:8px}.quest-active strong{color:#adf;display:block;margin-bottom:4px}.quest-active ul{margin:0;padding-left:16px}.quest-notice{position:fixed;top:16px;left:16px;background:rgba(10, 30, 10, 0.88);border:1px solid #4a6;border-radius:5px;color:#8f8;font-family:monospace;font-size:.9rem;padding:8px 18px;pointer-events:none;animation:fadeout 3s forwards}@keyframes fadeout{0%{opacity:1}70%{opacity:1}100%{opacity:0}}#inventory-panel,#skills-panel,#friends-panel{position:fixed;right:12px;background:rgba(10, 10, 20, 0.35);border:1px solid rgba(68, 68, 102, 0.5);border-radius:6px;padding:14px;width:260px;color:#ccd;font-family:monospace;z-index:200;opacity:.25;backdrop-filter:blur(2px);transition:background .2s ease,border-color .2s ease,opacity .2s ease,backdrop-filter .2s ease}#inventory-panel:hover,#skills-panel:hover,#friends-panel:hover{background:rgba(10, 10, 20, 0.92);border-color:#446;opacity:1;backdrop-filter:blur(6px)}#inventory-panel{bottom:180px}#skills-panel{bottom:576px}.inv-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.9rem;color:#adf;letter-spacing:2px}.inv-header button{background:transparent;border:none;color:#667;cursor:pointer;font-size:.9rem}.inv-header button:hover{color:#aaa}#inventory-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:6px}#skills-filters{display:flex;gap:4px;margin-bottom:8px}.skill-filter{flex:1;background:transparent;border:1px solid #334;border-radius:4px;color:#778;font-family:monospace;font-size:.65rem;letter-spacing:1px;padding:3px 0;cursor:pointer;transition:color .15s,border-color .15s}.skill-filter:hover{color:#aad;border-color:#446}.skill-filter.active{color:#adf;border-color:#446;background:rgba(80, 120, 200, 0.15)}#skills-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:6px}.inv-slot{background:#111827;border:1px solid #334;border-radius:4px;padding:6px;min-height:60px;display:flex;flex-direction:column;gap:3px;font-size:.72rem}.inv-item-name{color:#ccd;font-size:.7rem;line-height:1.2}.inv-item-qty{color:#778;font-size:.68rem}.inv-use{margin-top:auto;padding:2px 6px;background:#223;border:1px solid #48a;border-radius:3px;color:#8af;cursor:pointer;font-family:monospace;font-size:.68rem}.inv-use:hover{background:#334}.inv-drop{padding:2px 6px;background:transparent;border:1px solid #644;border-radius:3px;color:#a66;cursor:pointer;font-family:monospace;font-size:.68rem}.inv-drop:hover{background:#311;color:#f88}.drop-qty-overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:300}.drop-qty-dialog{background:#0d1117;border:1px solid #644;border-radius:6px;padding:18px 24px;display:flex;flex-direction:column;gap:10px;font-family:monospace;color:#ccd;min-width:200px}.drop-qty-dialog p{font-size:.85rem;color:#aaa}.drop-qty-input{width:100%;padding:5px 8px;background:#1c1c2e;border:1px solid #644;border-radius:4px;color:#eee;font-family:monospace;font-size:.9rem;outline:none;text-align:center}.drop-qty-input:focus{border-color:#a66}.drop-qty-actions{display:flex;gap:8px;justify-content:flex-end}.drop-qty-cancel{padding:4px 12px;background:transparent;border:1px solid #445;border-radius:4px;color:#667;cursor:pointer;font-family:monospace;font-size:.78rem}.drop-qty-cancel:hover{color:#aaa;border-color:#667}.inv-slot--skill{border-color:#64a;background:#0d0a1a;box-shadow:0 0 6px rgba(140, 80, 255, 0.2)}.inv-skill-badge{font-size:.58rem;letter-spacing:1.5px;color:#96f;font-weight:bold;line-height:1}.inv-skill-categories{font-size:.58rem;color:#556;letter-spacing:.5px}.inv-activate{margin-top:auto;padding:2px 6px;background:#1a0d33;border:1px solid #74c;border-radius:3px;color:#b8f;cursor:pointer;font-family:monospace;font-size:.68rem}.inv-activate:hover{background:#2a1055;border-color:#a6f;color:#daf}#fade-overlay{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:9999;transition:opacity .4s ease}#fade-overlay.fade-in{opacity:1;pointer-events:all}#friends-panel{bottom:772px;width:220px}.friends-row{display:flex;align-items:center;gap:8px;padding:4px 2px;border-bottom:1px solid #1a1a2a}.friends-dot{width:8px;height:8px;border-radius:50%;background:#444;flex-shrink:0}.friends-dot--online{background:#4f8}.friends-name{flex:1}.friends-empty{color:#556;padding:8px 2px}.friends-group-invite-btn{background:none;border:none;color:#4f8;cursor:pointer;font-size:1rem;padding:0 2px;opacity:.7}.friends-group-invite-btn:hover{opacity:1}#group-hud{position:fixed;left:12px;top:50%;transform:translateY(-50%);background:rgba(10, 10, 20, 0.35);border:1px solid rgba(68, 68, 102, 0.5);border-radius:6px;padding:14px;width:180px;color:#ccd;font-family:monospace;z-index:200;opacity:.25;backdrop-filter:blur(2px);transition:background .2s ease,border-color .2s ease,opacity .2s ease,backdrop-filter .2s ease}#group-hud:hover{background:rgba(10, 10, 20, 0.92);border-color:#446;opacity:1;backdrop-filter:blur(6px)}.group-sep{border:none;border-top:1px solid #223;margin:8px 0}.group-controls{display:flex;gap:4px}.group-ctrl-btn{background:transparent;border:1px solid #334;border-radius:3px;color:#adf;cursor:pointer;font-size:.8rem;padding:1px 4px;line-height:1.4;transition:border-color .15s,color .15s}.group-ctrl-btn:hover{border-color:#adf}.group-ctrl-btn--off{color:#556;border-color:#223}.group-member-row{display:flex;align-items:center;gap:6px;padding:4px 2px;border-radius:3px;border:1px solid transparent;transition:border-color .15s,background .15s}.group-member-row--speaking{border-color:#4f8;background:rgba(68, 255, 136, 0.06)}.group-voice-icon{font-size:.8rem;flex-shrink:0;width:18px;text-align:center}.group-member-name{font-size:.8rem;color:#aac;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-member-name--self{color:#adf}.group-leave-btn{width:100%;background:transparent;border:1px solid #443;color:#776;border-radius:3px;padding:3px 0;cursor:pointer;font-family:monospace;font-size:.75rem;transition:border-color .15s,color .15s}.group-leave-btn:hover{border-color:#c44;color:#c44}.friend-request-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;pointer-events:none}.friend-request-box{background:#0d0d1a;border:1px solid #445;border-radius:8px;padding:20px 28px;display:flex;flex-direction:column;gap:12px;align-items:center;pointer-events:all;color:#ccd;font-family:monospace;font-size:.85rem;min-width:260px}.friend-request-box button{padding:6px 20px;border-radius:4px;border:1px solid #445;background:#111;color:#aab;cursor:pointer;font-family:monospace;font-size:.8rem}.friend-request-box button:hover{background:#1a1a2e;border-color:#667;color:#dde}.invite-timer{width:100%;height:3px;background:#222;border-radius:2px;overflow:hidden}.invite-timer-bar{height:100%;width:100%;background:#667;border-radius:2px;transform-origin:left;animation:invite-timer-shrink 30s linear forwards}@keyframes invite-timer-shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}.friend-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#121;border:1px solid #4f8;color:#4f8;padding:8px 18px;border-radius:6px;font-family:monospace;font-size:.8rem;z-index:500;animation:toast-fade 3s ease forwards}@keyframes toast-fade{0%{opacity:1}70%{opacity:1}100%{opacity:0}}#skill-hud{position:fixed;bottom:48px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:200;pointer-events:none}#skill-hud[hidden]{display:none}.skill-hud-slot[hidden]{display:none}.skill-hud-slot{display:flex;flex-direction:column;align-items:center;gap:4px}.skill-hud-icon{position:relative;width:40px;height:40px;border:1px solid #334;border-radius:4px;background:#0d0d1a;overflow:hidden}.skill-hud-slot.active .skill-hud-icon{border-color:#556;box-shadow:0 0 6px rgba(255, 255, 255, 0.08)}.skill-hud-bar{position:absolute;bottom:0;left:0;width:100%;height:100%;transform-origin:bottom;transform:scaleY(0);transition:transform .1s linear;opacity:.6}