/* =====================================================================
   cutin.css — カットイン量産テンプレ・必殺演出（§8.3）
   - 量産テンプレ1本: キャラ絵1枚（絵文字フォールバック）
       ＋ repeating-conic-gradient 集中線回転
       ＋ clip-path 斜め切り帯スライドイン
       ＋ 技名 letter-spacing アニメ（§8.3 で確定の演出。カットイン中は
         エンジン timescale=0 のため、この帯内の一度きりの layout は許容）
   - それ以外の動きは transform / opacity のみ（layout/paint 不発生）。
   - 色・方向は fx.js が data/characters.js の cutin データから CSS 変数で注入:
       --dur --c-main --c-acc --sl1 --sl2 --bg
   ===================================================================== */
#cutin-root { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
#fx-root    { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* ================= フルスクリーンカットイン（§6.2） ================= */
.cutin {
  position: absolute; inset: 0;
  overflow: hidden;
  opacity: 0;
  /* 全サブアニメが --dur 比率で動く → 初回1.8s / 短縮0.8s を単一テンプレで両対応 */
  --dur: 1.8s;
  --c-main: #ffd23f; --c-acc: #fff; --sl1: #ffd23f; --sl2: #5a3500;
  animation: cutin-life var(--dur) linear 1 both;
}
@keyframes cutin-life {
  0% { opacity: 0 } 4% { opacity: 1 } 90% { opacity: 1 } 100% { opacity: 0 }
}

.cutin-bg {
  position: absolute; inset: 0;
  background: var(--bg, linear-gradient(135deg, #23242b, #3a3d49));
  opacity: .94;
}

/* 集中線: repeating-conic-gradient を transform 回転（§8.3） */
.cutin-lines {
  position: absolute;
  left: 50%; top: 50%;
  width: 165vmax; height: 165vmax;
  margin: -82.5vmax 0 0 -82.5vmax;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--sl1) 0deg 5deg, var(--sl2) 5deg 11deg);
  opacity: .38;
  will-change: transform;
  animation: cutin-spin 1.5s linear infinite;
}
@keyframes cutin-spin { to { transform: rotate(360deg); } }

/* 斜め帯: clip-path 斜め切り＋スライドイン（§8.3） */
.cutin-band {
  position: absolute;
  left: -6%; width: 112%;
  top: 28%; height: 44%;
  clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
  background:
    linear-gradient(180deg,
      var(--c-main) 0 4.5%,
      rgba(8, 8, 16, .82) 4.5% 95.5%,
      var(--c-main) 95.5% 100%);
  display: flex;
  align-items: center;
  gap: 3vw;
  padding: 0 7vw;
  will-change: transform;
}
.cutin.from-left  .cutin-band { animation: band-in-l calc(var(--dur) * .2) cubic-bezier(.15,.9,.25,1) both; }
.cutin.from-right .cutin-band {
  flex-direction: row-reverse;
  animation: band-in-r calc(var(--dur) * .2) cubic-bezier(.15,.9,.25,1) both;
}
@keyframes band-in-l { 0% { transform: translateX(-115%) } 100% { transform: translateX(0) } }
@keyframes band-in-r { 0% { transform: translateX(115%) }  100% { transform: translateX(0) } }

/* キャラ一枚絵（img）/ 絵文字フォールバック */
.cutin-chara {
  font-size: clamp(88px, 32vw, 170px);
  line-height: 1;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)) drop-shadow(0 0 26px var(--c-main));
  will-change: transform;
  animation: chara-pop calc(var(--dur) * .3) cubic-bezier(.2,1.6,.4,1) both;
  animation-delay: calc(var(--dur) * .08);
}
.cutin-art {
  height: min(34vh, 60vw);
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)) drop-shadow(0 0 26px var(--c-main));
  will-change: transform;
  animation: chara-pop calc(var(--dur) * .3) cubic-bezier(.2,1.6,.4,1) both;
  animation-delay: calc(var(--dur) * .08);
}
@keyframes chara-pop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0 }
  100% { transform: scale(1) rotate(-6deg); opacity: 1 }
}

.cutin-texts { flex: 1 1 auto; min-width: 0; }
/* 技名: letter-spacing 収束アニメ（§8.3 量産テンプレの確定要素） */
.cutin-name {
  font-weight: bold;
  color: #fff;
  font-size: clamp(23px, 8.4vw, 44px);
  line-height: 1.18;
  text-shadow:
    0 3px 0 var(--c-main),
    0 0 18px var(--c-main),
    0 6px 12px rgba(0,0,0,.55);
  animation: name-in calc(var(--dur) * .45) cubic-bezier(.1,.8,.2,1) both;
  animation-delay: calc(var(--dur) * .14);
}
@keyframes name-in {
  0%   { letter-spacing: .55em; opacity: 0; transform: translateX(28px) }
  100% { letter-spacing: .04em; opacity: 1; transform: translateX(0) }
}
/* キャッチコピー（口ぐせ直結 §6.3） */
.cutin-copy {
  margin-top: 1.2vh;
  color: var(--c-acc);
  font-size: clamp(15px, 4.6vw, 22px);
  font-weight: bold;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
  animation: copy-in calc(var(--dur) * .35) ease-out both;
  animation-delay: calc(var(--dur) * .3);
}
@keyframes copy-in {
  0%   { opacity: 0; transform: translateY(14px) }
  100% { opacity: 1; transform: translateY(0) }
}
/* 開幕の白フラッシュ */
.cutin-flash {
  position: absolute; inset: 0;
  background: #fff;
  animation: flash-out calc(var(--dur) * .16) ease-out both;
}
@keyframes flash-out { 0% { opacity: .95 } 100% { opacity: 0 } }

