/* ===============================
   MAP
================================ */

#map{
height:calc(100vh - 80px);
width:100%;
}

/* ===============================
   TIMELINE CORE
================================ */

#yearSlider{
position:fixed;
bottom:14px;
left:50%;
transform:translateX(-50%);
width:92%;
z-index:5000;
opacity:.9;
transition:transform .2s ease;
--timeline-era-color:#888;
}

#yearSlider:hover{
transform:translateX(-50%) scaleY(1.35);
}

/* slider body */

.noUi-target{
height:12px;
border:none;
border-radius:6px;
background:linear-gradient(
90deg,
#5a3b21 0%,
#b56a2d 12%,
#d7d2c8 30%,
#5f6675 50%,
#8e44ad 70%,
#6f7c8a 82%,
#00a8ff 100%
);
box-shadow:
0 0 12px rgba(0,0,0,.7),
inset 0 0 6px rgba(0,0,0,.8);
}

/* progress */

.noUi-connect{
background:var(--timeline-era-color);
box-shadow:0 0 8px var(--timeline-era-color);
}

/* ===============================
   HANDLE
================================ */

.noUi-handle{
width:18px;
height:18px;
top:-4px;
border-radius:50%;
background:#fff;
border:none;
box-shadow:
0 0 6px rgba(0,0,0,.9),
0 0 10px var(--timeline-era-color);
cursor:pointer;
}

.noUi-handle:before,
.noUi-handle:after{
display:none;
}

/* ===============================
   ERA BANDS
================================ */

.timeline-overlay{
position:absolute;
left:0;
right:0;
top:-18px;
height:20px;
pointer-events:none;
}

.timeline-era-bands{
position:absolute;
left:0;
right:0;
top:0;
height:8px;
opacity:.6;
}

.timeline-era-band{
position:absolute;
top:0;
height:8px;
border:none;
opacity:.35;
cursor:pointer;
pointer-events:auto;
transition:opacity .25s ease, transform .2s ease;
}

.timeline-era-band:hover{
opacity:.9;
transform:scaleY(1.6);
}

/* ===============================
   ERA LABELS
================================ */

.timeline-era-labels{
position:absolute;
left:0;
right:0;
top:-22px;
height:20px;
pointer-events:none;
}

.timeline-era-label{
position:absolute;
transform:translateX(-50%);
font-size:11px;
color:#ddd;
background:rgba(0,0,0,.55);
border:none;
padding:2px 6px;
border-radius:4px;
pointer-events:auto;
cursor:pointer;
transition:opacity .25s ease, transform .15s ease;
}

.timeline-era-label:hover{
transform:translateX(-50%) scale(1.15);
color:#fff;
background:rgba(0,0,0,.9);
}

/* ===============================
   EVENT DOTS
================================ */

.timeline-event-dots{
position:absolute;
left:0;
right:0;
top:-4px;
height:16px;
pointer-events:none;
}

.timeline-event-dot{
position:absolute;
transform:translateX(-50%);
border-radius:50%;
background:#fff;
border:none;
opacity:.8;
cursor:pointer;
pointer-events:auto;
box-shadow:
0 0 4px #fff,
0 0 8px rgba(255,255,255,.6);
transition:transform .15s ease, box-shadow .2s ease;
}

.timeline-event-dot:hover{
transform:translateX(-50%) scale(1.8);
box-shadow:
0 0 8px #fff,
0 0 16px #fff;
}

/* ===============================
   HOVER YEAR PREVIEW
================================ */

.timeline-hover-preview{
position:absolute;
top:-32px;
transform:translateX(-50%);
opacity:0;
transition:opacity .2s ease;
pointer-events:none;
}

.timeline-hover-year{
font-size:11px;
color:#fff;
background:rgba(0,0,0,.85);
padding:2px 6px;
border-radius:4px;
white-space:nowrap;
}

/* ===============================
   HOVER LINE
================================ */

.timeline-hover-line{
position:absolute;
top:-10px;
bottom:-10px;
width:1px;
background:#fff;
opacity:0;
pointer-events:none;
}

/* ===============================
   YEAR MARKS
================================ */

.noUi-pips{
color:#bbb;
font-size:10px;
}

.noUi-marker{
background:#888;
}

.noUi-value{
color:#bbb;
font-size:10px;
}

/* ===============================
   EVENT CARDS
================================ */

.event-card{
width:130px;
height:90px;
background:#111;
color:#fff;
border-radius:6px;
overflow:hidden;
box-shadow:0 3px 8px rgba(0,0,0,.5);
border:2px solid #fff;
font-size:11px;
text-align:center;
display:flex;
flex-direction:column;
}

.event-card img{
width:100%;
height:60px;
object-fit:cover;
display:block;
}

.event-title{
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:2px 4px;
}

.leaflet-control-attribution{
display:none !important;
}

/* ===============================
   PLAY BUTTON (RECTANGLE, CLEAN)
================================ */

#playBtn{
position:fixed;
bottom:14px;
left:50%;
transform:translateX(-50%);
z-index:6000;

padding:6px 14px;
height:32px;

display:flex;
align-items:center;
justify-content:center;

font-size:13px;
font-weight:600;

background:rgba(0,0,0,0.7);
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;

box-shadow:0 4px 10px rgba(0,0,0,.4);
backdrop-filter:blur(4px);
}

#playBtn:hover{
background:rgba(0,0,0,0.9);
}

/* ===============================
   PLAY YEAR (TOP CENTER, CLEAN)
================================ */

#playYear{
position:fixed;
bottom:54px;
left:50%;
transform:translateX(-50%);
z-index:6000;

font-size:12px;
font-weight:600;

color:#fff;
background:rgba(0,0,0,0.75);
padding:4px 8px;
border-radius:6px;

opacity:0;
transition:opacity .2s ease;
pointer-events:none;
}

/* ===============================
   PLAY YEAR (ABOVE BUTTON)
================================ */

#playYear{
position:fixed;
bottom:56px;
left:50%;
transform:translateX(-50%);
z-index:6000;

font-size:12px;
color:#fff;
background:rgba(0,0,0,0.8);
padding:4px 8px;
border-radius:6px;

opacity:0;
transition:opacity .2s ease;
pointer-events:none;
}