/* Player chrome for /js/video.js. Everything here is rxv- prefixed and keys
   off data-phase on the 16:9 frame, so it never restyles a slot at rest:
   the idle look belongs to the page. Colours come from the site tokens. */

/* ---------- Stage ---------- */
.rxv-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  background:#000;
  outline:none;
  font-family:'Poppins',sans-serif;
}
.rxv-mount, .rxv-cover, .rxv-end-scrim, .rxv-hit{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.rxv-mount iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.rxv-cover{
  background-color:#000;
  background-size:cover;
  background-position:center;
}
.rxv-end-scrim{
  background:rgba(6,10,16,0.7);
  display:none;
}
.rxv-hit{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.rxv-hit:focus-visible,
.rxv-ctl:focus-visible,
.rxv-pill:focus-visible,
.rxv-bar:focus-visible,
.rxv-lb-close:focus-visible{
  outline:2px solid var(--cyan-bright, #7fe0f7);
  outline-offset:-3px;
}
.rxv-ctl:focus-visible, .rxv-pill:focus-visible, .rxv-bar:focus-visible, .rxv-lb-close:focus-visible{ outline-offset:2px; }

/* The poster covers the player in every phase except playing. */
[data-phase="playing"] > .rxv-stage .rxv-cover{ display:none; }
[data-phase="ended"] > .rxv-stage .rxv-end-scrim{ display:block; }

/* ---------- The slot's own idle UI (scrim, play button, caption) ---------- */
.rxv-idle-ui{
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
[data-phase="playing"] > .rxv-stage .rxv-idle-ui,
[data-phase="loading"] > .rxv-stage .rxv-idle-play,
[data-phase="ended"] > .rxv-stage .rxv-idle-play{
  opacity:0;
}
/* Paused: the caption returns, lifted clear of the control strip. */
[data-phase="paused"] > .rxv-stage .rxv-idle-caption{ transform:translateY(-40px); }

/* A mounted player must not sit inside a transformed box: an identity
   transform from a reveal still traps position:fixed, which the fullscreen
   fallback needs, and a hover scale would drag a live iframe around. */
[data-rxv-mounted]{ transform:none !important; }

/* ---------- Play badge (lightbox only; inline slots keep their own) ---------- */
.rxv-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:76px; height:76px;
  border-radius:50%;
  background:rgba(6,10,16,0.5);
  border:2px solid rgba(255,255,255,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  color:#fff;
  pointer-events:none;
}
.rxv-play svg{ margin-left:4px; }
[data-phase="paused"] > .rxv-stage .rxv-play,
[data-phase="idle"] > .rxv-stage .rxv-play{ display:flex; }

/* ---------- Loading ---------- */
.rxv-spinner{
  position:absolute;
  top:50%; left:50%;
  width:44px; height:44px;
  margin:-22px 0 0 -22px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.22);
  border-top-color:var(--cyan-bright, #7fe0f7);
  display:none;
  pointer-events:none;
  animation:rxv-spin .9s linear infinite;
}
[data-phase="loading"] > .rxv-stage .rxv-spinner{ display:block; }
@keyframes rxv-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .rxv-spinner{ animation:none; }
  .rxv-idle-ui{ transition:none; }
}

/* Stalled: playback never started by script, so get out of the way and let
   the tap reach YouTube's own play control. */
[data-stalled] > .rxv-stage .rxv-cover,
[data-stalled] > .rxv-stage .rxv-hit,
[data-stalled] > .rxv-stage .rxv-spinner,
[data-stalled] > .rxv-stage .rxv-idle-ui{ display:none; }

/* ---------- Pills: Restart, Watch again ---------- */
.rxv-pill{
  position:absolute;
  display:none;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--glass-border, rgba(69,200,234,0.28));
  background:rgba(6,10,16,0.65);
  color:#eef5f9;
  font-family:inherit;
  font-weight:600;
  font-size:0.8rem;
  line-height:1;
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease;
}
.rxv-pill:hover{ border-color:var(--cyan, #45c8ea); color:var(--cyan-bright, #7fe0f7); }
.rxv-restart{ top:16px; right:16px; }
.rxv-again{ top:50%; left:50%; transform:translate(-50%,-50%); padding:12px 22px; font-size:0.88rem; }
[data-phase="paused"] > .rxv-stage .rxv-restart,
[data-phase="ended"] > .rxv-stage .rxv-again{ display:inline-flex; }

/* ---------- Control strip ---------- */
.rxv-strip{
  position:absolute;
  left:0; right:0; bottom:0;
  display:none;
  align-items:center;
  gap:12px;
  padding:26px 16px 12px;
  background:linear-gradient(to top, rgba(6,10,16,0.82), rgba(6,10,16,0));
}
[data-phase="playing"] > .rxv-stage .rxv-strip,
[data-phase="paused"] > .rxv-stage .rxv-strip{ display:flex; }
.rxv-ctl{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  padding:5px 9px;
  border:1px solid transparent;
  border-radius:8px;
  background:rgba(6,10,16,0.65);
  color:#eef5f9;
  font-family:inherit;
  font-weight:600;
  font-size:0.72rem;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.rxv-ctl[hidden]{ display:none; }
.rxv-ctl:hover{ border-color:var(--glass-border, rgba(69,200,234,0.28)); color:var(--cyan-bright, #7fe0f7); }
.rxv-cc{ font-weight:800; letter-spacing:0.04em; }
.rxv-cc[aria-pressed="true"]{
  background:var(--cyan, #45c8ea);
  color:#04141c;
}
.rxv-bar{
  position:relative;
  flex:1 1 auto;
  min-width:40px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.25);
  cursor:pointer;
  touch-action:none;
}
/* A taller invisible target around the 6px bar. */
.rxv-bar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-10px; bottom:-10px;
}
.rxv-bar-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0;
  border-radius:999px;
  background:var(--cyan, #45c8ea);
  pointer-events:none;
}
.rxv-time{
  flex:0 0 auto;
  font-size:0.72rem;
  font-weight:600;
  color:rgba(255,255,255,0.9);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
@media (max-width:600px){
  /* A phone-width inline frame has no room for the lifted caption above the
     strip, so paused shows the slot as it looks at rest. The strip stays in
     fullscreen and in the lightbox, which has no caption to clear. */
  [data-rxv-mounted][data-phase="paused"] > .rxv-stage:not(.rxv-pfs):not(:fullscreen) .rxv-idle-caption{ transform:none; }
  [data-rxv-mounted][data-phase="paused"] > .rxv-stage:not(.rxv-pfs):not(:fullscreen) .rxv-strip{ display:none; }
  .rxv-strip{ gap:8px; padding:22px 10px 10px; }
  .rxv-ctl{ padding:5px 7px; }
  .rxv-restart{ top:10px; right:10px; }
}

/* ---------- Fullscreen ---------- */
.rxv-stage:fullscreen{ border-radius:0; width:100%; height:100%; }
.rxv-stage:-webkit-full-screen{ border-radius:0; width:100%; height:100%; }
/* Fallback where element fullscreen does not exist (iPhone Safari). */
.rxv-stage.rxv-pfs{
  position:fixed;
  inset:0;
  z-index:9500;
  border-radius:0;
}
html.rxv-pfs-lock, html.rxv-pfs-lock body{ overflow:hidden; }

/* ---------- Lightbox ---------- */
html.rxv-lock, html.rxv-lock body{ overflow:hidden; }
.rxv-lb{
  position:fixed;
  inset:0;
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  animation:rxv-fade .25s ease both;
}
@keyframes rxv-fade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .rxv-lb{ animation:none; } }
.rxv-lb-scrim{
  position:absolute;
  inset:0;
  background:rgba(6,10,16,0.88);
}
.rxv-lb-panel{
  position:relative;
  width:100%;
  max-width:960px;
  /* Keep the whole 16:9 frame on screen on short, wide viewports. */
  max-width:min(960px, calc((100vh - 120px) * 16 / 9));
}
.rxv-lb-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.rxv-lb-title{
  margin:0;
  min-width:0;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:1rem;
  color:#f4f9fb;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* The page animates its h2 headings in on scroll; this one is never observed. */
  opacity:1;
  transform:none;
}
.rxv-lb-close{
  flex:0 0 auto;
  width:40px; height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--glass-border, rgba(69,200,234,0.28));
  background:rgba(6,10,16,0.65);
  color:#eef5f9;
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease;
}
.rxv-lb-close:hover{ border-color:var(--cyan, #45c8ea); color:var(--cyan-bright, #7fe0f7); }
.rxv-lb-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:22px;
  border:1px solid var(--glass-border, rgba(69,200,234,0.28));
  box-shadow:0 30px 60px rgba(0,0,0,0.45);
  overflow:hidden;
  background:#000;
}
@media (max-width:600px){
  .rxv-lb-frame{ border-radius:14px; }
  .rxv-play{ width:60px; height:60px; }
}