/* =====================================================
   EFFECTS · Particelle, Shake, Flash, Aura
   ===================================================== */

/* ===== LAYER PARTICELLE ===== */
#particlesLayer { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; }

.particle { position: absolute; pointer-events: none; will-change: transform, opacity; animation: particleBurst var(--duration, 1s) cubic-bezier(0.16, 1, 0.3, 1) forwards; filter: drop-shadow(0 0 6px currentColor); }

@keyframes particleBurst {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.2); opacity: 1; }
  40% { transform: translate(calc(-50% + var(--tx, 0px) * 0.6), calc(-50% + var(--ty, 0px) * 0.6)) rotate(calc(var(--rot, 0deg) * 0.6)) scale(1.2); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) + 100px)) rotate(var(--rot, 0deg)) scale(0.4); opacity: 0; }
}

/* ===== CORIANDOLI ===== */
.confetti { position: absolute; pointer-events: none; font-weight: 900; animation: confettiFall var(--fall, 4s) linear var(--delay, 0s) forwards; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); will-change: transform, opacity; }

@keyframes confettiFall {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) translateX(var(--drift, 0px)) rotate(var(--rot, 0deg)); opacity: 0.3; }
}

/* ===== SHAKE ===== */
.shake-light { animation: shakeLight 0.3s ease; }
@keyframes shakeLight { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, -1px); } }

.shake-strong { animation: shakeStrong 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shakeStrong {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-8px, -4px) rotate(-1deg); }
  20% { transform: translate(8px, 4px) rotate(1deg); }
  30% { transform: translate(-6px, 6px) rotate(-0.5deg); }
  40% { transform: translate(6px, -6px) rotate(0.5deg); }
  50% { transform: translate(-5px, 5px) rotate(-0.5deg); }
  60% { transform: translate(5px, -5px) rotate(0.5deg); }
  70% { transform: translate(-3px, 3px) rotate(-0.3deg); }
  80% { transform: translate(3px, -3px) rotate(0.3deg); }
  90% { transform: translate(-1px, 1px) rotate(-0.1deg); }
}

/* ===== FLASH ===== */
.screen-flash { position: fixed; inset: 0; pointer-events: none; z-index: 9999; animation: flashFade 0.5s ease-out forwards; }
@keyframes flashFade { 0% { opacity: 0.9; } 100% { opacity: 0; } }

/* ===== AURA REWARD ===== */
.reward-card.rarity-common.unlocked { animation: auraCommon 2s ease-in-out infinite; }
@keyframes auraCommon { 0%, 100% { box-shadow: 0 0 40px rgba(74,222,128,0.4); } 50% { box-shadow: 0 0 60px rgba(74,222,128,0.6); } }

.reward-card.rarity-rare { animation: auraRare 2s ease-in-out infinite; }
@keyframes auraRare { 0%, 100% { box-shadow: 0 0 40px rgba(96,165,250,0.5); } 50% { box-shadow: 0 0 70px rgba(96,165,250,0.8); } }

.reward-card.rarity-epic { animation: auraEpic 1.8s ease-in-out infinite; }
@keyframes auraEpic { 0%, 100% { box-shadow: 0 0 50px rgba(192,132,252,0.6); transform: scale(1); } 50% { box-shadow: 0 0 80px rgba(192,132,252,1); transform: scale(1.02); } }

.reward-card.rarity-legendary { animation: auraLegendary 1.5s ease-in-out infinite; border-width: 3px; }
@keyframes auraLegendary {
  0%, 100% { box-shadow: 0 0 60px rgba(251,191,36,0.8), 0 0 120px rgba(251,191,36,0.4); transform: scale(1); }
  50% { box-shadow: 0 0 100px rgba(251,191,36,1), 0 0 180px rgba(251,191,36,0.6); transform: scale(1.04); }
}

.reward-card.rarity-legendary .reward-emoji { animation: legendaryBounce 1s cubic-bezier(0.16, 1, 0.3, 1), legendarySpin 3s ease-in-out infinite 0.5s; }
@keyframes legendaryBounce { 0% { transform: scale(0) rotate(-180deg); } 60% { transform: scale(1.3) rotate(15deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes legendarySpin { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(5deg) scale(1.05); } }

/* ===== LEGENDARY MODE BG ===== */
body.legendary-mode { background: radial-gradient(circle at 50% 0%, #3b2416 0%, #1a0f1e 60%); animation: legendaryBg 3s ease-in-out infinite; }
@keyframes legendaryBg { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }