/* PLAY: Feewong TV. A set that switches on when it reaches you, a guide of the films beside it, static between
   channels. Loads after main.css and uses its tokens, bar, note and footer; play.js runs the set. */

.tv-open { padding-block: clamp(120px, 18vh, 180px) clamp(28px, 5vh, 56px); }

.tv-room {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start;
  padding-block: clamp(12px, 3vh, 32px) clamp(48px, 8vh, 96px);
}

/* the set: a dark bezel, a curved glass with scan lines, a chin with the badge and the power light */
.tv {
  padding: clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px) 0; border-radius: 22px;
  background: linear-gradient(160deg, #222 0%, #121212 45%, #0A0A0A 100%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.tv-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px / 14px; background: #020304; }
.tv-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.tv-feed { position: absolute; inset: 0; }
.tv-feed::before {  /* the refresh band, rolling down the glass */
  content: ""; position: absolute; inset: -20% 0 auto; z-index: 3; height: 18%; pointer-events: none;
  background: linear-gradient(transparent, rgba(255, 255, 255, .05), transparent); animation: roll 7s linear infinite;
}
@keyframes roll { to { transform: translateY(700%); } }
.tv-feed::after { content: ""; position: absolute; inset: 60% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(0, 0, 0, .45)); pointer-events: none; }
.tv-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.tv-snow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; pointer-events: none; }
.tv.static .tv-snow { opacity: .92; }
.tv.static .tv-pic { transform: translateY(-4%) scale(1.03); }

