/* Glow Animations */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    }
    50% {
        box-shadow: 0 0 40px rgba(212, 175, 55, 1);
    }
}

.frame-border {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* Stars Twinkling */
@keyframes stars-twinkle {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.2);
    }
}

.stars {
    animation: stars-twinkle 4s ease-in-out infinite;
}

/* Moon Glow */
@keyframes moon-glow {
    0%, 100% {
        box-shadow: 0 0 60px rgba(255, 228, 179, 0.8),
                    inset -10px -10px 20px rgba(150, 150, 150, 0.3);
    }
    50% {
        box-shadow: 0 0 100px rgba(255, 228, 179, 1),
                    inset -10px -10px 20px rgba(150, 150, 150, 0.3);
    }
}

.moon {
    animation: moon-glow 6s ease-in-out infinite;
}

/* Fog Movement */
@keyframes fog-drift {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

.fog {
    animation: fog-drift 20s linear infinite alternate;
}

/* Player Entrance */
@keyframes player-enter {
    from {
        opacity: 0;
        transform: scale(0) rotate(180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.player {
    animation: player-enter 0.6s ease-out backwards;
}

/* Player Death Animation */
@keyframes death-animation {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.3) rotate(15deg);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.8) rotate(0deg);
        opacity: 0.5;
    }
}

.player.dying {
    animation: death-animation 1s ease-out;
}

/* Death Marker Appearance */
@keyframes death-marker-appear {
    from {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.player.dead .death-marker {
    animation: death-marker-appear 0.6s ease-out;
}

/* Vote Line Animation */
@keyframes vote-line-draw {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.vote-line line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: vote-line-draw 0.8s ease-out forwards;
}

/* Vote Arrow Pulse */
@keyframes arrow-pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.vote-line marker {
    animation: arrow-pulse 1.5s ease-in-out infinite;
}

/* Card Flip */
@keyframes card-flip {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(180deg);
    }
}

/* Phase Transition */
@keyframes phase-transition {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

.phase-transition-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle, rgba(139, 69, 19, 0.4), transparent);
    pointer-events: none;
    animation: phase-transition 2s ease-out;
    z-index: 50;
}

/* Night to Day */
@keyframes night-to-day {
    from {
        filter: brightness(0.3) contrast(1.2);
    }
    to {
        filter: brightness(1) contrast(1);
    }
}

body.day-phase .game-main {
    animation: night-to-day 2s ease-out;
}

/* Day to Night */
@keyframes day-to-night {
    from {
        filter: brightness(1) contrast(1);
    }
    to {
        filter: brightness(0.3) contrast(1.2);
    }
}

body.night-phase .game-main {
    animation: day-to-night 2s ease-out;
}

/* Skill Panel Entrance */
@keyframes skill-panel-enter {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.skill-panel {
    animation: skill-panel-enter 0.3s ease-out;
}

/* Vote Panel Entrance */
@keyframes vote-panel-enter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.vote-panel {
    animation: vote-panel-enter 0.3s ease-out;
}

/* Victory Title Animation */
@keyframes victory-title {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.victory-title {
    animation: victory-title 0.8s ease-out;
}

/* Button Hover Effect */
@keyframes button-shine {
    from {
        background-position: -200% center;
    }
    to {
        background-position: 200% center;
    }
}

.start-button,
.role-confirm,
.replay-button,
.skill-confirm,
.vote-confirm {
    background-size: 200% auto;
    transition: all 0.3s;
}

.start-button:hover,
.role-confirm:hover,
.replay-button:hover,
.skill-confirm:hover,
.vote-confirm:hover {
    animation: button-shine 2s linear infinite;
}

/* Particle Effects */
@keyframes particle-float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

.particle {
    position: absolute;
    pointer-events: none;
    animation: particle-float linear infinite;
}

/* Text Glow */
@keyframes text-glow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 1),
                     0 0 30px rgba(212, 175, 55, 0.8);
    }
}

.game-title {
    animation: text-glow 3s ease-in-out infinite;
}

/* Phase Icon Rotation */
@keyframes phase-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.phase-icon.rotating {
    animation: phase-rotate 2s linear infinite;
}

/* Log Entry Slide In */
@keyframes log-slide-in {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.log-entry {
    animation: log-slide-in 0.3s ease-out;
}

/* Player Selection Highlight */
@keyframes selection-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 1);
    }
}

.player.selected .frame-border {
    animation: selection-pulse 1s ease-in-out infinite;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
}

/* Skill Target Highlight */
@keyframes target-highlight {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.5);
    }
}

.player.targetable {
    animation: target-highlight 1.5s ease-in-out infinite;
    cursor: pointer;
}

.player.targetable .frame-border {
    box-shadow: 0 0 30px rgba(100, 200, 255, 0.8);
}

/* Role Reveal Shine */
@keyframes card-shine {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.card-back::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    background-size: 200% 100%;
    animation: card-shine 3s linear infinite;
}

/* Accessory Float */
@keyframes accessory-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.player-accessory {
    animation: accessory-float 2s ease-in-out infinite;
}

/* Status Update Flash */
@keyframes status-flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.count-value.updated {
    animation: status-flash 0.5s ease-out;
}

/* Stagger Delays for Player Entrance */
.player:nth-child(1) { animation-delay: 0.05s; }
.player:nth-child(2) { animation-delay: 0.1s; }
.player:nth-child(3) { animation-delay: 0.15s; }
.player:nth-child(4) { animation-delay: 0.2s; }
.player:nth-child(5) { animation-delay: 0.25s; }
.player:nth-child(6) { animation-delay: 0.3s; }
.player:nth-child(7) { animation-delay: 0.35s; }
.player:nth-child(8) { animation-delay: 0.4s; }
.player:nth-child(9) { animation-delay: 0.45s; }
.player:nth-child(10) { animation-delay: 0.5s; }
.player:nth-child(11) { animation-delay: 0.55s; }
.player:nth-child(12) { animation-delay: 0.6s; }
.player:nth-child(13) { animation-delay: 0.65s; }
.player:nth-child(14) { animation-delay: 0.7s; }
.player:nth-child(15) { animation-delay: 0.75s; }
.player:nth-child(16) { animation-delay: 0.8s; }

/* Button Pulse Animation */
@keyframes button-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    }
}

.pulse {
    animation: button-pulse 0.5s ease-out;
}