/* ==========================================================================
   pachinko.css - パチンコ脳汁演出（保留変化・当落タメ・役物落下・出玉感）(v2.1)
   ========================================================================== */

/* --- 1. 保留変化・前兆予告トレイ (SCR-03) --- */
.pachinko-hold-shelf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 12px;
  margin: 6px auto 10px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.95) 100%);
  border: 1.5px solid rgba(148, 163, 184, 0.3);
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.15);
  width: fit-content;
  max-width: 90%;
  position: relative;
  z-index: 5;
}

.hold-shelf-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 4px;
}

.hold-slots {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 保留玉 (球体 3D 表現) */
.hold-orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.4), inset 2px 2px 4px rgba(255, 255, 255, 0.6);
}

.hold-orb.current {
  width: 26px;
  height: 26px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), inset 0 0 4px rgba(255, 255, 255, 0.8);
}

/* 青保留 (通常) */
.hold-blue {
  background: radial-gradient(circle at 35% 35%, #93c5fd 0%, #3b82f6 50%, #1d4ed8 100%);
}

/* 緑保留 (3連以上) */
.hold-green {
  background: radial-gradient(circle at 35% 35%, #86efac 0%, #22c55e 50%, #15803d 100%);
  box-shadow: 0 0 8px #22c55e, inset 0 0 4px #86efac;
}

/* 赤保留 (激熱・チャレンジ問題) */
.hold-red {
  background: radial-gradient(circle at 35% 35%, #fca5a5 0%, #ef4444 50%, #b91c1c 100%);
  box-shadow: 0 0 12px #ef4444, inset 0 0 6px #fca5a5;
  animation: red-aura-pulse 1.2s infinite alternate ease-in-out;
}

@keyframes red-aura-pulse {
  0% {
    box-shadow: 0 0 6px #ef4444, 0 0 12px rgba(239, 68, 68, 0.6);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 14px #ef4444, 0 0 24px rgba(239, 68, 68, 0.9);
    transform: scale(1.15);
  }
}

/* 虹保留 (大当り濃厚・ボスラッシュ) */
.hold-rainbow {
  background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9), inset 0 0 8px rgba(255, 255, 255, 0.8);
  animation: rainbow-spin 2s linear infinite;
}

@keyframes rainbow-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 出題時バウンス */
.hold-orb.bounce-in {
  animation: orb-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes orb-bounce {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); }
}

/* --- 2. 当落タメ・激アツ暗転オーバーレイ --- */
#pachinko-tame-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 5, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  pointer-events: auto;
}

#pachinko-tame-modal.show {
  display: flex;
  opacity: 1;
}

/* スポットライト光線 */
.tame-spotlight {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 120%;
  background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.28) 0%, rgba(239, 68, 68, 0.05) 60%, transparent 80%);
  pointer-events: none;
}

/* 祈るマスコット（画面右下カットイン） */
.tame-mascot-pray {
  position: absolute;
  right: -200px;
  bottom: 30px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #facc15;
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.7);
  transition: right 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  pointer-events: none;
  z-index: 10002;
}

#pachinko-tame-modal.show .tame-mascot-pray {
  right: 16px;
}

@media (min-width: 768px) {
  .tame-mascot-pray {
    width: 220px;
    height: 220px;
    bottom: 50px;
  }
  #pachinko-tame-modal.show .tame-mascot-pray {
    right: 60px;
  }
}

/* 激アツPUSHボタン コンテナ */
.tame-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  z-index: 10003;
}

/* ネオン点滅「押せっ……！」 */
.tame-neon-text {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 8px #ef4444, 0 0 16px #ef4444, 0 0 28px #dc2626;
  letter-spacing: 0.15em;
  animation: neon-blink 0.4s infinite alternate ease-in-out;
}

@keyframes neon-blink {
  0% { opacity: 0.7; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1.04); text-shadow: 0 0 12px #facc15, 0 0 24px #ef4444, 0 0 40px #ff0000; }
}

/* 激アツPUSHボタン本体 */
.pachinko-push-btn {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 6px solid #facc15;
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.8), 0 10px 25px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.6);
  cursor: pointer;
  background-size: cover;
  background-position: center;
  position: relative;
  outline: none;
  animation: button-rumble 0.08s infinite ease-in-out;
  transform-origin: center;
  transition: transform 0.08s ease, filter 0.1s ease;
}

@media (min-width: 768px) {
  .pachinko-push-btn {
    width: 210px;
    height: 210px;
  }
}

