/* All positions come from tv.png, which is 1920x1080. Its screen is the rectangle
   at left 288, top 84, 1344 wide, 756 high. The whole image shows on every device.
   508px wide is the smallest set whose screen is still YouTube's minimum 200px high. */
:root {
  --vw: 100vw;
  --vh: 100vh;
  --rot: 0deg;
  --set-w: max(508px, min(var(--vw), calc(var(--vh) * 16 / 9)));
}
@supports (height: 100dvh) {
  :root { --vw: 100dvw; --vh: 100dvh; }
}

/* Upright phones get the whole TV drawn on its side. */
@media (orientation: portrait) and (max-width: 500px) {
  :root { --vw: 100vh; --vh: 100vw; --rot: 90deg; }
  @supports (height: 100dvh) {
    :root { --vw: 100dvh; --vh: 100dvw; }
  }
}

html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: #000; color: #eee; font-family: 'Courier New', monospace; }

#room { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--rot)); }
#unit { position: relative; }
#set { position: relative; isolation: isolate; width: var(--set-w); aspect-ratio: 16 / 9; overflow: hidden; }

/* Stacking matters. tv.png has glass and glare painted across its screen, and YouTube
   allows nothing in front of the player. So the order is: our own screens, then the
   casing with its glass, then the player above everything. */
#screen, #picture { position: absolute; left: 15%; top: 7.7778%; width: 70%; height: 70%; }
#screen { z-index: 1; background: #000; container-type: size; }
#casing { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; user-select: none; }
#picture { z-index: 3; visibility: hidden; }
#picture iframe, #player { display: block; width: 100%; height: 100%; }
body[data-state="TUNING"] #picture, body[data-state="PLAYING"] #picture { visibility: visible; }

#break, #testcard { display: none; width: 100%; height: 100%; }
body[data-state="BREAK"] #break { display: flex; }
body[data-state="TEST_CARD"] #testcard { display: block; }

#break { flex-direction: column; box-sizing: border-box; padding: 6cqw 7cqw; font-weight: 700; }
#break p { margin: 0; }
#break-brand { font-size: 4.4cqw; color: #ffe600; }
#break-label { margin-top: auto !important; font-size: 3cqw; color: #2fe0e0; text-transform: uppercase; }
#break-title {
  margin-top: 1.2cqw !important;
  font-size: 5cqw;
  line-height: 1.15;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#break-count { margin: auto 0 0 auto !important; font-size: 7cqw; color: #ffe600; font-variant-numeric: tabular-nums; }

/* The panel covers only the strip under the screen, so it never touches the player. */
#panel { position: absolute; left: 2.5%; width: 95%; top: 84.7%; height: 9.72%; }
#status {
  position: absolute;
  left: 2%;
  right: 12%;
  top: 0;
  margin: 0;
  font-size: max(11px, calc(var(--set-w) * 0.0135));
  font-weight: 700;
  line-height: calc(var(--set-w) * 0.0547);
  color: #b4b4b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#power {
  position: absolute;
  left: 93.56%;
  width: 5.76%;
  top: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
/* A larger touch target than the drawn button, which is small on phones. */
#power::after { content: ''; position: absolute; inset: -30%; border-radius: 50%; }
#power:disabled { cursor: default; }
#power:focus-visible { outline: 2px solid #ffe600; outline-offset: -4px; }

/* A standby light: the image paints it lit, so it is covered while the set is on. */
#led {
  position: absolute;
  left: 90.46%;
  width: 3.51%;
  top: 18.1%;
  height: 60.95%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #231f20 0 26%, rgba(61, 59, 60, 1) 42%, rgba(61, 59, 60, 0) 100%);
  transition: opacity 0.15s;
}
body[data-state="OFF"] #led { opacity: 0; }

#log { position: fixed; left: 0; bottom: 0; width: 50vw; height: 14vh; margin: 0; z-index: 10; overflow: auto; padding: 4px; box-sizing: border-box; background: #000; font-size: 11px; white-space: pre-wrap; }