/* Shared camera: the image and both foot anchors retain the same 16:9 frame. */
:is(html[data-art=color] .stage,.scene){height:auto;aspect-ratio:16/9;container-type:inline-size}
:is(html[data-art=color] .stage,.scene):before{background-image:var(--arena-image,url('/assets/color/battle/garden.png'));background-size:100% 100%;background-position:center;opacity:1;mix-blend-mode:normal}
.scene[data-backdrop=aurora]{--arena-image:url('/assets/color/battle/aurora.png')}
.scene[data-backdrop=sakura]{--arena-image:url('/assets/color/battle/sakura.png')}
:is(html[data-art=color] .stage,.scene)[data-backdrop=neutral]:before{background:radial-gradient(ellipse at 55% 50%,#2e414c,#17262f)}
html[data-art=color] .stage:after{background:none}
:is(html[data-art=color] .stage,.scene) :is(.arena-rings,.ground){display:none}
/* Feet: near (23%,88%), far (77%,56%). No cover crop or mobile re-framing. */
:is(html[data-art=color] .stage,.scene) :is(.player-actor,.ally-actor){left:4%;right:auto;top:auto;bottom:12%;width:38%;height:62%}
:is(html[data-art=color] .stage,.scene) .enemy-actor{left:61%;right:auto;top:auto;bottom:44%;width:32%;height:49%}
:is(html[data-art=color] .stage,.scene) .actor img{object-fit:contain;object-position:center bottom;mask-image:none}
:is(html[data-art=color] .stage,.scene) .actor:before{content:'';position:absolute;z-index:-1;left:24%;bottom:0;width:53%;height:7%;border-radius:50%;background:radial-gradient(ellipse,#17233170 0%,#17233138 40%,transparent 72%);transform:rotate(-8deg);pointer-events:none}
:is(html[data-art=color] .stage,.scene) :is(.actor-name,.actor>span){top:100%;bottom:auto;margin-top:2px;font-size:clamp(7px,1.2cqw,11px);padding:1px 9px;white-space:nowrap}
:is(html[data-art=color] .stage,.scene) .hud{width:32%;padding:clamp(5px,1.3cqw,14px);border-left-width:3px}
:is(html[data-art=color] .stage,.scene) .enemy-hud{left:3%;top:5%;bottom:auto}
:is(html[data-art=color] .stage,.scene) :is(.player-hud,.ally-hud){right:3%;bottom:5%;top:auto}
:is(html[data-art=color] .stage,.scene) .hud strong{font-size:clamp(12px,2.5cqw,25px)}
:is(html[data-art=color] .stage,.scene) .hud small{font-size:clamp(6px,.85cqw,9px);letter-spacing:.5px}
:is(html[data-art=color] .stage,.scene) .hud progress{height:clamp(4px,.8cqw,8px);margin:clamp(3px,.8cqw,9px) 0}
:is(html[data-art=color] .stage,.scene) :is(.hud>span,.hud-info){font-size:clamp(7px,1.15cqw,11px)}
@container(max-width:480px){:is(html[data-art=color] .stage,.scene) .hud small{display:none}}