/* The TV guide section: a small set on the left, a guide grid on the right. */
.epg{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);border:1px solid var(--line);border-radius:22px;background:rgba(10,13,15,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden;box-shadow:0 40px 120px -40px rgba(45,212,212,.18)}

/* the set */
.epg-set{min-width:0;padding:clamp(14px,1.8vw,20px);display:flex;flex-direction:column;gap:14px}
.epg-tv{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#000;isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 0 7px #0b0e10,0 0 0 8px rgba(205,235,235,.08),0 24px 60px -20px rgba(0,0,0,.8)}
.epg-tv video,.epg-card{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.epg-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 18px 22%;text-align:center;
  background:radial-gradient(120% 90% at 30% 20%,hsl(var(--h) 45% 34%),hsl(var(--h) 40% 14%) 55%,hsl(calc(var(--h) + 30) 30% 6%))}
.epg-card::before{content:"";position:absolute;inset:4% 18% 26%;border-radius:50%;background:radial-gradient(closest-side,hsl(var(--h) 70% 70% / .18),transparent);pointer-events:none}
.epg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.epg-card.has-art::before,.epg-card.has-art .epg-card-name{display:none}
.epg-card-name{position:relative;font-family:var(--font-serif);font-style:italic;font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem);line-height:1;color:#f3f6f5;letter-spacing:-.01em}
.epg-glass{position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.13) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04);border-radius:inherit}
.epg-dim{position:absolute;inset:0;z-index:3;background:#000;opacity:0;pointer-events:none;transition:opacity .3s ease}
.epg-tv.dip .epg-dim{opacity:1}
/* a slow, faint band that rolls down the glass once while it tunes */
.epg-roll{position:absolute;left:0;right:0;top:0;height:38%;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,transparent,rgba(170,220,215,.05) 45%,rgba(170,220,215,.08) 50%,rgba(170,220,215,.05) 55%,transparent)}
.epg-tv.rolling .epg-roll{animation:epg-roll .9s ease-in-out}
@keyframes epg-roll{0%{transform:translateY(-100%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(270%);opacity:0}}

.epg-osd{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,1.6vw,16px);pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.2) 45%,transparent 65%,rgba(0,0,0,.35))}
.epg-osd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.epg-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.5);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#dfe6e5;white-space:nowrap}
.epg-chip i{width:7px;height:7px;border-radius:50%;background:var(--onair)}
/* VCR-style channel number */
.epg-num{font-family:var(--font-mono);font-weight:500;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);line-height:1;letter-spacing:.06em;color:#7cf59a;
  text-shadow:0 0 10px rgba(110,245,150,.35),2px 2px 0 rgba(0,0,0,.55);transform:scaleY(1.12);transform-origin:top right;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .6s ease}
