:root {
  --scene-scale: 1;
  --camera-x: 0px;
  --camera-y: 0px;
  --camera-zoom: 1;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #100b08;
  touch-action: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

button,
img { -webkit-tap-highlight-color: transparent; }

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #100b08;
}

/*
 * The scene camera moves and scales the entire TV plate as one rigid unit.
 * The SOURCESTREAM, channel number, effects and alpha mortise all remain nested
 * inside it, so their alignment cannot drift apart while zooming or swimming.
 */
.scene-camera {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform: translate3d(var(--camera-x), var(--camera-y), 0) scale(var(--camera-zoom));
  will-change: transform;
  backface-visibility: hidden;
}

/*
 * The art is a square, centered "cover" scene. On a wide browser the top and
 * bottom crop; on a tall browser the left and right crop. The CRT stays centered.
 */
.tv-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(max(100vw, 100vh) * var(--scene-scale));
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
}

.tv-image {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.tv-on-image { opacity: 1; }

.tv-off-image {
  z-index: 11;
  opacity: 0;
  transition: opacity 80ms linear;
}

.tv-stage.is-off .tv-off-image { opacity: 1; }

/* Exact alpha-hole bounds measured from the supplied 2048 × 2048 iTV2.png. */
.screen-window {
  position: absolute;
  left: 33.3008%;
  top: 38.9160%;
  width: 33.3496%;
  height: 20.8984%;
  z-index: 1;
  overflow: hidden;
  border-radius: 7% / 11%;
  background: #000;
  pointer-events: none;
  isolation: isolate;
}

.player-host {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #000;
}

.player-host iframe,
.player-host video,
.player-host > div {
  position: absolute;
  display: block;
  border: 0;
  max-width: none;
  pointer-events: none;
  background: #000;
}

.player-host video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screen-blackout {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: 0;
  transition: opacity 50ms linear;
  pointer-events: none;
}

.tv-stage.is-off .screen-blackout,
.tv-stage.is-powering-off .screen-blackout { opacity: 1; }

.effect-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.screen-effect {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border: 0;
  background: #000;
}

/* The authored MP4s provide the complete one-shot animation. */
.screen-effect.effect-static,
.screen-effect.effect-power-on,
.screen-effect.effect-power-off {
  object-fit: cover;
}

/* H.264 has no alpha channel. Screen blending makes black act like transparent
 * video for the two Color Blast overlays while preserving their bright colors. */
.screen-effect.effect-colorblast {
  object-fit: cover;
  background: transparent;
  mix-blend-mode: screen;
}

.channel-display {
  position: absolute;
  z-index: 6;
  top: 5%;
  right: 4%;
  width: 19%;
  height: auto;
  opacity: 0;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .82));
  transition: opacity 70ms linear;
  pointer-events: none;
}

.channel-display.is-visible { opacity: 1; }

.remote {
  position: fixed;
  z-index: 20;
  right: 2.5vw;
  bottom: 2.5vh;
  width: clamp(150px, 18vw, 278px);
  aspect-ratio: 735 / 1284;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .54));
  will-change: left, top;
}

.remote.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 18px 23px rgba(0, 0, 0, .66));
}

.remote > img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.remote-button {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
}

.remote-button::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: inherit;
  opacity: 0;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .23);
  transition: opacity 45ms linear;
}

.remote-button:active::after,
.remote-button.is-pressed::after { opacity: 1; }

.remote-button:focus-visible::after {
  opacity: 1;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85);
}

.power-button {
  left: 30.5%;
  top: 20.3%;
  width: 13.6%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.channel-up-button,
.channel-down-button,
.pause-button {
  left: 19.7%;
  width: 26.6%;
  height: 7.8%;
}

.volume-up-button,
.volume-down-button,
.colorblast-button {
  left: 59.3%;
  width: 26.6%;
  height: 7.8%;
}

.channel-up-button,
.volume-up-button { top: 41.9%; }

.channel-down-button,
.volume-down-button { top: 53.8%; }

.pause-button,
.colorblast-button { top: 79.2%; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.debug .screen-window { outline: 3px solid lime; }
body.debug .scene-camera::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 255, 255, .8);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
body.debug .remote { outline: 2px dashed cyan; }

body.debug .remote-button {
  background: rgba(255, 0, 0, .24);
  outline: 1px solid rgba(255, 255, 255, .9);
}

body.debug #status {
  position: fixed !important;
  left: 10px !important;
  bottom: 10px !important;
  z-index: 100 !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 20px) !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  color: white;
  background: rgba(0, 0, 0, .82);
  font: 13px/1.35 monospace;
}

@media (max-width: 760px) {
  .remote {
    width: clamp(140px, 34vw, 235px);
    right: 2vw;
    bottom: 1.5vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tv-off-image,
  .screen-blackout,
  .channel-display,
  .remote-button::after { transition: none; }
}