/* OFFCUT cinematic player — custom controls in the OFFCUT visual system */
:root { --offcut-player-red:#e50914; --offcut-player-red-hover:#ff2833; }
.watch-screen {
  position:fixed; inset:0; z-index:240; display:none; flex-direction:column;
  color:#f8f8f8; background:#030303; overflow:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.watch-screen.open { display:flex; }
.watch-screen:fullscreen { width:100vw; height:100vh; background:#030303; }
.watch-screen:fullscreen .watch-screen-main { width:100vw; height:100vh; }
.watch-screen:fullscreen .watch-player-slot,.watch-screen:fullscreen .offcut-player-shell { width:100vw; height:100vh; }
.watch-screen-head {
  display:none !important;
}
.watch-brand { display:flex; align-items:center; gap:9px; min-width:0; }
.watch-brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; background:var(--offcut-player-red); color:#fff; font-weight:1000; font-size:22px; font-style:italic; line-height:1; transform:skewX(-7deg); text-shadow:0 1px 6px #0005; }
.watch-brand-name { display:flex; flex-direction:column; gap:0; color:#f7f7f7; font-size:13px; font-weight:950; letter-spacing:1.5px; line-height:1.1; }
.watch-brand-name small { color:#8d8d8d; font-size:7px; font-weight:800; letter-spacing:2px; margin-top:3px; }
.watch-header-status { display:flex; align-items:center; gap:7px; margin-left:11px; color:#888; font-size:9px; font-weight:800; letter-spacing:1.8px; }
.watch-live-dot { width:6px; height:6px; border-radius:50%; background:var(--offcut-player-red); box-shadow:0 0 12px #e5091455; }
.watch-close { display:grid; place-items:center; margin-left:auto; width:37px; height:37px; flex:0 0 37px; border:1px solid #343434; border-radius:50%; background:#141414; color:#fff; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.watch-close:hover { background:#282828; border-color:#666; transform:scale(1.04); }
.watch-close svg { width:17px; height:17px; stroke:currentColor; stroke-width:2; stroke-linecap:round; fill:none; }
.watch-close:focus-visible,.offcut-player-button:focus-visible,.offcut-volume:focus-visible,.offcut-seek:focus-visible,.offcut-subtitles-menu button:focus-visible { outline:2px solid #ff4650; outline-offset:3px; }
.watch-screen-main { position:relative; display:flex; flex:1; min-height:0; padding:0; flex-direction:column; align-items:stretch; justify-content:center; background:#020202; }
.watch-player-slot { display:flex; flex:1; min-height:0; width:100%; height:100%; align-items:center; justify-content:center; }
.offcut-player-shell { position:relative; isolation:isolate; display:flex; width:100%; height:100%; min-height:0; overflow:hidden; flex-direction:column; align-items:stretch; justify-content:center; outline:none; background:#020202; }
.offcut-video-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#020202; cursor:pointer; }
.offcut-watch-video { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; background:#020202; outline:none; }
.offcut-player-controls { position:absolute; z-index:6; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:13px; padding:78px clamp(18px,3.2vw,48px) max(22px,env(safe-area-inset-bottom)); background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.27) 19%,rgba(0,0,0,.78) 64%,rgba(0,0,0,.96) 100%); opacity:1; transform:translateY(0); transition:opacity .22s ease,transform .22s ease; }
.offcut-player-shell.controls-idle .offcut-player-controls { opacity:0; transform:translateY(10px); pointer-events:none; }
.offcut-player-shell.controls-idle { cursor:none; }
.offcut-exit-button { position:absolute; z-index:8; top:clamp(12px,2.4vw,28px); right:clamp(12px,2.4vw,28px); opacity:1; pointer-events:auto; transition:opacity .2s ease,background .16s ease,border-color .16s ease; }
.offcut-player-shell.controls-idle .offcut-exit-button { opacity:0; pointer-events:none; }
.offcut-big-play { position:absolute; z-index:5; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); display:grid; place-items:center; width:74px; height:74px; border:1px solid rgba(255,255,255,.32); border-radius:50%; color:#fff; background:rgba(229,9,20,.91); box-shadow:0 12px 45px #0008,0 0 0 9px #ffffff0b; transition:opacity .18s ease,transform .18s ease,background .18s ease; }
.offcut-big-play:hover { background:var(--offcut-player-red-hover); transform:translate(-50%,-50%) scale(1.06); }
.offcut-big-play svg { width:28px; height:28px; fill:currentColor; }
.offcut-player-shell.is-playing .offcut-big-play { opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.88); }
.offcut-player-shell.is-loading:after { content:""; position:absolute; z-index:4; top:calc(50% - 18px); left:calc(50% - 18px); width:36px; height:36px; border-radius:50%; border:3px solid #ffffff30; border-top-color:var(--offcut-player-red); animation:offcut-spin .8s linear infinite; pointer-events:none; }
.offcut-player-shell.is-playing.is-loading:after { display:block; }
@keyframes offcut-spin { to { transform:rotate(360deg); } }
.offcut-timeline { position:relative; width:100%; height:16px; display:flex; align-items:center; cursor:pointer; touch-action:pan-y; }
.offcut-timeline-track { position:absolute; left:0; right:0; height:4px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.28); transition:height .13s ease; }
.offcut-buffer-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(255,255,255,.34); }
.offcut-played-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--offcut-player-red); }
.offcut-seek { position:absolute; z-index:2; inset:0; width:100%; height:16px; margin:0; padding:0; min-width:0; border:0; border-radius:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; outline:none; }
.offcut-seek::-webkit-slider-runnable-track { height:16px; background:transparent; }
.offcut-seek::-moz-range-track { height:16px; background:transparent; }
.offcut-seek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:11px; height:11px; margin-top:2.5px; border:2px solid #fff; border-radius:50%; background:var(--offcut-player-red); box-shadow:0 0 0 3px #0005; opacity:0; transition:opacity .12s ease,transform .12s ease; }
.offcut-seek::-moz-range-thumb { width:9px; height:9px; border:2px solid #fff; border-radius:50%; background:var(--offcut-player-red); box-shadow:0 0 0 3px #0005; opacity:0; }
.offcut-timeline:hover .offcut-timeline-track { height:6px; }
.offcut-timeline:hover .offcut-seek::-webkit-slider-thumb,.offcut-seek:focus-visible::-webkit-slider-thumb { opacity:1; transform:scale(1.08); }
.offcut-seek:focus-visible::-moz-range-thumb { opacity:1; }
.offcut-control-bar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(12px,2vw,30px); min-width:0; }
.offcut-left-controls,.offcut-center-controls,.offcut-right-controls { display:flex; align-items:center; gap:clamp(6px,1vw,13px); min-width:0; }
.offcut-left-controls { justify-content:flex-start; }
.offcut-center-controls { justify-content:center; gap:clamp(12px,2vw,25px); }
.offcut-right-controls { justify-content:flex-end; }
.offcut-player-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:34px; min-height:34px; padding:0 7px; border:1px solid transparent; border-radius:8px; background:transparent; color:#e7e7e7; transition:background .16s ease,color .16s ease,border-color .16s ease; flex:0 0 auto; }
.offcut-player-button:hover { background:#ffffff12; color:#fff; }
.offcut-player-button:active { background:#ffffff1b; }
.offcut-player-button svg { display:block; width:21px; height:21px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.offcut-player-button.primary-control { width:42px; height:42px; border-radius:50%; background:#fff; color:#090909; }
.offcut-player-button.primary-control:hover { background:#f2f2f2; color:var(--offcut-player-red); }
.offcut-player-button.primary-control svg { width:20px; height:20px; fill:currentColor; stroke:none; }
.offcut-skip-button { position:relative; width:35px; height:35px; padding:0; }
.offcut-skip-button svg { width:29px; height:29px; }
.offcut-skip-button span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:1px; color:currentColor; font-size:8px; font-weight:900; letter-spacing:-.2px; }
.offcut-volume-wrap { display:flex; align-items:center; gap:7px; }
.offcut-volume { appearance:none; -webkit-appearance:none; width:clamp(52px,6vw,90px); min-width:0; height:4px; margin:0; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.28); accent-color:var(--offcut-player-red); cursor:pointer; }
.offcut-volume::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:10px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 0 2px #0007; }
.offcut-volume::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 0 2px #0007; }
.offcut-time { display:flex; align-items:center; gap:6px; white-space:nowrap; color:#e9e9e9; font-variant-numeric:tabular-nums; font-size:11px; font-weight:650; }
.offcut-time .separator { color:#686868; font-weight:400; }
.offcut-time #offcutDuration { color:#a4a4a4; font-weight:500; }
.offcut-player-title-block { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; max-width:100%; gap:4px; text-align:center; }
.offcut-player-title-block small { color:#e65b61; font-size:8px; font-weight:900; letter-spacing:2px; line-height:1; }
.offcut-player-title-block strong { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:clamp(12px,1.15vw,15px); font-weight:850; letter-spacing:-.2px; text-shadow:0 1px 12px #0008; }
.watch-subtitles-slot:empty { display:none; }
.offcut-subtitles-widget { position:relative; z-index:20; display:flex; align-items:center; font-family:inherit; }
.offcut-subtitles-toggle { display:inline-flex; position:relative; align-items:center; justify-content:center; width:38px; height:38px; min-width:38px; min-height:38px; padding:0; border:1px solid transparent; border-radius:8px; color:#e8e8e8; background:transparent; cursor:pointer; transition:background .16s ease,color .16s ease,border-color .16s ease; }
.offcut-subtitles-toggle:hover { background:#ffffff12; border-color:#ffffff12; color:#fff; }
.offcut-subtitles-toggle.active { color:#fff; background:#e5091420; border-color:#e509145f; }
.offcut-subtitles-toggle svg { display:block; width:21px; height:21px; flex:0 0 21px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.offcut-subtitles-toggle .offcut-subtitle-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.offcut-subtitles-menu { position:absolute; right:0; bottom:calc(100% + 13px); top:auto; min-width:190px; max-width:min(270px,78vw); padding:8px; border:1px solid #373737; border-radius:11px; background:rgba(18,18,18,.98); box-shadow:0 18px 50px #000b; backdrop-filter:blur(16px); display:grid; gap:3px; }
.offcut-subtitles-menu[hidden] { display:none!important; }
.offcut-subtitles-menu-title { padding:8px 10px 11px; margin-bottom:3px; color:#919191; border-bottom:1px solid #292929; font-size:9px; font-weight:850; letter-spacing:1.6px; text-transform:uppercase; }
.offcut-subtitles-menu button { display:flex; align-items:center; justify-content:space-between; width:100%; gap:14px; padding:10px 11px; text-align:left; border:0; border-radius:7px; background:transparent; color:#e6e6e6; font-size:11px; cursor:pointer; transition:background .13s ease,color .13s ease; }
.offcut-subtitles-menu button:hover { background:#242424; color:#fff; }
.offcut-subtitles-menu button[aria-checked="true"] { background:#2c1012; color:#fff; font-weight:800; }
.offcut-subtitles-menu button[aria-checked="true"]::after { content:'✓'; color:#ff4b55; font-size:13px; font-weight:900; }
.watch-error { position:absolute; z-index:30; left:50%; bottom:115px; transform:translateX(-50%); width:min(560px,calc(100% - 32px)); padding:10px 14px; text-align:center; color:#ffd5d5; background:#260c0eeb; border:1px solid #76242a; border-radius:9px; font-size:12px; line-height:1.5; pointer-events:none; }
.watch-error:empty { display:none; }
.watch-screen:fullscreen .offcut-player-controls { padding-bottom:max(22px,env(safe-area-inset-bottom)); }
.watch-screen:fullscreen .offcut-watch-video { max-width:100vw; max-height:100vh; }

.offcut-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:900px) {
  .offcut-player-controls { padding:62px 20px max(17px,env(safe-area-inset-bottom)); gap:10px; }
  .offcut-control-bar { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; }
  .offcut-left-controls,.offcut-center-controls,.offcut-right-controls { gap:5px; }
  .offcut-volume { width:42px; }
  .offcut-player-title-block { align-items:center; text-align:center; max-width:min(90%,580px); align-self:center; }
  .offcut-player-title-block strong { font-size:13px; }
  .offcut-player-button { min-width:32px; min-height:34px; padding-inline:4px; }
  .offcut-player-button.primary-control { width:41px; height:41px; }
  .offcut-skip-button { width:33px; height:34px; }
}
@media(max-width:560px) {
  .offcut-exit-button { top:10px; right:10px; width:34px; height:34px; flex-basis:34px; }
  .offcut-player-controls { padding:58px 10px max(13px,env(safe-area-inset-bottom)); gap:8px; }
  .offcut-control-bar { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:3px; }
  .offcut-left-controls,.offcut-center-controls,.offcut-right-controls { gap:1px; }
  .offcut-left-controls { justify-content:flex-start; }
  .offcut-center-controls { gap:4px; }
  .offcut-right-controls { justify-content:flex-end; }
  .offcut-player-button { min-width:27px; min-height:31px; padding:0 2px; }
  .offcut-player-button svg { width:18px; height:18px; }
  .offcut-player-button.primary-control { width:37px; height:37px; min-width:37px; }
  .offcut-player-button.primary-control svg { width:18px; height:18px; }
  .offcut-skip-button { width:29px; height:31px; min-width:29px; }
  .offcut-skip-button svg { width:25px; height:25px; }
  .offcut-skip-button span { font-size:7px; }
  .offcut-time { font-size:8px; gap:2px; }
  .offcut-volume-wrap { gap:0; }
  .offcut-volume { display:none; }
  .offcut-right-controls { gap:0; }
  .offcut-subtitles-toggle { width:29px; min-width:29px; height:31px; min-height:31px; }
  .offcut-subtitles-toggle svg { width:18px; height:18px; }
  .offcut-player-title-block { max-width:80%; }
  .offcut-player-title-block small { font-size:7px; }
  .offcut-player-title-block strong { font-size:11px; }
  .offcut-timeline,.offcut-seek { height:14px; }
}
/* Fullscreen the whole player and let the device rotate using the Screen Orientation API where supported. */
.watch-screen:fullscreen .offcut-player-shell { width:100vw; height:100vh; }
.watch-screen:fullscreen .offcut-video-stage { inset:0; }
.watch-screen:fullscreen .offcut-watch-video { width:100vw; height:100vh; max-width:100vw; max-height:100vh; object-fit:contain; }
@media(orientation:landscape) and (max-height:520px) {
  .offcut-player-controls { padding-top:34px; padding-bottom:max(8px,env(safe-area-inset-bottom)); gap:5px; }
  .offcut-player-title-block { display:none; }
  .offcut-center-controls { gap:8px; }
}

@media(prefers-reduced-motion:reduce) {
  .offcut-player-controls,.offcut-big-play,.offcut-player-button,.offcut-subtitles-toggle,.watch-close { transition:none; }
  .offcut-player-shell.is-loading:after { animation-duration:1.5s; }
}

/* Netflix-inspired native subtitle rendering: white captions, no box, soft shadow for contrast. */
.offcut-watch-video::cue { color:#fff; background-color:transparent; text-shadow:0 2px 3px #000, 0 0 7px #000, 1px 1px 1px #000; font-family:Arial,Helvetica,sans-serif; font-size:115%; font-weight:600; }


/* Subtitle mobile reliability + cinematic placement polish */
.offcut-player-title-block { display:none !important; }
.offcut-player-title-overlay {
  position:absolute; z-index:7; top:max(22px,env(safe-area-inset-top)); left:50%;
  width:min(78vw,1100px); transform:translateX(-50%); padding:10px 20px;
  text-align:center; pointer-events:none; opacity:1;
  transition:opacity .22s ease, transform .22s ease;
}
.offcut-player-title-overlay strong {
  display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#fff; font-size:clamp(15px,1.8vw,23px); font-weight:850; letter-spacing:-.25px;
  text-shadow:0 2px 18px #000,0 1px 4px #000;
}
.offcut-player-shell.controls-idle .offcut-player-title-overlay {
  opacity:0; transform:translate(-50%,-5px); visibility:hidden;
}
.offcut-caption-overlay {
  position:absolute; z-index:5; left:50%; bottom:clamp(96px,12vh,148px);
  width:min(84vw,1100px); max-height:24vh; overflow:hidden; transform:translateX(-50%);
  color:#fff; text-align:center; white-space:pre-line; overflow-wrap:anywhere;
  font-family:Arial,Helvetica,sans-serif; font-size:clamp(18px,1.8vw,30px); font-weight:600;
  line-height:1.35; letter-spacing:.05px; text-shadow:0 2px 3px #000,0 0 7px #000,1px 1px 1px #000;
  pointer-events:none; user-select:none;
}
.offcut-caption-overlay[hidden] { display:none!important; }
.watch-screen:fullscreen .offcut-caption-overlay { bottom:clamp(100px,13vh,160px); }
@media(max-width:900px) {
  .offcut-player-title-overlay { top:max(16px,env(safe-area-inset-top)); width:min(78vw,800px); padding:8px 12px; }
  .offcut-player-title-overlay strong { font-size:clamp(14px,2.5vw,20px); }
  .offcut-caption-overlay { bottom:calc(93px + env(safe-area-inset-bottom)); width:min(90vw,900px); font-size:clamp(16px,3.2vw,25px); max-height:22vh; }
  .watch-screen:fullscreen .offcut-caption-overlay { bottom:calc(94px + env(safe-area-inset-bottom)); }
}
@media(max-width:560px) {
  .offcut-player-title-overlay { top:max(12px,env(safe-area-inset-top)); width:calc(100% - 100px); padding:6px 8px; }
  .offcut-player-title-overlay strong { font-size:14px; }
  .offcut-caption-overlay { bottom:calc(84px + env(safe-area-inset-bottom)); width:92vw; font-size:clamp(15px,4.0vw,21px); line-height:1.32; max-height:20vh; }
  .watch-screen:fullscreen .offcut-caption-overlay { bottom:calc(82px + env(safe-area-inset-bottom)); }
}
@media(orientation:landscape) and (max-height:520px) {
  .offcut-caption-overlay { bottom:calc(62px + env(safe-area-inset-bottom)); font-size:clamp(15px,2.6vh,21px); max-height:26vh; }
  .watch-screen:fullscreen .offcut-caption-overlay { bottom:calc(62px + env(safe-area-inset-bottom)); }
  .offcut-player-title-overlay { top:max(6px,env(safe-area-inset-top)); }
}