/*
 * player.css — the cinema player's interface: Jellyfin's web video player OSD, rebuilt.
 *
 * Derived from jellyfin-web, commit 66c1c33ea3a7b45e704a8121642cd5520bc12af9 (13.0.0), https://github.com/jellyfin/jellyfin-web
 * Copyright (C) Jellyfin Contributors and Emby Contributors (see ../LICENSES/jellyfin-web.CONTRIBUTORS.html).
 *
 * This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public
 * License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later
 * version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the
 * implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
 * details: ../LICENSES/jellyfin-web.LICENSE-GPL-2.0.html
 *
 * Modified 2026-10-08 by Ánde Quirne (for Enrique, the Monday cinema): flattened from SCSS to plain CSS (via the kit osd.css),
 * font/icon URLs re-pointed to ../fonts and ../icons, and the additions marked "[cinema]" at the end of this file
 * (form dialog + raised buttons for the safety notice, chapter bubble, multi-select sheet, page box, header fade).
 * Not affiliated with or endorsed by the Jellyfin project.
 */

/* ---------- fonts ---------- */
/* styles/noto-sans/base-400-normal.scss + base-700-normal.scss via the styles/_font.scss mixin; ranges copied verbatim.
   Only the latin + latin-ext subsets are kept here (Jellyfin also ships cyrillic, greek, devanagari, vietnamese and CJK). */
@font-face { font-family: "Noto Sans"; font-style: normal; font-display: swap; font-weight: 400;
  src: local("Noto Sans"), local("Noto Sans Regular"), url("../fonts/noto-sans/noto-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-display: swap; font-weight: 400;
  src: local("Noto Sans"), local("Noto Sans Regular"), url("../fonts/noto-sans/noto-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-display: swap; font-weight: 700;
  src: local("Noto Sans"), local("Noto Sans Bold"), url("../fonts/noto-sans/noto-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-display: swap; font-weight: 700;
  src: local("Noto Sans"), local("Noto Sans Bold"), url("../fonts/noto-sans/noto-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* material-design-icons-iconfont@6.7.0 dist/material-design-icons.css (byte-identical woff2 to the demo's, sha256 5743ed3d…) */
@font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; font-display: block;
  src: local("☺"), url("../icons/font/MaterialIcons-Regular.woff2") format("woff2"), url("../icons/font/MaterialIcons-Regular.ttf") format("truetype"); }
.material-icons {
  font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px;
  display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal;
  word-wrap: normal; white-space: nowrap; direction: inherit;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}
/* Jellyfin writes <span class="material-icons pause"></span>: the glyph comes from these :before rules (same file) */
.material-icons.pause:before { content: "\e034"; }
.material-icons.play_arrow:before { content: "\e037"; }
.material-icons.fast_rewind:before { content: "\e020"; }
.material-icons.fast_forward:before { content: "\e01f"; }
.material-icons.skip_previous:before { content: "\e045"; }
.material-icons.skip_next:before { content: "\e044"; }
.material-icons.undo:before { content: "\e166"; }
.material-icons.redo:before { content: "\e15a"; }
.material-icons.closed_caption:before { content: "\e01c"; }
.material-icons.audiotrack:before { content: "\e3a1"; }
.material-icons.volume_up:before { content: "\e050"; }
.material-icons.volume_off:before { content: "\e04f"; }
.material-icons.settings:before { content: "\e8b8"; }
.material-icons.airplay:before { content: "\e055"; }
.material-icons.picture_in_picture_alt:before { content: "\e911"; }
.material-icons.fullscreen:before { content: "\e5d0"; }
.material-icons.fullscreen_exit:before { content: "\e5d1"; }
.material-icons.favorite:before { content: "\e87d"; }
.material-icons.fiber_manual_record:before { content: "\e061"; }
.material-icons.check:before { content: "\e5ca"; }
.material-icons.arrow_back:before { content: "\e5c4"; }
.material-icons.autorenew:before { content: "\e863"; }
.material-icons.close:before { content: "\e5cd"; }

/* ---------- document ---------- */
/* styles/site.scss */
html { margin: 0; padding: 0; height: 100%; font-family: Arial, Helvetica, sans-serif; line-height: 1.35; }
body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; background-color: transparent !important; -webkit-font-smoothing: antialiased; }
.material-icons { font-feature-settings: "liga"; }
/* styles/fonts.scss (desktop, non-TV browsers) */
html { font-size: 93%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1 { font-weight: 400; font-size: 1.8em; }
h2 { font-weight: 400; font-size: 1.5em; }
h3 { font-weight: 400; font-size: 1.17em; }
/* styles/fonts.noto.scss */
html { font-family: "Noto Sans", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif; }
/* src/index.html (inline critical CSS) */
html { background-color: #101010; color: rgba(255, 255, 255, 0.7); }
.hide, .mouseIdle .hide-mouse-idle { display: none !important; }
.transparentDocument .mouseIdle, .transparentDocument .mouseIdle button, .transparentDocument .mouseIdle input { cursor: none !important; }
/* themes/_base/_theme.scss */
* { scrollbar-width: thin; scrollbar-color: #3b3b3b #202020; }
/* styles/flexstyles.scss (utility classes used in the OSD markup) */
.flex { display: flex; }
.flex-direction-row { flex-direction: row; }
.align-items-center { align-items: center; }
.flex-grow { flex-grow: 1; }

/* ---------- the video ---------- */
/* plugins/htmlVideoPlayer/style.scss */
.videoPlayerContainer { position: fixed !important; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; background: #000 !important; }
.htmlvideoplayer { margin: 0 !important; padding: 0 !important; width: 100%; height: 100%; }
video[controls]::-webkit-media-controls { display: none !important; }

/* ---------- top bar (React/MUI in 13.0: apps/modern/routes/video/index.tsx + components/toolbar/AppToolbar.tsx) ---------- */
/* styles/librarybrowser.scss — the Box carries the legacy class "skinHeader" too */
.skinHeader { position: fixed; right: 0; left: 0; z-index: 999; top: 0; border: 0; display: flex; flex-direction: column;
  contain: layout style paint; transition: background ease-in-out 0.5s;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-top: env(safe-area-inset-top); }
/* themes/_base/_theme.scss */
.skinHeader { color: rgba(255, 255, 255, 0.7); }
.skinHeader-withBackground { background-color: #202020; background-image: none; }
/* styles/videoosd.scss (two-class selectors: these beat the single-class rules above and the emotion class below) */
.skinHeader-withBackground.osdHeader {
  transition: opacity 0.3s ease-out; position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%);
  backdrop-filter: none; color: #eee; height: 7.5em; pointer-events: none;
}
.osdHeader-hidden { opacity: 0; }
.videoOsd-appBar { margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right); padding-left: 1em; padding-right: 1em; }
/* MUI sx on the Box in apps/modern/routes/video/index.tsx (emotion class css-4r8yee on the demo). Its position:absolute and
   color:white LOSE to .skinHeader-withBackground.osdHeader (measured: position relative, color #eee); pointer-events wins (!important). */
.osdHeader { top: 0; left: 0; right: 0; pointer-events: unset !important; }
/* MUI Toolbar variant="dense" (css-1tmqktv on the demo); padding is then overridden by .videoOsd-appBar above */
.osdHeader .MuiToolbar-root { position: relative; display: flex; align-items: center; min-height: 48px; flex-wrap: nowrap; /* flex-wrap: wrap below 1200px */ width: 100%; box-sizing: border-box; }
/* MUI IconButton size="large" color="inherit" (css-i2hxb6) */
.osdHeader .MuiIconButton-root {
  display: inline-flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box;
  background-color: transparent; outline: 0; border: 0; margin: 0; cursor: pointer; user-select: none; vertical-align: middle;
  appearance: none; text-decoration: none; text-align: center; flex: 0 0 auto; border-radius: 50%;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); color: inherit; padding: 12px; font-size: 1.75rem;
}
.osdHeader .MuiIconButton-root:hover { background-color: rgba(255, 255, 255, 0.08); /* measured: --IconButton-hoverBg = action.active @ hoverOpacity */ }
/* MUI SvgIcon fontSize="medium" (css-iguwhy) — 1.5rem = 22.32px */
.osdHeader .MuiSvgIcon-root { user-select: none; width: 1em; height: 1em; display: inline-block; flex-shrink: 0; transition: fill 300ms cubic-bezier(0.4, 0, 0.2, 1); fill: currentColor; font-size: 1.5rem; }
/* MUI Typography body1 (css-pl8nxc) — the video title */
.osdHeader .MuiTypography-root { margin: 0; font-family: "Noto Sans", sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; }
/* right-hand button group (css-1riowxi) */
.osdHeader .osdHeaderRight { display: flex; flex-grow: 1; justify-content: flex-end; }
/* MUI Badge around the SyncPlay icon (css-chz7cr, css-14qzax9) — dot is invisible until a group is joined */
.osdHeader .MuiBadge-root { position: relative; display: inline-flex; vertical-align: middle; flex-shrink: 0; }
.osdHeader .MuiBadge-badge { display: flex; flex-flow: wrap; place-content: center; align-items: center; position: absolute; box-sizing: border-box;
  font-family: "Noto Sans", sans-serif; font-weight: 500; font-size: 0.75rem; line-height: 1; z-index: 1; background-color: #66bb6a; color: rgba(0, 0, 0, 0.87); /* MUI default dark success colours: assumed, not measured (the dot is invisible) */
  border-radius: 4px; height: 8px; min-width: 8px; padding: 0; top: 0; right: 0; transform: scale(1) translate(50%, -50%); transform-origin: 100% 0%;
  transition: transform 195ms cubic-bezier(0.4, 0, 0.2, 1); }
.osdHeader .MuiBadge-badge.MuiBadge-invisible { transform: scale(0) translate(50%, -50%); }
/* MUI Tooltip on header buttons (css-wdb3n7), measured: */
.osdHeader-tooltip { background: rgba(97, 97, 97, 0.92); color: #fff; font: 500 10.23px/13.8105px "Noto Sans", sans-serif; padding: 4px 8px; border-radius: 4px; }

/* ---------- bottom bar ---------- */
/* styles/videoosd.scss */
.chapterThumbTextContainer, .videoOsdBottom { user-select: none; }
.videoOsdBottom {
  bottom: 0; left: 0; right: 0; position: fixed;
  background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%);
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-top: 7.5em;
  display: flex; flex-direction: row; justify-content: center;
  will-change: opacity; transition: opacity 0.3s ease-out;
  color: #fff; -webkit-touch-callout: none; pointer-events: none;
  padding-bottom: 1.75em;                                             /* conditional-max fallback */
}
@supports (width: max(1px, 1px)) { .videoOsdBottom { padding-bottom: max(env(safe-area-inset-bottom), 1.75em); } }
.videoOsdBottom-hidden { opacity: 0; }
.osdControls { pointer-events: all; flex-grow: 1; padding: 0 0.8em; }
.videoOsdBottom .buttons { padding: 0.25em 0 0; display: flex; flex-wrap: wrap; align-items: center; }
.osdVolumeSliderContainer { width: 9em; flex-grow: 1; }
.osdMediaInfo, .volumeButtons { display: flex; align-items: center; }
.volumeButtons { margin: 0 1em 0 0.29em; display: flex; align-items: center; }
.osdTimeText { margin-left: 1em; margin-right: auto; user-select: none; }
.osdTitle, .osdTitleSmall { margin: 0 1em 0 0; }
.osdSecondaryMediaInfo { padding-left: 0.6em !important; }
.osdTextContainer { display: flex; align-items: center; user-select: none; margin-bottom: 0.7em; padding-left: 0.5em; }
.osdMainTextContainer { align-items: baseline; }
.osdMediaStatus { margin-left: auto; display: flex; align-items: center; }
.osdMediaStatus span:first-child { margin-right: 0.125rem; }
.osdMediaStatus .animate { animation: spin-clockwise 4s linear infinite; }
@keyframes spin-clockwise { 100% { transform: rotate(360deg); } }
/* responsive hides (em = 14.88px: 30em=446px, 33.75em=502px, 43em=640px, 50em=744px, 75em=1116px) */
@media all and (max-width: 30em) { .btnUserRating, .osdMediaInfo, .osdPoster { display: none !important; } }
@media all and (max-width: 33.75em) { .videoOsdBottom .paper-icon-button-light { margin: 0; } }
@media all and (max-width: 43em) { .videoOsdBottom .volumeButtons, .osdMediaStatus span { display: none !important; } }
@media all and (max-width: 50em) { .videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind { display: none !important; } }
@media all and (max-width: 75em) { .videoOsdBottom .endsAtText { display: none !important; } }
/* trickplay / chapter bubble (styles/videoosd.scss) */
.chapterThumbContainer { box-shadow: 0 0 1.9vh #000; flex-grow: 1; }
.chapterBubblePosition { position: relative !important; }
.chapterThumbTextContainer { position: absolute; bottom: 0; left: 0; right: 0; background: none; padding: 0.25em 0.5em; min-width: fit-content; }
.chapterThumbText { padding: 0.25em 0; margin: 0; opacity: 1; color: #fff; text-shadow: 0 0 25px #000, 0 0 6px #000; white-space: nowrap; min-width: fit-content; }
.chapterThumbText-dim { opacity: 0.9; }

/* ---------- icon buttons ---------- */
/* elements/emby-button/emby-button.scss */
.paper-icon-button-light {
  position: relative; display: inline-flex; align-items: center; box-sizing: border-box; margin: 0 0.29em;
  background: transparent; text-align: center; font-size: inherit; font-family: inherit; color: inherit;
  user-select: none; cursor: pointer; z-index: 0; min-width: initial; min-height: initial; width: auto; height: auto;
  padding: 0.556em; vertical-align: middle; border: 0; outline: none !important; overflow: hidden; border-radius: 50%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); justify-content: center; transform-origin: center; transition: 0.2s;
}
.paper-icon-button-light::-moz-focus-inner { border: 0; }
.paper-icon-button-light:disabled { opacity: 0.3; cursor: default; }
.paper-icon-button-light > .material-icons { font-size: 1.66956521739130434em; position: relative; z-index: 1; vertical-align: middle; }
/* NOTE: .xlargePaperIconButton and .largePaperIconButton appear in the markup but have NO rule anywhere in src/ (grep of src/ on 2026-10-08) */
/* themes/_base/_theme.scss — hover/active: primary colour + primary @ selectedOpacity 0.2 */
@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) { color: #00a4dc; background-color: rgba(0, 164, 220, 0.2); }
}
.paper-icon-button-light:active:not(:disabled) { color: #00a4dc; background-color: rgba(0, 164, 220, 0.2); }

/* ---------- sliders (input[type=range] is="emby-slider") ---------- */
/* elements/emby-slider/emby-slider.scss — webkit + moz branches; the -ms branch dropped */
.mdl-slider {
  width: 100%; appearance: none; height: 150%; background: transparent; user-select: none; outline: 0;
  color: #00a4dc; align-self: center; z-index: 1; cursor: pointer; margin: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; font-size: inherit;
}
.mdl-slider::-moz-focus-outer { border: 0; }
.mdl-slider::-webkit-slider-runnable-track { background: transparent; }
.mdl-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 1.08em; height: 1.08em; box-sizing: border-box; border-radius: 50%; background: #00a4dc; border: none; transition: 0.2s; pointer-events: none; }
.mdl-slider-hoverthumb:hover::-webkit-slider-thumb { transform: scale(1.3); }
.mdl-slider.show-focus:focus::-webkit-slider-thumb { transform: scale(1.3); }
.mdl-slider::-moz-range-thumb { appearance: none; width: 1.08em; height: 1.08em; box-sizing: border-box; border-radius: 50%; background: #00a4dc; background-image: none; border: none; transition: 0.2s; }
.mdl-slider-hoverthumb:hover::-moz-range-thumb { transform: scale(1.3); }
.mdl-slider[disabled]::-webkit-slider-thumb { display: none; }
.mdl-slider[disabled]::-moz-range-thumb { display: none; }
.mdl-slider-container { height: 1.25em; position: relative; background: none; display: flex; flex-direction: row; }
.mdl-slider-background-flex-container { width: 100%; box-sizing: border-box; top: 50%; position: absolute; padding: 0 0.54em; left: 0; }
.mdl-slider-background-flex { background: rgba(255, 255, 255, 0.3); height: 0.2em; margin-top: -0.1em; width: 100%; top: 50%; display: flex; overflow: hidden; border: 0; padding: 0; left: 0; }
.mdl-slider-background-flex-inner { position: relative; width: 100%; }
.mdl-slider-background-lower { position: absolute; width: 0; top: 0; bottom: 0; background-color: #00a4dc; left: 0; }
.mdl-slider-background-lower-clear { background-color: transparent; }
.mdl-slider-background-upper { background: rgba(255, 255, 255, 0.4); position: absolute; left: 0; width: 0; top: 0; bottom: 0; }
.sliderBubbleTrack { position: absolute; left: 0; right: 0; margin: 0 0.54em; }
.sliderBubble { position: absolute; top: 0; left: 0; transform: translate3d(-50%, -120%, 0); background: #282828; color: #fff; display: flex; align-items: center; justify-content: center; z-index: 1; }
.sliderBubbleText { margin: 0; padding: 0.5em 0.75em; }
.sliderMarkerContainer { position: absolute; left: 0; right: 0; margin: 0 0.54em; }
.sliderMarker { position: absolute; width: 2px; height: 12px; transform: translate3d(0, 25%, 0); }
.sliderMarker.unwatched { background-color: rgba(255, 255, 255, 0.3); }
.sliderMarker.watched { background-color: #00a4dc; }

/* ---------- dialogs (the subtitle / audio / settings menus are ActionSheets inside a dialog) ---------- */
/* components/dialogHelper/dialoghelper.scss */
.dialogContainer { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999 !important; contain: strict; overflow: hidden; overscroll-behavior: contain; }
.dialog { margin: 0; border-radius: 0.2em; -webkit-font-smoothing: antialiased; border: 0; padding: 0; will-change: transform, opacity; contain: style paint;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4); }
.dialogBackdrop { background-color: #000; opacity: 0; position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; z-index: 999998 !important; transition: opacity ease-out 0.2s; will-change: opacity; }
.dialogBackdropOpened { opacity: 0.5; }
@keyframes scaleup { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes scaledown { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.5); } }
/* themes/_base/_theme.scss */
.dialog { background-color: #101010; }
.actionsheetDivider { background: rgba(255, 255, 255, 0.12); }
.listItem:focus { background-color: rgba(255, 255, 255, 0.12); }
.listItem:hover { background-color: rgba(255, 255, 255, 0.08); }
/* elements/emby-button/emby-button.scss (menu items are <button is="emby-button">). Loaded BEFORE actionSheet.scss, so
   .actionSheetMenuItem { font-weight: inherit } wins over the 600 here (measured 400). */
.emby-button { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; margin: 0.3em; text-align: center; font-size: inherit; font-family: inherit; color: inherit;
  outline: none !important; user-select: none; cursor: pointer; z-index: 0; padding: 0.9em 1em; vertical-align: middle; border: 0; border-radius: 0.2em; font-weight: 600;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-decoration: none; line-height: 1.35; transform-origin: center; transition: 0.2s; }
.emby-button > .material-icons { font-size: 1.36em; } /* beats .listItemIcon 143% by specificity: measured 20.2368px */
/* components/actionSheet/actionSheet.scss */
.actionSheet { display: flex; justify-content: center; padding: 0; border: none; max-height: 84%; border-radius: 0.1em !important; }
.actionsheet-not-fullscreen { max-width: 90%; max-height: 90%; }
.actionSheetContent-centered { text-align: center; align-items: center; }
.actionSheetContent { margin: 0 !important; padding: 0.4em 0 !important; flex-direction: column; display: flex; justify-content: center; flex-grow: 1; overflow: hidden; }
.actionSheetMenuItem { font-weight: inherit; box-shadow: none; flex-shrink: 0; border-radius: 0; margin: 0; }
.actionSheetMenuItem:focus { transform: none !important; }
.actionsheetListItemBody { padding: 0.4em 1em 0.4em 0.6em !important; }
.actionSheetItemText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; flex-grow: 1; display: flex; justify-content: flex-start; }
.actionSheetItemAsideText { opacity: 0.7; font-size: 90%; display: flex; justify-content: flex-end; flex-shrink: 0; margin-left: 5em; margin-right: 0.5em; }
.actionSheetScroller { margin-bottom: 0 !important; display: flex; flex-direction: column; width: 100%; }
.actionsheetDivider { height: 0.07em; margin: 0.25em 0; flex-shrink: 0; }
.actionSheetTitle { margin: 0.6em 0 0.7em !important; padding: 0 0.75rem; flex-grow: 0; }
.actionSheetText { margin-top: 0; padding: 0 0.75rem; flex-grow: 0; }
.actionsheetMenuItemIcon { padding: 0 !important; margin: 0 0.85em 0 0.45em !important; }
/* styles/scrollstyles.scss */
.scrollY { overflow-y: auto; overflow-x: hidden; }
/* components/listview/listview.scss */
.listItem, .listItemBody { display: flex; contain: layout style; }
.listItem { background: transparent; border: 0; outline: none !important; color: inherit; vertical-align: middle; font-family: inherit; font-size: inherit; margin: 0; align-items: center; cursor: pointer; overflow: hidden; text-align: left; padding: 0.25em 0.25em 0.25em 0.5em; }
.listItem-button { width: 100%; }
.listItemIcon { flex-shrink: 0; display: inline-block; vertical-align: middle; width: 1em !important; height: 1em !important; font-size: 143%; margin: 0 0.25em 0 0; }
.listItemBody { display: inline-block; vertical-align: middle; flex-grow: 1; padding: 0.85em 0.75em; overflow: hidden; text-overflow: ellipsis; flex-direction: column; justify-content: center; }
/* NB listview.scss sets .listItemBody display:flex (line 1) then display:inline-block (line 80); the later one wins and is
   blockified inside the flex .listItem: measured display:block on the demo. */
.listItemBodyText { margin: 0; padding: 0.1em 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.layout-desktop .listItemBodyText { line-height: 1.2em; }

/* ---------- subtitles ---------- */
/* Two render paths in plugins/htmlVideoPlayer/plugin.js:
   (a) NATIVE (Chrome/Chromium default): a <track> on the <video>; styled by ::cue rules.
   (b) CUSTOM element (Safari, Firefox, Edge legacy, webOS, Tizen>=5, PS4): .videoSubtitles > .videoSubtitlesInner. */
/* (a) plugins/htmlVideoPlayer/style.scss */
.htmlvideoplayer::cue { background-color: transparent; text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1); -webkit-font-smoothing: antialiased; font-family: inherit; line-height: normal; }
.htmlvideoplayer::-webkit-media-text-track-container { font-size: 170% !important; line-height: 50%; }
.htmlvideoplayer::-webkit-media-text-track-display { max-width: 70%; margin-left: 15%; }
/* (a) generated at runtime by setCueAppearance() from subtitleappearancehelper.getStyles(defaults), exact text captured on the demo
       (defaults = { verticalPosition: -3 } → cue.line = -3 - (number of "\n" in the cue)) */
.htmlvideoplayer::cue {
  font-size: 1.36em !important; font-weight: normal !important; text-shadow: #000000 0px 0px 7px !important;
  background-color: transparent !important; color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
  font-variant: none !important; margin-bottom: 2.7em !important;
}
/* (b) plugins/htmlVideoPlayer/style.scss */
.videoSubtitles { position: fixed; bottom: 0; text-align: center; left: 0; right: 0; color: #fff; font-size: 170%;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom);
  display: flex; flex-direction: column; align-items: center; }
.videoSubtitlesInner { max-width: 70%; background-color: rgba(0, 0, 0, 0.8); }
.videoSecondarySubtitlesInner { max-width: 70%; background-color: rgba(0, 0, 0, 0.8); min-height: 0 !important; margin-top: 0.5em !important; margin-bottom: 0.5em !important; }
/* (b) inline styles written by subtitleappearancehelper.applyStyles() with the defaults (captured on the demo):
       window (.videoSubtitles): bottom: 0  — text (.videoSubtitlesInner): */
.videoSubtitlesInner.jf-default-appearance {
  font-size: 1.36em; font-weight: normal; text-shadow: rgb(0, 0, 0) 0px 0px 7px; background-color: transparent; color: rgb(255, 255, 255);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-variant: none; margin-bottom: 2.7em;
}

/* ---------- player stats overlay (components/playerstats/playerstats.scss) ---------- */
.playerStats { background: rgba(28, 28, 28, 0.8); border-radius: 0.3em; color: #fff; position: absolute; top: 5em; left: 1.5em; }
.playerStats-content { position: relative; font-size: 84%; }
.playerStats-closeButton { position: absolute; top: 0.25em; right: 0.25em; color: #ccc; z-index: 1; }
.playerStats-stats { display: flex; flex-direction: column; max-width: 50em; overflow: hidden; padding: 0 3em 1em 1em; }
.playerStats-stat { display: flex; margin-left: 1em; }
.playerStats-stat-label { font-weight: 500; margin: 0 0.5em 0 0; }
.playerStats-stat-header { margin: 1em 1em 0 0; }
.playerStats-stat-value { color: #ddd; }

/* =====================================================================================================================
 * [cinema] additions, 2026-10-08. Still derived from jellyfin-web (each rule names its source), unless marked [ours].
 * ===================================================================================================================== */

/* [ours] Jellyfin's view (#videoOsdPage) is a page the size of the window; here it is a fixed transparent box, so the
   picture clicks (300 ms play/pause, dblclick fullscreen) land on it as they land on the view in Jellyfin. */
#videoOsdPage { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
/* [ours] MUI <Fade> writes visibility:hidden at the end of its exit (measured ~200 ms into the 300 ms fade) */
.osdHeader.osdHeader-gone { visibility: hidden; }

/* components/formdialog.scss (the alert / confirm dialog: components/dialog/dialog.template.html) */
.formDialog { display: flex; flex-direction: column; position: relative; }
.formDialogHeader { padding: 1em 0.5em; display: flex; align-items: center; flex-shrink: 0; }
.formDialogHeaderTitle { margin-top: 0; margin-bottom: 0; margin-left: 0.25em; }
.formDialogHeaderTitle:first-child { margin-left: 1em; }
.formDialogContent:not(.no-grow) { flex-grow: 1; }
.dialogContentInner { padding: 0.5em 1em 20em 1em; }
.dialog-content-centered { margin: 0 auto; max-width: 53em; }
.formDialogFooter { bottom: 0; left: 0; right: 0; display: flex; position: absolute; padding: 1em 1em; z-index: 1; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.formDialogFooter-flex { position: static; width: 100%; }
.formDialogFooterItem { margin: 0.5em !important; text-align: center; flex-basis: 12em; }
.formDialogFooterItem-autosize { flex-basis: initial; flex-grow: initial; padding-right: 2em; padding-left: 2em; }
@media all and (min-width: 50em) { .formDialogFooterItem { max-width: 80%; } .dialogContentInner { padding-left: 1.5em; padding-right: 1.5em; } }
@media all and (min-width: 80em) { .formDialogFooterItem { max-width: 70%; } .dialogContentInner { padding-left: 2em; padding-right: 2em; } }
/* styles/flexstyles.scss */
.justify-content-center { justify-content: center; }
.flex-direction-column { flex-direction: column; }
/* styles/scrollstyles.scss */
.smoothScrollY { overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
/* themes/_base/_theme.scss (dark defaults; $surface-overlay = background-paper #202020) */
.formDialogFooter:not(.formDialogFooter-clear), .formDialogHeader:not(.formDialogHeader-clear) { background-color: #202020; }
.fieldDescription, .secondaryText, .listItem .secondary { color: rgba(255, 255, 255, 0.7); }
.raised { background: #424242; color: rgba(255, 255, 255, 0.7); }
.raised:hover { background: #616161; }
.raised:focus { background: #00a4dc; }
.button-submit { background: #00a4dc; color: rgba(0, 0, 0, 0.87); }
.button-submit:hover { background: #00729a; }
.button-submit:focus { background: #00a4dc; color: rgba(0, 0, 0, 0.87); }
/* components/dialogHelper/dialoghelper.scss: under 80em wide or 45em high the form dialog goes full screen */
@media all and (max-width: 80em), all and (max-height: 45em) {
  .dialog-fullscreen-lowres { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    margin: 0 !important; box-shadow: none; width: auto !important; height: auto !important; }
}

/* [ours] the multi-select Subtitles sheet: identical rows; the check is per row, the sheet stays open */
.actionSheet[data-multiselect="true"] .actionSheetMenuItem[aria-checked] { cursor: pointer; }

/* [ours] the fly's door: a full-screen frame under a copy of the video top bar (back arrow + title) */
.flyDoor { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000001; background: #000; }
.flyDoor iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: #07080b; }
.flyDoor .skinHeader.osdHeader { position: absolute; }
.flyDoor .skinHeader-withBackground.osdHeader { height: auto; background: linear-gradient(180deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%); }