/* =========================================
   BASE
========================================= */

*{
box-sizing:border-box;
}

html,
body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
background:
radial-gradient(circle at 50% 20%, #101d2d 0%, #07111d 38%, #03070c 100%);
font-family:Georgia, "Times New Roman", serif;
color:#f8ead2;
}

button,
select,
input{
font:inherit;
}


/* =========================================
   TOP BAR
========================================= */

#topBar{
position:fixed;
top:0;
left:0;
right:0;
height:64px;
z-index:8000;

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

padding:0 24px;

background:rgba(4,10,18,.94);
border-bottom:1px solid rgba(120,180,255,.18);

box-shadow:
0 8px 30px rgba(0,0,0,.55),
0 0 35px rgba(70,130,200,.06);

backdrop-filter:blur(14px);
}

#backToTimeline{
color:#d5b36b;
font-size:14px;
font-weight:bold;
text-decoration:none;
transition:color .2s ease;
}

#backToTimeline:hover{
color:#ffd66b;
}

#topBarCenter{
position:absolute;
left:50%;
transform:translateX(-50%);
text-align:center;
pointer-events:none;
}

#topBarTitle{
font-size:23px;
font-weight:700;
letter-spacing:1px;
color:#fff4dc;
text-shadow:0 0 18px rgba(255,190,90,.25);
}

#topBarSubtitle{
margin-top:2px;
font-size:10px;
letter-spacing:2.2px;
text-transform:uppercase;
color:#d5b36b;
}

#topBarRight{
font-size:11px;
letter-spacing:1.5px;
text-transform:uppercase;
color:#78899d;
}


/* =========================================
   LEFT SIDEBAR
========================================= */

#leftSidebar{
position:fixed;
top:84px;
left:20px;
bottom:182px;
width:270px;
z-index:4000;

display:flex;
flex-direction:column;
gap:12px;
}

#yearLabel{
flex:none;

padding:18px 20px;

background:
linear-gradient(180deg, rgba(18,33,50,.98), rgba(6,14,24,.98));

border:1px solid rgba(120,180,255,.25);
border-radius:12px;

box-shadow:
0 10px 30px rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.04);

font-size:27px;
font-weight:700;
color:#fff4dc;
}

#historyPanel{
flex:1;
min-height:0;

display:flex;
flex-direction:column;
gap:10px;

overflow-y:auto;
padding-right:4px;
}

#historyPanel::-webkit-scrollbar{
width:5px;
}

#historyPanel::-webkit-scrollbar-track{
background:transparent;
}

#historyPanel::-webkit-scrollbar-thumb{
background:rgba(213,179,107,.35);
border-radius:10px;
}


/* =========================================
   PANEL SECTIONS
========================================= */

.panelSection{
position:relative;
overflow:hidden;
flex:none;

padding:14px 15px 14px 17px;

background:
linear-gradient(180deg, rgba(14,27,43,.97), rgba(5,13,23,.97));

border:1px solid rgba(120,180,255,.18);
border-radius:11px;

box-shadow:
0 7px 22px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.025);

transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}

.panelSection:before{
content:"";
position:absolute;
top:0;
left:0;
width:3px;
height:100%;

background:linear-gradient(
180deg,
#ffd66b,
#8e44ad,
#00a8ff
);

opacity:.75;
}

.panelSection:hover{
transform:translateX(4px);
border-color:rgba(255,214,107,.38);

box-shadow:
0 10px 28px rgba(0,0,0,.52),
0 0 18px rgba(100,150,255,.1);
}

.panelTitle{
font-size:10px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1.5px;
color:#d5b36b;
margin-bottom:7px;
}

#panelYear{
font-size:26px;
font-weight:bold;
color:#fff4dc;
}

#currentEra{
font-size:18px;
color:#8fd3ff;
}

#timelineProgress,
#visibleEvents{
font-size:17px;
color:#ffffff;
}


/* =========================================
   FEATURED EVENT
========================================= */