.epg-num small{font-size:.5em;margin-right:.3em;letter-spacing:.12em;vertical-align:.45em}
.epg-num.show{opacity:1;transition:opacity .12s ease}
.epg-lower{transition:opacity .3s ease;min-width:0}
.epg-tv.dip .epg-lower{opacity:0}
.epg-chan{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-c,var(--noor));margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-show{font-size:var(--step-1);letter-spacing:-.02em;line-height:1.12;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-art{color:#cfdcdb;font-size:.88rem;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-bar{height:3px;background:rgba(255,255,255,.15);border-radius:2px;margin-top:10px;overflow:hidden}
.epg-bar i{display:block;height:100%;width:100%;background:var(--ink-c,var(--noor));transform-origin:left;transform:scaleX(0);transition:transform .6s ease}

.epg-remote{display:flex;align-items:center;gap:14px;min-width:0}
.epg-btns{display:flex;gap:6px;flex:none}
.epg-btn{appearance:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border-radius:10px;border:1px solid var(--line);background:var(--ink-3);color:var(--fg);cursor:pointer;
  font:500 .78rem/1 var(--font-mono);letter-spacing:.1em;transition:border-color .2s,background .2s,transform .2s}
.epg-btn:hover{border-color:rgba(45,212,212,.55);background:#182124}
.epg-btn:active{transform:scale(.97)}
.epg-btn svg{width:17px;height:17px;color:var(--noor)}
.epg-next{min-width:0;font-size:.86rem;color:var(--muted);line-height:1.35}
.epg-next b{color:var(--fg);font-weight:500}

/* the guide */
.epg-guide{position:relative;min-width:0;border-left:1px solid var(--line);display:flex;flex-direction:column}
.epg-grid{--ident-w:148px;--row-h:50px;--ruler-h:34px;position:relative;flex:1 1 auto;min-height:0;height:0;overflow:auto;overscroll-behavior-x:contain;outline:none;
  scrollbar-width:thin;scrollbar-color:rgba(205,235,235,.18) transparent}
.epg-grid:focus-visible{box-shadow:inset 0 0 0 2px rgba(45,212,212,.55)}
.epg-wait{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.epg-in{position:relative;min-width:calc(var(--ident-w) + 4 * 112px)}
.epg-ruler{position:sticky;top:0;z-index:4;display:flex;height:var(--ruler-h);background:rgb(9,12,14);border-bottom:1px solid var(--line)}
.epg-corner{position:sticky;left:0;z-index:2;flex:none;width:var(--ident-w);display:flex;align-items:center;padding-left:14px;background:rgb(9,12,14);border-right:1px solid var(--line);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.epg-times{position:relative;flex:1 1 auto}
.epg-tick{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:9px;border-left:1px solid rgba(205,235,235,.08);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:rgba(237,243,242,.62);font-variant-numeric:tabular-nums;white-space:nowrap}
.epg-row{--ink-c:hsl(var(--h) 70% 72%);--fill:hsl(var(--h) 26% 15%);display:flex;height:var(--row-h);border-bottom:1px solid rgba(205,235,235,.06);transition:background .25s}
.epg-row.focus{background:rgba(255,255,255,.035)}
.epg-ident{position:sticky;left:0;z-index:3;flex:none;width:var(--ident-w);display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;cursor:pointer;
  background:rgb(10,13,15);border-right:1px solid var(--line);transition:box-shadow .25s,background .25s}
.epg-row.focus .epg-ident{background:rgb(16,19,21)}
.epg-ident b{flex:none;font-family:var(--font-mono);font-weight:500;font-size:.8rem;color:var(--ink-c);font-variant-numeric:tabular-nums}
.epg-ident span{min-width:0;font-size:.84rem;font-weight:600;color:rgba(237,243,242,.72);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.epg-row.on .epg-ident{box-shadow:inset 3px 0 0 var(--ink-c)}
.epg-row.on .epg-ident span{color:#fff}
.epg-ident:hover span{color:#fff}
.epg-track{position:relative;flex:1 1 auto}
.epg-block{position:absolute;top:4px;bottom:4px;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0 9px;overflow:hidden;cursor:pointer;
  border-left:2px solid var(--ink-c);border-radius:0 6px 6px 0;background:var(--fill);color:rgba(237,243,242,.9);transition:background .2s,box-shadow .2s}
.epg-block:hover{background:hsl(var(--h) 30% 21%)}
.epg-block.airing{background:hsl(var(--h) 32% 20%)}
.epg-row.focus .epg-block{background:hsl(var(--h) 30% 19%)}
.epg-row.focus .epg-block.airing{background:hsl(var(--h) 36% 25%)}
.epg-block.active{box-shadow:inset 0 0 0 1px hsl(var(--h) 70% 72% / .55)}
.epg-grid:focus-visible .epg-block.active{box-shadow:inset 0 0 0 2px var(--noor)}
.epg-block.cont{border-left-style:dashed}
.epg-block .t{font-size:.8rem;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-block .a{font-size:.7rem;color:rgba(237,243,242,.6);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.epg-block .p{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.1)}
.epg-block .p i{display:block;height:100%;background:var(--ink-c);transform-origin:left}
.epg-now{position:absolute;top:0;bottom:0;z-index:2;width:0;border-left:1.5px solid rgba(255,90,74,.85);pointer-events:none;
  left:calc(var(--ident-w) + (100% - var(--ident-w)) * var(--now,0))}
.epg-cap{position:absolute;bottom:-4px;z-index:1;width:7px;height:7px;margin-left:-3.25px;border-radius:50%;background:var(--onair);left:calc(var(--now,0) * 100%);pointer-events:none}
.epg-note{min-height:2.6em;padding:9px 14px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted);line-height:1.35;transition:opacity .4s}
.epg-note b{color:var(--fg);font-weight:500}
.epg-note:empty{opacity:0}

@media (max-width:1020px){
  .epg{grid-template-columns:minmax(0,1fr)}
  .epg-guide{border-left:0;border-top:1px solid var(--line)}
  .epg-grid{flex:none;height:calc(var(--ruler-h) + 7 * var(--row-h) + 2px)}
  .epg-set{display:grid;grid-template-columns:minmax(0,1fr);max-width:720px;width:100%;margin-inline:auto}
}
@media (max-width:560px){
  .epg-grid{--ident-w:104px;--row-h:48px;height:calc(var(--ruler-h) + 5 * var(--row-h) + 2px)}
  .epg-in{min-width:calc(var(--ident-w) + 4 * 124px)}
  .epg-ident{gap:7px;padding:0 8px 0 10px}
  .epg-ident span{font-size:.76rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .epg-corner{padding-left:10px}
  .epg-art{font-size:.8rem}
  .epg-show{font-size:1.05rem}
  .epg-chan{font-size:.64rem}
  .epg-bar{margin-top:8px}
  .epg-next{font-size:.8rem}
}
@media (pointer:coarse){
  .epg-tv{touch-action:pinch-zoom}
}
@media (prefers-reduced-motion:reduce){
  .epg-dim,.epg-lower,.epg-num,.epg-num.show,.epg-bar i,.epg-row,.epg-block{transition:none}
  .epg-tv.rolling .epg-roll{animation:none}
}