/* Arena TV Container Styling */

/* TV Content positioning controls */
:root {
  --tv-content-scale: 0.65; /* use 0.6 to test */
  --tv-content-translate-x: -86px;
  --tv-content-translate-y: -38px;
  
  /* TV Container size controls */
  --tv-container-width: 1024px;
  --tv-container-height: 712px;
  
  /* TV Frame image controls */
  --tv-frame-scale: 1.0;
  --tv-frame-translate-x: 0px;
  --tv-frame-translate-y: 0px;
}

/* TV Container Structure */
.tv-container {
  width: var(--tv-container-width);
  height: var(--tv-container-height);
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  
  /* Disable text selection and drag selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  /* Disable drag and drop */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

/* TV Frame overlay (top layer) */
.tv-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
}

.tv-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: 
    translateX(var(--tv-frame-translate-x)) 
    translateY(var(--tv-frame-translate-y)) 
    scale(var(--tv-frame-scale));
  transform-origin: center center;
}

/* Screen filter overlay (middle layer) */
.tv-screen-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
  /* CRT filter effects combined with content positioning */
  transform: 
    translateX(var(--tv-content-translate-x)) 
    translateY(var(--tv-content-translate-y)) 
    scale(var(--tv-content-scale))
    scale(1.05) 
    perspective(600px) /* can lower to perspective(800px) to reduce perspective */
    rotateX(3deg)  /* can lower to rotateX(1deg) to reduce tilt */
    rotateY(-2deg);
  transform-origin: center center;
  filter: contrast(1.1) saturate(1.2) blur(0.5px); /* can lower to blur(0.4px) to reduce blur */
}

/* Scanlines effect */
.tv-screen-filter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 2px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: multiply;
  z-index: 2;
}

/* Vignette effect */
.tv-screen-filter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);
  mix-blend-mode: multiply;
  z-index: 3;
}

/* Chromatic aberration layer */
.tv-screen-aberration {
  position: absolute;
  inset: 0;
  background-image: url('/shared/images/grain.svg');
  background-size: 512px 512px;
  opacity: 0.3;
  mix-blend-mode: multiply;
  filter: drop-shadow(1px 0 red) drop-shadow(-1px 0 cyan);
  pointer-events: none;
  z-index: 1;
}

/* TV Content area (bottom layer) */
.tv-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
  transform: 
    translateX(var(--tv-content-translate-x)) 
    translateY(var(--tv-content-translate-y)) 
    scale(var(--tv-content-scale));
  transform-origin: center center;
}