body{
    margin:0;
    font-family:"Segoe UI",sans-serif;
    background:#EEF3FF;
    color:#1b2833;
}

main{
    text-align:center;
    padding-bottom:80px;
}

#map-container{
    position:relative;
    display:block;
    background:white;
    padding:25px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.4);
    margin:30px auto;
    max-width:1200px;
    width:90%;
}
#map{
    width:100%;
    height:700px;
    border-radius:15px;
    margin:20px auto;
}

/* Interactive map points */
.point{
    width:20px;
    height:20px;
    border-radius:50%;
    position:absolute;
    cursor:pointer;
    box-shadow:0 0 12px rgba(0,0,0,0.3);
    transition:all 0.3s ease;
    background:#FFDFAA;
    border:3px solid rgba(255,255,255,0.8);
}
.point:hover{
    transform:scale(1.3);
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}
.point.clicked{
    transform:scale(1.2);
    box-shadow:0 0 16px rgba(0,0,0,0.4);
}
.point.culture{
    background:#FFDFAA;
}
.point.sight{
    background:#7BD8C7;
}
.point.fun{
    background:#BFA6FF;
}

.culture{background:#FFDFAA;color:#1b2833}
.sight{background:#7BD8C7;color:#1b2833}
.fun{background:#BFA6FF;color:#1b2833}

#legend{
    display:flex;
    justify-content:center;
    gap:20px;
    margin:15px;
}
#legend span{
    width:14px;height:14px;
    border-radius:50%;
    display:inline-block;
    margin-right:6px;
}

button{
    background:#000000;
    border:none;
    padding:12px 18px;
    border-radius:20px;
    font-weight:700;
    cursor:pointer;
    margin:8px;
    color:#ffffff;
}
button:hover{opacity:.85}

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:10;
}
.hidden{display:none}

.modal{
    background:#ffffff;
    color:#1b2833;
    width:380px;
    padding:18px;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(27,40,51,0.08);
}
.modal img{
    width:100%;
    border-radius:8px;
    margin:10px 0;
}

/* Wider modal for embedded content (quiz) */
.modal--wide{
    width:820px;
    max-width:95%;
}
.modal iframe{
    width:100%;
    height:540px;
    border-radius:12px;
    border:0;
    margin:10px 0;
}

/* Default HTML5 video player */
.video-player{
    width:100%;
    height:auto;
    max-height:540px;
    border-radius:8px;
    margin:10px 0;
    display:block;
}

/* FOOTER */
footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:#F1F6FF;
    color:#1b2833;
    text-align:center;
    padding:12px;
    font-size:14px;
    border-top:1px solid rgba(27,40,51,0.04);
}

    /* NAVBAR */
.navbar{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 30px;
    background:rgba(255,255,255,0.95);
    box-shadow:0 6px 24px rgba(27,40,51,0.06);
    backdrop-filter: blur(4px);
}

.nav-left{
    font-size:22px;
    font-weight:600;
}

.nav-right button{
    background:#000000;
    border:none;
    padding:8px 14px;
    border-radius:12px;
    font-weight:600;
    margin-left:10px;
    cursor:pointer;
    color:#ffffff;
}

.nav-right button:hover{
    opacity:.98;
}