/* Two-thirds map, scrollable weather content */
html,body{height:auto;min-height:100%;overflow:auto;overscroll-behavior-y:auto;background:#f2f5fb}
.mapStage{position:relative;height:66svh;min-height:340px;max-height:820px;overflow:hidden;background:#e5ebf4;isolation:isolate}
#map,#rainCanvas{position:absolute;inset:0;width:100%;height:100%}
.top{top:max(12px,env(safe-area-inset-top));left:12px;right:12px}
.leftLabel{top:88px;left:14px}
.mapTools{right:14px;bottom:19px}
.bottom{position:relative;inset:auto;max-width:none;width:auto;margin:0;background:#fff;border-radius:24px 24px 0 0;box-shadow:none;border:0;padding:21px 18px 16px;z-index:1}
.grabber{display:none}
.forecast{padding:4px 16px calc(36px + env(safe-area-inset-bottom));max-width:740px;margin:auto}
.forecastTitle{font-size:18px;font-weight:800;letter-spacing:-.5px;margin:16px 4px 13px}
.forecastGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.forecastCard{padding:15px 14px;border-radius:19px;background:#fff;border:1px solid #e9eef7;box-shadow:0 5px 20px #263c5409}
.forecastCard .eyebrow{color:#8695a7;font-size:12px;margin-bottom:8px}.forecastCard .big{font-size:27px;font-weight:800;letter-spacing:-1px}.forecastCard .small{font-size:11px;color:#8493a5;margin-top:6px}
.hourly{background:white;border-radius:20px;padding:16px 14px;margin-top:12px;border:1px solid #e9eef7}
.hourly h3{margin:0 0 13px;font-size:15px}.hourlyBars{height:95px;display:flex;align-items:flex-end;justify-content:space-between;gap:5px;border-bottom:1px solid #e8eef5;padding:0 4px 5px}
.hourlyBar{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#74b4f1,#c2defd);min-height:5px;transition:height .25s}
.hourlyLabels{display:flex;justify-content:space-between;font-size:11px;color:#8997a7;margin-top:10px}
.forecastFoot{font-size:11px;color:#8997a7;margin:15px 6px;line-height:1.6}
@media(min-width:750px){.mapStage{height:66svh}.top{top:22px}.mapTools{bottom:24px}.bottom{max-width:740px;margin:auto;border-radius:22px;margin-top:14px}.forecast{max-width:740px}.leftLabel{top:103px}}

/* Compact radar player */
.bottom{padding:12px 16px 13px}
.status{margin-bottom:5px;align-items:center}
.status strong{font-size:13px}.status small{font-size:10px;margin-top:1px}
.timeBubble{font-size:15px}.status .badge{padding:3px 7px;font-size:10px}
.horizons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:9px 0 10px}
.horizon{border:1px solid #e2e8f3;background:#f4f7fc;color:#728399;border-radius:11px;padding:8px 1px;font-weight:800;font-size:12px;min-width:0}
.horizon.sel{background:#e9edff;border-color:#aab7fc;color:#445bd2}
.actions{margin:4px 0 8px;gap:7px}.circle{width:36px;height:36px;border-radius:12px}.circle.primary{width:42px;height:42px;border-radius:14px}.circle svg{width:20px;height:20px}
.speeds{padding-left:7px;margin-left:5px}.speed{font-size:12px;padding:8px 7px}
.ticks{margin:0 0 2px}.note{margin-top:1px;font-size:10px}
@media(min-width:750px){.bottom{margin-top:14px}}

/* Play button aligned with the timeline */
.playerRow{display:flex;align-items:center;gap:12px;margin-top:5px}
.playerRow .circle.primary{flex:0 0 40px;width:40px;height:40px;border-radius:13px}
.playerRow #slider{flex:1;min-width:0}
.timelineArea{flex:1;min-width:0}
.timelineArea .ticks{margin:0 0 2px}