/* =====================================================================
   MVUKE TV, live-tv.php
   "Theater" layout: ambient-lit player, a now-airing bar beneath it and
   a program guide rail alongside. Tokens/.btn come from navigation.css.
===================================================================== */
body.live-page{background:#07040d;color:#fff;}
.live-page{--pad:clamp(0px,4vw,72px);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.is-hidden{display:none!important;}

/* ============================ THEATER ============================= */
.theater{position:relative;padding:calc(var(--mv-nav-h) + 20px) var(--pad) 56px;max-width:1600px;margin:0 auto;}
/* Ambient glow behind the player, like a lit room. */
.theater::before{content:'';position:absolute;left:0;right:0;top:0;height:78%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 32% 30%,rgba(124,63,201,.38),transparent 70%),radial-gradient(40% 50% at 90% 10%,rgba(232,162,61,.12),transparent 70%);}

.theater-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:28px;align-items:start;}

/* ============================ PLAYER ============================== */
.player-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--mv-radius-md);overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 120px -30px rgba(124,63,201,.6),0 30px 60px -30px rgba(0,0,0,.9);}
#twitch-embed{position:absolute;inset:0;width:100%;height:100%;}
#twitch-embed iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0;}

/* ============================ NOW AIRING ========================== */
.now{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:24px 4px 0;}
.now-main{flex:1 1 340px;min-width:0;}
.now-status{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 11px;border-radius:999px;font-size:.8rem;font-weight:900;}
.now-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;position:relative;}
.now-status.is-on-air{background:var(--mv-ember-500);color:var(--mv-ink-950);}
.now-status.is-on-air .now-status-dot{background:var(--mv-ink-950);}
.now-status.is-on-air .now-status-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid currentColor;animation:mvLivePulse 2.2s ease-out infinite;}
.now-status.is-off-air{background:rgba(255,255,255,.1);color:rgba(248,245,252,.7);}
.now-status.is-off-air .now-status-dot{background:rgba(248,245,252,.5);}

.now-title{margin-top:14px;font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.02;letter-spacing:-.045em;text-wrap:balance;}
.now-time{margin-top:8px;font-size:.95rem;font-weight:700;color:var(--mv-ember-400);}
.now-progress{margin-top:16px;height:4px;max-width:420px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden;}
.now-progress i{display:block;height:100%;background:var(--mv-ember-400);border-radius:2px;transition:width 1.2s linear;}

.now-next{display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:320px;padding:14px 18px;border-radius:var(--mv-radius-sm);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);}
.now-next-label{font-size:.78rem;font-weight:700;color:rgba(248,245,252,.58);}
.now-next-title{font-size:1.05rem;font-weight:800;line-height:1.2;}
.now-next-time{font-size:.82rem;font-weight:600;color:rgba(248,245,252,.7);}

.now.is-switching .now-title,.now.is-switching .now-time{animation:mvNowIn .6s var(--mv-ease) both;}
@keyframes mvNowIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ============================ PROGRAM GUIDE ======================= */
.guide-wrap{position:relative;align-self:stretch;min-height:420px;}
.guide{position:absolute;inset:0;display:flex;flex-direction:column;padding:22px;border-radius:var(--mv-radius-md);background:rgba(23,15,38,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);}
.guide-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--mv-line);}
.guide-head h2{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;}
.guide-clock{font-size:.85rem;font-weight:800;color:var(--mv-ember-400);font-variant-numeric:tabular-nums;}

