/* ZQ STAGE4 手応え — 第1段 v1.19.1（2026-08-25）
 * ヒットストップ ／ 画面の揺れ ／ ダメージ数字
 *
 * ★市販ゲームと STAGE4 を分けているのは、音の太さではなく「ずらし」です。
 *   いまの STAGE4 は、当たった瞬間に全部が同時に起きます。だから素材が揃っているのに軽い。
 *   下の時間割は、その同時を**わざとずらす**ためのものです。
 *
 *     0ms    命中。★画面を止める（ヒットストップ）
 *     0-80   静止。ここで「重い」が生まれる。格闘ゲームが必ずやっていること
 *     80     解除 → 揺れ開始（減衰しながら 240ms）
 *     120    ★ダメージ数字が跳ねて出る。**揺れより遅らせる**のが肝
 *     320    揺れ終了
 *     780    数字が消えきる
 *
 *   ★120ms の遅れが「効いた」の正体です。同時に出すと、ただの装飾になります。
 *
 * ★光過敏性発作について（教育現場なので譲れない）
 *   このファイルに**繰り返す明滅は1つもありません。**
 *   ダメージ数字の opacity は 0→1→0 の一往復のみ。無限ループの点滅はゼロ。
 *   目安の「1秒に3回以上」には、どの要素も届きません。
 */

/* ============================================================
 * ① ヒットストップ
 *   ★CSSアニメだけでなく SVG の <animate>（ボスの羽ばたき・目の明滅）も
 *     止めないと、画面の半分が動き続けて「止まった」ように見えません。
 *     SMIL は animation-play-state で止まらないので、JS 側で pauseAnimations() を呼びます。
 * ========================================================== */
html.zqcb-stop #bgOgre *,
html.zqcb-stop .wrap * {
	animation-play-state: paused !important;
}

/* 止めている間だけ、ごくわずかに沈ませる。
   ★これは「動き」ではなく「静止の質」です。0.6% なので酔いません。 */
html.zqcb-stop #bgOgre {
	transform: scale(0.994);
}

/* ============================================================
 * ② 画面の揺れ（減衰する）
 *   ★等間隔で往復させると「振動」に見えて安っぽくなります。
 *     振幅を落としながら間隔を広げると、物がぶつかったように見えます。
 *   ★強さは --zqcb-amp で渡す。通常4px / CHAIN 8px / FULL COMBO 16px（第2段以降）。
 * ========================================================== */
.zqcb-shake {
	animation: zqcb-shake 240ms cubic-bezier(.22, .61, .36, 1) 1;
	will-change: transform;
}

@keyframes zqcb-shake {
	0% { transform: translate3d(0, 0, 0); }
	11% { transform: translate3d(calc(var(--zqcb-amp, 4px) * -1), calc(var(--zqcb-amp, 4px) * .6), 0); }
	24% { transform: translate3d(calc(var(--zqcb-amp, 4px) * .82), calc(var(--zqcb-amp, 4px) * -.5), 0); }
	40% { transform: translate3d(calc(var(--zqcb-amp, 4px) * -.55), calc(var(--zqcb-amp, 4px) * .35), 0); }
	58% { transform: translate3d(calc(var(--zqcb-amp, 4px) * .34), calc(var(--zqcb-amp, 4px) * -.22), 0); }
	78% { transform: translate3d(calc(var(--zqcb-amp, 4px) * -.16), calc(var(--zqcb-amp, 4px) * .1), 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* ============================================================
 * ③ ダメージ数字
 *   ★いまの盤面にも #dmgNum はありますが、あれは「王者の攻撃」用です。
 *     こちらは「こちらが与えた側」なので、別に作って重ならないようにします。
 *   ★跳ねる → わずかに戻る → 上へ流れて消える。
 *     行きすぎてから戻る（1.18倍 → 1.0倍）のが、当たった感じの正体です。
 * ========================================================== */
.zqcb-dmg {
	position: fixed;
	/* ★ミラボ(60)より**後ろ**。生徒がチャットを読んでいる最中に数字が被ってはいけない。
	   最初 62 にして本番で見たら、ミラボの上に出ていた。下げた。 */
	z-index: 55;
	pointer-events: none;     /* ★絶対にクリックを奪わない */

	font-weight: 900;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;

	color: #ffe9a8;
	text-shadow:
		0 2px 0 #7a3a00,
		0 0 12px rgba(255, 176, 60, .85),
		0 0 30px rgba(255, 120, 0, .5);

	animation: zqcb-dmg 660ms cubic-bezier(.18, .9, .3, 1) 1 both;
	will-change: transform, opacity;
}

@keyframes zqcb-dmg {
	0% { opacity: 0; transform: translate(-50%, 0) scale(.5) rotate(-8deg); }
	18% { opacity: 1; transform: translate(-50%, -6px) scale(1.18) rotate(3deg); }
	32% { opacity: 1; transform: translate(-50%, -11px) scale(1) rotate(0deg); }
	70% { opacity: 1; transform: translate(-50%, -34px) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -56px) scale(.95); }
}

/* ============================================================
 * ★動きが苦手な人（prefers-reduced-motion）
 *   揺れとヒットストップの沈みを**完全に止めます。**
 *   ダメージ数字は「出た・消えた」が分からないと不親切なので、
 *   跳ねと回転だけ外して、静かに出して静かに消します。
 * ========================================================== */
@media (prefers-reduced-motion: reduce) {

	.zqcb-shake {
		animation: none !important;
	}

	html.zqcb-stop #bgOgre {
		transform: none;
	}

	.zqcb-dmg {
		animation: zqcb-dmg-calm 700ms linear 1 both;
	}

	@keyframes zqcb-dmg-calm {
		0% { opacity: 0; transform: translate(-50%, 0); }
		15% { opacity: 1; transform: translate(-50%, 0); }
		70% { opacity: 1; transform: translate(-50%, 0); }
		100% { opacity: 0; transform: translate(-50%, 0); }
	}
}

/* 画面が狭いときは数字を小さく（盤面を隠さないため） */
@media (max-width: 560px) {
	.zqcb-dmg {
		font-size: 32px;
	}
}