/* ==========================================================================
   Lunar Stream - Embed Player Styles
   Self-contained stylesheet loaded by the SSR player template.
   BEM-style: .lunar-* namespacing to avoid clashes with host page.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  position: relative;
}

body.transparent-mode {
  background: transparent;
}

/* --- ArtPlayer host ------------------------------------------------------ */
/* Anti-FOUC: hide the player until ArtPlayer is fully ready. The opacity
   flips to 1 when either:
     - .art-app class is added (ArtPlayer auto-adds it when container is
       selected via class selector `.artplayer-app`); OR
     - .ready class is added in `art.on('ready')` handler in player.js
   This dual-trigger is the TikTok reference pattern - if ArtPlayer does
   not add .art-app for any reason, the .ready event still flips opacity. */
.lunar-player,
.artplayer-app {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lunar-player.art-app,
.lunar-player.art-video-play,
.lunar-player.ready,
.artplayer-app.art-app,
.artplayer-app.art-video-play,
.artplayer-app.ready {
  opacity: 1;
}

/* --- Loader -------------------------------------------------------------- */
.lunar-loader {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
}
body.transparent-mode .lunar-loader {
  background: transparent;
}
.lunar-ripple {
  width: 64px;
  height: 64px;
  position: relative;
}
.lunar-ripple > div {
  position: absolute;
  inset: 0;
  border: 3px solid #ffffff;
  border-radius: 50%;
  opacity: 0;
  animation: lunar-ripple 1.8s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lunar-ripple > div:nth-child(2) {
  animation-delay: 0.6s;
}
.lunar-ripple > div:nth-child(3) {
  animation-delay: 1.2s;
}
@keyframes lunar-ripple {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* --- Error overlay ------------------------------------------------------- */
.lunar-error {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  text-align: center;
  color: #fff;
}
.lunar-error[hidden] {
  display: none;
}
.lunar-error__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}
.lunar-error__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.lunar-error__msg {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 320px;
}

/* --- Streamer info overlay (bottom-left) --------------------------------- */
/* The user wants the screen free of stream-name labels. Hide the entire
   info overlay (avatar, name, LIVE badge, stream title) and the viewer
   count pill. The logos and notice banners are also hidden. Only the
   video and the in-control-bar buttons remain visible. */
.lunar-info,
.lunar-viewer,
.embed-logo,
.embed-notice {
  display: none !important;
}

/* Retain original rules below for fallback / future re-enable
   ------------------------------------------------------- */
.lunar-info {
  position: absolute;
  left: 12px;
  bottom: 56px;
  align-items: center;
  gap: 8px;
  z-index: 30;
  pointer-events: none;
  font-size: 13px;
  max-width: calc(100% - 100px);
}
.lunar-info__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
  flex-shrink: 0;
}
.lunar-info__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lunar-info__name {
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.lunar-info__title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.lunar-info__badge {
  display: inline-block;
  background: #ff4040;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* --- Viewer count (top-right) ------------------------------------------- */
.lunar-viewer {
  position: absolute;
  right: 12px;
  bottom: 56px;
  z-index: 30;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.lunar-viewer[style*="display: none"] {
  display: none !important;
}
.lunar-viewer svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* --- Logo overlay (configurable position) -------------------------------- */
.embed-logo {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: 120px;
  max-height: 40px;
  z-index: 30;
  pointer-events: none;
  opacity: 0.9;
}

/* --- Notice banner (configurable) --------------------------------------- */
.embed-notice {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 12px;
  z-index: 30;
  padding: 6px 14px;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  max-width: 80%;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* --- Transparent mode tweaks --------------------------------------------- */
body.transparent-mode .lunar-error {
  background: rgba(0, 0, 0, 0.85);
}
body.transparent-mode .lunar-info__name,
body.transparent-mode .lunar-info__title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* --- In-player overlay controls (CDN + Quality switcher) ----------------- */
/* Absolute-positioned pill groups layered on top of the ArtPlayer video.
   ArtPlayer seekbar is at the bottom; these are at the top — no overlap.
   z-index 100 is above ArtPlayer's own controls. */
.lunar-ctrl {
  position: absolute;
  z-index: 100;
  display: flex;
  gap: 6px;
  pointer-events: auto;
  font-family: inherit;
}

/* When the CDN/Quality control is slotted INSIDE ArtPlayer's own
   control bar (via the controls array, position: 'right', index: 35),
   it inherits the bar's flex layout. Reset absolute positioning and
   the top/right offsets so the pill flows naturally next to the PIP
   button. */
.lunar-ctrl--inline {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 4px;
  height: 100%;
  align-items: center;
}

.lunar-ctrl--quality {
  top: 12px;
  left: 12px;
}

.lunar-ctrl--cdn {
  top: 12px;
  right: 12px;
}

/* Glassmorphism pill button group.
   Visual recipe:
   - Frosted glass background: layered semi-transparent gradient over
     strong backdrop blur (saturate to brighten colors behind the pill)
   - Subtle inner highlight on top edge for a "glass thickness" feel
   - Soft drop shadow so the pill floats above the video
   - Rounded full (999px) so the group reads as a single chip
   The CDN switcher uses .lunar-ctrl directly (without the .lunar-ctrl-pill
   merged rule below) so the outer container chrome (border / box-shadow
   / background) is NOT rendered - only the inner buttons show their
   own pill style. This keeps the right-side control bar looking like
   a row of individual ArtPlayer icon controls rather than a single
   floating widget. */
.lunar-ctrl-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Buttons inside the pill group */
.lunar-ctrl-pill button,
.lunar-ctrl button {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease, transform 0.12s ease;
  white-space: nowrap;
  line-height: 1.3;
}

/* The CDN switcher's group container - no outer chrome (no border,
   no box-shadow, no frosted background). Just a flex layout so the
   inner buttons line up horizontally inside ArtPlayer's control bar.
   The user explicitly asked for no visible border on the outer
   container; the inner buttons keep their own glass pill style. */
.lunar-ctrl {
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  padding: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.lunar-ctrl-pill button:hover,
.lunar-ctrl button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.lunar-ctrl-pill button:active,
.lunar-ctrl button:active {
  transform: scale(0.96);
}

.lunar-ctrl-pill button.active,
.lunar-ctrl button.active {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(245, 245, 250, 0.92) 100%
  );
  color: #111;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/* Glassmorphism overlay positions (top-left / top-right).
   When slotted inside ArtPlayer's own control bar (lunar-ctrl--inline),
   the absolute positioning is reset in .lunar-ctrl--inline above. */
.lunar-ctrl--quality {
  top: 16px;
  left: 16px;
}

.lunar-ctrl--cdn {
  top: 16px;
  right: 16px;
}

/* ----- CDN switcher (standalone overlay) ---------------------------------- */
/* The overlay is appended to <body> as a top-right floating control
   so its event handling is fully decoupled from ArtPlayer. The
   toggle is a glass pill with a chevron caret. The dropdown below it
   lists all servers. */
.lunar-cdn-overlay {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

.lunar-cdn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.06) 100%
  );
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.12s ease,
    box-shadow 0.15s ease;
  position: relative;
}

.lunar-cdn-toggle:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.10) 100%
  );
  transform: translateY(-1px);
}

.lunar-cdn-toggle:active {
  transform: translateY(0) scale(0.97);
}

/* Tiny chevron caret on the right of the toggle so it reads as a menu. */
.lunar-cdn-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255, 255, 255, 0.75);
  transform: translateY(1px);
  transition: transform 0.2s ease;
}

