@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');    
[hidden]{display:none!important}    
#spel-container {
    width: 100%;
    max-width: 940px;
    margin: 0;
}

#speelveld-wrapper {
    width: 100%;
    overflow: hidden;
}

/* Het eigenlijke speelveld */
#inhoud {
    position: relative;

    width: 940px;
    height: 610px;

    margin: 0 auto;

    transform-origin: top left;
}


/* Afbeelding 1 */
#div1 {
    position: absolute;

    left: 10px;
    top: 5px;

    width: 920px;
    height: 300px;

    z-index: 1;

    box-sizing: content-box;
}


/* Afbeelding 2 */
#div2 {
    position: absolute;

    left: 10px;
    top: 305px;

    width: 920px;
    height: 300px;

    z-index: 1;

    box-sizing: content-box;
}


#div1 img,
#div2 img {
    display: block;

    width: 920px;
    height: 300px;

    max-width: none;
}
/* =========================================================
   SUCCESVENSTER
========================================================= */

.success-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.65);
}

.success-message {
    width: 100%;
    max-width: 450px;

    padding: 35px 25px;

    text-align: center;

    background: #fff;
    border-radius: 20px;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.35);

    animation: successPop 0.35s ease-out;
}

.success-icon {
    font-size: 55px;
    margin-bottom: 10px;
}

.success-message h2 {
    margin-bottom: 10px;
}

.success-message p {
    margin-bottom: 25px;
    font-size: 17px;
}

@keyframes successPop {

    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

#inhoud {
    position: relative;
    width: 940px;
    height: 620px;
    margin-top: 0;
    margin-bottom: 0;
}

.spot{
    position:absolute;

    opacity:0;

    border:4px solid #ffe600;
    border-radius:50%;

    background:rgba(255,230,0,0.18);

    box-shadow:
        0 0 8px #ffe600,
        0 0 18px #ffe600,
        0 0 28px rgba(255,230,0,0.7);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

    animation:pulse 1.4s infinite;

    cursor:pointer;

    box-sizing:border-box;
}

/* Hover effect */

.spot:hover{

    transform:scale(1.08);

}

/* Animatie */

@keyframes pulse{

    0%{
        box-shadow:
            0 0 8px #ffe600,
            0 0 18px #ffe600;
    }

    50%{
        box-shadow:
            0 0 14px #ffe600,
            0 0 30px #ffe600;
    }

    100%{
        box-shadow:
            0 0 8px #ffe600,
            0 0 18px #ffe600;
    }
}
    
#spel-layout {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

#spel-knoppen {
    position: relative;
    width: 40px;
    height: 280px;
    flex: 0 0 40px;
}

/* Alle vinkjes boven elkaar plaatsen */
/* Lege vinkjes */
#spel-knoppen img {
    position: absolute !important;
    left: 0 !important;
    width: 40px;
    height: 40px;
    z-index: 1;
}

/* Gevonden vinkjes: bovenop, maar aanvankelijk onzichtbaar */
#spel-knoppen #vinkje1,
#spel-knoppen #vinkje2,
#spel-knoppen #vinkje3,
#spel-knoppen #vinkje4,
#spel-knoppen #vinkje5,
#spel-knoppen #vinkje6,
#spel-knoppen #vinkje7 {
    z-index: 2;
    opacity: 0;
}
#vinkje1 { top: 0 !important; }
#vinkje2 { top: 40px !important; }
#vinkje3 { top: 80px !important; }
#vinkje4 { top: 120px !important; }
#vinkje5 { top: 160px !important; }
#vinkje6 { top: 200px !important; }
#vinkje7 { top: 240px !important; }
/* Lege vinkjes */
#spel-knoppen img:nth-child(1) {
    top: 0 !important;
}

#spel-knoppen img:nth-child(2) {
    top: 40px !important;
}

#spel-knoppen img:nth-child(3) {
    top: 80px !important;
}

#spel-knoppen img:nth-child(4) {
    top: 120px !important;
}

#spel-knoppen img:nth-child(5) {
    top: 160px !important;
}

#spel-knoppen img:nth-child(6) {
    top: 200px !important;
}

#spel-knoppen img:nth-child(7) {
    top: 240px !important;
}


/* Gevonden vinkjes exact op dezelfde plaatsen */
#vinkje1 {
    top: 0 !important;
    left: 0 !important;
}

#vinkje2 {
    top: 40px !important;
    left: 0 !important;
}

#vinkje3 {
    top: 80px !important;
    left: 0 !important;
}

#vinkje4 {
    top: 120px !important;
    left: 0 !important;
}

#vinkje5 {
    top: 160px !important;
    left: 0 !important;
}

#vinkje6 {
    top: 200px !important;
    left: 0 !important;
}

#vinkje7 {
    top: 240px !important;
    left: 0 !important;
}
@media (max-width: 990px) {

    #spel-layout {
        gap: 8px;
    }

    #spel-knoppen {
        width: 40px;
        flex-basis: 40px;
    }

}   
    
    #spel-knoppen img {
    z-index: 1;
}

#spel-knoppen #vinkje1,
#spel-knoppen #vinkje2,
#spel-knoppen #vinkje3,
#spel-knoppen #vinkje4,
#spel-knoppen #vinkje5,
#spel-knoppen #vinkje6,
#spel-knoppen #vinkje7 {
    z-index: 2;
}