:root{
--bg:#05070b;
--panel:#101722;
--line:rgba(255,255,255,.08);
--text:#f6f2ea;
--muted:#a6b2c2;
--lime:#c8ff1a;
--pink:#ff1178;
--purple:#8b2cff;
}

.cinema-app{
max-width:430px;
margin:auto;
padding:14px 14px 120px;
}

.cinema-hero{
position:relative;
overflow:hidden;
border-radius:28px;
min-height:520px;
padding:26px;
display:flex;
align-items:flex-end;
margin-bottom:16px;

background:
linear-gradient(
180deg,
rgba(0,0,0,.15),
rgba(0,0,0,.82)
),
url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?q=80&w=1400&auto=format&fit=crop')
center/cover;
}

.cinema-overlay{
position:absolute;
inset:0;

background:
radial-gradient(
circle at top,
rgba(139,44,255,.22),
transparent 45%
);

pointer-events:none;
}

.cinema-hero-content{
position:relative;
z-index:2;
}

.cinema-live-badge{
display:inline-flex;
align-items:center;
gap:8px;

padding:8px 14px;

border-radius:999px;

background:rgba(0,0,0,.45);

border:
1px solid rgba(200,255,26,.25);

color:var(--lime);

font-size:12px;
font-weight:900;
}

.cinema-live-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--pink);
box-shadow:0 0 14px var(--pink);
}

.cinema-meta{
margin-top:18px;
font-size:12px;
letter-spacing:.14em;
color:var(--muted);
}

.cinema-hero h1{
margin:14px 0;
font-size:64px;
line-height:.88;
letter-spacing:-.08em;
}

.cinema-hero h1 span{
display:block;
color:var(--lime);
font-style:italic;
}

.cinema-hero p{
max-width:320px;
line-height:1.5;
color:#ddd;
}

.cinema-actions{
display:flex;
gap:10px;
margin-top:22px;
}

.cinema-primary-btn,
.cinema-secondary-btn{
height:54px;
padding:0 18px;
border:none;
border-radius:16px;
font-weight:900;
cursor:pointer;
}

.cinema-primary-btn{
background:var(--lime);
color:#111;
}

.cinema-secondary-btn{
background:rgba(255,255,255,.06);
color:white;
border:1px solid rgba(255,255,255,.08);
}

.cinema-stats{
display:flex;
gap:14px;
margin-top:24px;
}

.cinema-stats div{
padding:10px 14px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.06);
}

.cinema-stats b{
display:block;
font-size:18px;
margin-bottom:4px;
}

.cinema-stats span{
font-size:10px;
letter-spacing:.08em;
color:var(--muted);
}

.cinema-section{
margin-bottom:16px;
}

.cinema-section-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}

.cinema-section-head h2{
font-size:14px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--pink);
}

.cinema-section-head span{
font-size:11px;
color:var(--muted);
}

.episode-rail{
display:flex;
gap:12px;
overflow-x:auto;
padding-bottom:6px;
}

.episode-card{
min-width:220px;
padding:18px;
border-radius:24px;
background:linear-gradient(180deg,#101722,#090d14);
border:1px solid rgba(255,255,255,.08);
}

.episode-tag{
display:inline-block;
padding:6px 10px;
border-radius:999px;
font-size:10px;
font-weight:900;
background:rgba(200,255,26,.08);
color:var(--lime);
margin-bottom:12px;
}

.episode-card h3{
margin:0 0 8px;
font-size:28px;
line-height:1;
}

.episode-card p{
margin:0 0 12px;
color:var(--muted);
}

.episode-card span{
font-size:12px;
color:var(--pink);
font-weight:900;
}
.screening-transition{
position:fixed;
inset:0;
z-index:999;

display:none;
align-items:center;
justify-content:center;

background:
radial-gradient(circle at center,
rgba(139,44,255,.16),
rgba(0,0,0,.96));

backdrop-filter:blur(18px);
}

.screening-transition.active{
display:flex;
}

.screening-center{
text-align:center;
max-width:320px;
padding:24px;
}

.screening-badge{
display:inline-block;
padding:8px 14px;
border-radius:999px;

background:rgba(200,255,26,.08);

border:
1px solid rgba(200,255,26,.22);

color:var(--lime);

font-size:11px;
font-weight:900;
letter-spacing:.08em;

margin-bottom:22px;
}

.screening-center h1{
font-size:54px;
line-height:.9;
letter-spacing:-.08em;
margin:0 0 16px;
}

.screening-center h1 span{
display:block;
color:var(--lime);
font-style:italic;
}

.screening-center p{
color:#c6cfda;
line-height:1.5;
}

.screening-loader{
margin-top:28px;
display:flex;
justify-content:center;
}

.screening-loader div{
width:64px;
height:64px;
border-radius:50%;

border:
2px solid rgba(255,255,255,.08);

border-top:
2px solid var(--lime);

animation:spin 1s linear infinite;
}

@keyframes spin{
to{
transform:rotate(360deg);
}
}
/* Runtime feed: swipe-state feel */
section[data-page="live"].page-shell {
  scroll-snap-type: y proximity;
}

section[data-page="live"] .cinema-layer,
section[data-page="live"] .runtime-module {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}