.lunar-cdn-toggle[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(180deg);
}

.lunar-cdn-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    180deg,
    rgba(28, 28, 36, 0.92) 0%,
    rgba(20, 20, 28, 0.88) 100%
  );
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  /* The explicit `display: flex` above overrides the default
     `display: none` that the HTML `hidden` attribute would apply.
     We need an explicit `[hidden]` rule with !important so toggling
     `menu.hidden = true/false` actually shows/hides the menu. */
  &[hidden] {
    display: none !important;
  }
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 250;
  transform-origin: bottom right;
  animation: lunar-cdn-pop 0.18s ease-out;
}

@keyframes lunar-cdn-pop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.lunar-cdn-option {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.lunar-cdn-option:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.lunar-cdn-option:active {
  transform: scale(0.98);
}

.lunar-cdn-option.active {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  color: #fff;
}

/* Small check mark on the active option to make selection obvious. */
.lunar-cdn-option.active::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path d='M13.5 4.5L6 12 2.5 8.5l1-1L6 10l6.5-6.5z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Transparent mode: slightly more transparent pill background */
body.transparent-mode .lunar-ctrl-pill,
body.transparent-mode .lunar-ctrl button {
  background: rgba(0, 0, 0, 0.4);
}

/* Centered play button overlay for both transparent and non-transparent
   modes. The button is appended to <body> (not inside #artplayer-app) so
   it sits on its own stacking context and is guaranteed to be painted on
   top of the ArtPlayer <video> element regardless of the player's
   internal z-index/transform rules. `position: fixed` keeps it centered
   in the viewport across all iframe sizes. */
.lunar-play-btn {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483647; /* max int - sits above any ArtPlayer layer */
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, transform 0.15s, opacity 0.2s;
}

.lunar-play-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: translate(-50%, -50%) scale(1.05);
}

.lunar-play-btn svg {
  width: 38px;
  height: 38px;
  fill: #fff;
  margin-left: 4px; /* visually center the play triangle */
}

.lunar-play-btn--hidden {
  opacity: 0;
  pointer-events: none;
}