/* === ANIMATIONS === */
@keyframes winGlow {
    0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 2px 8px rgba(201,168,76,0.3); }
    50% { box-shadow: 0 0 0 3px var(--gold-light), 0 0 16px rgba(201,168,76,0.5); }
}
.card.win-ace { animation: winGlow 1.4s ease-in-out infinite; }

/* Doomed ace - unwinnable game */
.card.doomed-ace {
    box-shadow: 0 0 0 2px #e74c3c, 0 0 8px rgba(231, 76, 60, 0.4);
}

/* Perfect win - intense ace glow */
@keyframes perfectGlow {
    0%   { box-shadow: 0 0 0 2px var(--gold), 0 0 8px rgba(201,168,76,0.4); transform: scale(1); }
    25%  { box-shadow: 0 0 0 4px var(--gold-light), 0 0 30px rgba(201,168,76,0.7); transform: scale(1.03); }
    50%  { box-shadow: 0 0 0 3px #fff, 0 0 40px rgba(255,255,255,0.4), 0 0 60px rgba(201,168,76,0.5); transform: scale(1.05); }
    75%  { box-shadow: 0 0 0 4px var(--gold-light), 0 0 30px rgba(201,168,76,0.7); transform: scale(1.03); }
    100% { box-shadow: 0 0 0 2px var(--gold), 0 0 8px rgba(201,168,76,0.4); transform: scale(1); }
}
.perfect-mode .card.win-ace { animation: perfectGlow 2s ease-in-out infinite; }

/* Perfect sparkle particles */
.sparkle {
    position: fixed; pointer-events: none; z-index: 999;
    width: 6px; height: 6px; border-radius: 50%;
    animation: sparkleFloat linear forwards;
}
@keyframes sparkleFloat {
    0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
    50%  { opacity: 0.8; transform: translateY(-40vh) scale(1.2) rotate(180deg); }
    100% { opacity: 0; transform: translateY(-80vh) scale(0) rotate(360deg); }
}

/* Perfect dialog styling */
#gameover-dialog.perfect .dialog-header {
    font-size: 1.6rem;
    background: linear-gradient(90deg, var(--gold), #fff, var(--gold));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: perfectShine 2s linear infinite;
}
@keyframes perfectShine {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
#gameover-dialog.perfect .gameover-icon {
    font-size: 2rem; letter-spacing: 6px;
    animation: perfectIconPulse 1.5s ease-in-out infinite;
}
@keyframes perfectIconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.9; }
}

@keyframes deckGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(200,175,100,0.4); }
    50% { box-shadow: 0 0 16px rgba(200,175,100,0.7); }
}
.deck-stack.hint-glow { animation: deckGlow 1.5s ease-in-out infinite; border-radius: 10px; }

/* === SHAKE ANIMATION === */
@keyframes card-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
.card.shake { animation: card-shake 0.35s ease; }

@keyframes sadPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    60% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .card.win-ace, .perfect-mode .card.win-ace { animation: none; }
    #flying-card { transition: none !important; }
    .sparkle { display: none; }
}