@keyframes moonPulse {
    0%,
    100% {
        transform: scale(1);
        filter: saturate(1);
    }
    50% {
        transform: scale(1.025);
        filter: saturate(1.28);
    }
}

@keyframes fogDrift {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(22vw);
    }
}

@keyframes fogDriftReverse {
    from {
        transform: translateX(18vw);
    }
    to {
        transform: translateX(-10vw);
    }
}

@keyframes sceneArtDrift {
    0%,
    100% {
        transform: scale(1.04) translate3d(0, 0, 0);
    }
    50% {
        transform: scale(1.075) translate3d(-1.2%, -0.8%, 0);
    }
}

@keyframes storyArtPush {
    from {
        transform: scale(1.1);
    }
    to {
        transform: scale(1.02);
    }
}

@keyframes lineupIdle {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -8px, 0);
    }
}

@keyframes moonGlower {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.76;
    }
    50% {
        transform: scale(1.04);
        opacity: 0.96;
    }
}

@keyframes sceneFogSweep {
    from {
        transform: translateX(-4%);
    }
    to {
        transform: translateX(7%);
    }
}

@keyframes lanternFlicker {
    0%,
    100% {
        opacity: 0.54;
        filter: brightness(0.86);
    }
    45% {
        opacity: 0.78;
        filter: brightness(1.16);
    }
    65% {
        opacity: 0.62;
        filter: brightness(0.96);
    }
}

@keyframes avatarEnter {
    from {
        opacity: 0;
        transform: translate(-50%, -92%) scale(calc(var(--avatar-scale) * 0.72));
        filter: blur(4px);
    }
    to {
        opacity: 0.94;
        transform: translate(-50%, -100%) scale(var(--avatar-scale));
        filter: blur(0);
    }
}

@keyframes avatarBreathe {
    0%,
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
    50% {
        transform: translateY(-4px) scale(1.018, 0.992) rotate(0.35deg);
    }
}

@keyframes avatarStep {
    0%,
    100% {
        filter: none;
    }
    33% {
        filter: saturate(1.08);
    }
    66% {
        filter: contrast(1.04);
    }
}

@keyframes avatarShadowPulse {
    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.72;
    }
    50% {
        transform: translateX(-50%) scale(0.9);
        opacity: 0.52;
    }
}

@keyframes avatarLightSweep {
    0%,
    34%,
    100% {
        opacity: 0;
        transform: translateX(-36%);
    }
    48% {
        opacity: 0.85;
    }
    64% {
        opacity: 0;
        transform: translateX(44%);
    }
}

@keyframes avatarVideoFlicker {
    0%,
    100% {
        opacity: 0.28;
    }
    25% {
        opacity: 0.42;
    }
    50% {
        opacity: 0.24;
    }
    75% {
        opacity: 0.36;
    }
}

@keyframes avatarAuraPulse {
    0%,
    100% {
        opacity: 0.42;
        transform: scale(0.94);
    }
    50% {
        opacity: 0.68;
        transform: scale(1.08);
    }
}

@keyframes avatarFrameJitter {
    0%,
    100% {
        transform: translateX(0) skewX(0deg);
    }
    25% {
        transform: translateX(0.4px) skewX(0.18deg);
    }
    50% {
        transform: translateX(-0.3px) skewX(-0.12deg);
    }
    75% {
        transform: translateX(0.2px) skewX(0.1deg);
    }
}

@keyframes avatarSpeak {
    0%,
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
    30% {
        transform: translateY(-7px) scale(1.026, 0.986) rotate(-0.7deg);
    }
    64% {
        transform: translateY(-2px) scale(0.996, 1.012) rotate(0.6deg);
    }
}

@keyframes avatarVote {
    0%,
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
    42% {
        transform: translateY(-10px) scale(1.04, 0.97) rotate(-1.6deg);
    }
    62% {
        transform: translateY(2px) scale(0.98, 1.02) rotate(1deg);
    }
}

@keyframes avatarNightSway {
    0%,
    100% {
        transform: translateY(0) translateX(0) scale(1) rotate(-0.5deg);
    }
    50% {
        transform: translateY(-5px) translateX(2px) scale(1.015, 0.992) rotate(0.65deg);
    }
}

@keyframes avatarDown {
    from {
        transform: translateY(0) rotate(0deg);
    }
    to {
        transform: translateY(12px) rotate(-3deg);
    }
}

@keyframes mistRise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes selectedPulse {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(245, 197, 66, 0);
    }
    50% {
        box-shadow: 0 0 28px rgba(245, 197, 66, 0.32);
    }
}

.summoned {
    animation: mistRise 520ms ease both;
}

.selected-action {
    animation: selectedPulse 1.4s ease-in-out infinite;
}

.role-werewolf {
    border-color: rgba(192, 57, 43, 0.65) !important;
    box-shadow: inset 0 0 30px rgba(192, 57, 43, 0.16);
}

.role-doctor {
    border-color: rgba(93, 173, 226, 0.65) !important;
    box-shadow: inset 0 0 30px rgba(93, 173, 226, 0.16);
}

.role-seer {
    border-color: rgba(125, 60, 152, 0.75) !important;
    box-shadow: inset 0 0 30px rgba(125, 60, 152, 0.2);
}

.role-hunter {
    border-color: rgba(139, 80, 44, 0.75) !important;
}

.role-guard {
    border-color: rgba(93, 173, 226, 0.72) !important;
}

.role-trickster {
    border-color: rgba(245, 197, 66, 0.72) !important;
    box-shadow: inset 0 0 30px rgba(125, 60, 152, 0.22);
}

.role-villager {
    border-color: rgba(117, 179, 106, 0.72) !important;
}

.phase-night .game-stage {
    box-shadow: 0 0 45px rgba(192, 57, 43, 0.12), var(--shadow);
}

.phase-voting .announcement {
    animation: selectedPulse 1.7s ease-in-out infinite;
}

.eliminated {
    animation: hinge 1s both;
}