/* Header */

    .game-area {
        position: relative;
        width: 100%;
        height: 75vh;
        overflow: hidden;
        @media (max-width: 600px) {
            height: 80vh;
        }
    }

    /* Balloon */
    .balloon {
        position: absolute;
        width: 60px;
        height: 80px;
        background: red;
        border-radius: 50% 50% 45% 45%;
        cursor: pointer;
        animation: floatUp linear forwards;
    }

    .balloon::after {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 50%;
        width: 2px;
        height: 20px;
        background: #fff;
        transform: translateX(-50%);
    }

    /* Colors */
    .red { background: #ff4d4d; }
    .blue { background: #4da6ff; }
    .green { background: #4dff88; }
    .yellow { background: #ffd11a; }
    .black { background: #333; } /* bomb */

    /* Float Animation */
    @keyframes floatUp {
        from { transform: translateY(100vh); }
        to { transform: translateY(-120px); }
    }

    /* Pop Animation */
    .pop {
        animation: popAnim 0.3s ease-out forwards;
    }

    @keyframes popAnim {
        0% { transform: scale(1); opacity: 1; }
        100% { transform: scale(1.8); opacity: 0; }
    }

    /* Start Screen */
    .game_result{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .explosion {
        position: absolute;
        width: 60px;
        height: 60px;
        pointer-events: none;
        border-radius: 50%;
        background: radial-gradient(circle, #fff 10%, orange 40%, red 70%, transparent 80%);
        animation: explode 0.4s ease-out forwards;
    }

    @keyframes explode {
        0% {
            transform: scale(0.5);
            opacity: 1;
        }
        100% {
            transform: scale(2);
            opacity: 0;
        }
    }