* { box-sizing: border-box; }
body {
    margin: 0; min-height: 100vh; 
    background: linear-gradient(135deg, #fceade 0%, #e3f2fd 100%);
    font-family: 'Comic Sans MS', 'Bubblegum Sans', Arial, sans-serif; 
    display: flex;
    justify-content: center; align-items: center; flex-direction: column; padding: 20px;
}
.game {
    width: min(780px, 94vw); text-align: center; background: #ffffff;
    padding: 32px; border-radius: 28px; box-shadow: 0 12px 40px rgba(0,0,0,.15);
    position: relative; overflow: hidden; border: 4px solid #fff;
}

/* Zwart home symbool met 50% transparantie links/rechtsboven */
.hidden-return-btn {
    position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
    background: transparent; cursor: pointer; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; opacity: 0.5; transition: opacity 0.2s, transform 0.2s;
}
.hidden-return-btn:hover { opacity: 1; transform: scale(1.1); }

#fireworks-canvas { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    pointer-events: none; z-index: 20; display: none; 
}
h1 { margin: 0 0 6px; font-size: 38px; color: #ff6b6b; text-shadow: 1px 1px 2px rgba(0,0,0,0.05); }
p { font-size: 20px; margin: 0 0 18px; color: #555; }

.stats-counter-container { display: flex; justify-content: center; gap: 15px; margin-bottom: 22px; }
.score-display { font-size: 24px; font-weight: bold; color: #e67e22; background: #fef9e7; padding: 10px 24px; border-radius: 30px; border: 3px solid #f1c40f; box-shadow: 0 4px 10px rgba(241,196,15,0.2); }
.clicks-display { font-size: 24px; font-weight: bold; color: #475569; background: #f1f5f9; padding: 10px 24px; border-radius: 30px; border: 3px dashed #cbd5e1; }

.game-board-container {
    position: relative;
    max-width: 680px;
    margin: 0 auto 22px;
    padding: 10px;
    border-radius: 20px;
}

.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; z-index: 2; }
.tile {
    aspect-ratio: 1 / 1; border: 4px solid #ff9a9e; border-radius: 18px; 
    background-size: cover; background-position: center; background-blend-mode: overlay;
    background-color: rgba(255, 255, 255, 0.75);
    cursor: pointer; font-size: 42px; font-weight: bold; color: #222; 
    display: flex; align-items: center; justify-content: center; 
    transition: transform .15s ease, box-shadow .2s;
    position: relative; box-shadow: 0 6px 15px rgba(255, 154, 158, 0.3);
}
.tile:hover { transform: scale(1.08) rotate(2deg); box-shadow: 0 8px 20px rgba(255, 154, 158, 0.5); }
.tile.revealed { cursor: default; box-shadow: none; transform: none; background-blend-mode: normal; }
.tile.type-1 { background: #d4edda !important; border-color: #28a745; color: #155724; animation: pulseSuccess 0.5s; }
.tile.type-2 { background: #d6eaf8 !important; border-color: #2980b9; color: #1b4f72; animation: pulseSuccess 0.5s; }
.tile.wrong { background: #f8d7da !important; border-color: #dc3545; color: #721c24; animation: shakeError 0.4s; }

@keyframes pulseSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* Opvallendere en langere ster-animatie */
.pop-star {
    position: absolute; font-size: 75px; z-index: 25; pointer-events: none;
    animation: flyUpLong 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    filter: drop-shadow(0 0 12px #ffd700);
}
@keyframes flyUpLong {
    0% { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); top: 50%; left: 50%; opacity: 1; }
    50% { transform: translate(-50%, -150%) scale(1.5) rotate(15deg); opacity: 1; }
    100% { transform: translate(-50%, -300%) scale(1.2) rotate(-15deg); top: 0%; opacity: 0; }
}

/* Sterrenparade op de voorgrond */
.star-parade {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    z-index: 25;
    animation: paradeBounce 0.8s infinite alternate;
    pointer-events: none;
    text-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
@keyframes paradeBounce {
    from { transform: translate(-50%, -50%) scale(1); }
    to { transform: translate(-50%, -60%) scale(1.1); }
}

/* LEERKRACHTEN PANEL */
.teacher-panel { width: min(860px, 94vw); background: #2c3e50; color: white; padding: 25px; border-radius: 18px; margin-bottom: 20px; text-align: left; box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.teacher-panel h3 { margin: 0 0 15px 0; font-size: 20px; color: #ecf0f1; border-bottom: 2px solid #34495e; padding-bottom: 8px; }
.control-row { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.control-row label { font-size: 15px; font-weight: bold; }
.teacher-panel input[type="text"] { padding: 8px; font-size: 16px; border-radius: 8px; border: none; width: 65px; text-align: center; font-weight: bold; }
.teacher-panel button.start-btn { background: #27ae60; color: white; border: none; padding: 10px 20px; font-size: 16px; font-weight: bold; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 0 #1e7b43; transition: background 0.2s; }
.teacher-panel button.start-btn:hover { background: #2ecc71; }
#sound-toggle { border: 0; border-radius: 8px; padding: 8px 14px; font: bold 14px Arial, sans-serif; background: #e8f1ff; color: #173a63; cursor: pointer; }
#sound-toggle.on { background: #d7f5dc; color: #1d6b2b; }
.volume-setting, .delay-setting { font-size: 15px; color: #ecf0f1; display: flex; align-items: center; gap: 8px; }
.volume-setting input, .delay-setting input { cursor: pointer; width: 90px; }

.logbook-section { background: #34495e; padding: 15px; border-radius: 12px; margin-top: 15px; }
.logbook-section h4 { margin: 0 0 10px 0; color: #ebdcf7; font-size: 16px; }
#log-table { width: 100%; border-collapse: collapse; background: #ffffff; color: #333; border-radius: 8px; overflow: hidden; font-size: 14px; }
#log-table th, #log-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }
#log-table th { background: #cbd5e1; font-weight: bold; color: #1e293b; }
#log-table tr:nth-child(even) { background: #f8fafc; }
.clear-log-btn { background: #e74c3c; color: white; border: none; padding: 6px 12px; font-size: 13px; font-weight: bold; border-radius: 6px; cursor: pointer; }
.clear-log-btn:hover { background: #c0392b; }

#message { min-height: 42px; font-size: 26px; font-weight: bold; margin-bottom: 15px; color: #333; }
#reset { border: 0; border-radius: 14px; padding: 12px 28px; font: bold 18px 'Comic Sans MS', Arial, sans-serif; background: #ff7675; color: white; cursor: pointer; box-shadow: 0 5px 0 #d63031; transition: transform 0.1s; }
#reset:hover { background: #fab1a0; }
#reset:active { transform: translateY(3px); box-shadow: 0 2px 0 #d63031; }

@media (max-width: 500px) {
    .game { padding: 18px; } h1 { font-size: 26px; } .grid { gap: 8px; } .tile { font-size: 34px; border-width: 3px; }
}