.tv-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tv-container {
  position: relative;
  width: 900px;
  max-width: 90%;
}

/* Screen area */
#screenArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

/* Player (video) */
#player {
  position: absolute;
  top: 0;
  left: -65px;      /* adjust this to align */
  width: 115%;
  height: 110%;
  transform: scale(0.85);
  transform-origin: top left;
}

/* TV Off overlay */
#tvOverlay {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80%;
  height: 88%;
  z-index: 2;
}

/* Static overlay */
#tvAlwaysOverlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 20px;
  width: 80%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: screen;
}

/* TV Image (frame) */
.tv-image {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 4;
}

/* Buttons container */
.tv-buttons {
  position: absolute;
  right: 8%;
  top: 25%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.5vw, 12px);
}

/* Buttons styling */
.tv-buttons button {
  padding: clamp(6px, 1.2vw, 10px);
  font-size: clamp(12px, 1.2vw, 16px);
  cursor: url("/new_cursor_pointer.png"), pointer;
}

.tv-off-gif,
.tv-small-static {
  width: 100%;
  height: 100%;
  object-fit: cover;
}