/* A TV gets compact, opaque dialogs. Phones keep their existing layout. */
html[data-playback-device=projector] .kino-dialog.kino-profile{width:min(760px,64vw);min-width:min(560px,calc(100vw - 28px));background:#03141a;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
html[data-playback-device=projector] .kino-dialog.kino-profile[open]{padding:18px 22px;max-height:calc(var(--projector-viewport-height,100vh) - 24px)}
html[data-playback-device=projector] .kino-dialog::backdrop,html[data-playback-device=projector] .trailer-panel-backdrop{background:#000b;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-playback-device=projector] .kino-profile .profile-scroll{overflow-y:auto;overscroll-behavior:contain;scroll-behavior:auto;min-height:0;max-height:none}
html[data-playback-device=projector] .kino-profile .profile-avatar-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-height:none;overflow:visible}
html[data-playback-device=projector] .profile-collapse{transition:none}
html[data-playback-device=projector] .profile-collapse[data-open=false]{display:none}
html[data-playback-device=projector] .profile-save-footer{margin-top:12px;padding-top:10px}
html[data-playback-device=projector] .auth-stage>.auth-panel[data-step=register]{width:min(740px,64vw)!important;min-width:min(520px,calc(100vw - 28px));height:auto!important;min-height:0!important;max-height:calc(var(--projector-viewport-height,100vh) - 24px)!important;padding:20px 24px!important;display:flex!important;gap:12px;overflow-y:auto;clip-path:none;background:#03141a;box-shadow:none}
html[data-playback-device=projector] .auth-stage:has(.auth-panel[data-step=register]){padding:12px;min-height:var(--projector-viewport-height,100vh)}
html[data-playback-device=projector] .auth-panel[data-step=register] .auth-brand{margin:0 auto 8px!important;min-height:0!important;flex:none}
html[data-playback-device=projector] .auth-panel[data-step=register] .auth-brand img{width:180px!important}
html[data-playback-device=projector] .auth-panel[data-step=register] .auth-brand p{margin-top:6px!important}
html[data-playback-device=projector] .auth-panel[data-step=register] #register-view{display:block!important;flex:0 0 auto!important}
html[data-playback-device=projector] .auth-panel[data-step=register] #register-form{display:block!important;height:auto!important}
html[data-playback-device=projector] .auth-panel[data-step=register] .avatar-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;max-height:190px!important;overflow-y:auto;overscroll-behavior:contain;margin:10px 0}
html[data-playback-device=projector] .auth-panel[data-step=register] .name-input{width:100%;margin:8px 0 12px;font-size:16px}
html[data-playback-device=projector] .auth-panel[data-step=register] .profile-preview{flex:none!important;min-height:45px!important;margin:0!important}
html[data-playback-device=projector] .auth-panel[data-step=register] #register-form>.primary{min-height:44px;margin-top:12px}
html[data-playback-device=projector] .trailer-panel{width:min(840px,68vw,calc((100vh - 112px)*16/9));min-width:0;box-shadow:none}
html[data-playback-device=projector] .movie-card>.poster-favorite:not(.active):not(:active) svg{fill:none;filter:none}
html[data-playback-device=projector] .movie-card>.poster-favorite:not(.active){box-shadow:none!important}
html[data-playback-device=projector] :is(input,textarea){scroll-margin-block:24px}
.profile-choice{min-width:0;display:grid;gap:8px;font-size:14px;color:#b9d4dc}
.profile-choice>button,.profile-choice [role=option]{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;border:1px solid #28515d;background:#061820;color:#e3f4f7;padding:10px 12px;text-align:left;font:inherit}
.profile-choice svg{width:18px;height:18px;flex:none}
.profile-choice [role=listbox]{display:grid;gap:2px;border:1px solid #17818f;background:#03141a;padding:4px}
.profile-choice [role=option]{border:0}
.profile-choice [role=option][aria-selected=true]{color:#00dce9;background:#07343c}
.profile-choice button:focus-visible{outline:2px solid #00dce9;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.friend-online-dot{animation:none!important}}


html[data-playback-device=projector] .auth-stage>.auth-panel[data-step=register] #register-form .avatar-field{display:block!important;flex:none!important;min-height:0!important;margin:0!important}
html[data-playback-device=projector] .auth-stage>.auth-panel[data-step=register] #register-form .avatar-grid{flex:none!important;height:clamp(120px,30vh,190px)!important;max-height:190px!important;grid-template-columns:repeat(6,minmax(0,1fr))!important}

/* One scroll surface on remotes: nested contained galleries trapped upward scroll. */
html[data-playback-device=projector] .kino-dialog.kino-profile[open]{display:block;height:auto;max-height:calc(var(--projector-viewport-height,100vh) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
html[data-playback-device=projector] .kino-profile .profile-scroll{display:block;overflow:visible;max-height:none;flex:none}
html[data-playback-device=projector] .kino-dialog.kino-profile .profile-avatar-grid{height:auto!important;max-height:none!important;overflow:visible;overscroll-behavior:auto}
html[data-playback-device=projector] .kino-profile .profile-heading img{width:38px;height:38px;object-fit:contain}
html[data-playback-device=projector] .kino-profile .profile-header{position:static}
html[data-playback-device=projector] .kino-profile *{scroll-behavior:auto;animation:none!important;transition:none!important}

.profile-choice{align-self:start;align-content:start;grid-auto-rows:max-content}

/* Avoid costly translucent surfaces and keep remote focus unmistakable. */
html[data-playback-device=projector] .movie-card{backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-playback-device=projector] button:focus-visible,html[data-playback-device=projector] a:focus-visible{outline:2px solid #00dce9;outline-offset:2px}

html[data-playback-device=projector][data-input-method=keyboard] button:focus,html[data-playback-device=projector][data-input-method=keyboard] a:focus{outline:2px solid #00dce9;outline-offset:2px}

/* A focused section is indicated by its title, never a frame around the accordion. */
html[data-playback-device=projector] .kino-profile .profile-section-toggle:focus{outline:none!important;box-shadow:none!important}
html[data-playback-device=projector] .kino-profile .profile-section-toggle:focus-visible{color:#00dce9;text-decoration:underline;text-underline-offset:4px}

/* Clicking leaves the selection state, but not the keyboard-only focus frame. */
html[data-playback-device=projector][data-input-method=pointer] :is(button,a):focus{outline:none!important;box-shadow:none!important}
html[data-playback-device=projector][data-input-method=keyboard] :is(button,a):focus{outline:2px solid #00dce9;outline-offset:2px}
html[data-keyboard-overlay=true] body{padding-bottom:var(--kino-keyboard-space,0px)}
html[data-keyboard-overlay=true] dialog[open]{max-height:calc(var(--projector-viewport-height,100vh) - var(--kino-keyboard-space,0px) - 24px)!important;margin-block:12px auto!important;overflow-y:auto}
html[data-keyboard-overlay=true] .auth-stage{align-items:start!important;padding-top:12px!important}
html[data-keyboard-overlay=true] .auth-panel{margin-top:0!important}
html[data-playback-device=projector] .code-entry,html[data-playback-device=projector] .friend-code-entry{scroll-margin-block:90px 24px}
/* TV invokes the browser's numeric keyboard; its six cells stay above it. */
html[data-playback-device=projector] .auth-stage>.auth-panel[data-step=login]{height:min(400px,calc(var(--projector-viewport-height,100vh) - 32px))!important;min-height:0!important;overflow-y:auto}
html[data-playback-device=projector] .auth-stage>.auth-panel[data-step=login] #keypad{display:none!important}
html[data-playback-device=projector] .auth-stage>.auth-panel[data-step=login] #login-form{grid-template-rows:auto 56px!important;height:auto!important;align-self:center!important}
html[data-playback-device=projector] .auth-stage>.auth-panel .code-cells span{font-size:28px!important;text-shadow:none}
html[data-playback-device=projector] .auth-stage>.auth-panel .code-cells span:not(:empty)::before{content:none!important;display:none!important}
/* Keep large surfaces cheap on low-memory Android and TV browsers. */
html[data-lite-device=true] .movie-card,html[data-lite-device=true] .kino-movie-window,html[data-lite-device=true] .trailer-panel{box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-lite-device=true] .kino-movie-window[open],html[data-lite-device=true] .kino-movie-window[open]::backdrop,html[data-lite-device=true] .kino-description-text,html[data-lite-device=true] .movie-card-loading span{animation:none!important}
html[data-lite-device=true] .movie-card,html[data-lite-device=true] .movie-poster img,html[data-lite-device=true] .kino-description-clip,html[data-lite-device=true] .kino-description-action,html[data-lite-device=true] .poster-favorite,html[data-lite-device=true] .trailer-play-button{transition:none!important}
html[data-lite-device=true] .movie-card:hover,html[data-lite-device=true] .movie-poster:hover img{transform:none!important}
html[data-playback-device=projector] .movie-card[data-priority=true]{border-color:#59e38a}
html[data-playback-device=projector] .movie-card[data-priority=true] .poster-favorite{color:#59e38a!important;border-color:#59e38a!important}
html[data-playback-device=projector] .movie-card[data-priority=true] .poster-favorite svg{fill:#59e38a!important;stroke:#59e38a!important;filter:none!important}