.panelFeatured{
flex:1;
min-height:150px;
}

#featuredEvent{
height:100%;
max-height:280px;
overflow:auto;
padding-right:4px;

font-size:13px;
line-height:1.6;
color:#e7e7e7;
}

#featuredEvent::-webkit-scrollbar{
width:5px;
}

#featuredEvent::-webkit-scrollbar-track{
background:transparent;
}

#featuredEvent::-webkit-scrollbar-thumb{
background:rgba(213,179,107,.42);
border-radius:8px;
}

#featuredImage{
border-radius:9px;
overflow:hidden;
box-shadow:0 8px 22px rgba(0,0,0,.45);
}

#featuredImage img{
width:100%;
display:block;
transition:transform .35s ease;
}

#featuredImage:hover img{
transform:scale(1.04);
}

#featuredContent{
transition:opacity .25s ease;
}


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

#mapArea{
position:fixed;
top:82px;
left:310px;
right:18px;
bottom:182px;
z-index:100;
}

#map{
position:absolute;
inset:0;

width:100%;
height:100%;

border:1px solid rgba(120,180,255,.22);
border-radius:14px;

background:#07111d;

box-shadow:
0 18px 50px rgba(0,0,0,.65),
0 0 30px rgba(70,140,220,.08),
inset 0 0 50px rgba(0,0,0,.3);

overflow:hidden;
}

#map:after{
content:"";
position:absolute;
inset:0;
z-index:400;

pointer-events:none;

border-radius:14px;

box-shadow:
inset 0 0 90px rgba(0,0,0,.42),
inset 0 0 30px rgba(30,100,170,.1);
}


/* =========================================
   DARK MAP TREATMENT
========================================= */

.leaflet-tile-pane{
filter:
grayscale(.52)
brightness(.60)
contrast(1.18)
saturate(.72);
}

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


/* =========================================
   LEAFLET CONTROLS
========================================= */

.leaflet-bar{
border:none !important;
box-shadow:0 8px 22px rgba(0,0,0,.5) !important;
}

.leaflet-bar a{
background:#101d2b !important;
color:#f8ead2 !important;
border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.leaflet-bar a:hover{
background:#1b2c40 !important;
color:#ffd66b !important;
}


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

.event-card{
width:140px;
height:98px;

display:flex;
flex-direction:column;

overflow:hidden;

background:
linear-gradient(180deg, #111d2b, #050b12);

color:#fff;

border:1px solid rgba(255,220,150,.75);
border-radius:10px;

font-size:11px;
text-align:center;

box-shadow:
0 6px 16px rgba(0,0,0,.68),
0 0 16px rgba(255,190,80,.22);

transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}

.event-card:hover{
transform:translateY(-5px) scale(1.04);
border-color:#ffd66b;

box-shadow:
0 12px 26px rgba(0,0,0,.78),
0 0 24px rgba(255,214,107,.5);
}

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

.event-title{
height:32px;

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

padding:2px 5px;
}


/* =========================================
   PLAY CONTROLS
========================================= */

#playControls{
position:fixed;
top:86px;
right:30px;
z-index:7000;

display:flex;
align-items:center;
gap:10px;

padding:8px 10px;

background:rgba(5,12,22,.82);
border:1px solid rgba(120,180,255,.2);
border-radius:16px;

box-shadow:
0 8px 28px rgba(0,0,0,.5),
0 0 20px rgba(100,150,255,.07);

backdrop-filter:blur(12px);
}

#playBtn{
position:relative;

width:48px;
height:48px;

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

padding:0;

font-size:21px;
font-weight:bold;

background:
radial-gradient(circle at 35% 30%, #a85bd0, #6e2c91 55%, #35134b);

color:#fff;

border:1px solid rgba(255,255,255,.32);
border-radius:50%;

cursor:pointer;

box-shadow:
0 0 18px rgba(190,90,255,.5),
0 6px 16px rgba(0,0,0,.5);

transition:
transform .18s ease,
box-shadow .18s ease;
}

#playBtn:hover{
transform:scale(1.07);

box-shadow:
0 0 25px rgba(210,110,255,.7),
0 8px 20px rgba(0,0,0,.55);
}

