:root .sig--film-reels { background: radial-gradient(80% 70% at 50% 45%, rgba(161, 0, 255, .26), transparent 70%), #141217; }
:root .sig--film-reels .rl { position: absolute; inset: 0; container-type: size; color: #fff; font: 500 12px/1 var(--f-body); }
:root .sig--film-reels .rl__reels { position: absolute; inset: 0 0 44px; display: grid; place-items: center; transition: opacity .35s .3s, transform .9s var(--ease-out); }
:root .sig--film-reels .is-yt .rl__reels { transition: opacity .3s, transform .6s var(--ease-out); }
:root .sig--film-reels .is-yt .rl__reels { opacity: 0; transform: scale(.9) translateY(-4%); pointer-events: none; }
:root .sig--film-reels .rl__ph { position: absolute; left: 50%; top: 50%; height: min(78cqh, 62cqw); aspect-ratio: 9 / 16; padding: 5px; border-radius: 22px; background: #0a090c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 50px -20px rgba(0, 0, 0, .9); translate: -50% -50%; transition: transform .9s var(--ease-out); }
:root .sig--film-reels .rl__ph--c { z-index: 2; }
:root .sig--film-reels .rl__ph--l { transform: translateX(-62%) scale(.8) rotate(-6deg); filter: brightness(.75); }
:root .sig--film-reels .rl__ph--r { transform: translateX(62%) scale(.8) rotate(6deg); filter: brightness(.75); }
:root .sig--film-reels .is-yt .rl__ph--l, :root .sig--film-reels .is-yt .rl__ph--r { transform: none; }
:root .sig--film-reels .rl__scr { position: relative; height: 100%; overflow: hidden; border-radius: 17px; background: #1b1820; }
:root .sig--film-reels .rl__feed, :root .sig--film-reels .rl__it, :root .sig--film-reels .rl__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root .sig--film-reels .rl__it img { position: absolute; inset: 0; width: 100%; height: 100%; }
:root .sig--film-reels .rl__bg { object-fit: cover; filter: blur(14px) brightness(.55) saturate(1.2); transform: scale(1.2); }
:root .sig--film-reels .rl__fg { object-fit: contain; object-position: 50% 38%; }
:root .sig--film-reels .rl__scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 18%, transparent 62%, rgba(0, 0, 0, .7)); pointer-events: none; }
:root .sig--film-reels .rl__bars { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 2; display: flex; gap: 3px; }
:root .sig--film-reels .rl__bars i { flex: 1; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, #fff calc(var(--p, 0) * 100%), rgba(255, 255, 255, .3) 0); }
:root .sig--film-reels .rl__side { position: absolute; right: 7px; bottom: 26%; z-index: 2; display: grid; gap: 12px; }
:root .sig--film-reels .rl__side svg, :root .sig--film-reels .rl__meta svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
:root .sig--film-reels .rl__meta { position: absolute; left: 9px; right: 36px; bottom: 10px; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 3px 6px; align-items: center; }
:root .sig--film-reels .rl__av { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #a100ff, #e3b8ff); box-shadow: 0 0 0 1.5px #fff; }
:root .sig--film-reels .rl__meta b { font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .sig--film-reels .rl__meta small { display: flex; align-items: center; gap: 3px; font-size: 10px; color: rgba(255, 255, 255, .85); }
:root .sig--film-reels .rl__meta small svg { width: 11px; height: 11px; stroke-width: 2; }
:root .sig--film-reels .rl__sub { position: absolute; left: 8px; right: 8px; top: 74%; z-index: 2; text-align: center; font: 700 clamp(13px, 3.4cqw, 17px)/1.25 var(--f-display); letter-spacing: -.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
:root .sig--film-reels .rl__sub span { display: inline-block; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .2s, transform .35s var(--ease-back), color .3s; }
:root .sig--film-reels .rl__sub span.on { opacity: 1; transform: none; }
:root .sig--film-reels .rl__sub span.on:last-child { color: var(--lilac); }
:root .sig--film-reels .rl__yt { position: absolute; inset: 0 0 44px; display: grid; place-content: center; justify-items: center; gap: 12px; opacity: 0; transform: scale(1.06); transition: opacity .3s, transform .6s var(--ease-out); pointer-events: none; }
:root .sig--film-reels .is-yt .rl__yt { transition: opacity .5s .3s, transform .9s .3s var(--ease-out); }
:root .sig--film-reels .is-yt .rl__yt { opacity: 1; transform: none; }
:root .sig--film-reels .rl__player { position: relative; width: min(88cqw, 120cqh); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9); }
:root .sig--film-reels .rl__player > img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s linear; }
:root .sig--film-reels .rl__player.play > img { transform: scale(1.08); }
:root .sig--film-reels .rl__big { position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; translate: -50% -50%; display: grid; place-items: center; border-radius: 12px; background: #a100ff; transition: opacity .3s, transform .4s var(--ease-back); }
:root .sig--film-reels .rl__big svg { width: 24px; height: 24px; fill: #fff; }
:root .sig--film-reels .play .rl__big { opacity: 0; transform: scale(1.4); }
:root .sig--film-reels .rl__ctrl { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 9px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
:root .sig--film-reels .rl__tl { display: flex; gap: 3px; margin-bottom: 8px; }
:root .sig--film-reels .rl__tl i { position: relative; height: 4px; border-radius: 1px; background: rgba(255, 255, 255, .3); overflow: hidden; }
:root .sig--film-reels .rl__tl b { position: absolute; inset: 0; background: #a100ff; transform-origin: left; transform: scaleX(0); }
:root .sig--film-reels .rl__row { display: flex; align-items: center; gap: 9px; white-space: nowrap; overflow: hidden; }
:root .sig--film-reels .rl__p svg { width: 15px; height: 15px; fill: #fff; display: block; }
:root .sig--film-reels .rl__time { font-variant-numeric: tabular-nums; }
:root .sig--film-reels .rl__chap { color: rgba(255, 255, 255, .85); overflow: hidden; text-overflow: ellipsis; }
:root .sig--film-reels .rl__chs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: min(88cqw, 120cqh); }
:root .sig--film-reels .rl__chs li { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; transition: background .4s, color .4s; }
:root .sig--film-reels .rl__chs li em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--lilac); }
:root .sig--film-reels .rl__chs li.on { background: rgba(161, 0, 255, .3); color: #fff; }
:root .sig--film-reels .rl__fmt { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; }
:root .sig--film-reels .rl__fmt li { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .7); transition: all .45s var(--ease-out); }
:root .sig--film-reels .rl__fmt li.on { border-color: var(--v); background: rgba(161, 0, 255, .28); color: #fff; }