/* =====================================================================
   プログラミングコンテスト -THE JUDGE-  css/effects.css
   演出：例の「絶対に押さないで」ボタン（§8）、モック上映（§15）、ランクプレート、爆発・炎・紙吹雪などのエフェクト層

   役割分担（設計書 §1.3 / §14）:
     - レイアウト・配色・タイポグラフィ … Tailwind（index.html 内の class）
     - CSS アート・複合 @keyframes・Tailwind 不達時のフォールバック … css/ 配下
   読み込み順（index.html）: base → judges → effects → responsive
   ===================================================================== */

/* =====================================================================
   例の「絶対に押さないで」ボタン（§8 / A8）
   ===================================================================== */
#forbiddenWrap {
  position: fixed; right: 18px; bottom: 16px; z-index: 40; text-align: center;
}
#forbiddenTip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #241a10; color: #ffd75e; font-size: 11px; font-weight: 900;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  animation: tipBob 0.6s ease-in-out infinite alternate;
}
@keyframes tipBob { from { transform: translate(-50%, 0); } to { transform: translate(-50%, -4px); } }
#forbiddenBtn {
  display: flex; align-items: center; gap: 9px;
  background: #b30d1f;
  border: 3px solid #f5f5f5;
  border-radius: 16px;
  padding: 12px 20px;
  animation: fbPulse 1.6s ease-in-out infinite;
  transition: transform 0.1s;
}
#forbiddenWrap.near #forbiddenBtn { animation-duration: 0.45s; }
#forbiddenBtn:active, #forbiddenBtn.pressed { transform: scale(0.93); }
@keyframes fbPulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 12px rgba(230, 0, 35, 0.3); }
  50%      { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 30px rgba(230, 0, 35, 0.65); }
}
.fb-icon {
  font-size: 19px; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.fb-text {
  color: #fff; font-size: 15px; font-weight: 900;
  letter-spacing: 0.05em; white-space: nowrap;
}

/* =====================================================================
   モック上映（動画なしフォールバック §15）
   ===================================================================== */
#mockScreen {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: radial-gradient(circle at 50% 40%, #241a3f, #0d0920 75%);
  overflow: hidden;
}
.mock-caption {
  margin: 0; padding-top: 8%; text-align: center;
  color: rgba(255, 255, 255, 0.65); font-size: 12px; letter-spacing: 0.2em;
}
.mock-button-wrap { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); text-align: center; }
.mock-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #b30d1f; border: 2px solid #f5f5f5; border-radius: 12px;
  padding: 9px 16px;
  color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.05em;
  animation: fbPulse 1.2s ease-in-out infinite;
  transition: transform 0.15s;
}
.mock-btn-icon { font-size: 14px; line-height: 1; }
#mockScreen.p2 .mock-btn { transform: scale(0.85); }
.mock-cursor {
  position: absolute; right: 8%; bottom: 6%; font-size: 30px; opacity: 0;
  transition: opacity 0.4s, transform 1.6s ease-in-out;
  transform: translate(0, 0) rotate(-15deg);
}
#mockScreen.p1 .mock-cursor { opacity: 1; transform: translate(-90px, -46px) rotate(-15deg); }
.mock-flash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 52%, #fff8d0, #ff8c1a 45%, transparent 75%);
}
#mockScreen.boomed .mock-flash { animation: mockBoom 1s ease-out; }
@keyframes mockBoom { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
#mockScreen.boomed { animation: shakeM 0.5s; }
.mock-smoke {
  position: absolute; left: 50%; top: 45%; width: 90px; height: 90px;
  transform: translateX(-50%); border-radius: 50%;
  background: rgba(150, 150, 160, 0.5); filter: blur(14px); opacity: 0;
}
#mockScreen.p3 .mock-smoke { animation: smokeRise 3s ease-out forwards; }

/* =====================================================================
   ランクプレート（結果）
   ===================================================================== */
#rankPlate {
  width: fit-content;
  margin: 16px auto 8px;
  display: flex; align-items: center; gap: 10px;
  font-size: 30px; font-weight: 900;
  padding: 10px 26px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 215, 94, 0.6);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  transition: filter 0.8s, color 0.8s, border-color 0.8s;
}
#rankPlate.slam { animation: slam 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes slam {
  0% { transform: scale(2.6); opacity: 0; }
  60% { transform: scale(0.94); opacity: 1; }
  100% { transform: scale(1); }
}
#rankPlate.rank-grand { border-color: #ffd75e; color: #ffd75e; }
#rankPlate.rank-fail  { color: #ff6b6b; }
#rankPlate.rank-bomber { border-color: rgba(255, 90, 42, 0.8); color: #ff8c5a; }
#rankPlate.burnt {
  filter: brightness(0.3) blur(0.6px); color: #3a2f28; border-color: #3a2f28;
}