#speedControl{
display:flex;
flex-direction:column;
gap:3px;
}

#speedControl label{
font-size:9px;
letter-spacing:1.2px;
text-transform:uppercase;
color:#8fa1b5;
}

#playSpeed{
height:30px;
padding:0 9px;

background:#132131;
color:#fff;

border:1px solid rgba(120,180,255,.3);
border-radius:7px;

font-size:12px;
cursor:pointer;
outline:none;
}

#playSpeed:hover{
border-color:rgba(255,214,107,.5);
}

#playSpeed:focus{
border-color:#ffd66b;
box-shadow:0 0 12px rgba(255,214,107,.22);
}


/* =========================================
   FLOATING PLAY YEAR
========================================= */

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

padding:9px 38px;

background:
linear-gradient(
90deg,
rgba(50,20,70,.95),
rgba(110,40,150,.95)
);

border:1px solid rgba(255,255,255,.22);
border-radius:18px;

font-size:32px;
color:#fff4dc;
text-align:center;

opacity:0;

pointer-events:none;

box-shadow:
0 0 28px rgba(180,80,255,.4);

transition:opacity .2s ease;
}


/* =========================================
   TIMELINE AREA
========================================= */

#timelineArea{
position:fixed;
left:310px;
right:18px;
bottom:18px;
height:146px;
z-index:5000;

padding:14px 24px 18px;

background:
linear-gradient(
180deg,
rgba(10,21,35,.9),
rgba(4,10,18,.94)
);

border:1px solid rgba(120,180,255,.18);
border-radius:16px;

box-shadow:
0 14px 40px rgba(0,0,0,.55),
0 0 30px rgba(100,150,255,.07);

backdrop-filter:blur(12px);
}

#timelineHeading{
display:flex;
justify-content:space-between;
align-items:center;

font-size:10px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1.5px;

color:#d5b36b;
}

#timelineHint{
font-weight:normal;
letter-spacing:.8px;
color:#66788d;
}

#yearSlider{
position:absolute;
left:30px;
right:30px;
top:76px;

height:12px;

z-index:5000;

--timeline-era-color:#8e44ad;
}


/* =========================================
   NO UI SLIDER CORE
========================================= */

.noUi-target{
height:12px;

border:none;
border-radius:8px;

background:linear-gradient(
90deg,
#5a3b21 0%,
#b56a2d 12%,
#d7d2c8 30%,
#5f6675 50%,
#8e44ad 70%,
#6f7c8a 82%,
#00a8ff 100%
);

box-shadow:
0 0 18px rgba(0,0,0,.9),
0 0 30px rgba(80,150,255,.16),
inset 0 0 8px rgba(0,0,0,.9);
}

.noUi-connect{
background:var(--timeline-era-color);

box-shadow:
0 0 14px var(--timeline-era-color);
}


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

.noUi-handle{
width:24px !important;
height:24px !important;

top:-6px !important;
right:-12px !important;

border-radius:50% !important;

background:#fff !important;

border:
3px solid var(--timeline-era-color) !important;

box-shadow:
0 0 8px #fff,
0 0 18px var(--timeline-era-color) !important;

cursor:pointer;
}

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


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

.timeline-overlay{
position:absolute;
left:0;
right:0;
top:-26px;
height:28px;

pointer-events:none;
}

.timeline-era-bands{
position:absolute;
left:0;
right:0;
top:0;

height:10px;

opacity:.8;
}

.timeline-era-band{
position:absolute;
top:0;

height:10px;

border:none;

opacity:.55;

cursor:pointer;
pointer-events:auto;

transition:
opacity .25s ease,
transform .2s ease;
}

.timeline-era-band:hover{
opacity:1;
transform:scaleY(1.5);
}


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

