/* Grid system per le bolle */
.cerchi {
    margin: 0 auto;
    display: grid;
    grid-template-areas:
        ". . . bubble0 bubble0 bubble0 bubble0 . . . . . . . . ."
        ". . . bubble0 bubble0 bubble0 bubble0 bubble1 bubble1 bubble1 bubble1 bubble1 bubble8 bubble8 bubble8 ."
        ". . . bubble0 bubble0 bubble0 bubble0 bubble1 bubble1 bubble1 bubble1 bubble1 bubble8 bubble8 bubble8 ."
        ". . . bubble0 bubble0 bubble0 bubble0 bubble1 bubble1 bubble1 bubble1 bubble1 bubble8 bubble8 bubble8 ."
        "bubble4 bubble4 bubble4 . . . . bubble1 bubble1 bubble1 bubble1 bubble1 . . . ."
        "bubble4 bubble4 bubble4 . . . . bubble1 bubble1 bubble1 bubble1 bubble1 . . . ."
        "bubble4 bubble4 bubble4 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble7 bubble7 bubble7 bubble7 bubble7 bubble7"
        ". . . bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble7 bubble7 bubble7 bubble7 bubble7 bubble7"
        ". . . bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble7 bubble7 bubble7 bubble7 bubble7 bubble7"
        "bubble9 bubble9 bubble9 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble7 bubble7 bubble7 bubble7 bubble7 bubble7"
        "bubble9 bubble9 bubble9 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble7 bubble7 bubble7 bubble7 bubble7 bubble7"
        "bubble9 bubble9 bubble9 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble7 bubble7 bubble7 bubble7 bubble7 bubble7"
        ". . . bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble6 bubble5 bubble5 bubble5 bubble5 bubble5 ."
        ". bubble3 bubble3 bubble3 bubble3 bubble3 bubble3 . . . bubble5 bubble5 bubble5 bubble5 bubble5 ."
        ". bubble3 bubble3 bubble3 bubble3 bubble3 bubble3 . . . bubble5 bubble5 bubble5 bubble5 bubble5 ."
        ". bubble3 bubble3 bubble3 bubble3 bubble3 bubble3 . . . bubble5 bubble5 bubble5 bubble5 bubble5 ."
        ". bubble3 bubble3 bubble3 bubble3 bubble3 bubble3 bubble2 bubble2 bubble2 bubble5 bubble5 bubble5 bubble5 bubble5 ."
        ". bubble3 bubble3 bubble3 bubble3 bubble3 bubble3 bubble2 bubble2 bubble2 . . . . . ."
        ". bubble3 bubble3 bubble3 bubble3 bubble3 bubble3 bubble2 bubble2 bubble2 . . . . . ."
        ". . . . . . . . . . . . . . . .";
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(20, 1fr);
    max-width: 45vh;
    width: 100%;
    max-height: 60vh;
    aspect-ratio: 16 / 20;
    font-weight: bold;
    gap: 1px;
}


.bubble {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    position: relative;
    text-decoration: none;
    transform: scale(0);
    animation: bubbleIn 0.5s ease-out forwards;
    font-weight: bold;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    /* Garantisce cerchi perfetti */
    width: 95%;
    height: 95%;
    margin: auto;
    /* Centra nella sua area */
}


#bubble0 {
    grid-area: bubble0;
}

#bubble1 {
    grid-area: bubble1;
}

#bubble2 {
    grid-area: bubble2;
}

#bubble3 {
    grid-area: bubble3;
}

#bubble4 {
    grid-area: bubble4;
}

#bubble5 {
    grid-area: bubble5;
}

#bubble6 {
    grid-area: bubble6;
}

#bubble7 {
    grid-area: bubble7;
}

/* Bolle aggiuntive disabilitate */
#bubble8,
#bubble9 {
    grid-area: bubble8;
    opacity: 0.5;
    pointer-events: none;
}

#bubble9 {
    grid-area: bubble9;
}

@media (max-width: 576px) {

    .cerchi {
        max-width: 40dvh !important;
    }

    .custom-heading {
        font-size: 1.2rem !important;
    }

    .custom-subheading {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 320px) {
    .cerchi {
        max-width: 34dvh !important;
    }

    .custom-heading {
        font-size: 1.0rem !important;
    }

    .custom-subheading {
        font-size: 0.8rem !important;
    }
}

@media(min-aspect-ratio: 1/1) {
    .cerchi {
        margin: 0 auto;
        display: grid;
        grid-template-areas:
            "bubble7 bubble7 bubble3 bubble3 bubble3 bubble8 bubble8 . . bubble2 bubble2"
            "bubble7 bubble7 bubble3 bubble3 bubble3 bubble8 bubble8 bubble1 bubble1 bubble2 bubble2"
            ". . bubble3 bubble3 bubble3 . . bubble1 bubble1 bubble0 bubble0"
            ". bubble5 bubble5 bubble6 bubble6 bubble6 bubble4 bubble4 . bubble0 bubble0"
            ". bubble5 bubble5 bubble6 bubble6 bubble6 bubble4 bubble4 bubble9 bubble9 ."
            ". . . bubble6 bubble6 bubble6 . . bubble9 bubble9 .";
        grid-template-columns: repeat(11, 1fr);
        grid-template-rows: repeat(6, 1fr);
        max-width: 70vw;
        width: 100%;
        aspect-ratio: 11 / 6;
        font-weight: bold;
        gap: 1px;
    }
}