/* T4 owns this file: video player overlay styles. */

html.player-open,
html.player-open body { overflow: hidden; }

.player {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  background: var(--paper);
  animation: player-fade-in 450ms var(--ease-gentle) both;
}
@keyframes player-fade-in { from { opacity: 0; } to { opacity: 1; } }

.player__panel {
  width: 100%;
  max-width: 720px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.player__title {
  margin: 0;
  color: var(--ink);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.2;
}
/* The title only receives focus programmatically (so screen readers start here); it isn't a control. */
.player__title:focus,
.player__title:focus-visible { outline: none; }

.player__stage { width: 100%; }

.player__loading {
  margin: 32px 0;
  font-style: italic;
  font-size: 20px;
  color: var(--ink-soft);
}

/* Videos are mostly portrait (phones held upright): size the frame by the video's own shape,
   as big as fits, instead of forcing a 16:9 box that would shrink portrait clips. */
.player__media {
  display: flex;
  justify-content: center;
  width: 100%;
}
.player__video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 64vh;   /* fallback: browsers without svh */
  max-height: 64svh;
  border-radius: 18px;
  background: #1f2a38;
  box-shadow: 0 10px 30px rgba(62, 95, 134, .18);
}

.player__missing {
  margin: 0 auto;
  max-width: 460px;
  padding: 28px 22px 30px;
  border-radius: 22px;
  background: var(--peach);
}
.player__bird {
  width: 150px;
  height: auto;
  margin: 0 auto 14px;
}
.player__message {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.5;
}

.player__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.player__btn {
  min-height: var(--tap-min);
  min-width: 132px;
  padding: 10px 28px;
  border: 2px solid #c9d3e0;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
  transition: background-color 200ms var(--ease-gentle), transform 200ms var(--ease-gentle);
}
.player__btn:active { transform: scale(.98); }

.player__btn--primary {
  border-color: var(--coral);
  background: var(--coral);
  color: var(--white);
  min-width: 160px;
}
.player__btn--primary:hover { background: var(--coral-deep); border-color: var(--coral-deep); }
.player__btn--back { min-width: 160px; }

/* Missing state: Back is the only control, give it the friendly primary look (cosmetic; :has optional). */
.player__stage:has(.player__missing:not([hidden])) + .player__controls .player__btn--back {
  border-color: var(--coral);
  background: var(--coral);
  color: var(--white);
}

.player .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .player { animation-duration: 1ms; }
  .player__btn { transition: none; }
}