/* =========================
       SPELVAK
    ========================= */
.nav-button {
  display: inline-flex;
}

    #spel{
        position: relative;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 10px;
    }

    #tiles{
        position: relative;
        width: 100%;
        max-width: 770px;
        margin: 0 auto;

        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 4px;
    }

    .game-buttons{
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 15px;
    }


    /* =========================
       KAARTEN
    ========================= */

    .card{
        width: 100%;
        aspect-ratio: 1 / 1;

        cursor: pointer;

        will-change: transform, opacity;

        transition:
            transform 0.25s ease,
            opacity 0.4s ease,
            filter 0.3s ease;
    }

    .card:hover{
        transform: scale(1.08);
    }

    .card{
        position: relative;
    }

    .selected{
        background-color: #3b96e5;
        border: double 3px #000;
        margin: 2px;

        transform: scale(1.12) rotate(2deg);

        box-shadow:
            0 0 10px #4db8ff,
            0 0 20px #4db8ff;

        z-index: 10;
    }

    .unselected{
        margin: 2px;
    }

    /* =========================
       JUIST - VERDWIJN ANIMATIE
    ========================= */

    .matched{
        animation: verdwijn 0.8s forwards;
    }

    @keyframes verdwijn{

        0%{
            transform: scale(1);
            opacity: 1;
        }

        40%{
            transform: scale(1.35) rotate(10deg);
            opacity: 1;
            filter: brightness(1.4);
        }

        100%{
            transform: scale(0);
            opacity: 0;
            filter: blur(4px);
        }
    }


    /* =========================
       FOUTE KEUZE
    ========================= */

    .fout{
        animation: shake 0.4s;
    }

    @keyframes shake{

        0%{
            transform: translateX(0);
        }

        20%{
            transform: translateX(-8px);
        }

        40%{
            transform: translateX(8px);
        }

        60%{
            transform: translateX(-6px);
        }

        80%{
            transform: translateX(6px);
        }

        100%{
            transform: translateX(0);
        }
    }


    /* =========================
       WIN ANIMATIE
    ========================= */

    .win{
        animation: winAnimation 1s ease;
    }

    @keyframes winAnimation{

        0%{
            transform: scale(1);
        }

        25%{
            transform: scale(1.03);
        }

        50%{
            transform: scale(0.98);
        }

        75%{
            transform: scale(1.02);
        }

        100%{
            transform: scale(1);
        }
    }


    /* =========================
       STERRETJES EFFECT
    ========================= */

    .ster{
        position: absolute;
        font-size: 30px;
        pointer-events: none;

        animation: sterAnim 1s forwards;
    }

    @keyframes sterAnim{

        0%{
            opacity: 1;
            transform: scale(0.5) translateY(0);
        }

        100%{
            opacity: 0;
            transform: scale(1.8) translateY(-60px);
        }
    }


    /* =========================
       POPUP EINDE
    ========================= */

    #popupEinde{
        display: none;
    }

    .close{
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus{
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }


    /* =========================
       RESPONSIVE
    ========================= */

    @media (max-width: 768px){

        #spel{
            margin-left: 0;
            padding: 5px;
        }

        #tiles{
            grid-template-columns: repeat(6, 1fr);
        }

        .nav-button{
            font-size: 14px;
            padding: 8px 12px;
            height: auto;
        }

        .right{
            width: 100%;
            margin-top: 20px;
        }
    }

    @media (max-width: 480px){

        #tiles{
            grid-template-columns: repeat(5, 1fr);
        }
    }