/* --- battle.css : 戦闘シーン・エフェクト --- */

#stage-container { 
    position: relative; 
    width: 1200px; 
    height: 600px; 
    overflow: hidden;
}
#stage { 
  width: 100%; height: 100%; 
  background: url('../assets/img/ryogoku-kokugikan.png') center bottom/cover no-repeat; 
  overflow: hidden; position: relative;
}

/* 模様を背景のすぐ上（0）に配置する */
#start-screen::before,
#char-select-screen::before {
    z-index: 0 !important;
}

/* アイコンや巻物が入っている箱を確実に手前（10）に出す */
#start-content-wrapper,
#select-scaling-wrapper {
    z-index: 10 !important;
}

/* 力士 */
.rikishi { position: absolute; bottom: 35px; width: 130px; height: 160px; left: 0; z-index: 10; will-change: transform; }
.rikishi-body { 
    width: 100%; height: 100%; 
    position: relative; 
    transform-origin: bottom center; 
    transition: filter 0.1s, transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    
    /* 追加: filterの変化をブラウザに予告し、GPUレイヤーを確保する */
    will-change: transform, filter;
    /* 追加: チラつき防止のおまじない */
    backface-visibility: hidden;
}
.body-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.head {
  position: absolute; top: -45px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 80px; background-position: center bottom; background-size: contain; background-repeat: no-repeat;
  z-index: 15; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
/* いなし発動中：半透明にして少し縮める */

.inashi-active .rikishi-body {
    opacity: 0.6 !important;
    transform: scale(0.92) !important;
    transition: transform 0.1s, opacity 0.1s;
}

.charge-active .rikishi-body { filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 15px var(--charge-color)); }
.rikishi.charge-mid .rikishi-body { filter: brightness(1.2) drop-shadow(0 0 10px gold) !important; transform: scaleY(0.98); }
.rikishi.charge-max .rikishi-bodyｄ { filter: brightness(1.4) sepia(0.5) saturate(3) hue-rotate(-20deg) drop-shadow(0 0 20px red) !important; animation: pulseMax 0.1s infinite alternate; }
@keyframes pulseMax { from { transform: scale(1.02); } to { transform: scale(1.06); } }
.aura-yellow .rikishi-body { filter: brightness(1.2) drop-shadow(0 0 15px var(--aura-yellow)) !important; animation: auraYellowPulse 0.4s infinite alternate; }
@keyframes auraYellowPulse { from { filter: brightness(1.2) drop-shadow(0 0 10px gold); } to { filter: brightness(1.4) drop-shadow(0 0 20px gold); transform: scale(1.02); } }
.aura-blue .rikishi-body { filter: brightness(0.8) hue-rotate(180deg) contrast(1.2) drop-shadow(0 0 15px var(--aura-blue)) !important; animation: auraBluePulse 1.5s infinite alternate; }
@keyframes auraBluePulse { from { filter: brightness(0.8) hue-rotate(180deg) contrast(1.2); } to { filter: brightness(0.6) hue-rotate(200deg) contrast(1.4); } }

.miss-active .rikishi-body { filter: grayscale(1) brightness(0.7) !important; transform: scale(0.9) !important; }
.parry-active .rikishi-body { filter: brightness(1.5) drop-shadow(0 0 10px var(--parry-color)) !important; }
.stunned .rikishi-body { filter: brightness(0.5) hue-rotate(240deg) contrast(1.2); animation: shakeAnim 0.1s infinite; }
.stun-mark { position: absolute; top: 0; left: 0; width: 120px; text-align: center; font-size: 3rem; color: #fbbf24; text-shadow: 2px 2px 0 #000; z-index: 150; pointer-events: none; display: none; white-space: nowrap; animation: stunFloat 0.8s infinite alternate; }
@keyframes stunFloat { 0% { transform: translateY(-180px) scale(1) rotate(-10deg); } 100% { transform: translateY(-200px) scale(1.2) rotate(10deg); } }
.shake { animation: shakeAnim 0.2s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeAnim { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-6px, 0, 0); } 40%, 60% { transform: translate3d(6px, 0, 0); } }