/* スコアチップ */
.score-chip {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700;
}
.score-chip b { color: #ffd75e; font-size: 14px; }

/* =====================================================================
   エフェクト層（爆発・炎・紙吹雪 ほか）
   ===================================================================== */
#fxLayer {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden;
}

/* 画面シェイク（A9） */
@keyframes shakeS { 0%,100% { transform: translate(0); } 25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px); } 75% { transform: translate(2px, 2px); } }
@keyframes shakeM { 0%,100% { transform: translate(0); } 20% { transform: translate(7px, -5px); } 40% { transform: translate(-7px, 5px); } 60% { transform: translate(5px, 4px); } 80% { transform: translate(-5px, -4px); } }
@keyframes shakeL { 0%,100% { transform: translate(0); } 15% { transform: translate(12px, -9px) rotate(0.6deg); } 30% { transform: translate(-12px, 9px) rotate(-0.6deg); } 45% { transform: translate(10px, 7px); } 60% { transform: translate(-10px, -7px); } 80% { transform: translate(6px, 4px); } }
#stage.shake-s { animation: shakeS 0.45s; }
#stage.shake-m { animation: shakeM 0.6s; }
#stage.shake-l { animation: shakeL 0.9s; }

/* 爆発素材オーバーレイ（A9）: 黒背景の実写素材を screen 合成で透過 */
.fx-boom-video {
  position: fixed; z-index: 52; pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity 0.12s;
}
.fx-boom-video.on { opacity: 1; }
.fx-boom-video.size-s { width: 280px; }
.fx-boom-video.size-m { width: 520px; }
.fx-boom-video.size-l { width: 100vw; height: 100vh; object-fit: cover; }

/* 爆発フラッシュ */
.fx-flash {
  position: fixed; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff8d0 0%, #ffd75e 25%, #ff8c1a 50%, rgba(230, 57, 35, 0.6) 70%, transparent 80%);
  transform: translate(-50%, -50%);
  animation: flashOut 0.7s ease-out forwards;
}
@keyframes flashOut {
  0% { opacity: 0; scale: 0.2; }
  15% { opacity: 1; }
  100% { opacity: 0; scale: 1.35; }
}

/* 破片 */
.fx-debris {
  position: fixed; width: 9px; height: 9px; border-radius: 2px;
  transform: translate(-50%, -50%);
  animation: debrisFly 0.9s cubic-bezier(0.2, 0.7, 0.6, 1) forwards;
}
@keyframes debrisFly {
  from { translate: 0 0; opacity: 1; rotate: 0deg; }
  to   { translate: var(--dx) var(--dy); opacity: 0; rotate: 540deg; }
}

/* 煙 */
.fx-smoke {
  position: fixed; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(150, 150, 160, 0.45); filter: blur(10px);
  transform: translate(-50%, -50%);
  animation: smokeRise 2.4s ease-out forwards;
}
@keyframes smokeRise {
  0% { opacity: 0; translate: 0 0; scale: 0.6; }
  20% { opacity: 0.8; }
  100% { opacity: 0; translate: var(--sx, 0px) -130px; scale: 2; }
}