/* the channel in the corner, like the old sets did it */
.tv-osd {
  position: absolute; top: 6%; right: 5%; z-index: 4; color: var(--amber); font: 700 clamp(1rem, 2.3vw, 1.9rem)/1 var(--mono);
  letter-spacing: .06em; text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 0 14px rgba(242, 165, 65, .8);
}
.tv.osd .tv-osd { animation: osd .5s steps(2) both; }
@keyframes osd { 0% { opacity: 0; } 100% { opacity: 1; } }
/* the lower third: a solid strip, like a broadcast name bar, so it reads over a busy thumbnail */
.tv-lower {
  position: absolute; left: 4%; bottom: 7%; z-index: 4; display: grid; gap: 5px; max-width: min(64%, 30em);
  padding: 9px 14px 10px 12px; border-left: 4px solid var(--amber); background: rgba(5, 6, 8, .86);
}
.tv-where { color: var(--amber); font: 600 clamp(.6rem, .9vw, .74rem)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.tv-title { font: 800 clamp(.82rem, 1.45vw, 1.2rem)/1.15 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
/* the whole picture is the play button; the lit circle sits bottom right */
.tv-play { position: absolute; inset: 0; z-index: 5; border: 0; padding: 0; background: none; cursor: pointer; }
.tv-play i {
  position: absolute; right: 5%; bottom: 7%; width: clamp(48px, 6vw, 72px); aspect-ratio: 1; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 0 rgba(242, 165, 65, .5); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); animation: beacon 2.6s ease-in-out infinite;
}
.tv-play i::before { content: ""; position: absolute; inset: 30% 28% 30% 38%; background: var(--black); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tv-play:hover i, .tv-play:focus-visible i { transform: scale(1.1); }
@keyframes beacon { 50% { box-shadow: 0 0 0 10px rgba(242, 165, 65, 0); } }
.tv-feed iframe { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; border: 0; }
.tv.playing .tv-osd, .tv.playing .tv-lower, .tv.playing .tv-play, .tv.playing .tv-screen::after { display: none; }

/* switching on: a dot, a line, then the picture */
.tv.standby .tv-feed { clip-path: inset(50% 50% 50% 50%); }
.tv.power .tv-feed { animation: power 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes power {
  0% { clip-path: inset(49.4% 49% 49.4% 49%); filter: brightness(5); }
  35% { clip-path: inset(49.4% 0 49.4% 0); filter: brightness(3); }
  100% { clip-path: inset(0 0 0 0); filter: brightness(1); }
}

.tv-chin { display: flex; align-items: center; gap: 12px; padding: 12px 4px 14px; }
.tv-brand {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: var(--white); color: var(--black);
  font: 800 .62rem/1 var(--display); letter-spacing: -0.04em;
}
.tv-model { flex: 1; color: #6B7280; font: 600 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.tv-led { width: 7px; height: 7px; border-radius: 50%; background: #3A2A14; transition: background-color .3s, box-shadow .3s; }
.tv.power .tv-led, .tv:not(.standby) .tv-led { background: var(--amber); box-shadow: 0 0 10px rgba(242, 165, 65, .9); }

/* the remote: channel down, play, channel up */
.remote { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.rm {
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border: 1px solid #2C2C2C; border-radius: 25px;
  background: linear-gradient(#1C1C1C, #111); color: var(--white); font: 700 .78rem/1 var(--mono); letter-spacing: .1em; cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .12s, border-color .2s;
}
.rm:hover { border-color: #4A4A4A; }
.rm:active { transform: translateY(2px); }
.rm-up, .rm-down { width: 10px; height: 8px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rm-down { transform: rotate(180deg); }
.rm-big { padding: 0 24px; background: var(--amber); border-color: var(--amber); color: var(--black); font: 800 .95rem/1 var(--display); letter-spacing: 0; }
.rm-big:hover { border-color: var(--white); }
.rm-big i { width: 10px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* the listings: what's on, his navy, the channel that's on lit amber */
.listings { overflow: hidden; border-radius: 12px; background: var(--navy); box-shadow: 0 30px 70px rgba(0, 0, 0, .7); }
.listings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; background: #1A2438; }
.listings-head b { font: 800 1.15rem/1 var(--display); letter-spacing: -0.02em; }
.listings-head span { color: #A9B4C8; font: 600 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.listings-list { margin: 0; padding: 0; list-style: none; }
.prog {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 15px 18px;
  border: 0; border-top: 1px solid rgba(255, 255, 255, .08); background: none; color: var(--white); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .2s;
}
.prog:hover { background: rgba(255, 255, 255, .06); }
.prog-ch { color: #A9B4C8; font: 700 .9rem/1 var(--mono); }
.prog-name { display: grid; gap: 4px; min-width: 0; }
.prog-name b { font: 700 .98rem/1.25 var(--display); letter-spacing: -0.01em; }
.prog-name small { color: #A9B4C8; font-size: .84rem; }
.prog-len { color: #A9B4C8; font: 600 .78rem/1 var(--mono); }
.prog[aria-pressed="true"] { background: var(--amber); color: var(--black); }
.prog[aria-pressed="true"] .prog-ch, .prog[aria-pressed="true"] small, .prog[aria-pressed="true"] .prog-len { color: #3B2A10; }

/* more on YouTube: a light band, so the page isn't black from top to bottom (his ask, 20 Oct) */
.tv-more { padding-block: clamp(64px, 11vh, 120px); background: var(--paper); color: var(--navy); text-align: center; }
.tv-more h2 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.035em; }
.tv-more p { max-width: 34em; margin: 16px auto 0; color: var(--muted-ink); font-size: 1.1rem; }
.tv-sub { display: inline-block; margin-top: 30px; text-decoration: none; filter: drop-shadow(0 6px 8px rgba(38, 52, 79, .3)); }
.tv-sub span { background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .06)), var(--amber); }

@media (max-width: 900px) {
  .tv-room { grid-template-columns: minmax(0, 1fr); }
  .tv { border-radius: 16px; }
  .tv-screen { border-radius: 10px / 9px; }
  .tv-lower { max-width: 70%; padding: 7px 10px 8px 10px; }
}
@media (max-width: 560px) {
  .rm { height: 46px; padding: 0 14px; }
  .prog { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding: 14px 14px; }
}