/* NellaVision, the easter egg: his Season 1 TV, a wooden console set, in a
   wood-panelled room over dark carpet (the room on the Season 1: I Love You cover,
   in its measured browns). Only /nellavision/ loads this. The screen stays plain:
   the static between channels, the power line and the set's glow on the wall are
   the only TV effects. */

.tv-body { background: #120b05; color: var(--paper); }
.tv-room {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
}

/* The wall: panelling, dark, lit by the set */
.tv-wall {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: end;
  justify-items: center;
  padding: clamp(20px, 5vh, 56px) var(--gutter) 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(12, 7, 3, 0.62), rgba(12, 7, 3, 0.38) 45%, rgba(12, 7, 3, 0.7)),
    url("../img/tv/wood.webp") 0 0 / 240px auto repeat,
    #2a180a;
}
.tv-wall::before {   /* the glow of the screen on the wall */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 58%, rgba(190, 210, 255, 0.2), rgba(190, 210, 255, 0) 70%);
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
.tv-room.is-on .tv-wall::before { opacity: 1; }

/* The way home: the NVTV mark, top left, on its own strip of wall. */
.tv-home {
  position: relative;
  z-index: 1;
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 12px -4px;
  padding: 4px;
  color: #e9dcc6;
  text-decoration: none;
}
.tv-home img { width: clamp(76px, 7vw, 110px); height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); transition: transform 0.2s; }
.tv-home span { font: var(--label); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.tv-home:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.tv-room.is-flash .tv-wall::before { opacity: 1; transition-duration: 0.05s; filter: brightness(1.6); }

/* The floor: a baseboard, then carpet; the remote sits here */
.tv-floor {
  padding: 20px var(--gutter) 28px;
  border-top: 10px solid #1c1007;
  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.55)),
    url("../img/tv/carpet.webp") repeat,
    #221f15;
}

