/* ZOWA cinematic player: progressive visual upgrade over styles.css. */
.watch-overlay.cinema-player {
  --cinema-red: #f21f47;
  background: #151820;
  color: #f7f7fa;
  font-family: inherit;
}
.cinema-player .watch-video { background: #14171e; width:100%; height:100%; object-fit:contain; }
.cinema-player .watch-topbar { top:0; min-height:82px; padding:22px clamp(18px,3.3vw,58px); gap:15px; background:linear-gradient(180deg,rgba(2,3,7,.88) 0%,transparent 100%); }
.cinema-player .watch-topbar strong { font-size:clamp(.95rem,1.16vw,1.2rem); font-weight:700; letter-spacing:-.025em; }
.cinema-player .watch-episode-title { color:#b5b7bf; font-size:.82rem; }
.cinema-player .watch-icon-button { width:44px;height:44px;border-radius:50%;background:rgba(25,28,36,.65);border:1px solid rgba(255,255,255,.12); }
.cinema-player .watch-icon-button:hover {background:rgba(255,255,255,.16)}
.cinema-player .watch-bottom-controls { display:flex;flex-direction:column;gap:10px; padding: 0 clamp(14px,2vw,32px) max(22px,env(safe-area-inset-bottom)); background:linear-gradient(0deg,rgba(3,4,8,.91),rgba(3,4,8,.66) 40%,transparent); }
.cinema-player .cinema-seek-row { width:100%; display:flex; padding:8px 0; }
.cinema-player .watch-timeline { --cinema-progress:0%; appearance:none;-webkit-appearance:none; display:block;width:100%;height:5px; min-height:5px;border-radius:99px;padding:0;margin:0;outline-offset:8px; cursor:pointer; background:linear-gradient(90deg,var(--cinema-red) 0%,var(--cinema-red) var(--cinema-progress),#535763 var(--cinema-progress),#535763 100%); }
.cinema-player .watch-timeline::-webkit-slider-thumb { appearance:none;-webkit-appearance:none;width:13px;height:13px;border-radius:50%;border:2px solid white;background:var(--cinema-red);box-shadow:0 1px 10px #0007;opacity:0;transition:opacity .15s; }
.cinema-player .watch-timeline:hover::-webkit-slider-thumb,.cinema-player .watch-timeline:focus-visible::-webkit-slider-thumb {opacity:1}
.cinema-player .watch-timeline::-moz-range-thumb { width:10px;height:10px;border-radius:50%;border:2px solid white;background:var(--cinema-red); }
.cinema-player .cinema-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; }
.cinema-player .cinema-controls-left,.cinema-player .cinema-controls-right { display:flex; align-items:center; gap:clamp(2px,.65vw,12px); }
.cinema-player .cinema-control { display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border:1px solid transparent; border-radius:8px; background:transparent; color:#f7f7fa; cursor:pointer; transition:background .18s,transform .18s; }
.cinema-player .cinema-control:hover {background:rgba(255,255,255,.13);transform:translateY(-1px)}
.cinema-player .cinema-control:disabled {color:#6c707a;cursor:not-allowed;opacity:.48}
.cinema-player .cinema-control.is-selected { color:var(--cinema-red) }
.cinema-player .cinema-icon { display:grid;place-items:center; width:24px;height:24px;pointer-events:none; }
.cinema-player .cinema-icon svg {display:block;width:100%;height:100%;}
.cinema-player .watch-play-toggle .cinema-icon {width:23px;height:23px}
.cinema-player .cinema-clock {min-width:0; margin-left:5px; color:#e1e2e7; white-space:nowrap; font-size:clamp(.82rem,.95vw,1rem);font-weight:500; letter-spacing:-.015em; text-align:left;}
/* Compact, always-visible volume control. Explicitly reset global input
   min-height/padding/borders, which previously rendered a 44px black box. */
.cinema-player .cinema-volume-wrap,
.cinema-player .cinema-settings-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cinema-player .cinema-volume-wrap { gap: 4px; }
.cinema-player .cinema-volume-slider {
  --cinema-volume-fill: 100%;
  display: block;
  flex: 0 0 88px;
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  height: 4px;
  min-height: 4px;
  padding: 0;
  margin: 0 8px 0 0;
  border: 0;
  border-radius: 99px;
  box-shadow: none;
  opacity: 1;
  overflow: visible;
  background: linear-gradient(to right,
    #fafafa 0%, #fafafa var(--cinema-volume-fill),
    #6a6d77 var(--cinema-volume-fill), #6a6d77 100%);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.cinema-player .cinema-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: transparent;
}
.cinema-player .cinema-volume-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px #0009;
}
.cinema-player .cinema-volume-slider::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: #6a6d77;
}
.cinema-player .cinema-volume-slider::-moz-range-progress {
  height: 4px;
  border-radius: 99px;
  background: #fafafa;
}
.cinema-player .cinema-volume-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 2px solid white;
  border-radius: 50%;
  background: #fff;
}
.cinema-player .cinema-volume-slider:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 8px;
  box-shadow: none;
}
.cinema-player .cinema-settings-menu {position:absolute;right:0;bottom:calc(100% + 10px); z-index:8;width:184px;padding:10px;border:1px solid #383b44;border-radius:12px;background:#191c24;box-shadow:0 22px 65px #000c;}
.cinema-player .cinema-settings-menu {width:220px;max-height:min(68vh,440px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.cinema-player .cinema-quality-heading {margin-top:13px;padding-top:12px;border-top:1px solid #3a3b43;}
.cinema-player .cinema-quality-notice {margin:7px 8px 8px;font-size:.75rem;line-height:1.5;color:#b4b7c0;}
.cinema-player .cinema-settings-menu[hidden] {display:none!important}
.cinema-player .cinema-settings-heading {margin:4px 8px 8px;color:#c5c7ce;font-size:.75rem;font-weight:650;}
.cinema-player .cinema-speed-option {display:block;width:100%;padding:8px 12px;margin:1px 0;border:0;border-radius:7px;background:transparent;color:#e5e6ec;text-align:left;cursor:pointer;font-size:.9rem;}
.cinema-player .cinema-speed-option:hover {background:#303440}
.cinema-player .cinema-speed-option.active {background:#44212b;color:#fff;font-weight:700}
.cinema-player .cinema-center-play {position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:76px;height:76px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(12,14,20,.70);color:white;box-shadow:0 12px 52px #000a;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s,background .2s;}
.cinema-player.is-paused .cinema-center-play {opacity:1;pointer-events:auto}
.cinema-player.is-paused .cinema-center-play:hover {background:rgba(242,31,71,.95)}
.cinema-player .cinema-center-play .cinema-icon {width:34px;height:34px}
.cinema-player .cinema-feedback {position:absolute;z-index:4;top:37%;left:50%;transform:translate(-50%,-50%);padding:11px 22px;border-radius:32px;background:rgba(10,12,19,.86);color:#fff;font-size:1.02rem;font-weight:700;pointer-events:none;opacity:0;transition:opacity .18s;}
.cinema-player .cinema-feedback.visible {opacity:1}
.cinema-player button:focus-visible,.cinema-player input:focus-visible {outline:2px solid white;outline-offset:3px;}
@media(max-width:720px){
  .cinema-player .watch-topbar {padding:12px 14px;min-height:62px}
  .cinema-player .watch-bottom-controls {padding:0 12px max(12px,env(safe-area-inset-bottom));gap:6px}
  .cinema-player .cinema-control {width:36px;height:36px}
  .cinema-player .cinema-icon {width:21px;height:21px}
  .cinema-player .cinema-controls-left,.cinema-player .cinema-controls-right {gap:0}
  .cinema-player .cinema-clock {margin-left:3px;font-size:.79rem}
  .cinema-player .cinema-center-play {width:60px;height:60px}
  .cinema-player .cinema-volume-slider {display:none}
  .cinema-player .watch-episode-title {max-width:55vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:410px){
  .cinema-player .cinema-control {width:32px;height:36px}
  .cinema-player .cinema-clock {font-size:.7rem}
  .cinema-player .cinema-icon {width:19px;height:19px}
}
@media(prefers-reduced-motion:reduce){.cinema-player *{transition-duration:.01ms!important}}
/* Native WebVTT caption language selector. */
.cinema-player .cinema-captions-wrap { position:relative; display:flex; align-items:center; }
.cinema-player .cinema-captions-menu { width:190px; }
.cinema-player .cinema-captions-menu[hidden] { display:none!important; }
.cinema-player .watch-video::cue { color:#fff; background-color:rgba(0,0,0,.75); }