.tv-stage {
  position: relative;
  flex: none;
  width: clamp(150px, 22vw, 276px);
  aspect-ratio: 340 / 244;
}

.tv-stage::before {
  position: absolute;
  inset: 87% -6% -3% 0;
  background: radial-gradient(ellipse, #020502e8 5%, #050903c0 30%, transparent 73%);
  content: '';
  pointer-events: none;
}

.television {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: url('assets/crt-cabinet.svg') center / 100% 100% no-repeat;
  filter: drop-shadow(3px 8px 7px #020502ad);
  transform: rotate(-3deg);
  transform-origin: 90% 83%;
  container-type: inline-size;
}

.television .console {
  position: absolute;
  display: block;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

.television .screen {
  position: absolute;
  display: block;
  isolation: isolate;
  inset: 36.48% 34.71% 19.67% 10%;
  border: 0;
  border-radius: 12% / 17%;
  overflow: hidden;
  background: #202e17;
  box-shadow: 0 0 8px #8bd93426;
}

.television .screen > :is(.test-pattern, .crack) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.television .test-pattern {
  background:
    radial-gradient(ellipse at 56% 44%, #aeea45a6 1%, transparent 69%),
    repeating-linear-gradient(90deg, #263919 0 15%, #3d6225 15% 27%, #4f6a27 27% 43%);
  opacity: .9;
}

.television .screen-display {
  position: absolute;
  inset: 12% 11%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  color: #e9ffc0;
  text-align: left;
  text-shadow: 0 0 5px #b5f64d;
  font-size: 6px;
  font-size: 3.1cqw;
  line-height: 1.12;
  letter-spacing: .085em;
}

.television .screen-display strong {
  font-size: 12px;
  font-size: 8.5cqw;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  letter-spacing: .01em;
}

.television .screen-display small {
  align-self: end;
  text-align: right;
  font-size: inherit;
}

.television .screen::before,
.television .screen::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
}

.television .screen::before {
  z-index: 1;
  background:
    radial-gradient(ellipse at 34% -44%, #e9f5d07d 0, #c5ddb629 56%, transparent 58%),
    linear-gradient(142deg, transparent 43%, #e3eecb38 46%, #ccdac128 54%, transparent 59%),
    radial-gradient(ellipse at 50% 110%, #b1d48641 8%, transparent 51%);
  mix-blend-mode: screen;
  opacity: .85;
}

.television .screen::after {
  z-index: 3;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, #03090462 2px 3px),
    radial-gradient(ellipse, transparent 32%, #050a05a8 91%, #050a05e0 100%);
  box-shadow: inset 0 0 7px 1px #050a05cc, inset 0 1px 1px #ecf7ca4a;
}

.television .crack {
  z-index: 2;
  fill: none;
  stroke: #e1e9d6bd;
  stroke-width: .72;
  filter: drop-shadow(.5px 1px 0 #070d05);
}

.television .console u {
  position: absolute;
  display: block;
  left: 78.74%;
  top: 80.35%;
  width: 1.45%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #b9f64f;
  box-shadow: 0 0 4px 1px #a1ef6eab;
}

.television:hover .screen,
.television:focus-within .screen {
  box-shadow: 0 0 11px #a4f14f66;
}

.crt-standby-control {
  position: absolute;
  inset: 25% 2% 5% 2%;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.hero.rack-stacked .receiver {
  bottom: calc(var(--dock-clearance, 82px) + var(--rack-height, 70px) + 10px);
}

.receiver.playlist-open { z-index: 8; }
.receiver.playlist-open .tv-stage {
  width: clamp(238px, 22vw, 284px);
  height: 260px;
  aspect-ratio: auto;
}
.playlist-open .television {
  background-image: url('assets/crt-cabinet-playing.svg');
  transform: none;
}
.receiver.playlist-open .tuner { display: none; }
.crt-close-control {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 8px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  padding: 0;
  border: 1px solid #95c86d80;
  border-radius: 50%;
  background: #101c10;
  color: #dbffc0;
  font: 700 16px / 1 var(--mono);
}
.crt-close-control:hover { background: #31532a; color: #f2ffdc; }
.crt-sound-hint {
  position: absolute;
  right: 9.42%;
  bottom: 1px;
  left: 3.99%;
  color: #e3ffd1;
  font: 700 7px / 1 var(--mono);
  text-align: center;
  pointer-events: none;
}
.playlist-open .television .screen {
  inset: 31px 9.42% 19px 3.99%;
  border-radius: 0;
  background: #060b07;
  box-shadow: 0 0 10px #a4f14f40;
}
.playlist-open .screen :is(.test-pattern, .screen-display, .crack),
.playlist-open .television .console,
.playlist-open .screen::before,
.playlist-open .screen::after {
  display: none;
}

.playlist-link {
  display: inline-block;
  color: #cbf390;
}

.playlist-link:hover,
.playlist-link:focus-visible {
  color: #efffc5;
  text-decoration: underline;
}

.playlist-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050805;
}

@media (max-width: 680px) {
  .tv-stage { width: clamp(112px, 27vw, 160px); }
}

@media (max-height: 430px) {
  .tv-stage { width: clamp(107px, 19vh, 132px); }
}

@media (max-width: 650px) and (orientation: portrait),
       (max-height: 500px) and (orientation: landscape) {
  .hero {
    --mobile-crt-scale: .5;
    --mobile-crt-top: 10px;
    --mobile-crt-height: calc(260px * var(--mobile-crt-scale));
    --mobile-crt-standby-width: 110px;
  }

  .hero .receiver,
  .hero.rack-stacked .receiver {
    inset-block: var(--mobile-crt-top) auto;
    left: max(var(--edge), env(safe-area-inset-left));
  }

  .receiver :is(.contact-print, .tuner) { display: none; }
  .hero .receiver .tv-stage { width: var(--mobile-crt-standby-width); }
  .hero .receiver.playlist-open .tv-stage {
    width: calc(238px * var(--mobile-crt-scale));
    height: var(--mobile-crt-height);
  }

  .playlist-open .television .screen {
    inset-block: calc(31px * var(--mobile-crt-scale)) calc(19px * var(--mobile-crt-scale));
  }

  /* Preserve the embed's viewport while shrinking its footprint on the game. */
  .playlist-frame {
    width: calc(100% / var(--mobile-crt-scale));
    height: calc(100% / var(--mobile-crt-scale));
    transform: scale(var(--mobile-crt-scale));
    transform-origin: top left;
  }

  .crt-close-control { width: 24px; height: 24px; top: 0; right: -9px; }
  .crt-close-control::before { position: absolute; inset: -8px; content: ''; }

  .hero .field-mark { pointer-events: none; }
}

@media (max-width: 650px) and (orientation: portrait) {
  .hero { --mobile-crt-top: 106px; }
  .hero .receiver,
  .hero.rack-stacked .receiver {
    left: auto;
    right: max(var(--edge), env(safe-area-inset-right));
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hero { --mobile-crt-scale: .42; --mobile-crt-standby-width: 100px; }
  .hero .field-mark {
    top: calc(var(--mobile-crt-top) + var(--mobile-crt-standby-width) * 244 / 340 + 8px);
    gap: 3px;
  }
  .hero:has(.receiver.playlist-open) .field-mark {
    top: calc(var(--mobile-crt-top) + var(--mobile-crt-height) + 8px);
  }
}