.map-card{
display:flex;
flex-direction:column;

background:#fff;
border-radius:24px;
overflow:hidden;

border:1px solid var(--line);
box-shadow:var(--shadow);
}

.map-wrap{
position:relative;
flex:1;
min-height:calc(100vh - 195px);
}

#map{position:absolute;inset:0;width:100%;height:100%;}

.controls{position:absolute;right:22px;bottom:22px;display:flex;flex-direction:column;gap:12px;z-index:5;align-items:flex-end}

#followBtn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}

#followBtn svg{
width:18px;
height:18px;
flex-shrink:0;
}

.playback-overlay{
position:absolute;
top:16px;
left:50%;
transform:translateX(-50%);
z-index:10;
background:rgba(17,24,39,0.88);
color:#fff;
border:1px solid rgba(255,255,255,0.12);
border-radius:18px;
padding:10px 16px 12px;
min-width:280px;
text-align:center;
box-shadow:0 12px 28px rgba(0,0,0,0.22);
backdrop-filter:blur(10px);
pointer-events:none;
}

.overlay-label{
font-size:11px;
font-weight:800;
letter-spacing:.14em;
color:#f9a8d4;
margin-bottom:4px;
}

.overlay-time{
font-size:16px;
font-weight:800;
line-height:1.3;
}

.overlay-meta{
margin-top:4px;
font-size:12px;
color:#cbd5e1;
}

.overlay-progress{
margin-top:10px;
width:100%;
height:6px;
background:rgba(255,255,255,0.15);
border-radius:999px;
overflow:hidden;
}

.overlay-progress-fill{
width:0%;
height:100%;
background:linear-gradient(90deg,#f43f5e,#8b5cf6);
border-radius:999px;
transition:width 0.25s ease;
}