:root { --kino-bg:#06080e; --kino-card:rgba(18,22,36,.84); --kino-border:rgba(255,255,255,.09); --kino-text:#f3f4f6; --kino-muted:#9ca3af; --kino-accent:linear-gradient(135deg,#ff416c,#ff4b2b); --kino-cyan:#67e8f9; --kino-success:#6ee7b7; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; background:radial-gradient(circle at 50% -15%,#17233c 0,#090d17 31%,var(--kino-bg) 72%); color:var(--kino-text); font:400 15px/1.45 'DM Sans',system-ui,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid rgba(103,232,249,.72); outline-offset:2px; }
[hidden] { display:none!important; }
#film-schedule-at{width:100%;min-height:44px;padding:8px;border:1px solid #39445c;border-radius:8px;background:#111a2b;color:#fff;font:inherit}.kino-upcoming .kino-film-controls .kino-secondary{min-height:38px}@media(max-width:620px){.kino-upcoming .kino-film-controls .kino-secondary{min-height:44px}}
.kino-player-wrap.kino-waiting>#youtube-player{visibility:hidden;pointer-events:none}.kino-player-wrap.kino-waiting>.reaction-layer,.kino-player-wrap.kino-waiting>.player-gate{display:none!important}
.kino-upcoming{position:absolute;inset:0;z-index:4;overflow:auto;padding:clamp(12px,2.5vw,28px);background:linear-gradient(145deg,#111a2b,#070b13)}.kino-upcoming h2{margin:0 0 12px;font-size:clamp(.85rem,1.5vw,1.3rem)}#kino-upcoming-list{display:grid;gap:8px}.kino-upcoming .kino-film-card{padding:7px;grid-template-columns:80px minmax(0,1fr)}.kino-upcoming .kino-film-card>img{width:80px;height:45px}.kino-upcoming .kino-film-card strong{white-space:normal}.kino-kick-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end}.kino-kick-actions .kino-primary{margin-top:0}#kick-minutes{width:100%;min-height:44px}#kick-dialog{max-height:90dvh;overflow:auto}@media(max-width:620px){.kino-player-wrap.kino-waiting{aspect-ratio:auto;min-height:320px;max-height:70dvh}.kino-upcoming .kino-film-card{grid-template-columns:70px minmax(0,1fr)}.kino-upcoming .kino-film-card>img{width:70px;height:40px}.kino-kick-actions{flex-wrap:wrap}.kino-kick-actions button{min-height:44px}}
.kino-shell { width:min(1440px,calc(100% - 32px)); margin:0 auto; padding:18px 0 42px; }
.kino-header { display:flex; align-items:center; gap:16px; min-height:58px; padding:10px 16px; border:1px solid var(--kino-border); border-radius:17px; background:rgba(8,11,20,.64); box-shadow:0 16px 42px rgba(0,0,0,.18); backdrop-filter:blur(22px); }
.kino-brand { display:inline-flex; align-items:baseline; gap:8px; color:var(--kino-text); text-decoration:none; white-space:nowrap; }.kino-brand span { color:var(--kino-muted); font-weight:600; font-size:.78rem; }.kino-brand strong { font-size:1rem; letter-spacing:-.02em; }
.kino-header-status { min-width:0; flex:1; overflow:hidden; color:var(--kino-muted); font-size:.78rem; text-align:center; text-overflow:ellipsis; white-space:nowrap; }.kino-header-status.connected { color:var(--kino-success); }.kino-header-status.error { color:#fda4af; }
.kino-back { color:#cbd5e1; font-size:.78rem; font-weight:650; text-decoration:none; white-space:nowrap; }.kino-back:hover { color:#fff; text-decoration:underline; }@media(min-width:901px){.kino-header{position:relative}.kino-header-status{position:absolute;left:50%;max-width:min(42vw,480px);transform:translateX(-50%);pointer-events:none}.kino-header:has(.kino-next-film:not([hidden])) .kino-header-status{display:none}.kino-next-film{margin-left:auto}.kino-back{margin-left:auto}}
.kino-next-film{display:flex;align-items:center;gap:9px;min-width:270px;max-width:510px;padding:6px 9px;border:1px solid rgba(103,232,249,.22);border-radius:11px;background:rgba(8,145,178,.08)}.kino-next-film>img{width:58px;height:36px;flex:0 0 auto;object-fit:cover;border-radius:6px;background:#020305}.kino-next-film-copy{display:grid;min-width:0;gap:1px}.kino-next-film strong,.kino-next-film span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kino-next-film strong{color:#e7f8ff;font-size:.7rem}.kino-next-film span{color:#a5cbd5;font-size:.6rem}.kino-next-film .kino-session-role{color:#67e8f9;font-weight:800;letter-spacing:.035em;text-transform:uppercase}.kino-next-film .kino-session-meta{color:#cbd5e1}.kino-room-error{display:none;max-width:720px;margin:46px auto;padding:clamp(24px,5vw,48px);border:1px solid rgba(103,232,249,.22);border-radius:22px;background:linear-gradient(145deg,rgba(16,26,45,.92),rgba(7,11,20,.94));box-shadow:0 28px 80px rgba(0,0,0,.4);text-align:center}.kino-room.has-error>.kino-room-error{display:grid;justify-items:center;gap:12px}.kino-room.has-error>:not(#kino-room-error){display:none}.kino-room-error h2{margin:0;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.045em}.kino-room-error>p:not(.kino-eyebrow){max-width:480px;margin:0;color:#aebdd1}.kino-room-error>div:last-child{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin-top:8px}.kino-room-error>div:last-child>a{display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;margin:0!important;padding:0 16px;line-height:1}.kino-error-back{display:inline-flex;align-items:center;text-decoration:none}.kino-error-art{width:min(210px,55vw);padding:12px;border-radius:28px;background:radial-gradient(circle at 60% 25%,rgba(103,232,249,.2),transparent 58%),rgba(255,255,255,.025)}.kino-error-art svg{display:block;width:100%;height:auto;fill:none;stroke:#67e8f9;stroke-linecap:round;stroke-linejoin:round;stroke-width:5}.kino-error-page{display:grid;min-height:100dvh;place-items:center;padding:24px;background:radial-gradient(circle at 78% 20%,rgba(14,116,144,.2),transparent 30%),#060914}.kino-error-page>.kino-brand{position:fixed;top:24px;left:clamp(20px,5vw,64px)}.kino-error-panel{display:grid;justify-items:center;gap:13px;max-width:630px;padding:clamp(28px,6vw,58px);border:1px solid rgba(103,232,249,.2);border-radius:25px;background:linear-gradient(145deg,rgba(16,26,45,.92),rgba(7,11,20,.94));box-shadow:0 32px 100px rgba(0,0,0,.45);text-align:center}.kino-error-panel h1{margin:0;font-size:clamp(2rem,6vw,3.5rem);letter-spacing:-.06em}.kino-error-panel>p:not(.kino-eyebrow){max-width:480px;margin:0;color:#aebdd1}.kino-error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:10px}.kino-error-actions .kino-secondary{display:inline-flex;align-items:center;text-decoration:none}
.kino-lobby { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr); grid-template-areas:"hero form" "rooms form" "sessions form"; gap:24px 42px; align-items:start; min-height:calc(100vh - 150px); padding:48px 7% 60px; }
.kino-hero { grid-area:hero; align-self:center; max-width:610px; padding:42px 0 22px; }.kino-eyebrow { margin:0 0 8px; color:var(--kino-cyan); font-size:.68rem; font-weight:800; letter-spacing:.12em; }.kino-hero h1 { max-width:540px; margin:0; font-size:clamp(2.35rem,6vw,4.85rem); line-height:.98; letter-spacing:-.065em; }.kino-hero>p:last-child { max-width:520px; margin:20px 0 0; color:#b7c4d7; font-size:1.05rem; }
.kino-card { min-width:0; border:1px solid var(--kino-border); border-radius:17px; background:linear-gradient(145deg,rgba(20,25,41,.9),rgba(9,13,24,.93)); box-shadow:0 16px 38px rgba(0,0,0,.16); }
.kino-create-form { grid-area:form; position:sticky; top:22px; padding:25px; }.kino-create-form h2 { margin:0 0 9px; font-size:1.22rem; }.kino-muted { margin:0 0 18px; color:var(--kino-muted); font-size:.86rem; }.kino-create-form label,.kino-change-video label,.nickname-dialog label { display:block; margin:14px 0 7px; color:#cbd5e1; font-size:.78rem; font-weight:700; }.kino-create-form label small { color:var(--kino-muted); font-weight:550; }.kino-create-form input,.kino-change-video input,.chat-form input,.nickname-dialog input { width:100%; min-width:0; min-height:43px; padding:0 13px; border:1px solid rgba(148,163,184,.26); border-radius:11px; color:var(--kino-text); background:rgba(2,6,14,.64); }.kino-create-form input::placeholder,.kino-change-video input::placeholder,.chat-form input::placeholder { color:#64748b; }
.kino-field-help,.kino-form-message { min-height:1.3em; margin:7px 0 0; color:var(--kino-muted); font-size:.73rem; }.kino-form-message.error,.kino-field-help.error,.kino-error { color:#fecdd3; }.kino-field-help.success { color:#bbf7d0; }.kino-error { margin:12px 0; font-size:.84rem; }
.kino-primary,.kino-primary-link { display:inline-flex; align-items:center; justify-content:center; min-height:42px; margin-top:18px; padding:0 16px; border:0; border-radius:11px; color:#fff; background:var(--kino-accent); box-shadow:0 8px 18px rgba(239,49,94,.23); font-weight:750; font-size:.82rem; text-decoration:none; }.kino-primary:hover,.kino-primary-link:hover { filter:brightness(1.08); transform:translateY(-1px); }
.kino-user-rooms { grid-area:rooms; overflow:hidden; padding:0; border-color:rgba(103,232,249,.16); background:linear-gradient(145deg,rgba(17,27,48,.9),rgba(8,13,25,.94)); }.kino-user-rooms>h2 { margin:0; padding:19px 21px 15px; border-bottom:1px solid rgba(255,255,255,.08); font-size:1.15rem; letter-spacing:-.03em; }.kino-room-group { padding:15px 17px; }.kino-room-group + .kino-room-group { border-top:1px solid rgba(255,255,255,.07); }.kino-room-group h3 { margin:0 0 9px; color:#b8c8dc; font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.kino-room-links { display:grid; gap:7px; }.kino-room-link { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; min-height:58px; padding:9px 10px; border:1px solid rgba(148,163,184,.14); border-radius:12px; color:#edf6ff; background:rgba(255,255,255,.035); text-decoration:none; transition:border-color .16s ease,background .16s ease,transform .16s ease; }.kino-room-link:hover { border-color:rgba(103,232,249,.52); background:rgba(14,116,144,.14); transform:translateY(-1px); }.kino-room-link-icon { display:grid; width:33px; height:33px; place-items:center; border-radius:10px; background:rgba(103,232,249,.11); font-size:1rem; }.kino-room-link-copy { display:grid; min-width:0; gap:1px; }.kino-room-link-copy strong { overflow:hidden; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }.kino-room-link-copy small { overflow:hidden; color:var(--kino-muted); font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }.kino-room-link-state { max-width:105px; overflow:hidden; padding:4px 6px; border-radius:999px; color:#cbd5e1; background:rgba(148,163,184,.11); font-size:.61rem; font-weight:700; text-align:center; text-overflow:ellipsis; white-space:nowrap; }.kino-room-link-state.watching { color:#bbf7d0; background:rgba(16,185,129,.13); }.kino-room-link-state.scheduled { color:#fde68a; background:rgba(245,158,11,.13); }
.kino-active-sessions>p{margin:0;padding:12px 21px 0}.kino-active-sessions>div{display:grid;gap:8px;padding:12px 17px 17px}.kino-active-sessions .kino-room-link>img{width:72px;height:42px;object-fit:cover;border-radius:8px;background:#111827}.kino-active-sessions .kino-room-link>div{display:grid;min-width:0;gap:2px}.kino-active-sessions .kino-room-link strong,.kino-active-sessions .kino-room-link span,.kino-active-sessions .kino-room-link small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kino-active-sessions .kino-room-link span,.kino-active-sessions .kino-room-link small{color:var(--kino-muted);font-size:.74rem}.kino-active-sessions .kino-room-link .kino-secondary{padding:7px 10px;font-size:.74rem}
.kino-lobby>.kino-active-sessions{grid-area:sessions;min-width:0}
.kino-upcoming #replay-with-bookmarks{margin:0 0 12px}.kino-upcoming #kino-bookmark-replay-copy{margin:0 0 8px;max-width:62ch}
.kino-room { padding-top:28px; }.kino-room-topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }.kino-room-topbar h1 { margin:0; font-size:1.65rem; letter-spacing:-.045em; }.kino-room-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }.kino-online { padding:7px 10px; border:1px solid rgba(110,231,183,.24); border-radius:999px; color:#bbf7d0; background:rgba(16,185,129,.1); font-size:.72rem; font-weight:700; white-space:nowrap; }
.kino-secondary { min-height:34px; padding:0 11px; border:1px solid rgba(255,255,255,.13); border-radius:9px; color:#dbe6f5; background:rgba(255,255,255,.055); font-size:.73rem; font-weight:700; }.kino-secondary:hover { border-color:rgba(103,232,249,.5); background:rgba(103,232,249,.12); color:#fff; }
.kino-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:16px; align-items:start; }.kino-stage { min-width:0; }.kino-player-wrap { position:relative; overflow:hidden; aspect-ratio:16/9; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:#020305; box-shadow:0 22px 62px rgba(0,0,0,.4); }.kino-player,.kino-player iframe { width:100%; height:100%; }.kino-player iframe { border:0; }
.reaction-layer { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; overflow:hidden; pointer-events:none; }.kino-reaction { position:absolute; bottom:18%; animation:kino-reaction 2.1s ease-out forwards; font-size:clamp(2.2rem,6vw,4.4rem); filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }@keyframes kino-reaction { 0% { opacity:0; transform:translateY(24px) scale(.68) rotate(-8deg); } 16% { opacity:1; transform:translateY(0) scale(1.08); } 75% { opacity:1; } 100% { opacity:0; transform:translateY(-150px) scale(1.25) rotate(10deg); } }
.kino-page-reaction-layer{position:fixed;inset:0;z-index:1000;overflow:hidden;pointer-events:none;isolation:isolate}.kino-page-reaction,.kino-popcorn{position:absolute;left:var(--x,50vw);top:-14vh;bottom:auto;display:grid;place-items:center;line-height:1;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 5px 10px rgba(0,0,0,.45));animation:kino-page-reaction-fly 4.8s cubic-bezier(.18,.76,.22,1) var(--delay,0ms) forwards}.kino-page-reaction{font-size:clamp(2.2rem,5.2vw,5.1rem)}.kino-popcorn{font-size:clamp(1.55rem,3.2vw,3.1rem)}.kino-popcorn::before{content:'🍿'}.kino-page-reaction::after{content:attr(data-nickname);position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);padding:2px 5px;border-radius:999px;color:#fff;background:rgba(4,8,16,.78);font:700 10px/1.1 system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.35)}@keyframes kino-page-reaction-fly{0%{opacity:0;transform:translate3d(0,0,0) scale(.65) rotate(0deg)}10%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift,0vw),118vh,0) scale(1.12) rotate(var(--spin,0deg))}}@media(prefers-reduced-motion:reduce){.kino-page-reaction,.kino-popcorn{animation-duration:1.2s}}
@media(max-width:620px){.kino-page-reaction,.kino-popcorn{animation-name:kino-page-reaction-fly-mobile;animation-duration:4.55s!important}@keyframes kino-page-reaction-fly-mobile{0%{opacity:0;transform:translate3d(0,0,0) scale(.65) rotate(0deg)}12%{opacity:1}84%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift,0vw),80vh,0) scale(1.1) rotate(var(--spin,0deg))}}}
.player-gate { position:absolute; inset:0; z-index:4; display:grid; place-items:center; background:rgba(0,0,0,.62); backdrop-filter:blur(4px); }.player-gate button { max-width:260px; padding:12px 15px; border:1px solid rgba(103,232,249,.5); border-radius:12px; color:#ecfeff; background:rgba(14,116,144,.62); font-weight:700; }
.kino-viewer-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;margin:9px 2px 0}.kino-viewer-progress[hidden],.kino-stage.kino-host .kino-viewer-progress{display:none!important}.kino-viewer-progress progress{width:100%;height:7px;overflow:hidden;pointer-events:none;accent-color:#fb4d70}.kino-viewer-progress output{min-width:76px;color:#b9c7da;font:600 .69rem ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right}.kino-sync-note { min-height:1.3em; margin:7px 2px 0; color:var(--kino-muted); font-size:.72rem; }.kino-controls { margin-top:12px; padding:13px; border:1px solid rgba(255,99,125,.25); border-radius:14px; background:linear-gradient(135deg,rgba(101,20,47,.34),rgba(42,20,34,.38)); }.kino-control-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; }.kino-play { min-height:36px; padding:0 12px; border:0; border-radius:9px; color:#fff; background:var(--kino-accent); font-size:.76rem; font-weight:800; }.kino-seek-label { display:flex; align-items:center; gap:9px; min-width:0; color:#f8d8df; font-size:.7rem; font-weight:700; }.kino-seek-label input { min-width:0; flex:1; accent-color:#fb4d70; }.kino-control-row output { min-width:42px; color:#f8d8df; font:600 .72rem ui-monospace,SFMono-Regular,Menlo,monospace; text-align:right; }.kino-change-video { margin-top:12px; padding-top:10px; border:1px solid rgba(255,99,125,.25); border-radius:14px; background:linear-gradient(135deg,rgba(101,20,47,.34),rgba(42,20,34,.38)); }.kino-control-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; }.kino-play { min-height:36px; padding:0 12px; border:0; border-radius:9px; color:#fff; background:var(--kino-accent); font-size:.76rem; font-weight:800; }.kino-seek-label { display:flex; align-items:center; gap:9px; min-width:0; color:#f8d8df; font-size:.7rem; font-weight:700; }.kino-seek-label input { min-width:0; flex:1; accent-color:#fb4d70; }.kino-control-row output { min-width:42px; color:#f8d8df; font:600 .72rem ui-monospace,SFMono-Regular,Menlo,monospace; text-align:right; }.kino-change-video { margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); }.kino-change-video>div { display:flex; gap:8px; }.kino-change-video .kino-secondary { flex:0 0 auto; min-height:43px; }
.kino-volume-control{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;margin:9px 2px 0;color:#cbd5e1;font-size:.72rem;font-weight:700}.kino-volume-control input{width:100%;min-width:0;accent-color:#67e8f9}.kino-volume-control input:disabled{cursor:not-allowed;opacity:.42}.kino-volume-control output{min-width:80px;color:#b9c7da;font:600 .69rem ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right}
.kino-sidebar { display:grid; gap:16px; min-width:0; }.participants-card { padding:14px; }.kino-sidebar-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }.kino-sidebar-title h2 { margin:0; font-size:.88rem; }.kino-sidebar-title span { color:var(--kino-muted); font-size:.67rem; }.participants-list { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }.participant { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:6px 8px; border:1px solid rgba(255,255,255,.09); border-radius:999px; color:#dbeafe; background:rgba(255,255,255,.045); font-size:.71rem; }.participant.host { border-color:rgba(103,232,249,.35); color:#cffafe; background:rgba(6,182,212,.1); }.participant span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-card { display:grid; grid-template-rows:auto minmax(230px,1fr) auto auto; min-height:470px; overflow:hidden; }.chat-card .kino-sidebar-title { padding:14px 14px 0; }.chat-messages { display:grid; align-content:start; gap:8px; overflow:auto; min-height:0; max-height:calc(100dvh - 350px); padding:6px 14px 12px; scrollbar-color:rgba(148,163,184,.5) transparent; }.chat-message { padding:8px 9px; border-radius:10px; background:rgba(255,255,255,.045); }.chat-message.mine { border:1px solid rgba(103,232,249,.18); background:rgba(8,145,178,.105); }.chat-message.system { padding:5px 2px; color:#94a3b8; background:transparent; font-size:.7rem; text-align:center; }.chat-message-meta { display:flex; align-items:baseline; gap:6px; margin-bottom:3px; color:#a5b4c9; font-size:.65rem; }.chat-message-meta strong { max-width:155px; overflow:hidden; color:#e2e8f0; text-overflow:ellipsis; white-space:nowrap; }.chat-message-body { overflow-wrap:anywhere; color:#e9eef7; font-size:.78rem; white-space:pre-wrap; }.chat-form { display:flex; gap:7px; padding:10px 12px; border-top:1px solid rgba(255,255,255,.08); }.chat-form input { min-height:38px; border-radius:9px; font-size:.76rem; }.chat-form button { flex:0 0 38px; height:38px; border:0; border-radius:9px; color:#fff; background:#0e7490; font-weight:800; }.reaction-buttons { display:flex; flex-wrap:nowrap; width:100%; min-width:0; gap:5px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:0 12px 12px; scrollbar-width:thin; touch-action:pan-x; -webkit-overflow-scrolling:touch; }.reaction-buttons button { flex:0 0 30px; width:30px; height:28px; scroll-snap-align:start; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:rgba(255,255,255,.045); font-size:.85rem; }.reaction-buttons button:hover { background:rgba(255,255,255,.15); transform:translateY(-1px); }
.nickname-dialog { width:min(420px,calc(100% - 28px)); margin:auto; padding:0; border:1px solid rgba(148,163,184,.28); border-radius:18px; color:var(--kino-text); background:#111827; box-shadow:0 24px 90px rgba(0,0,0,.66); }.nickname-dialog::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(4px); }.nickname-dialog form { padding:24px; }.nickname-dialog h2 { margin:0; font-size:1.25rem; }.nickname-dialog p { margin:7px 0 0; color:var(--kino-muted); font-size:.82rem; }.nickname-dialog .kino-primary { width:100%; margin-top:14px; }
@media (max-width:900px) { .kino-header{flex-wrap:wrap}.kino-next-film{order:4;flex:1 1 100%;max-width:none}.kino-lobby { grid-template-columns:1fr; grid-template-areas:"hero" "form" "rooms" "sessions"; padding:40px max(5%,18px); }.kino-hero { max-width:680px; padding:0; }.kino-create-form { position:static; max-width:620px; }.kino-user-rooms { max-width:620px; }.kino-layout { grid-template-columns:1fr; }.kino-sidebar { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); }.chat-card { min-height:390px; }.chat-messages { max-height:310px; } }
@media (max-width:620px) { .kino-shell { width:100%; padding:0 0 22px; }.kino-header { position:sticky; top:0; z-index:10; border-right:0; border-left:0; border-radius:0; padding:9px 14px; }.kino-header-status { display:none; }.kino-next-film{order:3}.kino-next-film>img{width:50px;height:29px}.kino-back { margin-left:auto; font-size:.68rem; }.kino-lobby { min-height:calc(100vh - 58px); padding:38px 18px; }.kino-hero h1 { font-size:clamp(2.5rem,14vw,4rem); }.kino-room { padding:18px 12px 0; }.kino-room-topbar { align-items:flex-start; flex-direction:column; }.kino-room-actions { justify-content:flex-start; }.kino-layout { gap:12px; }.kino-player-wrap { border-radius:13px; }.kino-sidebar { grid-template-columns:1fr; gap:12px; }.chat-card { min-height:450px; }.chat-messages { max-height:350px; }.kino-control-row { grid-template-columns:auto minmax(0,1fr); }.kino-control-row output { grid-column:2; }.kino-seek-label { flex-wrap:wrap; }.kino-seek-label input { flex-basis:100%; }.kino-change-video>div { flex-direction:column; }.kino-change-video .kino-secondary { width:100%; }.participants-card { padding:12px; }.kino-room-link-state { max-width:82px; }.kino-room-link { gap:8px; }.kino-error-page{padding:18px}.kino-error-page>.kino-brand{position:static;justify-self:start}.kino-error-panel{width:100%}.kino-room-error{margin:26px 0;padding:28px 18px} }

/* Extended KINO controls stay scoped to this module. */
.kino-create-options,.kino-settings-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,.42fr);gap:9px}.kino-create-options label{margin-bottom:0}.kino-create-options small{color:var(--kino-muted);font-weight:500}.kino-settings-grid{grid-template-columns:minmax(0,1fr) 90px auto auto;align-items:center}.kino-check{display:flex!important;align-items:center;gap:6px;margin:0!important;white-space:nowrap}.kino-check input{width:auto!important;min-height:0!important}.kino-lobby-bar{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 13px}.kino-lobby-bar>div{display:grid;gap:1px;margin-right:auto}.kino-lobby-bar strong{font-size:.8rem}.kino-lobby-bar span{color:var(--kino-muted);font-size:.7rem}.participant-actions{display:flex;gap:3px}.participant-actions button,.queue-item button,.history-list button{border:1px solid rgba(255,255,255,.13);border-radius:6px;color:#dbeafe;background:rgba(255,255,255,.06);font-size:.62rem;cursor:pointer}.participant-actions button{padding:2px 4px}.queue-card,.stats-card{padding:13px}.queue-proposal{display:flex;gap:7px;margin-bottom:9px}.queue-proposal input{width:100%;min-width:0;min-height:36px;padding:0 9px;border:1px solid rgba(148,163,184,.26);border-radius:8px;color:var(--kino-text);background:rgba(2,6,14,.64);font-size:.72rem}.queue-list,.history-list{display:grid;gap:6px;max-height:220px;overflow:auto}.queue-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.035)}.queue-item.approved{border-color:rgba(110,231,183,.3)}.queue-item strong{overflow:hidden;font-size:.73rem;text-overflow:ellipsis;white-space:nowrap}.queue-item small{color:var(--kino-muted);font-size:.64rem}.queue-item div{display:flex;grid-column:2;grid-row:1 / span 2;align-items:center;gap:3px}.queue-item button,.history-list button{min-height:25px;padding:2px 5px}.history-list button{overflow:hidden;color:#cbd5e1;text-align:left;text-overflow:ellipsis;white-space:nowrap}.qr-code{display:grid;min-height:260px;place-items:center;margin:15px 0;border-radius:12px;background:#fff}.qr-code img{display:block;width:260px;max-width:100%;height:auto}@media(max-width:620px){.kino-create-options,.kino-settings-grid{grid-template-columns:1fr}.kino-lobby-bar{flex-wrap:wrap}.kino-lobby-bar>div{flex-basis:100%}.participant{border-radius:12px}.queue-item{grid-template-columns:1fr}.queue-item div{grid-column:1;grid-row:auto;flex-wrap:wrap}}
.kino-queue-limit{margin:-2px 0 9px;font-size:.67rem}
.kino-queue-more{width:100%;min-height:34px;margin-top:3px;font-size:.7rem}
.kino-countdown{margin:10px 0 0;padding:11px 14px;border:1px solid rgba(251,191,36,.3);border-radius:11px;color:#fde68a;background:rgba(120,53,15,.2);font-weight:800;letter-spacing:.03em}.kino-timed-controls{margin-top:9px;align-items:center}.kino-timed-controls label{display:flex;align-items:center;gap:6px;color:var(--kino-muted);font-size:.72rem}.kino-timed-controls select{min-height:30px;border:1px solid rgba(148,163,184,.25);border-radius:7px;color:var(--kino-text);background:#0b1220;font:inherit}@media(max-width:620px){.kino-timed-controls{grid-template-columns:1fr 1fr!important}.kino-timed-controls label{grid-column:1/-1}}
.kino-late-join{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;padding:11px 13px}.kino-late-join>div{display:grid;gap:2px;margin-right:auto}.kino-late-join strong{font-size:.78rem}.kino-late-join span{color:var(--kino-muted);font-size:.68rem}#late-join .kino-primary,#late-join .kino-secondary{height:42px;min-height:42px;margin-top:0}@media(max-width:620px){.kino-late-join>div{flex-basis:100%}.kino-late-join button{flex:1}}
.kino-diagnostics{margin-top:10px;border:1px solid rgba(148,163,184,.16);border-radius:9px;padding:8px 10px}.kino-diagnostics summary{cursor:pointer;color:#cbd5e1;font-size:.72rem}.kino-diagnostics>div{display:grid;gap:5px;margin-top:9px;font-size:.68rem}.kino-diagnostic{padding:6px 7px;border-radius:7px;background:rgba(255,255,255,.035);overflow-wrap:anywhere}
.kino-stage.kino-ambient{position:relative;isolation:isolate}.kino-stage.kino-ambient:before{position:absolute;z-index:-1;inset:-34px 0;background-image:linear-gradient(rgba(6,10,20,.48),rgba(6,10,20,.75)),var(--kino-ambient-image);background-position:center;background-size:cover;filter:blur(24px) saturate(1.25);opacity:.68;content:"";pointer-events:none}.kino-tv-mode .kino-layout{grid-template-columns:minmax(0,1fr)}.kino-tv-mode .kino-sidebar{display:none}.kino-tv-mode .kino-room{max-width:1500px}.kino-tv-mode .kino-room-topbar{margin-bottom:10px}.kino-tv-mode .kino-room-actions button:not(#show-qr):not(#tv-mode){display:none}@media(prefers-reduced-motion:reduce){.kino-stage.kino-ambient:before{filter:none;opacity:.3}}
.kino-change-video{border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;background:transparent}
.kino-stage:has(#host-controls:not([hidden])) .kino-viewer-progress{display:none!important}
.kino-films-dialog{width:min(720px,calc(100% - 28px))}.kino-films-list{display:grid;gap:9px;max-height:min(58vh,620px);overflow:auto;margin:18px 0}.kino-films-list h3{margin:8px 0 0;color:#cbd5e1;font-size:.8rem}.kino-film-card{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.035)}.kino-film-card.active{border-color:rgba(103,232,249,.7);background:rgba(8,145,178,.14);box-shadow:0 0 0 1px rgba(103,232,249,.12) inset}.kino-film-card>img{width:110px;height:62px;object-fit:cover;border-radius:7px;background:#020305}.kino-film-card>div{display:grid;gap:2px;min-width:0}.kino-film-card strong{overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.kino-film-card span,.kino-film-card small{color:var(--kino-muted);font-size:.68rem}.kino-film-controls{grid-column:1/-1;display:flex!important;flex-wrap:wrap;gap:6px}.kino-film-controls input,.kino-films-add input{min-height:34px;padding:0 9px;border:1px solid rgba(148,163,184,.26);border-radius:8px;color:var(--kino-text);background:rgba(2,6,14,.64);font:inherit;font-size:.72rem}.kino-films-add{display:grid;gap:8px;padding:12px;border:1px solid rgba(103,232,249,.2);border-radius:11px;background:rgba(8,145,178,.08)}.kino-films-add h3{margin:0;font-size:.82rem}.kino-films-add label{color:var(--kino-muted);font-size:.7rem;font-weight:700}.kino-films-add .kino-secondary{justify-self:start}@media(max-width:620px){.kino-film-card{grid-template-columns:86px minmax(0,1fr)}.kino-film-card>img{width:86px;height:49px}.kino-film-controls{grid-column:1/-1}.kino-film-controls input{width:100%}}
.kino-montage-segments:not([hidden]){display:flex;gap:8px;width:100%;min-width:0;overflow-x:auto;max-width:100%;padding:10px 0;scrollbar-width:thin}.kino-montage-segments button{flex:0 0 auto;min-height:44px;max-width:280px;white-space:normal;border:1px solid #39445c;border-radius:10px;background:#131a28;color:#bdc8dd;padding:8px 12px;font:inherit}.kino-montage-segments button.active{border-color:#ee4b75;color:#fff;background:#ee4b7522}.kino-montage-segments button:disabled{opacity:.85}@media(min-width:901px){.kino-montage-segments:not([hidden]){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}.kino-montage-segments button{width:100%;min-width:0;max-width:none}}
.kino-film-end{color:#a5f3fc!important;font-weight:700}.kino-music-dialog{width:min(480px,calc(100% - 28px))}.kino-music-dialog form{display:grid;gap:10px}.kino-music-dialog p{margin:0}.kino-music-dialog select,.kino-music-dialog input[type="datetime-local"]{width:100%;min-height:43px;padding:0 12px;border:1px solid rgba(148,163,184,.26);border-radius:10px;color:var(--kino-text);background:rgba(2,6,14,.64);font:inherit}.kino-music-dialog label{margin:0!important}.kino-music-dialog .kino-kick-actions{margin-top:4px}.kino-music-selection-controls{display:flex;align-items:center;gap:9px}.kino-music-selection-controls output{min-width:0;color:var(--kino-muted);font-size:.73rem}.kino-music-preview-dialog{width:min(760px,calc(100% - 28px));max-height:min(86dvh,820px);overflow:auto}.kino-music-preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.kino-music-preview-heading h2{margin:0}.kino-music-preview-heading p{margin:5px 0 0}.kino-music-preview-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}.kino-music-preview-item{display:grid;grid-template-columns:116px minmax(0,1fr);gap:10px;min-width:0;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:11px;color:var(--kino-text);background:rgba(255,255,255,.035);text-align:left}.kino-music-preview-item:hover{border-color:rgba(103,232,249,.45);background:rgba(8,145,178,.1)}.kino-music-preview-item.selected{border-color:#67e8f9;background:rgba(8,145,178,.22);box-shadow:0 0 0 1px rgba(103,232,249,.25) inset}.kino-music-preview-item.range-anchor{border-color:#fbbf24;background:rgba(146,64,14,.2);box-shadow:0 0 0 1px rgba(251,191,36,.25) inset}.kino-music-preview-item img{width:116px;height:65px;object-fit:cover;border-radius:7px;background:#020305}.kino-music-preview-item>span{display:grid;align-content:center;gap:3px;min-width:0}.kino-music-preview-item strong{overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.kino-music-preview-item small{overflow:hidden;color:var(--kino-muted);font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.kino-music-preview-item .kino-music-preview-duration{color:#a5f3fc;font-weight:700}@media(max-width:620px){.kino-music-dialog{width:calc(100% - 20px)}.kino-music-dialog .kino-kick-actions button{flex:1}.kino-music-selection-controls{align-items:stretch;flex-direction:column}.kino-music-preview-dialog{width:calc(100% - 16px)}.kino-music-preview-heading{align-items:center}.kino-music-preview-list{grid-template-columns:1fr}.kino-music-preview-item{grid-template-columns:96px minmax(0,1fr)}.kino-music-preview-item img{width:96px;height:54px}}
.kino-error-actions,.kino-room-error>div:last-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:min(100%,340px);margin:8px auto 0}.kino-error-actions>a,.kino-room-error>div:last-child>a{display:inline-flex;align-items:center;justify-content:center;width:100%;height:44px;min-height:44px;margin:0!important;padding:0 16px;line-height:1}

/* Historia czatu przewija się wewnątrz karty — pole wpisywania nie może wypaść pod krawędź ekranu. */
.chat-card{grid-template-rows:auto minmax(0,1fr) auto auto;height:350px;min-height:0}.chat-messages{max-height:none;min-height:0}@media(max-width:900px){.chat-card{height:400px}}@media(max-width:620px){.chat-card{height:450px}}

/* Każdy rodzaj wpisu — również długi komunikat systemowy — musi łamać się w obrębie czatu.
   Bez jawnej kolumny minmax(0,1fr) CSS Grid potrafi rozszerzyć wiersz do szerokości
   najdłuższego komunikatu, zamiast zawinąć jego tekst. */
.chat-card{grid-template-columns:minmax(0,1fr);min-width:0;width:100%;box-sizing:border-box}.chat-messages{grid-template-columns:minmax(0,1fr);width:100%;box-sizing:border-box;overflow-x:hidden}.chat-messages,.chat-message,.chat-message-body{min-width:0;max-width:100%}.chat-message{box-sizing:border-box;width:100%;justify-self:stretch}.chat-message,.chat-message.system,.chat-message-body{overflow-wrap:anywhere;word-break:break-word}.chat-message.system{display:block;inline-size:100%;max-inline-size:100%;white-space:normal}

/* Na desktopie czat zostaje przy górnej krawędzi widoku po przewinięciu strony.
   Dzięki temu długa lista seansu nie chowa pola wiadomości ani reakcji pod ekranem. */
@media (min-width:901px){.chat-card{position:sticky;top:12px;z-index:2;height:min(350px,calc(100dvh - 24px))}}

/* Po seansie długa lista kolejnych pozycji przewija się w playerze, zamiast spychać głośność i sterowanie pod ekran. */
.kino-player-wrap:has(#kino-upcoming:not([hidden])){height:min(480px,calc(100dvh - 240px));min-height:360px;aspect-ratio:auto}@media(max-width:620px){.kino-player-wrap:has(#kino-upcoming:not([hidden])){height:min(52dvh,410px);min-height:300px}}
.kino-message-link{position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(103,232,249,.25);border-radius:12px;color:#b9f5e2;background:rgba(255,255,255,.045);font-size:1.05rem;text-decoration:none}.kino-message-link:hover{border-color:rgba(103,232,249,.55);background:rgba(103,232,249,.08)}