:root{--bg: #05060f;--panel: rgba(20, 22, 40, .72);--panel-line: rgba(120, 130, 220, .22);--text: #e8ebff;--dim: #9aa0c8;--good: #5fe08a;--warn: #ffd166;--danger: #ff5b6e;--mana: #5aa9ff;--gauge: #ffb14e;--accent: #8a7bff;--shadow: 0 6px 26px rgba(0, 0, 0, .5);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}#app{position:fixed;inset:0}.stage-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}.hud{position:absolute;inset:0;z-index:10;pointer-events:none;font-size:13px}.panel-label{font-size:10px;letter-spacing:2px;color:var(--dim);font-weight:700;margin-bottom:6px;text-transform:uppercase}.panel{background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:9px 11px;backdrop-filter:blur(8px);box-shadow:var(--shadow)}.boss-header{position:absolute;top:14px;left:50%;transform:translate(-50%);width:min(620px,70vw);text-align:center}.boss-name{font-weight:800;letter-spacing:1px;font-size:20px;text-shadow:0 2px 10px rgba(255,60,90,.4)}.boss-name .bn{color:#ff8da3}.boss-name .bt{color:var(--dim);font-size:13px;font-weight:600;font-style:italic}.enrage-timer{position:absolute;right:-4px;top:2px;font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;color:var(--dim)}.enrage-timer.danger{color:var(--danger);animation:pulse .8s infinite}.boss-hp{position:relative;height:22px;margin-top:6px;background:#0000008c;border:1px solid rgba(255,90,110,.4);border-radius:7px;overflow:hidden}.boss-hp-fill{height:100%;width:100%;background:linear-gradient(180deg,#ff6b84,#c8324b);transition:width .12s linear;box-shadow:0 0 14px #ff506480 inset}.boss-hp-text{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:12px;text-shadow:0 1px 3px #000;font-variant-numeric:tabular-nums}.boss-cast{margin-top:7px}.boss-cast.hidden{display:none}.boss-cast-name{font-size:12px;font-weight:700;color:var(--warn);margin-bottom:3px}.boss-cast.buster .boss-cast-name{color:var(--danger)}.boss-cast-bar{height:12px;background:#00000080;border:1px solid var(--panel-line);border-radius:6px;overflow:hidden}.boss-cast-fill{height:100%;width:0;background:linear-gradient(180deg,#ffe08a,#e0a020);transition:width .06s linear}.boss-cast.buster .boss-cast-fill{background:linear-gradient(180deg,#ff6b84,#c8324b)}.raid-frames{position:absolute;top:14px;left:14px;width:196px;display:flex;flex-direction:column;gap:7px;pointer-events:auto}.frame{background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;padding:7px 9px;cursor:pointer;transition:border-color .15s,transform .1s;backdrop-filter:blur(8px)}.frame:hover{transform:translate(2px)}.frame.is-player{border-color:#ffe79ab3;box-shadow:0 0 12px #ffe79a2e}.frame.selected{border-color:var(--good);box-shadow:0 0 12px #5fe08a4d}.frame.bosstarget{border-color:var(--danger);animation:pulse .7s infinite}.frame.dead{opacity:.45;filter:grayscale(.8)}.frame-top{display:flex;align-items:center;gap:6px;margin-bottom:4px}.frame-icon{font-size:13px}.frame-name{font-weight:700;font-size:12px;flex:1}.frame-tag{font-size:9px;font-weight:700;letter-spacing:1px;color:var(--dim);text-transform:uppercase}.frame-tag.you{color:var(--warn)}.frame-tag.drowsy{color:#9aa6ff}.frame-tag.asleep{color:#c0b0ff;animation:pulse .9s infinite}.frame-hp{position:relative;height:16px;background:#00000080;border-radius:5px;overflow:hidden}.frame-hp-fill{height:100%;background:linear-gradient(180deg,#6ff09a,#34a85f);transition:width .12s linear}.frame-hp-fill.mid{background:linear-gradient(180deg,#ffd166,#d09a20)}.frame-hp-fill.low{background:linear-gradient(180deg,#ff6b6b,#c83232)}.frame-shield{position:absolute;top:0;left:0;height:3px;background:#9ad0ff;box-shadow:0 0 6px #9ad0ff}.frame-hp-text{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;text-shadow:0 1px 2px #000}.frame-res{height:5px;margin-top:3px;background:#00000080;border-radius:3px;overflow:hidden}.frame-res-fill{height:100%;width:0;transition:width .12s linear}.frame-res-fill.mana{background:var(--mana)}.frame-res-fill.gauge{background:var(--gauge)}.frame-engage{height:5px;margin-top:3px;background:#00000080;border-radius:3px;overflow:hidden}.frame-engage-fill{height:100%;width:70%;transition:width .2s linear;background:linear-gradient(90deg,#6a78ff,#9a78ff)}.frame-engage-fill.drowsy{background:linear-gradient(90deg,#5a4a90,#7a6ad0)}.frame-engage-fill.asleep{background:linear-gradient(90deg,#40306a,#5a4a90)}.frame-buffs{display:flex;gap:3px;margin-top:5px;min-height:16px;flex-wrap:wrap}.buff-pip{width:16px;height:16px;border-radius:4px;display:grid;place-items:center;font-size:10px;background:color-mix(in srgb,var(--c) 28%,#000);border:1px solid var(--c)}.buff-pip.debuff{border-style:dashed}.right-col{position:absolute;top:14px;right:14px;width:212px;display:flex;flex-direction:column;gap:9px}.meter-row{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:6px;margin:3px 0}.meter-name{font-size:11px;color:var(--dim);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meter-track{height:11px;background:#00000080;border-radius:5px;overflow:hidden}.meter-bar{height:100%;width:0;border-radius:5px;transition:width .18s ease;background:var(--accent)}.meter-bar.threat{background:linear-gradient(90deg,#6a78ff,#9a78ff)}.meter-bar.threat.tank{background:linear-gradient(90deg,#4f9fe6,#6ec1ff)}.meter-bar.threat.warn{background:linear-gradient(90deg,#e0a020,#ffd166)}.meter-bar.threat.over{background:linear-gradient(90deg,#c83232,#ff6b6b);animation:pulse .6s infinite}.meter-bar.dps{background:linear-gradient(90deg,#c8527a,#ff8da3)}.meter-bar.hps{background:linear-gradient(90deg,#34a85f,#6ff09a)}.meter-val{font-size:10px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-weight:700}.meter-row.you .meter-name{color:var(--warn)}.meter-row.pull-warn{background:#ff50641f;border-radius:6px}.meter-total{margin-top:6px;font-size:10px;color:var(--dim);font-weight:700;border-top:1px solid var(--panel-line);padding-top:5px}.meter-total.behind{color:var(--danger)}.action-area{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:auto}.resource{display:flex;align-items:center;gap:8px;width:340px}.resource-label{font-size:9px;letter-spacing:1px;color:var(--dim);font-weight:700;width:86px;text-align:right}.resource-track{flex:1;height:9px;background:#0000008c;border:1px solid var(--panel-line);border-radius:5px;overflow:hidden}.resource-fill{height:100%;width:0;transition:width .12s linear}.resource-fill.mana{background:linear-gradient(90deg,#3f7fd6,#6ec1ff)}.resource-fill.mana.low{background:linear-gradient(90deg,#c83232,#ff6b6b);animation:pulse .8s infinite}.resource-fill.gauge{background:linear-gradient(90deg,#d08a20,#ffb14e)}.resource-fill.gauge.full{box-shadow:0 0 10px var(--gauge)}.resource-text{font-size:11px;font-weight:800;width:34px;font-variant-numeric:tabular-nums}.player-cast{width:300px;display:flex;flex-direction:column;gap:3px}.player-cast.hidden{display:none}.player-cast-name{font-size:11px;font-weight:700;color:var(--text);text-align:center;text-shadow:0 1px 3px #000}.player-cast-track{height:12px;background:#0009;border:1px solid var(--panel-line);border-radius:6px;overflow:hidden}.player-cast-fill{height:100%;width:0;background:linear-gradient(90deg,#ffe08a,#e0a020);transition:width .04s linear}.action-bar{display:flex;gap:8px}.ability-tip{position:fixed;z-index:60;display:none;max-width:240px;padding:10px 12px;border-radius:10px;background:#0e1020f7;border:1px solid var(--panel-line);box-shadow:0 10px 30px #0009;pointer-events:none}.tip-head{display:flex;align-items:center;gap:8px}.tip-ico{font-size:18px}.tip-name{font-weight:800;font-size:14px}.tip-tags{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.tip-tags span{font-size:10px;font-weight:700;color:var(--dim);border:1px solid var(--panel-line);border-radius:12px;padding:1px 7px}.tip-desc{font-size:12px;color:#c3c8ea;line-height:1.4}.pip-stacks{position:absolute;bottom:-3px;right:-3px;font-size:9px;font-weight:900;background:#1a1c30;border-radius:4px;padding:0 2px;color:#fff}.buff-pip{position:relative}.buff-pip.focused{border-color:#ff3b3b;box-shadow:0 0 8px #ff3b3bb3;animation:pulse .5s infinite}.enrage-vignette{position:absolute;inset:0;pointer-events:none;z-index:12;opacity:0;transition:opacity .5s;box-shadow:inset 0 0 160px #ff28288c}.enrage-vignette.on{opacity:1;animation:enragePulse 1.2s ease-in-out infinite}@keyframes enragePulse{50%{box-shadow:inset 0 0 220px #ff2828bf}}.ability{position:relative;width:66px;height:66px;border-radius:12px;cursor:pointer;background:linear-gradient(180deg,#282a46f2,#16182cf2);border:1.5px solid color-mix(in srgb,var(--accent) 55%,#2a2c4a);color:var(--text);overflow:hidden;padding:0;transition:transform .08s,box-shadow .12s,filter .12s;display:flex;flex-direction:column;align-items:center;justify-content:center}.ability:active{transform:scale(.93)}.ability.ready{box-shadow:0 0 12px color-mix(in srgb,var(--accent) 50%,transparent)}.ability.ready:hover{filter:brightness(1.15)}.ability.blocked{filter:brightness(.6) grayscale(.3)}.ability.unaffordable{filter:brightness(.5) grayscale(.6)}.ability.casting{box-shadow:0 0 0 2px var(--accent),0 0 16px var(--accent)}.ability-key{position:absolute;top:3px;left:5px;font-size:11px;font-weight:800;color:#fff;opacity:.8;text-shadow:0 1px 2px #000}.ability-icon{font-size:26px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.ability-name{font-size:9px;font-weight:700;margin-top:3px;color:var(--dim);text-align:center;padding:0 2px}.ability-sweep{position:absolute;bottom:0;left:0;width:100%;height:0;background:#080814b8;transition:height .06s linear;pointer-events:none}.ability-cd{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:800;text-shadow:0 1px 3px #000;pointer-events:none}.log-col{position:absolute;bottom:16px;right:14px;width:248px;display:flex;flex-direction:column;gap:8px}.chat-list,.log-list{display:flex;flex-direction:column;gap:2px;max-height:132px;overflow:hidden;font-size:11px}.log-list{max-height:150px}.chat-entry{color:var(--text);line-height:1.35}.chat-name{font-weight:800;color:var(--c, #fff)}.log-entry{color:var(--dim);line-height:1.3}.log-entry.warn{color:var(--warn)}.log-entry.danger{color:var(--danger);font-weight:700}.log-entry.good{color:var(--good);font-weight:700}.log-entry.info{color:#b9c0ee}.hint-banner{position:absolute;top:116px;left:50%;transform:translate(-50%) translateY(-8px);padding:7px 16px;border-radius:20px;font-weight:800;font-size:13px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}.hint-banner.show{opacity:1;transform:translate(-50%) translateY(0)}.hint-banner.warn{background:#ffd16629;border:1px solid var(--warn);color:var(--warn)}.hint-banner.danger{background:#ff50642e;border:1px solid var(--danger);color:#ff9aa8;animation:pulse .7s infinite}.prepull-banner{position:absolute;inset:0;display:grid;place-items:center;z-index:28;pointer-events:none;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--boss-accent) 14%,transparent),#05060f8c)}.pp-card{text-align:center;animation:ppcard .5s cubic-bezier(.2,.8,.2,1);padding:24px 40px}@keyframes ppcard{0%{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}.pp-vs{font-size:12px;letter-spacing:6px;color:var(--boss-accent);font-weight:800;opacity:.85}.pp-boss{font-size:clamp(40px,8vw,76px);font-weight:900;letter-spacing:4px;margin-top:4px;color:#fff;text-shadow:0 0 36px color-mix(in srgb,var(--boss-accent) 70%,transparent)}.pp-boss-title{font-size:16px;font-style:italic;color:var(--boss-accent);font-weight:700}.pp-intro{max-width:520px;margin:12px auto 0;color:#d4d8f5;font-size:14px;line-height:1.5}.pp-count{font-size:76px;font-weight:900;color:#fff;margin-top:12px;text-shadow:0 0 30px color-mix(in srgb,var(--boss-accent) 70%,transparent);animation:pppop 1s infinite}.pp-count.pull{background:linear-gradient(180deg,#fff,var(--boss-accent));-webkit-background-clip:text;background-clip:text;color:transparent;animation:ppflash .4s}@keyframes pppop{0%{transform:scale(1.25);opacity:.35}35%{transform:scale(1);opacity:1}to{opacity:.85}}@keyframes ppflash{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mute-btn{position:absolute;bottom:12px;left:12px;z-index:45;width:38px;height:38px;border-radius:10px;border:1px solid var(--panel-line);background:var(--panel);color:var(--text);font-size:17px;cursor:pointer;backdrop-filter:blur(6px);transition:transform .1s,border-color .12s}.mute-btn:hover{transform:scale(1.08);border-color:var(--accent)}.mute-btn:active{transform:scale(.94)}.pause-banner{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff;background:#05060f80;z-index:30;backdrop-filter:blur(3px)}.overlay{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;pointer-events:auto;background:radial-gradient(circle at 50% 30%,#1e1437d9,#05060ff5);overflow-y:auto}.title{font-size:clamp(44px,9vw,96px);font-weight:900;letter-spacing:6px;background:linear-gradient(180deg,#ff8da3,#8a7bff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 6px 40px rgba(138,123,255,.4)}.subtitle{font-size:clamp(13px,2.4vw,19px);color:var(--dim);margin-top:-10px}.subtitle b{color:var(--text)}.pitch{max-width:680px;text-align:center;color:#c3c8ee;line-height:1.55;font-size:13.5px}.pitch b{color:#ffd8e0}.boss-select{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:720px;width:100%;margin-top:6px}.boss-tab{background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:11px 12px;cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s;text-align:center;position:relative}.boss-tab:hover{transform:translateY(-2px)}.boss-tab.active{border-color:var(--bc);box-shadow:0 0 18px color-mix(in srgb,var(--bc) 35%,transparent);background:color-mix(in srgb,var(--bc) 12%,var(--panel))}.boss-tab.locked{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}.bt-name{font-weight:800;font-size:15px;color:var(--bc);letter-spacing:1px}.boss-tab.locked .bt-name{color:var(--dim)}.bt-title{font-size:11px;color:var(--dim);font-style:italic}.bt-cleared{font-size:10px;color:var(--good);font-weight:800;margin-top:2px}.diff-select{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;justify-content:center}.diff-pill{background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;padding:6px 16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:border-color .12s,background .12s}.diff-pill:hover{border-color:var(--dc)}.diff-pill.active{border-color:var(--dc);background:color-mix(in srgb,var(--dc) 16%,var(--panel))}.dp-name{font-weight:800;font-size:13px;color:var(--dc)}.dp-desc{font-size:10px;color:var(--dim)}.boss-flavor{font-size:13px;color:#c3c8ee;max-width:640px;text-align:center;margin-top:2px}.boss-flavor b{color:var(--boss-accent, #fff)}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:920px;width:100%;margin-top:6px}.card{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:7px;transition:transform .12s,border-color .12s}.card:hover{transform:translateY(-4px);border-color:var(--accent)}.card.recommended{border-color:#ffe79a8c}.card-icon{font-size:30px}.card-role{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--accent)}.card-name{font-size:15px;font-weight:800}.card-blurb{font-size:12px;color:var(--dim);line-height:1.4;flex:1}.card-tip{font-size:11px;color:var(--warn);line-height:1.4;background:#ffd16614;border-radius:8px;padding:6px 8px}.card-best{font-size:11px;color:var(--dim);font-weight:700;text-align:center}.menu-stats{font-size:13px;color:var(--warn);font-weight:700;margin-top:10px}.card-btn{margin-top:4px;padding:9px;border-radius:9px;border:none;cursor:pointer;font-weight:800;font-size:13px;color:#10131f;background:linear-gradient(180deg,#ffe79a,#ffc85a);transition:filter .12s,transform .08s}.card-btn:hover{filter:brightness(1.08)}.card-btn:active{transform:scale(.96)}.card-btn.ghost{background:transparent;color:var(--text);border:1px solid var(--panel-line)}.menu-foot{font-size:12px;color:var(--dim);margin-top:8px;text-align:center;max-width:640px}.result{gap:16px}.result-title{font-size:clamp(48px,11vw,120px);font-weight:900;letter-spacing:8px}.result.win .result-title{background:linear-gradient(180deg,#9affc0,#34a85f);-webkit-background-clip:text;background-clip:text;color:transparent}.result.wipe .result-title{background:linear-gradient(180deg,#ff8da3,#c8324b);-webkit-background-clip:text;background-clip:text;color:transparent}.result-sub{font-size:15px;color:#d4d8f5;max-width:560px;text-align:center;line-height:1.5}.result-stats{display:flex;gap:28px;margin:6px 0}.stat{text-align:center}.stat-val{font-size:26px;font-weight:800}.stat-label{font-size:10px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}.result-btns{display:flex;gap:12px}.parse{width:min(460px,90vw);background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:14px 16px}.parse-title{font-size:11px;letter-spacing:1px;color:var(--dim);font-weight:800;text-transform:uppercase;margin-bottom:10px;text-align:center}.parse-row{display:grid;grid-template-columns:96px 1fr 130px;align-items:center;gap:8px;margin:5px 0}.parse-row.you .parse-name{color:var(--warn);font-weight:800}.parse-name{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.parse-track{height:14px;background:#00000080;border-radius:6px;overflow:hidden}.parse-bar{height:100%;border-radius:6px;transition:width .6s ease}.parse-bar.dps{background:linear-gradient(90deg,#c8527a,#ff8da3)}.parse-bar.hps{background:linear-gradient(90deg,#34a85f,#6ff09a)}.parse-val{font-size:11px;text-align:right;font-variant-numeric:tabular-nums;color:var(--dim);font-weight:700}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.help-link{background:transparent;border:1px solid var(--panel-line);color:var(--warn);border-radius:8px;padding:4px 12px;font-weight:800;font-size:12px;cursor:pointer;transition:border-color .12s}.help-link:hover{border-color:var(--warn)}.overlay.help{gap:14px}.help-title{font-size:clamp(34px,7vw,60px);font-weight:900;letter-spacing:4px;background:linear-gradient(180deg,#ffe79a,#ff8da3);-webkit-background-clip:text;background-clip:text;color:transparent}.help-sub{color:var(--dim);font-size:15px;max-width:600px;text-align:center;margin-top:-6px}.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:920px;width:100%}.help-card{background:var(--panel);border:1px solid var(--line, var(--panel-line));border-radius:14px;padding:16px}.help-card.threat{border-color:#ff78a066}.help-card.engage{border-color:#9aa6ff66}.help-card.win{border-color:#5fe08a66}.hc-ico{font-size:30px}.hc-h{font-weight:800;font-size:16px;margin:4px 0 6px}.hc-p{font-size:13px;color:#c7ccf0;line-height:1.5}.hc-p b{color:#fff}.help-controls{font-size:12.5px;color:var(--dim);background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;padding:10px 16px;max-width:760px;text-align:center}.help-controls b{color:var(--text)}@media (max-width: 760px){.help-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05s!important}.enrage-vignette.on{opacity:.6}.plate:before{display:none}}@media (max-width: 860px){.cards{grid-template-columns:repeat(2,1fr)}.raid-frames{width:150px}.right-col{width:168px}.log-col{display:none}.ability{width:58px;height:58px}}@media (max-width: 560px){.hud{font-size:12px}.raid-frames{width:128px;top:8px;left:8px}.right-col{width:140px;top:8px;right:8px}.boss-header{width:56vw;top:8px}.ability{width:52px;height:52px}.ability-name{display:none}.resource{width:270px}.cards{grid-template-columns:1fr 1fr}}