/* 紙吹雪（A13） */
.fx-confetti {
  position: fixed; top: -20px; width: 10px; height: 15px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  from { transform: translateY(-20px) rotate(0) rotateY(0); opacity: 1; }
  to   { transform: translateY(105vh) rotate(660deg) rotateY(720deg); opacity: 0.7; }
}

/* ハート（A14） */
.fx-heart {
  position: fixed; font-size: 15px;
  animation: heartUp 1.5s ease-out forwards;
}
@keyframes heartUp {
  from { transform: translateY(0) scale(0.6); opacity: 1; }
  to   { transform: translateY(-90px) scale(1.25); opacity: 0; }
}

/* 金の火の粉（グランプリ火吹き） */
.fx-spark {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  background: #ffd75e; box-shadow: 0 0 8px #ffd75e;
  animation: sparkFall 1.8s ease-in forwards;
}
@keyframes sparkFall {
  from { transform: translate(0, 0); opacity: 1; }
  to   { transform: translate(var(--dx), 200px); opacity: 0; }
}

/* 灰（落選: 焼却後） */
.fx-ash {
  position: fixed; width: 6px; height: 6px; border-radius: 40%;
  background: #6d6a66;
  animation: ashFall 2.2s ease-in forwards;
}
@keyframes ashFall {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to   { transform: translate(var(--dx), 140px) rotate(300deg); opacity: 0; }
}

/* ---------- ドラゴンの火吹き（A15） ---------- */
.fx-flame-cone {
  position: fixed; height: 30px; width: 10px;
  transform-origin: 0 50%;
  border-radius: 40% 60% 60% 40% / 50%;
  background: linear-gradient(90deg, #fff8d0, #ffd75e 22%, #ff8c1a 52%, rgba(230, 57, 35, 0.75) 78%, transparent);
  filter: blur(1px);
  animation: coneGrow 0.3s ease-out forwards, coneFlicker 0.12s 0.3s infinite alternate;
}
@keyframes coneGrow { from { scale: 0 1; opacity: 0.4; } to { scale: 1 1; opacity: 1; } }
@keyframes coneFlicker { from { scale: 1 0.92; opacity: 0.92; } to { scale: 1.03 1.08; opacity: 1; } }
.fx-flame-cone.out { animation: coneOut 0.35s ease-in forwards; }
@keyframes coneOut { to { scale: 0.85 0.1; opacity: 0; } }

.fx-flame-p {
  position: fixed; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff2b0, #ff9c2a 55%, rgba(230, 57, 35, 0.4));
  transform: translate(-50%, -50%);
  animation: flameP 0.7s ease-out forwards;
}
@keyframes flameP {
  0% { opacity: 1; scale: 0.7; }
  70% { opacity: 0.9; }
  100% { opacity: 0; translate: var(--fx, 0px) -34px; scale: 1.5; filter: grayscale(0.9); }
}

/* ボンバーエンドの炎あかり */
.fx-fireglow {
  position: fixed; width: 320px; height: 320px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255, 156, 42, 0.5), rgba(255, 90, 42, 0.18) 55%, transparent 75%);
  animation: glowPulse 0.5s ease-in-out infinite alternate;
}
@keyframes glowPulse { from { opacity: 0.75; scale: 0.96; } to { opacity: 1; scale: 1.04; } }

/* ---------- ブラックアウト / 非常灯（A12） ---------- */
#blackout {
  position: fixed; inset: 0; z-index: 70; background: #000;
  opacity: 0; transition: opacity 1.1s ease; pointer-events: none;
}
#blackout.on { opacity: 1; }
#emergencyLight {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  background: radial-gradient(circle at 50% 12%, rgba(70, 255, 130, 0.17), transparent 55%);
  animation: emgPulse 1.6s ease-in-out infinite alternate;
}
@keyframes emgPulse { from { opacity: 0.55; } to { opacity: 1; } }
body.emergency #stage { filter: brightness(0.42) saturate(0.55); }
body.emergency #forbiddenWrap { filter: brightness(0.5); }