/* * Stijlbestand voor de game.
 * Doel: Achtergrondafbeelding toepassen op de volledige BODY en de CANVAS centreren
 * voor optimale weergave op mobiele apparaten.
 */

/* --- Basis Reset --- */
Html, body, ul, li {
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box; /* Zorgt ervoor dat padding en border in de breedte/hoogte zitten */
}

/* --- Canvas Styling (Het speelveld) --- */
canvas {
    display: block;
    
    /* Maakt de canvas responsief: Max 762px, maar vult 95% van de mobiele breedte */
    max-width: 762px; 
    width: 95vw; 
    height: auto; /* De werkelijke hoogte moet in de JS worden ingesteld om de verhouding te behouden */
    
    /* Horizontale centrering is niet meer nodig door de BODY Flexbox */
    margin: 0 auto; 
    
    border: 3px solid #333; /* Een kleine rand om het speelveld te laten zien */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Lichte schaduw */
    
    /* Achtergrond uit Canvas verwijderd en verplaatst naar de BODY */
    background-image: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000000; /* Zorgt dat het canvas zelf zwart is */
}

/* --- Overige Styling --- */
p {
    text-align: center;
}

body {
    /* --- CENTRERING (Flexbox) --- */
    min-height: 100vh; /* Zorgt dat de body de volledige vensterhoogte inneemt */
    display: flex; /* Activeert Flexbox */
    flex-direction: column; /* Stapelt elementen (canvas, info) verticaal */
    justify-content: center; /* Centreert de inhoud verticaal */
    align-items: center; /* Centreert de inhoud horizontaal */
    
    overflow-x: hidden; /* Voorkom horizontale scrollbalken */
    
    /* --- ACHTERGRONDAFBEELDING INSTELLINGEN: TOEGEVOEGD AAN BODY --- */
    background-image: url('../1000009748.png'); /* Pad naar de Super Mario World achtergrond */
    background-size: cover; /* Vult de hele pagina */
    background-repeat: no-repeat;
    background-position: center top; /* Positioneert de achtergrond in het midden bovenaan */
    background-attachment: fixed; /* Houdt de achtergrond vast */

    /* De kleine achtergrondkleur voor de hele pagina (als fallback) */
    background-color: #222;
}

html {
    height: 100%;
    overflow-x: hidden;
}

.info {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white; /* Zorgt dat de tekst zichtbaar is */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
    z-index: 10; /* Zorgt ervoor dat de info boven de canvas staat */
}

.info a {
    color: #aaffaa; /* Groene links */
}

/* --- NIEUWE STIJLEN VOOR TOUCH CONTROLS --- */

/* --- Touch Controls Container --- */
.touch-controls {
    /* Plaatsing onderaan het scherm */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    display: flex; /* Gebruik Flexbox voor de linker/rechter uitlijning */
    justify-content: space-between; /* Links en rechts uitlijnen van de knoppen */
    padding: 10px;
    z-index: 20; /* Zorg dat ze bovenaan alles staan */
    
    /* Standaard niet zichtbaar op grote schermen */
    display: none; 
}

/* Toon touch-controls alleen op kleinere schermen (mobiel) */
@media (max-width: 768px) {
    .touch-controls {
        display: flex; 
    }
    
    /* Zorg dat de standaard toetsenbordinstructie verdwijnt op mobiel */
    .controls {
        display: none;
    }
}

/* --- Knoppen Styling --- */
.touch-btn {
    /* Algemene knopstijl */
    width: 70px;
    height: 70px;
    border-radius: 50%; /* Ronde knop */
    font-size: 20px;
    font-weight: bold;
    color: white;
    margin: 5px;
    border: 3px solid rgba(255, 255, 255, 0.7);
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    
    /* Vulling / Transparantie */
    background-color: rgba(0, 0, 0, 0.5); /* Donkere, half-transparante achtergrond */
    
    /* Visuele feedback bij aanraken */
    transition: background-color 0.1s;
    
    /* Reset voor mobiele apparaten */
    -webkit-tap-highlight-color: transparent; 
}

.touch-btn:active {
    background-color: rgba(255, 255, 255, 0.2); /* Lichter bij aanraking */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Aanpassingen voor de verschillende groepen */
.dpad {
    display: flex;
    gap: 10px; /* Ruimte tussen de linker en rechter knop */
}

.action-btns {
    display: flex;
    align-items: center; /* Verticale centrering van de actieknoppen */
}

.action-btns .run {
    width: 60px; /* Iets kleinere 'Run' knop */
    height: 60px;
    font-size: 16px;
    background-color: rgba(200, 50, 50, 0.7); /* Rode kleur voor Run */
}

.action-btns .jump {
    background-color: rgba(50, 50, 200, 0.7); /* Blauwe kleur voor Jump */
}

/* Style voor de mobiele hint */
.mobile-hint {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 14px;
}

/* Zorg dat de hint alleen op mobiel zichtbaar is */
@media (min-width: 769px) {
    .mobile-hint {
        display: none;
    }
}