/* Re-creation of YouTube's player-control layout, sized from the real thing
   with a skin applied (delhi-modern, 09.2026): bar 59px tall with 3px top
   padding, buttons 40px tall sitting at +11px, play 40x40, mute and every
   right button 48x40, time display 56px tall, and a volume handle whose
   ::before/::after draw the slider - the skins reposition exactly those
   pseudo-elements, so they have to exist here. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; font-family: Roboto, Arial, sans-serif; }

#movie_player {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    background-size: cover; background-position: center; color: #fff;
}
#movie_player .stage { position: absolute; inset: 0; background: #000 url('/img/preview/stage.jpg') center/cover no-repeat; }

.ytp-gradient-bottom {
    position: absolute; left: 0; right: 0; bottom: 0; height: 98px; padding-top: 37px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .68)); pointer-events: none;
    background-repeat: repeat-x; background-position: bottom;
}
.ytp-chrome-bottom {
    position: absolute; left: 12px; right: 12px; bottom: 0; height: 59px; padding-top: 3px; z-index: 60;
}

/* progress */
.ytp-progress-bar-container { position: absolute; left: 0; right: 0; top: -3px; height: 6px; }
.ytp-progress-bar { position: absolute; left: 0; right: 0; top: 0; height: 6px; }
.ytp-progress-list { position: relative; top: 1px; height: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.ytp-play-progress { position: absolute; left: 0; top: 0; height: 4px; width: 38%; background: #f03; }
.ytp-scrubber-container { position: absolute; top: -3px; left: 38%; width: 12px; height: 12px; }
.ytp-scrubber-button { width: 12px; height: 12px; border-radius: 50%; background: #f03; }

/* controls row */
.ytp-chrome-controls { display: flex; height: 56px; }
.ytp-left-controls { display: flex; align-items: flex-start; flex: 1; height: 56px; }
.ytp-right-controls { display: flex; align-items: flex-start; height: 40px; margin-top: 8px; padding: 0 4px; }
.ytp-button {
    position: relative; display: block; border: 0; padding: 0; cursor: pointer; color: #fff;
    background: transparent center no-repeat; opacity: .96;
}
.ytp-left-controls .ytp-button { width: 48px; height: 40px; margin-top: 8px; }
.ytp-left-controls .ytp-play-button { width: 40px; }
.ytp-right-controls .ytp-button { width: 48px; height: 40px; padding: 4px; }

/* volume: copied value-for-value off the real player (measured 09.2026 on a
   clean delhi-modern player). It matters, because a skin only overrides a few
   of these: it moves the two bars (left) and resizes the handle, and inherits
   width/height/top from here. The panel is 0-wide until the area goes active,
   .ytp-volume-slider is what clips (overflow:hidden), and the handle carries
   ::before (filled) and ::after (rest), each 64px long and clipped by the
   slider - that is how YouTube draws the track. */
.ytp-volume-area { position: relative; display: flex; align-items: flex-start; flex: 0 0 auto; margin-left: 12px; }
.ytp-volume-panel {
    width: 0; height: 40px; margin-top: 8px; overflow: visible;
    transition: margin .2s cubic-bezier(0, 0, .2, 1), width .2s cubic-bezier(0, 0, .2, 1);
}
.ytp-volume-area:hover .ytp-volume-panel,
.ytp-volume-slider-active .ytp-volume-panel { width: 60px; }
.ytp-volume-slider { position: relative; width: 100%; height: 40px; overflow: hidden; cursor: pointer; }
/* the clickable part of the slider, invisible and taller than the paint: it
   reaches the full height of the control row so a few pixels of drift do not
   land on the progress bar (which would seek) or on nothing at all */
.ytp-volume-panel { position: relative; }
.yts-vol-hit { position: absolute; left: 0; right: 0; top: -4px; bottom: -8px; z-index: 2; cursor: pointer; }
.ytp-volume-slider-handle {
    position: absolute; left: 40px; top: 20px; width: 12px; height: 12px; margin-top: -6px;
    border-radius: 6px; background: #fff;
}
.ytp-volume-slider-handle::before,
.ytp-volume-slider-handle::after { content: ''; display: block; position: absolute; top: 6px; height: 2px; width: 64px; }
.ytp-volume-slider-handle::before { right: 6px; background: #fff; }
.ytp-volume-slider-handle::after { left: 6px; background: rgba(255, 255, 255, .2); }

.ytp-time-display { height: 56px; padding: 8px; font-size: 13px; line-height: 40px; color: #fff; white-space: nowrap; }
.ytp-time-display span { opacity: .92; }

/* default icons, replaced by the skin sprite when one is applied */
.ytp-play-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='white'%3E%3Cpath d='M12 26h4V10h-4zm8-16v16h4V10z'/%3E%3C/svg%3E"); }
.ytp-next-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='white'%3E%3Cpath d='M12 26l8.5-8L12 10zM22 10h3v16h-3z'/%3E%3C/svg%3E"); }
.ytp-mute-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='white'%3E%3Cpath d='M8 21h5l6 5V10l-6 5H8zM23 13a7 7 0 010 10v-2.5a4.5 4.5 0 000-5z'/%3E%3C/svg%3E"); }
.ytp-subtitles-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='white'%3E%3Cpath d='M6 10h24v16H6zm4 5h6v2h-6zm0 5h10v2H10zm12 0h4v2h-4zm-2-5h6v2h-6z'/%3E%3C/svg%3E"); }
.ytp-settings-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='white'%3E%3Cpath d='M18 13a5 5 0 100 10 5 5 0 000-10zm0 7.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3Cpath d='M28 18l-2-1.5.3-2.5-2.4-1-1.2-2.2-2.5.4L18 8l-2.2 3.2-2.5-.4-1.2 2.2-2.4 1 .3 2.5L8 18l2 1.5-.3 2.5 2.4 1 1.2 2.2 2.5-.4L18 28l2.2-3.2 2.5.4 1.2-2.2 2.4-1-.3-2.5z' opacity='.35'/%3E%3C/svg%3E"); }
.ytp-miniplayer-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='white'%3E%3Cpath d='M25 17h-8v6h8zM9 11h18v14H9z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); }
.ytp-size-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='white'%3E%3Cpath d='M9 12h18v12H9z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); }
.ytp-fullscreen-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='white'%3E%3Cpath d='M10 16V10h6v2h-4v4zm10-6h6v6h-2v-4h-4zm6 16h-6v-2h4v-4h2zM10 20h2v4h4v2h-6z'/%3E%3C/svg%3E"); }

/* the permanent progress bar option, mirrored from the extension */
body.yts-bar-always .ytp-progress-bar-container { opacity: 1 !important; bottom: -2px !important; min-height: 7px; }