/* A shared feet anchor (160,274) and contact spacing from the source video. */
.arena{--sprite-size:clamp(170px,54cqw,215px);container-type:inline-size;background:#fffdf7!important;border-radius:22px}
.dohyo-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.venue-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;z-index:0;border-radius:inherit}
.venue-wash{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#fffdf708,transparent 42%,#fff8e926);border-radius:inherit}
.cinema-fighters>.venue-backdrop{width:100%;height:100%;object-fit:cover;filter:none}
.verdict .venue-backdrop,.verdict .venue-wash{display:none}
.sumo-sprite{position:relative;display:block;overflow:visible;--dir:1}
.sumo-sprite[data-character="tsukimaru"]{--dir:-1}
.sumo-sprite .pose-film{position:absolute;width:100%;height:100%;left:0;bottom:-14.375%;pointer-events:none}
.sumo-sprite::before{content:'';position:absolute;left:27%;width:46%;height:6%;bottom:-2%;background:radial-gradient(ellipse,#91704225,transparent 70%);pointer-events:none}
.arena .fighter{position:absolute;width:var(--sprite-size);height:var(--sprite-size);left:calc(50% - var(--sprite-size)/2 + var(--stance-x) + var(--pressure-shift,0px));right:auto;bottom:24%;filter:none;transform:none;transition:left .28s ease-out;--stance-x:calc(var(--sprite-size)*-.37)}
.arena .fighter.ghost{--stance-x:calc(var(--sprite-size)*.37)}
/* 取組中（と立合いのぶつかり）は、押し手の先どうしが真ん中で合う間合いに立つ（2026-09-26）。体は重ねない。
   --push-reach＝押しの絵で、手の先が体の中心から前へ出る長さ（力士の幅に対する割合）。絵を描き直したら測り直す（tests/push-contact-smoke.mjs が絵と照らす）。
   --palm-press＝手のひらを押し合わせるぶん、左右それぞれ重ねる（.04＝手が組み合う。スマホで手の重なり約16px。マスターが3案からB、2026-09-26）。 */
.sumo-sprite{--push-reach:.35;--palm-press:.04}
.sumo-sprite[data-character="hinata"]{--push-reach:.333}.sumo-sprite[data-character="tsukimaru"]{--push-reach:.327}.sumo-sprite[data-character="lightning-otter"]{--push-reach:.372}.sumo-sprite[data-character="snow-panda"]{--push-reach:.347}.sumo-sprite[data-character="lightning-squirrel"]{--push-reach:.377}.sumo-sprite[data-character="snow-penguin"]{--push-reach:.323}.sumo-sprite[data-character="sun-cat"]{--push-reach:.377}.sumo-sprite[data-character="grass-panda"]{--push-reach:.344}.sumo-sprite[data-character="grass-elephant"]{--push-reach:.364}
.sumo-sprite[data-character="moon-rabbit"]{--push-reach:.291}.sumo-sprite[data-character="rain-frog"]{--push-reach:.361}.sumo-sprite[data-character="wind-fox"]{--push-reach:.38}.sumo-sprite[data-character="earth-tanuki"]{--push-reach:.388}.sumo-sprite[data-character="flower-deer"]{--push-reach:.311}.sumo-sprite[data-character="fire-boar"]{--push-reach:.35}.sumo-sprite[data-character="rainbow-parakeet"]{--push-reach:.383}.sumo-sprite[data-character="rock-bear"]{--push-reach:.375}
.battle-arena.engaged .fighter.you,.entrance.launch .intro-lion{--stance-x:calc(var(--sprite-size)*(var(--palm-press) - var(--push-reach)))}
.battle-arena.engaged .fighter.ghost,.entrance.launch .intro-fox{--stance-x:calc(var(--sprite-size)*(var(--push-reach) - var(--palm-press)))}
/* 腕の組み合い（2026-09-26 マスター「階層をわける」）：取組中に2人とも押しの構えのあいだ（土俵に .arms-woven、characters.js の weaveArena）、
   押しの絵を 奥の腕（.arm-far）・体（.pose-film）・手前の腕（.arm-near）に分けて、奥の腕 2 ＜ 2人の体 3 ＜ 手前の腕 4 に重ねる。
   力士の箱は重なりの区切りを作らない（z-index:auto・will-change なし）ので、2人の層が交互に並ぶ。
   腕の層は隠していても animation が絵と同じ時刻で進むよう、display ではなく visibility で出し入れする。 */
.sumo-sprite .pose-arm{position:absolute;width:100%;height:100%;left:0;bottom:-14.375%;pointer-events:none;visibility:hidden}
.battle-arena.arms-woven>.fighter{z-index:auto;will-change:auto}
.battle-arena.arms-woven>.fighter>.pose-arm{visibility:visible}
.battle-arena.arms-woven>.fighter>.arm-far{z-index:2}.battle-arena.arms-woven>.fighter>.pose-film{z-index:3}.battle-arena.arms-woven>.fighter>.arm-near{z-index:4}
/* 取組中の動き（2026-09-26・マスターが3案から「小刻みにぶつかり合う」を採用）：本場所（.phone）の取組中だけ。技の見比べページ（*-tiers.html）の土俵は動かさない。
   動かすのは絵（.pose-film）だけ。当たりの動き（力士の箱の animation）とは別の要素なので重ならない。必殺技・よろけの振付の間と決着の演出の間は --bout-on を 0 にして止める。
   --bout-fwd／--bout-lean は相手へ向かう向き（自分は右、相手は左）。長さは力士の幅に対する割合。
   2人が同時に踏み込んで当たり、はね返る。強・弱・強の3回で1.6秒。踏み込みは最大で力士の幅の2%（スマホで約4px）、当たる瞬間に前へ最大1.8度傾き、少し浮く。
   規則は :where() で弱くしてある。技の演出が絵に付ける animation（もっくの踏ん張り・第2の技のつぶれなど）が来たら、そちらが勝つ。
   見送った2案（押し合って左右に・紙相撲のカタカタ）の数値は Obsidian「2026-09-26_行司ののこったと口パク」と Git の 0216af17 に残す。 */
@property --bout-y{syntax:'<number>';inherits:false;initial-value:0}
@property --bout-fwd{syntax:'<number>';inherits:false;initial-value:0}
@property --bout-lean{syntax:'<number>';inherits:false;initial-value:0}
@property --bout-on{syntax:'<number>';inherits:true;initial-value:1}
.battle-arena .fighter.you{--push-side:1}.battle-arena .fighter.ghost{--push-side:-1}
:where(.phone .battle-arena.engaged .fighter) :is(.pose-film,.pose-arm){translate:calc(var(--push-side)*var(--bout-fwd)*var(--bout-on)*var(--sprite-size)) calc(var(--bout-y)*var(--bout-on)*var(--sprite-size));rotate:calc(var(--push-side)*var(--bout-lean)*var(--bout-on)*1deg);transform-origin:50% 85.6%;transition:--bout-on .25s ease-out;animation:bout-clash 1.6s ease-out infinite}
.phone .battle-arena.engaged .fighter[data-special-motion] :is(.pose-film,.pose-arm),.phone.sumo-finishing .battle-arena .fighter :is(.pose-film,.pose-arm){--bout-on:0}
.motion-paused .sumo-sprite .pose-film,.motion-paused .sumo-sprite .pose-arm{animation-play-state:paused!important}
@keyframes bout-clash{0%,32%,60%,92%,100%{--bout-fwd:0;--bout-lean:0;--bout-y:0}10%{--bout-fwd:.016;--bout-lean:1.4;--bout-y:-.005}22%{--bout-fwd:-.006;--bout-lean:-.4;--bout-y:0}42%{--bout-fwd:.009;--bout-lean:.8;--bout-y:-.003}52%{--bout-fwd:-.004;--bout-lean:-.2;--bout-y:0}70%{--bout-fwd:.02;--bout-lean:1.8;--bout-y:-.007}82%{--bout-fwd:-.008;--bout-lean:-.6;--bout-y:0}}
.arena .arena-caption{background:#fffdf0e8;color:#706756;font-size:10px;bottom:5px;padding:1px 6px}
.arena .ring-label{background:#fffdf3e8;color:#817569;top:9px;padding:3px 9px}
.arena .ring-label b{color:#665d50}
.arena .ring-label>span{color:#75695a!important}
.lobby-arena{height:228px}.battle-arena{height:208px}.result-arena{height:188px}
.result-arena .fighter{--sprite-size:180px}
.result-arena.finish-you .you,.result-arena.finish-you .ghost,.result-arena.finish-ghost .you,.result-arena.finish-ghost .ghost{transform:none!important}
.phone .fighter.attacking{animation:contact-attack .32s ease-out}
.phone .fighter.receiving{animation:contact-hit .7s ease-out}
@keyframes contact-attack{35%{transform:translate(calc(var(--dir)*7px),-3px)}100%{transform:none}}
@keyframes contact-hit{20%{transform:translate(calc(var(--dir)*-10px),-4px)}65%{transform:translate(calc(var(--dir)*-5px),0)}100%{transform:none}}
.cinema-fighters{position:relative;height:224px;margin:0 -10px 16px;display:block;isolation:isolate;--sprite-size:clamp(176px,56cqw,240px)}
.cinema-fighters>.sumo-sprite{position:absolute;width:var(--sprite-size);height:var(--sprite-size);bottom:24%;left:calc(50% - var(--sprite-size)/2 + var(--stance-x));--stance-x:calc(var(--sprite-size)*-.35);z-index:2;filter:none;transition:left .35s ease-out}
.cinema-fighters>.intro-fox{--stance-x:calc(var(--sprite-size)*.35)}
.cinema-fighters .versus{display:none}
.sumo-cinema{container-type:inline-size}
.entrance{background:radial-gradient(ellipse at 5% 15%,#fff0c6,#fffcf5 46%,#e5edff);color:#625c58}
.entrance .cinema-fighters{border-radius:45% 45% 24px 24px;overflow:visible}
.entrance .cinema-rays{opacity:.15;background:repeating-conic-gradient(#eabf5e22 0deg 10deg,transparent 10deg 30deg)}
.entrance .cinema-kicker{color:#9d7b40;font-size:12px;letter-spacing:2px}
.entrance .cinema-title{font-size:clamp(31px,9cqw,46px);color:#705733;text-shadow:0 3px 0 #f0d6a5,0 6px 15px #cda76136}
.entrance .cinema-sub{color:#8e7c63;font-size:13px}
.entrance .cinema-beats i{border-color:#d5b775}.entrance .cinema-beats i.lit{background:#e9b84d;box-shadow:0 0 18px #f0bd6e55}
.entrance .intro-lion,.entrance .intro-fox{animation:none}
.entrance.launch{background:radial-gradient(ellipse at 50% 40%,#ffedbc,#fffcf5 55%,#e3edff)}
.entrance.launch .cinema-fighters{animation:none}
.verdict .cinema-fighters{height:224px}.verdict .dohyo-scene{opacity:0}
.verdict .intro-lion,.verdict .intro-fox{animation:none;transform:none}
.winner.triumph .intro-lion{width:var(--sprite-size);height:var(--sprite-size);--stance-x:0px;animation:none}
.winner.triumph .cinema-fighters{margin-bottom:12px}
.winner.triumph .cinema-fighters>.intro-lion{--sprite-size:280px}
.defeat .intro-lion,.defeat .intro-fox{transform:none!important}
.motion-paused .sumo-sprite{animation-play-state:paused!important}
@media(max-width:350px){.battle-arena{height:192px}.arena{--sprite-size:178px}.cinema-fighters{--sprite-size:182px}.winner.triumph .cinema-fighters>.intro-lion{--sprite-size:250px}}
@media(max-height:700px){.cinema-fighters,.verdict .cinema-fighters{height:190px;--sprite-size:190px}.winner.triumph .cinema-fighters>.intro-lion{--sprite-size:240px}}
/* 行司のほくと：力士の後ろ、土俵の奥に足をつけて立つ（力士より小さく）。大勝利の場面では主役に場所をゆずる */
.cinema-fighters>.intro-gyoji{width:calc(var(--sprite-size)*.56);height:calc(var(--sprite-size)*.56);left:calc(50% - var(--sprite-size)*.28);bottom:calc(24% + var(--sprite-size)*.12);transition:opacity .3s ease-out}
.verdict .cinema-fighters>.intro-gyoji{width:calc(var(--sprite-size)*.7);height:calc(var(--sprite-size)*.7);left:calc(50% - var(--sprite-size)*.35);bottom:22%}
.winner.triumph .cinema-fighters>.intro-gyoji,.venue-finale .cinema-fighters>.intro-gyoji{opacity:0}
/* 取組中の行司ほくと（2026-09-26）：土俵の右下の手前に立ち、力士と重ならない。のこった を掛けるときに構えを変えて口を動かす。
   狭い土俵では頭が力士の足の高さ（下から24%）より下に収まる大きさにする（ほくとの絵は箱の高さの77%）。横に余裕のある広い土俵では力士の半分。 */
.battle-arena>.arena-gyoji{position:absolute;z-index:2;aspect-ratio:1;width:auto;height:min(calc(var(--sprite-size)*.5),calc((24% - 5px)/.77));right:1.5%;bottom:3px;pointer-events:none}
@container (min-width:600px){.battle-arena>.arena-gyoji{height:calc(var(--sprite-size)*.5)}}