body {
    font-family: Arial, sans-serif;
    margin: 0; padding: 0;
    background: linear-gradient(to bottom, #cce7ff, #f0f8ff);
    text-align: center;
}

/* Startscherm */
#startScreen {
    position: fixed; top:0; left:0; width:100%; height:100%;
    display:flex; flex-direction: column;
    justify-content:center; align-items:center;
    background-color:#0077cc; color:white;
}
#startScreen h1 { font-size:3em; }
#startButton {
    font-size:2em; padding:20px 40px; margin-top:20px;
    background-color:#00cc77; border:none; border-radius:10px;
    cursor:pointer;
}
#startButton:hover { background-color:#00aa55; }

/* Quiz scherm */
#quizScreen { display:none; padding:10px; }
#scoreLabel { font-size:1.5em; margin-bottom:10px; }

/* Kaart container */
#mapContainer { position:relative; display:inline-block; }
#europeMap { width:80vw; max-width:1000px; }
#countryButtons button {
    position:absolute;
    background:rgba(255,255,255,0.8);
    border-radius:5px; border:none;
    padding:5px 10px; cursor:pointer; font-size:0.8em;
}
#countryButtons button:hover { background:rgba(0,200,0,0.8); }

/* Quiz overlay */
#quizOverlay {
    display:none; position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.85); color:white;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
}
#quizOverlay img { width:150px; margin-bottom:20px; }
.optionBtn {
    margin:5px; padding:10px 20px;
    font-size:1em; border-radius:5px; border:none; cursor:pointer;
}
.optionBtn:hover { background-color: #00cc77; color:white; }