@keyframes games-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes games-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

@keyframes games-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

@keyframes games-bump {
    0% { scale: 1; }
    50% { scale: 1.5; }
    100% { scale: 1; }
}

@keyframes games-toast {
    0% { opacity: 0; scale: 0.85; }
    15% { opacity: 1; scale: 1.05; }
    25% { scale: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes games-modal {
    from { opacity: 0; scale: 0.96; }
    to { opacity: 1; scale: 1; }
}

@keyframes games-pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; }
    50% { box-shadow: 0 0 0 4px transparent; }
}

@keyframes games-flip {
    0% { transform: perspective(400px) rotateX(-90deg); opacity: 0; }
    60% { transform: perspective(400px) rotateX(12deg); opacity: 1; }
    100% { transform: perspective(400px) rotateX(0); opacity: 1; }
}

@keyframes games-ball-out {
    0% { scale: 1; }
    40% { scale: 1.35; }
    100% { scale: 0.85; }
}

@keyframes games-spin {
    to { rotate: 360deg; }
}

.games-enter { animation: games-enter 0.35s ease-out both; }
.games-pop { animation: games-pop 0.45s ease-out; }
.games-shake { animation: games-shake 0.45s ease-in-out; }
.games-bump { animation: games-bump 0.35s ease-out; }
.games-toast { animation: games-toast 1.6s ease-out forwards; }
.games-modal-in { animation: games-modal 0.25s ease-out; }
.games-pulse { animation: games-pulse 1.6s ease-in-out infinite; }
.games-flip { animation: games-flip 0.5s ease-out both; }
.games-ball-out { animation: games-ball-out 0.4s ease-out both; }
.games-spin { animation: games-spin 1.2s linear infinite; }

.games-ball {
    position: relative;
    overflow: hidden;
}

.games-ball::before,
.games-ball::after {
    content: '';
    position: absolute;
    top: 8%;
    bottom: 8%;
    width: 0;
    border-left: 1.5px dashed currentColor;
    opacity: 0.7;
}

.games-ball::before { left: 38%; }
.games-ball::after { left: 58%; }

@keyframes so-splash {
    0% { opacity: 0; scale: 0.4; rotate: -8deg; }
    35% { opacity: 1; scale: 1.15; rotate: 2deg; }
    50% { scale: 1; rotate: 0deg; }
    85% { opacity: 1; }
    100% { opacity: 0; scale: 1.05; }
}

.so-stage {
    aspect-ratio: 16 / 10;
    touch-action: manipulation;
}

.so-press {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s ease, opacity 0.2s ease;
}

.so-press:active,
.so-press.is-pressed {
    transform: scale(0.95);
}

.so-shot:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.so-shot.is-armed {
    box-shadow: 0 0 0 3px currentColor;
}

.so-splash { animation: so-splash 1.3s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.so-meter-marker { transition: left 0.35s cubic-bezier(0.2, 1.3, 0.4, 1); }

@media (max-width: 640px) {
    .so-stage { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
    .games-enter, .games-pop, .games-shake, .games-bump, .games-toast, .games-modal-in,
    .games-pulse, .games-flip, .games-ball-out, .games-spin {
        animation: none;
    }
}