/* Extra styling voor het menu */

/* Responsive design */
@media (max-width: 768px) {
    #menu-screen {
        padding-bottom: 200px; /* Minder padding op mobiel */
        gap: 10px;
    }
    
    #main-title {
        font-size: 2em;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
    }
    
    .subtitle {
        font-size: 1.1em;
        margin: 3px 0;
    }
    
    .char-buttons-container {
        gap: 10px;
        margin: 8px 0;
        max-width: 350px;
    }
    
    button, .char-button {
        width: 90%;
        font-size: 0.9em;
        padding: 8px 10px;
        min-height: 36px;
    }
    
    .leaderboard-button {
        width: 90%;
        padding: 8px 15px;
        font-size: 0.9em;
        margin-top: 8px;
    }
    
    #top-player-display {
        padding: 6px 10px;
        margin-bottom: 8px;
        font-size: 0.85em;
        max-width: 300px;
    }
    
    .main-fish {
        font-size: 1.8em;
    }
    
    .floating-fish {
        font-size: 0.9em;
        opacity: 0.15;
    }
}

@media (max-width: 480px) {
    #main-title {
        font-size: 1.6em;
    }
    
    .char-buttons-container {
        gap: 10px;
        max-width: 300px;
    }
    
    button, .char-button {
        width: 90%;
        font-size: 0.8em;
        padding: 8px 10px;
        min-height: 36px;
    }
    
    .leaderboard-button {
        width: 90%;
    }
    
    .subtitle {
        font-size: 1em;
    }
}

@media (max-height: 600px) {
    #main-title {
        font-size: 1.8em;
        margin-bottom: 3px;
    }
    
    .subtitle {
        font-size: 1em;
        margin: 2px 0;
    }
    
    .main-fish {
        font-size: 1.3em;
    }
    
    .char-buttons-container {
        margin: 8px 0;
        gap: 8px;
    }
    
    button, .char-button {
        width: 90%;
        padding: 6px 8px;
        min-height: 32px;
        font-size: 0.75em;
    }
    
    .leaderboard-button {
        width: 90%;
        padding: 6px 12px;
        margin-top: 8px;
    }
    
    #top-player-display {
        padding: 6px 10px;
        margin-bottom: 8px;
        font-size: 0.8em;
    }
    
    .floating-fish {
        display: none;
    }
}

/* Game screen responsive styling */
@media (max-width: 768px) {
    #hud {
        padding: 12px 15px;
        font-size: 1.1em;
    }
    
    #hud span {
        padding: 6px 10px;
        font-size: 0.9em;
    }
    
    #controls-info {
        font-size: 0.9em;
        padding: 8px 15px;
        bottom: 20px;
    }
    
    canvas {
        border-bottom: 20px solid #8B4513;
    }
}

@media (max-width: 480px) {
    #hud {
        padding: 10px 12px;
        font-size: 1em;
    }
    
    #hud span {
        padding: 4px 8px;
        font-size: 0.8em;
        gap: 4px;
    }
    
    #controls-info {
        font-size: 0.8em;
        padding: 6px 12px;
        bottom: 15px;
    }
    
    canvas {
        border-bottom: 15px solid #8B4513;
    }
}

@media (max-height: 600px) {
    #hud {
        padding: 8px 15px;
        font-size: 0.9em;
    }
    
    #hud span {
        padding: 4px 8px;
        font-size: 0.8em;
    }
    
    #controls-info {
        font-size: 0.75em;
        padding: 5px 10px;
        bottom: 10px;
    }
}

/* Extra hover effecten */
#menu-screen:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Animatie voor menu laden */
@keyframes menuLoad {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

#menu-screen:not(.hidden) {
    animation: menuLoad 0.6s ease-out;
}

/* Glow effect voor de hoofdtitel */
#main-title:hover {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}

/* Pulse effect voor leaderboard knop */
.leaderboard-button {
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    50% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.2), 0 0 20px rgba(255, 215, 0, 0.3);
    }
}

/* Extra effect voor karakter knoppen */
.char-button:nth-child(odd) {
    animation-delay: 0.1s;
}

.char-button:nth-child(even) {
    animation-delay: 0.2s;
}

/* Verbeterde focus states */
.char-button:focus,
.leaderboard-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Loading shimmer effect */
.loading-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}