.olyplayer-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
    cursor: pointer; /* backdrop is clicable */
  }
  .olyplayer-modal.show { opacity: 1; pointer-events: auto; }

  .olyplayer-modal-content{
    position: relative;
    background:#000;
    border-radius:12px;
    padding:0;
    width:min(92vw, 960px);     /* responsive width */
    aspect-ratio:16/9;          /* keep video shape */
    max-height:80vh;            /* don’t exceed screen height */
    overflow:hidden;
    cursor: auto;               /* player area cursor behaves normally */
  }

  /* Fill the box with the player */
  .olyplayer-modal-content .video-js,
  .olyplayer-modal-content iframe{
    position:absolute; 
    inset:0;
    width:100%; 
    height:100%;
  }

  /* Keep close button accessible on phones */
  .olyplayer-close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 28px;
    padding: 4px 12px;
    line-height: 1;
    color: #fff;
    background: rgba(0,0,0,0.6);
    border-radius: 999px;
    cursor: pointer;
  }

  /* The backdrop can safely center it as you had */
  .olyplayer-modal{ padding: 2vw; } /* small breathing room on tiny screens */

  iframe, video.video-js, video.inline-video { max-width: 100%; max-height: 100%; }

  /* NEW: overlayed play for inline MP4 */
  .inline-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);transition:opacity .2s ease;z-index:2}
  .inline-play-overlay.hidden{opacity:0;pointer-events:none}
  .inline-play-button{width:76px;height:76px;border-radius:50%;background:rgba(0,0,0,.65);border:2px solid #fff;display:flex;align-items:center;justify-content:center}
  .inline-play-button::after{content:"";display:block;margin-left:4px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
  .inline-video-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16/9;   /* responsive height */
    background:#000;
    display:block;
    line-height:0;       /* remove inline gap */
  }

  /* Make the <video> (and its poster) fill the box */
    .inline-video-wrap > video.inline-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;   /* use 'contain' if you prefer pillarboxing */
  }
  /* Non-JS fallback so posters still scale */
  video.inline-video{ width:100%; height:auto; display:block; }


  /* 16:9 responsive box */
  .responsive-16x9{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
  }
  .responsive-16x9 > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }