/* HVO multi-language player (mlplayer) — carousel level-up Task 2,
   spec docs/specs/2026-07-19-carousel-levelup-design.md §2.
   One engine, two consumers: the homepage hero (replaces the sk97
   showreel markup) and the creator morph-popups (Task 4).
   Chrome per Mena's locked reference, as revised by the dated
   sections below: title top-left (goo-morphs per language) ·
   "Now playing" language pill under the title · play/pause +
   "Select language" pill bottom-left · mute bottom-right · 4px lime
   progress bar (labeled native <input type=range>, no outline)
   on the bottom edge, hover/focus/coarse-pointer visible. */

/* ---- Hero layout overrides — MIGRATED from video-player/video-player.css
   (2026-07-19, plan Step 2.1 "never delete this task"): the sk97 module
   carried these load-bearing rules; the sk97 MARKUP is gone from
   index.html, and as of 2026-08-25 video-player.css is unlinked and its
   files deleted, so this file is now the sole and canonical home for
   them. Top-anchor the hero instead of centering, let it grow. */
.section_hero {
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 3.5rem;
}

/* nudge the hero subtext up 10px (Mena 2026-07-20). margin, not transform —
   the subtext carries the bundle's [hero-text] entrance which animates
   transform, so a transform here would fight it. MIGRATED 2026-08-25 from
   video-player/video-player.css: it was the LAST live rule in that file, and
   dropping the orphaned link without it shifts the hero subtext down 10px.
   The link and the video-player/ files are gone as of the same change. */
.section_hero .max-width-medium {
  margin-top: -10px;
}

/* ---- Frame (sized like the old sk97 frame) ---- */
/* Task 4 (2026-07-19): the hero mount's full-width box overlaps the
   wheel cards' projected quads (transparent areas beside/above the
   visible player) and was swallowing card clicks — the mount goes
   inert and the actual player re-enables. */
#hero-mlplayer {
  width: 100%;
  pointer-events: none;
}
#hero-mlplayer .mlp { pointer-events: auto; }

.mlp {
  position: relative;
  z-index: 5;
  width: min(1060px, calc(100% - 3rem));
  margin: 1.25rem auto 0;
}

.mlp_frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1rem;
  corner-shape: squircle; /* site corner language (fx.css skiper63) */
  background: #000;
}

.mlp_viewport {
  position: absolute;
  inset: 0;
  /* The frame owns the one and only corner clip. A second rounded clip here
     used the default circular curve inside the frame's squircle, exposing the
     frame's black background as wedges in all four corners. */
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.mlp_frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep a real image over the decoder until a resumed frame has painted.
   Mobile Safari can otherwise expose a black surface for a beat when the
   popup claims or releases the shared player. */
.mlp_poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 1;
  transition: opacity 120ms linear, visibility 120ms linear;
}
.mlp_poster.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* The modal appears immediately while Pages prepares a seekable audio Blob.
   Keep that wait visible and non-blocking instead of showing a frozen box. */
.mlp_frame.is-audio-loading .mlp_viewport::after {
  content: "Loading sound…";
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 4;
  transform: translateX(-50%);
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: 600 0.72rem/1 var(--_typography---font-family--alternate, Geistmono, Arial, sans-serif);
  white-space: nowrap;
  pointer-events: none;
}

/* ---- Top scrim (2026-07-20): legibility gradient behind the top-left
   text block. Above the video (DOM order), under the text layers,
   inert. Top ~30% of the frame. The mask matters: on a wide 30%-tall
   box the 160deg axis leaves ~0.13 alpha at the bottom-LEFT corner
   (the corner sits at only ~32% of the gradient line), which showed
   as a faint horizontal seam in verification — the vertical fade-out
   mask dissolves the box edge without touching the spec gradient. */
.mlp_scrim_top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 45%);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  pointer-events: none;
}

/* ---- Top-left stack (2026-07-20, Mena): title with the current-
   language flag+label UNDER it (was top-right). Flow column so the
   label tracks the title's height even when the title wraps. */
