/* The launch replay player (js/launches-play.js) and its cycle companion (js/launches-cycle.js):
   shared by /launches and /cycle. */
.player { position: relative; }
#play-canvas { width: 100%; display: block; cursor: crosshair; }
#cycle-canvas { width: 100%; display: block; margin-top: 10px; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 4px 4px; font-size: 13px; color: #8b97ad; }
.bar button { background: #0e1220; border: 1px solid #26314a; color: #e6ebf5; border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; }
.bar button.on, .bar button:hover { border-color: #ffb347; color: #ffb347; }
.bar button.primary { border-color: #ffb347; color: #0b0e17; background: #ffb347; font-weight: 600; }
.bar button.primary:hover { background: #ffc77a; color: #0b0e17; }
#scrub { flex: 1; min-width: 160px; accent-color: #ffb347; }
#pip { position: absolute; right: 22px; top: 46px; width: min(300px, 45%); background: #0e1220; border: 1px solid #26314a; border-radius: 10px; padding: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.55); z-index: 3; }
#pip img { width: 100%; display: block; border-radius: 6px; background: #000; aspect-ratio: 1; transition: opacity .3s; }
#pip-cap { font-size: 12.5px; line-height: 1.5; color: #e6ebf5; margin-top: 6px; }
#pip-cap .muted { color: #8b97ad; }
#pip-note { font-size: 12px; color: #8b97ad; margin-top: 4px; }
#pip-close { position: absolute; top: 4px; right: 8px; background: none; border: none; color: #8b97ad; font-size: 16px; cursor: pointer; }
@media (max-width: 640px) { #pip { position: static; width: 100%; margin-top: 10px; } }