.pachinko-push-btn:hover {
  filter: brightness(1.15);
}

.pachinko-push-btn:active,
.pachinko-push-btn.pressed {
  transform: scale(0.92) translateY(8px) !important;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.9), inset 0 4px 10px rgba(0, 0, 0, 0.6);
}

/* ボタンの激震 (ガタガタ振動) */
@keyframes button-rumble {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-3px, 2px) rotate(-1.5deg); }
  50% { transform: translate(3px, -2px) rotate(1.5deg); }
  75% { transform: translate(-2px, -2px) rotate(-1deg); }
  100% { transform: translate(2px, 2px) rotate(1deg); }
}

.tame-sub-hint {
  font-size: 0.9rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- 3. 確定閃光ホワイトアウト --- */
#pachinko-flash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: #ffffff;
  pointer-events: none;
}

#pachinko-flash.active {
  display: block;
  animation: white-flash-anim 0.18s ease-out forwards;
}

@keyframes white-flash-anim {
  0% { opacity: 1; }
  70% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* --- 4. 金文字役物ギミック落下演出 --- */
#pachinko-gimmick {
  display: none;
  position: fixed;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10020;
  pointer-events: none;
  text-align: center;
}

#pachinko-gimmick.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: gimmick-drop-crash 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gimmick-emblem {
  font-size: 4.2rem;
  font-weight: 900;
  background: linear-gradient(180deg, #fff7ed 0%, #fef08a 25%, #eab308 50%, #ca8a04 75%, #713f12 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px #eab308) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.9));
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.gimmick-sub-badge {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, #dc2626, #ef4444, #dc2626);
  padding: 6px 24px;
  border-radius: 20px;
  border: 2px solid #fef08a;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.9);
  margin-top: -6px;
  letter-spacing: 0.15em;
}

@keyframes gimmick-drop-crash {
  0% {
    top: -300px;
    transform: translateX(-50%) scale(0.5);
    opacity: 0;
  }
  30% {
    top: 35%;
    transform: translateX(-50%) scale(1.25);
    opacity: 1;
  }
  38% {
    top: 32%;
    transform: translateX(-50%) scale(1.1);
  }
  45% {
    top: 34%;
    transform: translateX(-50%) scale(1.15);
  }
  85% {
    top: 34%;
    transform: translateX(-50%) scale(1.15);
    opacity: 1;
  }
  100% {
    top: 30%;
    transform: translateX(-50%) scale(1.3);
    opacity: 0;
  }
}

/* 画面全体の激震 (アースクエイク) */
.screen-earthquake {
  animation: earthquake-shake 0.55s ease-in-out !important;
}

@keyframes earthquake-shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-8px, 12px) scale(1.02); }
  20% { transform: translate(8px, -10px); }
  30% { transform: translate(-6px, 8px); }
  40% { transform: translate(6px, -6px); }
  50% { transform: translate(-4px, 4px); }
  70% { transform: translate(3px, -2px); }
  100% { transform: translate(0, 0); }
}

/* --- 5. 歓喜マスコット（正解時カットイン） --- */
#pachinko-mascot-joy {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%) scale(0.6);
  z-index: 10015;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 5px solid #facc15;
  box-shadow: 0 0 35px rgba(250, 204, 21, 0.9), 0 0 60px rgba(234, 179, 8, 0.6);
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
}

#pachinko-mascot-joy.show {
  display: block;
  animation: joy-cutin 1.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes joy-cutin {
  0% { transform: translateX(-50%) scale(0.2) translateY(100px); opacity: 0; }
  25% { transform: translateX(-50%) scale(1.15) translateY(0); opacity: 1; }
  35% { transform: translateX(-50%) scale(1); opacity: 1; }
  85% { transform: translateX(-50%) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) scale(1.15) translateY(-20px); opacity: 0; }
}

/* --- 6. ハズレ画面割れシェイク --- */
.screen-crack-shake {
  animation: crack-shake-anim 0.45s ease-in-out !important;
}

@keyframes crack-shake-anim {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-10px, 0); filter: invert(0.2); }
  30% { transform: translate(10px, 0); }
  45% { transform: translate(-8px, 0); }
  60% { transform: translate(6px, 0); }
  80% { transform: translate(-3px, 0); }
  100% { transform: translate(0, 0); }
}

/* --- 7. 出玉感・金貨コイン噴水 Canvas (SCR-04) --- */
#payout-coin-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}