.films-tv { position: relative; z-index: 3; width: 100%; max-width: 980px; margin-inline: auto; padding: .7rem; border: 1px solid rgb(242 212 158 / 58%); border-radius: 1.5rem; background: linear-gradient(145deg, rgb(241 218 175 / 18%), rgb(7 7 6 / 90%) 40%, rgb(210 174 114 / 16%)); box-shadow: 0 2.5rem 6rem rgb(0 0 0 / 62%), 0 0 4rem rgb(210 174 114 / 15%), inset 0 1px rgb(255 255 255 / 18%); }
.films-screen { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid rgb(255 255 255 / 12%); border-radius: .95rem; background: #050505; }
.films-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.films-screen::after { position: absolute; z-index: 2; inset: 0; background: linear-gradient(125deg, rgb(255 255 255 / 17%), transparent 23%, transparent 76%, rgb(210 174 114 / 10%)); content: ""; mix-blend-mode: screen; pointer-events: none; }
.films-controls { display: grid; grid-template-columns: auto auto auto 1fr auto; gap: .6rem; align-items: center; margin-top: .7rem; }
.films-controls button { min-width: 0; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .55rem; background: rgb(8 8 7 / 66%); color: var(--ink); cursor: pointer; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.films-controls button:hover, .films-controls button:focus-visible { background: rgb(210 174 114 / 18%); }
.films-progress { width: 100%; accent-color: var(--gold); }
.films-meta { display: flex; justify-content: space-between; margin-top: .7rem; color: var(--muted); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 600px) { .films-controls { grid-template-columns: auto auto auto 1fr; } .films-controls button:nth-child(5) { display: none; } }