.cinema-player { position: relative; isolation: isolate; aspect-ratio: auto; padding-bottom: 63px; }
.cinema-player video { cursor: pointer; height: auto; aspect-ratio: 16 / 9; }
.cinema-cover { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 15px; border: 1px solid #efe0ff35; border-radius: 70px; padding: 15px 24px 15px 17px; background: #17121fcf; backdrop-filter: blur(20px); color: #eae0f4; box-shadow: 0 12px 50px #0008; white-space: nowrap; transition: background 250ms ease, border-color 250ms ease; }
.cinema-cover > svg { width: 34px; height: 34px; }
.cinema-cover > span { font-size: 14px; text-align: left; }
.cinema-cover small { display: block; font-size: 10px; color: #a693b6; margin-top: 2px; }
.cinema-cover:hover { background: #2c203bdc; border-color: #dab7fc88; }
.cinema-controls { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 13px; padding: 7px 9px; background: #100d17d9; backdrop-filter: blur(18px); border: 1px solid #d4bce522; border-radius: 50px; }
.cinema-controls button { flex: 0 0 32px; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; padding: 6px; background: #dfc5ff0d; color: #dbc9eb; }
.cinema-controls button:hover { background: #dfc5ff20; }
.cinema-controls svg { width: 20px; height: 20px; }
.cinema-time { flex-shrink: 0; color: #dacbe7; font-size: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cinema-time > span { color: #877893; }
.cinema-controls .cinema-seek { --played: 0%; display: block; min-width: 0; flex: 1; width: auto; height: 28px; margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0; cursor: pointer; appearance: none; background: transparent; }
.cinema-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 5px; background: linear-gradient(90deg, #cfb2ed var(--played), #ffffff25 var(--played)); }
.cinema-seek::-webkit-slider-thumb { appearance: none; height: 9px; width: 9px; margin-top: -3px; border-radius: 50%; background: #e9d5fa; box-shadow: 0 0 9px #d0a5fb40; }
.cinema-seek::-moz-range-track { height: 3px; border-radius: 5px; background: #ffffff25; }
.cinema-seek::-moz-range-progress { height: 3px; background: #cfb2ed; }
.cinema-seek::-moz-range-thumb { height: 9px; width: 9px; border: 0; border-radius: 50%; background: #e9d5fa; }
.cinema-seek:disabled { opacity: .4; cursor: default; }
.cinema-message { position: absolute; inset: 12px 12px auto; margin: 0; padding: 10px 14px; color: #e3c9eb; font-size: 12px; background: #17101fed; border-radius: 12px; }
.cinema-message a { text-decoration: underline; }
.cinema-player:fullscreen { border-radius: 0!important; width: 100%; height: 100%; background: #060607; }
.cinema-player:fullscreen video { object-fit: contain; height: 100%; }
.cinema-player:fullscreen .cinema-controls { max-width: 660px; margin: auto; bottom: 28px; }