.matches .kaart {
    pointer-events: none;
    transition: none;
    transform: none !important;
    cursor: default;
}
.matches .kaart .front, .matches .kaart .back {
    transition: none;
    transform: none !important;
}
* { 
    margin: 0;
    padding: 0;
    user-select: none;
    box-sizing: border-box;
}

body {
    background-image: url('achtergrond.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.kaarten {
    display: grid;
    grid-template-columns: repeat(5, 140px);
    grid-template-rows: repeat(4, 140px);
    gap: 15px; /* gelijke afstand tussen kaarten */
    perspective: 1000px; /* nodig voor 3D effect */
}

.kaart {
    width: 140px;
    height: 140px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    cursor: pointer;
}

.kaart.flip {
    transform: rotateY(180deg);
}

.kaart .front, 
.kaart .back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    backface-visibility: hidden;
}

.kaart .back {
    background-color: black;
}

.kaart .front {
    background-size: auto 95%;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotateY(180deg);
    background-color: rgb(52, 52, 95);
}

/* Zet de spelers en het speelveld naast elkaar */
.spelers {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.speler1{
    margin-right: 40px;
    color: blue;
}

.speler2{
    margin-left: 40px;
    color: red;
}

.speler1.active, .speler2.active {
    font-size: 20px;
}

/* Matches-gebied styling: kaarten overlappen en zijn kleiner */
.matches {
    display: grid;
    grid-template-columns: repeat(4, 70px);
    grid-template-rows: repeat(4, 70px);
    gap: 0px;
    align-items: center;
    min-height: 140px;
    margin-top: 10px;
    position: relative;
    height: 360px;
    max-width: 290px;
    overflow: hidden;
    border-radius: 8px;
    padding: 4px 0 4px 8px;
}
.matches .kaart {
    width: 70px;
    height: 70px;
    margin: 0;
    position: relative;
    z-index: 1;
    border: 2px solid #3e48fc;
    border-radius: 12px;
    transition: transform 0.2s;
}
.matches .kaart:hover {
    transform: none;
    z-index: 1;
}


.reset{
    background-color: red;
    color: black;
    border-radius: 12px;
    font-size: 1rem;
    padding: 18px 40px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    border: none;
    position: fixed;
    left: 8%;
    bottom: 32px;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}
.reset:active {
    transform: scale(90%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


/* Coinflip en winnaar styling */
#coin-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 1200px;
    cursor: pointer;
    z-index: 1000;
}
#coin {
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    transform-style: preserve-3d;
    transition: transform 2s cubic-bezier(.17,.67,.83,.67);
    box-shadow: 0 0 50px rgba(0,0,0,0.4);
}
#coin .front, #coin .back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}
#coin .front {
    background: radial-gradient(circle at 30% 30%, #ff5252, #b71c1c);
}
#coin .back {
    background: radial-gradient(circle at 30% 30%, #2196f3, #0d47a1);
    transform: rotateY(180deg);
}
.coin-winner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    box-shadow: 0 0 40px var(--winner-color, #fff8);
    animation: winner-glow 1.2s ease-out;
}
.coin-winner.red {
    background: radial-gradient(circle at 30% 30%, #ff5252, #b71c1c);
}
.coin-winner.blue {
    background: radial-gradient(circle at 30% 30%, #2196f3, #0d47a1);
}


@keyframes winner-glow {
    0% { transform: scale(1); box-shadow:0 0 0 var(--winner-color, #fff0); }
    50% { transform: scale(1.15); box-shadow:0 0 60px var(--winner-color, #fff); }
 100% { transform: scale(1); box-shadow:0 0 0 var(--winner-color, #fff0); }
}
/* Actieve speler vetgedrukt */