/* ============ EFFECTS ============ */

/* Flash overlay */
.flash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, #fff 0%, rgba(255,255,255,0.6) 30%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 70;
  mix-blend-mode: screen;
}
.flash.fire {
  animation: flashFire 0.65s ease-out forwards;
}
@keyframes flashFire {
  0%   { opacity: 0; transform: scale(0.5); }
  15%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.3); }
}
.flash.fire.intense { animation-duration: 1.2s; }

/* Light beam */
.beam {
  position: absolute;
  left: 50%; top: 50%;
  width: 80px;
  height: 0;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.95) 30%,
    rgba(255,255,255,0.95) 70%,
    transparent 100%);
  filter: blur(8px);
  opacity: 0;
  z-index: 25;
  pointer-events: none;
  mix-blend-mode: screen;
}
.beam.fire {
  animation: beamFire 0.9s cubic-bezier(.2,.6,.2,1) forwards;
}
@keyframes beamFire {
  0%   { height: 0; opacity: 0; width: 30px; }
  20%  { height: 600px; opacity: 1; width: 80px; }
  100% { height: 700px; opacity: 0; width: 200px; }
}
.beam.normal   { background: linear-gradient(180deg, transparent, rgba(220,225,240,0.9) 50%, transparent); }
.beam.rare     { background: linear-gradient(180deg, transparent, rgba(120,200,255,0.95) 50%, transparent); }
.beam.super    { background: linear-gradient(180deg, transparent, rgba(255,220,120,0.95) 50%, transparent); }
.beam.infinite {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,120,220,0.9) 25%,
    rgba(120,200,255,0.9) 50%,
    rgba(255,225,120,0.9) 75%,
    transparent 100%);
}

/* Concentric rings (ripples) */
.rings {
  position: absolute;
  left: 50%; top: 50%;
  pointer-events: none;
  z-index: 24;
}
.ring {
  position: absolute;
  left: 0; top: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  width: 200px; height: 200px;
}
.ring.fire {
  animation: ringFire 1.2s ease-out forwards;
}
@keyframes ringFire {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* Particle container */
.particles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 30;
  overflow: visible;
}
.particle {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Sparkles around card when displayed */
.orbitals {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 11;
  opacity: 0;
  transition: opacity 1s ease;
}
.card-container.displayed.super .orbitals,
.card-container.displayed.infinite .orbitals { opacity: 1; }

.orbital {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 20px currentColor;
  transform-origin: center;
}

/* Scene shake on big reveals */
.scene.shake-light  { animation: sceneShakeLight 0.4s ease-out; }
.scene.shake-medium { animation: sceneShakeMed   0.6s ease-out; }
.scene.shake-heavy  { animation: sceneShakeHeavy 1s   ease-out; }
@keyframes sceneShakeLight {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-2px,1px); }
  50% { transform: translate(2px,-1px); }
  75% { transform: translate(-1px,2px); }
}
@keyframes sceneShakeMed {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-6px,3px); }
  25% { transform: translate(5px,-4px); }
  40% { transform: translate(-4px,5px); }
  55% { transform: translate(5px,2px); }
  70% { transform: translate(-3px,-3px); }
  85% { transform: translate(2px,1px); }
}
@keyframes sceneShakeHeavy {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-12px,6px) rotate(-0.3deg); }
  20% { transform: translate(10px,-8px) rotate(0.3deg); }
  35% { transform: translate(-8px,10px) rotate(-0.2deg); }
  50% { transform: translate(10px,4px) rotate(0.2deg); }
  65% { transform: translate(-6px,-6px) rotate(-0.1deg); }
  80% { transform: translate(4px,4px) rotate(0.1deg); }
}

/* Hint text */
.hint {
  position: absolute;
  bottom: 138px;
  left: 50%; transform: translateX(-50%);
  font-family: 'RocknRoll One', sans-serif;
  font-size: 11px;
  letter-spacing: 0.36em;
  color: rgba(255,255,255,0.4);
  padding-left: 0.36em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}
.hint::before { content: "▼ "; opacity: 0.5; }