.game-container {
    margin-top: 20px;
    }
    .gameArea {
    width: 87%;
    max-width: 550px;
    height: auto;
    aspect-ratio: 1/1;
    margin: auto;
    background: url('../assets/grassbg.jpeg');
    background-size: cover;
    border-radius: 10px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    padding: 20px;
    }

    .hole {
        position: relative;
        width: 100%;
        height: 50%;
        border-radius: 50%;
        overflow: hidden;
        background: radial-gradient(circle at center,
        #2b1d16 0%,
        #3e2723 40%,
        #5d4037 65%,
        #2e1f1a 100%);
        box-shadow:
        inset 0 10px 20px rgba(0,0,0,0.8),
        inset 0 -5px 10px rgba(255,255,255,0.05),
        0 8px 15px rgba(0,0,0,0.5); 

    }

    .hole::before {
    content: "";
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    background: radial-gradient(circle,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.3) 100%);
    z-index: 1;
    }

    .hole::after {
        content: "";
        position: absolute;
        bottom: 5%;
        left: 10%;
        width: 80%;
        height: 50%;
        border-radius: 50%;
        background: radial-gradient(ellipse,
        rgba(255,255,255,0.15),
        transparent);
        pointer-events: none;
    }


    .rabbit {
        width: 45px;
        height: 45px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -120%;
        transition: bottom 0.25s ease;
        z-index: 2; 
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .rabbit.show {
        bottom: 5%;
    }


    .blast {
        position: absolute;
        width: 80px;
        height: 80px;
        background: radial-gradient(circle, #ffeb3b, #ff9800, transparent);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        pointer-events: none;
    }

    /* 💥 Active blast */
    .blast.active {
        animation: blastAnim 0.3s ease-out;
    }

    @keyframes blastAnim {
        0% {
            transform: translate(-50%, -50%) scale(0.3);
            opacity: 1;
        }
        70% {
            transform: translate(-50%, -50%) scale(1.5);
            opacity: 0.8;
        }
        100% {
            transform: translate(-50%, -50%) scale(2);
            opacity: 0;
        }
    }