:root{--bg: #070a12;--panel: rgba(10, 15, 26, .82);--line: rgba(120, 150, 200, .22);--text: #dbe4f2;--muted: #7d8aa3;--accent: #4dc9ff;--hp: #ff5d73;--xp: #ffd166}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;-webkit-user-select:none;user-select:none}#app{position:fixed;inset:0;display:grid;place-items:center}#stage-wrap{position:relative;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,56.25vw)}#stage{display:block;width:100%;height:100%;image-rendering:auto;background:#05070d}.hidden{display:none!important}#hud{position:absolute;inset:0;pointer-events:none;font-size:13px}#hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 16px}#party{display:flex;flex-direction:column;gap:4px;min-width:150px}.party-row{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:3px 6px;font-size:11px}.party-dot{width:9px;height:9px;border-radius:50%;flex:none}.party-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.party-row.down{opacity:.45}.party-hp{width:46px;height:5px;background:#1b2333;border-radius:3px;overflow:hidden}.party-hp>div{height:100%;background:var(--hp)}#objective-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}#objective{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:5px 14px;letter-spacing:.06em;text-transform:uppercase;font-size:12px}#boss-bar{width:min(520px,60vw);text-align:center;display:flex;flex-direction:column;gap:4px}.boss-row .boss-name{font-size:11px;letter-spacing:.16em;margin-bottom:2px}.boss-row .bar{height:12px}.boss-row .bar>div{height:100%;transition:width .15s linear}.boss-row.enraged .boss-name{text-shadow:0 0 8px currentColor}.uber-count{margin-top:3px;font-size:11px;letter-spacing:.2em;color:#b892ff;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:2px 8px}#netinfo{color:var(--muted);font-size:11px;text-align:right;min-width:170px}#audio-controls{pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-top:5px;font-size:9px;letter-spacing:.06em}#audio-controls label{display:flex;align-items:center;gap:5px}#audio-controls input[type=range]{width:74px;height:3px;-webkit-appearance:none;appearance:none;background:#253046;border-radius:2px;outline:none;cursor:pointer}#audio-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:9px;border-radius:50%;background:var(--accent);cursor:pointer}#audio-controls input[type=range]::-moz-range-thumb{width:9px;height:9px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}#mute{background:#17233a;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 7px;font:inherit;font-size:9px;cursor:pointer}#mute:hover{background:#1f2f4d}#mute.on{background:#3a1d1d;border-color:#ff6b6b;color:#ff9f9f}.bar{position:relative;background:#131a28;border:1px solid var(--line);border-radius:3px;overflow:hidden;height:9px}.bar span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;letter-spacing:.05em;text-shadow:0 1px 2px #000}.bar.big{height:18px}.bar.xp{height:13px;margin-top:4px}#hp-fill{height:100%;background:linear-gradient(90deg,#ff3b5c,#ff8a8a);transition:width .12s linear}#xp-fill{height:100%;background:var(--xp);transition:width .2s linear}#hud-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:12px 16px}#self-panel{width:min(300px,34vw);background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:8px 10px}#self-name{font-size:12px;margin-bottom:5px;letter-spacing:.08em}#stat-strip{display:flex;flex-wrap:wrap;gap:4px 10px;max-width:40vw;font-size:11px;color:var(--muted)}#stat-strip b{color:var(--text);font-weight:600}#hints{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:flex-end;font-size:10px;color:var(--muted);max-width:26vw}#hints b{color:var(--accent)}#ability{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:6px 10px;min-width:190px}#ability.ready{border-color:#5ee88a80}#ability-key{display:grid;place-items:center;width:26px;height:26px;flex:none;border:1px solid var(--line);border-radius:4px;background:#17233a;font-size:12px;font-weight:700}#ability.ready #ability-key{background:#1d3a2a;border-color:#5ee88a;color:#5ee88a}#ability-body{flex:1;min-width:0}#ability-name{font-size:11px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar.cd{height:9px}#ability-fill{height:100%;width:100%;background:linear-gradient(90deg,#4dc9ff,#63f2e0);transition:width .1s linear}#ability .bar span{font-size:9px}#classes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}@media(max-width:560px){#classes{grid-template-columns:repeat(2,1fr)}}.class-card{background:#0d1422;border:1px solid var(--line);border-radius:5px;padding:8px 6px;cursor:pointer;text-align:center;transition:border-color .12s,background .12s}.class-card:hover{background:#142035}.class-card.selected{border-color:var(--accent);background:#15263d}.class-card .cname{font-size:12px;font-weight:700;margin-bottom:2px}.class-card .crole{font-size:9px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}.class-card .cstat{font-size:9px;margin-top:4px}#class-detail{background:#0d1422;border:1px solid var(--line);border-left-width:3px;border-radius:5px;padding:9px 11px;margin-bottom:14px;font-size:11px;text-align:left;color:var(--muted);line-height:1.5}#class-detail b{color:var(--text)}#class-detail .abil{color:#9fd0ff}#toasts{position:absolute;right:16px;top:76px;display:flex;flex-direction:column;gap:5px;align-items:flex-end;max-width:320px}.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:3px;padding:5px 10px;font-size:11.5px;animation:toast-in .18s ease-out}.toast .sub{display:block;color:var(--muted);font-size:10px;margin-top:2px}@keyframes toast-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:none}}#respawn{position:absolute;inset:0;display:grid;place-items:center;background:#50000a47;font-size:26px;letter-spacing:.1em;text-shadow:0 2px 10px #000}#gear{position:absolute;inset:0;display:grid;place-items:center;background:#04070eb8;pointer-events:auto;padding:20px}#gear-inner{width:min(860px,96vw);max-height:88vh;display:flex;flex-direction:column;background:#0a0f1a;border:1px solid var(--line);border-radius:8px;overflow:hidden}#gear header{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}#gear h2{margin:0;font-size:16px;letter-spacing:.14em}#gear h3{margin:0 0 8px;font-size:12px;letter-spacing:.12em;color:var(--muted)}#gear-stats{flex:1;display:flex;flex-wrap:wrap;gap:3px 12px;font-size:11px;color:var(--muted)}#gear-stats b{color:var(--text)}#gear-close,#play{background:#17233a;color:var(--text);border:1px solid var(--line);border-radius:4px;padding:6px 12px;cursor:pointer;font:inherit;font-size:12px}#gear-close:hover,#play:hover{background:#1f2f4d}#gear-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px;overflow:auto}@media(max-width:720px){#gear-body{grid-template-columns:1fr}}#equipped,#bag{display:flex;flex-direction:column;gap:6px}.item{border:1px solid var(--line);border-left-width:3px;border-radius:4px;background:#0d1422;padding:7px 10px;font-size:11.5px}.item.click{cursor:pointer}.item.click:hover{background:#142035}.item .row{display:flex;align-items:baseline;gap:8px}.item .name{font-weight:600;flex:1}.item .meta{color:var(--muted);font-size:10px}.item .affix{color:#9fd0ff;display:block;margin-top:2px}.item .empty{color:var(--muted);font-style:italic}.item .better{color:#5ee88a}.item .worse{color:#ff7a7a}#scoreboard{position:absolute;top:74px;right:14px;width:min(320px,38vw);pointer-events:none;transform:translate(118%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease}#scoreboard.show{transform:none;opacity:1}#scoreboard-inner{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--xp);border-radius:6px;padding:10px 12px;pointer-events:auto;backdrop-filter:blur(2px)}#scoreboard h2{margin:0 0 2px;font-size:12px;letter-spacing:.14em;color:var(--xp)}#scoreboard-tabs{display:flex;gap:4px;margin:7px 0 8px}#scoreboard-tabs button{background:#17233a;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:2px 8px;font:inherit;font-size:10px;cursor:pointer}#scoreboard-tabs button.active{background:#1f2f4d;color:var(--text);border-color:var(--accent)}.score-row{display:grid;grid-template-columns:16px 1fr auto;gap:7px;align-items:center;padding:4px 2px;font-size:11.5px;border-bottom:1px solid rgba(120,150,200,.1)}.score-row.you{background:#4dc9ff14;border-radius:3px}.score-row .detail{grid-column:2 / -1;color:var(--muted);font-size:10px;padding-bottom:2px}.score-row .rank{color:var(--muted);text-align:right}.score-row.first .rank,.score-row.first .who{color:var(--xp)}.score-row .who{display:flex;align-items:center;gap:6px;overflow:hidden}.score-row .dot{width:9px;height:9px;border-radius:50%;flex:none}.score-row .num{text-align:right;font-variant-numeric:tabular-nums}.score-row .score{font-weight:700}.badges{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:4px;padding:0 0 6px 2px}.badge{font-size:9px;letter-spacing:.08em;color:#9fd0ff;background:#142035;border:1px solid var(--line);border-radius:3px;padding:1px 6px}#scoreboard-foot{margin-top:8px;font-size:10.5px;color:var(--muted)}#scoreboard .hint{color:var(--accent)}#start{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#131c33,#05070d 70%);padding:20px}#start-inner{width:min(560px,94vw);text-align:center}#start h1{font-size:clamp(30px,7vw,54px);margin:0 0 6px;letter-spacing:.14em}#start h1 span{color:var(--accent)}.tagline{color:var(--muted);margin:0 0 24px;font-size:13px;line-height:1.5}#start label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;letter-spacing:.1em}#name{width:100%;padding:10px 12px;font:inherit;font-size:15px;text-align:center;background:#0d1422;color:var(--text);border:1px solid var(--line);border-radius:5px;margin-bottom:10px}#name:focus{outline:none;border-color:var(--accent)}#play{width:100%;padding:11px;font-size:14px;letter-spacing:.1em}#start-status{min-height:18px;margin-top:10px;font-size:11.5px;color:var(--muted)}.legend{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;text-align:left;font-size:11px;color:var(--muted)}@media(max-width:560px){.legend{grid-template-columns:1fr}}.legend b{color:var(--text)}.footnote{margin-top:18px;font-size:11px;color:var(--muted)}