/* Locked YouTube player (assets/js/yt-lock.js) */
.yt-lock{position:relative;width:100%;height:100%;background:#000;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  --plyr-color-main:var(--sa,#0c6878);--plyr-video-control-background-hover:var(--sa,#0c6878);--plyr-range-fill-background:var(--sa,#0c6878)}
.yt-lock-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.yt-lock .plyr{height:100%;width:100%}
.yt-lock .plyr__video-wrapper{overflow:hidden;height:100%}
/* the YouTube frame itself can never be clicked or tapped (Plyr's controls sit on top) */
.yt-lock iframe{pointer-events:none!important}
/* make the frame twice as tall and centre it: YouTube's title bar, channel logo, share / "Watch on YouTube" and the
   "More videos" strip fall outside the box — only the picture shows */
.yt-lock .plyr__video-embed iframe,.yt-lock .plyr__video-wrapper iframe{top:-50%!important;height:200%!important}
/* before play and after the video ends: our cover picture, not YouTube's end screen */
.yt-lock .plyr--stopped .plyr__poster,.yt-lock.is-ended .plyr__poster{opacity:1!important}
.yt-lock .plyr__poster{background-size:cover}
.yt-lock .plyr--full-ui.plyr--video .plyr__control--overlaid{width:68px;height:68px;padding:0;display:grid;place-items:center;background:var(--sa,#0c6878);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.yt-lock .plyr__control--overlaid svg{left:2px;width:24px;height:24px}
.yt-lock .plyr__controls{padding-top:28px}
.yt-lock .plyr__menu__container{border-radius:6px}
@media (max-width:560px){.yt-lock .plyr__controls{padding:18px 6px 6px}.yt-lock .plyr__controls .plyr__control{padding:6px}.yt-lock .plyr__volume{display:none}}

/* quality button + menu (next to the settings gear) */
.yt-lock .ytq{position:relative;display:flex;align-items:center}
.yt-lock .ytq[hidden]{display:none}
.yt-lock .ytq-btn{display:inline-flex;align-items:flex-start;gap:1px;font-size:13px;font-weight:600;line-height:1;padding:7px 8px}
.yt-lock .ytq-hd{font-size:8.5px;font-weight:800;line-height:1;padding:1px 2px;border-radius:2px;background:#e11d48;color:#fff;margin:-3px 0 0 1px}
.yt-lock .ytq-menu{position:absolute;right:0;bottom:calc(100% + 10px);z-index:5;min-width:150px;padding:6px;border-radius:6px;background:rgba(255,255,255,.97);box-shadow:0 6px 24px rgba(0,0,0,.25);color:#1f2937}
.yt-lock .ytq-menu[hidden]{display:none}
.yt-lock .ytq-h{padding:6px 10px 8px;margin-bottom:4px;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}
.yt-lock .ytq-menu button{display:flex;align-items:center;gap:6px;width:100%;padding:7px 10px 7px 26px;border:0;border-radius:4px;background:none;color:inherit;font:inherit;font-size:13.5px;text-align:left;cursor:pointer;position:relative}
.yt-lock .ytq-menu button:hover{background:#f1f5f9}
.yt-lock .ytq-menu button.on{font-weight:700;color:var(--sa,#0c6878)}
.yt-lock .ytq-menu button.on::before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:var(--sa,#0c6878)}
.yt-lock .ytq-menu small{color:#6b7280;font-weight:400}.yt-lock .ytq-menu sup{font-size:9px;font-weight:800;color:#e11d48}

/* ---- Start screen exactly like YouTube's: the video picture (not zoomed) and YouTube's red button, same shape and size —
   no fade, no animation. It stays until YouTube is really playing, then disappears at once (so nothing flashes behind it).
   YouTube's own start screen is never used: it would show the title, channel and "Watch on YouTube". ---- */
.yt-lock .yt-lock-ph{display:none}
.yt-lock .plyr__poster{display:block!important;opacity:1!important;transition:none!important;background-size:cover;z-index:1}
.yt-lock.yt-started .plyr__poster{opacity:0!important;visibility:hidden}
/* before play: only the picture — no logo / button drawn; the whole picture is the (invisible) play button */
.yt-lock .plyr--full-ui.plyr--video .plyr__control--overlaid.ytb{left:0;top:0;width:100%;height:100%;padding:0;border-radius:0;background:transparent!important;box-shadow:none!important;opacity:1!important;transition:none!important;transform:none!important;cursor:pointer}
.yt-lock .plyr__control--overlaid.ytb .ytb-ic{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;transition:none}
.yt-lock .plyr__control--overlaid.ytb .ytb-ic svg{position:static;width:34px;height:34px;margin-left:3px;display:block}
.yt-lock .plyr__control--overlaid.ytb:hover .ytb-ic{background:rgba(0,0,0,.72)}
@media (max-width:560px){.yt-lock .plyr__control--overlaid.ytb .ytb-ic{width:56px;height:56px;margin:-28px 0 0 -28px}.yt-lock .plyr__control--overlaid.ytb .ytb-ic svg{width:28px;height:28px}}
.yt-lock .plyr__control--overlaid.ytb:hover,.yt-lock .plyr__control--overlaid.ytb:focus{background:transparent!important}
.yt-lock.yt-started .plyr__control--overlaid,.yt-lock.yt-go .plyr__control--overlaid{display:none!important}
/* ---- menus (speed, quality) never taller than the video: they scroll inside on phones ---- */
.yt-lock .plyr__menu__container > div{max-height:var(--yt-menu-h,420px)!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin}
.yt-lock .ytq-menu{max-height:var(--yt-menu-h,420px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media (max-width:560px){
  .yt-lock .plyr__menu__container .plyr__control{padding:5px 10px 5px 8px;font-size:13px}
  .yt-lock .plyr__menu__container [role=menu]{padding:4px}
  .yt-lock .ytq-menu{min-width:128px;padding:4px}.yt-lock .ytq-menu button{padding:5px 8px 5px 24px;font-size:13px}.yt-lock .ytq-h{padding:4px 8px 6px;margin-bottom:2px}
}

/* phone full screen held upright (iPhone, or when the screen cannot be locked): the player is turned 90° to fill it */
.yt-lock .plyr.yt-rot{position:fixed!important;top:0!important;left:100%!important;width:var(--yt-w,100vh)!important;height:var(--yt-h,100vw)!important;max-width:none!important;max-height:none!important;
  transform-origin:0 0;transform:rotate(90deg);z-index:2147483000;margin:0!important;border-radius:0!important}
.yt-lock .plyr.yt-rot .plyr__video-wrapper{height:100%!important;padding-bottom:0!important}
.yt-lock:fullscreen{width:100%;height:100%;background:#000}
.yt-lock:fullscreen .plyr:not(.yt-rot){width:100%;height:100%}
.yt-lock:fullscreen .plyr:not(.yt-rot) .plyr__video-wrapper{height:100%!important;padding-bottom:0!important}