#replay-compact-wind { display:none; }
body.replay-view #replay-map-controls.compact {
  width:min(960px, calc(100% - 16px)); max-width:none; height:136px;
  bottom:calc(8px + env(safe-area-inset-bottom)); padding:4px 8px;
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:42px 66px 20px;
  gap:0 10px; background:rgba(255,255,255,.48); backdrop-filter:none;
  pointer-events:none; box-shadow:0 1px 10px #0002; overflow:visible;
}
body.replay-view #replay-map-controls.compact .replay-primary-controls {
  grid-column:1; grid-row:1; gap:5px; align-items:center;
}
body.replay-view #replay-map-controls.compact #replay-speed {
  display:block; width:65px; height:40px; min-height:40px; margin:0; padding:3px;
}
body.replay-view #replay-map-controls.compact :is(button, select, input) { pointer-events:auto; }
body.replay-view #replay-map-controls.compact #replay-time-label {
  display:flex; grid-column:2; grid-row:1; align-items:center; justify-content:flex-end;
  gap:8px; margin:0; min-width:0; color:#102a43; text-shadow:0 0 3px white,0 0 5px white;
}
body.replay-view #replay-map-controls.compact .replay-time-context { display:none; }
body.replay-view #replay-map-controls.compact :is(.replay-time-primary, .replay-time-wall-clock) { font-size:13px; margin:0; }
body.replay-view #replay-map-controls.compact #replay-slider {
  display:block; grid-column:1/-1; grid-row:3; width:100%; height:20px; margin:0; padding:0;
}
body.replay-view #replay-map-controls.compact #replay-compact-wind {
  display:block; grid-column:1/-1; grid-row:2; min-width:0; pointer-events:none;
}
#replay-compact-wind-value { height:19px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; font-weight:700; color:#102a43; text-shadow:0 0 3px white,0 0 5px white; }
#replay-compact-wind svg { display:block; width:100%; height:47px; overflow:visible; pointer-events:none; }
@media(max-width:650px) {
  body.replay-view #replay-map-controls.compact { height:146px; grid-template-rows:42px 66px 30px; gap:0 5px; }
  body.replay-view #replay-map-controls.compact #replay-time-label { flex-direction:column; align-items:flex-end; justify-content:center; gap:1px; }
  body.replay-view #replay-map-controls.compact :is(.replay-time-primary, .replay-time-wall-clock) { font-size:11px; }
  body.replay-view #replay-map-controls.compact #replay-slider { height:30px; }
  body.replay-view #replay-map-controls.compact .replay-primary-controls > button { padding:0 7px; }
}

/* Keep current values visible on narrow screens; only the source name truncates. */
#replay-compact-wind-value { display:flex; }
#replay-compact-wind-value .compact-wind-source { min-width:0; overflow:hidden; text-overflow:ellipsis; }
#replay-compact-wind-value .compact-wind-values { flex:none; }
#replay-compact-wind-value .compact-wind-gust { color:#a65000; }