.wang-active>canvas,.wang-active>.gameTop,.wang-active>#gameBottom,.wang-active>#gameIntro{display:none!important}
#wangFight{position:absolute;inset:0;overflow:hidden;background:#151410;font-family:Arial,'PingFang SC',sans-serif;color:#fff4df;line-height:1.4;touch-action:none;isolation:isolate}#wangFight *{box-sizing:border-box}#wangFight canvas{position:absolute;inset:0;width:100%;height:100%}#wangFight .wf-hud{position:absolute;top:20px;left:5%;right:5%;pointer-events:none}#wangFight small{font-size:10px;letter-spacing:1px;color:#d9bb87}#wangFight h2{font-size:22px;line-height:1.3;font-weight:500;margin:8px 0 18px;letter-spacing:0}#wangFight .wf-bars{display:flex;gap:18px}#wangFight label{flex:1;font-size:11px;text-shadow:0 2px 4px #000}#wangFight label b{float:right;font-size:12px;font-weight:400}#wangFight label i{display:block;margin-top:6px;background:#ffffff26;height:5px;transform:skewX(-15deg)}#wangFight label em{display:block;height:100%;background:#a8d5d0;transition:width .1s}#wangFight label:last-child em{background:#e7b76e}#wangFight .wf-meta{display:flex;justify-content:space-between;margin-top:9px;font-size:10px;color:#e2d6c4}#wangFight #wfClock{font-size:17px;font-variant-numeric:tabular-nums}#wangFight #wfHelpers{font-size:10px;color:#f2b68b}#wangFight .wf-call{position:absolute;top:28%;width:100%;text-align:center;font-size:13px;padding:8px 10px;color:#ffe0a2;text-shadow:0 2px 8px #000;pointer-events:none}#wangFight .wf-controls{position:absolute;bottom:12px;left:4%;right:4%;display:flex;flex-direction:column;gap:10px}#wangFight .wf-resources{display:flex;justify-content:space-between;font-size:10px;color:#d2c7b6;text-shadow:0 1px 4px #000}#wangFight .wf-resources b{font-weight:400;color:#ffe0a6}#wangFight button{margin:0;padding:0;border:1px solid #e8d1ac80;background:linear-gradient(150deg,#343b3edb,#141c24ed);color:#f8e7c5;cursor:pointer;touch-action:none;box-shadow:inset 0 0 0 3px #ffffff06,0 3px 10px #0004;font-family:inherit;font-weight:400;min-width:0}#wangFight button:active{background:#6b5a3d;transform:scale(.96)}#wangFight button:focus-visible{outline:2px solid #f8e7c5}#wangFight svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}#wangFight .wf-skills{display:flex;justify-content:flex-end;gap:9px}#wangFight .wf-skills button{width:64px;height:62px;border-radius:12px;display:grid;place-content:center;justify-items:center;position:relative;gap:3px}#wangFight button span{font-size:9px;white-space:nowrap}#wangFight button small{font-size:8px;letter-spacing:0;position:absolute;top:2px;right:5px;color:#d0b68c}#wangFight .available{border-color:#f2ce8b;box-shadow:0 0 12px #e7a85335,inset 0 0 10px #e7a85318}#wangFight .wf-bottom{display:flex;justify-content:space-between;align-items:end;gap:10px}#wangFight .wf-move{display:flex;gap:5px}#wangFight .wf-move button{width:40px;height:48px;border-radius:50%;display:grid;place-items:center}#wangFight .wf-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:255px}#wangFight .wf-actions button{position:relative;width:42px;height:50px;border-radius:50%;display:grid;justify-items:center;align-content:center;gap:2px}#wangFight .wf-actions small{display:none}#wangFight .wf-overlay{position:absolute;inset:0;background:#0e151ddd;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;z-index:5;font-size:24px;backdrop-filter:blur(5px)}#wangFight .wf-overlay[hidden]{display:none}#wangFight .wf-overlay p{font-size:12px;line-height:1.7}#wangFight .wf-overlay button{padding:12px 25px;border-radius:10px;font-size:13px}#wangFight .wf-sub{display:none}
@media(max-height:700px){#wangFight .wf-hud{top:12px}#wangFight h2{font-size:18px;margin:4px 0 10px}#wangFight .wf-controls{gap:5px;bottom:7px}#wangFight .wf-skills button{height:48px;width:58px}#wangFight .wf-skills svg{width:20px;height:20px}#wangFight .wf-actions button{width:36px;height:42px}#wangFight .wf-actions svg{width:20px;height:20px}}
/* Painted combat controls, shared atlas from the established combat UI. */
#wangFight{container-type:size}
#wangFight .wf-hud{top:3%;left:4%;right:4%}
#wangFight h2{font-size:clamp(21px,2.3cqw,34px)}
#wangFight .wf-hud small,#wangFight label,#wangFight label b,#wangFight .wf-meta,#wangFight #wfHelpers{font-size:clamp(11px,1.15cqw,17px)}
#wangFight .wf-call{font-size:clamp(14px,1.5cqw,22px);top:24%;background:linear-gradient(90deg,transparent,#111b,transparent)}
#wangFight .wf-call:empty{display:none}
#wangFight .wf-controls{bottom:3%;gap:12px;left:3%;right:3%}
#wangFight .wf-skills{gap:15px}
#wangFight .wf-skills button,#wangFight .wf-actions button{width:clamp(54px,7cqw,98px);height:clamp(54px,7cqw,98px);border-radius:50%;position:relative;overflow:visible;flex-shrink:0}
#wangFight .painted{background:transparent;border:0;box-shadow:none}
#wangFight .painted>svg{visibility:hidden}
#wangFight .skill-art{position:absolute;inset:0;background:url('painted-controls.png') var(--ix) var(--iy)/300% 300%;border-radius:50%;pointer-events:none}
#wangFight .painted span{position:absolute;bottom:-8px;background:#100d09d9;padding:1px 7px;border-radius:3px;font-size:clamp(10px,1cqw,14px);z-index:2}
#wangFight button small{top:4px;right:4px;z-index:3;background:#18140fe6;border-radius:10px;padding:1px 4px;font-size:clamp(9px,1cqw,13px)}
#wangFight .charge-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ffe2a1 var(--charge,0deg),#19161466 0);mask:radial-gradient(transparent 64%,#000 66%,#000 69%,transparent 71%);pointer-events:none}
#wangFight .available{filter:drop-shadow(0 0 7px #ffc76680)}
#wangFight [data-act=super].available{animation:ult-ready 1s ease-in-out infinite alternate}
#wangFight [data-act=super][aria-disabled=true] .skill-art{filter:saturate(.45) brightness(.62)}
#wangFight .wf-actions{max-width:none;gap:10px}
#wangFight .wf-move button{width:clamp(40px,5.5cqw,78px);height:clamp(48px,6cqw,84px)}
#wangFight .wf-resources{font-size:clamp(11px,1.2cqw,17px)}
#wangFight .denied{animation:skill-denied .35s}
@keyframes ult-ready{to{filter:drop-shadow(0 0 15px #ffb330)}}
@keyframes skill-denied{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@container (max-width:600px){#wangFight .wf-controls{gap:10px;bottom:4%}#wangFight .wf-skills button{width:60px;height:60px}#wangFight .wf-actions{gap:4px}#wangFight .wf-actions button{width:40px;height:46px}#wangFight .wf-bottom{gap:5px}#wangFight .wf-move{gap:3px}#wangFight .wf-move button{width:34px;height:46px}#wangFight .wf-skills{gap:12px}#wangFight .painted span{font-size:9px;padding:1px 3px}#wangFight .wf-call{top:26%}}

#wangFight .wf-skills button.casting{filter:brightness(1.65);box-shadow:0 0 18px #ffd79b,inset 0 0 12px #ffe7a8;transform:scale(1.08)}
#wangFight .wf-skills button[data-act=rewind].casting{box-shadow:0 0 22px #68dcff,inset 0 0 16px #a7eeff}

#wangFight .motion-icon .skill-art{width:100%;height:100%;background:none;object-fit:contain;filter:drop-shadow(0 0 4px #ffbc5b55)}

#wangFight button small:empty{display:none}

#wangFight .motion-icon .skill-art{background-image:url('motion-controls.png');background-size:200% 100%;background-position:0 0;filter:none}
#wangFight [data-act=jump].motion-icon .skill-art{background-position:100% 0}

/* Match movement controls to the existing painted metallic joystick rim. */
#wangFight .wf-move{gap:10px;position:relative;padding-bottom:10px}
#wangFight .wf-move button{position:relative;border:0;aspect-ratio:1;height:auto;background:transparent;box-shadow:none;isolation:isolate}
#wangFight .wf-move button::before{content:'';position:absolute;inset:0;background:url('painted-controls.png') 0% 100%/300% 300%;border-radius:50%;z-index:-1}
#wangFight .wf-move button svg{width:42%;height:42%;stroke:#ffe7b0;stroke-width:3;filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 4px #e6a047)}
#wangFight .wf-move button:active{filter:brightness(1.4)}
#wangFight .wf-move::after{content:'移动';position:absolute;bottom:-6px;left:0;right:0;text-align:center;color:#e9d3aa;font-size:10px}
#wangFight button.defending{filter:brightness(1.25) drop-shadow(0 0 9px #85eaff)}

/* Explicit image atlas avoids CSS background painting failures on controls. */
#wangFight .atlas-art{position:absolute;inset:0;display:block;overflow:hidden;border-radius:50%;background:none;pointer-events:none}
#wangFight .atlas-art img{position:absolute;display:block;width:300%;height:300%;max-width:none;max-height:none;object-fit:fill;pointer-events:none}
#wangFight .wf-move button::before{display:none}
#wangFight .wf-move button>svg{position:relative;z-index:1}