/**
 * creator.html のガチャ演出プレビュー専用（gacha-animation.js と共用クラス）
 * fan/gacha.css 全体は読まない（.tab-menu 等の干渉を避ける）
 */

#creator-gacha-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0a0a0a;
  display: none;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: default;
  box-sizing: border-box;
}
#creator-gacha-preview-overlay.creator-gacha-preview-overlay--open {
  display: flex;
}
#creator-gacha-preview-overlay #creator-gacha-preview-overall-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}
#creator-gacha-preview-overlay #creator-gacha-preview-vortex-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
}
#creator-gacha-preview-overlay #creator-gacha-preview-gacha-display {
  position: relative;
  width: 240px;
  height: 320px;
  perspective: 1200px;
  z-index: 10;
}
#creator-gacha-preview-overlay .gacha-anim-skip-hint {
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  text-align: center;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

#creator-gacha-preview-overlay .flash-soft-active {
  animation: creator-gacha-flash-soft 1.2s ease-in-out;
}

@keyframes creator-gacha-flash-soft {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}

#creator-gacha-preview-overlay .gacha-particle {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
  transform: translate(-50%, -50%);
  transition: background-color 0.8s ease, box-shadow 0.8s ease;
}

#creator-gacha-preview-overlay .gacha-particle--star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

#creator-gacha-preview-overlay .gacha-particle--heart {
  clip-path: path("M 50 86 C 20 62 5 45 5 28 C 5 16 14 6 26 6 C 34 6 41 10 50 19 C 59 10 66 6 74 6 C 86 6 95 16 95 28 C 95 45 80 62 50 86 Z");
}

#creator-gacha-preview-overlay .gacha-particle.color-white {
  background-color: #ffffff;
}

#creator-gacha-preview-overlay .gacha-particle.color-gold {
  background-color: #ffd700;
  box-shadow: 0 0 10px #ffaa00;
}

#creator-gacha-preview-overlay .gacha-particle.color-pink {
  background-color: #ff69b4;
  box-shadow: 0 0 10px #ff1493;
}

@keyframes star-orbit {
  from {
    transform: rotate(0deg) translateX(var(--radius)) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg);
  }
}

@keyframes star-burst {
  0% {
    transform: rotate(var(--last-angle)) translateX(var(--radius)) rotate(calc(-1 * var(--last-angle)));
    opacity: 0.8;
  }
  100% {
    transform: rotate(var(--last-angle)) translateX(calc(var(--radius) + 500px)) rotate(calc(-1 * var(--last-angle))) scale(0.5);
    opacity: 0;
  }
}

#creator-gacha-preview-overlay .card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}

#creator-gacha-preview-overlay .spinning {
  transition: transform 4.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#creator-gacha-preview-overlay .card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#creator-gacha-preview-overlay .card-front {
  transform: rotateY(0deg);
}

#creator-gacha-preview-overlay .card-back {
  transform: rotateY(180deg);
  position: relative;
}

#creator-gacha-preview-overlay .card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #e8e4de;
}

#creator-gacha-preview-overlay .card-glow-back {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, #fff 0%, #fff 40%, rgba(255, 255, 255, 0.8) 70%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 20;
  pointer-events: none;
}

#creator-gacha-preview-overlay .glow-active {
  animation: creator-gacha-card-burst-extreme 1.2s ease-in-out;
}

@keyframes creator-gacha-card-burst-extreme {
  0% {
    opacity: 0;
    filter: brightness(1) blur(0px);
  }
  30% {
    opacity: 1;
    filter: brightness(15) contrast(2) blur(2px);
    box-shadow: 0 0 100px 50px white;
  }
  60% {
    opacity: 1;
    filter: brightness(15) contrast(2) blur(5px);
    box-shadow: 0 0 120px 60px white;
  }
  100% {
    opacity: 0;
    filter: brightness(1) blur(0px);
  }
}

#creator-gacha-preview-overlay .shine {
  position: absolute;
  top: 0;
  left: -200%;
  width: 150%;
  height: 100%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  z-index: 5;
  pointer-events: none;
}

#creator-gacha-preview-overlay .shine-animate {
  animation: creator-gacha-shine-move 4.5s forwards;
}

@keyframes creator-gacha-shine-move {
  0% {
    left: -200%;
  }
  100% {
    left: 100%;
  }
}