/* ★重要：倒れるアニメーション（回転） */
.rikishi.is-defeated .rikishi-body { 
    animation: none !important; 
    transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.4, 1.0) !important; 
    filter: grayscale(0.8) brightness(0.5) !important; 
}
.rikishi.is-defeated.fall-left .rikishi-body { transform: rotate(-90deg) translateY(30px) !important; }
.rikishi.is-defeated.fall-right .rikishi-body { transform: rotate(90deg) translateY(30px) !important; }

/* 行司 */
#gyoji-container { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 180px; height: auto; z-index: 5; pointer-events: none; text-align: center; }
#gyoji-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3)); transition: transform 0.3s; }
.flipped { transform: scaleX(-1); }
@keyframes gyojiHop { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.gyoji-jumping { animation: gyojiHop 0.3s; }
.gyoji-shout { will-change: transform;position: absolute; top: -20px; font-size: 0,8rem; font-weight: 900; color: #a1a1a1; text-shadow: 2px 2px 0 #000; white-space: nowrap; pointer-events: none; z-index: 20; font-family: 'tamanegi', serif; }
.shout-left { left: -40px; animation: popUpFadeLeft 1.2s forwards; }
.shout-right { right: -40px; animation: popUpFadeRight 1.2s forwards; }
@keyframes popUpFadeLeft { 0% { opacity: 0; transform: translate(0, 10px) rotate(-15deg); } 20% { opacity: 1; transform: translate(0, 0) rotate(-15deg); } 80% { opacity: 1; transform: translate(0, -5px) rotate(-15deg); } 100% { opacity: 0; transform: translate(0, -10px) rotate(-15deg); } }
@keyframes popUpFadeRight { 0% { opacity: 0; transform: translate(0, 10px) rotate(15deg); } 20% { opacity: 1; transform: translate(0, 0) rotate(15deg); } 80% { opacity: 1; transform: translate(0, -5px) rotate(15deg); } 100% { opacity: 0; transform: translate(0, -10px) rotate(15deg); } }

/* Effects */
#call-display {
    position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
    font-size: 6rem; font-weight: 900; color: #a1a1a1; text-shadow: 3px 3px 0 #000;
    z-index: 200; 
    pointer-events: none; display: none; text-align: center; width: 100%; white-space: nowrap;
}
.combo-call { will-change: transform;position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 300px; text-align: center; color: var(--charge-color); font-weight: 900; font-size: 3rem; text-shadow: 3px 3px 0 #000; pointer-events: none; z-index: 50; animation: popOut 0.8s forwards; }
.miss-call { color: #ccc !important; font-size: 2rem !important; }
.parry-call { color: var(--parry-color) !important; font-size: 3.5rem !important; text-shadow: 0 0 20px var(--parry-color), 2px 2px 0 #000 !important; }
@keyframes popOut { 0% { transform: translate(-50%, 0) scale(0.3); opacity: 0; } 30% { transform: translate(-50%, -30px) scale(1.3); opacity: 1; } 100% { transform: translate(-50%, -120px) scale(1); opacity: 0; } }
.shockwave { 
    position: absolute; 
    top: 50%; left: 50%; 
    /* 配置を transform に集約（translateとscaleを同時に行うため） */
    transform: translate(-50%, -50%) scale(0.125); 
    /* 最初から最終サイズにしておく */
    width: 400px; height: 400px; 
    border-radius: 50%; 
    /* ボーダーは固定値にする（拡大とともに太く見えるのを防ぐため、少し細めに設定して調整） */
    border: none; 
    opacity: 0.8; 
    pointer-events: none; 
    z-index: 60; 
    /* width/heightではなく transform を動かす */
    animation: shockwaveAnim optimized 0.5s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes shockwaveAnimOptimized { 
    0% { 
        transform: translate(-50%, -50%) scale(0.125); /* 50px相当 */
        opacity: 1; 
        /* border-widthのアニメーションは重いので、scaleで代用するか、opacityで誤魔化す方が高速です */
    } 
    100% { 
        transform: translate(-50%, -50%) scale(1); /* 400px相当 */
        opacity: 0; 
        border-width: 0px; /* どうしても太さが気になる場合のみ残すが、削除推奨 */
    } 
}
#grapple-indicator { position: absolute; top: 15%; left: 50%; transform: translate(-50%, 0); font-size: 4rem; color: #fff; font-weight: 900; text-shadow: 4px 4px 0 #000; display: none; z-index: 90; pointer-events: none; }
.grappling-anim { animation: grapplePulse 0.5s infinite alternate; }
@keyframes grapplePulse { from{transform:translate(-50%,0) scale(1);} to{transform:translate(-50%,0) scale(1.1);} }
@keyframes fadeInSlow { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
.winner-anim { animation: fadeInSlow 3.0s ease-out forwards; }
@keyframes fadeInBg { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); } }
.bg-anim { animation: fadeInBg 3.0s ease-out forwards; }

.ground-area { position: absolute; bottom: 0; width: 100%; height: 50px; background: var(--ground); border-top: 4px solid rgba(0,0,0,0.3); z-index: 20; }
.boundary-line { position: absolute; bottom: 0; width: 12px; height: 100%; background: rgba(255,255,255,0.7); box-shadow: 0 0 10px rgba(255,255,255,0.4); }
#line-left { left: 100px; } #line-right { right: 100px; }

.boundary-line {
    position: absolute;
    bottom: -2px;
    
    /* 画像に合わせて少し太くします（調整してください） */
    width: 30px; 
    height: 120%;
    
    /* ▼▼▼ 画像を指定（パスは環境に合わせて修正してください） ▼▼▼ */
    background-image: url('/assets/img/nawa.png');
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

    /* 画像を要素のサイズに合わせて引き伸ばす */
    background-size:300% 200%;
    background-repeat: no-repeat;

    /* 以前のCSSによる表現をリセット */
    background-color: transparent;
    box-shadow: none;
    
    z-index: 21; /* 地面より手前に表示 */
    
}

/* --- 左側の縄 --- */
#line-left {
    left: 105px;
    /* 左用の画像なので、そのまま表示します */
}

/* --- 右側の縄 --- */
#line-right {
    right: 105px;
    
    /* ▼▼▼ ここで左右反転させます ▼▼▼ */
    transform: scaleX(-1);
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
}

/* --- ダメージポップアップ --- */
.damage-popup {
    will-change: transform;
    position: absolute;
    color: #fff;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    pointer-events: none;
    z-index: 100;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
    /* アニメーション: 上に浮き上がりながら消える */
    animation: floatUpFade 1.0s ease-out forwards;
}

/* ダメージの種類による色分け */
.damage-popup.normal { color: #fff; }       /* 通常 */
.damage-popup.crit { color: #fbbf24; font-size: 3rem; } /* 会心/ぶちかまし */
.damage-popup.heal { color: #4ade80; }      /* 回復（将来用） */

@keyframes floatUpFade {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -20px) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -80px) scale(1.0); opacity: 0; }
}

/* 左向きにのけぞる */
.throw-posture-left .rikishi-body {
    transform: rotate(-45deg) scale(1.2) !important; 
    filter: brightness(1.3) !important;
    
    /* ★修正: 複雑なベジェ曲線をやめて、シンプルな ease-out に */
    /* 時間も 0.2s くらいが一番キビキビして滑らかに見えます */
    transition: transform 0.2s ease-out !important;
    
    /* ★追加: 描画最適化（カクつき防止） */
    will-change: transform;
}

/* 右向きにのけぞる */
.throw-posture-right .rikishi-body {
    transform: rotate(45deg) scale(1.2) !important; 
    filter: brightness(1.3) !important;
    
    /* ★修正: 同上 */
    transition: transform 0.2s ease-out !important;
    will-change: transform;
}

/* 戻り動作 */
.throw-finish-motion .rikishi-body {
    transform: scale(1) rotate(0deg) !important;
    transition: transform 0.2s ease-out !important;
    filter: none !important;
    will-change: transform;
}

/* --- battle.css （ぶちかまし：平行移動版） --- */

/* 左側にいる人が、右へ突っ込む（攻撃） */
.thrust-attack-right .rikishi-body {
    /* 右へ50px移動 + 拡大 */
    transform: translateX(75px) scale(1.15) !important;
    filter: brightness(1.2) sepia(0.3) !important; /* 赤熱エフェクト */
    transition: transform 0.08s ease-out !important; /* 鋭いインパクト */
    will-change: transform;
}

/* 右側にいる人が、左へ突っ込む（攻撃） */
.thrust-attack-left .rikishi-body {
    /* 左へ50px移動 + 拡大 */
    transform: translateX(-75px) scale(1.15) !important;
    filter: brightness(1.2) sepia(0.3) !important;
    transition: transform 0.08s ease-out !important;
    will-change: transform;
}

/* ぶちかましの戻り動作 */
.thrust-finish-motion .rikishi-body {
    /* 元の位置・サイズに戻る */
    transform: translateX(0) scale(1) rotate(0deg) !important;
    transition: transform 0.2s ease-out !important;
    filter: none !important;
    will-change: transform;
}

/* キモチ発動エフェクト（赤く燃え上がる） */
.rikishi.spirit-high .rikishi-body {
    filter: drop-shadow(0 0 15px rgba(255, 50, 0, 0.8));
    animation: spirit-pulse-high 0.8s infinite alternate;
}

/* キモチ低下エフェクト（紫に沈む） */
.rikishi.spirit-low .rikishi-body {
    filter: drop-shadow(0 0 10px rgba(100, 0, 200, 0.8)) grayscale(0.5);
    animation: spirit-pulse-low 1.5s infinite alternate;
}

/* アニメーション定義 */
@keyframes spirit-pulse-high {
    from { filter: drop-shadow(0 0 10px rgba(255, 69, 0, 0.6)); }
    to { filter: drop-shadow(0 0 25px rgba(255, 0, 0, 1.0)); }
}

@keyframes spirit-pulse-low {
    from { filter: drop-shadow(0 0 5px rgba(80, 0, 180, 0.5)) grayscale(0.4); }
    to { filter: drop-shadow(0 0 15px rgba(120, 0, 220, 0.9)) grayscale(0.7); }
}

/* ギャクテンと重複したときの優先順位調整（必要であれば） */
/* CSSフィルターは重複できないため、両方発動時はキモチを優先するか、合成するか検討が必要ですが
   現状は drop-shadow が上書きされます。もし両方出したい場合は box-shadow を使うなどの工夫がいりますが、
   まずはわかりやすく「キモチ」の色が強く出るようにしています。 */

/* キモチ10側：燃え上がるスタミナバー */
.spirit-burning {
    box-shadow: 0 0 15px #ff4500, inset 0 0 10px #ff8c00;
    border: 2px solid #ff4500;
    animation: spirit-pulse 1s infinite alternate;
}

/* キモチ2側：絶望で震えるスタミナバー */
.spirit-depressed {
    filter: grayscale(0.5) contrast(0.8);
    animation: spirit-shaking 0.2s infinite;
}

/* 脈動アニメーション */
@keyframes spirit-pulse {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.02); filter: brightness(1.3); }
}

/* 震えアニメーション */
@keyframes spirit-shaking {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
}

@keyframes gyoji-spin-anim {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.gyoji-confused {
    /* 0.6秒かけて滑らかに1回転 */
    animation: gyoji-spin-anim 0.6s linear infinite !important;
    /* 回転の中心を画像の中心に */
    transform-origin: center center;
}

/* --- 仕切り線（元の白い線のデザインを活用） --- */
.shikiri-line {
    position: absolute;
    bottom: -14px; /* 足元付近に配置 */
    
    width: 12px;  /* 元の太さ */
    height: 60px; /* 長さは画面いっぱいではなく、地面の線らしく短くしました */
    
    /* 元の白い発光デザイン */
    background: rgba(204, 195, 195, 0.5);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    
    border-radius: 1px; /* 角を丸く */
    z-index: 15; /* キャラの足元より下、地面より上 */
}

/* --- 仕切り線の位置設定 --- */
/* 画面幅1200pxの場合、中心は600px */

#shikiri-left {
    /* 中心(600)から左へ80pxの位置 */
    left: 530px; 
}

#shikiri-right {
    /* 中心(600)から右へ80pxの位置（右端からの距離で指定） */
    right: 530px;
}