.mlp_topleft {
  position: absolute;
  top: 1.1rem;
  left: 1.4rem;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  pointer-events: none;
}
.mlp_title {
  color: #fff;
  font-family: var(--_typography---font-family--headers, "Plus Jakarta Sans", sans-serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ---- Language label (under the title, smaller; true 250ms crossfade
   via 2 stacked spans — behavior unchanged from the top-right era) */
.mlp_lang {
  display: grid;
  color: #fff;
  font-family: var(--_typography---font-family--alternate, Geistmono, Arial, sans-serif);
  font-size: 0.85rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
  text-align: left;
}
.mlp_lang > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 250ms ease;
}
.mlp_lang > span.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mlp_lang > span { transition: none; } /* hard-cut label, no crossfade */
}

/* ---- Controls chrome: fades in on hover/focus/paused; always on for
   coarse pointers ---- */
.mlp_controls,
.mlp_progress {
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
.mlp_frame:hover .mlp_controls,
.mlp_frame:focus-within .mlp_controls,
.mlp_frame.is-paused .mlp_controls,
.mlp_frame:hover .mlp_progress,
.mlp_frame:focus-within .mlp_progress,
.mlp_frame.is-paused .mlp_progress {
  opacity: 1;
}
@media (hover: none) {
  .mlp_controls, .mlp_progress { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mlp_controls, .mlp_progress { transition: none; }
}

.mlp_controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* bottom padding 1.35rem → 1.95rem (2026-07-20, Mena): raise the
     control row ~10px off the progress bar / bottom edge */
  padding: 2.2rem 1.4rem 1.95rem;
  border-radius: 0 0 1rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none; /* children re-enable */
}
.mlp_controls > * { pointer-events: auto; }
.mlp_frame.has-language-menu .mlp_controls {
  z-index: 20;
  opacity: 1;
}
.mlp_spacer { flex: 1; pointer-events: none; }

.mlp_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #fff;
  transition: background 0.1s ease-in-out, transform 0.1s ease;
}
.mlp_btn:hover { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(16px); }
.mlp_btn:active { transform: scale(0.9); }
.mlp_btn:focus-visible { outline: 2px solid var(--base--green, #d6fd70); outline-offset: 2px; }
.mlp_btn svg { width: 1rem; height: 1rem; }
.mlp_fullscreen { display: none; }
.mlp_fullscreen .icon-contract { display: none; }
.mlp_frame.is-fullscreen .mlp_fullscreen .icon-expand { display: none; }
.mlp_frame.is-fullscreen .mlp_fullscreen .icon-contract { display: block; }

/* icon swaps driven by frame state classes */
.mlp_btn .icon-pause { display: none; }
.mlp_frame.is-playing .icon-play { display: none; }
.mlp_frame.is-playing .icon-pause { display: block; }
.mlp_btn .icon-vol-muted { display: none; }
.mlp_frame.is-muted .icon-vol { display: none; }
.mlp_frame.is-muted .icon-vol-muted { display: block; }

/* ---- Volume popover (2026-07-20): hover the mute button → vertical
   pill slider (~32×96) floats above it; drag sets MASTER volume;
   click still toggles mute. The wrap spans button + popover (the
   popover's padding-bottom bridges the 8px gap) so pointer travel
   between them never counts as a leave; JS adds .is-open with a
   250ms leave delay; :focus-within covers the offscreen native
   range (keyboard/AT). Suppressed entirely on touch (hover:none). */
.mlp_volwrap {
  position: relative;
  display: flex;
  flex-shrink: 0;
}
.mlp_volpop {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 8px; /* hover bridge over the button→slider gap */
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.mlp_volwrap.is-open .mlp_volpop,
.mlp_volwrap:focus-within .mlp_volpop {
  opacity: 1;
  pointer-events: auto;
}
.mlp_volslider {
  position: relative;
  width: 32px;
  height: 96px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  touch-action: none; /* pointer drag owns this surface */
}
.mlp_volfill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%; /* JS drives this — masterVolume × 100% */
  background: var(--base--green, #d6fd70);
}
/* offscreen-but-focusable native range — the a11y surface */
.mlp_volrange {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (hover: none) {
  .mlp_volpop { display: none; } /* touch: tap = mute toggle only */
}
@media (prefers-reduced-motion: reduce) {
  .mlp_volpop { transition: none; }
}

/* ---- Language selector + custom menu. The earlier invisible native
   <select> still mirrors state for form/API compatibility, but the user
   now interacts with a fully styled button/listbox on every device. ---- */
.mlp_selectwrap {
  position: relative;
  display: block;
  padding: 0;
  border-radius: 5rem;
  background: var(--bg-color--bg-green, #d6fd70);
  color: var(--grey--grey-900, #191815);
  font-family: var(--_typography---font-family--alternate, Geistmono, Arial, sans-serif);
  font-size: 0.8rem;
  white-space: nowrap;
}
.mlp_select_trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.45rem 0.95rem;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: inherit;
  cursor: pointer;
}
.mlp_select_trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.mlp_select_current { display: none; }
.mlp_select_sound-prompt { display: none; }
.mlp_select_chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 auto;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mlp_select_chevron svg {
  width: 100%;
  height: 100%;
}
.mlp_selectwrap.is-open .mlp_select_chevron {
  transform: rotate(180deg);
}
.mlp_select {
  display: none;
}

.mlp_select_menu {
  position: absolute;
  left: var(--mlp-menu-left, 0);
  bottom: calc(100% + 0.55rem);
  z-index: 40;
  width: var(--mlp-menu-width, max(100%, 16rem));
  max-height: var(--mlp-menu-max-height, 18rem);
  padding: 0.375rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  border: 1px solid var(--mlp-menu-border, rgba(255, 255, 255, 0.12));
  border-radius: 1rem;
  background: var(--mlp-menu-bg, #191815);
  color: var(--mlp-menu-fg, #fff);
  box-shadow:
    0 1.25rem 3.5rem rgba(0, 0, 0, 0.28),
    0 0.25rem 0.8rem rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.45rem) scale(0.98);
  transform-origin: left bottom;
  transition:
    opacity 180ms ease-out,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 180ms;
}
.mlp_selectwrap.is-open .mlp_select_menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.mlp_select_option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.mlp_select_option:hover,
.mlp_select_option:focus-visible {
  outline: none;
  background: var(--mlp-menu-hover, rgba(255, 255, 255, 0.1));
}
.mlp_select_option.is-selected {
  background: var(--base--green, #d6fd70);
  color: var(--grey--grey-900, #191815);
}
.mlp_select_option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mlp_select_option-check {
  flex: 0 0 auto;
  opacity: 0;
}
.mlp_select_option.is-selected .mlp_select_option-check {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .mlp_select_chevron,
  .mlp_select_menu,
  .mlp_select_option {
    transition: none;
  }
}

/* ---- Progress: labeled native range, 4px lime bar, no outline
   (2026-07-20 Mena: stroke removed, line weight up; supersedes the
   earlier bright-frames outline ledger note).
   Progress fill = background gradient driven by --mlp-p (JS). ---- */
.mlp_progress {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 0.42rem;
  width: auto;
  height: 16px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  --mlp-p: 0%;
}
.mlp_progress::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background:
    linear-gradient(to right,
      var(--base--green, #d6fd70) var(--mlp-p),
      rgba(255, 255, 255, 0.28) var(--mlp-p));
}
.mlp_progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--base--green, #d6fd70);
}
.mlp_progress::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}
.mlp_progress::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--base--green, #d6fd70);
}
.mlp_progress::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--base--green, #d6fd70);
}
.mlp_progress:focus-visible {
  outline: 2px solid var(--base--green, #d6fd70);
  outline-offset: 4px;
}

.mlp_progress_visual {
  display: none;
  --mlp-p: 0%;
}

/* ---- "Tap for sound" pill (hero muted phase; fades out on unmute) */
/* centered in the frame + 50% larger (Mena 2026-07-20) */
.mlp_soundpill {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 12;
  transform: translate(-50%, -50%);
  padding: 0.83rem 1.65rem;
  border: 0;
  border-radius: 5rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--_typography---font-family--alternate, Geistmono, Arial, sans-serif);
  font-size: 1.28rem;
  white-space: nowrap;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mlp_soundpill:focus-visible { outline: 2px solid var(--base--green, #d6fd70); outline-offset: 2px; }
.mlp_soundpill.is-gone {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(4px) scale(0.82);
  pointer-events: none;
}

@media (max-width: 767px) {
  /* bottom padding 0.8rem → 1.4rem: same ~10px controls raise */
  .mlp_controls { padding: 1.6rem 0.75rem 1.4rem; gap: 0.4rem; }
  .mlp_topleft { top: 0.7rem; left: 0.85rem; gap: 0.2rem; }
  .mlp_title { font-size: 0.95rem; }
  .mlp_lang { font-size: 0.75rem; }
  .mlp_progress { left: 0.65rem; right: 0.65rem; bottom: 0.15rem; }
  .mlp_selectwrap { padding: 0.38rem 0.75rem; font-size: 0.72rem; }
  /* pill is frame-centered at ALL widths now (2026-07-20) — slightly
     smaller on phones so it doesn't dwarf the frame */
  .mlp_soundpill { font-size: 1rem; padding: 0.65rem 1.3rem; }
}

/* ============================================================
   Language pill + select re-theme (Mena 2026-07-21)
   - The language-under-the-title is now the GREEN pill.
   - The auto-language change MORPHS (hero #threshold goo) and the pill
     resizes smoothly to each language's text length.
   - The "Select language" control is no longer green: it's a neutral
     pill that flips with the theme (dark pill in light mode, white pill
     in dark mode).
   ============================================================ */

/* language pill (green): "Now playing: <Language>" — prefix regular,
   language bold; only the language morphs. Nudged down 2.5px (Mena). */
.mlp_lang {
  display: inline-flex;
  align-items: center;
  background: var(--bg-color--bg-green, #d6fd70);
  color: var(--grey--grey-900, #191815);
  border-radius: 5rem;
  padding: 0.26rem 0.72rem;
  text-shadow: none;
  overflow: hidden;
  max-width: 100%;
  margin-top: 2.5px;
}
/* higher specificity than the template's obsolete `.mlp_lang > span`
   crossfade rule (which set opacity:0 and matched this prefix span) */
.mlp_lang > .mlp_lang_prefix {
  font-weight: 400;
  white-space: nowrap;
  opacity: 1;
}
.mlp_lang_goo > span {
  font-weight: 400;
}

/* video title gooey-morphs between the per-language localized titles
   (same #threshold technique as the pill; B=2.6 for the larger type) */
.mlp_title_goo {
  display: grid;
}
.mlp_title_goo > div {
  grid-area: 1 / 1;
  opacity: 0;
}
.mlp_title_goo > div.is-on {
  opacity: 1;
}
.mlp_title_goo.is-morphing {
  filter: url(#threshold);
}
@media (prefers-reduced-motion: reduce) {
  .mlp_title_goo.is-morphing { filter: none; }
}
.mlp_lang_goo {
  position: relative;
  display: inline-grid;
  height: 1.3em;
  overflow: hidden;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}
.mlp_lang_goo.is-morphing {
  filter: url(#threshold-tight);
}
.mlp_lang_goo > span {
  grid-area: 1 / 1;
  align-self: center;
  white-space: nowrap;
  opacity: 0;
}
.mlp_lang_goo > span.is-on { opacity: 1; }
.mlp_lang_sizer {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .mlp_lang_goo { transition: none; }
  .mlp_lang_goo.is-morphing { filter: none; }
}

/* select pill — neutral, theme-adaptive (green moved to the lang pill) */
.mlp_selectwrap {
  --mlp-menu-bg: #191815;
  --mlp-menu-fg: #fff;
  --mlp-menu-border: rgba(255, 255, 255, 0.12);
  --mlp-menu-hover: rgba(255, 255, 255, 0.1);
  background: #191815;
  color: #fff;
}
[data-theme="dark"] .mlp_selectwrap {
  --mlp-menu-bg: #f5f4ef;
  --mlp-menu-fg: #191815;
  --mlp-menu-border: rgba(25, 24, 21, 0.12);
  --mlp-menu-hover: rgba(25, 24, 21, 0.08);
  background: #fff;
  color: #191815;
}

/* ============================================================
   Touch layout: controls stay inside the 16:9 media frame.
   The touch targets remain large, but the gradient chrome overlays
   the footage instead of adding a separate dock below it.
   Desktop keeps the original overlay chrome unchanged.
   ============================================================ */
@media (max-width: 991px) {
  .mlp {
    width: min(1060px, calc(100% - 2rem));
  }

  .mlp_topleft {
    max-width: calc(100% - 2rem);
  }

  /* The active language now lives in the selector on touch layouts,
     removing the extra pill underneath the localized title. Keep it
     measurable so its desktop morph width remains correct after resize. */
  .mlp_lang {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
  }

  .mlp_frame {
    --mlp-touch-controls-h: 4.125rem;
    aspect-ratio: 16 / 9;
    display: block;
    background: #0d0d0d;
  }

  .mlp_viewport {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    flex: none;
  }

  .mlp_controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    height: var(--mlp-touch-controls-h);
    min-height: var(--mlp-touch-controls-h);
    flex: none;
    gap: 0.25rem;
    /* right padding 0.5rem → 4rem (2026-09-01, audit G7): the fixed theme
       toggle floats over the frame's bottom-right corner on touch layouts;
       keep the volume button clear of it so it stays tappable */
    padding: 0.25rem 4rem 1.125rem 0.5rem;
    background:
      linear-gradient(
        to top,
        rgba(13, 13, 13, 0.94) 0%,
        rgba(13, 13, 13, 0.72) 68%,
        rgba(13, 13, 13, 0) 100%
      );
    opacity: 1;
    transform: none;
  }

  .mlp_spacer {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
  }

  .mlp_btn {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
  }

  .mlp_btn:hover {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: none;
  }

  .mlp_btn svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .mlp_selectwrap,
  [data-theme="dark"] .mlp_selectwrap {
    --mlp-menu-bg: #191815;
    --mlp-menu-fg: #fff;
    --mlp-menu-border: rgba(255, 255, 255, 0.12);
    --mlp-menu-hover: rgba(255, 255, 255, 0.1);
    height: 2.75rem;
    min-height: 2.75rem;
    min-width: 0;
    max-width: 14rem;
    flex: 0 1 14rem;
    padding: 0;
    overflow: visible;
    background: var(--bg-color--bg-green, #d6fd70);
    color: var(--grey--grey-900, #191815);
    box-shadow: none;
  }

  .mlp_select_trigger {
    height: 100%;
    min-height: 2.75rem;
    gap: 0.25rem;
    padding: 0 0.5rem;
  }

  .mlp_select_option {
    min-height: 2.75rem;
    white-space: normal;
  }

  .mlp_select_label {
    display: block;
    min-width: 0;
    white-space: normal;
  }

  .mlp_select_prompt {
    display: none;
  }

  .mlp_select_current {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    min-width: 0;
  }

  .mlp_frame:not(.has-sound-activated) .mlp_select_sound-prompt {
    display: inline;
    white-space: nowrap;
  }

  .mlp_frame:not(.has-sound-activated) .mlp_select_current-text,
  .mlp_frame:not(.has-sound-activated) .mlp_select_chevron {
    display: none;
  }

  .mlp_select_status-icon {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .mlp_select_status-icon svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .mlp_select_current-text {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
  }

  .mlp_select_current-flag {
    flex: 0 0 auto;
    line-height: 1;
  }

  .mlp_select_current-name {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.72rem;
    line-height: 1.05;
    text-align: left;
  }

  .mlp_select_option-label {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  .mlp_volwrap {
    flex: 0 0 2.75rem;
  }

  .mlp.has-frame-fullscreen .mlp_fullscreen {
    display: flex;
  }

  /* The controls read top-to-bottom: buttons first, then the seek rail.
     The native range owns only the reserved strip beneath the buttons,
     so seeking never steals their taps. */
  .mlp_progress {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    width: 100%;
    height: 1.125rem;
    cursor: pointer;
    opacity: 0;
  }

  .mlp_progress::-webkit-slider-runnable-track {
    background: transparent;
  }

  .mlp_progress::-webkit-slider-thumb {
    background: transparent;
  }

  .mlp_progress::-moz-range-track,
  .mlp_progress::-moz-range-progress {
    background: transparent;
  }

  .mlp_progress::-moz-range-thumb {
    background: transparent;
  }

  .mlp_progress_visual {
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.45rem;
    z-index: 13;
    display: block;
    height: 0.25rem;
    border-radius: 999px;
    pointer-events: none;
    background:
      linear-gradient(
        to right,
        var(--base--green, #d6fd70) var(--mlp-p),
        rgba(255, 255, 255, 0.42) var(--mlp-p)
      );
  }

  .mlp_progress_visual::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--mlp-p);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--base--green, #d6fd70);
    transform: translate(-50%, -50%);
  }

  .mlp_progress:focus-visible {
    opacity: 1;
    outline-offset: -0.25rem;
  }

  .mlp_soundpill {
    display: none;
  }

  /* The desktop-only center prompt keeps its original enlarged hit area. */
  .mlp_soundpill::before {
    content: "";
    position: absolute;
    inset: -0.25rem 0;
  }
}

@media (max-width: 479px) {
  .mlp {
    width: min(1060px, calc(100% - 1rem));
  }
}

/* Fullscreen keeps the custom multi-language audio and controls together.
   Video-only iOS fullscreen is intentionally not used. */
.mlp_frame:fullscreen,
.mlp_frame:-webkit-full-screen,
.mlp_frame.is-fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  background: #0d0d0d;
}

.mlp_frame:fullscreen .mlp_viewport,
.mlp_frame:-webkit-full-screen .mlp_viewport,
.mlp_frame.is-fullscreen .mlp_viewport {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  aspect-ratio: auto;
}

.mlp_frame:fullscreen video,
.mlp_frame:-webkit-full-screen video,
.mlp_frame.is-fullscreen video {
  object-fit: contain;
}

.mlp_frame:fullscreen .mlp_controls,
.mlp_frame:-webkit-full-screen .mlp_controls,
.mlp_frame.is-fullscreen .mlp_controls {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  height: auto;
  min-height: calc(3.5rem + env(safe-area-inset-bottom));
  flex: 0 0 auto;
  gap: 0.25rem;
  padding:
    0.375rem
    max(0.5rem, env(safe-area-inset-right))
    calc(0.375rem + env(safe-area-inset-bottom))
    max(0.5rem, env(safe-area-inset-left));
  background: #191815;
  opacity: 1;
  transform: none;
}

/* In fullscreen the controls intentionally become a safe-area dock, so the
   progress rail returns to the bottom of the media viewport. */
.mlp_frame:fullscreen .mlp_progress,
.mlp_frame:-webkit-full-screen .mlp_progress,
.mlp_frame.is-fullscreen .mlp_progress {
  bottom: 0;
}

.mlp_frame:fullscreen .mlp_progress_visual,
.mlp_frame:-webkit-full-screen .mlp_progress_visual,
.mlp_frame.is-fullscreen .mlp_progress_visual {
  bottom: 0.25rem;
}

/* ── Layout-shift reservation (2026-08-19, W1-9) ──────────────────────
   #hero-mlplayer is empty in the HTML; mlplayer.js fills it at
   DOMContentLoaded, growing it 0 -> 616px and shoving every section
   below it down (CLS 0.21-0.28, failing). This reserves exactly the box
   the player will occupy and REMOVES ITSELF the instant the player
   mounts, because :empty stops matching. Width formula and 16:9 ratio
   are the same ones .mlp already uses, verified at two viewport widths.
   Settled page is byte-identical: same docH, same section tops. */
#hero-mlplayer:empty::before {
  content: "";
  display: block;
  width: min(1060px, calc(100% - 3rem));
  aspect-ratio: 16 / 9;
  margin: 1.25rem auto 0;
}