html, body {
    overflow: hidden; /* Blijft belangrijk: voorkomt scrollen */
}
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    box-sizing: border-box;
    margin: 0;
}

/* H1 is weg, maar we laten 'm staan voor het geval je 'm terug wilt */
h1 {
    margin: 5px;
}

#spel-container {
    display: flex; 
    gap: 15px; /* --- AANGEPAST: Was 20px --- */
    border: 5px solid #333;
    background-color: #111; 
    padding: 10px;
    border-radius: 8px;
}

#tetris-canvas {
    background-color: #000;
    border: 2px solid #555;
}

/* --- HIER ZITTEN DE GROTE AANPASSINGEN --- */
#zijbalk {
    display: flex;
    flex-direction: column;
    gap: 10px; /* --- AANGEPAST: Was 20px, dit scheelt veel ruimte --- */
    color: white; 
    width: 120px; 
    text-align: center;
}

/* --- NIEUWE STIJLEN OM ALLES COMPACTER TE MAKEN --- */
#zijbalk h2 {
    font-size: 1.1rem;  /* Iets kleinere titels */
    margin-top: 5px;    /* Minder ruimte bovenaan */
    margin-bottom: 5px; /* Minder ruimte onderaan */
    color: #aaa;       /* Maak ze iets subtieler */
}

#zijbalk p {
    font-size: 1.1rem; /* Iets grotere cijfers */
    margin: 0;         /* Geen marges */
    font-weight: bold;
    color: #fff;       /* Maak ze helder wit */
}
/* --- EINDE NIEUWE STIJLEN --- */


#next-canvas {
    background-color: #222;
    border: 2px solid #555;
    border-radius: 4px;
    margin-top: -5px; /* Trek het iets dichter naar de 'Next' titel */
}

#start-knop {
    padding: 10px;
    font-size: 1rem;
    font-weight: bold;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: auto; /* --- NIEUW: Duw de knop naar de bodem --- */
}

#start-knop:hover {
    background-color: #0056b3;
}