/* Кинозал — плеер: бархатный занавес, контролы, меню, режим театра */
.player { position: absolute; inset: 0; overflow: hidden; background: #000; outline: none; --pad: clamp(10px, 1.6vw, 20px); }
.p-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player.idle { cursor: none; }
.player ::cue { font: 600 1em var(--font-ui); color: #fff; background: rgba(0, 0, 0, .72); }

/* занавес закрыт: на нём табличка с названием и кнопкой */
.p-plate { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; transition: opacity .6s .2s; }
.p-plate.go { opacity: 0; pointer-events: none; }
.p-plate-in { display: grid; justify-items: center; gap: 16px; padding: clamp(18px, 3vw, 34px) clamp(22px, 4vw, 52px); max-width: min(560px, 92%); text-align: center; background: linear-gradient(180deg, rgba(18, 6, 11, .84), rgba(18, 6, 11, .92)); border: 1px solid var(--line-strong); box-shadow: 0 0 0 5px rgba(18, 6, 11, .4), 0 30px 60px -20px #000; }
.p-plate-t { font: italic 800 clamp(1.2rem, 2.8vw, 2rem)/1.15 var(--font-display); text-wrap: balance; }
.p-start { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 30px; border-radius: 2px; border: 1px solid #f4d58a; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #b98529); color: #2a1604; font-weight: 700; font-size: 1.05rem; box-shadow: 0 8px 28px -8px rgba(217, 164, 65, .8), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .25s var(--ease), box-shadow .25s; }
.p-start:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 34px -8px rgba(217, 164, 65, .95), inset 0 1px 0 rgba(255, 255, 255, .6); }
.p-start .icon { width: 22px; height: 22px; }
.p-fromstart { color: var(--paper-2); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; padding: 0 12px; }
.p-fromstart:hover { color: var(--gold-hi); }

.p-buffer { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; pointer-events: none; }
.p-buffer .spin { width: 54px; height: 54px; border-width: 4px; }
.p-osd { position: absolute; z-index: 14; top: 12%; left: 50%; transform: translate(-50%, -8px); padding: 8px 18px; border-radius: 3px; background: rgba(10, 4, 7, .82); border: 1px solid var(--line); font: 500 1rem var(--font-ui); opacity: 0; transition: opacity .2s, transform .25s var(--ease); pointer-events: none; }
.p-osd.on { opacity: 1; transform: translate(-50%, 0); }
.p-error { position: absolute; inset: 0; z-index: 35; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: rgba(10, 4, 7, .9); }
.p-error .icon { width: 48px; height: 48px; color: var(--gold); }
.p-error p { max-width: 36ch; color: var(--paper-2); }
.p-error-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* панель управления */
.p-controls { position: absolute; z-index: 20; inset: auto 0 0 0; padding: 40px var(--pad) var(--pad); background: linear-gradient(0deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .55) 55%, transparent); transition: opacity .35s, transform .35s var(--ease); }
.player.idle .p-controls { opacity: 0; transform: translateY(8px); pointer-events: none; }
.p-bar { position: relative; height: 28px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline-offset: 2px; }
.p-track { position: relative; width: 100%; height: 4px; background: rgba(241, 230, 207, .22); border-radius: 2px; transition: height .15s; }
.p-bar:hover .p-track, .p-bar:focus-visible .p-track { height: 7px; }
.p-buffered, .p-played { position: absolute; inset: 0 auto 0 0; border-radius: 2px; width: 0; }
.p-buffered { background: rgba(241, 230, 207, .34); }
.p-played { background: linear-gradient(90deg, var(--oxblood), var(--gold)); box-shadow: 0 0 12px rgba(217, 164, 65, .6); }
.p-handle { position: absolute; top: 50%; left: 0; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 3px rgba(217, 164, 65, .3); transform: scale(0); transition: transform .15s; }
.p-bar:hover .p-handle, .p-bar:focus-visible .p-handle { transform: scale(1); }
.p-tip { position: absolute; bottom: 30px; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; padding: 4px; background: rgba(10, 4, 7, .94); border: 1px solid var(--line-strong); border-radius: 3px; pointer-events: none; }
.p-tip img { width: 160px; height: 110px; object-fit: cover; background: #111; filter: contrast(1.1); }
.p-tip span { font: 500 .85rem var(--font-ui); font-variant-numeric: tabular-nums; }
.p-row { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.p-btn { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 4px; color: var(--paper); transition: color .15s, background .15s, transform .15s; }
.p-btn:hover { background: rgba(241, 230, 207, .12); color: var(--gold-hi); }
.p-btn:active { transform: scale(.94); }
.p-btn.on, .p-btn[aria-pressed="true"] { color: var(--gold); }
.p-btn .icon { width: 26px; height: 26px; }
.p-txt { padding: 0 10px; font: 600 .95rem var(--font-ui); }
.p-gap { flex: 1; }
.p-time { margin: 0 10px; font: 500 .9rem var(--font-ui); font-variant-numeric: tabular-nums; color: var(--paper-2); white-space: nowrap; }
.p-time b { color: var(--paper); font-weight: 600; }
.p-vol { display: flex; align-items: center; }
.p-volrange { width: 0; opacity: 0; transition: width .25s var(--ease), opacity .2s; accent-color: var(--gold); height: 4px; }
.p-vol:hover .p-volrange, .p-vol:focus-within .p-volrange { width: 84px; opacity: 1; margin: 0 8px 0 2px; }
.p-menu { position: absolute; z-index: 30; right: var(--pad); bottom: 86px; min-width: 190px; padding: 6px; background: rgba(18, 6, 11, .97); border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: 0 20px 50px #000; animation: pop .22s var(--ease) both; }
.p-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px 0 8px; border-radius: 3px; text-align: left; color: var(--paper-2); }
.p-menu button:hover, .p-menu button:focus-visible { background: rgba(217, 164, 65, .14); color: var(--paper); }
.p-menu button[aria-checked="true"] { color: var(--gold-hi); }
.p-menu .icon, .p-menu i { width: 20px; height: 20px; flex: none; }
@media (max-width: 640px) {
  .p-vol, [data-a="back"], [data-a="fwd"], [data-a="pip"], [data-a="theatre"] { display: none; }   /* на телефоне: перемотка двойным тапом, театр и PiP не нужны — важнее, чтобы «Во весь экран» влезал */
  .p-row { min-width: 0; gap: 0; }
  .p-btn { min-width: 40px; } .p-time { margin: 0 4px; font-size: .8rem; min-width: 0; }
  .p-start { min-height: 48px; padding: 0 20px; }
}
@media (max-width: 420px) { [data-a="quality"] { display: none; } .p-txt { padding: 0 6px; } }

/* режим театра: свет притушен, экран на всю ширину */
body.theatre::before { opacity: .05; }
body.theatre .topbar, body.theatre .tabbar { opacity: 0; pointer-events: none; transition: opacity .5s; }
body.theatre .film-backdrop, body.theatre .film-grid, body.theatre .related, body.theatre .footer { opacity: .1; transition: opacity .5s; pointer-events: none; }
body.theatre .stage { width: min(100vw - 24px, calc((100vh - 40px) * 16 / 9)); box-shadow: 0 0 0 1px var(--line), 0 0 0 100vmax rgba(0, 0, 0, .8); }
.stage .player.is-full { position: fixed; inset: 0; }