/* ==== GLOBAL ==== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'Segoe UI',sans-serif;background:linear-gradient(135deg,#1e3c72,#2a5298);color:#f0f4f8}
a{color:#00d4ff;text-decoration:none}

/* ==== HEADER ==== */
header{background:rgba(0,0,0,.4);backdrop-filter:blur(10px);position:fixed;top:0;width:100%;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.3)}
nav{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;height:70px}
.logo{font-size:1.8rem;font-weight:700;color:#00d4ff}
.logo span{color:#ff6b6b}
.nav-links{display:flex;gap:2rem}
.nav-links a{position:relative;color:#f0f4f8;font-weight:500;transition:color .3s}
.nav-links a:hover{color:#00d4ff}
.nav-links a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:#00d4ff;transition:width .3s}
.nav-links a:hover::after{width:100%}

/* ==== HERO ==== */
.hero{padding:140px 2rem 80px;text-align:center;max-width:1200px;margin:auto}
.hero h1{font-size:3rem;background:linear-gradient(90deg,#00d4ff,#ff6b6b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:1.2rem;max-width:700px;margin:1rem auto 2rem;opacity:.9}
.cta-button{display:inline-block;background:linear-gradient(45deg,#00d4ff,#0099cc);color:#fff;padding:.9rem 2rem;border-radius:50px;font-weight:600;transition:all .3s;box-shadow:0 4px 15px rgba(0,212,255,.3)}
.cta-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,212,255,.4)}

/* ==== CONTAINER ==== */
.container{max-width:1200px;margin:auto;padding:2rem}

/* ==== MODE SECTIONS ==== */
.mode-section{margin:3rem 0;text-align:center}
.mode-section h2{font-size:2.2rem;margin-bottom:1.5rem;color:#ff6b6b}
.sub-modes{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
.sub-modes button{background:#00d4ff;color:#fff;padding:.8rem 1.5rem;border:none;border-radius:30px;font-weight:600;cursor:pointer;transition:.3s}
.sub-modes button:hover{background:#0099cc;transform:scale(1.05)}
.sub-modes button.active{background:#ff6b6b}

/* ==== MAPS ==== */
#nl-map-container, #eu-map-container{height:500px;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.3);margin:1rem 0}
#nl-info-panel, #eu-info-panel{background:rgba(0,0,0,.5);padding:1rem;border-radius:0 0 15px 15px;text-align:center;font-size:1.1rem}

/* ==== QUIZ ==== */
.quiz-section{background:rgba(0,0,0,.2);padding:3rem 1rem;border-radius:20px;margin:3rem 0}
.quiz-section h2{text-align:center;color:#ff6b6b;margin-bottom:2rem}
#question{font-size:1.4rem;text-align:center;margin-bottom:1.5rem}
.answers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}
.answer-btn{background:rgba(255,255,255,.15);border:2px solid transparent;padding:1rem;border-radius:12px;cursor:pointer;transition:.3s;text-align:center}
.answer-btn:hover{background:rgba(255,255,255,.25)}
.answer-btn.correct{border-color:#00ff00;background:rgba(0,255,0,.2)}
.answer-btn.wrong{border-color:#ff0000;background:rgba(255,0,0,.2)}
#next-btn, #back-btn{background:#00d4ff;color:#fff;padding:.8rem 2rem;border:none;border-radius:30px;font-weight:600;cursor:pointer;margin:1rem auto;display:block}
#result{font-size:1.2rem;text-align:center;margin-top:1rem;color:#ff6b6b}

/* ==== FOOTER ==== */
footer{background:rgba(0,0,0,.5);padding:3rem 0 1rem;margin-top:4rem}
.footer-content{max-width:1200px;margin:auto;padding:0 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}
.footer-section h3{color:#00d4ff;margin-bottom:1rem}
.footer-section ul{list-style:none}
.footer-section a{color:#b0c4de;transition:.3s}
.footer-section a:hover{color:#00d4ff}
.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem;color:#b0c4de}

/* ==== RESPONSIVE ==== */
@media(max-width:768px){
    .hero h1{font-size:2.3rem}
    .nav-links{display:none}
    #nl-map-container, #eu-map-container{height:400px}
    .sub-modes{flex-direction:column;align-items:center}
}