/* Screening room: Hearth's ink, warm paper and brass, with artwork leading. */ .cinema-host, .cinema-dialog, .cinema-peek, .cinema-score-float { --cinema-bg: #0d1016; --cinema-panel: #191d25; --cinema-ink: #f4f0e9; --cinema-muted: #b8bbc4; --cinema-accent: #edc78d; --cinema-line: #ffffff20; --cinema-glass: #121720db; --cinema-pill-border: rgba(245, 158, 11, .42); --cinema-pill-bg: rgba(10, 11, 16, .72); --cinema-gutter: clamp(24px, 3.3vw, 52px); color-scheme: dark; } .cinema-host { overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; background: var(--cinema-bg) !important; scroll-padding-top: 110px; } .cinema { color: var(--cinema-ink); width: 100%; min-width: 0; padding-bottom: 52px; font-family: inherit; } .cinema *, .cinema-dialog * { box-sizing: border-box; } .cinema [hidden], .cinema-dialog [hidden] { display: none !important; } .cinema button, .cinema input, .cinema-dialog button { font: inherit; } .cinema button, .cinema a, .cinema-dialog button, .cinema-dialog a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .cinema :focus-visible, .cinema-dialog :focus-visible { outline: 2px solid var(--cinema-accent); outline-offset: 4px; } .cinema-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cinema-header { display: flex; align-items: center; gap: 12px; padding: 16px var(--cinema-gutter); min-height: 78px; border-bottom: 1px solid var(--cinema-line); position: sticky; top: 0; z-index: 5; background: var(--cinema-glass); backdrop-filter: blur(20px); } .cinema-heading { flex-shrink: 0; } .cinema-heading h1 { font-size: 27px; line-height: 1.15; margin: 0; font-weight: 700; letter-spacing: -.035em; } .cinema-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--cinema-accent); } .cinema-nav { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; } .cinema-tab { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--cinema-pill-bg); color: var(--cinema-ink); min-height: 46px; padding: 5px 16px; border: 1px solid var(--cinema-pill-border); border-radius: 999px; cursor: pointer; font-weight: 650 !important; white-space: nowrap; flex-shrink: 0; } .cinema-tab[data-cinema-tab]::before { content: ''; width: 18px; height: 18px; flex: none; background: currentColor; mask: var(--cinema-tab-icon) center / contain no-repeat; } .cinema-tab[data-cinema-tab=home] { --cinema-tab-icon: url('data:image/svg+xml;base64,PCEtLQpMdWNpZGUgaG91c2UgaWNvbiBmcm9tIHRoZSBzaGFyZWQgaWNvbiBhcmNoaXZlLgpodHRwczovL2dpdGh1Yi5jb20vbHVjaWRlLWljb25zL2x1Y2lkZQoKSVNDIExpY2Vuc2UKCkNvcHlyaWdodCAoYykgMjAyNiBMdWNpZGUgSWNvbnMgYW5kIENvbnRyaWJ1dG9ycwoKUGVybWlzc2lvbiB0byB1c2UsIGNvcHksIG1vZGlmeSwgYW5kL29yIGRpc3RyaWJ1dGUgdGhpcyBzb2Z0d2FyZSBmb3IgYW55CnB1cnBvc2Ugd2l0aCBvciB3aXRob3V0IGZlZSBpcyBoZXJlYnkgZ3JhbnRlZCwgcHJvdmlkZWQgdGhhdCB0aGUgYWJvdmUKY29weXJpZ2h0IG5vdGljZSBhbmQgdGhpcyBwZXJtaXNzaW9uIG5vdGljZSBhcHBlYXIgaW4gYWxsIGNvcGllcy4KClRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCAiQVMgSVMiIEFORCBUSEUgQVVUSE9SIERJU0NMQUlNUyBBTEwgV0FSUkFOVElFUwpXSVRIIFJFR0FSRCBUTyBUSElTIFNPRlRXQVJFIElOQ0xVRElORyBBTEwgSU1QTElFRCBXQVJSQU5USUVTIE9GCk1FUkNIQU5UQUJJTElUWSBBTkQgRklUTkVTUy4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFIEFVVEhPUiBCRSBMSUFCTEUgRk9SCkFOWSBTUEVDSUFMLCBESVJFQ1QsIElORElSRUNULCBPUiBDT05TRVFVRU5USUFMIERBTUFHRVMgT1IgQU5ZIERBTUFHRVMKV0hBVFNPRVZFUiBSRVNVTFRJTkcgRlJPTSBMT1NTIE9GIFVTRSwgREFUQSBPUiBQUk9GSVRTLCBXSEVUSEVSIElOIEFOCkFDVElPTiBPRiBDT05UUkFDVCwgTkVHTElHRU5DRSBPUiBPVEhFUiBUT1JUSU9VUyBBQ1RJT04sIEFSSVNJTkcgT1VUIE9GCk9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgVVNFIE9SIFBFUkZPUk1BTkNFIE9GIFRISVMgU09GVFdBUkUuCi0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHBhdGggZD0iTTE1IDIxdi04YTEgMSAwIDAgMC0xLTFoLTRhMSAxIDAgMCAwLTEgMXY4Ii8+PHBhdGggZD0iTTMgMTBhMiAyIDAgMCAxIC43MDktMS41MjhsNy02YTIgMiAwIDAgMSAyLjU4MiAwbDcgNkEyIDIgMCAwIDEgMjEgMTB2OWEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnoiLz48L2c+PC9zdmc+Cg=='); } .cinema-tab[data-cinema-tab=show] { --cinema-tab-icon: url('data:image/svg+xml;base64,PCEtLQpMdWNpZGUgdHYgaWNvbiBmcm9tIHRoZSBzaGFyZWQgaWNvbiBhcmNoaXZlLgpodHRwczovL2dpdGh1Yi5jb20vbHVjaWRlLWljb25zL2x1Y2lkZQoKSVNDIExpY2Vuc2UKCkNvcHlyaWdodCAoYykgMjAyNiBMdWNpZGUgSWNvbnMgYW5kIENvbnRyaWJ1dG9ycwoKUGVybWlzc2lvbiB0byB1c2UsIGNvcHksIG1vZGlmeSwgYW5kL29yIGRpc3RyaWJ1dGUgdGhpcyBzb2Z0d2FyZSBmb3IgYW55CnB1cnBvc2Ugd2l0aCBvciB3aXRob3V0IGZlZSBpcyBoZXJlYnkgZ3JhbnRlZCwgcHJvdmlkZWQgdGhhdCB0aGUgYWJvdmUKY29weXJpZ2h0IG5vdGljZSBhbmQgdGhpcyBwZXJtaXNzaW9uIG5vdGljZSBhcHBlYXIgaW4gYWxsIGNvcGllcy4KClRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCAiQVMgSVMiIEFORCBUSEUgQVVUSE9SIERJU0NMQUlNUyBBTEwgV0FSUkFOVElFUwpXSVRIIFJFR0FSRCBUTyBUSElTIFNPRlRXQVJFIElOQ0xVRElORyBBTEwgSU1QTElFRCBXQVJSQU5USUVTIE9GCk1FUkNIQU5UQUJJTElUWSBBTkQgRklUTkVTUy4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFIEFVVEhPUiBCRSBMSUFCTEUgRk9SCkFOWSBTUEVDSUFMLCBESVJFQ1QsIElORElSRUNULCBPUiBDT05TRVFVRU5USUFMIERBTUFHRVMgT1IgQU5ZIERBTUFHRVMKV0hBVFNPRVZFUiBSRVNVTFRJTkcgRlJPTSBMT1NTIE9GIFVTRSwgREFUQSBPUiBQUk9GSVRTLCBXSEVUSEVSIElOIEFOCkFDVElPTiBPRiBDT05UUkFDVCwgTkVHTElHRU5DRSBPUiBPVEhFUiBUT1JUSU9VUyBBQ1RJT04sIEFSSVNJTkcgT1VUIE9GCk9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgVVNFIE9SIFBFUkZPUk1BTkNFIE9GIFRISVMgU09GVFdBUkUuCgpUaGUgTUlUIExpY2Vuc2UgKE1JVCkgKGZvciB0aGUgaWNvbnMgbGlzdGVkIGFib3ZlKQoKQ29weXJpZ2h0IChjKSAyMDEzLXByZXNlbnQgQ29sZSBCZW1pcwoKUGVybWlzc2lvbiBpcyBoZXJlYnkgZ3JhbnRlZCwgZnJlZSBvZiBjaGFyZ2UsIHRvIGFueSBwZXJzb24gb2J0YWluaW5nIGEgY29weQpvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSAiU29mdHdhcmUiKSwgdG8gZGVhbAppbiB0aGUgU29mdHdhcmUgd2l0aG91dCByZXN0cmljdGlvbiwgaW5jbHVkaW5nIHdpdGhvdXQgbGltaXRhdGlvbiB0aGUgcmlnaHRzCnRvIHVzZSwgY29weSwgbW9kaWZ5LCBtZXJnZSwgcHVibGlzaCwgZGlzdHJpYnV0ZSwgc3VibGljZW5zZSwgYW5kL29yIHNlbGwKY29waWVzIG9mIHRoZSBTb2Z0d2FyZSwgYW5kIHRvIHBlcm1pdCBwZXJzb25zIHRvIHdob20gdGhlIFNvZnR3YXJlIGlzCmZ1cm5pc2hlZCB0byBkbyBzbywgc3ViamVjdCB0byB0aGUgZm9sbG93aW5nIGNvbmRpdGlvbnM6CgpUaGUgYWJvdmUgY29weXJpZ2h0IG5vdGljZSBhbmQgdGhpcyBwZXJtaXNzaW9uIG5vdGljZSBzaGFsbCBiZSBpbmNsdWRlZCBpbiBhbGwKY29waWVzIG9yIHN1YnN0YW50aWFsIHBvcnRpb25zIG9mIHRoZSBTb2Z0d2FyZS4KClRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCAiQVMgSVMiLCBXSVRIT1VUIFdBUlJBTlRZIE9GIEFOWSBLSU5ELCBFWFBSRVNTIE9SCklNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLApGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRSBBTkQgTk9OSU5GUklOR0VNRU5ULiBJTiBOTyBFVkVOVCBTSEFMTCBUSEUKQVVUSE9SUyBPUiBDT1BZUklHSFQgSE9MREVSUyBCRSBMSUFCTEUgRk9SIEFOWSBDTEFJTSwgREFNQUdFUyBPUiBPVEhFUgpMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLApPVVQgT0YgT1IgSU4gQ09OTkVDVElPTiBXSVRIIFRIRSBTT0ZUV0FSRSBPUiBUSEUgVVNFIE9SIE9USEVSIERFQUxJTkdTIElOIFRIRQpTT0ZUV0FSRS4KLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIj48cGF0aCBkPSJtMTcgMmwtNSA1bC01LTUiLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTUiIHg9IjIiIHk9IjciIHJ4PSIyIi8+PC9nPjwvc3ZnPgo='); } .cinema-tab[data-cinema-tab=movie] { --cinema-tab-icon: url('data:image/svg+xml;base64,PCEtLQpMdWNpZGUgZmlsbSBpY29uIGZyb20gdGhlIHNoYXJlZCBpY29uIGFyY2hpdmUuCmh0dHBzOi8vZ2l0aHViLmNvbS9sdWNpZGUtaWNvbnMvbHVjaWRlCgpJU0MgTGljZW5zZQoKQ29weXJpZ2h0IChjKSAyMDI2IEx1Y2lkZSBJY29ucyBhbmQgQ29udHJpYnV0b3JzCgpQZXJtaXNzaW9uIHRvIHVzZSwgY29weSwgbW9kaWZ5LCBhbmQvb3IgZGlzdHJpYnV0ZSB0aGlzIHNvZnR3YXJlIGZvciBhbnkKcHVycG9zZSB3aXRoIG9yIHdpdGhvdXQgZmVlIGlzIGhlcmVieSBncmFudGVkLCBwcm92aWRlZCB0aGF0IHRoZSBhYm92ZQpjb3B5cmlnaHQgbm90aWNlIGFuZCB0aGlzIHBlcm1pc3Npb24gbm90aWNlIGFwcGVhciBpbiBhbGwgY29waWVzLgoKVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEICJBUyBJUyIgQU5EIFRIRSBBVVRIT1IgRElTQ0xBSU1TIEFMTCBXQVJSQU5USUVTCldJVEggUkVHQVJEIFRPIFRISVMgU09GVFdBUkUgSU5DTFVESU5HIEFMTCBJTVBMSUVEIFdBUlJBTlRJRVMgT0YKTUVSQ0hBTlRBQklMSVRZIEFORCBGSVRORVNTLiBJTiBOTyBFVkVOVCBTSEFMTCBUSEUgQVVUSE9SIEJFIExJQUJMRSBGT1IKQU5ZIFNQRUNJQUwsIERJUkVDVCwgSU5ESVJFQ1QsIE9SIENPTlNFUVVFTlRJQUwgREFNQUdFUyBPUiBBTlkgREFNQUdFUwpXSEFUU09FVkVSIFJFU1VMVElORyBGUk9NIExPU1MgT0YgVVNFLCBEQVRBIE9SIFBST0ZJVFMsIFdIRVRIRVIgSU4gQU4KQUNUSU9OIE9GIENPTlRSQUNULCBORUdMSUdFTkNFIE9SIE9USEVSIFRPUlRJT1VTIEFDVElPTiwgQVJJU0lORyBPVVQgT0YKT1IgSU4gQ09OTkVDVElPTiBXSVRIIFRIRSBVU0UgT1IgUEVSRk9STUFOQ0UgT0YgVEhJUyBTT0ZUV0FSRS4KLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIj48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIyIi8+PHBhdGggZD0iTTcgM3YxOE0zIDcuNWg0TTMgMTJoMThNMyAxNi41aDRNMTcgM3YxOG0wLTEzLjVoNG0tNCA5aDQiLz48L2c+PC9zdmc+Cg=='); } .cinema-tab[data-cinema-tab=anime] { --cinema-tab-icon: url('data:image/svg+xml;base64,PCEtLSBMdWNpZGUgZmxvd2VyIGljb24gZnJvbSB0aGUgc2hhcmVkIGljb24gYXJjaGl2ZSAobHVjaWRlL2Zsb3dlcikuIGh0dHBzOi8vZ2l0aHViLmNvbS9sdWNpZGUtaWNvbnMvbHVjaWRlIOKAlCBJU0MgTGljZW5zZSwgc2VlIExJQ0VOU0UgaW4gdGhpcyBmb2xkZXIuIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyIvPjxwYXRoIGQ9Ik0xMiAxNi41QTQuNSA0LjUgMCAxIDEgNy41IDEyIDQuNSA0LjUgMCAxIDEgMTIgNy41YTQuNSA0LjUgMCAxIDEgNC41IDQuNSA0LjUgNC41IDAgMSAxLTQuNSA0LjUiLz48cGF0aCBkPSJNMTIgNy41VjkiLz48cGF0aCBkPSJNNy41IDEySDkiLz48cGF0aCBkPSJNMTYuNSAxMkgxNSIvPjxwYXRoIGQ9Ik0xMiAxNi41VjE1Ii8+PHBhdGggZD0ibTggOCAxLjg4IDEuODgiLz48cGF0aCBkPSJNMTQuMTIgOS44OCAxNiA4Ii8+PHBhdGggZD0ibTggMTYgMS44OC0xLjg4Ii8+PHBhdGggZD0iTTE0LjEyIDE0LjEyIDE2IDE2Ii8+PC9nPjwvc3ZnPgoK'); } .cinema-tab[data-cinema-tab=cartoon] { --cinema-tab-icon: url('data:image/svg+xml;base64,PCEtLSBMdWNpZGUgcmFiYml0IGljb24gZnJvbSB0aGUgc2hhcmVkIGljb24gYXJjaGl2ZSAobHVjaWRlL3JhYmJpdCkuIGh0dHBzOi8vZ2l0aHViLmNvbS9sdWNpZGUtaWNvbnMvbHVjaWRlIOKAlCBJU0MgTGljZW5zZSwgc2VlIExJQ0VOU0UgaW4gdGhpcyBmb2xkZXIuIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHBhdGggZD0iTTEzIDE2YTMgMyAwIDAgMSAyLjI0IDUiLz48cGF0aCBkPSJNMTggMTJoLjAxIi8+PHBhdGggZD0iTTE4IDIxaC04YTQgNCAwIDAgMS00LTQgNyA3IDAgMCAxIDctN2guMkw5LjYgNi40YTEgMSAwIDEgMSAyLjgtMi44TDE1LjggN2guMmMzLjMgMCA2IDIuNyA2IDZ2MWEyIDIgMCAwIDEtMiAyaC0xYTMgMyAwIDAgMC0zIDMiLz48cGF0aCBkPSJNMjAgOC41NFY0YTIgMiAwIDEgMC00IDB2MyIvPjxwYXRoIGQ9Ik03LjYxMiAxMi41MjRhMyAzIDAgMSAwLTEuNiA0LjMiLz48L2c+PC9zdmc+Cgo='); } .cinema-tab[aria-current=page] { border-color: var(--cinema-accent); background: rgba(245, 158, 11, .14); } /* Hover is a POINTER state: on a phone it latches onto the last card or control tapped and stays lit. Guarded in place so source order is unchanged; the aria-state and :focus-visible halves stay outside — those are real state. */ @media (hover: hover) { .cinema-tab:hover { border-color: var(--cinema-accent); background: rgba(245, 158, 11, .14); } } .cinema-tab[aria-current=page] { box-shadow: inset 0 0 0 1px var(--cinema-accent); } .cinema-tab:active { background: rgba(245, 158, 11, .24); } .cinema-library { padding-left: 6px; min-width: 0; flex-shrink: 1; } .cinema-library span { overflow: hidden; text-overflow: ellipsis; } .cinema-library-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; } /* The two framed marks at the header's left (2026-10-10): the Hearth mark, the way back to the app's Home while the top bar is tucked, and the chevron that brings both bars back. One frame for both — the tabs' own pill, round — so they read as a pair and as part of the row, not a bare glyph on glass. */ .cinema-home, .cinema-nav-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; padding: 0; margin: 0; border: 1px solid var(--cinema-pill-border); border-radius: 999px; background: var(--cinema-pill-bg); color: var(--cinema-accent); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 233, 196, .08), 0 1px 0 rgba(0, 0, 0, .35); transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } .cinema-home { margin-right: -2px; } .cinema-home-mark { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); transition: transform .18s ease; } .cinema-nav-toggle svg { position: relative; transition: transform .22s cubic-bezier(.3, 1.2, .5, 1); } .cinema-nav-toggle[aria-expanded=true] svg { transform: rotate(180deg); } .cinema-home:active, .cinema-nav-toggle:active { background: rgba(245, 158, 11, .24); transform: translateY(1px); } @media (hover: hover) { .cinema-home:hover, .cinema-nav-toggle:hover { border-color: var(--cinema-accent); background: rgba(245, 158, 11, .14); color: var(--cinema-ink); } .cinema-home:hover .cinema-home-mark { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .cinema-home, .cinema-nav-toggle, .cinema-home-mark, .cinema-nav-toggle svg { transition: none; } } .cinema-heading .hr-btn { position: static; min-height: 46px; animation: none; margin: 0; } .cinema-heading--sr { display: contents; } /* Clusters (2026-10-10): things that belong together share ONE frame — the Hearth mark with the chevron, and the three rooms — with a hairline between segments, so the row reads as two instruments and a library, not six pills. */ .cinema-cluster { display: inline-flex; align-items: center; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--cinema-pill-border); border-radius: 999px; background: var(--cinema-pill-bg); box-shadow: inset 0 1px 0 rgba(255, 233, 196, .08), 0 1px 0 rgba(0, 0, 0, .35); } .cinema-cluster > * { position: relative; } .cinema-cluster > * + *::after { content: ''; position: absolute; left: -2px; top: 26%; bottom: 26%; width: 1px; background: var(--cinema-line); pointer-events: none; transition: opacity .18s ease; } .cinema-cluster > [aria-current=page]::after, .cinema-cluster > [aria-current=page] + *::after, .cinema-cluster > :hover::after, .cinema-cluster > :hover + *::after { opacity: 0; } .cinema-cluster > .cinema-tab, .cinema-cluster > .cinema-home, .cinema-cluster > .cinema-nav-toggle { min-height: 40px; height: 40px; border-color: transparent; background: transparent; box-shadow: none; margin: 0; } .cinema-house > .cinema-home, .cinema-house > .cinema-nav-toggle { width: 40px; } .cinema-cluster > .cinema-tab[aria-current=page] { background: rgba(245, 158, 11, .16); box-shadow: inset 0 0 0 1px var(--cinema-accent); border-color: transparent; } @media (hover: hover) { .cinema-cluster > .cinema-tab:not([aria-current=page]):hover { background: rgba(245, 158, 11, .1); } .cinema-cluster > .cinema-home:hover, .cinema-cluster > .cinema-nav-toggle:hover { border-color: transparent; background: rgba(245, 158, 11, .12); } } /* – □ ✕ (chrome-fold.js windowTray), the last cluster in the row, only while the bars are tucked in the frameless shell: the top bar's own set is back whenever the bars are. Below 600px the floating set stands in again. */ .cinema-winctl { display: none; margin-left: 2px; -webkit-app-region: no-drag; } body.shell-frameless.chrome-fold:not(.chrome-open) .cinema-winctl { display: inline-flex; } .cinema-winbtn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: transparent; color: rgba(232, 226, 214, .86); line-height: 0; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .cinema-winbtn svg { display: block; } @media (hover: hover) { .cinema-winbtn:hover { background: rgba(245, 158, 11, .12); color: var(--cinema-ink); } .cinema-winbtn.is-close:hover { background: #c23535; color: #fff; } } .cinema-winbtn:active { background: rgba(245, 158, 11, .24); } @media (max-width: 600px) { body.shell-frameless.chrome-fold:not(.chrome-open) .cinema-winctl { display: none; } } @media (prefers-reduced-motion: reduce) { .cinema-winbtn { transition: none; } } /* The rule after the rooms (Rober: "vertical linebreak after movies"). */ .cinema-sep { flex: none; align-self: center; width: 1px; height: 30px; margin: 0 6px; background: linear-gradient(180deg, transparent, var(--cinema-pill-border) 20%, var(--cinema-pill-border) 80%, transparent); } /* Up next (cinema.js upNextMenu): Recent and Worth adding in one menu. The pill wears the library pill's shape; the menu is the Recent list's own panel (recent-popin.css .hr-pop), fixed under the pill, with a two-way switch on top. */ .cinema-upnext { padding: 5px 12px 5px 7px; gap: 8px; } .cinema-upnext-ico { width: 30px; height: 30px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 8px rgba(245, 158, 11, .35)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); } .cinema-upnext .cinema-library-caret { display: inline-flex; } .cinema-upnext[aria-expanded=true] { border-color: var(--cinema-accent); background: rgba(245, 158, 11, .14); } .cinema-upnext[aria-expanded=true] .cinema-library-caret { transform: rotate(180deg); } @media (hover: hover) { .cinema-upnext:hover .cinema-upnext-ico { transform: rotate(-10deg) scale(1.08); } } .hr-pop.cinema-upnext-pop { position: fixed; z-index: 10030; transform-origin: 40px -10px; } .cinema-upnext-tabs { display: flex; gap: 4px; padding: 3px; margin: 0 0 6px; border-radius: 11px; background: rgba(0, 0, 0, .28); border: 1px solid #262b3c; } .cinema-upnext-tab { flex: 1 1 0; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #9aa3b8; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .16s, color .16s; } .cinema-upnext-tab[aria-selected=true] { background: rgba(245, 158, 11, .16); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .45); } @media (hover: hover) { .cinema-upnext-tab:hover:not([aria-selected=true]) { color: #e7ecf3; background: rgba(255, 255, 255, .05); } } .cinema-upnext-tab:focus-visible { outline: 2px solid var(--cinema-accent, #edc78d); outline-offset: 1px; } .cinema-upnext-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .cinema-upnext-body > .hr-list { flex: 1 1 auto; } .cinema-upnext-ask svg { margin-left: 0; } @media (prefers-reduced-motion: reduce) { .cinema-upnext-ico, .cinema-upnext-tab, .cinema-cluster > * + *::after { transition: none; } } /* body.cinema-nav-collapsed: the Cinema home is up with its nav folded (has-flags.js; a class, not `body:has()`). With the chrome fold on the page (body.cfold-live, renderer/chrome-fold.js) the header watches as a knob-less dock and BOTH bars tuck and slide; this rule is the fallback for a page without it. */ body.cinema-nav-collapsed:not(.cfold-live) > nav.view-tabs { display: none; } #vsplit-gate.cinema-host { height: calc(100dvh - var(--cinema-top, 101px)); } /* The page's scrollbar starts under the header, not beside it (Rober, 2026-10-11: "can the scrollbar on right start after the main top menu?"). The track is pushed down by the header's measured height (cinema.js, --cinema-head-h); the gutter above it wears the header's own glass and rule, painted as the host's fixed background, so the header reads as running to the window's edge. */ #vsplit-gate.cinema-host { background: linear-gradient(#12171f, #12171f) top right / 100% calc(var(--cinema-head-h, 78px) - 1px) no-repeat, linear-gradient(#ffffff20, #ffffff20) 0 calc(var(--cinema-head-h, 78px) - 1px) / 100% 1px no-repeat, var(--cinema-bg) !important; } /* A standard scrollbar (the app's :root sets scrollbar-color, profiles.css, which every element inherits) cannot start part-way down, so this page alone goes back to the app's custom one: the same gold thumb, its track pushed under the header. */ #vsplit-gate.cinema-host { scrollbar-color: auto; scrollbar-width: auto; } #vsplit-gate.cinema-host::-webkit-scrollbar { width: 12px; } #vsplit-gate.cinema-host::-webkit-scrollbar-track { margin-top: var(--cinema-head-h, 78px); background: transparent; } #vsplit-gate.cinema-host::-webkit-scrollbar-thumb { background: var(--profile-scroll-thumb, #b08a50); border: 3px solid var(--cinema-bg); border-radius: 6px; } #vsplit-gate.cinema-host::-webkit-scrollbar-thumb:hover { background: var(--profile-scroll-hover, #d4ae70); } #vsplit-gate.cinema-host::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .cinema-search-wrap { position: relative; width: 250px; min-width: 180px; flex: 1 1 250px; } .cinema-search { background: var(--cinema-pill-bg) url('data:image/webp;base64,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') 14px center / 26px no-repeat; border: 1px solid var(--cinema-pill-border); border-radius: 999px; color: var(--cinema-ink); width: 100%; min-height: 48px; padding: 10px 46px 10px 50px; font-size: 16px !important; appearance: none; transition: border-color .18s, box-shadow .18s; } .cinema-search:focus { border-color: var(--cinema-accent); outline: none; box-shadow: 0 0 0 3px #edc78d1a; } .cinema-search::-webkit-search-cancel-button { display: none; } .cinema-search::placeholder { color: var(--cinema-muted); } .cinema-search-clear { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; font-size: 24px !important; border: 0; color: var(--cinema-muted); background: transparent; cursor: pointer; border-radius: 50%; } @media (hover: hover) { .cinema-search-clear:hover { color: var(--cinema-ink); background: #ffffff0a; } } .cinema-search-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--cinema-line); border-radius: 9px; background: var(--cinema-panel) url('data:image/webp;base64,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') center / 30px 30px no-repeat; cursor: pointer; } .cinema-search-toggle[aria-expanded=true] { border-color: var(--cinema-accent); } @media (hover: hover) { .cinema-search-toggle:hover { border-color: var(--cinema-accent); } } .cinema-content { padding-bottom: 24px; } .cinema-feature { position: relative; isolation: isolate; margin-bottom: 8px; background: var(--cinema-bg); } .cinema-feature-stage { position: relative; overflow: hidden; } .cinema-feature-slide { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(430px, 36vw, 510px); padding: 54px var(--cinema-gutter) 78px; overflow: hidden; } .cinema-feature-slide.is-leaving { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .cinema-backdrop { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; } .cinema-feature-slide::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#0d1016ed 0%,#0d1016ba 28%,#0d10165c 54%,#0d101605 84%),linear-gradient(0deg,var(--cinema-bg) 0%,#0d101682 16%,transparent 76%); } .cinema-feature-copy { width: min(590px, 53%); } .cinema-feature-copy h2 { font-size: clamp(38px, 4.6vw, 68px); line-height: 1.03; letter-spacing: -.045em; margin: 12px 0 18px; text-wrap: balance; text-shadow: 0 2px 30px #0004; } .cinema-metadata { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; color: #d3d5dc; font-size: 12px; line-height: 1.5; } .cinema-metadata > span + span { border-left: 1px solid #ffffff35; padding-left: 12px; } .cinema-metadata > .cinema-rating { border: 1px solid #edc78d65; padding: 1px 6px; border-radius: 4px; color: var(--cinema-accent); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .cinema-meta { color: var(--cinema-muted); font-size: 13px; line-height: 1.6; margin: 8px 0; } .cinema-overview { color: #e3e4e9; font-size: 15px; line-height: 1.65; max-width: 480px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 18px 0 24px; text-wrap: pretty; } .cinema-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .cinema-button { min-height: 46px; padding: 12px 21px; color: var(--cinema-ink); background: #272c35d9; border: 1px solid #ffffff29; border-radius: 7px; font-weight: 650 !important; font-size: 14px !important; cursor: pointer; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; justify-content: center; transition: background .16s, transform .16s; } .cinema-primary { color: #241b0e; background: var(--cinema-accent); border-color: transparent; } @media (hover: hover) { .cinema-button:hover { background: #3a404b; transform: translateY(-1px); } .cinema-primary:hover { background: #f7d7a6; } } .cinema-button:active { transform: scale(.98); } .cinema-play-glyph { display: inline-block; flex-shrink: 0; width: 0; height: 0; border-block: 6px solid transparent; border-left: 9px solid currentColor; } .cinema-resume-note { margin: 12px 0 0; color: var(--cinema-muted); font-size: 12px; } .cinema-feature-controls { position: absolute; right: var(--cinema-gutter); bottom: 25px; display: flex; gap: 10px; align-items: center; z-index: 2; } .cinema-chapters { display: flex; gap: 6px; min-width: 0; } .cinema-chapter { display: flex; align-items: center; position: relative; width: 60px; height: 44px; padding: 5px 0; border: 0; background: transparent; cursor: pointer; opacity: .5; transition: opacity .18s, transform .18s; } .cinema-chapter img { width: 100%; height: 34px; object-fit: cover; border-radius: 4px; background: var(--cinema-panel); } .cinema-chapter::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--cinema-accent); transform: scaleX(0); transition: transform .2s; } .cinema-chapter[aria-pressed=true] { opacity: 1; } @media (hover: hover) { .cinema-chapter:hover { opacity: 1; } } .cinema-chapter[aria-pressed=true]::after { transform: scaleX(1); } .cinema-chapter:active { transform: scale(.95); } .cinema-counter { position: absolute; right: 0; top: -20px; color: var(--cinema-muted); font-size: 11px; font-variant-numeric: tabular-nums; } .cinema-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--cinema-line); border-radius: 50%; background: var(--cinema-glass); color: var(--cinema-ink); font-size: 26px !important; cursor: pointer; flex-shrink: 0; transition: background .15s, opacity .15s; } @media (hover: hover) { .cinema-arrow:hover:not(:disabled) { background: #343b46; } } .cinema-arrow:active:not(:disabled) { background: #48505d; } .cinema-arrow:disabled { opacity: .28; cursor: default; } .cinema-shelf { margin: 28px 0 36px; padding: 0 var(--cinema-gutter); min-width: 0; scroll-margin-top: 100px; } .cinema-shelf-heading { display: flex; align-items: center; gap: 16px; min-height: 44px; margin-bottom: 12px; } .cinema-shelf-heading h2 { font-size: 22px; letter-spacing: -.025em; margin: 0; text-wrap: balance; } /* Which services a title is trending on: their logos in the poster's lower left corner. They step aside for the hover hint that shares that edge. */ .cinema-streams { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; gap: 4px; align-items: center; pointer-events: none; transition: opacity .16s; } /* Specific enough to beat `.cinema-card-art img`, which sizes the POSTER and hides it until it loads: a logo must be neither. */ .cinema-card .cinema-card-art .cinema-streams img { width: 22px; height: 22px; opacity: 1; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 3px 8px rgba(0, 0, 0, .55); } .cinema-streams-more { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--cinema-ink); background: var(--cinema-glass); border: 1px solid var(--cinema-line); } .cinema-card:hover .cinema-streams, .cinema-card:focus-visible .cinema-streams { opacity: 0; } /* While a poster is missing, its title card sits above the logos, not under them. */ .cinema-card-art:has(.cinema-streams) .cinema-art-fallback { padding-bottom: 42px; } .cinema-shelf-compact .cinema-card .cinema-card-art .cinema-streams img { width: 18px; height: 18px; border-radius: 5px; } /* "Trending by service": one chip per service, the door to its shelf in search. */ .cinema-services { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; overflow-x: auto; scrollbar-width: none; padding: 4px var(--cinema-gutter); scroll-padding-inline: var(--cinema-gutter); } .cinema-services::-webkit-scrollbar { display: none; } .cinema-services-label { flex: 0 0 auto; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--cinema-muted); margin-right: 4px; white-space: nowrap; } .cinema-service-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--cinema-line); background: var(--cinema-glass); color: var(--cinema-ink); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .15s, transform .15s; } .cinema-service-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .cinema-service-chip:hover { border-color: var(--cinema-accent); transform: translateY(-1px); } .cinema-service-chip:focus-visible { outline: 2px solid var(--cinema-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cinema-service-chip { transition: none; } .cinema-service-chip:hover { transform: none; } } /* "Trending on Netflix": the service's own square logo, sat on the title's line. */ .cinema-shelf-logo { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .35); margin-right: -4px; } .cinema-text-button { color: var(--cinema-accent); border: 0; background: transparent; cursor: pointer; min-height: 44px; padding: 8px 10px; font-size: 13px !important; } @media (hover: hover) { .cinema-text-button:hover { text-decoration: underline; text-underline-offset: 4px; } } .cinema-rail-controls { display: flex; gap: 7px; margin-left: auto; } /* A rail runs to the page's edges: cards rest on the gutter and travel under it, so nothing is cut in two at an invisible line. The top padding is room for the marks that hang over a cover's corner (and the hover lift), which a scroller would otherwise clip. */ .cinema-rail { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 14px var(--cinema-gutter); margin: -14px calc(-1 * var(--cinema-gutter)); scroll-padding-inline: var(--cinema-gutter); } .cinema-rail::-webkit-scrollbar { display: none; } /* Snap is for a finger. With a pointer it would re-snap after a card slides itself into view (cinema.js reveal()) and pull it out from under the cursor. */ @media (hover: none) { .cinema-rail { scroll-snap-type: x proximity; } } /* The side with more behind it fades out at the edge (cinema.js sets data-more-left / data-more-right as the rail scrolls). */ @property --cinema-fade-l { syntax: ''; inherits: false; initial-value: 0px; } @property --cinema-fade-r { syntax: ''; inherits: false; initial-value: 0px; } @media (hover: hover) { .cinema-rail { mask-image: linear-gradient(90deg, transparent, #000 var(--cinema-fade-l), #000 calc(100% - var(--cinema-fade-r)), transparent); transition: --cinema-fade-l .28s, --cinema-fade-r .28s; } .cinema-rail[data-more-left] { --cinema-fade-l: calc(var(--cinema-gutter) * 1.7); } .cinema-rail[data-more-right] { --cinema-fade-r: calc(var(--cinema-gutter) * 1.7); } } .cinema-slot { position: relative; flex: 0 0 clamp(150px, 13.5vw, 204px); min-width: 0; scroll-snap-align: start; } /* A shelf off screen is neither laid out nor painted (Rober, 2026-10-11: "first load and scroll is laggy" — the page holds ~15 shelves and ~300 cards, ~14,000 nodes). It keeps the height it last had; one never drawn reserves a poster shelf's, which is what the card width makes it (2:3 art plus its caption). A shelf whose cards are still to be made (cinema.js rail(), data-pending) holds the same room, so nothing below it jumps. */ .cinema-rail { --cinema-rail-h: calc(clamp(150px, 13.5vw, 204px) * 1.5 + 79px); content-visibility: auto; contain-intrinsic-size: auto var(--cinema-rail-h); } .cinema-rail[data-pending] { min-height: var(--cinema-rail-h); } .cinema-rail[data-pending=wide] { min-height: calc(var(--cinema-rail-h) * .82); } .cinema-rail[data-pending=compact] { min-height: 140px; } .cinema-slot-wide { flex: 1 0 calc((100% - 36px) / 3); } .cinema-card { position: relative; display: block; width: 100%; text-align: left; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 9px; } /* The frame is what lifts on hover and what the cover's marks hang from; the art inside it clips (the poster zoom), so nothing that overlaps a corner can live in there. */ .cinema-card-frame { position: relative; display: block; transition: transform .2s; } .cinema-card-art { display: block; position: relative; isolation: isolate; aspect-ratio: 2 / 3; width: 100%; background: var(--cinema-panel); border-radius: 9px; overflow: hidden; box-shadow: 0 6px 16px #0003; transition: box-shadow .2s; } .cinema-card-art::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--cinema-line); border-radius: inherit; pointer-events: none; } /* What a cover shows until its picture is there, and for good when no picture will come (cinema.js picture() climbs the art, a retry, the file's frame): a title card — one of the painted backdrops (--cinema-ph, picked per title) under a scrim, the room's glyph and the name set at its foot. Never a flat slab. It waits a moment before fading in, so a cover that loads at once never shows it. */ .cinema-art-fallback { position: absolute; z-index: -1; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 9px; padding: 14px 13px 16px; overflow: hidden; font-size: 16px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; text-wrap: balance; color: var(--cinema-accent); text-shadow: 0 1px 10px #000c; background: linear-gradient(180deg, #0d101638 0%, #0d101666 38%, #0d1016f2 100%), var(--cinema-ph, none) center / cover no-repeat, var(--cinema-panel); animation: cinema-ph-in .35s .3s both; } @keyframes cinema-ph-in { from { opacity: 0; } } .cinema-art-fallback::before { content: ''; flex: none; width: 22px; height: 22px; background: currentColor; opacity: .85; mask: url('data:image/svg+xml;base64,PCEtLQpMdWNpZGUgZmlsbSBpY29uIGZyb20gdGhlIHNoYXJlZCBpY29uIGFyY2hpdmUuCmh0dHBzOi8vZ2l0aHViLmNvbS9sdWNpZGUtaWNvbnMvbHVjaWRlCgpJU0MgTGljZW5zZQoKQ29weXJpZ2h0IChjKSAyMDI2IEx1Y2lkZSBJY29ucyBhbmQgQ29udHJpYnV0b3JzCgpQZXJtaXNzaW9uIHRvIHVzZSwgY29weSwgbW9kaWZ5LCBhbmQvb3IgZGlzdHJpYnV0ZSB0aGlzIHNvZnR3YXJlIGZvciBhbnkKcHVycG9zZSB3aXRoIG9yIHdpdGhvdXQgZmVlIGlzIGhlcmVieSBncmFudGVkLCBwcm92aWRlZCB0aGF0IHRoZSBhYm92ZQpjb3B5cmlnaHQgbm90aWNlIGFuZCB0aGlzIHBlcm1pc3Npb24gbm90aWNlIGFwcGVhciBpbiBhbGwgY29waWVzLgoKVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEICJBUyBJUyIgQU5EIFRIRSBBVVRIT1IgRElTQ0xBSU1TIEFMTCBXQVJSQU5USUVTCldJVEggUkVHQVJEIFRPIFRISVMgU09GVFdBUkUgSU5DTFVESU5HIEFMTCBJTVBMSUVEIFdBUlJBTlRJRVMgT0YKTUVSQ0hBTlRBQklMSVRZIEFORCBGSVRORVNTLiBJTiBOTyBFVkVOVCBTSEFMTCBUSEUgQVVUSE9SIEJFIExJQUJMRSBGT1IKQU5ZIFNQRUNJQUwsIERJUkVDVCwgSU5ESVJFQ1QsIE9SIENPTlNFUVVFTlRJQUwgREFNQUdFUyBPUiBBTlkgREFNQUdFUwpXSEFUU09FVkVSIFJFU1VMVElORyBGUk9NIExPU1MgT0YgVVNFLCBEQVRBIE9SIFBST0ZJVFMsIFdIRVRIRVIgSU4gQU4KQUNUSU9OIE9GIENPTlRSQUNULCBORUdMSUdFTkNFIE9SIE9USEVSIFRPUlRJT1VTIEFDVElPTiwgQVJJU0lORyBPVVQgT0YKT1IgSU4gQ09OTkVDVElPTiBXSVRIIFRIRSBVU0UgT1IgUEVSRk9STUFOQ0UgT0YgVEhJUyBTT0ZUV0FSRS4KLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIj48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIyIi8+PHBhdGggZD0iTTcgM3YxOE0zIDcuNWg0TTMgMTJoMThNMyAxNi41aDRNMTcgM3YxOG0wLTEzLjVoNG0tNCA5aDQiLz48L2c+PC9zdmc+Cg==') center / contain no-repeat; } .cinema-card-art[data-kind="show"] .cinema-art-fallback::before { mask-image: url('data:image/svg+xml;base64,PCEtLQpMdWNpZGUgdHYgaWNvbiBmcm9tIHRoZSBzaGFyZWQgaWNvbiBhcmNoaXZlLgpodHRwczovL2dpdGh1Yi5jb20vbHVjaWRlLWljb25zL2x1Y2lkZQoKSVNDIExpY2Vuc2UKCkNvcHlyaWdodCAoYykgMjAyNiBMdWNpZGUgSWNvbnMgYW5kIENvbnRyaWJ1dG9ycwoKUGVybWlzc2lvbiB0byB1c2UsIGNvcHksIG1vZGlmeSwgYW5kL29yIGRpc3RyaWJ1dGUgdGhpcyBzb2Z0d2FyZSBmb3IgYW55CnB1cnBvc2Ugd2l0aCBvciB3aXRob3V0IGZlZSBpcyBoZXJlYnkgZ3JhbnRlZCwgcHJvdmlkZWQgdGhhdCB0aGUgYWJvdmUKY29weXJpZ2h0IG5vdGljZSBhbmQgdGhpcyBwZXJtaXNzaW9uIG5vdGljZSBhcHBlYXIgaW4gYWxsIGNvcGllcy4KClRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCAiQVMgSVMiIEFORCBUSEUgQVVUSE9SIERJU0NMQUlNUyBBTEwgV0FSUkFOVElFUwpXSVRIIFJFR0FSRCBUTyBUSElTIFNPRlRXQVJFIElOQ0xVRElORyBBTEwgSU1QTElFRCBXQVJSQU5USUVTIE9GCk1FUkNIQU5UQUJJTElUWSBBTkQgRklUTkVTUy4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFIEFVVEhPUiBCRSBMSUFCTEUgRk9SCkFOWSBTUEVDSUFMLCBESVJFQ1QsIElORElSRUNULCBPUiBDT05TRVFVRU5USUFMIERBTUFHRVMgT1IgQU5ZIERBTUFHRVMKV0hBVFNPRVZFUiBSRVNVTFRJTkcgRlJPTSBMT1NTIE9GIFVTRSwgREFUQSBPUiBQUk9GSVRTLCBXSEVUSEVSIElOIEFOCkFDVElPTiBPRiBDT05UUkFDVCwgTkVHTElHRU5DRSBPUiBPVEhFUiBUT1JUSU9VUyBBQ1RJT04sIEFSSVNJTkcgT1VUIE9GCk9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgVVNFIE9SIFBFUkZPUk1BTkNFIE9GIFRISVMgU09GVFdBUkUuCgpUaGUgTUlUIExpY2Vuc2UgKE1JVCkgKGZvciB0aGUgaWNvbnMgbGlzdGVkIGFib3ZlKQoKQ29weXJpZ2h0IChjKSAyMDEzLXByZXNlbnQgQ29sZSBCZW1pcwoKUGVybWlzc2lvbiBpcyBoZXJlYnkgZ3JhbnRlZCwgZnJlZSBvZiBjaGFyZ2UsIHRvIGFueSBwZXJzb24gb2J0YWluaW5nIGEgY29weQpvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSAiU29mdHdhcmUiKSwgdG8gZGVhbAppbiB0aGUgU29mdHdhcmUgd2l0aG91dCByZXN0cmljdGlvbiwgaW5jbHVkaW5nIHdpdGhvdXQgbGltaXRhdGlvbiB0aGUgcmlnaHRzCnRvIHVzZSwgY29weSwgbW9kaWZ5LCBtZXJnZSwgcHVibGlzaCwgZGlzdHJpYnV0ZSwgc3VibGljZW5zZSwgYW5kL29yIHNlbGwKY29waWVzIG9mIHRoZSBTb2Z0d2FyZSwgYW5kIHRvIHBlcm1pdCBwZXJzb25zIHRvIHdob20gdGhlIFNvZnR3YXJlIGlzCmZ1cm5pc2hlZCB0byBkbyBzbywgc3ViamVjdCB0byB0aGUgZm9sbG93aW5nIGNvbmRpdGlvbnM6CgpUaGUgYWJvdmUgY29weXJpZ2h0IG5vdGljZSBhbmQgdGhpcyBwZXJtaXNzaW9uIG5vdGljZSBzaGFsbCBiZSBpbmNsdWRlZCBpbiBhbGwKY29waWVzIG9yIHN1YnN0YW50aWFsIHBvcnRpb25zIG9mIHRoZSBTb2Z0d2FyZS4KClRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCAiQVMgSVMiLCBXSVRIT1VUIFdBUlJBTlRZIE9GIEFOWSBLSU5ELCBFWFBSRVNTIE9SCklNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLApGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRSBBTkQgTk9OSU5GUklOR0VNRU5ULiBJTiBOTyBFVkVOVCBTSEFMTCBUSEUKQVVUSE9SUyBPUiBDT1BZUklHSFQgSE9MREVSUyBCRSBMSUFCTEUgRk9SIEFOWSBDTEFJTSwgREFNQUdFUyBPUiBPVEhFUgpMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLApPVVQgT0YgT1IgSU4gQ09OTkVDVElPTiBXSVRIIFRIRSBTT0ZUV0FSRSBPUiBUSEUgVVNFIE9SIE9USEVSIERFQUxJTkdTIElOIFRIRQpTT0ZUV0FSRS4KLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIj48cGF0aCBkPSJtMTcgMmwtNSA1bC01LTUiLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTUiIHg9IjIiIHk9IjciIHJ4PSIyIi8+PC9nPjwvc3ZnPgo='); } .cinema-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .24s; } .cinema-card-art img:not(.is-loaded) { opacity: 0; } .cinema-wide .cinema-card-art { aspect-ratio: 2 / 1; } /* Always cover art (cinema.js picture()): a picture that is missing or will not load is hidden, which leaves the title card above standing in its place. */ .cinema img.is-broken, .cinema-dialog img.is-broken { display: none; } .cinema-feature-slide[data-art="placeholder"] { background: var(--cinema-ph, none) center / cover no-repeat, var(--cinema-panel); } .cinema-chapter[data-art="placeholder"]::before { content: ''; width: 100%; height: 34px; border-radius: 4px; background: var(--cinema-ph, none) center / cover no-repeat, var(--cinema-panel); } .cinema-card-copy { display: block; min-width: 0; } .cinema-card strong { display: block; margin: 11px 0 5px; font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cinema-card small { display: block; color: var(--cinema-muted); font-size: 12px; line-height: 1.5; } .cinema-card .cinema-scorecard { backdrop-filter: none; -webkit-backdrop-filter: none; } .cinema-hover-rating { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top center; transition: opacity .16s, transform .24s cubic-bezier(.22,1,.36,1); pointer-events: none; } .cinema-card:focus-visible .cinema-hover-rating { opacity: 1; transform: none; } @media (hover: hover) { .cinema-card:hover .cinema-hover-rating { opacity: 1; transform: none; } } .cinema-scorecard { display: block; overflow: hidden; color: #f5f1e9; background: linear-gradient(145deg, #25251ef5, #10151bf7 64%); border: 1px solid #e9c68870; border-radius: 9px; box-shadow: 0 10px 30px #0006, inset 0 1px #fff1; backdrop-filter: blur(18px); } .cinema-scorecard-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 10px; border-bottom: 1px solid #e9c68833; font-size: 9px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: #dfc49d; } .cinema-scorecard-caption { display: none; } .cinema-scorecard-list { display: grid; padding: 1px 10px 7px; } .cinema-score-row { --score-color: #edc78d; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; row-gap: 4px; padding: 8px 0 5px; border-bottom: 1px solid #ffffff12; font-variant-numeric: tabular-nums; } .cinema-score-row:last-child { border: 0; } .cinema-score-row[data-source=imdb] { --score-color: #f5ca48; } .cinema-score-row[data-source=tomatoes] { --score-color: #ff8f77; } .cinema-score-row[data-source=metacritic] { --score-color: #a6d991; } .cinema-score-row[data-source=tmdb] { --score-color: #6ad5c6; } .cinema-score-source { font-size: 10px; font-weight: 700; line-height: 1.2; color: var(--score-color); } .cinema-score-row[data-source=imdb] .cinema-score-source { justify-self: start; padding: 3px 5px; border-radius: 3px; background: var(--score-color); color: #141914; letter-spacing: -.04em; } .cinema-score-value { display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; white-space: nowrap; } .cinema-score-value b { font-size: 23px; line-height: 1; font-weight: 750; letter-spacing: -.05em; color: #fff9ed; } .cinema-score-value > span { font-size: 9px; color: #b7bdc5; } .cinema-score-row[data-status] .cinema-score-value b { color: #a4afb7; } .cinema-score-row[data-status] .cinema-score-value > span { font-size: 8px; line-height: 1.2; white-space: normal; } .cinema-score-measure { grid-column: 1 / -1; height: 2px; width: 100%; overflow: hidden; background: #ffffff12; border-radius: 1px; } .cinema-score-measure i { display: block; width: 100%; height: 100%; background: var(--score-color); transform-origin: left center; } .cinema-score-context { display: none; } :is(.cinema-card, .cinema-score-float) .cinema-scorecard-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; } :is(.cinema-card, .cinema-score-float) .cinema-scorecard[data-count="1"] .cinema-scorecard-list { grid-template-columns: 1fr; } :is(.cinema-card, .cinema-score-float) .cinema-score-row { grid-template-columns: 1fr; row-gap: 5px; padding: 8px 0; border: 0; } :is(.cinema-card, .cinema-score-float) .cinema-score-source { min-height: 16px; display: flex; align-items: center; } :is(.cinema-card, .cinema-score-float) .cinema-scorecard:not([data-count="1"]) .cinema-score-source { min-height: 24px; } :is(.cinema-card, .cinema-score-float) .cinema-score-row[data-source=imdb] .cinema-score-source { padding-block: 1px; } :is(.cinema-card, .cinema-score-float) .cinema-score-value { justify-content: flex-start; } :is(.cinema-card, .cinema-score-float) .cinema-scorecard[data-count="1"] .cinema-score-row { grid-template-columns: minmax(0,1fr) auto; } .cinema-card.cinema-wide .cinema-scorecard-list, .cinema-score-float.is-wide .cinema-scorecard-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* The hover scorecard lifted ABOVE its card (cinema.js floatScore): one fixed layer on , so the sideways-scrolling rail cannot clip it. It rises out of the card's top edge; .is-over is the fallback for a card at the top of the window, where it drops onto the picture instead. Below the story peek. */ .cinema-score-float { position: fixed; z-index: 10080; left: 0; top: 0; pointer-events: none; opacity: 0; transform: translateY(8px) scale(.97); transform-origin: bottom center; transition: opacity .16s, transform .24s cubic-bezier(.22,1,.36,1); } .cinema-score-float.is-over { transform: translateY(-8px) scale(.97); transform-origin: top center; } .cinema-score-float.is-on { opacity: 1; transform: none; } .cinema-score-float > .cinema-hover-rating { position: static; opacity: 1; transform: none; transition: none; } .cinema-score-float .cinema-scorecard { box-shadow: 0 18px 44px #000b, 0 0 0 1px #00000040, inset 0 1px #fff1; } @media (prefers-reduced-motion: reduce) { .cinema-score-float, .cinema-score-float.is-over { transition: none; transform: none; } } .cinema-scores-empty { padding: 10px 0; color: #c0c4cb; font-size: 11px; } .cinema-poster { transition: transform .34s cubic-bezier(.22,1,.36,1) !important; } .cinema-card:focus-visible .cinema-card-art { border-color: #e6c79599; box-shadow: 0 12px 28px #0006, 0 0 0 1px #e6c79535; } .cinema-card:focus-visible .cinema-card-art::after { border-color: #e6c79599; } .cinema-card:focus-visible .cinema-poster { transform: scale(1.055); } @media (hover: hover) { .cinema-card:hover .cinema-card-art { border-color: #e6c79599; box-shadow: 0 12px 28px #0006, 0 0 0 1px #e6c79535; } .cinema-card:hover .cinema-card-art::after { border-color: #e6c79599; } .cinema-card:hover .cinema-poster { transform: scale(1.055); } } .cinema-detail-ratings { margin: 24px 0; } .cinema-detail-ratings .cinema-scorecard-heading { font-size: 11px; padding: 13px 16px; } .cinema-detail-ratings .cinema-scorecard-caption { display: inline; color: #bfc3ca; font-size: 10px; text-transform: none; letter-spacing: 0; } .cinema-detail-ratings .cinema-scorecard-list { display: flex; flex-wrap: wrap; padding: 8px; } .cinema-detail-ratings .cinema-score-row { flex: 1 1 135px; margin: 0 8px; padding: 8px 0 12px; border: 0; row-gap: 9px; } .cinema-detail-ratings .cinema-score-value b { font-size: 31px; } .cinema-detail-ratings .cinema-score-context { display: block; grid-column: 1 / -1; font-size: 11px; color: #bfc3ca; } .cinema-ratings-credit { font-size: 11px; color: var(--cinema-muted); margin: 10px 0 0; } .cinema-ratings-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: -8px 0; } /* The marks a cover wears (cinema.js marks()), each hung askew over its own corner: the server it is on as a brass-rimmed stamp over the top right, and over the bottom right your own watched seal with anyone else who watched it beside it. They sit above the hover scorecard, whose heading is empty there. */ .cinema-stamp { position: absolute; z-index: 3; top: -9px; right: -9px; width: 38px; height: 38px; padding: 2px; border-radius: 10px; background: linear-gradient(140deg, #f8e1b6, #c2924c 52%, #7d5a2a); box-shadow: 0 5px 12px #000a, inset 0 0 0 1px #fff4; transform: rotate(8deg); transition: transform .26s cubic-bezier(.22,1,.36,1); } .cinema-stamp img { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; background: var(--cinema-panel); } .cinema-stamp[data-art="placeholder"]::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 8px; background: var(--cinema-panel); } .cinema-stamp[data-art="placeholder"]::after { content: ''; position: absolute; inset: 9px; background: var(--cinema-accent); mask: url('data:image/svg+xml;base64,PCEtLQpMdWNpZGUgaG91c2UgaWNvbiBmcm9tIHRoZSBzaGFyZWQgaWNvbiBhcmNoaXZlLgpodHRwczovL2dpdGh1Yi5jb20vbHVjaWRlLWljb25zL2x1Y2lkZQoKSVNDIExpY2Vuc2UKCkNvcHlyaWdodCAoYykgMjAyNiBMdWNpZGUgSWNvbnMgYW5kIENvbnRyaWJ1dG9ycwoKUGVybWlzc2lvbiB0byB1c2UsIGNvcHksIG1vZGlmeSwgYW5kL29yIGRpc3RyaWJ1dGUgdGhpcyBzb2Z0d2FyZSBmb3IgYW55CnB1cnBvc2Ugd2l0aCBvciB3aXRob3V0IGZlZSBpcyBoZXJlYnkgZ3JhbnRlZCwgcHJvdmlkZWQgdGhhdCB0aGUgYWJvdmUKY29weXJpZ2h0IG5vdGljZSBhbmQgdGhpcyBwZXJtaXNzaW9uIG5vdGljZSBhcHBlYXIgaW4gYWxsIGNvcGllcy4KClRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCAiQVMgSVMiIEFORCBUSEUgQVVUSE9SIERJU0NMQUlNUyBBTEwgV0FSUkFOVElFUwpXSVRIIFJFR0FSRCBUTyBUSElTIFNPRlRXQVJFIElOQ0xVRElORyBBTEwgSU1QTElFRCBXQVJSQU5USUVTIE9GCk1FUkNIQU5UQUJJTElUWSBBTkQgRklUTkVTUy4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFIEFVVEhPUiBCRSBMSUFCTEUgRk9SCkFOWSBTUEVDSUFMLCBESVJFQ1QsIElORElSRUNULCBPUiBDT05TRVFVRU5USUFMIERBTUFHRVMgT1IgQU5ZIERBTUFHRVMKV0hBVFNPRVZFUiBSRVNVTFRJTkcgRlJPTSBMT1NTIE9GIFVTRSwgREFUQSBPUiBQUk9GSVRTLCBXSEVUSEVSIElOIEFOCkFDVElPTiBPRiBDT05UUkFDVCwgTkVHTElHRU5DRSBPUiBPVEhFUiBUT1JUSU9VUyBBQ1RJT04sIEFSSVNJTkcgT1VUIE9GCk9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgVVNFIE9SIFBFUkZPUk1BTkNFIE9GIFRISVMgU09GVFdBUkUuCi0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHBhdGggZD0iTTE1IDIxdi04YTEgMSAwIDAgMC0xLTFoLTRhMSAxIDAgMCAwLTEgMXY4Ii8+PHBhdGggZD0iTTMgMTBhMiAyIDAgMCAxIC43MDktMS41MjhsNy02YTIgMiAwIDAgMSAyLjU4MiAwbDcgNkEyIDIgMCAwIDEgMjEgMTB2OWEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnoiLz48L2c+PC9zdmc+Cg==') center / contain no-repeat; } .cinema-seen { position: absolute; z-index: 3; right: -9px; bottom: -9px; display: flex; align-items: flex-end; } .cinema-seal { position: relative; display: block; flex: none; width: 44px; height: 44px; transform: rotate(-7deg); filter: drop-shadow(0 4px 7px #000c); transition: transform .26s cubic-bezier(.22,1,.36,1); } .cinema-seal img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Part-way through a show: the gem is dimmer, and says how far. */ .cinema-seal.is-partial img { filter: saturate(.5) brightness(.82); } .cinema-seal b { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(7deg); padding: 2px 6px; border-radius: 999px; background: var(--cinema-accent); color: #241b0e; font-size: 10px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 1px 4px #000a; } .cinema-watchers { display: flex; align-items: center; flex: none; margin: 0 -7px 3px 0; filter: drop-shadow(0 2px 4px #000b); } .cinema-seen > .cinema-watchers:last-child { margin-right: 0; } .cinema-watchers img { display: block; width: 26px; height: 26px; flex: none; border: 2px solid var(--cinema-accent); border-radius: 50%; background: var(--cinema-panel); object-fit: cover; } .cinema-watchers img + img, .cinema-watchers-more { margin-left: -8px; } .cinema-watchers-more { display: flex; align-items: center; justify-content: center; flex: none; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 999px; background: var(--cinema-panel); border: 2px solid var(--cinema-accent); color: var(--cinema-ink); font-size: 10px; font-weight: 700; } @media (hover: hover) { .cinema-card:hover .cinema-stamp { transform: rotate(2deg) scale(1.07); } .cinema-card:hover .cinema-seal { transform: rotate(-2deg) scale(1.07); } } .cinema-card:focus-visible .cinema-stamp { transform: rotate(2deg) scale(1.07); } .cinema-card:focus-visible .cinema-seal { transform: rotate(-2deg) scale(1.07); } @media (hover: none) { .cinema-hover-rating { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cinema-hover-rating { transition: none; transform: none; } } .cinema-card-affordance { position: absolute; inset: auto 0 0; background: linear-gradient(transparent,#080b10ee); padding: 32px 12px 14px; font-size: 12px; font-weight: 650; opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; } .cinema-card-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #101620b8; border: 1px solid #ffffff70; color: #fff; backdrop-filter: blur(5px); transition: background .18s, scale .18s; } .cinema-card-play .cinema-play-glyph { margin-left: 3px; } @media (hover: hover) { .cinema-card:hover .cinema-card-frame { transform: translateY(-3px); } .cinema-card:hover .cinema-card-art { box-shadow: 0 12px 25px #0008, 0 0 0 1px #e6c79535; } .cinema-card:hover .cinema-card-affordance { opacity: 1; transform: none; } .cinema-shelf-ranked .cinema-card:hover .cinema-card-art::before { opacity: 1; } .cinema-card:hover .cinema-card-play { background: var(--cinema-accent); color: var(--cinema-bg); scale: 1.08; border-color: transparent; } } .cinema-card:focus-visible .cinema-card-affordance { opacity: 1; transform: none; } .cinema-shelf-ranked .cinema-card:focus-visible .cinema-card-art::before { opacity: 1; } .cinema-card:active .cinema-card-frame { transform: scale(.985); } .cinema-owned { position: absolute; top: 9px; left: 9px; color: var(--cinema-ink); background: var(--cinema-glass); border: 1px solid var(--cinema-line); border-radius: 4px; padding: 5px 7px; font-size: 10px; font-weight: 650; } .cinema-progress { height: 3px; background: #ffffff40; display: block; position: absolute; bottom: 0; left: 0; right: 0; } .cinema-progress i { height: 100%; display: block; background: var(--cinema-accent); } .cinema-wide .cinema-card-copy { padding-right: 70px; } /* Continue watching's tools (cinema.js rail): More (the ledger: mark watched, remove, go to show / season) and Details (the door). One shape for both: the same pill, a painted icon and a word (2026-11-03). */ .cinema-resume-tools { position: absolute; right: 0; bottom: -8px; display: flex; align-items: center; gap: 6px; } .cinema-slot-wide:has(.cinema-resume-tools) .cinema-card-copy { padding-right: 196px; } .cinema-slot-wide:has(.cinema-resume-details:only-child) .cinema-card-copy { padding-right: 112px; } .cinema-resume-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; min-width: 44px; padding: 0 13px 0 9px; border: 1px solid var(--cinema-line); border-radius: 10px; background: color-mix(in srgb, var(--cinema-panel) 55%, transparent); color: var(--cinema-muted); font: inherit; font-size: 12.5px !important; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .16s, color .16s, border-color .16s; } .cinema-resume-act-ico { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 2px 3px #0009); opacity: .9; transition: opacity .16s, transform .2s cubic-bezier(.22,1,.36,1); } .cinema-resume-act:focus-visible { outline: 2px solid var(--cinema-accent); outline-offset: 2px; } @media (hover: hover) { .cinema-resume-act:hover { background: var(--cinema-panel); color: var(--cinema-ink); border-color: color-mix(in srgb, var(--cinema-accent) 45%, var(--cinema-line)); } .cinema-resume-act:hover .cinema-resume-act-ico { opacity: 1; transform: rotate(-6deg) scale(1.08); } } .cinema-resume-act:active .cinema-resume-act-ico { transform: scale(.92); } /* A phone: no room beside the title, so the two sit in a row of their own under it, equal halves, words kept. */ @media (max-width: 760px) { .cinema-resume-tools { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .cinema-resume-tools:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } .cinema-resume-act { width: 100%; } .cinema-slot-wide:has(.cinema-resume-tools) .cinema-card-copy, .cinema-slot-wide:has(.cinema-resume-details:only-child) .cinema-card-copy { padding-right: 0; } } @media (prefers-reduced-motion: reduce) { .cinema-resume-act-ico { transition: none; } .cinema-resume-act:hover .cinema-resume-act-ico, .cinema-resume-act:active .cinema-resume-act-ico { transform: none; } } /* Who asked for it, on every card of every shelf but Recently added (which draws its own fuller line): the face and the name, one line. */ .cinema-requested { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 5px; color: var(--cinema-muted); font-size: 11.5px; line-height: 18px; } .cinema-requested-face { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--cinema-panel); box-shadow: 0 0 0 1.5px var(--cinema-accent); } .cinema-requested-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--cinema-ink); } /* The play button beside a card's title (cinema.js quickPlay), in the brass of the corner stamps: a dark glass coin with a brass rim and a rounded brass triangle, struck solid brass under the pointer. Centred on the TITLE line, whatever wraps below it: the slot is a size container, so 150cqi is the poster's height (2:3) and the title sits 11px under it. The copy gives way so a long title ellipses before the button. A part-watched title draws its progress round the rim (--qp, 0–1). */ .cinema-quick-play { --qp-brass: linear-gradient(140deg, #f8e1b6, #c2924c 52%, #7d5a2a); position: absolute; right: 0; top: calc(150cqi - 1px); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer; border: 1.5px solid transparent; background: radial-gradient(circle at 50% 30%, #262c36, #10141b 72%) padding-box, var(--qp-brass) border-box; box-shadow: 0 6px 14px #000b, inset 0 1px 0 #ffffff1f; transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, background .22s; } .cinema-quick-play-glyph { width: 15px; height: 15px; margin-left: 2px; background: var(--qp-brass); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.9v14.2a1.6 1.6 0 0 0 2.4 1.4l11.2-7.1a1.6 1.6 0 0 0 0-2.8L9.4 3.5A1.6 1.6 0 0 0 7 4.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.9v14.2a1.6 1.6 0 0 0 2.4 1.4l11.2-7.1a1.6 1.6 0 0 0 0-2.8L9.4 3.5A1.6 1.6 0 0 0 7 4.9z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 1px #0008); transition: background .22s, transform .22s cubic-bezier(.22,1,.36,1); } .cinema-quick-play.has-progress { background: radial-gradient(circle at 50% 30%, #262c36, #10141b 72%) padding-box, conic-gradient(var(--cinema-accent) calc(var(--qp) * 1turn), #ffffff26 0) border-box; border-width: 2px; } @media (hover: hover) { .cinema-quick-play:hover { background: var(--qp-brass) padding-box, var(--qp-brass) border-box; transform: translateY(-2px); box-shadow: 0 10px 20px #000c, 0 0 0 5px #edc78d1f, inset 0 1px 0 #fff6; } .cinema-quick-play:hover .cinema-quick-play-glyph { background: #241b0e; filter: none; transform: scale(1.08); } } .cinema-quick-play:active { transform: scale(.93); transition-duration: .08s; } .cinema-quick-play:focus-visible { outline: 2px solid var(--cinema-accent); outline-offset: 3px; } @media (pointer: coarse) { .cinema-quick-play { width: 44px; height: 44px; translate: 0 -2px; } .cinema-quick-play-glyph { width: 16px; height: 16px; } } .cinema-slot.has-quick-play { container-type: inline-size; } .cinema-slot-wide .cinema-quick-play { top: calc(50cqi - 1px); } .cinema-slot.has-quick-play .cinema-card-copy { padding-right: 50px; } .cinema-shelf-compact .cinema-quick-play { top: 12px; right: 12px; } .cinema-shelf-compact .cinema-slot.has-quick-play .cinema-card-copy { padding-right: 52px; } /* The watched seal hangs off the poster's bottom-right corner, which is where the button now sits: it steps up inside the poster instead. */ .cinema-slot.has-quick-play .cinema-seen { right: 6px; bottom: 10px; } .cinema-shelf-compact .cinema-slot.has-quick-play .cinema-seen { right: -8px; bottom: -8px; } @media (prefers-reduced-motion: reduce) { .cinema-quick-play, .cinema-quick-play-glyph { transition: none; } .cinema-quick-play:hover { transform: none; } } .cinema-shelf-compact .cinema-slot { flex: 1 0 270px; } .cinema-shelf-compact .cinema-card { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; gap: 16px; background: #ffffff04; padding: 10px; border: 1px solid #ffffff0b; transition: background .18s; } @media (hover: hover) { .cinema-shelf-compact .cinema-card:hover { background: #ffffff09; } } .cinema-shelf-compact .cinema-card-copy { padding-right: 8px; } .cinema-shelf-compact .cinema-card strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; line-height: 1.25; margin-top: 0; } .cinema-shelf-compact .cinema-card-art { border-radius: 5px; box-shadow: none; } .cinema-shelf-compact .cinema-owned, .cinema-shelf-compact .cinema-card-affordance { display: none; } .cinema-shelf-compact .cinema-stamp { top: -7px; right: -7px; width: 28px; height: 28px; border-radius: 8px; } .cinema-shelf-compact .cinema-stamp img { border-radius: 6px; } .cinema-shelf-compact .cinema-seen { right: -8px; bottom: -8px; } .cinema-shelf-compact .cinema-seal { width: 32px; height: 32px; } .cinema-shelf-compact .cinema-seal b { font-size: 9px; padding: 1px 5px; } .cinema-shelf-compact .cinema-watchers img, .cinema-shelf-compact .cinema-watchers-more { width: 20px; min-width: 20px; height: 20px; } .cinema-shelf-compact .cinema-art-fallback { padding: 7px 6px 8px; font-size: 10px; gap: 0; } .cinema-shelf-compact .cinema-art-fallback::before { display: none; } .cinema-shelf-compact .cinema-hover-rating { position: static; display: block; margin-top: 8px; opacity: 1; transform: none; } .cinema-shelf-compact .cinema-scorecard { border-color: #ffffff1c; background: #090e1480; box-shadow: none; } .cinema-shelf-compact .cinema-scorecard-heading { display: none; } .cinema-shelf-compact .cinema-scorecard .cinema-scorecard-list { display: flex; gap: 8px; padding: 2px 8px 5px; } .cinema-shelf-compact .cinema-scorecard[data-count] .cinema-score-row { display: grid; grid-template-columns: 1fr; flex: 1; min-width: 0; border: 0; padding: 5px 0 2px; column-gap: 4px; } .cinema-shelf-compact .cinema-score-measure { display: none; } .cinema-shelf-compact .cinema-score-value b { font-size: 17px; } .cinema-shelf-compact .cinema-scorecard .cinema-score-source { font-size: 8px; min-height: 24px; } .cinema-shelf-compact .cinema-score-value > span { font-size: 8px; } .cinema-shelf-compact .cinema-score-row[data-status] .cinema-score-value > span { display: none; } .cinema-shelf-ranked .cinema-slot { flex-basis: clamp(180px, 15vw, 225px); } .cinema-shelf-ranked .cinema-card { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: end; } .cinema-shelf-ranked .cinema-card-frame { grid-area: 1 / 1 / 2 / -1; width: calc(100% - 30px); margin-left: 30px; } .cinema-shelf-ranked .cinema-card-art::before { content: ''; position: absolute; z-index: 1; inset: auto 0 0; height: 90px; background: linear-gradient(transparent,#080b10ee); opacity: 0; transition: opacity .18s; pointer-events: none; } .cinema-shelf-ranked .cinema-card-copy { grid-column: 1 / -1; grid-row: 2; padding-left: 30px; } .cinema-shelf-ranked .cinema-card-affordance { grid-area: 1 / 2; position: relative; inset: auto; z-index: 1; min-width: 0; padding: 14px 12px 14px 8px; background: none; overflow-wrap: anywhere; } .cinema-rank { grid-area: 1 / 1; position: relative; left: -2px; z-index: 1; font-size: 66px; line-height: 1; font-weight: 800; letter-spacing: -.065em; color: var(--cinema-bg); -webkit-text-stroke: 1px #d5c3a7; text-shadow: 2px 2px 6px #000a; font-variant-numeric: tabular-nums; pointer-events: none; } .cinema-empty { margin: 28px var(--cinema-gutter); padding: 26px 0; border-block: 1px solid var(--cinema-line); display: flex; gap: 24px; align-items: center; justify-content: space-between; } .cinema-empty h2 { font-size: 24px; margin: 0 0 8px; letter-spacing: -.025em; } .cinema-empty p { color: var(--cinema-muted); max-width: 520px; line-height: 1.6; font-size: 14px; margin: 0; text-wrap: pretty; } .cinema-empty .cinema-actions { flex-shrink: 0; } .cinema-notice, .cinema-credit, .cinema-results, .cinema-loading { margin: 22px var(--cinema-gutter); color: var(--cinema-muted); font-size: 13px; line-height: 1.6; } .cinema-results { font-size: 20px; color: var(--cinema-ink); margin-top: 32px; overflow-wrap: anywhere; } .cinema-credit { font-size: 11px; padding-top: 18px; border-top: 1px solid var(--cinema-line); } .cinema-loading-posters { display: flex; gap: 18px; overflow: hidden; } .cinema-loading-posters span { flex: 1 0 142px; aspect-ratio: 2 / 3; background: linear-gradient(125deg, var(--cinema-panel), #141922); border: 1px solid #ffffff05; border-radius: 9px; } .cinema-dialog { color: var(--cinema-ink); background: var(--cinema-bg); border: 1px solid var(--cinema-line); border-radius: 16px; padding: 0; width: min(860px,calc(100vw - 40px)); max-height: 90dvh; overflow: auto; box-shadow: 0 24px 100px #000b; overscroll-behavior: contain; } .cinema-dialog::backdrop { background: #060911cc; backdrop-filter: blur(10px); } .cinema-dialog-close { position: sticky; float: right; right: 16px; top: 16px; z-index: 2; margin: 16px 16px -60px 0; } .cinema-detail-backdrop { display: block; object-fit: cover; object-position: center 30%; width: 100%; height: 300px; mask-image: linear-gradient(#000 30%,transparent); } .cinema-detail-copy { position: relative; padding: 0 36px 36px; line-height: 1.7; } .cinema-detail-intro { display: flex; align-items: flex-end; gap: 26px; margin-top: -115px; margin-bottom: 24px; } .cinema-detail-poster { width: 130px; height: 195px; flex-shrink: 0; object-fit: cover; border-radius: 7px; box-shadow: 0 8px 24px #0006; } .cinema-detail-intro > div { min-width: 0; padding-top: 70px; } .cinema-detail-copy h2 { font-size: 38px; letter-spacing: -.035em; line-height: 1.1; margin: 8px 0 16px; text-wrap: balance; } .cinema-detail-copy h3 { font-size: 18px; margin: 28px 0 14px; letter-spacing: -.02em; } .cinema-synopsis { color: #dde0e7; font-size: 15px; line-height: 1.75; text-wrap: pretty; } .cinema-detail-availability { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-block: 1px solid var(--cinema-line); padding: 14px 0; margin-top: 24px; } .cinema-availability { font-size: 13px; color: var(--cinema-muted); margin: 0; } .cinema-detail-copy .cinema-notice { margin: 20px 0; } .cinema-cast { display: flex; gap: 16px; overflow: auto; padding-bottom: 12px; scrollbar-width: thin; } .cinema-cast > div { flex: 0 0 100px; font-size: 12px; } .cinema-cast-portrait { position: relative; display: flex; align-items: center; justify-content: center; background: var(--cinema-panel); width: 100px; height: 150px; border-radius: 6px; margin-bottom: 10px; overflow: hidden; } .cinema-cast-portrait > span { color: var(--cinema-muted); font-size: 26px; font-weight: 600; } .cinema-cast-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cinema-cast strong, .cinema-cast small { display: block; line-height: 1.5; } .cinema-cast small { color: var(--cinema-muted); margin-top: 3px; } .cinema-seasons { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 0 24px; list-style: none; padding: 0; margin: 0; } .cinema-seasons li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--cinema-line); font-size: 13px; } .cinema-seasons span { color: var(--cinema-muted); white-space: nowrap; } .cinema-feature-copy h2, .cinema-detail-copy h2, .cinema-empty h2 { overflow-wrap: anywhere; } /* Five rooms, the library and Up next in one row (2026-10-11): narrower windows give up room icons and words before anything is squeezed, then the rooms take a row of their own. A pill is never crushed to a sliver; a name truncates with an ellipsis. */ .cinema-library { min-width: 120px; } .cinema-library > span { min-width: 0; } @media (min-width: 1201px) and (max-width: 1440px) { .cinema-views > .cinema-tab[data-cinema-tab] { gap: 0; padding-inline: 12px; } .cinema-views > .cinema-tab[data-cinema-tab]::before { display: none; } .cinema-search-wrap { width: 210px; } } @media (min-width: 1201px) and (max-width: 1320px) { .cinema-upnext { padding-right: 9px; } .cinema-upnext-word { display: none; } .cinema-library { max-width: 190px; } } @media (min-width: 601px) and (max-width: 1200px) { .cinema-header { flex-wrap: wrap; gap: 10px 20px; } .cinema-heading { margin-right: auto; } .cinema-nav { order: 3; flex-basis: 100%; } } @media (max-width: 1000px) { .cinema-feature-copy { width: min(560px,75%); } .cinema-feature-slide { padding-bottom: 96px; } .cinema-slot-wide { flex-basis: calc((100% - 18px) / 2); } .cinema-empty { flex-wrap: wrap; } } @media (max-width: 600px) { .cinema-host { --cinema-gutter: 20px; scroll-padding-top: 12px; } .cinema { padding-bottom: 24px; } /* A phone header is ONE line and it scrolls away with the page: pinned and three rows deep it cost a fifth of the screen. It holds the three rooms, the library (as its face) and search; the account and profile buttons are left to the Home screen, which already has them. */ .cinema-header { position: relative; min-height: 0; padding: 10px var(--cinema-gutter); gap: 5px; } .cinema-heading { display: contents; } .cinema-heading h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cinema-search-toggle { display: block; order: 1; flex: none; } .cinema-header .media-profile-switch, .cinema-header [data-hearth-account] { display: none; } .cinema-search-wrap { display: none; order: 9; width: 100%; margin-top: 5px; } .cinema-header.is-searching .cinema-search-wrap { display: block; } /* One row: the three rooms and the library beside them, never a line of its own. */ .cinema-nav { order: 0; flex: 1 1 0; display: flex; gap: 5px; padding: 0; } .cinema-tab { flex: 1 1 auto; min-width: 0; height: 44px; min-height: 44px; padding: 0 8px; gap: 0; font-size: 13px !important; } .cinema-tab[data-cinema-tab] { padding: 0 8px; gap: 0; } .cinema-tab[data-cinema-tab]::before { display: none; } .cinema-library { flex: none; width: 44px; padding: 0; } .cinema-library span { display: none; } /* 44px holds the face, not the face and an arrow: the face itself opens the list. */ .cinema-header .cinema-library.has-menu .cinema-library-caret { display: none; } /* Five rooms do not fit a phone's row at a readable size: they keep their words and the frame scrolls sideways (the open one is brought into view, cinema.js goView). */ .cinema-views { flex: 1 1 0; min-width: 0; padding: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 8px; } .cinema-views::-webkit-scrollbar { display: none; } .cinema-views { mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); } .cinema-views > .cinema-tab { flex: 0 0 auto; height: 40px; min-height: 40px; padding: 0 12px; } .cinema-library { min-width: 0; } .cinema-upnext { flex: none; width: 44px; padding: 0; gap: 0; } .cinema-upnext-word, .cinema-upnext .cinema-library-caret { display: none; } .cinema-sep { margin: 0 1px; height: 26px; } .cinema-library-face { width: 36px; height: 36px; } .cinema-feature { margin-bottom: 0; } .cinema-feature-slide { min-height: 470px; padding: 190px var(--cinema-gutter) 84px; align-items: flex-end; } .cinema-feature-copy { width: 100%; } .cinema-feature-copy h2 { font-size: 39px; margin: 9px 0 14px; } .cinema-feature-slide::before { background: linear-gradient(0deg,var(--cinema-bg) 0%,#0d1016f5 31%,#0d1016b0 58%,#0d101618 94%); } .cinema-backdrop { object-position: 65% top; height: 365px; } .cinema-metadata { gap: 6px 9px; font-size: 11px; } .cinema-metadata > span + span { padding-left: 9px; } .cinema-metadata > .cinema-rating { padding-left: 6px; } .cinema-overview { font-size: 14px; -webkit-line-clamp: 2; margin: 14px 0 20px; } .cinema-actions .cinema-button { flex: 1; } .cinema-feature-controls { bottom: 14px; inset-inline: var(--cinema-gutter); gap: 4px; justify-content: space-between; } .cinema-chapters { flex: 1; justify-content: center; gap: 4px; } .cinema-chapter { width: 44px; flex: 0 1 48px; min-width: 44px; } .cinema-chapter img { height: 28px; } .cinema-counter { display: none; } .cinema-shelf { margin: 22px 0 30px; scroll-margin-top: 12px; } .cinema-shelf-heading { gap: 8px; margin-bottom: 10px; min-height: 34px; } .cinema-shelf-heading h2 { font-size: 20px; } .cinema-shelf-logo { width: 26px; height: 26px; flex-basis: 26px; border-radius: 7px; margin-right: 0; } .cinema-rail { gap: 12px; } .cinema-slot { flex-basis: 144px; } .cinema-slot-wide { flex: 0 0 86%; } .cinema-wide .cinema-card-art { aspect-ratio: 16 / 9; } .cinema-slot-wide .cinema-quick-play { top: calc(56.25cqi - 1px); } .cinema-rail-controls { display: none; } .cinema-shelf-heading .cinema-text-button { margin-left: auto; font-size: 12px !important; padding: 8px 0; } .cinema-shelf-compact .cinema-slot { flex: 0 0 88%; } .cinema-shelf-compact .cinema-rail[data-count='1'] .cinema-slot { flex: 1 0 100%; } .cinema-shelf-ranked .cinema-slot { flex-basis: 172px; } .cinema-rank { font-size: 58px; } .cinema-empty { padding: 22px 0; gap: 18px; } .cinema-empty h2 { font-size: 22px; } .cinema-empty .cinema-actions { width: 100%; } .cinema-empty .cinema-button { padding-inline: 12px; } .cinema-dialog { max-width: 100%; /* the UA's dialog rule caps it at viewport-36px otherwise */ width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - 18px); margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); } .cinema-detail-copy { padding: 0 20px 24px; } .cinema-detail-copy h2 { font-size: 29px; } .cinema-detail-backdrop { height: 225px; } .cinema-detail-intro { gap: 18px; margin-top: -110px; } .cinema-detail-poster { width: 88px; height: 132px; } .cinema-detail-intro > div { padding-top: 70px; } .cinema-detail-intro .cinema-metadata { gap: 5px 7px; } .cinema-detail-intro .cinema-metadata > span + span { padding-left: 7px; } .cinema-synopsis { font-size: 14px; } .cinema-detail-availability { gap: 10px; } .cinema-detail-availability .cinema-button { min-height: 44px; font-size: 12px !important; padding-inline: 12px; } } /* The narrowest phones: the one-line header keeps its 44px targets and gives up gutter instead. */ @media (max-width: 380px) { .cinema-header { padding-inline: 10px; gap: 3px; } .cinema-nav { gap: 3px; } } @media (prefers-reduced-motion: reduce) { .cinema *, .cinema-dialog * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } #screen-gate.cinema-host .cinema { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); } #screen-gate.cinema-host .cinema-header { padding-top: calc(env(safe-area-inset-top) + 12px); } @media (hover: none) { /* Touch has no hover to reveal the scorecard, so a poster carries one slim line instead: only the scores that exist, abbreviated, and nothing at all while there are none. */ .cinema-hover-rating { opacity: 1; transform: none; top: 6px; left: 6px; right: auto; max-width: calc(100% - 12px); } /* …and because it never hides on touch, its blur would be permanent, on every poster, inside horizontal scrollers. */ .cinema-card .cinema-scorecard { backdrop-filter: none; -webkit-backdrop-filter: none; } .cinema-card .cinema-card-art .cinema-scorecard { border-radius: 6px; border-color: #ffffff26; background: #0b0f15d9; box-shadow: 0 2px 8px #0006; backdrop-filter: blur(10px); } .cinema-card .cinema-card-art .cinema-scorecard:not(:has(.cinema-score-row:not([data-status]))) { display: none; } .cinema-card .cinema-card-art .cinema-scorecard-heading, .cinema-card .cinema-card-art .cinema-scorecard .cinema-score-row[data-status], .cinema-card .cinema-card-art .cinema-scorecard .cinema-score-measure { display: none; } .cinema-card .cinema-card-art .cinema-scorecard:has(.cinema-score-row:is([data-source=imdb], [data-source=tomatoes], [data-source=metacritic]):not([data-status])) .cinema-score-row:is([data-source=tmdb], [data-source=tvmaze]) { display: none; } .cinema-card .cinema-card-art .cinema-scorecard .cinema-scorecard-list { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 5px; } .cinema-card .cinema-card-art .cinema-scorecard .cinema-score-row { display: flex; flex: none; align-items: center; gap: 2px; padding: 0; border: 0; } .cinema-card .cinema-card-art .cinema-scorecard .cinema-score-source { display: block; min-height: 0; font-size: 0; line-height: 1; } .cinema-card .cinema-card-art .cinema-scorecard .cinema-score-source::before { content: attr(data-abbr); font-size: 8px; font-weight: 750; letter-spacing: .02em; } .cinema-card .cinema-card-art .cinema-scorecard .cinema-score-row[data-source=imdb] .cinema-score-source { padding: 2px 3px; margin: 0; } .cinema-card .cinema-card-art .cinema-scorecard .cinema-score-value b { font-size: 12px; letter-spacing: -.02em; } .cinema-card .cinema-card-art .cinema-scorecard .cinema-score-value > span { display: none; } .cinema-card .cinema-card-art .cinema-scorecard .cinema-score-row[data-source=tomatoes] .cinema-score-value > span { display: inline; font-size: 8px; } /* The compact shelf keeps its scores under the title; the same short names keep four of them on one line. */ .cinema-shelf-compact .cinema-scorecard .cinema-score-row { min-width: 0; } .cinema-shelf-compact .cinema-scorecard .cinema-score-value b { font-size: 15px; } .cinema-shelf-compact .cinema-card .cinema-scorecard[data-count] .cinema-score-source { display: block; min-height: 0; font-size: 0; line-height: 1; justify-self: start; } .cinema-shelf-compact .cinema-card .cinema-scorecard[data-count] .cinema-score-row[data-source=imdb] .cinema-score-source { padding: 2px 3px; } .cinema-shelf-compact .cinema-scorecard .cinema-score-source::before { content: attr(data-abbr); font-size: 8px; font-weight: 750; } .cinema-card:hover .cinema-poster { transform: none; filter: none; } /* A phone's cover is narrow: smaller marks, and the score line drops below the stamp instead of running underneath it. */ .cinema-stamp { top: -8px; right: -7px; width: 30px; height: 30px; border-radius: 8px; } .cinema-stamp img { border-radius: 6px; } .cinema-seen { right: -7px; bottom: -7px; } .cinema-seal { width: 36px; height: 36px; } .cinema-watchers img, .cinema-watchers-more { width: 22px; min-width: 22px; height: 22px; } .cinema-card-frame:has(> .cinema-stamp) .cinema-card-art > .cinema-hover-rating { top: 26px; } } @media (prefers-reduced-motion: reduce) { .cinema-poster, .cinema-hover-rating { transition: none !important; transform: none !important; } .cinema-card:hover .cinema-card-frame, .cinema-card:focus-visible .cinema-card-frame, .cinema-card:active .cinema-card-frame { transform: none; } .cinema-card:hover .cinema-stamp, .cinema-card:focus-visible .cinema-stamp { transform: rotate(8deg); } .cinema-card:hover .cinema-seal, .cinema-card:focus-visible .cinema-seal { transform: rotate(-7deg); } .cinema-card:hover .cinema-poster, .cinema-card:focus-visible .cinema-poster { transform: none; filter: none; } } /* The library pill's caret and its searchable list (media/cinema.js libraryMenu): only while there is more than one library to open. The list sits on so nothing above it can clip it, so it carries its own tokens. */ .cinema-library-caret { display: none; flex: none; margin-left: -2px; color: var(--cinema-muted); transition: transform .2s ease; } .cinema-library.has-menu .cinema-library-caret { display: inline-flex; } .cinema-library[aria-expanded=true] .cinema-library-caret { transform: rotate(180deg); } .cinema-libmenu { --cinema-ink: #f4f0e9; --cinema-muted: #b8bbc4; --cinema-accent: #edc78d; --cinema-line: #ffffff20; position: fixed; z-index: 10030; width: min(340px, calc(100vw - 16px)); max-height: min(580px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; color: var(--cinema-ink); border-radius: 16px; border: 1px solid rgba(245, 158, 11, .42); background: rgba(25, 29, 37, .98); box-shadow: 0 28px 56px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 233, 196, .06); opacity: 0; transform: translateY(-4px); transition: opacity .14s, transform .2s cubic-bezier(.2, .8, .2, 1); } .cinema-libmenu.is-open { opacity: 1; transform: none; } .cinema-libmenu-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; min-width: 0; } .cinema-libmenu-head img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; } .cinema-libmenu-head strong { min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cinema-libmenu-shared { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #1c1206; background: var(--cinema-accent); white-space: nowrap; } .cinema-libmenu-search { position: relative; display: flex; align-items: center; margin: 0 12px 8px; } .cinema-libmenu-search input { width: 100%; min-height: 40px; padding: 0 36px 0 12px; border-radius: 10px; font: inherit; font-size: 15px; color: var(--cinema-ink); border: 1px solid var(--cinema-line); background: rgba(0, 0, 0, .3); } .cinema-libmenu-search input::-webkit-search-cancel-button { display: none; } .cinema-libmenu-search input:focus { outline: none; border-color: var(--cinema-accent); box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); } .cinema-libmenu-clear { position: absolute; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--cinema-muted); font-size: 18px; cursor: pointer; } .cinema-libmenu-list { list-style: none; margin: 0; padding: 0 6px 8px; overflow-y: auto; overscroll-behavior: contain; } .cinema-libmenu-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px; cursor: pointer; } .cinema-libmenu-opt.is-at { background: rgba(245, 158, 11, .14); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .4); } .cinema-libmenu-ico { width: 32px; height: 32px; object-fit: contain; flex: none; } .cinema-libmenu-t { display: flex; flex-direction: column; min-width: 0; } .cinema-libmenu-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cinema-libmenu-t small { font-size: 12.5px; color: var(--cinema-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cinema-libmenu-empty { padding: 14px 10px; color: var(--cinema-muted); font-size: 14px; } @media (prefers-reduced-motion: reduce) { .cinema-libmenu, .cinema-library-caret { transition: none; } } /* File facts stay visible. Full story and playback notes appear on inspection. */ .cinema-file-format { display: block; color: var(--cinema-accent); font-size: 11px; line-height: 1.5; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cinema-peek { position: fixed; inset: auto; margin: 0; padding: 20px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: hidden; border: 1px solid var(--cinema-pill-border); border-radius: 14px; background: var(--cinema-panel); color: var(--cinema-ink); box-shadow: 0 18px 55px #0009; z-index: 10090; pointer-events: none; font-family: inherit; box-sizing: border-box; } .cinema-peek-title { display: block; font-size: 20px; line-height: 1.25; text-wrap: balance; } .cinema-peek-meta { display: block; color: var(--cinema-muted); font-size: 12px; margin-top: 8px; } .cinema-peek-story { font-size: 14px; line-height: 1.6; margin: 14px 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .cinema-peek-format { display: block; color: var(--cinema-accent); font-size: 12px; } .cinema-peek-note { margin: 10px 0 0; color: var(--cinema-muted); font-size: 12px; line-height: 1.6; padding-left: 12px; border-left: 2px solid var(--cinema-pill-border); } .cinema-peek-hint { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--cinema-line); color: var(--cinema-muted); font-size: 11px; } @media (max-width: 600px) { .cinema-header.is-searching { flex-wrap: wrap; } .cinema-search-wrap { flex: 0 0 100%; min-width: 0; } } /* ── Who brought it in (cinema.js arrivalLine, 2026-10-24) ───────────────── The Recently added shelf names the account that asked for each grab, with the same face the watched-by marks wear. EVERY slot of the shelf carries the line — the date alone when the download ledger never saw the title — so the cards keep one height and the shelf one shape, and the rail's reserved height grows with it (the shelf is skipped while off screen). */ /* The slot becomes the column so the line can sit at its foot: a card whose title wrapped to two lines is no taller than its neighbour's, and every arrival on the shelf reads along one baseline. */ .cinema-shelf-arrivals .cinema-slot { display: flex; flex-direction: column; } .cinema-shelf-arrivals .cinema-card { flex: 1 1 auto; } .cinema-arrival { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--cinema-line); } .cinema-arrival-face { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--cinema-accent); background: var(--cinema-panel); object-fit: cover; } /* Two lines, always reserved: "Marisol added S01 E01–E06 · 2 d ago" does not fit one line of a poster-width card, and an ellipsis in the middle of the episode range is the one thing the line exists to say. */ .cinema-arrival-text { flex: 1; min-width: 0; color: var(--cinema-muted); font-size: 11px; line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .cinema-shelf-arrivals .cinema-rail { --cinema-rail-h: calc(clamp(150px, 13.5vw, 204px) * 1.5 + 128px); } .cinema-shelf-compact .cinema-arrival-face { width: 22px; height: 22px; } @media (max-width: 760px) { .cinema-arrival-face { width: 22px; height: 22px; } .cinema-arrival-text { font-size: 10.5px; } }