/*
 * Stream1 player — white skin overrides
 * Load this file AFTER css/skin.css.
 * Player-only theme: it does not alter the website's page background or typography.
 */

.player-shell {
  --sp-white: #ffffff;
  --sp-white-soft: #f5f6f8;
  --sp-white-mid: #d9dde3;
  --sp-white-dark: #202328;
  --sp-white-border-color: #ffffff;
  --sp-white-border-width: 0px;
  --sp-white-border-radius: 12px;

  /* Use white as the player's accent color. */
  --sp-accent: var(--sp-white);

  border: var(--sp-white-border-width) solid var(--sp-white-border-color);
  border-radius: var(--sp-white-border-radius);
}

/* Keep the frame clean in fullscreen mode. */
.player-shell:fullscreen {
  border: 0;
  border-radius: 0;
}

/* Flat, monochrome control icons and interactive states. */
.player-shell .control-button {
  color: var(--sp-white-soft);
}

.player-shell .control-button:hover,
.player-shell .control-button:active {
  color: var(--sp-white);
}

.player-shell #control-play-pause svg {
  color: var(--sp-white);
}

.player-shell .control-button:focus-visible,
.player-shell .touch-playback-indicator:focus-visible,
.player-shell .overlay-unmute:focus-visible {
  outline-color: var(--sp-white);
}

/* White LIVE badge and custom status text. */
/*
.player-shell .live-pulse {
  background: #202328;
  animation-name: white-heartbeat;
}

@keyframes white-heartbeat {
  0% { box-shadow: 0 0 0 0 #ffffff66; transform: scale(1); }
  70% { box-shadow: 0 0 0 7px #ffffff00; transform: scale(1.15); }
  100% { box-shadow: 0 0 0 0 #ffffff00; transform: scale(1); }
}
*/
.player-shell .control-custom-text,
.player-shell .player-custom-text {
  color: var(--sp-white-soft);
}

/* Keep dropdowns readable against the video while using white accents. */
.player-shell .quality-menu,
.player-shell .speed-menu {
  border-color: #ffffff70;
  background: #202328f5;
}

.player-shell .quality-option,
.player-shell .speed-option {
  color: var(--sp-white-soft);
}

.player-shell .quality-option:hover,
.player-shell .speed-option:hover:not(:disabled) {
  background: #ffffff20;
}

.player-shell .quality-option[aria-checked="true"],
.player-shell .speed-option[aria-checked="true"] {
  color: #202328;
  background: var(--sp-white);
}

.player-shell .quality-option[aria-checked="true"]::after,
.player-shell .speed-option[aria-checked="true"]::after {
  color: #202328;
}

.player-shell .volume-slider,
.player-shell .progress-slider {
  accent-color: var(--sp-white);
}

/* Center playback indicator and autoplay-unmute button. */
.player-shell .touch-playback-indicator {
  color: #202328;
  background: #ffffffd9;
}

.player-shell .touch-playback-indicator.is-paused-state {
  background: #fffffff0;
}

.player-shell .overlay-action {
  color: #202328;
  background: var(--sp-white);
}

.player-shell .overlay-unmute {
  color: var(--sp-white-soft);
  border-color: #ffffff70;
  background: #202328ed;
}

/* Overlay messages retain contrast over both video and poster images. */
.player-shell .player-overlay:not(.has-unmute-prompt) {
  background: #11141880;
}

.player-shell .overlay-message {
  color: var(--sp-white);
}

/* Retain the configured frame radius on smaller screens. */
@media (max-width: 650px) {
  .player-shell {
    border-radius: var(--sp-white-border-radius);
  }
}