.guide-list{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding-top:6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%);mask-image:linear-gradient(to bottom,transparent,#000 8%);}
.guide-list::-webkit-scrollbar{display:none;}
.guide-empty{font-size:.88rem;color:rgba(248,245,252,.6);padding:14px 2px;}

.guide-row{position:relative;flex:0 0 auto;padding:15px 2px;border-bottom:1px solid var(--mv-line);max-height:140px;opacity:1;filter:blur(0);transform:scale(1);
  transition:max-height .6s var(--mv-ease),opacity .6s var(--mv-ease),filter .6s var(--mv-ease),transform .6s var(--mv-ease),padding .6s var(--mv-ease),margin .6s var(--mv-ease);}
.guide-row:last-child{border-bottom:0;}
.guide-row-time{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap;}
.guide-row-range{font-size:.78rem;font-weight:700;color:rgba(248,245,252,.58);font-variant-numeric:tabular-nums;}
.guide-row-label{font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px;color:var(--mv-ink-950);background:var(--mv-ember-400);}
.guide-row-title{font-size:.98rem;font-weight:800;line-height:1.25;}

/* On air: highlighted band. */
.guide-row.is-live{margin:0 -12px;padding:15px 12px;border-radius:10px;background:linear-gradient(90deg,rgba(124,63,201,.32),rgba(124,63,201,0));}
.guide-row.is-live .guide-row-title{font-size:1.08rem;}
/* Up next: quiet outline instead of the solid tag. */
.guide-row.is-next .guide-row-label{background:transparent;color:var(--mv-violet-300);border:1px solid var(--mv-violet-300);}

/* Finished shows shrink, fade and blur, which pulls everything below them
   upward: the "scroll up when a program ends" effect, purely transitions. */
.guide-row.is-past{opacity:.55;filter:blur(.6px);transform:scale(.98);max-height:76px;}
.guide-row.is-past .guide-row-title{font-size:.88rem;}
.guide-row.is-past-older{opacity:.3;filter:blur(1.4px);transform:scale(.95);max-height:58px;}
.guide-row.is-past-older .guide-row-title{font-size:.82rem;}
.guide-row.is-leaving{opacity:0;filter:blur(3px);max-height:0;padding-top:0;padding-bottom:0;margin:0;border-bottom-color:transparent;}

.guide-all{display:flex;align-items:center;justify-content:center;margin-top:14px;padding:12px;border-radius:999px;background:rgba(255,255,255,.1);font-size:.86rem;font-weight:800;transition:background .25s var(--mv-ease);}
.guide-all:hover{background:rgba(255,255,255,.2);}

/* ============================ MORE FROM MVUKE TV ================== */
.more{position:relative;z-index:1;max-width:1600px;margin:0 auto;padding:8px var(--pad) 72px;}
.more h2{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.04em;margin-bottom:18px;}
.more-list li:last-child a{border-bottom:1px solid rgba(255,255,255,.14);}
.more-list a{display:grid;grid-template-columns:1fr 1.2fr auto;gap:8px 32px;align-items:center;padding:24px 4px;border-top:1px solid rgba(255,255,255,.14);transition:background .35s var(--mv-ease),padding-left .35s var(--mv-ease);}
.more-list strong{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:-.04em;line-height:1.1;transition:color .3s var(--mv-ease);}
.more-list span{font-size:.95rem;line-height:1.55;color:rgba(248,245,252,.7);}
.more-list svg{width:26px;height:26px;color:var(--mv-ember-400);transition:transform .3s var(--mv-ease);}
@media(hover:hover){.more-list a:hover{background:linear-gradient(90deg,rgba(124,63,201,.25),transparent);padding-left:16px;}.more-list a:hover strong{color:var(--mv-ember-400);}.more-list a:hover svg{transform:translateX(5px);}}
@media(max-width:980px){.more{padding:8px 20px 56px;}.more-list a{grid-template-columns:1fr auto;}.more-list span{grid-column:1;}.more-list svg{grid-column:2;grid-row:1 / 3;}}

/* ============================ RESPONSIVE ========================== */
@media(max-width:1100px){
  .theater-grid{grid-template-columns:minmax(0,1fr) 320px;gap:22px;}
}
@media(max-width:980px){
  .theater{padding:var(--mv-nav-h) 0 56px;}
  .theater-grid{grid-template-columns:1fr;gap:20px;}
  .player-frame{border-radius:0;}
  .now{padding:4px 20px 0;}
  .now-next{max-width:none;flex:1 1 100%;}
  .guide-wrap{min-height:0;margin:0 20px;}
  .guide{position:relative;inset:auto;max-height:440px;padding:18px;}
}
@media(max-width:760px){
  .theater{padding-bottom:40px;}
}

@media(prefers-reduced-motion:reduce){
  .guide-row,.now-progress i,.more-list a,.more-list svg{transition:none!important;}
  .now-status .now-status-dot::after{animation:none!important;}
  .now.is-switching .now-title,.now.is-switching .now-time{animation:none!important;}
}