/* FP QUEST — battle-extra.css（第6版・接地担当）。app.css のあとに読み込まれる。
   モンスターの足元を各背景の地面ラインに合わせる（battle/ground.js + scene.js place()）。
   位置は JS が bottom / --foot-y / --sh-* / --ring-* で与える。transform はアニメ用に空けておく。 */

/* 変形の基点は箱の底ではなく足元ライン（突進のスカッシュ・is-grow の拡大で足が地面にめり込まない） */
.fighter{transform-origin:50% var(--foot-y,100%)}
.fighter__sprite{transform-origin:50% var(--foot-y,100%)}
.fighter__sprite .legacy-sprite{filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}

/* 待機アニメ: 接地タイプは足を地面につけたまま呼吸（上下に跳ねない）。浮遊タイプはふわふわ上下し、影は連動して縮む */
@keyframes fidleGround{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-1px) scale(1.014,.986)}}
@keyframes fidleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fidleFly{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1.2deg)}}
@keyframes fshadowFloat{0%,100%{transform:scale(1);opacity:var(--sh-o,.5)}50%{transform:scale(.86);opacity:calc(var(--sh-o,.5) * .75)}}
.fighter.is-idle .fighter__sprite{animation-name:fidleGround}
.fighter.is-float.is-idle .fighter__sprite{animation-name:fidleFloat;animation-duration:3.2s}
.fighter.is-fly.is-idle .fighter__sprite{animation-name:fidleFly;animation-duration:3.6s}
.fighter.is-float.is-idle .fighter__shadow,.fighter.is-fly.is-idle .fighter__shadow{animation:fshadowFloat 3.2s ease-in-out infinite;transform-origin:50% 50%}
.fighter.is-fly.is-idle .fighter__shadow{animation-duration:3.6s}
.fighter--opp.is-idle .fighter__shadow{animation-delay:-1.3s}
/* 浮遊タイプは地面から離れているぶん、本体の落ち影は長く薄く */
.fighter.is-float .fighter__sprite img,.fighter.is-fly .fighter__sprite img,.fighter.is-float .fighter__sprite .legacy-sprite,.fighter.is-fly .fighter__sprite .legacy-sprite{filter:drop-shadow(0 10px 10px rgba(0,0,0,.28))}

/* ガードリングは箱の中心ではなく、見えている本体の中心に（小さい進化段階でも本体を囲む） */
.guard-ring{inset:auto;left:var(--ring-l,-6%);top:var(--ring-t,-6%);width:var(--ring-s,112%);height:var(--ring-s,112%)}

/* 動きを減らす設定では影も止める */
:root[data-motion="reduce"] .fighter .fighter__shadow{animation:none}

/* ファイター台: 待機中のカメラ揺れ（scene.js sway()）で最前景レイヤーと同じだけ動き、足元が地面に貼りつく。攻撃時のパンは背景だけ動く（従来どおり） */
.arena__stage{position:absolute;inset:0;transition:transform .5s var(--ease-out);will-change:transform;pointer-events:none}

/* HP ボックスに頭がかかる大きいスプライト（ボス×デスクトップなど）は place() が --fit で縮める */
.fighter{width:calc(var(--fw) * var(--fscale,1) * var(--fit,1));height:calc(var(--fw) * var(--fscale,1) * var(--fit,1))}

/* 第6版の統合時: スマホ横向き（横長で高さ 500px 以下）。縦 2 段のままだと戦場が画面の半分（約 190px）になり、HP 欄がモンスターを
   ほぼ隠していた（tools/ground_check.py MOBILE=1 844x390／932x430 で確認）。戦場を左に全高で置き、コマンドは右の列に縦並び、
   HP 欄は 2 行に詰める。足元の接地は scene.js place() がアリーナの寸法から計算し直す。 */
@media (orientation:landscape) and (max-height:500px){
  .battle{flex-direction:row}
  .arena{flex:1 1 auto;min-width:0}
  .cmd{flex:none;width:clamp(230px,34vw,320px);max-width:none;margin:0;align-content:start;overflow-y:auto;overscroll-behavior:contain;gap:8px;
    padding:calc(8px + var(--sat)) calc(10px + env(safe-area-inset-right,0px)) calc(8px + var(--sab)) 10px;background:#0b0e1a;border-left:1px solid rgba(255,255,255,.08)}
  .cmd__head{flex-wrap:wrap;row-gap:6px;min-height:0}
  .cmd__label{white-space:normal}
  .cmd__grid{grid-template-columns:1fr;gap:6px}
  .cmdbtn{min-height:0;padding:7px 10px;grid-template-columns:28px 1fr auto;grid-template-areas:"ic nm tg" "ic sk tg";justify-items:start;align-items:center;column-gap:8px;row-gap:1px;text-align:left;border-radius:14px}
  .cmdbtn svg{grid-area:ic;width:26px;height:26px}
  .cmdbtn__name{grid-area:nm}
  .cmdbtn__skill{grid-area:sk;text-align:left}
  .cmdbtn__tag{grid-area:tg;align-self:center}
  .cmd__wait{min-height:64px}
  .cmd__log{text-align:left;font-size:12px}
  .hud{padding:calc(50px + var(--sat)) 10px 0 calc(10px + env(safe-area-inset-left,0px))}
  .hpbox{width:min(46%,250px);padding:5px 9px 6px;border-radius:12px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm rl" "bar num";align-items:center;column-gap:8px;row-gap:4px}
  .hpbox--opp{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"rl nm" "num bar"}
  .hpbox>.hpbox__name{grid-area:nm;font-size:12.5px}
  .hpbox>.hpbar{grid-area:bar;height:9px}
  .hpbox>.hpbox__num{grid-area:num;font-size:11px;gap:3px;justify-content:flex-end}
  .hpbox>:last-child{grid-area:rl;line-height:1}
  .hpbox__role{font-size:9.5px;padding:2px 6px}
  .fighter{--fw:min(56vh,34vw,240px)}
  .battle-exit{left:calc(12px + env(safe-area-inset-left,0px))}
  .battle-result{padding:10px;overflow-y:auto}
  .battle-result__box{padding:14px 16px;gap:8px}
  .battle-result__title{font-size:36px}
}