/* =========================================================
   ひっさつわざを 派手に（v13.6）
   ユーザー「必殺技の 炎や 雷を 3Dか 解像度 あげて 綺麗に」「カットインが 棒立ちで いくぞ だけ」「こどもは 派手なの 好き」
   A＝光る 粒は js/ui/fxcanvas.js（.fxc）／B＝バトル画面を 広げる（.arena.is-big）／C＝カットイン（.ci）
   ========================================================= */

/* ---- A：光る 粒の Canvas（.battle の 直下・技名の 帯より 下） ---- */
.fxc { position: absolute; left: 0; top: 0; width: 100%; z-index: 38; pointer-events: none; transition: opacity .25s ease-out; }
.fxc.is-fade { opacity: 0; }

/* わざの あいだ 背景（空・山・ゆか）だけ 暗く する。キャラは この 上なので 明るい まま＝光る 粒が 映える */
.arena__spsky { position: absolute; inset: 0; opacity: 0; transition: opacity .22s ease-out; pointer-events: none; }
.arena__spsky.is-on { opacity: 1; }
.arena__spsky[data-sp="fire"]      { background: linear-gradient(rgba(34,6,4,.94) 0%, rgba(90,18,8,.86) 55%, rgba(150,50,16,.7) 100%); }
.arena__spsky[data-sp="leaf"]      { background: linear-gradient(rgba(4,24,10,.93) 0%, rgba(18,70,30,.84) 55%, rgba(40,110,40,.66) 100%); }
.arena__spsky[data-sp="ice"]       { background: linear-gradient(rgba(4,14,40,.93) 0%, rgba(14,52,100,.84) 55%, rgba(50,110,170,.62) 100%); }
.arena__spsky[data-sp="wind"]      { background: linear-gradient(rgba(10,22,44,.9) 0%, rgba(34,66,104,.8) 55%, rgba(90,140,190,.58) 100%); }
.arena__spsky[data-sp="bolt"]      { background: linear-gradient(rgba(3,5,14,.96) 0%, rgba(14,22,56,.9) 55%, rgba(34,50,100,.74) 100%); }
.arena__spsky[data-sp="star"]      { background: linear-gradient(rgba(24,10,2,.94) 0%, rgba(88,40,6,.86) 50%, rgba(170,96,20,.66) 100%); }
.arena__spsky[data-sp="nova"]      { background: linear-gradient(rgba(3,1,12,.97) 0%, rgba(20,8,48,.93) 60%, rgba(34,14,70,.84) 100%); }
.arena__spsky[data-sp="starburst"] { background: linear-gradient(rgba(10,5,34,.96) 0%, rgba(26,12,70,.9) 60%, rgba(10,40,64,.76) 100%); }

/* ---- B：バトル画面を 広げる。高さを ふやした ぶん margin-bottom を マイナスに＝下の 問題の 大きさは 変わらない ---- */
.arena.is-big { z-index: 3; transition: height .28s cubic-bezier(.2,.85,.25,1), margin-bottom .28s cubic-bezier(.2,.85,.25,1); box-shadow: 0 6px 18px rgba(0,0,0,.55); }
.arena.is-big.is-instant { transition: none; }

/* 色の 光・集中線・わ は アリーナの 中に とじこめる（下の カットインに かからない） */
.fxscreen__clip { position: absolute; left: 0; right: 0; top: 0; height: var(--arena-h, 176px); overflow: hidden; }
/* 下の 問題の ところは 暗く（カットインの 舞台） */
.fxveil {
  position: absolute; left: 0; right: 0; top: var(--arena-h, 176px); bottom: 0; z-index: 1;
  background: linear-gradient(rgba(5,7,20,.92), rgba(5,7,20,.84));
  animation: fxveilfx var(--sp-ms, 1000ms) linear forwards;
}
@keyframes fxveilfx { 0% { opacity: 0; } 7% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }

/* ---- C：カットイン（アリーナの 下＝わざの 動きを かくさない） ---- */
.ci {
  position: absolute; left: 0; right: 0; top: calc(var(--arena-h, 176px) + 6px); height: var(--ci-h, 200px); z-index: 4;
  pointer-events: none; animation: ciBox var(--ci-ms, 900ms) ease-out forwards;
}
@keyframes ciBox { 0% { opacity: 0; } 6% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
.ci__bg, .ci__speed { position: absolute; inset: 0; }
.ci { overflow: hidden; }
.ci__win { position: absolute; inset: 0; z-index: 1; }
.ci--band .ci__win  { -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(90% - 18px), 0 calc(90% + 18px)); clip-path: polygon(0 0, 100% 0, 100% calc(90% - 18px), 0 calc(90% + 18px)); }
.ci--slash .ci__win { -webkit-clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); }
.ci--face .ci__win  { -webkit-clip-path: polygon(0 8%, 100% 8%, 100% 92%, 0 92%); clip-path: polygon(0 8%, 100% 8%, 100% 92%, 0 92%); }
.ci--duo .ci__win   { -webkit-clip-path: polygon(0 0, 100% 0, 100% 94%, 0 94%); clip-path: polygon(0 0, 100% 0, 100% 94%, 0 94%); }
.ci__hero { position: absolute; bottom: 0; width: var(--fig, 200px); height: var(--fig, 200px); }
.ci__hero .v3scene { position: absolute; left: 0; bottom: 0; }
.ci__img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.ci__tx {
  position: absolute; z-index: 3; font-family: var(--f-head); font-size: 30px; line-height: 1.15; color: #fff; white-space: nowrap;
  text-shadow: -3px 0 0 #14102c, 3px 0 0 #14102c, 0 -3px 0 #14102c, 0 3px 0 #14102c, -3px -3px 0 #14102c, 3px 3px 0 #14102c, 3px -3px 0 #14102c, -3px 3px 0 #14102c,
    0 6px 0 rgba(0,0,0,.55), 0 0 22px var(--el, #ffd447), 0 0 40px var(--el, #ffd447);
  animation: ciTx var(--ci-ms, 900ms) cubic-bezier(.2,1.4,.4,1) both;
}
/* v14.2：せりふの ふちも 本物の 線で（上の 8方向の 影は ふちが 階段の ギザギザ＝「画質が 悪い」）。
   線を 字の うしろに 描く（paint-order: stroke fill）ので 見える ふちは 線の 半分＝前の 3px と 同じ。
   paint-order が ない ブラウザは 上の 影の まま */
@supports (paint-order: stroke fill) {
  .ci__tx {
    -webkit-text-stroke: 6px #14102c; paint-order: stroke fill; stroke-linejoin: round;
    text-shadow: 0 5px 0 rgba(0,0,0,.5), 0 0 22px var(--el, #ffd447), 0 0 40px var(--el, #ffd447);
  }
}
@keyframes ciTx {
  0%, 10% { transform: var(--tx0, translateX(0)) scale(.2) rotate(-8deg); opacity: 0; }
  22%     { transform: var(--tx0, translateX(0)) scale(1.18) rotate(-4deg); opacity: 1; }
  30%     { transform: var(--tx0, translateX(0)) scale(1) rotate(-4deg); }
  84%     { transform: var(--tx0, translateX(0)) scale(1.04) rotate(-4deg); opacity: 1; }
  100%    { transform: var(--tx0, translateX(0)) scale(1.1) rotate(-4deg); opacity: 0; }
}
/* 光の すじが 1回 はしる。
   v13.10（軽く）：前は background-position を 動かして いて、毎コマ 描き直し（Paint）に なって いた。
   すじを 260% の はばの ::before に 描いて transform で 動かす＝GPU だけで 動く。位置は 前と 同じ
   （background-position 130%→-30% は はば 2.6倍の 絵の ずれ -2.08→+0.48＝自分の はばの -80%→+18.46%）。
   mix-blend-mode: screen も 外した（白い 光は screen でも ふつうの かさねでも 同じ 色に なる。screen は 下を まとめて 描き直す ので 重い） */
.ci__shine { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.ci__shine::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 260%;
  background: linear-gradient(110deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-80%);
  animation: ciShine var(--ci-ms, 900ms) ease-out both;
}
@keyframes ciShine { 0%, 14% { transform: translateX(-80%); } 42%, 100% { transform: translateX(18.4615%); } }
/* 速さの すじ（点線の 列が 左へ とぶ）。v13.10：これも background-position → transform（::before を 1くり返し ぶん＝180px 長く して 左へ ずらす） */
@keyframes ciDash { from { transform: translateX(0); } to { transform: translateX(-180px); } }
@keyframes ciSpin { from { transform: rotate(0); } to { transform: rotate(30deg); } }

/* 形1 band：ななめの 帯・左から 主人公・右に せりふ */
.ci--band .ci__bg {
  left: -8%; right: -8%; top: 10%; bottom: 10%; transform: skewY(-5deg);
  background: linear-gradient(90deg, #0a0e22 0%, #151d44 45%, #0a0e22 100%);
  border-top: 4px solid var(--el, #ffd447); border-bottom: 4px solid var(--el, #ffd447);
  box-shadow: 0 0 26px var(--el, #ffd447), inset 0 0 50px rgba(0,0,0,.6);
  animation: ciBand var(--ci-ms, 900ms) cubic-bezier(.2,.9,.3,1) both;
}
@keyframes ciBand { 0% { transform: skewY(-5deg) scaleX(0); } 14% { transform: skewY(-5deg) scaleX(1); } 100% { transform: skewY(-5deg) scaleX(1); } }
.ci--band .ci__speed {
  left: -8%; right: -8%; top: 10%; bottom: 10%; transform: skewY(-5deg); opacity: .75; overflow: hidden;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 13px); mask-image: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 13px);
}
.ci--band .ci__speed::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: -180px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 46px, rgba(255,255,255,0) 46px 90px, rgba(255,255,255,.3) 90px 110px, rgba(255,255,255,0) 110px 180px);
  animation: ciDash .22s linear infinite;
}
.ci--band .ci__hero { left: 2%; bottom: calc(var(--fig, 200px) * -0.36); animation: ciFromL var(--ci-ms, 900ms) cubic-bezier(.15,.95,.3,1) both; }
.ci--band .ci__tx { right: 5%; top: 50%; --tx0: translateY(-50%); }
@keyframes ciFromL { 0% { transform: translateX(-130%) scale(.9); } 20% { transform: translateX(6%) scale(1.04); } 30%, 80% { transform: translateX(0) scale(1); } 100% { transform: translateX(10%) scale(1); } }

/* 形2 slash：ななめに 切った コマ・集中線・右から 主人公・左に せりふ */
.ci--slash .ci__bg, .ci--slash .ci__speed { -webkit-clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%); clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%); overflow: hidden; }
.ci--slash .ci__bg {
  background: radial-gradient(ellipse at 72% 55%, var(--el, #ffd447) 0%, rgba(40,20,70,.95) 46%, #0a0e22 100%);
  animation: ciSlashIn var(--ci-ms, 900ms) cubic-bezier(.2,.9,.3,1) both;
}
.ci--slash .ci__speed::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -330px;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.5) 0deg 1.4deg, rgba(255,255,255,0) 1.4deg 7deg);
  animation: ciSpin .5s linear infinite;
}
@keyframes ciSlashIn { 0% { -webkit-clip-path: polygon(0 18%, 0 18%, 0 100%, 0 100%); clip-path: polygon(0 18%, 0 18%, 0 100%, 0 100%); } 16%, 100% { -webkit-clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%); clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%); } }
.ci--slash .ci__hero { right: 0; bottom: calc(var(--fig, 200px) * -0.36); animation: ciFromR var(--ci-ms, 900ms) cubic-bezier(.15,.95,.3,1) both; }
.ci--slash .ci__tx { left: 5%; top: 18%; }
@keyframes ciFromR { 0% { transform: translateX(130%) scale(.9); } 20% { transform: translateX(-6%) scale(1.05); } 30%, 80% { transform: translateX(0) scale(1); } 100% { transform: translateX(-8%) scale(1); } }