/* ============ ミニカットイン（ドヤ顔0.5s §5.1 / GK必殺セーブ §5.4） ============ */
.minicut {
  position: absolute;
  left: -4%; width: 108%;
  top: 22%; height: 84px;
  clip-path: polygon(0 16%, 100% 0, 100% 84%, 0 100%);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(10, 10, 18, .78);
  will-change: transform, opacity;
  animation: mini-in var(--mdur, .5s) cubic-bezier(.15,.9,.3,1) both;
}
@keyframes mini-in {
  0%   { transform: translateX(-110%); opacity: 1 }
  22%  { transform: translateX(0); opacity: 1 }
  82%  { transform: translateX(0); opacity: 1 }
  100% { transform: translateX(14%); opacity: 0 }
}
.minicut .mc-emoji { font-size: 52px; line-height: 1; }
.minicut .mc-emoji.big { font-size: 62px; }
.minicut .mc-sub { font-size: 34px; animation: pulse .3s ease-in-out infinite; }
.minicut.doya.c-red   { box-shadow: inset 0 0 0 4px #ff4b2b; background: rgba(80, 8, 0, .82); }
.minicut.doya.c-blue  { box-shadow: inset 0 0 0 4px #2b9bff; background: rgba(4, 24, 70, .82); }
.minicut.doya.c-green { box-shadow: inset 0 0 0 4px #3ecf5a; background: rgba(4, 50, 16, .82); }
.minicut.supersave    { box-shadow: inset 0 0 0 4px #4fc3f7; background: rgba(2, 18, 50, .85); height: 108px; }

/* ================= fx-root 汎用演出 ================= */
/* 全画面フラッシュ（hitstop §8.3 / ゴール / ブザー / ゲージMAX 使い回し） */
.fx-flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  will-change: opacity;
}

/* 因果リプレイ矢印レイヤ（§8.4 文字なし図解） */
.fx-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.fx-svg .rp-pass {                 /* 自分のパス線（点線） */
  stroke: #fff; stroke-width: 4;
  stroke-dasharray: 8 8;
  stroke-linecap: round;
  opacity: .9;
}
.fx-svg .rp-block {                /* 敵が塞いだ方向（赤矢印） */
  stroke: #ff4b2b; stroke-width: 7;
  stroke-linecap: round;
}
.fx-svg .rp-swipe {                /* 自分の動き（白矢印） */
  stroke: #fff; stroke-width: 6;
  stroke-linecap: round;
}
.fx-svg .rp-cutter {               /* カットしたDFの赤丸 */
  fill: rgba(255, 75, 43, .45);
  stroke: #ff4b2b; stroke-width: 4;
}

/* 紙吹雪（パーティクルDOM 8個プール §8.3） */
.fx-confetti {
  position: absolute; top: 0; left: 0;
  width: 10px; height: 15px;
  margin: -7px 0 0 -5px;
  border-radius: 3px;
  opacity: 0;
  will-change: transform, opacity;
}

/* 空振りリング（§2.2 規則5）・突破リング兼用 */
.fx-whiff {
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.95);
  opacity: 0;
  will-change: transform, opacity;
}

/* ドリブル軌跡ストリーク（§2.2 #2） */
.fx-trail {
  position: absolute; top: 0; left: 0;
  width: 56px; height: 8px;
  margin: -4px 0 0 -28px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  opacity: 0;
  will-change: transform, opacity;
}

/* キラ星（突破・ゴール） */
.fx-star {
  position: absolute; top: 0; left: 0;
  margin: -16px 0 0 -16px;
  font-size: 32px;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
}

/* 画面シェイク（ゴール時0.3s §8.3。transform のみ） */
#field.fx-shake { animation: fx-shake .3s linear 1; }
@keyframes fx-shake {
  0%   { transform: translate3d(0, 0, 0) }
  15%  { transform: translate3d(-6px, 4px, 0) }
  30%  { transform: translate3d(6px, -3px, 0) }
  45%  { transform: translate3d(-5px, -4px, 0) }
  60%  { transform: translate3d(4px, 3px, 0) }
  75%  { transform: translate3d(-3px, 2px, 0) }
  100% { transform: translate3d(0, 0, 0) }
}

/* ================= ゴースト指（§9） ================= */
.ghost-hand {
  position: absolute; top: 0; left: 0;
  margin: -6px 0 0 -19px;            /* 指先 ≒ アンカー点 */
  font-size: 46px;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
  will-change: transform, opacity;
}
.ghost-ring {
  position: absolute; top: 0; left: 0;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.9);
  box-shadow: 0 0 14px rgba(255,255,255,.6);
  opacity: 0;
  will-change: transform, opacity;
}