:root{color-scheme:dark;--bg:#0b0b13;--panel:#12121e;--line:#272634;--muted:#85828f;--purple:#b39aff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#eeedf5;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 51% 35%,#3a23551b,transparent 65%)}.app{max-width:1480px;margin:auto;padding:0 48px}header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{color:#f2edf9;text-decoration:none;font-size:19px;font-weight:700;display:flex;gap:12px;align-items:center;letter-spacing:1px}.sigil{font:40px Georgia;color:var(--purple)}.brand-sub{font-size:10px;color:#726d85;border-left:1px solid var(--line);padding-left:14px;font-weight:500;letter-spacing:2px}.header-right{display:flex;align-items:center;gap:10px;color:#b2aaba;font-size:12px}.live-dot{width:6px;height:6px;background:#ad92ff;box-shadow:0 0 12px #ad92ff;border-radius:50%}button{font:inherit;cursor:pointer;transition:.2s;border:1px solid var(--line);border-radius:7px;background:#191824;color:#b9b2c9;padding:9px 12px}button:hover{background:#2a233c;color:white;border-color:#79639d}button:focus-visible{outline:2px solid #c9afff;outline-offset:3px}.icon{margin-left:18px;background:transparent;font-size:11px}.heading{display:flex;justify-content:space-between;align-items:center;padding:38px 0 32px}.eyebrow{font-size:10px;letter-spacing:2.3px;color:#a48bc8;font-weight:600}h1{font-size:31px;letter-spacing:1px;margin:13px 0 12px;font-weight:650}h1 span{color:#bba0ea}.heading p{color:var(--muted);font-size:12px;letter-spacing:.5px;margin:0}.edition{text-align:right;color:#696373;font-size:10px;line-height:2;letter-spacing:2px}.edition b{color:#b19acb;font-weight:500}.layout{display:grid;grid-template-columns:220px minmax(320px,1fr) 245px;gap:22px;align-items:start}.panel{border:1px solid var(--line);background:linear-gradient(135deg,#151420,#101019);border-radius:12px;padding:20px}.section-label{font-size:10px;letter-spacing:1px;color:#a39bad;display:flex;justify-content:space-between;align-items:center}.section-label>span{font-size:8px;color:#686072;letter-spacing:1px}.portrait{position:relative;text-align:center;padding-top:8px}.portrait svg{width:100%;height:150px;display:block}.name{padding:10px 0 14px}.name b{font-size:21px;display:block;letter-spacing:5px}.name span{font-size:10px;display:block;margin-top:6px;color:#8d829f;letter-spacing:1px}.badge{font-size:9px;border:1px solid #514064;color:#c3a4ed;border-radius:4px;padding:4px 9px;background:#4d2f591f}.versus{display:flex;align-items:center;gap:10px;color:#74627f;font:italic 13px Georgia;margin:24px 0}.versus span{height:1px;background:var(--line);flex:1}.enemy{display:flex;align-items:center;gap:10px}.enemy-mark{display:grid;place-items:center;border:1px solid #6d333c;border-radius:8px;background:#421d26;color:#e7909a;width:38px;height:42px;font-family:serif;font-size:22px}.enemy b{font-size:12px}.enemy small{display:block;font-size:9px;color:#867580;margin-top:4px}.enemy>span{font-size:8px;color:#c87583;margin-left:auto}.health{height:4px;background:#31202a;border-radius:4px;margin:18px 0 8px;overflow:hidden}.health>div{height:100%;background:linear-gradient(90deg,#962f4a,#e57c8d);transition:width .6s}.health-label{font-size:9px;display:flex;justify-content:space-between;color:#917983}.quote{padding:18px 15px;color:#8b7f9b}.quote>span{font:38px Georgia;color:#554067}.quote p{font-size:12px;margin:0 0 10px;line-height:1.7}.quote small{font-size:9px;color:#5c5567}.arena{border:1px solid #373042;border-radius:12px;background:#101018;overflow:hidden;box-shadow:0 15px 70px #0003}.arena-top{padding:18px 21px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #24212e}.arena-top>div:first-child{display:flex;align-items:center;gap:13px}.arena-top b{font-size:11px;border-left:1px solid #43344e;padding-left:13px;color:#d4b9ff;font-weight:500}.arena-actions{display:flex;gap:6px}.arena-actions button{font-size:10px;padding:6px 9px;background:transparent}.timer-row{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 10px;color:#80778a;font-size:10px}.timer-row strong{font-size:23px;color:#d9c3ff;font-family:monospace;font-weight:400}.timer-row strong span{font-size:12px;margin-left:4px;color:#756783}.time-track{height:3px;margin:0 22px;background:#2e233c}.time-track>div{height:100%;background:linear-gradient(90deg,#684c94,#c1a1ff);width:100%;transition:width .1s linear}.canvas-wrap{position:relative;margin:14px;aspect-ratio:1.18;overflow:hidden;border-radius:6px;background:#0c0c14}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;background:#0c0b17dd;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:15px}.overlay.hidden{display:none}.overlay-mark{font:88px Georgia;color:#b699f7;text-shadow:0 0 40px #8d53e9;margin-bottom:16px}.overlay h2{font-size:24px;font-weight:500;letter-spacing:2px;margin:16px 0}.overlay p{font-size:12px;line-height:2;color:#a79bb8;margin:0 0 24px}.primary{background:#bba0f2;border-color:#c7aaff;color:#201032;padding:13px 28px;min-width:180px;box-shadow:0 0 30px #8b5bd52b;font-weight:600}.primary:hover{background:#d0b7ff;color:#201032}.primary span{margin-left:24px}.overlay small{font-size:9px;color:#70647e;margin-top:20px}.arena-bottom{padding:15px 20px;border-top:1px solid #24212e;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#a296b0}.arena-bottom>span{display:flex;align-items:center;gap:5px}kbd{font:9px monospace;padding:3px 4px;border-radius:3px;border:1px solid #3b3346;color:#7f738e}.red-dot,.blue-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px;background:#ff527d;box-shadow:0 0 10px #ff527d77}.blue-dot{background:#50baff;box-shadow:0 0 10px #50baff77}.collision{color:#54435e;gap:8px!important}.collision b{color:#b594f3}.right{display:grid;gap:18px}.charge-orb{position:relative;margin:25px auto 20px;width:126px;height:126px;display:grid;place-items:center;background:radial-gradient(circle,#8558bd30,transparent 70%);border:1px solid #463259;border-radius:50%;box-shadow:inset 0 0 30px #6c3e9a15,0 0 25px #6c3e9a15}.charge-orb:before,.charge-orb:after{content:'';position:absolute;inset:7px;border:1px dashed #684a8c44;border-radius:50%}.charge-orb:after{inset:17px;border-style:solid}.charge-orb>span{font:36px Georgia;color:#d4b6ff}.charge-orb small{font:13px monospace;margin-left:3px;color:#8c6db2}.orbit{position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;border-top-color:#c0a0ff;transform:rotate(25deg)}.charge h3{text-align:center;font-size:17px;font-weight:500;margin:0 0 10px;letter-spacing:2px}.charge p{text-align:center;color:#81728f;font-size:10px;line-height:1.9}.segments{display:flex;gap:5px;margin-top:23px}.segments i{height:5px;background:#30253c;flex:1;border-radius:2px;transition:.4s}.segments i.full{background:#be99ff;box-shadow:0 0 12px #9a68f755}.charge-label{display:flex;justify-content:space-between;font-size:9px;color:#796889;margin-top:10px}.charge-label b{font-weight:400;color:#ba9ce2}.guide .section-label{margin-bottom:22px}.step{display:flex;gap:12px;margin-bottom:19px}.step>b{font:12px Georgia;color:#79608e;padding-top:3px}.step p{margin:0}.step strong{font-size:11px;font-weight:500;color:#b9acc9;display:block;margin-bottom:7px}.step p span{font-size:10px;line-height:1.8;color:#7b7087}.mobile-controls{border-top:1px solid var(--line);padding-top:14px;text-align:center}.select{display:flex;gap:6px}.select button{font-size:10px;padding:7px;flex:1}.select button.selected{background:#452237;border-color:#9f405e;color:#ff9bb7}#selectBlue.selected{background:#14364c;border-color:#3f91bd;color:#8dd8ff}.dpad{display:grid;grid-template-columns:repeat(3,35px);justify-content:center;gap:5px;margin:10px auto}.dpad button{padding:6px;touch-action:none;user-select:none}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-row:2;grid-column:1}.dpad button:nth-child(3){grid-row:2;grid-column:2}.dpad button:nth-child(4){grid-row:2;grid-column:3}.mobile-controls small{font-size:9px;color:#736780}footer{padding:25px 0;display:flex;justify-content:space-between;color:#544c60;font-size:9px;letter-spacing:1px}footer i{margin:0 9px}#flashLabel{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font:500 70px serif;color:white;text-shadow:0 0 25px #d29aff,0 0 70px #a24fff;pointer-events:none}#flashLabel.show{display:flex;animation:burst 1.5s forwards}@keyframes burst{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}@media(min-width:1450px){.canvas-wrap{aspect-ratio:1.2}}@media(max-width:1150px){.app{padding:0 24px}.layout{grid-template-columns:180px minmax(300px,1fr) 210px;gap:14px}.panel{padding:15px}.arena-bottom{padding:13px 10px}.arena-actions button{padding:6px}.arena-top{padding:15px 12px}.brand-sub{display:none}.collision{display:none!important}}@media(max-width:920px){.layout{grid-template-columns:minmax(0,1fr) 220px}.left{display:none}.heading h1{font-size:27px}.edition{display:none}.canvas-wrap{aspect-ratio:1}.arena-bottom{justify-content:space-around}.right{gap:14px}.charge-orb{margin:18px auto;width:100px;height:100px}.guide .step{margin-bottom:12px}}@media(max-width:620px){.app{padding:0 15px}header{height:65px}.brand{font-size:16px;gap:7px}.sigil{font-size:32px}.header-right{font-size:10px}.icon{margin-left:2px;padding:6px}.heading{padding:25px 0 22px}.heading h1{font-size:23px;line-height:1.5;margin:8px 0}.heading p{font-size:10px;line-height:1.7}.eyebrow{font-size:8px}.layout{display:flex;flex-direction:column;gap:14px}.arena{width:100%}.arena-top{padding:13px 12px}.arena-actions button{font-size:9px}.arena-top b{font-size:10px}.canvas-wrap{margin:8px;aspect-ratio:1.08}.overlay h2{font-size:20px}.overlay-mark{font-size:65px;margin-bottom:8px}.overlay p{font-size:11px;margin-bottom:17px}.overlay small{margin-top:13px}.arena-bottom{font-size:9px}.right{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:10px}.panel{padding:13px}.charge-orb{width:90px;height:90px;margin:17px auto}.charge-orb>span{font-size:28px}.charge h3{font-size:14px}.charge p{font-size:9px}.guide .step{display:none}.guide .section-label{margin-bottom:10px}.mobile-controls{border:0;padding:0}.dpad{grid-template-columns:repeat(3,38px);gap:6px;margin-top:17px}.dpad button{padding:9px}.guide .section-label>span{display:none}.mobile-controls small{font-size:8px;line-height:2;display:block}footer{font-size:8px;line-height:1.8;gap:20px}footer>span:last-child{text-align:right}.charge-label{margin-top:10px}}
@media (pointer:coarse){button{min-height:42px;-webkit-tap-highlight-color:transparent}.dpad{grid-template-columns:repeat(3,48px);gap:7px}.dpad button{height:48px;font-size:19px}.select button{font-size:12px}.mobile-controls{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.arena-actions button{min-height:36px}.guide .step{display:none}.guide .section-label{margin-bottom:12px}.mobile-controls small{line-height:1.8}.dpad{margin-top:16px}}@media (pointer:coarse) and (min-width:621px) and (max-width:1180px){.layout{grid-template-columns:minmax(0,1fr) 220px}.left{display:none}.canvas-wrap{aspect-ratio:1.12}.app{padding:0 22px}.right{gap:14px}.heading{padding:25px 0}.charge-orb{width:100px;height:100px;margin:18px auto}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}
canvas{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}canvas.dragging{cursor:grabbing}.drag-instruction{text-align:center;color:#baa1dd;font-size:11px;letter-spacing:.5px;padding:13px 10px 0}.mobile-controls .dpad{display:none}.mobile-controls small{display:block;font-size:11px;line-height:1.9;color:#b4a1cb;margin-top:14px}.mobile-controls .select button{cursor:default}.canvas-wrap{overscroll-behavior:contain}
.domain-skill{margin:14px 22px 0;padding:12px 14px;border:1px solid #334958;border-radius:9px;background:linear-gradient(110deg,#10202c,#17152a)}.domain-main{display:flex;align-items:center;justify-content:space-between;gap:10px}.domain-main strong{font-size:13px;color:#b5eaff;letter-spacing:1px}.domain-main small{display:block;color:#88a3b6;font-size:10px;margin-top:5px}.domain-main button{min-height:44px;padding:9px 16px;background:#b2e8ff;color:#142a3c;border-color:#b2e8ff;font-weight:600}.domain-main button:disabled{background:#1a2a35;color:#6a8597;border-color:#344856;cursor:default}.domain-meter{display:flex;align-items:center;gap:10px;margin-top:12px}.domain-meter>div{height:5px;border-radius:3px;background:#25333e;flex:1;overflow:hidden}#domainBar{height:100%;width:0;background:linear-gradient(90deg,#5fa2da,#c2efff)}#domainPercent{font:10px monospace;color:#9dc4db;min-width:30px;text-align:right}.domain-skill p{font-size:9px;line-height:1.7;color:#7e9aae;margin:7px 0 0}.arena.domain-active{border-color:#8fdcff;box-shadow:0 0 45px #4cafff30}.domain-active .domain-skill{border-color:#79cbea;background:#133047}.segments{gap:4px}#flashLabel{font-size:clamp(26px,5vw,56px)}@media(max-width:620px){.domain-skill{margin:12px 12px 0;padding:10px 12px}.domain-main strong{font-size:12px}.domain-main button{font-size:12px}.domain-skill p{font-size:9px}.overlay p{font-size:10px}.overlay h2{margin:10px 0}.overlay-mark{font-size:50px}}