/* 形3 face：顔の アップ（目の 高さを よこ切り）・光が はしる */
.ci--face { overflow: hidden; }
.ci--face .ci__bg {
  top: 8%; bottom: 8%; background: linear-gradient(90deg, #0a0e22, #1d1a44 50%, #0a0e22);
  border-top: 4px solid var(--el, #ffd447); border-bottom: 4px solid var(--el, #ffd447); box-shadow: 0 0 26px var(--el, #ffd447);
  animation: ciFaceBand var(--ci-ms, 900ms) cubic-bezier(.2,.9,.3,1) both;
}
@keyframes ciFaceBand { 0% { transform: scaleY(0); } 12%, 100% { transform: scaleY(1); } }
.ci--face .ci__speed {
  top: 8%; bottom: 8%; overflow: hidden;
}
.ci--face .ci__speed::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.28) 0deg 1.2deg, rgba(255,255,255,0) 1.2deg 6deg);
  animation: ciSpin .6s linear infinite;
}
.ci--face .ci__hero { left: 50%; bottom: auto; top: 8%; margin-left: calc(var(--fig, 400px) / -2); height: 84%; overflow: hidden; animation: ciFaceZoom var(--ci-ms, 900ms) cubic-bezier(.15,.95,.3,1) both; }
.ci--face .ci__hero .v3scene, .ci--face .ci__img { top: calc(var(--fig, 400px) * -0.06); bottom: auto; }
@keyframes ciFaceZoom { 0% { transform: scale(1.5); opacity: 0; } 18% { transform: scale(1); opacity: 1; } 84% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1.1); opacity: 1; } }
.ci--face .ci__tx { left: 50%; bottom: 12%; --tx0: translateX(-50%); }

