Pogingen
0
Gevonden
0/6
Tijd
00:00
Nielz spellenTorka2025-06-02T12:08:15+02:00
body {
font-family: 'Baloo 2', cursive;
background-color: #fff8f7;
background-image: radial-gradient(#e2795c 0.5px, transparent 0.5px), radial-gradient(#e2795c 0.5px, #fff8f7 0.5px);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
touch-action: manipulation;
}
.card {
perspective: 1000px;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.card-front {
background: linear-gradient(135deg, #b85247, #e2795c);
font-size: 2rem;
}
.card-back {
background-color: white;
transform: rotateY(180deg);
font-size: 3rem;
}
.confetti {
position: fixed;
width: 10px;
height: 10px;
background-color: #f00;
animation: fall linear forwards;
z-index: 1000;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
.btn-primary {
background: linear-gradient(135deg, #b85247, #e2795c);
transition: all 0.3s;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(184, 82, 71, 0.4);
}
.btn-primary:active {
transform: translateY(0);
}
.emoji {
font-size: 2.5rem;
line-height: 1;
}
/* Animaties */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce {
animation: bounce 2s infinite;
}
.pulse {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Modals moeten altijd zichtbaar zijn */
.game-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,0.5);
z-index: 9999;
}
.modal-content {
background-color: white;
border-radius: 1rem;
padding: 1.5rem;
max-width: 90%;
width: 24rem;
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
transform: scale(0.95);
animation: modal-pop 0.3s forwards;
}
@keyframes modal-pop {
to { transform: scale(1); }
}
/* Responsieve aanpassingen voor mobiel */
@media (max-width: 640px) {
.card {
width: 70px;
height: 70px;
}
.emoji {
font-size: 2rem;
}
}
/* Zorg dat knoppen duidelijk klikbaar zijn */
.modal-button {
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.modal-button:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.2);
opacity: 0;
transition: opacity 0.2s;
}
.modal-button:hover:after {
opacity: 1;
}
.modal-button:active {
transform: scale(0.95);
}