.vsl-player-shell {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: #ebe8e0;
  background: #0e0e10;
}

#virgox-vsl {
  display: block;
  width: 100%;
  height: 100%;
  /* Keep transport controls together on the video at every player size. */
  --center-controls: flex;
  --center-play-button: inline-flex;
  --center-seek-backward-button: inline-flex;
  --center-seek-forward-button: inline-flex;
  --bottom-play-button: none;
  --bottom-seek-backward-button: none;
  --bottom-seek-forward-button: none;
  --captions-button: none;
  --time-display: none;
  --duration-display: none;
  --time-range: none;
  --title-display: none;
  --top-controls: none;
  --playback-rate-button: none;
  --rendition-menu-button: none;
  --audio-track-menu-button: none;
  --airplay-button: none;
  --cast-button: none;
  --pip-button: none;
  --volume-range: none;
  --media-object-fit: contain;
  --controls-backdrop-color: transparent;
  --media-control-background: transparent;
}

/* Larger touch targets, with the original sparse control layout retained. */
#virgox-vsl::part(button) { min-width: 44px; min-height: 44px; box-sizing: border-box; }
#virgox-vsl::part(bottom) { padding-bottom: 0; background: #000; }
#virgox-vsl::part(button), #virgox-vsl::part(center) { background: transparent; }
#virgox-vsl::part(bottom fullscreen button) { margin-right: 6px; }
#virgox-vsl::part(button) { --media-button-icon-width: 28px; --media-button-icon-height: 28px; }
.vsl-unmute[hidden], .vsl-transport[hidden], .vsl-speed-hint[hidden] { display: none; }
.vsl-player-shell.has-played #virgox-vsl { --center-controls: none; --bottom-controls: none; }
.vsl-player-shell.has-played #virgox-vsl::part(bottom) { display: none; }
.vsl-sound-off { display: none; }
[data-vsl-mute][data-muted="true"] .vsl-sound-off { display: block; }
[data-vsl-mute][data-muted="true"] .vsl-sound-waves { display: none; }
.vsl-player-shell.is-floating .vsl-main-control { display: none; }
.vsl-gesture-surface { display: none; position: absolute; inset: 0; z-index: 5; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.vsl-player-shell.has-played:not(.is-floating):not(.is-awaiting-unmute) .vsl-gesture-surface { display: block; }
.vsl-gesture-feedback { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9; padding: 7px 12px; border-radius: 20px; background: rgb(0 0 0 / 75%); color: #fff; font: 600 13px var(--body-font, sans-serif); pointer-events: none; white-space: nowrap; }
.vsl-gesture-feedback[hidden] { display: none; }
/* No competing controls or black menu panels behind the initial sound prompt. */
.vsl-player-shell.is-awaiting-unmute #virgox-vsl {
  --controls: none;
  --center-controls: none;
  --bottom-controls: none;
}
.vsl-player-shell.is-awaiting-unmute #virgox-vsl::part(bottom),
.vsl-player-shell.is-awaiting-unmute .vsl-transport { display: none; }
#virgox-vsl::part(menu), #virgox-vsl::part(menu-button) { display: none; }
.vsl-transport {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: 12px;
  background: #000;
  transition: opacity 200ms, visibility 200ms;
}
.vsl-player-shell[data-vsl-controls="hidden"] .vsl-transport { opacity: 0; visibility: hidden; pointer-events: none; }
.vsl-transport button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  color: #ebe8e0;
  background: transparent;
  cursor: pointer;
}
.vsl-transport button:hover { background: transparent; color: #f0d99e; }
.vsl-transport button:focus-visible { outline: 2px solid #d4a017; outline-offset: -2px; }
.vsl-seek-symbol { position: absolute; top: -4px; font: 38px/1.2 sans-serif; }
.vsl-seek-number { padding-top: 8px; font: 700 11px var(--body-font, sans-serif); }
.vsl-play-icon { display: none; }
[data-vsl-play][data-paused="true"] .vsl-play-icon { display: block; }
[data-vsl-play][data-paused="true"] .vsl-pause-icon { display: none; }
.vsl-player-shell.is-floating .vsl-transport { top: calc(50% + 22px); bottom: auto; transform: translate(-50%, -50%); }
.vsl-player-shell.is-floating #virgox-vsl { --bottom-controls: none; }
.vsl-player-shell.is-floating #virgox-vsl::part(bottom) { display: none; background: transparent; }
.vsl-player-shell.is-floating .vsl-transport { background: transparent; }
.vsl-player-shell:fullscreen { width: 100%; height: 100%; inset: 0; border: 0; border-radius: 0; padding: 0; }
.vsl-player-shell:fullscreen #virgox-vsl { width: 100%; height: 100%; }
.vsl-player-shell:fullscreen .vsl-mini-toolbar { display: none; }
.vsl-player-shell:fullscreen .vsl-transport { top: auto; bottom: 0; transform: translateX(-50%); }
.vsl-unmute {
  position: absolute;
  inset: 0 0 62px;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 16px;
  border: 0;
  background: radial-gradient(ellipse at center, rgb(14 14 16 / 18%), transparent 68%);
  color: #fff;
  cursor: pointer;
}
.vsl-unmute-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid rgb(212 160 23 / 65%);
  border-radius: 999px;
  background: rgb(14 14 16 / 86%);
  box-shadow: 0 6px 30px rgb(0 0 0 / 25%);
  font: 600 clamp(14px, 2vw, 17px) var(--body-font, sans-serif);
}
.vsl-speed {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 0;
}
.vsl-speed button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  color: #ebe8e0;
  background: transparent;
  font: 700 17px var(--body-font, sans-serif);
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.vsl-speed button[aria-pressed="true"] {
  color: #f0c34a;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.vsl-speed button:focus-visible, .vsl-unmute:focus-visible { outline: 2px solid #d4a017; outline-offset: -3px; }
.vsl-speed-hint {
  position: absolute;
  right: -6px;
  bottom: 62px;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgb(212 160 23 / 40%);
  border-radius: 8px;
  background: rgb(14 14 16 / 92%);
  color: #f0d99e;
  font: 500 12px var(--body-font, sans-serif);
  pointer-events: none;
  animation: vsl-hint-fade 5s both;
}
.vsl-pointing-hand { position: absolute; right: 18px; top: 100%; color: #f0d99e; transform: rotate(180deg); animation: vsl-finger-point-down 1.8s ease-in-out infinite; }
.vsl-player-shell.is-floating .vsl-unmute { display: none; }
.vsl-player-shell.is-floating .vsl-speed-hint { bottom: 52px; font-size: 11px; padding: 6px 9px; }
@keyframes vsl-hint-fade {
  0% { opacity: 0; transform: translateX(-4px); }
  3%, 96% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(3px); }
}
@keyframes vsl-finger-point-down { 0%, 100% { transform: translateY(-2px) rotate(180deg); } 50% { transform: translateY(3px) rotate(180deg); } }
@media (prefers-reduced-motion: reduce) {
  .vsl-speed-hint, .vsl-pointing-hand { animation: none; }
  .vsl-speed button, .vsl-transport { transition: none; }
}

#virgox-vsl:defined .vsl-player-fallback { display: none; }
.vsl-player-fallback { display: inline-block; padding: 24px; color: #ebe8e0; }
.vsl-mini-toolbar[hidden] { display: none; }

.vsl-player-shell.is-floating {
  position: fixed;
  inset: auto 24px 24px auto;
  width: min(360px, calc(100vw - 32px));
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(212, 160, 23, 0.45);
  border-radius: 12px;
  box-shadow: 0 16px 54px rgba(0, 0, 0, 0.35);
  z-index: 190;
}

.vsl-player-shell.is-floating::backdrop { background: transparent; pointer-events: none; }
.vsl-player-shell.is-floating #virgox-vsl { height: auto; aspect-ratio: 16 / 9; }
.vsl-player-shell.is-floating #virgox-vsl { cursor: pointer; }
.vsl-mini-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 2px 12px; }
.vsl-mini-toolbar button { padding: 8px; min-height: 40px; border: 0; background: transparent; color: #ebe8e0; cursor: pointer; font: 500 12px var(--body-font, sans-serif); }
.vsl-mini-toolbar [data-vsl-close] { width: 40px; font-size: 23px; }
.vsl-mini-actions { display: flex; align-items: center; gap: 2px; }
.vsl-mini-actions [data-vsl-audio] { display: grid; place-items: center; width: 44px; min-height: 44px; }
.vsl-mini-actions [data-vsl-audio]:hover { color: #f0c34a; }
.vsl-mini-toolbar button:focus-visible { outline: 2px solid #d4a017; outline-offset: -2px; }

@media (max-width: 720px) {
  .vsl-player-shell.is-floating {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    width: min(280px, calc(100vw - 24px));
  }
}