/* Approved mobile artwork, with semantic HTML and working control overlays.
   The desktop hero DOM and styles remain untouched above this breakpoint. */
.approved-mobile-hero { display: none !important; }
@media (width < 1024px) {
  html body main .mh-hero { display: none !important; }
  html body main .approved-mobile-hero {
    display: flex !important; justify-content: center; position: relative;
    width: 100%; height: auto; min-height: 0; max-height: 100svh;
    padding: 0; margin: 0; background: #031221; overflow: clip;
    isolation: isolate; box-sizing: border-box;
  }
  .approved-mobile-hero .amh-stage {
    position: relative; flex: none; margin: 0;
    width: min(100%, var(--amh-vh-width));
    width: min(100%, var(--amh-svh-width));
    aspect-ratio: var(--amh-ratio); max-height: 100svh;
  }
  .approved-mobile-hero .amh-image {
    display: block; position: static; width: 100%; height: auto;
    max-width: 100%; margin: 0; padding: 0; border: 0;
    transform: none; opacity: 1; filter: none;
  }
  .approved-mobile-hero .amh-sr {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
  }
  .approved-mobile-hero .amh-control {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--w); height: var(--h); padding: 0; margin: 0;
    display: block; border: 0; background: transparent; border-radius: 7px;
    cursor: pointer; z-index: 2; color: #fff; text-decoration: none;
    -webkit-tap-highlight-color: #5fcfff44; touch-action: manipulation;
  }
  .approved-mobile-hero .amh-control:focus-visible {
    outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #0062ff;
  }
  .approved-mobile-hero .amh-control:active { background: #67cfff22; }
  /* The approved players visual omitted the menu glyph. Supply the live icon. */
  .approved-mobile-hero .amh-menu-icon { display: grid; place-content: center; gap: 5px; }
  .approved-mobile-hero .amh-menu-icon i { display: block; width: 22px; height: 2px; background: white; border-radius: 2px; }
  body.amh-at-top #header { visibility: hidden !important; pointer-events: none !important; }
  body:has(.approved-mobile-hero) #header .nav-bar,
  body:has(.approved-mobile-hero) #header .nav-cta { display: none !important; }
  body:has(.approved-mobile-hero) #header .menu-toggle { display: flex !important; }
}