/* 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] button:focus,html[data-playback-device=projector] 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}
