:root{--void:#06070b;--bg:#0b0d13;--panel:rgba(14,17,24,.82);--panel-solid:#0e1118;--panel-2:#151924;--raise:#1c2130;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);--gold:#c8a24c;--gold-hi:#eccf86;--ink:#e9ecf2;--ink-dim:#aab2c0;--muted:#7d869a;--hp:#c03529;--hp-hi:#e8563f;--mp:#2b7fd0;--mp-hi:#54a9ef;--xp:#c8a24c;--ok:#4fbf83;--warn:#e0b64a;--err:#e06060;--shadow:0 10px 30px rgba(0,0,0,.55);--radius:3px;--font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--void);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.45;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,h3,p{margin:0;font-weight:600}ul{margin:0;padding:0;list-style:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}input,select{font:inherit;color:inherit}img,svg{display:block}.is-hidden{display:none!important}.field-label,.panel-title,.stat-label,.vital-tag,.gs-label,.gs-title,.eyebrow{font-size:10px;line-height:1.2;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.stat-value,.vital-text,.gs-value,.roster-count,#fps-val,#menu-title,.char-name{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;z-index:0;touch-action:none}#ui-root{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10;user-select:none}#hud{position:absolute;inset:0;pointer-events:none}button,input,select,textarea,a,.login-screen,#login-screen,.char-frame,.status-cluster,.chat-panel,.roster-panel,#menu-overlay:not(.is-hidden){pointer-events:auto}.char-frame,.status-cluster,.chat-panel,.roster-panel,#vitals,.login-shell{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px #ffffff0f,var(--shadow);backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1.2rem;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#171105;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 8px 22px #c8a24c3d,inset 0 1px #fff6;transition:.18s ease}.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0);filter:brightness(.96)}.btn-primary:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none;box-shadow:none}.icon-btn{width:32px;height:32px;display:inline-grid;place-items:center;background:#0e1118c7;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink-dim);font-size:14px;line-height:1;box-shadow:inset 0 1px #ffffff0d;transition:.18s ease}.icon-btn:hover{color:var(--gold-hi);border-color:#c8a24c8c}.icon-btn:active{background:var(--raise)}.ghost-btn{padding:.3rem .45rem;background:none;border:none;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;border-radius:var(--radius);transition:.18s ease}.ghost-btn:hover{color:var(--ink);background:#ffffff0d}:is(.btn-primary,.icon-btn,.ghost-btn):focus-visible,.menu-tab:focus-visible,.class-card:focus-visible{outline:1px solid rgba(200,162,76,.8);outline-offset:2px}kbd{display:inline-block;min-width:22px;padding:.16rem .42rem;background:linear-gradient(180deg,var(--raise),var(--panel-2));border:1px solid var(--line-2);border-bottom-width:2px;border-radius:3px;color:var(--ink);font-family:inherit;font-size:11px;line-height:1.3;letter-spacing:.06em;text-align:center;text-transform:uppercase;box-shadow:inset 0 1px #ffffff0f}kbd+kbd{margin-left:.28rem}.text-input,input[type=text]{width:100%;padding:.6rem .7rem;background:#06070bb8;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-size:13px;letter-spacing:.02em;outline:none;transition:.18s ease}.text-input::placeholder{color:var(--muted)}.text-input:focus,input[type=text]:focus{border-color:#c8a24c99;box-shadow:0 0 0 2px #c8a24c29}input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:4px;background:var(--raise);border-radius:2px;outline:none;cursor:pointer;transition:.18s ease}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));border:1px solid rgba(0,0,0,.65);border-radius:50%;box-shadow:0 2px 6px #0000008c;transition:.18s ease}input[type=range]:hover::-webkit-slider-thumb{filter:brightness(1.1);transform:scale(1.08)}input[type=range]::-moz-range-track{height:4px;background:var(--raise);border-radius:2px}input[type=range]::-moz-range-progress{height:4px;background:var(--gold);border-radius:2px}input[type=range]::-moz-range-thumb{width:13px;height:13px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));border:1px solid rgba(0,0,0,.65);border-radius:50%;box-shadow:0 2px 6px #0000008c}select{padding:.32rem .5rem;background:var(--raise);border:1px solid var(--line-2);border-radius:var(--radius);color:var(--ink);font-size:12px;outline:none}input[type=checkbox]{width:15px;height:15px;accent-color:var(--gold);cursor:pointer}#login-screen{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:radial-gradient(120% 90% at 50% 0%,#141826 0%,rgba(6,7,11,.6) 55%,var(--void) 100%),var(--void)}.login-shell{width:min(420px,94vw);padding:1.9rem 1.7rem 1.6rem;display:flex;flex-direction:column;gap:1rem;background:linear-gradient(180deg,var(--panel-solid),#0b0e15);border-color:var(--line-2);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}.login-brand{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding-bottom:.4rem;border-bottom:1px solid var(--line);text-align:center}.login-mark{font-size:26px;line-height:1;color:var(--gold);text-shadow:0 0 18px rgba(200,162,76,.5)}.login-title{font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--ink)}.login-sub{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.24em;color:var(--gold)}.login-field{display:flex;flex-direction:column;gap:.45rem}.field-label{display:block}#class-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.class-card{display:flex;flex-direction:column;align-items:flex-start;gap:.22rem;padding:.66rem .7rem .6rem;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);text-align:left;transition:.18s ease}.class-card:hover{background:var(--raise);border-color:var(--line-2)}.class-card.is-selected{background:linear-gradient(180deg,#c8a24c2e,#c8a24c0d);border-color:#c8a24cb3;box-shadow:inset 0 0 0 1px #c8a24c38}.class-glyph{font-size:17px;line-height:1;color:var(--muted);transition:.18s ease}.class-card.is-selected .class-glyph{color:var(--gold-hi);text-shadow:0 0 12px rgba(236,207,134,.55)}.class-name{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim)}.class-card.is-selected .class-name{color:var(--ink)}.class-role{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}#play-btn{width:100%;margin-top:.15rem}.login-status{min-height:1.2em;font-size:11px;letter-spacing:.06em;text-align:center;color:var(--muted)}.login-status.is-ok{color:var(--ok)}.login-status.is-error{color:var(--err)}.char-frame{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:.6rem;padding:.45rem .85rem .45rem .45rem;transition:.18s ease}.char-glyph{width:34px;height:34px;display:grid;place-items:center;background:linear-gradient(180deg,#c8a24c29,#c8a24c0a);border:1px solid rgba(200,162,76,.5);border-radius:2px;color:var(--gold);font-size:16px;line-height:1}.char-meta{display:flex;flex-direction:column;gap:.14rem;min-width:0}.char-name{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.char-sub{display:flex;align-items:center;gap:.35rem;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}#char-level{color:var(--gold)}.char-sep{color:var(--line-2)}.status-cluster{position:absolute;top:14px;right:56px;display:flex;align-items:center;gap:.55rem;padding:.34rem .55rem}.status-cluster .stat{display:flex;align-items:baseline;gap:.3rem}.stat-divider{width:1px;height:12px;background:var(--line-2)}#fps-val{font-size:12px;color:var(--ink)}#conn-status{padding:.14rem .45rem;border:1px solid transparent;border-radius:2px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;transition:.18s ease}.conn-ok{color:var(--ok);border-color:#4fbf8373;background:#4fbf831a}.conn-err{color:var(--err);border-color:#e0606080;background:#e060601a}.conn-wait{color:var(--warn);border-color:#e0b64a73;background:#e0b64a1a}#menu-btn{position:absolute;top:14px;right:14px}#crosshair{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}#crosshair .ch{position:absolute;background:#e9ecf2b8}.ch-top{left:50%;top:0;width:1px;height:7px;margin-left:-.5px}.ch-bottom{left:50%;bottom:0;width:1px;height:7px;margin-left:-.5px}.ch-left{top:50%;left:0;height:1px;width:7px;margin-top:-.5px}.ch-right{top:50%;right:0;height:1px;width:7px;margin-top:-.5px}.ch-dot{left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--gold-hi)}#compass{position:absolute;top:14px;left:50%;transform:translate(-50%);width:min(520px,46vw);height:36px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}.compass-marker{position:absolute;left:50%;top:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(200,162,76,.15),var(--gold),rgba(200,162,76,.15));box-shadow:0 0 8px #c8a24cd9}.compass-marker:after{content:"";position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;background:var(--gold-hi);clip-path:polygon(0 0,100% 0,50% 100%)}#compass-strip{position:absolute;left:50%;top:0;width:0;height:100%;will-change:transform}.compass-seg{position:absolute;top:0;left:0;width:1080px;height:100%;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 1px,transparent 1px 135px),repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 45px);background-repeat:repeat-x;background-position:left top,left top;background-size:135px 14px,45px 8px}.compass-seg[data-off="-1080"]{left:-1080px}.compass-seg[data-off="1080"]{left:1080px}.c-card{position:absolute;top:16px;transform:translate(-50%);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--ink-dim);text-shadow:0 1px 3px rgba(0,0,0,.9)}.c-n{left:0;color:var(--gold)}.c-e{left:270px}.c-s{left:540px}.c-w{left:810px}#vitals{position:absolute;left:50%;bottom:16px;transform:translate(-50%);width:min(400px,74vw);padding:.55rem .8rem .6rem;display:flex;flex-direction:column;gap:.42rem;background:linear-gradient(180deg,#0e1118e6,#0a0c12e0);box-shadow:inset 0 1px #ffffff0f;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}.vital-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:.55rem}.vital-track{position:relative;height:10px;background:#ffffff0f;border:1px solid rgba(255,255,255,.05);border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 2px #0000008c}.vital-track-xp{height:4px;border-radius:2px}.vital-fill{height:100%;width:100%;border-radius:inherit;transition:width .25s ease}#xp-bar{width:0%}.fill-hp{background:linear-gradient(180deg,var(--hp-hi),var(--hp));box-shadow:inset 0 1px #ffffff47}.fill-mp{background:linear-gradient(180deg,var(--mp-hi),var(--mp));box-shadow:inset 0 1px #ffffff47}.fill-xp{background:linear-gradient(180deg,var(--gold-hi),var(--xp))}.vital-text{min-width:78px;font-size:12px;text-align:right;color:var(--ink);letter-spacing:.03em}.vital-text-xp{min-width:44px;color:var(--ink-dim)}@keyframes low-hp-pulse{0%,to{filter:brightness(1);box-shadow:0 0 #e8563f00}50%{filter:brightness(1.4);box-shadow:0 0 12px #e8563f99}}@keyframes low-hp-border{0%,to{border-color:#ffffff0d}50%{border-color:#e8563f8c}}#vitals.is-low-hp .fill-hp,#hp-bar.is-low{animation:low-hp-pulse 2.6s ease-in-out infinite}#vitals.is-low-hp .vital-row:first-child .vital-track{animation:low-hp-border 2.6s ease-in-out infinite}.chat-panel{position:absolute;left:14px;bottom:14px;width:min(340px,26vw);max-height:34vh;display:flex;flex-direction:column;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.34rem .45rem .34rem .6rem;border-bottom:1px solid var(--line);background:#ffffff05}.panel-title{color:var(--gold)}.panel-body{display:flex;flex-direction:column;gap:.4rem;min-height:0;padding:.5rem .55rem .55rem}#chat-log{display:flex;flex-direction:column;gap:.16rem;min-height:56px;max-height:20vh;overflow-y:auto;font-size:12px;line-height:1.5}.chat-line{color:var(--ink-dim);word-break:break-word}.chat-name{color:var(--gold);font-weight:600}.chat-text{color:var(--ink-dim)}.chat-line.is-system,#chat-log .msg-system{color:var(--muted);font-style:italic}#chat-log .msg-player{color:var(--ink-dim)}#chat-log .msg-name{color:var(--gold);font-weight:600}.chat-input-row{display:flex;align-items:center;gap:.35rem}#chat-input{flex:1;min-width:0;padding:.4rem .55rem;font-size:12px}#chat-send{width:28px;height:28px;flex-shrink:0;font-size:12px}.chat-panel.is-collapsed{width:auto;max-height:none}.chat-panel.is-collapsed .panel-body,.roster-panel.is-collapsed .panel-body,.panel-body.is-collapsed{display:none}.roster-panel{position:absolute;right:14px;bottom:14px;width:206px;display:flex;flex-direction:column;overflow:hidden}.roster-count{font-size:11px;color:var(--gold)}#roster-list{display:flex;flex-direction:column;gap:.22rem;max-height:190px;overflow-y:auto;font-size:12px}.roster-item,#roster-list li{display:flex;align-items:center;gap:.45rem;padding:.1rem 0;color:var(--ink-dim)}.roster-dot,.online-dot{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--ok);box-shadow:0 0 6px #4fbf83bf}.roster-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.roster-item.is-offline{color:var(--muted)}.roster-item.is-offline .roster-dot,.offline-dot{background:var(--muted);box-shadow:none}.menu-overlay{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center}.menu-overlay.is-hidden{display:none}.menu-backdrop{position:absolute;inset:0;background:radial-gradient(90% 75% at 50% 45%,#06070b80,#06070be6);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}.menu-shell{position:relative;width:min(1040px,92vw);height:min(680px,88vh);display:grid;grid-template-columns:220px 1fr;background:linear-gradient(160deg,var(--panel-2) 0%,var(--panel-solid) 55%,#0a0c12 100%);border:1px solid var(--line-2);border-radius:4px;box-shadow:0 30px 80px #000000b3,inset 0 1px #ffffff0f;overflow:hidden}.menu-rail{display:flex;flex-direction:column;gap:1.4rem;padding:1.3rem .9rem 1rem;border-right:1px solid var(--line);background:linear-gradient(180deg,#06070b99,#06070b59);min-height:0}.menu-brand{display:flex;flex-direction:column;gap:.14rem;padding:0 .35rem .9rem;border-bottom:1px solid var(--line)}.menu-mark{font-size:20px;line-height:1;color:var(--gold);text-shadow:0 0 16px rgba(200,162,76,.5)}.menu-brand-name{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink)}.menu-brand-sub{font-size:10px;text-transform:uppercase;letter-spacing:.28em;color:var(--gold)}.menu-tabs{display:flex;flex-direction:column;gap:.16rem}.menu-tab{position:relative;padding:.62rem .7rem .62rem .95rem;background:none;color:var(--muted);font-size:11px;text-align:left;text-transform:uppercase;letter-spacing:.14em;border-radius:2px;transition:.18s ease}.menu-tab:hover{color:var(--ink);background:#ffffff0b}.menu-tab.is-active{color:var(--gold-hi);background:linear-gradient(90deg,#c8a24c29,#c8a24c00)}.menu-tab.is-active:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--gold);box-shadow:0 0 8px #c8a24cd9}.menu-close{margin-top:auto;align-self:flex-start}.menu-content{display:flex;flex-direction:column;min-width:0;min-height:0}.menu-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 1.35rem;border-bottom:1px solid var(--line);background:#ffffff05}#menu-title{font-size:13px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink)}.menu-panel{flex:1;min-height:0;overflow:auto;padding:1.15rem 1.35rem 1.6rem;scrollbar-width:thin;scrollbar-color:var(--raise) rgba(255,255,255,.03)}.menu-panel::-webkit-scrollbar{width:9px}.menu-panel::-webkit-scrollbar-track{background:#ffffff08}.menu-panel::-webkit-scrollbar-thumb{background:var(--raise);border:1px solid var(--line);border-radius:5px}.menu-panel::-webkit-scrollbar-thumb:hover{background:#262c3e}.gs-group{margin-bottom:1.35rem}.gs-title{padding-bottom:.4rem;margin-bottom:.35rem;border-bottom:1px solid var(--line);color:var(--gold);font-size:11px;letter-spacing:.16em}.gs-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(230px,1.15fr);align-items:center;gap:1rem;padding:.5rem .3rem;border-bottom:1px solid rgba(255,255,255,.045);transition:.18s ease}.gs-row:hover{background:#ffffff06}.gs-label{font-size:11px;letter-spacing:.1em;color:var(--ink-dim)}.gs-control{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;min-width:0}.gs-control input[type=range]{width:100%}.gs-value{min-width:54px;font-size:12px;text-align:right;color:var(--ink);white-space:nowrap}.gs-note{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap}.gs-badge{display:inline-block;padding:.1rem .38rem;background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-radius:2px;color:#171105;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.gs-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.1rem;padding:.7rem .9rem;background:#c8a24c17;border:1px solid rgba(200,162,76,.34);border-radius:var(--radius);color:var(--ink-dim);font-size:12px}.gs-footer .btn-primary{padding:.42rem .8rem;font-size:11px}.gs-reset{padding:.45rem .85rem;background:var(--raise);border:1px solid var(--line-2);border-radius:var(--radius);color:var(--ink-dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em;transition:.18s ease}.gs-reset:hover{color:var(--gold-hi);border-color:#c8a24c8c}#chat-log::-webkit-scrollbar,#roster-list::-webkit-scrollbar{width:6px}#chat-log::-webkit-scrollbar-track,#roster-list::-webkit-scrollbar-track{background:transparent}#chat-log::-webkit-scrollbar-thumb,#roster-list::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:3px}#chat-log,#roster-list{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}