.timeline-era-labels{
position:absolute;
left:0;
right:0;
top:-28px;

height:22px;

pointer-events:none;
}

.timeline-era-label{
position:absolute;

transform:translateX(-50%);

padding:4px 8px;

background:rgba(5,12,22,.9);
color:#f8ead2;

border:1px solid rgba(255,255,255,.16);
border-radius:7px;

font-size:11px;

pointer-events:auto;
cursor:pointer;

box-shadow:0 4px 12px rgba(0,0,0,.35);
}


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

.timeline-event-dots{
position:absolute;
left:0;
right:0;
top:-5px;

height:18px;

pointer-events:none;
}

.timeline-event-dot{
position:absolute;

transform:translateX(-50%);

border-radius:50%;

background:#fff;

border:
2px solid var(--timeline-era-color);

opacity:.9;

cursor:pointer;
pointer-events:auto;

box-shadow:
0 0 6px #fff,
0 0 14px var(--timeline-era-color);

transition:transform .15s ease;
}

.timeline-event-dot:hover{
transform:
translateX(-50%)
scale(1.8);
}


/* =========================================
   TIMELINE HOVER PREVIEW
========================================= */

.timeline-hover-preview{
position:absolute;
top:-42px;

transform:translateX(-50%);

opacity:0;

pointer-events:none;

transition:opacity .2s ease;
}

.timeline-hover-year{
padding:4px 8px;

background:rgba(0,0,0,.92);
color:#fff;

border:1px solid rgba(255,255,255,.1);
border-radius:6px;

font-size:11px;
white-space:nowrap;
}

.timeline-hover-line{
position:absolute;
top:-16px;
bottom:-16px;

width:1px;

background:#fff;

opacity:0;

pointer-events:none;
}


/* =========================================
   TIMELINE PIPS
========================================= */

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

.noUi-marker{
background:rgba(255,255,255,.35);
}

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


/* =========================================
   EVENT MODAL
========================================= */

#modalOverlay{
display:none;

position:fixed;
inset:0;

z-index:9999;

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

padding:30px;

background:rgba(0,0,0,.68);

backdrop-filter:blur(9px);
}

#eventModal{
position:relative;

width:min(720px, 92vw);
max-height:82vh;

overflow:auto;

padding:28px;

background:
linear-gradient(180deg, #111d2b, #050b12);

color:#f8ead2;

border:1px solid rgba(255,214,107,.3);
border-radius:15px;

box-shadow:
0 25px 80px rgba(0,0,0,.82),
0 0 35px rgba(255,214,107,.1);
}

#eventModal::-webkit-scrollbar{
width:6px;
}

#eventModal::-webkit-scrollbar-track{
background:transparent;
}

#eventModal::-webkit-scrollbar-thumb{
background:rgba(213,179,107,.45);
border-radius:8px;
}

#modalCloseBtn{
position:absolute;
top:12px;
right:12px;

width:34px;
height:34px;

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

padding:0;

background:#132131;
color:#fff;

border:1px solid rgba(255,214,107,.28);
border-radius:8px;

font-size:24px;
line-height:1;

cursor:pointer;

transition:
color .18s ease,
border-color .18s ease,
background .18s ease;
}

#modalCloseBtn:hover{
background:#1c2e42;
border-color:#ffd66b;
color:#ffd66b;
}

#modalText{
padding-right:18px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1100px){

#leftSidebar{
width:230px;
}

#mapArea,
#timelineArea{
left:270px;
}

#playYear{
left:calc(50% + 115px);
}

#topBarRight{
display:none;
}

}


@media(max-width:760px){

#topBarCenter{
display:none;
}

#leftSidebar{
display:none;
}

#mapArea{
left:12px;
right:12px;
top:76px;
bottom:172px;
}

#timelineArea{
left:12px;
right:12px;
bottom:12px;
height:145px;
}

#playControls{
top:82px;
right:18px;
}

#playYear{
left:50%;
bottom:178px;
}

#timelineHint{
display:none;
}

}