:root{--ink:#140a18;--panel:#1c1022db;--panel-2:#2c1a34eb;--cream:#f4e6c8;--dim:#b9a3b8;--orange:#ff9a3a;--red:#e0453a;--green:#7bdc5a;--gold:#e8b830;--purple:#b45cff;--warrior:#d9643a;--priest:#e8dcb8}*{box-sizing:border-box}html,body{height:100%;color:var(--cream);-webkit-user-select:none;user-select:none;background:#120a18;margin:0;font-family:Microsoft YaHei,PingFang SC,Noto Sans SC,sans-serif;overflow:hidden}#game{width:100vw;height:100vh;display:block;position:fixed;inset:0}#hud{pointer-events:none;position:fixed;inset:0}#hud>*{pointer-events:auto}#hud #plates,#hud #floats,#hud #alert,#hud #countdown,#hud #aggro,#hud #tip{pointer-events:none}kbd{border:2px solid var(--ink);min-width:1.5em;color:var(--ink);text-align:center;box-shadow:0 2px 0 var(--ink);background:#f4e6c8;border-radius:4px;padding:0 4px;font:700 11px/16px Consolas,monospace;display:inline-block}.panel{background:var(--panel);border:3px solid var(--ink);border-radius:8px;box-shadow:0 4px #0000008c,inset 0 0 0 1px #ffdcb414}.panel.small{padding:8px 10px;font-size:12px}.dim{color:var(--dim)}.good{color:var(--green)}#boss-frame,#party,#actionbar,#player-cast,#help,#info,#plates,#aggro,#stick-zone{opacity:0;transition:opacity .25s}#hud.in-fight #boss-frame,#hud.in-fight #party,#hud.in-fight #actionbar,#hud.in-fight #player-cast,#hud.in-fight #help,#hud.in-fight #info,#hud.in-fight #plates,#hud.in-fight #aggro,#hud.in-fight #stick-zone{opacity:1}#hud:not(.in-fight) #boss-frame,#hud:not(.in-fight) #party,#hud:not(.in-fight) #actionbar,#hud:not(.in-fight) #stick-zone{pointer-events:none}.bar{border:2px solid var(--ink);background:#2a1620;border-radius:4px;height:18px;position:relative;overflow:hidden}.bar .fill{background:linear-gradient(#e0574a,#a8302c);transition:width 80ms linear;position:absolute;inset:0 auto 0 0}.bar .absorb{background:repeating-linear-gradient(45deg,#fff0bef2 0 4px,#ffd26ed9 4px 8px);position:absolute;top:0;bottom:0}.bar .txt{text-shadow:0 1px #000,0 0 3px #000;white-space:nowrap;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex;position:absolute;inset:0}.bar.hp .fill{background:linear-gradient(#7ee05a,#3f9a32)}.bar.big{height:24px}.bar.big .fill{background:linear-gradient(#e86a3a,#a83a22)}.bar.res{height:11px;margin-top:3px}.bar.res .txt{font-size:9px}.bar.res.rage .fill{background:linear-gradient(#e0403a,#8a1a1a)}.bar.res.mana .fill{background:linear-gradient(#5a9aff,#2a4fb0)}#boss-frame{width:min(580px,56vw);padding:7px 12px 9px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.boss-top{align-items:baseline;gap:10px;margin-bottom:5px;display:flex}.boss-name{letter-spacing:2px;color:#ffd9a0;text-shadow:0 2px 0 var(--ink);font-size:18px;font-weight:900}.boss-attempt{color:var(--dim);font-size:12px}.boss-auras{gap:3px;margin-left:auto;display:flex}.castbar{border:2px solid var(--ink);visibility:hidden;background:#24141e;border-radius:4px;height:18px;margin-top:5px;position:relative;overflow:hidden}.castbar .fill{background:linear-gradient(#ffb04a,#d06a1a);position:absolute;inset:0 auto 0 0}.castbar .txt{text-shadow:0 1px #000,0 0 3px #000;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex;position:absolute;inset:0}.castbar.interruptible{border-color:#e0b0ff;box-shadow:0 0 10px #b45cffcc}.castbar.interruptible .fill{background:linear-gradient(#c890ff,#7a3ad0)}.cards{flex-wrap:wrap;gap:6px;margin-top:7px;display:flex}.card{background:var(--panel-2);border:2px solid var(--ink);color:#ffe6b8;cursor:help;border-radius:5px;padding:3px 8px 3px 4px;font-size:12px;font-weight:700}.card .cslot{color:var(--ink);background:#ffd9a0;border-radius:3px;margin-right:5px;padding:0 5px;font-size:10px;display:inline-block}.card.sig .cslot{background:#c890ff}#party{flex-direction:column;gap:8px;width:236px;display:flex;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.unit-frame{cursor:pointer;padding:7px 9px;transition:transform .1s}.unit-frame:hover{transform:translate(3px)}.unit-frame.me{border-color:#ffe08a;box-shadow:0 4px #0000008c,0 0 0 2px #ffe08a59}.unit-frame.targeted{outline-offset:2px;outline:2px dashed #8aff9a}.unit-frame.dead{filter:grayscale()brightness(.7)}.unit-frame.low .bar.hp{animation:.6s infinite alternate lowpulse}@keyframes lowpulse{to{box-shadow:0 0 10px #ff4040}}.uf-top{align-items:center;gap:6px;margin-bottom:4px;font-weight:800;display:flex}.unit-frame.warrior .uf-name{color:var(--warrior)}.unit-frame.priest .uf-name{color:var(--priest)}.uf-you,.uf-tgt{color:var(--ink);border-radius:3px;padding:0 5px;font-size:10px;display:none}.uf-you{background:#ffe08a}.uf-tgt{background:#8aff9a}.unit-frame.me .uf-you,.unit-frame.targeted .uf-tgt{display:inline-block}.uf-bottom{justify-content:space-between;align-items:center;min-height:20px;margin-top:4px;display:flex}.auras{flex-wrap:wrap;gap:3px;display:flex}.aura{border:2px solid var(--ink);background:var(--c);color:#fff;text-shadow:0 1px #000;border-radius:4px;justify-content:center;align-items:center;width:20px;height:20px;font-size:11px;font-weight:900;display:flex;position:relative}.aura.debuff{box-shadow:0 0 0 1px #ff5050}.aura sup{background:var(--ink);border-radius:3px;padding:0 2px;font-size:9px;position:absolute;top:-6px;right:-4px}.aura i{color:var(--cream);font-size:9px;font-style:normal;position:absolute;bottom:-9px}.threat{color:var(--dim);align-items:center;gap:4px;font-size:10px;display:flex}.tbar{border:1px solid var(--ink);background:#2a1620;border-radius:3px;width:60px;height:6px;overflow:hidden}.tbar .fill{background:#b08a5a;height:100%}.tbar .fill.top{background:var(--red)}#actionbar{background:var(--panel);border:3px solid var(--ink);border-radius:10px;gap:8px;padding:8px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 4px #0000008c}.slot{border:3px solid var(--ink);background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, white), var(--c) 55%, color-mix(in srgb, var(--c) 50%, black));cursor:pointer;border-radius:8px;width:58px;height:58px;position:relative;overflow:hidden}.slot:last-child{margin-left:10px}.slot .icon{color:#fff;text-shadow:0 2px 0 var(--ink), 0 0 6px #00000080;justify-content:center;align-items:center;font-size:26px;font-weight:900;display:flex;position:absolute;inset:0}.slot .cd{background:conic-gradient(#0a040ec7 var(--p,0%), transparent 0);position:absolute;inset:0}.slot .cdtxt{color:#fff;text-shadow:0 2px #000;justify-content:center;align-items:center;font-size:22px;font-weight:900;display:flex;position:absolute;inset:0}.slot kbd{min-width:16px;font-size:10px;line-height:13px;position:absolute;top:2px;left:2px}.slot .sname{text-align:center;text-shadow:0 1px #000,0 0 3px #000;font-size:10px;font-weight:700;position:absolute;bottom:1px;left:0;right:0}.slot.nores .icon{filter:grayscale(.6)brightness(.6);color:#9ab0ff}.slot.far .icon{color:#ff7a6a}.slot.casting{box-shadow:0 0 0 2px #ffe08a,0 0 12px #ffe08a}.slot:active{transform:translateY(2px)}#player-cast{width:300px;height:20px;position:absolute;bottom:104px;left:50%;transform:translate(-50%)}#player-cast .fill{background:linear-gradient(#ffe08a,#c89a2a)}#plates{position:absolute;inset:0}.plate{text-align:center;width:64px;margin-top:-26px;margin-left:-32px;position:absolute;top:0;left:0}.plate .pname{text-shadow:0 1px #000,0 0 3px #000;font-size:11px;font-weight:800}.plate.warrior .pname{color:#ffb08a}.plate.me .pname{color:#ffe08a}.pbar{border:1px solid var(--ink);background:#2a1620;border-radius:2px;height:6px;position:relative;overflow:hidden}.pbar .fill{background:#6ad04a;position:absolute;inset:0 auto 0 0}.pbar .absorb{background:#ffe6a0;position:absolute;top:0;bottom:0}.pcast{border:1px solid var(--ink);visibility:hidden;background:#2a1620;height:4px;margin-top:2px}.pcast .fill{background:#ffd870;height:100%}#aggro{color:#ff4a3a;text-shadow:0 2px #000;margin-top:-40px;margin-left:-10px;font-size:18px;animation:.5s infinite alternate bob;position:absolute;top:0;left:0}@keyframes bob{to{margin-top:-46px}}#floats{position:absolute;inset:0;overflow:hidden}.float{white-space:nowrap;text-shadow:0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);will-change:transform;margin-left:-20px;font-size:18px;font-weight:900;position:absolute;top:0;left:0}.float.out{color:#fff3d8}.float.crit{color:#ffd23a;font-size:26px}.float.in{color:#ff6a5a;font-size:16px}.float.heal{color:#8cff6a;font-size:16px}.float.absorb{color:#ffe6a0;font-size:13px}.float.interrupt{color:#d8a8ff;font-size:28px}.float.buff{color:#8ad0ff;font-size:15px}.float.debuff{color:#e0a0ff;font-size:16px}.float.warn{color:#ff8a5a;font-size:18px}.float.dodge{color:#e6f2ff;text-shadow:0 0 6px #6aa8ff,0 1px #000;font-size:18px}#alert{letter-spacing:1px;text-shadow:0 3px 0 var(--ink), 0 0 12px #000000b3;opacity:0;white-space:nowrap;font-size:24px;font-weight:900;transition:opacity .2s,transform .2s;position:absolute;top:132px;left:50%;transform:translate(-50%)scale(.9)}#alert.show{opacity:1;transform:translate(-50%)scale(1)}#alert.danger{color:#ff6a4a}#alert.warn{color:#ffc46a}#alert.good{color:#9aff7a}#countdown{color:#ffe6b8;text-shadow:0 6px 0 var(--ink);font-size:120px;font-weight:900;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}#help{max-width:min(420px,34vw);line-height:1.9;position:absolute;top:12px;left:14px}#help.hidden{display:none}#help b{color:#ffd9a0}.legend{align-items:center;gap:6px;margin-top:2px;display:flex}.legend i{border:2px solid var(--c);background:color-mix(in srgb, var(--c) 30%, transparent);border-radius:50%;width:12px;height:12px;display:inline-block}.legend i.jag{border-style:dashed}#info{text-align:right;line-height:1.6;position:absolute;top:12px;right:14px}#tip{z-index:10;max-width:290px;line-height:1.6;display:none;position:absolute}#tip b{font-size:13px}#overlay{background:radial-gradient(#140a1a59,#0a040ed1);justify-content:center;align-items:center;display:none;position:absolute;inset:0}#overlay.show{display:flex}#overlay.gallery-label{pointer-events:none;background:0 0;align-items:flex-start;padding-top:16px}.menu{text-align:center;width:min(720px,94vw);padding:22px 26px}.menu h1{letter-spacing:2px;color:#ffd9a0;text-shadow:0 3px 0 var(--ink);margin:0 0 6px;font-size:34px;font-weight:900}.menu h1 small{color:var(--dim);letter-spacing:0;margin-left:8px;font-size:15px}.boss-preview{border:2px solid var(--ink);background:#00000040;border-radius:8px;margin:14px auto;padding:10px}.boss-preview .cards{justify-content:center;margin:8px 0}.pick{justify-content:center;gap:14px;margin:16px 0 8px;display:flex}.pick-card{text-align:left;max-width:290px;font:inherit;color:var(--cream);background:var(--panel-2);border:3px solid var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--ink);border-radius:10px;flex-direction:column;flex:1;gap:6px;padding:14px;transition:transform .1s,border-color .1s;display:flex}.pick-card:hover{border-color:#ffd9a0;transform:translateY(-3px)}.pick-card b{font-size:18px}.pick-card.warrior b{color:var(--warrior)}.pick-card.priest b{color:var(--priest)}.pick-card span{font-size:13px}.recap table{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px}.recap th,.recap td{text-align:right;border-bottom:1px solid #ffffff14;padding:6px}.recap th:first-child,.recap td:first-child{text-align:left}.recap th{color:var(--dim);font-weight:700}.recap td.warrior{color:var(--warrior);font-weight:800}.recap td.priest{color:var(--priest);font-weight:800}.recap.win h1{color:#b8ff8a}.recap.lose h1{color:#ff8a6a}.btns{justify-content:center;gap:10px;margin-top:8px;display:flex}.btns button{font:inherit;color:var(--ink);border:3px solid var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink);background:#ffd9a0;border-radius:8px;padding:9px 16px;font-weight:800}.btns button.ghost{color:var(--cream);background:0 0}.btns button:hover{filter:brightness(1.1);transform:translateY(-1px)}#loading{color:var(--cream);z-index:50;background:#120a18;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:16px;display:flex;position:fixed;inset:0}#loading .bar2{border:2px solid var(--ink);background:#2a1620;border-radius:4px;width:260px;height:10px;overflow:hidden}#loading .bar2 div{background:var(--orange);width:0;height:100%;transition:width .1s}@media (max-width:900px){#party{width:190px;top:auto;bottom:100px;transform:none}#help{display:none}.slot{width:48px;height:48px}}#ui{pointer-events:none;z-index:10;position:fixed;inset:0}.ui-overlay{pointer-events:auto;background:radial-gradient(#140a1a59,#0a040ed1);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.menu{max-height:calc(100% - 20px);position:relative;overflow:auto}.menu .lang{gap:4px;display:flex;position:absolute;top:12px;right:14px}.menu .lang button,.fn-pick button{font:inherit;color:var(--cream);background:var(--panel-2);border:2px solid var(--ink);cursor:pointer;border-radius:5px;padding:2px 8px;font-size:12px;font-weight:700}.menu .lang button.on,.fn-pick button.on{color:var(--ink);background:#ffd9a0}.pick-card.chosen{box-shadow:0 4px 0 var(--ink), 0 0 0 3px #ffd9a059;border-color:#ffd9a0}.pick-card.taken{opacity:.45;cursor:not-allowed}.fn-pick{flex-wrap:wrap;align-items:center;gap:5px;margin-top:4px;display:flex}.toggles{color:var(--dim);justify-content:center;gap:18px;margin:6px 0 4px;font-size:13px;display:flex}.toggles input{vertical-align:-2px}.online-box{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:14px;display:flex}.online-box input{font:inherit;color:var(--cream);border:2px solid var(--ink);background:#00000059;border-radius:6px;width:140px;padding:7px 10px}.online-box input.code{text-transform:uppercase;letter-spacing:3px;width:150px;font-weight:800}.online-box button,.btns button:disabled{font:inherit;color:var(--ink);border:3px solid var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink);background:#ffd9a0;border-radius:8px;padding:7px 14px;font-weight:800}.online-box button:disabled,.btns button:disabled{opacity:.45;cursor:not-allowed}.room-code{letter-spacing:6px;color:var(--ink);-webkit-user-select:all;user-select:all;background:#ffd9a0;border-radius:6px;margin-left:6px;padding:0 10px;display:inline-block}.lobby table.members{border-collapse:collapse;width:100%;margin:10px 0;font-size:14px}.lobby table.members td{text-align:left;border-bottom:1px solid #ffffff14;padding:6px}.lobby table.members tr.me td:first-child{color:#ffd9a0;font-weight:800}.lobby td.warrior{color:var(--warrior);font-weight:800}.lobby td.priest{color:var(--priest);font-weight:800}.bad{color:#ff8a6a}.small{font-size:12px}.recap ul{text-align:left;margin:2px 0 0;padding-left:18px}.unit-frame.ai .uf-name:after{content:" · AI";color:var(--dim);font-weight:400}#debug{z-index:20;min-width:280px;line-height:1.7;position:fixed;bottom:14px;left:14px}#debug.hidden{display:none}#debug select{font:inherit;margin-left:4px}@media (max-height:520px){.menu{padding:12px 18px}.menu h1{margin-bottom:2px;font-size:24px}.menu h1 small{font-size:12px}.menu p{margin:6px 0}.pick{gap:10px;margin:8px 0 4px}.pick-card{gap:3px;padding:8px 10px}.pick-card b{font-size:15px}.pick-card span{font-size:12px}.online-box{margin-top:8px}.recap table,.lobby table.members{margin:6px 0;font-size:12px}.recap th,.recap td,.lobby table.members td{padding:3px 5px}}html.touch{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none}html.touch #game,html.touch #hud{touch-action:none}html.touch kbd,html.touch #help,#rotate{display:none}@media (orientation:portrait){html.touch #rotate{z-index:100;text-align:center;background:#120a18;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:fixed;inset:0}}#rotate b{letter-spacing:1px;color:#ffd9a0;text-shadow:0 2px 0 var(--ink);font-size:22px}#rotate span{max-width:280px;color:var(--dim);font-size:14px;line-height:1.6}#rotate .phone{border:4px solid var(--cream);width:46px;height:80px;box-shadow:0 4px 0 var(--ink);border-radius:9px;margin-bottom:18px;animation:2.4s ease-in-out infinite turn-phone;position:relative}#rotate .phone:after{content:"";background:var(--cream);border-radius:2px;width:14px;height:3px;margin-left:-7px;position:absolute;bottom:4px;left:50%}@keyframes turn-phone{0%,25%{transform:rotate(0)}55%,to{transform:rotate(-90deg)}}#stick-zone{display:none}html.touch #stick-zone{width:42%;height:64%;display:block;position:absolute;bottom:0;left:0}#stick-zone .stick{left:calc(max(16px, env(safe-area-inset-left)) + 60px);opacity:.6;background:radial-gradient(circle,#140a1a1f,#140a1a80);border:3px solid #f4e6c84d;border-radius:50%;width:112px;height:112px;margin:-56px 0 0 -56px;transition:opacity .15s;position:absolute;top:calc(100% - 78px)}#stick-zone .stick.on{opacity:1;transition:none}#stick-zone .knob{border:3px solid var(--ink);background:radial-gradient(circle at 35% 30%, #fff4dc, var(--cream) 45%, #b9a3b8);border-radius:50%;width:50px;height:50px;margin:-25px 0 0 -25px;position:absolute;top:50%;left:50%;box-shadow:0 3px #00000080}html.touch #actionbar{left:auto;right:calc(max(12px, env(safe-area-inset-right)) + 8px);width:78px;height:78px;box-shadow:none;background:0 0;border:0;gap:0;padding:0;bottom:14px;transform:none}html.touch .slot{border-radius:50%;width:56px;height:56px;margin:-28px 0 0 -28px;position:absolute;top:50%;left:50%;box-shadow:0 3px #00000080}html.touch .slot .icon{font-size:22px}html.touch .slot .sname{white-space:nowrap;text-overflow:ellipsis;font-size:9px;line-height:11px;bottom:6px;left:6px;right:6px;overflow:hidden}html.touch .slot .cdtxt{font-size:18px}html.touch .slot.jump{--c:#8fb2d8;width:78px;height:78px;margin:-39px 0 0 -39px}html.touch .slot.jump .icon{font-size:22px}html.touch #player-cast{width:min(260px,32vw);height:16px;bottom:16px}html.touch #party{left:max(8px, env(safe-area-inset-left));gap:5px;width:156px;top:6px;bottom:auto;transform:none}html.touch .unit-frame{border-width:2px;padding:4px 6px 5px}html.touch .unit-frame:hover{transform:none}html.touch .uf-top{margin-bottom:2px;font-size:12px}html.touch .bar{height:15px}html.touch .bar .txt{font-size:10px}html.touch .bar.res{height:9px;margin-top:2px}html.touch .bar.res .txt{font-size:8px}html.touch .uf-bottom{min-height:16px;margin-top:3px}html.touch .aura{width:16px;height:16px;font-size:9px}html.touch .tbar{width:40px}html.touch #boss-frame{border-width:2px;width:min(460px,50vw);padding:4px 8px 6px;top:6px}html.touch .boss-top{gap:6px;margin-bottom:3px}html.touch .boss-name{letter-spacing:1px;white-space:nowrap;font-size:14px}html.touch .boss-attempt{white-space:nowrap;font-size:10px}html.touch .bar.big{height:17px}html.touch .castbar{height:15px;margin-top:3px}html.touch .castbar .txt{font-size:10px}html.touch #boss-frame .cards{gap:3px;margin-top:4px}html.touch .card{white-space:nowrap;border-width:1px;padding:1px 5px;font-size:10px}html.touch .card .cslot{display:none}html.touch .card.sig{border-color:#b07ae8}html.touch #info{top:6px;right:max(8px, env(safe-area-inset-right));padding:4px 7px;font-size:10px;line-height:1.4}html.touch #alert{font-size:18px;top:108px}html.touch #countdown{font-size:72px;top:45%}html.touch #tip{max-width:240px;font-size:11px}