/* front-6-journey: the middle of the journey. Owner: P3 (journey middle).
   roll's beat's card (#roll) with its line (#ro-roll), the mangler beat's card
   (#mangler) with its move row (#ro-moves) and line (#ro-mangler), and any rule
   the floor's ribbon or the recording's let-go needs. Loaded after journey.css, so a rule here may refine one there; the
   shell, the bar, the doors and the door itself stay in journey.css (P2). */

/* the two beats: each card where the recording's was, over the same night */
html.js #roll .copy, html.js #mangler .copy { position: absolute; left: var(--gut); top: 19%; width: min(36vw, 520px); }
/* eight moves on one line; on a narrow screen the row may wrap rather than run off it */
@media (max-aspect-ratio: 17/20) { #ro-moves:not(.pinned) { white-space: normal; } }
/* pinned under the waveform with core.ui.pin('ro-moves', ...) if P3 wants it there */
#ro-moves.pinned {
  position: fixed; left: 0; top: 0; margin: 0; white-space: nowrap;
  opacity: var(--pin-o, 1); transition: opacity .2s linear; will-change: transform;
}

@media (max-aspect-ratio: 17/20) {
  html.js #roll .copy, html.js #mangler .copy {
    left: var(--gut); right: 56px; top: 13%; width: auto;
    padding: 14px 16px 18px; margin-left: -16px; border-radius: 18px;
    background: radial-gradient(120% 140% at 30% 40%, rgba(11,10,9,.82), rgba(11,10,9,.55) 60%, rgba(11,10,9,0));
  }
}
@media (max-aspect-ratio: 17/20) and (max-width: 380px) {
  #ro-moves { letter-spacing: 0; font-size: 10.5px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  html.js #roll .copy, html.js #mangler .copy { top: 64px; }
}