/* One real power/timing meter, detached from shot settings. Its substantial
   vertical track reserves the same footprint before and throughout a throw. */
.course-overlay-play .shot-power-rail{position:absolute;z-index:5;right:calc(var(--play-inset) + 366px);bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:10px;width:104px;margin:0;padding:0;pointer-events:none;color:#fff4c7;user-select:none;font-family:system-ui}
.shot-power-heading{font-size:10px;line-height:1.2;font-weight:750;letter-spacing:.1em;text-shadow:0 1px 4px #102c24,0 0 5px #102c24}
.shot-power-rail #plannerMeter{position:relative;flex:none;width:48px;height:clamp(260px,54dvh,580px);min-height:0;margin:0 0 0 14px;border:2px solid #dce8ad;border-radius:20px;background:linear-gradient(to top,#628853,#acbf6b 60%,#d8df81);box-shadow:0 0 0 4px #102f29ad,0 8px 22px #071b1640;overflow:visible}
.shot-power-rail #plannerMeter[data-stage='power']{background:linear-gradient(to top,#628853,#acbf6b 60%,#d8df81)}
.shot-power-rail #plannerMeter[data-stage='timing']{background:linear-gradient(to top,#53694e,#90b16b 50%,#c9ce7a)}
.shot-power-rail #plannerMeter .planner-perfect-zone{position:absolute;left:-6px;right:-6px;top:auto;width:auto;bottom:43.5%;height:13%;border:1px solid #fff1b6;border-radius:7px;background:#fff0b85c;box-sizing:border-box}
.shot-power-rail #plannerMeter[data-stage='power'] .planner-perfect-zone{bottom:var(--power-zone,50%);height:var(--power-zone-size,0%);min-height:2px;transform:translateY(50%)}
.shot-power-rail #plannerMeter[data-stage='timing'] .planner-perfect-zone{bottom:calc(var(--release-zone) - var(--release-zone-size)/2);height:var(--release-zone-size);min-height:0;transform:none}
.shot-power-rail #plannerNeedle{position:absolute;left:-12px;right:-12px;top:auto;bottom:var(--meter-position,50%);width:auto;height:8px;transform:translateY(50%);border:1px solid #fffef3;border-radius:4px;background:#fff5c2;box-shadow:0 0 0 2px #102f29,0 2px 7px #0009;z-index:2}
.shot-power-rail #plannerMeter[data-stage='power']::before,.shot-power-rail #plannerMeter[data-stage='power']::after{position:absolute;left:auto;right:calc(100% + 12px);color:#fff4c7;font:750 11px/1 system-ui;text-shadow:0 1px 4px #102c24,0 0 5px #102c24;transform:translateY(50%)}
.shot-power-rail #plannerMeter[data-stage='power']::before{content:'0%';bottom:0}
.shot-power-rail #plannerMeter[data-stage='power']::after{content:'110%';bottom:100%}
.shot-power-rail #plannerTimingValue{display:grid;place-items:center;box-sizing:border-box;width:104px;max-width:104px;height:54px;min-height:54px;margin:0;padding:4px;border:1px solid #dce8ad55;border-radius:9px;background:#102f29ed;color:#fff5ce;font:700 13px/1.35 system-ui;text-align:center;white-space:normal;font-variant-numeric:tabular-nums;text-shadow:none}
/* With timing detached, shot settings use their full width, not an empty
   column where the old miniature rail used to be. */
.course-overlay-play .shot-planner{grid-template-columns:minmax(0,1fr)}
.course-overlay-play .shot-planner>:not(.planner-timing){grid-column:1}
.course-overlay-play .shot-power-rail[hidden]{display:none}
/* Phone rail sits beside the collapsed form icon and opposite the numeric
   readout. Veiling it while the form menu is open keeps its layout reservation. */
.mobile-course .shot-power-rail{right:auto;left:max(72px,calc(env(safe-area-inset-left,0px) + 64px));bottom:calc(var(--mobile-bottom) + 18px + env(safe-area-inset-bottom,0px));width:88px;gap:6px}
.mobile-course .shot-power-heading{display:none}
.mobile-course .shot-power-rail #plannerMeter{width:46px;height:clamp(100px,calc(100dvh - var(--mobile-top) - var(--mobile-bottom) - 146px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)),450px);margin-left:18px}
.mobile-course .shot-power-rail #plannerTimingValue{width:88px;max-width:88px;height:38px;min-height:38px;font-size:11px}
.mobile-course .shot-power-rail #plannerMeter[data-stage='power']::before,.mobile-course .shot-power-rail #plannerMeter[data-stage='power']::after{right:calc(100% + 6px)}
.mobile-course:has(.shot-form-tray[data-open='true']) .shot-power-rail{visibility:hidden}
@media(max-height:560px) and (orientation:landscape){
 .course-overlay-play:not(.mobile-course) .shot-power-rail{right:calc(var(--play-inset) + 322px);bottom:12px}
 .course-overlay-play:not(.mobile-course) .shot-power-rail #plannerMeter{height:calc(100dvh - 150px);min-height:100px}
 .mobile-course .shot-power-rail{bottom:calc(58px + env(safe-area-inset-bottom,0px))}
 .mobile-course .shot-power-rail #plannerMeter{height:clamp(58px,calc(100dvh - 220px),300px)}
}
@media(max-height:360px) and (orientation:landscape){
 .mobile-course .shot-power-rail{bottom:54px}
 .mobile-course .shot-power-rail #plannerMeter{width:42px}
 .mobile-course .shot-power-rail #plannerTimingValue{height:32px;min-height:32px;padding:2px;font-size:10px}
}