#retro-tv-container {
  width: 88%;
  margin: auto;
  position: relative;
  aspect-ratio: 16 / 9;
}

.tv-wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.tv-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

.tv-screen {
  position: absolute;
  top: 17%;
  left: 8%;
  width: 76%;
  height: 67%;
  z-index: 0;
  overflow: hidden;
}

.tv-screen iframe,
.tv-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

#tv-static {
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#tv-static.active {
  opacity: 1;
  display: block !important;
}

.tv-glow {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,255,255,0.15) 0%, rgba(0,0,0,0) 70%);
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.02); }
}

.tv-overlay {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 15;
  mix-blend-mode: overlay;
}

.scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.3),
    rgba(0,0,0,0.3) 1px,
    transparent 1px,
    transparent 3px
  );
}

.pixels {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/65/CRT_noise.gif');
  background-size: cover;
  opacity: 0.03;
}

.channel-indicator {
  position: absolute;
  top: 28.1%;
  right: 9%;
  width: 3.9%;
  z-index: 2;
}

.channel-button {
  position: absolute;
  top: 7.5%;
  right: 8.7%;
  padding: 0.5em 1em;
  font-size: 0.9em;
  cursor: pointer;
  z-index: 3;
  border-radius: 5px;
  height: 6.2%;
  width: 5.6%;
  border:none;
  background: #00000000;
  overflow: hidden;
}

.channel-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
  transform: skewX(-20deg);
  transition: left 0.5s ease-in-out;
}

.channel-button:hover::before {
  left: 130%;
}

.sticker {
  position: absolute;
  z-index: 4;
}

.sticker:hover {
  transform: scale(1.1) rotate(-2deg);
  filter: brightness(1.2) contrast(1.1);
}

.sticker img {
  width: 100%;
  height: auto;
  display: block;
}

.tv-overlay-link {
  position: absolute;
  top: 12%;
  left: 11%;
  width: 70%;
  height: 74%;
  z-index: 25;
  display: block;
}

.tv-overlay {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10; 
  mix-blend-mode: overlay;
}

#tv-static {
  z-index: 20;
}