@keyframes fadeOut {
            0% { opacity: 1; transform: scale(1); }
            70% { opacity: 1; }
            100% { opacity: 0; transform: scale(0.9); visibility: hidden; }
        }

        /* indikator sentuh */
        @media (max-width: 768px) {
            .ground { height: 8px; }
        }
 .stickman {
    /* properti lain tetap */
    opacity: 0;  /* tambahkan ini */
    transition: opacity 0.2s ease;
}

.stickman.ready {
    opacity: 1;  /* akan diaktifkan oleh JS */
}

        .stickman:active {
            cursor: grabbing;
        }

        .stickman.dragging {
            filter: drop-shadow(0 8px 25px rgba(0,0,0,0.5));
            cursor: grabbing;
        }

        .stickman-body-wrapper {
            transform-origin: 25px 15px;
            transition: none;
        }

        .stickman svg {
            width: 100%;
            height: 100%;
            pointer-events: none;
            display: block;
        }

        .stickman-head {
            cursor: grab;
            pointer-events: auto;
        }

        .stickman-head:active {
            cursor: grabbing;
        }

        .online-status {
              display: none;         }

        @keyframes pulse-green {
            0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.7); }
            70% { box-shadow: 0 0 0 5px rgba(76,175,80,0); }
            100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
        }

        /* Animasi panik saat jatuh / flying */
        @keyframes panicArmLeft {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-70deg); }
            50% { transform: rotate(70deg); }
            75% { transform: rotate(-50deg); }
        }

        @keyframes panicArmRight {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(70deg); }
            50% { transform: rotate(-70deg); }
            75% { transform: rotate(50deg); }
        }

        @keyframes panicLegLeft {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-55deg); }
            50% { transform: rotate(55deg); }
            75% { transform: rotate(-45deg); }
        }

        @keyframes panicLegRight {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(55deg); }
            50% { transform: rotate(-55deg); }
            75% { transform: rotate(45deg); }
        }

        @keyframes shakeHead {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(-2px, -2px); }
            75% { transform: translate(2px, 2px); }
        }

        .stickman.flying .arm-left-group {
            animation: panicArmLeft 0.2s ease-in-out infinite;
            transform-origin: 15px 35px;
        }

        .stickman.flying .arm-right-group {
            animation: panicArmRight 0.2s ease-in-out infinite;
            transform-origin: 35px 35px;
        }

        .stickman.flying .leg-left-group {
            animation: panicLegLeft 0.2s ease-in-out infinite;
            transform-origin: 18px 60px;
        }

        .stickman.flying .leg-right-group {
            animation: panicLegRight 0.2s ease-in-out infinite;
            transform-origin: 32px 60px;
        }

        .stickman.flying .stickman-head-group {
            animation: shakeHead 0.1s ease-in-out infinite;
        }

        /* Speech bubble */
        .speech-bubble {
            position: absolute;
            bottom: 75px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            color: #333;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            font-family: Arial, sans-serif;
            z-index: 20;
        }

        .speech-bubble::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid white;
        }

        .stickman:hover .speech-bubble {
            opacity: 1;
        }

        .particle {
            position: fixed;
            pointer-events: none;
            z-index: 9998;
            font-size: 14px;
            animation: particleFloat 0.5s ease-out forwards;
        }

        @keyframes particleFloat {
            0% { opacity: 1; transform: translateY(0) rotate(0deg); }
            100% { opacity: 0; transform: translateY(-50px) rotate(360deg); }
        }

        .impact-ring {
            position: fixed;
            width: 20px;
            height: 20px;
            border: 2px solid #ff6b6b;
            border-radius: 50%;
            pointer-events: none;
            animation: impactExpand 0.5s ease-out forwards;
        }

        @keyframes impactExpand {
            0% { transform: scale(0); opacity: 1; }
            100% { transform: scale(3); opacity: 0; }
        }

        @media (max-width: 768px) {
            .stickman { transform: scale(0.8); width: 50px; height: 80px; right: 15px; }
            .speech-bubble { font-size: 8px; white-space: nowrap; bottom: 65px; }
        }