/* Shared sizing rules for every Kinoflix page and orientation. */
html{ -webkit-text-size-adjust:100%;scrollbar-gutter:stable }
*,*::before,*::after{box-sizing:border-box}
body{min-width:0;overflow-wrap:break-word}
img,video,iframe,canvas{max-width:100%}
main,section,article,form,fieldset,.panel,.actions,.player-heading,.player-header-actions{min-width:0}
input:not([type=checkbox]):not([type=radio]),select,textarea{max-width:100%;min-width:0}
.actions,.player-header-actions,.kino-actions,.comment-compose-actions{flex-wrap:wrap}
button,a.primary,a.outline{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.site-shell .site-header .profile-links{max-width:calc(100vw - 24px);max-height:70dvh;overflow-y:auto}
.site-shell .site-header .top-navigation{min-width:0}
footer,footer>div{flex-wrap:wrap}
dialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
/* The picture and controls size independently of the discussion. */
.cinema-page #player-dialog.comments-open{grid-template-columns:minmax(0,1fr) minmax(290px,32%);grid-template-rows:auto minmax(0,1fr)}
.cinema-page #player-dialog.comments-open>.screen-frame{align-self:start;display:block;height:auto;min-height:0}
.cinema-page #player-dialog.comments-open .kino-controls{margin-top:0;padding-bottom:12px}
.cinema-page #player-dialog .screen-frame:not(:fullscreen) video{height:auto;object-fit:contain;flex:none}
.cinema-page #player-dialog .player-heading{flex-wrap:wrap;align-items:flex-start}
.cinema-page #player-dialog .player-heading>div{min-width:0;flex:1 1 260px}
.cinema-page #player-dialog .player-heading h2{overflow-wrap:anywhere;font-size:clamp(18px,2.4vw,28px)}
.cinema-page #player-dialog .player-header-actions{justify-content:flex-end;gap:8px}
.cinema-page #player-dialog .kino-actions{gap:8px}
.cinema-page #player-dialog .kino-actions button{min-height:44px}
.cinema-page #player-dialog .kino-end-actions{min-width:0;flex-wrap:wrap}
.cinema-page #player-dialog .kino-volume-label{flex-wrap:wrap}
.cinema-page #player-dialog .kino-seek{min-width:0;width:100%;flex:1}
.cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::after{animation:chat-brand-glow 3s ease-in-out infinite;transform:none;scale:1;max-width:75%;max-height:18%;margin:0;pointer-events:none}
@keyframes chat-brand-glow{0%,100%{opacity:.8;filter:drop-shadow(0 0 6px #23cdeb88)}50%{opacity:1;filter:drop-shadow(0 0 18px #a94ee8cc)}}
/* Portrait tablets and small windows use a single reading column. */
@media(max-width:1000px),(orientation:portrait) and (max-width:1200px){
 .cinema-page #player-dialog.comments-open{display:flex;flex-direction:column;height:auto;max-height:calc(100dvh - 16px);overflow-y:auto;padding:clamp(10px,2vw,20px);gap:12px}
 .cinema-page #player-dialog.comments-open>.player-heading{flex:none;width:100%}
 .cinema-page #player-dialog.comments-open>.screen-frame{flex:none;width:100%}
 .cinema-page #player-dialog.comments-open>.vlog-community{flex:none;width:100%;overflow:visible;max-height:none}
 .cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::after{display:none}
 .cinema-page #player-dialog.comments-open>#player-error:not([hidden]){position:static;max-height:none}
 .workspace-heading{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media(max-width:600px){
 body{font-size:15px}
 input,select,textarea{font-size:16px}
 .cinema-page .hero h1,.workspace-heading h1{font-size:clamp(32px,9vw,48px);letter-spacing:-1px}
 .cinema-page .hero-copy{padding-inline:5%}
 .cinema-page #player-dialog .player-header-actions{justify-content:flex-start}
 .cinema-page #player-dialog .player-header-actions button{min-height:44px;padding:8px 10px;font-size:13px}
 .cinema-page #player-dialog .kino-controls{padding:8px}
 .cinema-page #player-dialog .kino-actions button{font-size:12px;padding:7px 9px}
 .cinema-page #player-dialog .kino-volume-label{display:none}
 .cinema-page #player-dialog .kino-time{font-size:12px;white-space:nowrap}
 .cinema-page #details .detail-facts,.form-grid,.submission-grid{grid-template-columns:minmax(0,1fr)}
 .creator-workspace .panel,.panel{padding:18px}
 .search{width:100%;min-width:0}
 .section-heading{flex-wrap:wrap}
 .owner-metrics,.hub-journey{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vlog-comment.reply{margin-left:8px}
}
@media(max-width:360px){.cinema-page .grid{grid-template-columns:minmax(0,1fr)}.owner-metrics,.hub-journey{grid-template-columns:minmax(0,1fr)}}
@media(max-height:540px) and (orientation:landscape){
 .cinema-page #player-dialog{padding:8px;overflow-y:auto}
 .cinema-page #player-dialog .player-heading .eyebrow{display:none}
 .cinema-page #player-dialog .player-heading h2{font-size:18px;margin:0}
 .site-shell .site-header .profile-links{max-height:60dvh}
}
@media(prefers-reduced-motion:reduce){.cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::after{animation:none}}

/* Keep the chat signature stationary and crop the asset's transparent margins. */
.cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::after,
.cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::before{
 content:"";position:absolute;left:0;bottom:8px;width:clamp(170px,17vw,240px);height:auto;aspect-ratio:1496/298;max-width:calc(64% - 24px);max-height:none;margin:0;pointer-events:none;transform:none;z-index:2;
}
.cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::after{
 background:url('/assets/kinoflix-wordmark-clear-v4.png') 50% 48.9% / 118.6% 297.65% no-repeat;
 animation:chat-corner-radiance 8s ease-in-out infinite;opacity:1;
}
.cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::before{
 display:block;z-index:3;
 background:url('/assets/kinoflix-wordmark-clear-v4.png') 50% 48.9% / 118.6% 297.65% no-repeat;
 filter:brightness(1.8) saturate(1.4);
 -webkit-mask-image:linear-gradient(110deg,transparent 35%,#000 46%,#000 54%,transparent 65%);
 mask-image:linear-gradient(110deg,transparent 35%,#000 46%,#000 54%,transparent 65%);
 -webkit-mask-size:300% 100%;mask-size:300% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 animation:chat-natural-shine 6.5s ease-in-out infinite;
}
@keyframes chat-natural-shine{
 0%,8%{-webkit-mask-position:150% 0;mask-position:150% 0}
 85%,100%{-webkit-mask-position:-50% 0;mask-position:-50% 0}
}
@keyframes chat-corner-radiance{
 0%,100%{filter:drop-shadow(0 0 8px #23cdebaa) drop-shadow(0 0 16px #cf24b799)}
 50%{filter:drop-shadow(0 0 15px #23cdebee) drop-shadow(0 0 30px #cf24b7cc)}
}
@media(max-width:1000px),(orientation:portrait) and (max-width:1200px){
 .cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::before,
 .cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::after{display:none}
}
@media(prefers-reduced-motion:reduce){
 .cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::after{animation:none}
 .cinema-page #player-dialog.comments-open:has(>.screen-frame.controls-hidden)::before{
 display:block;z-index:3;
 background:url('/assets/kinoflix-wordmark-clear-v4.png') 50% 48.9% / 118.6% 297.65% no-repeat;
 filter:brightness(1.8) saturate(1.4);
 -webkit-mask-image:linear-gradient(110deg,transparent 35%,#000 46%,#000 54%,transparent 65%);
 mask-image:linear-gradient(110deg,transparent 35%,#000 46%,#000 54%,transparent 65%);
 -webkit-mask-size:300% 100%;mask-size:300% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 animation:chat-natural-shine 6.5s ease-in-out infinite;
}
@keyframes chat-natural-shine{
 0%,8%{-webkit-mask-position:150% 0;mask-position:150% 0}
 85%,100%{-webkit-mask-position:-50% 0;mask-position:-50% 0}
}
}

/* Mobile player: deliberate rows instead of independently wrapping buttons. */
@media(max-width:600px){
 .cinema-page #player-dialog .player-heading{gap:14px}
 .cinema-page #player-dialog .player-header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:1 1 100%;width:100%;gap:8px}
 .cinema-page #player-dialog .player-header-actions button{width:100%;margin:0;min-height:44px;line-height:1.3}
 .cinema-page #player-dialog .player-header-actions>.player-comments-neon{grid-column:1/-1}
 .cinema-page #player-dialog .kino-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:stretch}
 .cinema-page #player-dialog .kino-actions>button{grid-column:span 3}
 .cinema-page #player-dialog .kino-actions>.kino-toggle,
 .cinema-page #player-dialog .kino-actions>button[data-skip]{grid-column:span 2}
 .cinema-page #player-dialog .kino-actions button{width:100%;min-width:0;min-height:44px;margin:0;padding:8px;font-size:12px;line-height:1.3;display:flex;align-items:center;justify-content:center}
 .cinema-page #player-dialog .kino-actions [hidden]{display:none}
 .cinema-page #player-dialog .kino-speed-label{grid-column:span 3;display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;font-size:12px}
 .cinema-page #player-dialog .kino-speed{flex:1;min-height:44px;min-width:0;padding:6px}
 .cinema-page #player-dialog .kino-volume-label{display:none}
 .cinema-page #player-dialog .kino-end-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;min-width:0;padding-top:8px;border-top:1px solid #af91ee33}
 .cinema-page #player-dialog .kino-end-actions:has(.kino-comment:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}
 .cinema-page #player-dialog .kino-end-actions>.kino-spacer{display:none}
 .cinema-page #player-dialog .kino-seek-row{flex-direction:column;align-items:stretch;gap:10px}
 .cinema-page #player-dialog .kino-seek{flex:none;width:100%;margin:0 0 6px;min-height:8px}
}