/* 形4 duo：相棒と 2コマ（金の しきり） */
.ci--duo .ci__bg {
  top: 6%; bottom: 6%; background: linear-gradient(100deg, #1a1040 0%, #0a0e22 50%, #102a3a 100%);
  border-top: 4px solid #ffd447; border-bottom: 4px solid #ffd447; box-shadow: 0 0 26px #ffd447, inset 0 0 40px rgba(0,0,0,.5);
  animation: ciFaceBand var(--ci-ms, 900ms) cubic-bezier(.2,.9,.3,1) both;
}
.ci--duo .ci__speed { top: 6%; bottom: 6%; overflow: hidden; }
.ci--duo .ci__speed::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px;
  background: repeating-conic-gradient(from 0deg, rgba(255,230,140,.35) 0deg 1.4deg, rgba(255,255,255,0) 1.4deg 7deg);
  animation: ciSpin .6s linear infinite;
}
.ci__div { position: absolute; left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; z-index: 2; background: linear-gradient(#fff6c8, #ffd447 50%, #c98a14); transform: skewX(-14deg); box-shadow: 0 0 16px #ffd447; }
.ci--duo .ci__hero { left: 0; bottom: calc(var(--fig, 200px) * -0.3); animation: ciFromL var(--ci-ms, 900ms) cubic-bezier(.15,.95,.3,1) both; }
.ci__pal { position: absolute; right: 4%; bottom: 8%; z-index: 1; animation: ciFromR var(--ci-ms, 900ms) cubic-bezier(.15,.95,.3,1) .06s both; filter: drop-shadow(0 0 10px #ffd447); }
.ci--duo .ci__tx { left: 50%; top: 10%; --tx0: translateX(-50%); font-size: 26px; }

/* 形5 full：16コンボ〜。下の ところ ぜんぶ・うしろに 光の すじ・主人公は まん中で うかぶ */
.ci--full .ci__bg { background: radial-gradient(ellipse at 50% 70%, var(--el, #fff) 0%, rgba(60,30,120,.92) 38%, rgba(6,4,20,.97) 78%); animation: ciFaceBand var(--ci-ms, 900ms) cubic-bezier(.2,.9,.3,1) both; }
.ci--full .ci__speed { overflow: hidden; }
.ci--full .ci__speed::before {
  content: ''; position: absolute; left: 50%; top: 70%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.4) 0deg 2deg, rgba(255,255,255,0) 2deg 9deg);
  animation: ciSpin .8s linear infinite;
}
.ci--nova.ci--full .ci__bg { background: radial-gradient(ellipse at 50% 70%, #ffffff 0%, #c48bff 18%, #4fd3ff 34%, rgba(40,14,90,.94) 56%, rgba(4,2,16,.98) 82%); }
.ci--starburst.ci--full .ci__bg { background: radial-gradient(ellipse at 50% 70%, #ffffff 0%, #7cf9c4 18%, #ffd447 32%, rgba(40,14,90,.94) 56%, rgba(4,2,16,.98) 82%); }
.ci--full .ci__hero { left: 50%; margin-left: calc(var(--fig, 220px) / -2); bottom: calc(var(--fig, 220px) * -0.08); animation: ciRise var(--ci-ms, 900ms) cubic-bezier(.15,.95,.3,1) both; }
@keyframes ciRise { 0% { transform: translateY(40%) scale(.7); opacity: 0; } 22% { transform: translateY(-4%) scale(1.06); opacity: 1; } 32%, 84% { transform: translateY(0) scale(1); } 100% { transform: translateY(-6%) scale(1.04); } }
.ci--full .ci__tx { left: 50%; top: 5%; --tx0: translateX(-50%); font-size: 34px; }

/* Canvas の ときの 集中線は 細く（光の 粒が 主役） */
.fxscreen--c .fxscreen__lines i { width: 4px; left: -2px; --fs-line: rgba(255,255,255,.4); }
.fxscreen--c.fxscreen--star .fxscreen__lines i { --fs-line: rgba(255,230,140,.45); }
/* 相棒と いっしょ・大きな わざの せりふは 金色 */
.ci--pal .ci__tx, .ci--t4 .ci__tx, .ci--t5 .ci__tx { color: #fff6c8; }

@media (prefers-reduced-motion: reduce) {
  .ci, .ci *, .ci *::before, .fxveil, .arena.is-big { animation-duration: .01s !important; transition-duration: .01s !important; }
}

/* ---- カットインの ポーズ（3D の 主人公・部品を かんせつで 回すだけ）。
   うで・あし＝rotateX(+) で 先が 手まえ（前）・rotateZ で よこへ ひらく。けん（.p--sword）は 右うでの 中 ---- */
.mo-ci { animation: ciBob 1.1s ease-in-out infinite; }
@keyframes ciBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
/* ほのお：けんを かたの 上に ふりかぶる */
.ci-pose-raise .p--armR  { transform: rotateX(150deg) rotateZ(-12deg); }
.ci-pose-raise .p--sword { transform: rotateX(-150deg) rotateZ(-30deg); }
.ci-pose-raise .p--armL  { transform: rotateX(-35deg) rotateZ(12deg); }
.ci-pose-raise .p--head  { transform: rotateX(-6deg) rotateZ(-4deg); }
/* はっぱ：けんを ななめ まえへ ふりぬく */
.ci-pose-thrust .p--armR  { transform: rotateZ(-62deg) rotateX(30deg); }
.ci-pose-thrust .p--sword { transform: rotateX(-20deg) rotateZ(10deg); }
.ci-pose-thrust .p--armL  { transform: rotateX(-30deg) rotateZ(22deg); }
.ci-pose-thrust .p--head  { transform: rotateZ(-5deg); }
.ci-pose-thrust .p--legA  { transform: rotateX(-18deg); }
.ci-pose-thrust .p--legB  { transform: rotateX(18deg); }
/* こおり：けんを ななめに かまえる */
.ci-pose-guard .p--armR  { transform: rotateZ(28deg) rotateX(40deg); }
.ci-pose-guard .p--sword { transform: rotateX(-40deg) rotateZ(-58deg); }
.ci-pose-guard .p--armL  { transform: rotateZ(-24deg) rotateX(20deg); }
.ci-pose-guard .p--head  { transform: rotateX(8deg); }
/* かぜ：けんを よこに はらう */
.ci-pose-sweep .p--armR  { transform: rotateZ(-92deg); }
.ci-pose-sweep .p--sword { transform: rotateX(-10deg); }
.ci-pose-sweep .p--armL  { transform: rotateZ(40deg); }
.ci-pose-sweep .p--head  { transform: rotateZ(6deg); }
/* いなずま：けんを 空へ まっすぐ かかげる */
.ci-pose-sky .p--armR  { transform: rotateX(172deg); }
.ci-pose-sky .p--sword { transform: rotateX(-172deg); }
.ci-pose-sky .p--armL  { transform: rotateX(-20deg) rotateZ(20deg); }
.ci-pose-sky .p--head  { transform: rotateX(-12deg); }
/* メテオ：左手で 空を ゆびさす */
.ci-pose-point .p--armL  { transform: rotateZ(150deg); }
.ci-pose-point .p--armR  { transform: rotateX(25deg) rotateZ(-20deg); }
.ci-pose-point .p--head  { transform: rotateX(-14deg) rotateZ(6deg); }
/* ビッグバン：両うでを 大きく ひろげる */
.ci-pose-spread .p--armL  { transform: rotateZ(118deg); }
.ci-pose-spread .p--armR  { transform: rotateZ(-118deg); }
.ci-pose-spread .p--sword { transform: rotateX(-20deg); }
.ci-pose-spread .p--head  { transform: rotateX(-10deg); }
.ci-pose-spread .p--legA  { transform: rotateZ(8deg); }
.ci-pose-spread .p--legB  { transform: rotateZ(-8deg); }
/* スターバースト：けんを ななめ 上に 高く かかげ、左手を ひろげる */
.ci-pose-charge .p--armR  { transform: rotateZ(-140deg); }
.ci-pose-charge .p--sword { transform: rotateZ(125deg) rotateX(-10deg); }
.ci-pose-charge .p--armL  { transform: rotateZ(64deg); }
.ci-pose-charge .p--head  { transform: rotateX(-10deg) rotateZ(-5deg); }
.ci-pose-charge .p--legA  { transform: rotateZ(10deg); }
.ci-pose-charge .p--legB  { transform: rotateZ(-10deg); }
/* 2D の とき（りったいを 切った）は 絵を かたむけるだけ */
.ci__img.ci-pose-sky, .ci__img.ci-pose-point, .ci__img.ci-pose-spread { transform: rotate(-6deg); }
.ci__img.ci-pose-raise, .ci__img.ci-pose-thrust, .ci__img.ci-pose-charge { transform: rotate(8deg); }

/* ---- スターバーストの ゆれ（v13.8）：前は is-quake-5 の CSS が なく、いちばん 強い わざだけ ゆれて いなかった。
   一閃（0.5秒〜）で 小さく ゆれ、1.3秒の 大ばくはつで いちばん 大きく 長く ゆれる ---- */
.battle.is-quake-5 { animation: quake2fx .6s ease-out .5s, quake5fx 1.4s ease-out 1.3s; }
@keyframes quake5fx {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  6% { transform: translate(-20px, 12px) rotate(-1.4deg); }
  14% { transform: translate(20px, -12px) rotate(1.4deg); }
  22% { transform: translate(-18px, 10px) rotate(-1.1deg); }
  32% { transform: translate(16px, -9px) rotate(.9deg); }
  44% { transform: translate(-12px, 7px) rotate(-.5deg); }
  56% { transform: translate(10px, -5px); }
  68% { transform: translate(-6px, 3px); }
  80% { transform: translate(4px, -2px); }
  90% { transform: translate(-2px, 1px); }
}

/* カットインの 3D を 先に 1回 描いて 絵を 読みこませる ところ（ほぼ 見えない） */
.ciwarm { position: absolute; left: 0; top: 0; width: 40px; height: 40px; overflow: hidden; opacity: .01; pointer-events: none; z-index: 0; }
.ciwarm .v3scene { position: absolute; left: 0; top: 0; }

/* ---- ボス登場の WARNING（v13.6）：幕は その場で ふわっと、文字は 右から すべりこむ。
   前は にげる 動き（.is-run＝左へ 30px）を 借りて いて、幕ごと 左に ずれて 右はしに すきまが 出て いた（ユーザー「少し ずれて 表示」） ---- */
.warning.is-in { animation: warnIn .3s ease-out both; }
.warning.is-in .warning__text { animation: warnText .5s cubic-bezier(.2,.9,.3,1) both, pulse 1s ease-in-out .5s infinite; }
.warning.is-in .warning__sub { animation: warnSub .5s ease-out .12s both; }
@keyframes warnIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes warnText { 0% { opacity: 0; transform: translateX(80px) scale(1.25); } 70% { opacity: 1; transform: translateX(-4px) scale(1); } 100% { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes warnSub { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }