/* ==========================================================================
   CamTapes player — chrome for the self-hosted HLS player (public/js/player.js)
   Loaded on video pages only.

   Sizing lives on .player-mount, not on the inner .xp, so the 16:9 box is
   reserved by the server-rendered HTML and nothing shifts when JS boots
   (the mount is above the fold: a CLS hit here is a Core Web Vitals hit).
   Everything inside the mount is absolutely positioned to fill it, including
   the uqload iframe we fall back to.

   The overlay chrome is deliberately dark in BOTH themes — it sits on video,
   and a light control bar over a bright frame is unreadable. Site tokens are
   reused where they are actually meaningful: --accent for progress/focus,
   --surface/--border/--text for the pop-up menus, which sit off the picture.
   Every var() carries a literal fallback so the player is not disfigured if
   main.css has not applied yet.
   ========================================================================== */

/* ------------------------------------------------------------------ box --- */
.player-mount {
  --accent: #e07a3d;
  --accent-fill: #c4622c;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  background: #000;
  overflow: hidden;
}
@supports not (aspect-ratio: 16 / 9) {
  .player-mount { height: 0; padding-top: 56.25%; }
}

/* The mandatory fallback. main.css styles .player-embed for the old inline
   iframe; inside the mount it has to fill the reserved box instead. */
.player-wrap .player-mount > iframe,
.player-wrap .player-mount > iframe.player-embed {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 0;
  display: block;
}

.xp {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  font-family: var(--font-body, system-ui, -apple-system, 'Segoe UI', sans-serif);
  -webkit-tap-highlight-color: transparent;
  /* one knob for the whole player's highlight colour */
  --xp-a: var(--accent, #4f8ff7);
}
.xp * { box-sizing: border-box; }
.xp [hidden] { display: none !important; }

.xp__screen {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* main.css sets `.player-wrap video { max-height: 72vh }` for the legacy
   native player; here the mount already caps the height and the video must
   simply fill it. */
.player-wrap .xp .xp__v,
.xp__v {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  background: #000;
  object-fit: contain;
}

/* --------------------------------------------------------------- facade --- */
.xp__poster {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity .3s ease;
}
.xp.is-started .xp__poster { opacity: 0; pointer-events: none; }

/* Scrim under the play button only while the facade is showing, so the button
   keeps contrast on a bright poster. It goes away with the poster. */
.xp__screen::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .28) 60%, rgba(0, 0, 0, .40) 100%);
  transition: opacity .3s ease;
  pointer-events: none;
}
.xp.is-started .xp__screen::before { opacity: 0; }

.xp__big {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--xp-a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .55);
  transition: transform .15s ease, opacity .2s ease, background .15s ease;
}
.xp__big svg { width: 40px; height: 40px; fill: currentColor; margin-left: 4px; display: block; }
.xp__big:hover { background: var(--accent-fill, #2f6fd6); transform: translate(-50%, -50%) scale(1.07); }
.xp.is-playing .xp__big,
.xp[data-state="loading"] .xp__big {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.82);
}

.xp__brand {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 3;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
  pointer-events: none;
  transition: opacity .2s ease;
}
.xp.is-idle .xp__brand { opacity: .45; }

/* -------------------------------------------------------- spinner/toast --- */
.xp__spin {
  position: absolute;
  left: 50%; top: 50%;
  margin: -22px 0 0 -22px;
  width: 44px; height: 44px;
  z-index: 5;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  animation: xp-spin .8s linear infinite;
}
@keyframes xp-spin { to { transform: rotate(360deg); } }

.xp__toast {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.xp__resume {
  position: absolute;
  left: 12px; bottom: 64px;
  z-index: 7;
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .5rem .4rem .8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.xp__resume button {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: .3rem .7rem; font: inherit; font-weight: 700;
  background: var(--xp-a, #2563eb); color: #fff;
}

.xp__err {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  max-width: 88%;
  text-align: center;
  color: #fff;
  font-size: .9rem;
  line-height: 1.5;
}
.xp--dead { position: relative; aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------ controls --- */
.xp__ui {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 7;
  padding: 24px 8px 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
  transition: opacity .2s ease, transform .2s ease;
  opacity: 1;
}
.xp.is-idle .xp__ui,
.xp[data-state="idle"] .xp__ui,
.xp[data-state="loading"] .xp__ui {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.xp.is-idle { cursor: none; }

/* ---- seek bar ---- */
.xp__seek {
  position: relative;
  display: flex;
  align-items: center;
  height: 22px;
  cursor: pointer;
  touch-action: none;   /* we own the drag; let the browser not scroll-jack it */
}
.xp__track {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .26);
  transition: height .12s ease;
}
.xp__seek:hover .xp__track,
.xp__seek:focus-visible .xp__track,
.xp.is-seeking .xp__track { height: 6px; }

.xp__buf,
.xp__prog {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 3px;
}
.xp__buf  { background: rgba(255, 255, 255, .42); }
.xp__prog { background: var(--xp-a); }
.xp__knob {
  position: absolute;
  top: 50%; left: 0;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--xp-a);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  transform: scale(0);
  transition: transform .12s ease;
}
.xp__seek:hover .xp__knob,
.xp__seek:focus-visible .xp__knob,
.xp.is-seeking .xp__knob { transform: scale(1); }

/* ---- button row ---- */
.xp__row {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
}
.xp__b {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  transition: background .12s ease;
}
.xp__b svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.xp__b:hover { background: rgba(255, 255, 255, .15); }
.xp__b:active { background: rgba(255, 255, 255, .24); }

.xp__lab {
  width: auto;
  min-width: 40px;
  padding: 0 9px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Focus must be visible on every control — these are the only way through the
   player without a mouse. */
.xp__b:focus-visible,
.xp__seek:focus-visible,
.xp__vol:focus-visible,
.xp__mi:focus-visible {
  outline: 2px solid var(--xp-a);
  outline-offset: 2px;
}
@supports not selector(:focus-visible) {
  .xp__b:focus, .xp__seek:focus, .xp__vol:focus, .xp__mi:focus {
    outline: 2px solid var(--xp-a);
    outline-offset: 2px;
  }
}

/* ---- volume ---- */
.xp__volwrap { display: flex; align-items: center; flex: 0 0 auto; }
.xp__vol {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  opacity: 0;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  transition: width .18s ease, opacity .18s ease, margin .18s ease;
}
.xp__volwrap:hover .xp__vol { width: 78px; opacity: 1; margin: 0 6px 0 2px; }
.xp__volwrap:focus-within .xp__vol { width: 78px; opacity: 1; margin: 0 6px 0 2px; }

.xp__vol::-webkit-slider-runnable-track {
  height: 4px; border-radius: 3px;
  background: linear-gradient(to right, var(--xp-a) var(--f, 100%), rgba(255, 255, 255, .3) var(--f, 100%));
}
.xp__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
}
.xp__vol::-moz-range-track    { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.xp__vol::-moz-range-progress { height: 4px; border-radius: 3px; background: var(--xp-a); }
.xp__vol::-moz-range-thumb    { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }

/* ---- time ---- */
.xp__time {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 0 6px;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .95);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.xp__sep { opacity: .45; }
.xp__dur { opacity: .72; }
.xp__gap { flex: 1 1 auto; }

/* ---- pop-up menus (quality / speed) ---- */
.xp__pop { position: relative; flex: 0 0 auto; }
.xp__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 9;
  min-width: 108px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface, #181b22);
  border: 1px solid var(--border, #2b313d);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
}
.xp__mi {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text, #e6e9ef);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.xp__mi:hover { background: var(--hover, rgba(255, 255, 255, .08)); }
.xp__mi.is-on { color: var(--accent, #4f8ff7); }
.xp__mi.is-on::after { content: '\2713'; float: right; }

/* -------------------------------------------------------- fullscreen ------
   :fullscreen and :-webkit-full-screen must NOT share a selector list — a
   browser that does not know one of them drops the whole rule. */
.xp:fullscreen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  max-height: none;
  border-radius: 0;
}
.xp:-webkit-full-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  max-height: none;
  border-radius: 0;
}
.xp:fullscreen .xp__ui { padding-bottom: 10px; }
.xp:-webkit-full-screen .xp__ui { padding-bottom: 10px; }

/* ------------------------------------------------------------- mobile ----- */
@media (max-width: 640px) {
  .xp__vol { display: none; }                          /* hardware keys do this better */
  .xp__volwrap:hover .xp__vol { display: none; }
  .xp__volwrap:focus-within .xp__vol { display: none; }

  .xp__ui  { padding: 28px 4px 4px; }
  .xp__row { height: 46px; gap: 0; }
  .xp__b   { width: 44px; height: 44px; }   /* tap target floor */
  .xp__b svg { width: 21px; height: 21px; }
  .xp__lab { min-width: 40px; padding: 0 7px; font-size: .74rem; }
  .xp__time { font-size: .72rem; padding: 0 4px; }

  .xp__seek { height: 28px; }
  .xp__track { height: 5px; }
  .xp__knob { transform: scale(1); width: 14px; height: 14px; margin: -7px 0 0 -7px; }

  .xp__big { width: 66px; height: 66px; }
  .xp__big svg { width: 30px; height: 30px; }
  .xp__brand { top: 8px; right: 8px; font-size: .7rem; }

  /* Nothing may depend on hover on a touch screen. */
  .xp__b:hover { background: transparent; }
  .xp__seek:hover .xp__track { height: 5px; }
}

@media (max-width: 400px) {
  .xp__pip { display: none; }
  .xp__lab { min-width: 34px; padding: 0 5px; font-size: .7rem; }
}

/* Coarse pointers never get the auto-hide "cursor: none" and always keep the
   bigger knob, regardless of viewport width (tablets, TVs). */
@media (hover: none) {
  .xp.is-idle { cursor: auto; }
  .xp__knob { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .xp__poster,
  .xp__screen::before,
  .xp__big,
  .xp__ui,
  .xp__track,
  .xp__knob,
  .xp__vol { transition: none; }
  .xp__spin { animation-duration: 2s; }
}

/* ---- scrub preview -------------------------------------------------------
   Sprite tile + time bubble above the seek bar. Positioned by JS via left:;
   translateX(-50%) centres it on the cursor, and JS clamps `left` so it never
   overhangs either end of the bar. Pointer devices only. */
.xp__seek { position: relative; }
.xp__prev {
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 5;
}
.xp__prev[hidden] { display: none; }
.xp__previmg {
  background-repeat: no-repeat;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
  background-color: #000;
}
.xp__previmg[hidden] { display: none; }
.xp__prevt {
  font: 600 12px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  background: rgba(0,0,0,.82);
  border-radius: 4px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (hover: none) { .xp__prev { display: none !important; } }

/* =========================================================================
   Polish pass v6 — 2026-09-22
   Appended after the base stylesheet; later rules of equal specificity win.
   Verified in a headless-Chrome harness (idle + playing, 1200px + 390px)
   before deploy. RULES OF THIS BLOCK:
     - never set `position` on a base layer (they are all absolute already);
       set z-index only. v3 broke every control by forcing position:relative.
     - no `backdrop-filter` anywhere: Chromium compositing gets flaky when a
       sibling pseudo-element carries filter+transform (the blurred backdrop).
   ========================================================================= */

/* --- letterbox: blurred fill instead of dead black bars -------------------
   Much of the library is 9:16 portrait in a 16:9 box. JS sets --xp-bg to the
   poster on .xp__screen; the pseudo-element paints it blurred UNDER everything.
   z-index: 0 keeps it below .xp__v (1), .xp__poster (2), .xp__ui (7). */
.xp__screen { overflow: hidden; background: #000; }
.xp__screen::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--xp-bg, none) center / cover no-repeat;
  filter: blur(26px) saturate(1.2) brightness(.38);
  transform: scale(1.16);
  z-index: 0;
  pointer-events: none;
}
.xp__v      { z-index: 1; object-fit: contain; }
.xp__poster { z-index: 2; object-fit: contain; }

/* --- controls readable over ANY frame ------------------------------------ */
.xp__ui {
  padding: 40px 12px 10px;
  background: linear-gradient(to top,
    rgba(0,0,0,.82) 0%, rgba(0,0,0,.58) 40%, rgba(0,0,0,.20) 72%, rgba(0,0,0,0) 100%);
}

/* --- seek bar: bigger hit area than it looks, grows on hover -------------- */
.xp__seek { padding: 9px 0 7px; }
.xp__track {
  height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.26);
  transition: height .12s ease;
}
.xp__seek:hover .xp__track,
.xp__seek:focus-visible .xp__track,
.xp.is-seeking .xp__track { height: 7px; }
.xp__buf  { background: rgba(255,255,255,.34); border-radius: 99px; }
.xp__prog { background: var(--xp-a, var(--accent, #2f6fd6)); border-radius: 99px; }
.xp__knob {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.5);
  transition: transform .12s ease;
}
.xp__seek:focus-visible { outline: 2px solid var(--xp-a, #2f6fd6); outline-offset: 3px; border-radius: 4px; }

/* --- control row ----------------------------------------------------------
   The row must NEVER be wider than the player: the original build let
   fixed-width children overflow at phone widths and the fullscreen button fell
   off the right edge. min-width:0 on the flex children + a shrinkable time
   label + hiding low-value items on small screens keeps it inside. */
.xp__row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.xp__row > * { min-width: 0; flex-shrink: 0; }
.xp__gap { flex: 1 1 0; min-width: 4px; }
.xp__b {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: #fff; background: transparent; border: 0; cursor: pointer;
  transition: background .13s ease, transform .13s ease;
}
.xp__b:hover  { background: rgba(255,255,255,.16); }
.xp__b:active { transform: scale(.93); }
.xp__b:focus-visible { outline: 2px solid var(--xp-a, #2f6fd6); outline-offset: 2px; }
.xp__b svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.xp__lab { width: auto; min-width: 40px; padding: 0 10px; font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* --- time ---------------------------------------------------------------- */
.xp__time {
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgba(255,255,255,.94); font-variant-numeric: tabular-nums;
  padding: 0 6px; white-space: nowrap; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis;
}
.xp__sep { opacity: .5; margin: 0 4px; }
.xp__dur { opacity: .72; }

/* --- volume: slider reveals on hover/focus (YouTube pattern) ------------- */
.xp__volwrap { display: flex; align-items: center; }
.xp__vol {
  width: 0; opacity: 0; margin-left: 0;
  transition: width .18s ease, opacity .18s ease, margin-left .18s ease;
  accent-color: var(--xp-a, #2f6fd6); cursor: pointer;
}
.xp__volwrap:hover .xp__vol,
.xp__volwrap:focus-within .xp__vol { width: 74px; opacity: 1; margin-left: 4px; }

/* --- scrub preview bubble ------------------------------------------------- */
.xp__previmg {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.6);
  outline: 1px solid rgba(0,0,0,.5);
}
.xp__prevt {
  background: rgba(12,12,12,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  letter-spacing: .01em;
}

/* --- quality / speed menus ------------------------------------------------ */
.xp__menu {
  background: rgba(18,18,20,.97);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.6);
  padding: 5px;
}

/* --- big centre play: keep the accent fill (visible on dark AND bright) --- */
.xp__big {
  width: 78px; height: 78px;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 0 8px rgba(0,0,0,.18);
}
.xp__big svg { width: 38px; height: 38px; }

/* --- phones / touch -------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .xp__b { width: 44px; height: 44px; }
  .xp__b svg { width: 23px; height: 23px; }
  .xp__seek { padding: 12px 0 8px; }
  .xp__track { height: 5px; }
  .xp__knob { width: 15px; height: 15px; transform: scale(1); }
  .xp__vol { display: none; }                 /* the OS owns volume on touch */
  .xp__ui { padding: 36px 8px 8px; }
}
@media (max-width: 480px) {
  .xp__vol { display: none; }                 /* also when a desktop UA is just narrow */
  .xp__pip { display: none; }                 /* low value at this size; keeps fullscreen reachable */
  .xp__lab { min-width: 34px; padding: 0 7px; font-size: 12px; }
  .xp__time { font-size: 12px; padding: 0 3px; }
  .xp__row { gap: 2px; }
  .xp__big { width: 64px; height: 64px; }
  .xp__big svg { width: 30px; height: 30px; }
}
@media (max-width: 360px) {
  .xp__pop[data-pop="s"] { display: none; }   /* speed: keep play / mute / time / fs */
}

/* --- accessibility / motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .xp__track, .xp__knob, .xp__b, .xp__vol, .xp__ui { transition: none !important; }
}
@media (prefers-contrast: more) {
  .xp__track { background: rgba(255,255,255,.5); }
  .xp__ui { background: rgba(0,0,0,.85); }
}

/* ---- autostart: "Tap to unmute" pill (player.js autoStart) ---------------- */
.xp__unmute {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, .72); color: #fff;
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  animation: xp-unmute-in .25s ease-out;
}
.xp__unmute[hidden] { display: none; }
.xp__unmute svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.xp__unmute:hover { background: var(--accent-fill, #2f6fd6); }
.xp__unmute:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes xp-unmute-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .xp__unmute { animation: none; } }
@media (hover: none), (pointer: coarse) { .xp__unmute { padding: 10px 16px 10px 12px; font-size: 15px; } }

/* ---- VAST preroll overlay (pr.js, called from player.js) -----------------
   main.css sizes .vast-wrap as an in-flow 16:9 box for the legacy facade; inside
   the player it covers the reserved box instead, above every player layer
   (controls 7, big button/spinner, unmute pill 9) and the end screen (8). */
.xp > .vast-wrap,
.xp > .vast-wrap--overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-height: none;
  z-index: 20;
  background: #000;
  overflow: hidden;
}
.player-wrap .xp > .vast-wrap video.vast-video,
.xp > .vast-wrap .vast-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

/* ---- VAST preroll: the player's own control bar (pr.js overlay mode) -----
   Same gradient, accent progress line, icon buttons and type as .xp__ctl, so the
   ad reads as part of the player instead of two loose corner buttons. */
.xp > .vast-wrap .vast-ctl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 26px 12px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.xp > .vast-wrap .vast-ctl > * { pointer-events: auto; }
.xp > .vast-wrap .vast-trk {
  position: relative; height: 4px; border-radius: 99px; margin: 0 4px 6px;
  background: rgba(255,255,255,.26); overflow: hidden; pointer-events: none;
}
.xp > .vast-wrap .vast-prog {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--xp-a, var(--accent, #2f6fd6)); border-radius: 99px;
  transition: width .25s linear;
}
.xp > .vast-wrap .vast-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.xp > .vast-wrap .vast-lab {
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgba(255,255,255,.94); font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.14);
}
.xp > .vast-wrap .vast-skip2 {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); border-radius: 8px;
  cursor: pointer; white-space: nowrap; transition: background .13s ease, border-color .13s ease;
}
.xp > .vast-wrap .vast-skip2 svg { width: 18px; height: 18px; fill: currentColor; }
.xp > .vast-wrap .vast-skip2:disabled { cursor: default; color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.2); }
.xp > .vast-wrap .vast-skip2:not(:disabled):hover { background: var(--xp-a, #2f6fd6); border-color: transparent; }
.xp > .vast-wrap .vast-skip2:focus-visible { outline: 2px solid var(--xp-a, #2f6fd6); outline-offset: 2px; }
/* The ad's call-to-action sits above the bar, not on it. */
.xp > .vast-wrap .vast-cta { bottom: 70px; }
@media (hover: none), (pointer: coarse) {
  .xp > .vast-wrap .vast-skip2 { height: 44px; }
  .xp > .vast-wrap .xp__b.vast-snd { width: 44px; height: 44px; }
}