.ambient-film { position: absolute; inset: 0; overflow: hidden; }
.ambient-film[hidden], .ambient-film img[hidden] { display: none; }
.ambient-film :is(video, img) { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; }
.ambient-film button { position: absolute; right: 12px; bottom: 12px; z-index: 2; min-height: 44px; padding: 8px 12px; background: var(--card-night); color: var(--card-rail); border: 1px solid var(--card-rule-strong); cursor: pointer; }
.ambient-film button:focus-visible { outline: 2px solid var(--card-flood); outline-offset: 2px; }
.live-lobby { background: transparent; }
#liveFilm[data-placement="backdrop"]::after { content: ""; position: absolute; inset: 0; background: var(--card-night); opacity: .62; pointer-events: none; }
.live-lobby { padding-bottom: 64px; pointer-events: none; }
.lobby-field { pointer-events: auto; }
#liveFilm { z-index: 1; }
.live-lobby { z-index: 2; }
#liveFilm[data-placement="inset"] { inset: auto auto 18px 18px; width: min(360px, calc(100% - 36px)); aspect-ratio: 7 / 4; border: 1px solid var(--card-rule-strong); }
.first-foal-intro { position: relative; isolation: isolate; min-height: 170px; padding: 18px; align-items: flex-end; }
#studFilm { z-index: -1; }
#studFilm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--card-night), transparent); pointer-events: none; }
.first-foal-intro > p { margin-right: 110px; }
@media (max-width: 700px) {
  .first-foal-intro { min-height: 140px; padding: 12px; }
  .first-foal-intro > p { max-width: 24ch; }
  #liveFilm[data-placement="inset"] { width: 180px; bottom: 8px; left: 8px; }
}
/* Keep the entire background horse in the shallow stud heading. */
#studFilm :is(video, img) { object-fit: contain; object-position: right center; }
#studFilm button { bottom: auto; top: 8px; right: 8px; }
.first-foal-intro > p { display: none; }