/* BATTLE-READABILITY-01: anchors are feet positions shared by both columns. */
.is-playfield #arena.arena{height:clamp(350px,calc(100svh - 190px),610px)}
.is-playfield #arena .unit{width:76px;height:78px}
.is-playfield #arena .unit img{height:60px;max-width:72px}
.is-playfield #arena .emotion-mark:after{content:none}
.is-playfield #arena .box{width:40px;height:40px;z-index:10}
.is-playfield #arena .box img{width:36px;height:34px}
.is-playfield #arena .box-count{bottom:0;right:0;width:16px;font-size:10px;line-height:15px}
.is-playfield #arena .stage-health{margin-top:-1px;z-index:40}
.unit-status{position:absolute;z-index:40;transform:translate(-50%,2px);display:flex;align-items:center;justify-content:center;gap:3px;height:18px;pointer-events:none;white-space:nowrap}
.unit-status>span{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:18px;border:1px solid #b39974;border-radius:3px;background:#fbefd9ed;color:#783f3d;font:700 10px/1 sans-serif}
.unit-status img{width:17px;height:16px;object-fit:contain}.unit-status .status-grudge{padding:0 3px}
.is-playfield #arena .grudge-cast{width:30px;transform:translate(-50%,-50%)}
.is-playfield #arena .grudge-cast .paper-icon{width:29px;height:29px}
.is-playfield #arena .pair-performance{width:82px}
.is-playfield #arena .pair-performance img{width:35px;height:30px}
.is-playfield #arena .pair-performance small{max-width:82px;font-size:10px;padding:2px 3px}
.brief-feedback{animation:readability-brief .85s both!important}
@keyframes readability-brief{0%{opacity:0;scale:.85}15%,75%{opacity:1;scale:1}100%{opacity:0;visibility:hidden}}
/* One primary receipt, fixed-height scrollable text, optional full explanation. */
.battle-explanation{background:#34565a;color:#f9edce;font-size:12px}
.battle-explanation summary{cursor:pointer;padding:5px 12px;min-height:28px;line-height:18px}
.battle-explanation .causal{max-height:120px;overflow:auto;min-height:0;padding:8px 12px}
#app:has(#arena) .event{height:70px;min-height:70px;overflow:auto;padding:6px 12px;font-size:13px;line-height:1.5}
#app:has(#arena) .play-controls{padding:7px 10px calc(7px + env(safe-area-inset-bottom));position:sticky;bottom:0;z-index:45;gap:6px}
#app:has(#arena) .play-controls button{min-height:44px}
#app:has(#arena) .controls-note{margin:0;padding:4px 6px;font-size:10px}
@media(min-width:700px){.is-playfield #arena.arena{height:clamp(470px,calc(100svh - 230px),610px);aspect-ratio:auto;background-size:auto 100%}.is-playfield #arena .unit{width:90px;height:90px}.is-playfield #arena .unit img{height:72px;max-width:84px}}
@media(max-width:350px){.is-playfield #arena .unit{width:64px;height:63px}.is-playfield #arena .unit img{height:45px;max-width:60px}#app:has(#arena) .event{height:64px;min-height:64px;font-size:12px}.is-playfield #arena .unit:before{left:8px;right:8px}.unit-status{gap:2px}.is-playfield #arena .pair-performance{width:72px}.is-playfield #arena .pair-performance small{max-width:72px}}
@media(prefers-reduced-motion:reduce){.brief-feedback{animation:readability-brief .85s both!important}}
/* Symmetric trapezoid; crop the original stage through CSS, without new stage art. */
.is-playfield #arena.arena{height:clamp(330px,calc(100svh - 230px),590px);background-size:auto 150%;background-position:center 80%}
.is-playfield #arena .unit img{bottom:12px}
@media(min-width:700px){.is-playfield #arena.arena{height:clamp(470px,calc(100svh - 230px),610px);background-size:auto 150%;background-position:center 80%}.is-playfield #arena .unit img{height:54px;max-width:74px}}
@media(max-width:699px) and (max-height:649px){.is-playfield #arena.arena{background-size:auto 200%;background-position:center 67%}.is-playfield #arena .unit{height:54px;width:64px}.is-playfield #arena .unit img{height:34px;max-width:57px;bottom:10px}.unit-status{height:15px}.unit-status>span{height:15px;min-width:15px;font-size:9px}.unit-status img{height:14px;width:14px}}
/* Pressing a transparent unit keeps its footprint in place. */
.is-playfield #arena .unit:active{transform:translate(-50%,-100%)}
.is-playfield #arena .box:active{transform:translate(-50%,-50%)}
/* Statuses sit beside HP, outside the body lane, in one deterministic row. */
.unit-status[data-col="0"]{transform:translate(calc(-100% - 25px),-100%)}
.unit-status[data-col="1"]{transform:translate(25px,-100%)}
.unit-status:after{content:"";position:absolute;width:7px;top:50%;border-top:1px solid #e9d1a2}
.unit-status[data-col="0"]:after{left:100%}.unit-status[data-col="1"]:after{right:100%}
@media(max-width:350px){.unit-status[data-col="0"]{transform:translate(calc(-100% - 23px),-100%)}.unit-status[data-col="1"]{transform:translate(23px,-100%)}}
/* One small icon language for persistent effects and temporary casts. */
.vfx-node{position:absolute;pointer-events:none;box-sizing:border-box}
.vfx-status{z-index:41;display:grid;gap:3px;align-items:center;justify-content:start;transform:none}
.vfx-token{position:relative;display:flex;align-items:center;justify-content:center;height:var(--vfx-size);background:#fbefd9e8;border:1px solid #b39974;border-radius:4px;box-shadow:0 1px 2px #342b2633}
.vfx-negative .vfx-token{border-color:#aa7965;background:#fae7d8eb}
.vfx-token img{width:var(--vfx-size);height:calc(var(--vfx-size) - 2px);object-fit:contain;display:block}
.vfx-token b{position:absolute;right:-2px;bottom:-4px;border-radius:3px;background:#fff0d3;color:#50372c;padding:0 1px;font:700 9px/12px system-ui}
.vfx-flash{z-index:28;display:flex;align-items:center;justify-content:center;animation:vfx-brief .85s both}
.vfx-flash img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 2px #263b4455)}
@keyframes vfx-brief{0%{opacity:0;scale:.8}15%,70%{opacity:1;scale:1}100%{opacity:0;visibility:hidden}}
.vfx-node.damage-pop{z-index:42}
.arena[data-visual-category=protection] .fx path{stroke:#9ee4df}
.arena[data-visual-category=box] .fx path{stroke:#ddbb79}
.duel-stage{position:relative;overflow:hidden}.duel-stage .vfx-token img{width:var(--vfx-size);height:calc(var(--vfx-size) - 2px)}
.duel-stage .vfx-flash img{width:28px;height:28px}
@media(prefers-reduced-motion:reduce){.vfx-flash{animation:vfx-brief .85s both!important}}
/* Skill damage has distinct foot-level origin/recipient cues, without a normal swing. */
#arena .unit.vfx-origin:before{border:2px solid #779c88;box-shadow:0 0 4px #d4efd1}
#arena .unit.vfx-hit:before{border:2px solid #c07662;box-shadow:0 0 4px #f0c3a0}
.vfx-token.vfx-enter{animation:vfx-state-enter .65s ease-out}
@keyframes vfx-state-enter{0%{box-shadow:0 0 0 3px #efbf94;filter:brightness(1.35)}100%{box-shadow:0 1px 2px #342b2633;filter:brightness(1)}}

/* Local mentor cues use the existing foot-anchor collision placement. */
.mentor-motion{position:absolute;z-index:28;pointer-events:none;display:flex;align-items:center;flex-direction:column;animation:mentor-give 760ms ease-out both}
.mentor-motion img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 2px #fff)}
.mentor-motion small{font-size:9px;line-height:12px;white-space:nowrap;color:#362a25;background:#fff9e9e8;border-radius:3px}
.mentor-teaching_team{animation:mentor-teach 850ms ease-out both}.mentor-teaching_team img{width:32px;height:30px}
.mentor-lesson_return{animation:mentor-give 850ms ease-in-out both}.mentor-lesson_use{animation:mentor-use 550ms ease-out both}
@keyframes mentor-give{0%{opacity:0;transform:translate(var(--mentor-x),var(--mentor-y)) scale(.5)}20%{opacity:1}75%{opacity:1;transform:translate(0,0) rotate(-8deg)}100%{opacity:0;transform:translate(0,0) scale(.85)}}
@keyframes mentor-teach{0%{opacity:0;transform:translateY(10px) scale(.6)}25%,70%{opacity:1;transform:translateY(-3px) scale(1.08)}100%{opacity:0;transform:translateY(-12px)}}
@keyframes mentor-use{0%{opacity:1;transform:scale(.7)}45%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:translateY(-10px) scale(.4)}}
@media(prefers-reduced-motion:reduce){.mentor-motion{animation:none}}

/* Existing skill icon, now presented as a small paper badge for a cast. */
.vfx-node.paper-skill-badge{padding:3px;background:#f4e3bf;border:1px solid #ac875a;border-radius:2px 5px 2px 3px;box-shadow:2px 3px 1px #35281c55}