/* One compact control strip in enlarged phone/touch layouts, in either orientation. */
@media (max-width:700px), (hover:none) and (pointer:coarse) {
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) {
    --fullscreen-control-size:40px;
    --fullscreen-strip-padding:max(6px,env(safe-area-inset-left));
  }

  /* Landscape phones use the original controls after the 700px breakpoint. */
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) > .hero-film-controls-v23 {
    grid-template-columns:40px 40px minmax(44px,1fr) auto 40px 56px 40px;
    grid-template-rows:40px;
    align-items:center;
    gap:6px;
    min-height:48px;
    padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) var(--fullscreen-strip-padding);
    background:#000;
  }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) > .hero-film-controls-v23 > * {
    grid-column:auto;
    grid-row:1;
    min-width:0;
    margin:0;
  }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) .hero-film-controls-v23 :is(#hero-trailer-seek,#hero-trailer-volume) {
    display:block;
    width:100%;
    min-width:0;
    height:40px;
  }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) .hero-film-controls-v23 #hero-trailer-time {
    font:10px/1.2 var(--mono);
    white-space:nowrap;
  }

  /* Portrait phones keep the same bound controls, flattened into one flex row. */
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) > #hero-mobile-ui:not([hidden]) {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:3px;
    min-height:48px;
    padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) var(--fullscreen-strip-padding);
    background:#000;
    overflow:visible;
  }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) #hero-mobile-ui .hero-mobile-dock {
    display:contents;
  }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) #hero-mobile-ui .hero-mobile-audio {
    order:3;
    flex:0 0 40px;
    width:40px;
    min-width:0;
  }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) #hero-mobile-ui #hero-trailer-play { order:1; }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) #hero-mobile-ui #hero-trailer-restart { order:2; }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) #hero-mobile-ui #hero-trailer-expand { order:5; }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) #hero-mobile-ui #hero-mobile-more { order:6; }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) #hero-mobile-ui .hero-mobile-progress {
    order:4;
    flex:1 1 44px;
    min-width:44px;
    height:40px;
    padding:0;
    background:transparent;
  }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) #hero-mobile-ui #hero-trailer-seek {
    height:40px;
    min-height:40px;
  }

  /* More opens above the strip; opening it never adds another bottom row. */
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) #hero-mobile-ui #hero-mobile-details {
    position:absolute;
    z-index:4;
    right:max(6px,env(safe-area-inset-right));
    bottom:calc(100% + 6px);
    width:230px;
    max-width:calc(100% - 12px);
    padding:12px;
    border:1px solid #fff0d340;
    border-radius:10px;
    background:#000;
    box-shadow:0 4px 20px #0006;
  }

  /* Fixed icon widths prevent the Play label expanding across the whole film. */
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) :is(.hero-film-controls-v23,#hero-mobile-ui) :is(#hero-trailer-play,#hero-trailer-restart,#hero-trailer-sound,#hero-trailer-expand,#hero-mobile-more,#hero-trailer-enable-sound) {
    flex:0 0 40px;
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    margin:0;
    padding:9px;
    gap:0;
    border-radius:8px;
  }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) :is(.hero-film-controls-v23,#hero-mobile-ui) :is(button svg,.hero-sound-disc-v53) {
    width:20px;
    height:20px;
  }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) :is(.hero-film-controls-v23,#hero-mobile-ui) :is([data-control-label],.hero-sound-copy-v53) {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
  }
  body #main #hero-trailer-player:is(:fullscreen,[data-inline-expanded="true"]) #hero-trailer-video {
    max-height:100%;
  }
}