/* The set: a wooden console, screen on the left, grille and knobs on the right */
.tv { position: relative; width: min(100%, 1100px, calc((100vh - 370px) * 2.2)); }
@supports (height: 100svh) { .tv { width: min(100%, 1100px, calc((100svh - 370px) * 2.2)); } }
.tv::after {   /* its shadow on the carpet */
  content: "";
  position: absolute;
  right: 6%;
  bottom: -18px;
  left: 6%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
.tv__set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16%;
  gap: clamp(10px, 1.6vw, 18px);
  padding: clamp(10px, 1.6vw, 18px);
  border-radius: clamp(10px, 1.4vw, 16px) clamp(10px, 1.4vw, 16px) 6px 6px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 2px, rgba(0, 0, 0, 0) 2px 7px),
    linear-gradient(180deg, #4b2c13, #2f1a0a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 50px rgba(0, 0, 0, 0.5);
}
.tv__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(10px, 2vw, 22px);
  background: #000;
  box-shadow: 0 0 0 3px #150c05, inset 0 0 30px rgba(0, 0, 0, 0.7);
}
.tv__side { display: grid; grid-template-rows: 1fr auto auto; gap: 12px; justify-items: center; padding: 4px 0; }
.tv__grille {
  width: 100%;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, #1b1008 0 3px, #3a2210 3px 7px);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}
.tv__knob {
  position: relative;
  width: clamp(22px, 3vw, 38px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b6258, #2b2622 70%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.tv__knob::after { content: ""; position: absolute; top: 12%; left: 50%; width: 2px; height: 30%; margin-left: -1px; background: #d8d0c4; }
.tv__knob + .tv__knob::after { transform: rotate(40deg); transform-origin: 50% 130%; }
.tv__plate {
  display: grid;
  grid-column: 1 / -1;
  margin-top: -4px;
  font: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.36em;
  text-align: center;
  text-transform: uppercase;
}
/* The nameplate says it when you find a hidden channel. */
.tv__plate-name,
.tv__plate-msg { grid-area: 1 / 1; transition: opacity 0.25s; }
.tv__plate-name { color: #b89868; opacity: 0.75; }
.tv__plate-msg { color: #8fb3de; letter-spacing: 0.16em; opacity: 0; }
.tv__plate.is-msg .tv__plate-name { opacity: 0; }
.tv__plate.is-msg .tv__plate-msg { opacity: 1; }

/* What is on */
.tv__picture { position: absolute; inset: 0; }
.tv__picture img.tv__still { width: 100%; height: 100%; object-fit: cover; }
.tv__picture iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv__playbtn { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.tv__playbtn:focus-visible { outline: 2px solid var(--paper); outline-offset: -6px; }
.tv__lower { position: absolute; right: 30%; bottom: 8%; left: 6%; pointer-events: none; }
.tv__title {
  font: var(--display);
  font-size: clamp(1rem, 0.6rem + 2vw, 2.125rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.tv__group { margin-top: 6px; font: var(--label); font-size: clamp(0.625rem, 0.5rem + 0.4vw, 0.8125rem); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.tv__osd {
  position: absolute;
  top: 7%;
  right: 6%;
  z-index: 2;
  font: 800 clamp(1rem, 0.6rem + 1.8vw, 1.875rem)/1 "Inter", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.2s;
}
.tv__osd.is-on { opacity: 1; }
.tv__bug { position: absolute; right: 6%; bottom: 7%; font: var(--display); font-size: clamp(0.625rem, 0.4rem + 0.8vw, 1rem); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); pointer-events: none; }

/* Cards: now airing, and the hidden channels */
.tv__card {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 36px);
  height: 100%;
  padding: 0 clamp(14px, 5.5vw, 60px);
  background: radial-gradient(ellipse at 30% 50%, #1d1d1d, #050505 70%);
}
.tv__card--local { grid-template-columns: minmax(0, 1fr); }
.tv__card img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.tv__card-aside { text-transform: none; letter-spacing: 0.02em; }
.tv__card-kicker { color: #8fb3de; font: var(--label); font-size: clamp(0.625rem, 0.5rem + 0.4vw, 0.8125rem); letter-spacing: 0.1em; text-transform: uppercase; }
.tv__card-title { margin-top: 6px; font: var(--display); font-size: clamp(1.125rem, 0.5rem + 2.8vw, 2.75rem); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.tv__card-line { margin-top: 8px; color: #d4d4d0; font-size: clamp(0.75rem, 0.6rem + 0.6vw, 1.0625rem); line-height: 1.4; }
.tv__card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(8px, 1.6vw, 18px); }
.tv__card-actions .btn { width: auto; min-height: 40px; padding: 0 16px; }
.tv__nosignal { display: grid; place-items: center; height: 100%; font: var(--display); font-size: clamp(1.25rem, 0.8rem + 2.6vw, 2.75rem); letter-spacing: 0.04em; text-transform: uppercase; color: #d8d8d4; }
.tv__ident { display: grid; place-content: center; height: 100%; text-align: center; background: radial-gradient(ellipse at 50% 50%, #1a2433, #050505 70%); }
.tv__ident-mark { font: var(--display); font-size: clamp(1.75rem, 0.8rem + 5vw, 5rem); letter-spacing: -0.02em; text-transform: uppercase; }
.tv__ident-line { margin-top: 10px; color: #8fb3de; font: var(--label); font-size: clamp(0.6875rem, 0.5rem + 0.6vw, 1rem); letter-spacing: 0.3em; text-transform: uppercase; }

/* The guide, over the picture */
.tv__guidepanel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(12px, 3vw, 32px) clamp(14px, 4vw, 44px);
  background: #060a12;
}
.tv__guidepanel[hidden] { display: none; }
.tv__guide-title { font: var(--display); font-size: clamp(1rem, 0.6rem + 1.6vw, 1.75rem); text-transform: uppercase; }
.tv__guide-list { margin: 10px 0; padding: 0; overflow-y: auto; list-style: none; columns: 2; column-gap: 24px; }
.tv__guide-list button {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: clamp(4px, 0.7vw, 8px) 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  color: var(--paper);
  font: 500 clamp(0.6875rem, 0.55rem + 0.5vw, 0.9375rem)/1.25 "Inter", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  break-inside: avoid;
}
.tv__guide-list button span { flex: none; width: 2ch; color: #8fb3de; font-variant-numeric: tabular-nums; font-weight: 700; }
.tv__guide-list button[aria-current="true"] { font-weight: 700; }
.tv__guide-list button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.tv__guide-found { color: #8fb3de; font: var(--label); font-size: clamp(0.625rem, 0.5rem + 0.4vw, 0.8125rem); letter-spacing: 0.08em; text-transform: uppercase; }

/* Static between channels, and the power line */
.tv__static { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; pointer-events: none; image-rendering: pixelated; }
.tv__screen.is-changing .tv__static { opacity: 1; }
.tv__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  pointer-events: none;
  transition: opacity 0.35s ease 0.1s;
}
.tv__screen.is-on::after { opacity: 0; }
.tv__screen.is-on .tv__picture { animation: tv-on 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.tv__screen.is-off .tv__picture { animation: tv-off 0.35s ease-in both; }
.tv__screen.is-off::after { opacity: 1; transition-delay: 0.3s; }
@keyframes tv-on {
  0% { transform: scale(1, 0.004); filter: brightness(4); }
  45% { transform: scale(1, 0.004); filter: brightness(4); }
  100% { transform: none; filter: none; }
}
@keyframes tv-off {
  0% { transform: none; filter: none; }
  60% { transform: scale(1, 0.004); filter: brightness(4); }
  100% { transform: scale(0, 0.004); filter: brightness(4); }
}

/* The remote */
.tv__remote { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tv__remote .btn { min-width: 84px; }
.tv__remote .btn[aria-pressed="true"],
.tv__remote .btn[aria-expanded="true"] { background: var(--paper); color: var(--ink); }
.tv__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 460px; margin: 14px auto 0; }
.tv__keys button {
  width: 40px;
  height: 40px;
  border: 1px solid #4a4638;
  border-radius: 50%;
  background: #1a1812;
  color: var(--paper);
  font: 600 0.9375rem/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
}
.tv__keys button:active { background: #33302a; }
.tv__keys button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.tv__hint { margin-top: 12px; color: #a9a597; font-size: 0.8125rem; text-align: center; }

/* Without JavaScript the TV is just this list of his videos. */
.tv__guide { max-width: 560px; margin: 24px auto; padding: 0 var(--gutter); list-style: none; }
.tv__guide a { display: block; padding: 10px 0; border-top: 1px solid #3a2a1a; color: var(--paper); }
.js .tv__guide { display: none; }
html:not(.js) .tv-wall,
html:not(.js) .tv-floor { display: none; }

@media (max-width: 760px) {
  .tv__set { grid-template-columns: minmax(0, 1fr); }
  .tv__side { display: none; }
  .tv__remote { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .tv__remote .btn { min-width: 0; padding: 0 2px; font-size: 0.6875rem; letter-spacing: 0.03em; }
  .tv__keys { max-width: 240px; }
  .tv__lower { right: 6%; }
  .tv__card { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); padding: 0 14px; }
  .tv__card--local { grid-template-columns: minmax(0, 1fr); }
  .tv__card-line { display: none; }
  .tv__card--local .tv__card-line { display: block; margin-top: 4px; }
  .tv__card-aside { display: none; }
  .tv__card-actions { gap: 6px; margin-top: 8px; }
  .tv__card-actions .btn { min-height: 32px; padding: 0 10px; font-size: 0.6875rem; }
  .tv__guide-list { columns: 1; }
}
@media (hover: hover) {
  .tv__guide-list button:hover { text-decoration: underline; }
  .tv-home:hover img { transform: rotate(-4deg) scale(1.04); }
  .tv-home:hover span { text-decoration: underline; text-underline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .tv__screen.is-on .tv__picture,
  .tv__screen.is-off .tv__picture { animation: none; }
  .tv__screen::after,
  .tv-wall::before { transition: none; }
}