.fullscreen-mini-back {
  display: none;
}

.video-fullscreen-overlay.mini-program-fullscreen .fullscreen-mini-back {
  position: absolute;
  left: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  z-index: 8;
  min-width: 76px;
  height: 40px;
  padding: 0 14px 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.68);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.video-fullscreen-overlay.mini-program-fullscreen .fullscreen-mini-back b {
  margin-top: -2px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.video-fullscreen-overlay.mini-program-fullscreen .fullscreen-close {
  display: none;
}

.video-fullscreen-overlay.mini-program-fullscreen .fullscreen-counter {
  left: 50%;
  transform: translateX(-50%);
}

/* Keep the three-slide rail and its JS translation on exactly the same height.
   Mini-program WebViews can report a visualViewport height that differs from 100dvh. */
.video-fullscreen-overlay {
  --fullscreen-viewport-height: 100dvh;
  isolation: isolate;
  clip-path: inset(0);
}

.video-fullscreen-overlay .fullscreen-track {
  top: 0;
  bottom: auto;
  height: calc(var(--fullscreen-viewport-height) * 3);
  overflow: hidden;
}

.video-fullscreen-overlay .fullscreen-slide,
.video-fullscreen-overlay .fullscreen-slide video {
  width: 100%;
  height: var(--fullscreen-viewport-height);
  min-height: var(--fullscreen-viewport-height);
  max-height: var(--fullscreen-viewport-height);
}

.video-fullscreen-overlay .fullscreen-slide-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: var(--fullscreen-viewport-height);
  object-fit: cover;
  background: #000;
  opacity: 1;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

.video-fullscreen-overlay .fullscreen-slide-cover.hidden {
  display: block !important;
  opacity: 0;
}

.video-fullscreen-overlay .fullscreen-slide.is-loading::before,
.video-fullscreen-overlay .fullscreen-slide.is-buffering::before {
  display: none;
}

.video-fullscreen-overlay .fullscreen-slide.is-playing::before {
  display: none;
}

@keyframes mahua-fullscreen-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Landscape playback fit v502: wide works should show the whole frame instead of
   being cropped by the vertical short-video layout. Portrait keeps cover. */
.video-fullscreen-overlay .fullscreen-slide.media-landscape video,
.video-fullscreen-overlay .fullscreen-slide.media-landscape .fullscreen-slide-cover,
.video-fullscreen-overlay .fullscreen-slide.media-square video,
.video-fullscreen-overlay .fullscreen-slide.media-square .fullscreen-slide-cover {
  object-fit: contain !important;
}

/* Keep taps in the WebView layer instead of letting the native video layer
   swallow them. It remains below all visible controls and still bubbles
   touch gestures to the overlay's existing swipe handler. */
.video-fullscreen-overlay .fullscreen-touch-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Fullscreen work metadata: keep the title and upload/generation description
   readable without covering the right-side actions or resizing the player. */
.video-fullscreen-overlay .fullscreen-work-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.video-fullscreen-overlay .fullscreen-work-copy h3 {
  display: -webkit-box;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.78);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.video-fullscreen-overlay .fullscreen-work-copy p {
  display: -webkit-box;
  max-width: 100%;
  max-height: none;
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.82);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}