@use postcss-nested;


:root {
  --scale-factor: 1.8;
  --base-television-width: 430px;
  --base-television-height: 420px;
  --television-width: calc(var(--base-television-width) * var(--scale-factor));
  --television-height: calc(var(--base-television-height) * var(--scale-factor));
  --television-bgcolor: #b71a11;
  --television-bgcolor-dark: #88110b;
  --antenna-gradient: linear-gradient(to top, #444 10%, #999 25% 40%, #444 70%, #2224 90%);
}

/* Mobile-first approach - Viewport-based scaling */
@media (max-width: 768px) {
  :root {
    --scale-factor: 0.85;
    --mobile-tv-size: min(90vw, 85vh);
  }
}

@media (max-width: 480px) {
  :root {
    --scale-factor: 0.75;
    --mobile-tv-size: min(85vw, 75vh);
  }
}

body {
  margin: 0;
  background: #000000;
  overflow: hidden;
  height: 100vh;
}

/* Contact Link */
.contact-link {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  font-family: 'Bebas Neue', 'Impact', 'Arial Black', Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: lowercase;
}

.contact-link a {
  color: #FF0000;
  text-decoration: none;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.8);
  transition: none;
  font-weight: 300;
}

.contact-link a:hover {
  color: #CC0000;
}

/* Portrait orientation message */
.portrait-message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  z-index: 10000;
  justify-content: center;
  align-items: center;
  font-family: 'Times New Roman', 'Garamond', 'Adobe Garamond Pro', serif;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0px;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
}

/* Lock mobile to portrait orientation - works across all browsers */
@media screen and (orientation: landscape) and (max-device-width: 767px),
       screen and (orientation: landscape) and (max-width: 767px) and (max-height: 500px) {
  .portrait-message {
    display: flex !important;
  }
  
  .navigation,
  .branding,
  .container {
    display: none !important;
  }
}

body::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(900px * var(--scale-factor));
  height: calc(250px * var(--scale-factor));
  background: radial-gradient(ellipse calc(900px * var(--scale-factor)) calc(250px * var(--scale-factor)) at center, rgba(255,255,255,0.03) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  z-index: 10;
  position: relative;
}

.tv {
  width: var(--television-width);
  height: var(--television-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
  filter: drop-shadow(0px calc(25px * var(--scale-factor)) calc(50px * var(--scale-factor)) rgba(255,255,255,0.1)) drop-shadow(0px calc(50px * var(--scale-factor)) calc(100px * var(--scale-factor)) rgba(255,255,255,0.05));
}

.tv::after {
  content: '';
  position: absolute;
  bottom: calc(-60px * var(--scale-factor));
  left: 50%;
  transform: translateX(-50%);
  width: calc(700px * var(--scale-factor));
  height: calc(120px * var(--scale-factor));
  background: radial-gradient(ellipse calc(700px * var(--scale-factor)) calc(120px * var(--scale-factor)) at center, rgba(255,255,255,0.08) 0%, transparent 70%);
  z-index: -1;
}

  & .antenna-container {
    width: calc(235px * var(--scale-factor));
    height: calc(85px * var(--scale-factor));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    & .antenna {
      width: 100%;
      height: calc(4px * var(--scale-factor));
      background: var(--antenna-gradient);
      transform-origin: 100% 50%;
      transform: rotate(20deg) translateY(calc(3px * var(--scale-factor)));
      z-index: 0;
      display: flex;
      align-items: center;

      &::before {
        content: "";
        display: block;
        width: calc(8px * var(--scale-factor));
        height: calc(10px * var(--scale-factor));
        background: var(--antenna-gradient);
        border-radius: 24% 53% 53% 24% / 36% 40% 40% 36%;
        border: calc(1px * var(--scale-factor)) solid #444;
        border-left: 0;
        border-bottom: 0;
        transform: translateY(calc(-1px * var(--scale-factor)));
      }
    }
  }

  & .television-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;

    & .television {
      width: calc(425px * var(--scale-factor));
      height: calc(300px * var(--scale-factor));
      border-radius: calc(35px * var(--scale-factor)) / calc(45px * var(--scale-factor));
      box-shadow:
        calc(2px * var(--scale-factor)) calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) #0004,
        calc(2px * var(--scale-factor)) calc(-2px * var(--scale-factor)) calc(2px * var(--scale-factor)) darkred inset,
        calc(2px * var(--scale-factor)) calc(1px * var(--scale-factor)) calc(1px * var(--scale-factor)) #fff inset,
        0 0 calc(3px * var(--scale-factor)) calc(5px * var(--scale-factor)) #0002;
      background: var(--television-bgcolor);
      background: linear-gradient(var(--television-bgcolor), var(--television-bgcolor-dark));
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;

      & .television-inner {
        width: 93%;
        height: 90%;
        background: linear-gradient(to bottom, #454c45 5%, #232522 35% 45%);
        border-bottom: calc(1px * var(--scale-factor)) solid #fff;
        box-shadow: 0 calc(1px * var(--scale-factor)) calc(2px * var(--scale-factor)) #470404 inset;
        border-radius: calc(25px * var(--scale-factor)) / calc(25px * var(--scale-factor));
        position: relative;
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-template-rows: 0.8fr;
        align-content: center;
        gap: calc(3px * var(--scale-factor));

        & .television-screen-container {
          border: calc(1px * var(--scale-factor)) solid #222;
          box-shadow:
            0 calc(2px * var(--scale-factor)) calc(2px * var(--scale-factor)) #888,
            calc(2px * var(--scale-factor)) 0 calc(2px * var(--scale-factor)) #444,
            calc(-2px * var(--scale-factor)) 0 calc(2px * var(--scale-factor)) #444,
            0 calc(-2px * var(--scale-factor)) calc(2px * var(--scale-factor)) #111;
          border-radius: calc(35px * var(--scale-factor)) / calc(25px * var(--scale-factor));
          margin: calc(10px * var(--scale-factor));
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          background:
            linear-gradient(70deg, #555 15%, transparent 30%),
            repeating-conic-gradient(#222 0 30deg, #333 60deg, #222 90deg);

          & .television-crt {
            width: 99%;
            height: 95%;
            background: #111;
            box-shadow:
              0 0 calc(5px * var(--scale-factor)) calc(2px * var(--scale-factor)) #111,
              0 0 calc(10px * var(--scale-factor)) calc(2px * var(--scale-factor)) #1112;
            border-radius: calc(85px * var(--scale-factor)) calc(85px * var(--scale-factor)) calc(85px * var(--scale-factor)) calc(85px * var(--scale-factor)) / calc(100px * var(--scale-factor)) calc(100px * var(--scale-factor)) calc(100px * var(--scale-factor)) calc(100px * var(--scale-factor));
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;

            & .television-screen {
              background: #302d30;
              width: 95%;
              height: 95%;
              border-radius: 30%;
              box-shadow: 0 0 calc(5px * var(--scale-factor)) calc(2px * var(--scale-factor)) #111 inset;
              overflow: hidden;
              position: relative;

              & .noise {
                width: 100%;
                height: 100%;
                background:
                  linear-gradient(to bottom, transparent, #aaa4, #8881, #6664, #4445, #2228, #4443, transparent),
                  repeating-linear-gradient(transparent 0 2px, #25242950 2px 4px);
                animation: moveBand 12s linear infinite;
                z-index: 4;
                position: relative;
              }

              & .off {
                width: 100%;
                height: 100%;
                background: radial-gradient(#222, #1a1a1a, #111);
                z-index: 5;
                position: absolute;
                top: 0;
              }

              & .logo-container {
                position: absolute;
                z-index: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                & .logo {
                  background: #f34b59;
                  width: 45px;
                  height: 32px;
                  border-radius: 8px;
                  margin-right: 5px;
                  display: grid;
                  place-items: center;

                  & .play {
                    width: 15px;
                    height: 15px;
                    background: #fff;
                    clip-path: polygon(0 0, 100% 50%, 0 100%);
                  }
                }

                & .text {
                  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
                  font-size: 42px;
                  color: white;
                  letter-spacing: -1px;
                }
              }
            }
          }
        }

        & .television-lateral {
          display: grid;
          grid-template-rows: 1.1fr 1fr;
          gap: calc(12px * var(--scale-factor));
          margin: calc(15px * var(--scale-factor));
          margin-left: 0;

          & .dial-container {
            border: calc(2px * var(--scale-factor)) solid #333;
            border-left: calc(1px * var(--scale-factor)) solid #444;
            border-bottom: calc(2px * var(--scale-factor)) solid #444;
            border-radius: calc(5px * var(--scale-factor));
            box-shadow:
              calc(-2px * var(--scale-factor)) calc(2px * var(--scale-factor)) calc(6px * var(--scale-factor)) #111 inset,
              calc(-1px * var(--scale-factor)) calc(2px * var(--scale-factor)) calc(3px * var(--scale-factor)) #aaa;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: calc(6px * var(--scale-factor));
            align-items: center;

            & .dial {
              width: calc(42px * var(--scale-factor));
              height: calc(42px * var(--scale-factor));
              border: calc(2px * var(--scale-factor)) solid #6e706f;
              border-radius: 50%;
              box-shadow:
                calc(-4px * var(--scale-factor)) calc(2px * var(--scale-factor)) calc(4px * var(--scale-factor)) #111,
                0 0 calc(1px * var(--scale-factor)) calc(2px * var(--scale-factor)) #000;
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              cursor: grab;

              & .data-container {
                display: flex;
                justify-content: center;
                width: 100%;
                height: 100%;

                & .data {
                  color: #888;
                  font-size: calc(6px * var(--scale-factor));
                  text-shadow: 0 0 calc(2px * var(--scale-factor)) #888;
                  position: absolute;
                  top: 0;
                  height: 100%;
                  transform-origin: 50% 50%;

                  &:nth-child(2) { transform: rotate(30deg); }
                  &:nth-child(3) { transform: rotate(60deg); }
                  &:nth-child(4) { transform: rotate(90deg); }
                  &:nth-child(5) { transform: rotate(120deg); }
                  &:nth-child(6) { transform: rotate(150deg); }
                  &:nth-child(7) { transform: rotate(180deg); }
                  &:nth-child(8) { transform: rotate(210deg); }
                  &:nth-child(9) { transform: rotate(240deg); }
                  &:nth-child(10) { transform: rotate(270deg); }
                  &:nth-child(11) { transform: rotate(300deg); }
                  &:nth-child(12) { transform: rotate(330deg); }
                }
              }

              & .dial-core {
                width: calc(28px * var(--scale-factor));
                height: calc(28px * var(--scale-factor));
                border-radius: 50%;
                background: conic-gradient(#eee 0deg 45deg, #666 70deg 285deg, #eee 320deg);
                position: absolute;
              }

              & .selector {
                position: absolute;
                width: 75%;
                background: linear-gradient(#666 30%, #aaa 40%);
                height: calc(4px * var(--scale-factor));
                border: calc(1px * var(--scale-factor)) solid #666;
                border-radius: calc(4px * var(--scale-factor)) / calc(8px * var(--scale-factor));
                transform: rotate(calc(var(--value) - 90deg));
                transition: transform 0.25s linear;
              }

              &.channel-button {
                background: #000;
              }

              &.volume-button {
                background: #ccc;

                & .data {
                  color: #444;
                }
              }
            }
          }

          & .speaker-container {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: calc(1px * var(--scale-factor)) 0;
            margin-bottom: calc(12px * var(--scale-factor));
            margin-left: calc(2px * var(--scale-factor));
            margin-right: calc(2px * var(--scale-factor));

            & div {
              width: calc(10px * var(--scale-factor));
              height: calc(10px * var(--scale-factor));
              background: radial-gradient(#000, #222);
              border-radius: 50%;
              border-bottom: calc(1px * var(--scale-factor)) solid #fff;
            }
          }
        }

        & .buttons {
          position: absolute;
          bottom: calc(5px * var(--scale-factor));
          right: calc(30px * var(--scale-factor));
          width: calc(60px * var(--scale-factor));
          display: flex;
          justify-content: space-between;

          & .button-container {
            width: calc(20px * var(--scale-factor));
            height: calc(20px * var(--scale-factor));
            background: linear-gradient(to bottom, #fff 40%, #aaa 50% 55%, #666 70%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            & .button {
              width: calc(10px * var(--scale-factor));
              height: calc(10px * var(--scale-factor));
              border-radius: 50%;
              background: linear-gradient(to top, #fff 40%, #aaa 50% 55%, #666 70%);
              box-shadow: calc(-1px * var(--scale-factor)) calc(-1px * var(--scale-factor)) calc(1px * var(--scale-factor)) calc(2px * var(--scale-factor)) #000;
              transform: translate(calc(2px * var(--scale-factor)), calc(1px * var(--scale-factor)));
              transition:
                transform 0.1s,
                box-shadow 0.1s;
              cursor: pointer;

              &:active {
                transform: translate(0, 0);
                box-shadow: 0 0 calc(1px * var(--scale-factor)) calc(2px * var(--scale-factor)) #000;
              }
            }
          }
        }
      }
    }

    & .television-base {
      width: calc(350px * var(--scale-factor));
      height: calc(25px * var(--scale-factor));
      background: linear-gradient(var(--television-bgcolor), var(--television-bgcolor-dark));
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 calc(8px * var(--scale-factor)) calc(4px * var(--scale-factor)) #0009;

      &::before,
      &::after {
        content: "";
        display: block;
        width: calc(8px * var(--scale-factor));
        height: 100%;
        background-color: var(--television-bgcolor);
        background-image: linear-gradient(var(--television-bgcolor), var(--television-bgcolor-dark));
        transform: translateX(var(--x)) skewX(var(--skew-x));
      }

      &::before {
        --skew-x: 10deg;
        --x: calc(-2px * var(--scale-factor));
      }

      &::after {
        --skew-x: -10deg;
        --x: calc(2px * var(--scale-factor));
      }

      & .slots {
        width: 50%;
        height: calc(15px * var(--scale-factor));
        display: flex;
        justify-content: center;

        & .slot {
          width: calc(4px * var(--scale-factor));
          height: 100%;
          background: #0b0000;
          margin-left: calc(3px * var(--scale-factor));
          border-radius: calc(2px * var(--scale-factor)) / calc(1px * var(--scale-factor));
        }
      }
    }

    & .foot-container {
      width: 70%;
      display: flex;
      justify-content: space-between;

      & .foot {
        width: calc(20px * var(--scale-factor));
        height: calc(10px * var(--scale-factor));
        background: var(--television-bgcolor);

        &.left {
          box-shadow: calc(4px * var(--scale-factor)) 0 #850101;
        }

        &.right {
          box-shadow: calc(-4px * var(--scale-factor)) 0 #850101;
        }
      }
    }
  }
}

/* Animation */

.tv .off {
  transition: opacity 0.5s;
  opacity: 1;
}

.tv:not(.on) .off {
  opacity: 0;
}

@keyframes moveBand {
  0% { background-position-y: 0px, 0px; }
  100% { background-position-y: -442px, -300px; }
}

/* Navigation */
.navigation {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 20px;
  z-index: 100;
}

.nav-link {
  color: #000000;
  text-decoration: none;
  font-family: 'Bebas Neue', 'Impact', 'Arial Black', Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 
    inset 1px 1px 0 #dfdfdf,
    inset -1px -1px 0 #000000,
    1px 1px 0 #000000;
  cursor: pointer;
}

/* Remove hover for maximum speed on desktop */

/* Remove :active state for instant navigation on desktop */

/* Branding */
.branding {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  pointer-events: none;
}

.left-text {
  position: absolute;
  bottom: 25vh;
  left: clamp(20px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.right-text {
  position: absolute;
  bottom: 15vh;
  right: clamp(20px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Mobile layout - ARI MATTI top left, ESTONIAN ASSASSIN bottom center */
@media (max-width: 768px) {
  .left-text {
    top: 15px;
    left: 20px;
    transform: none;
    align-items: flex-start;
    text-align: left;
    bottom: auto;
  }
  
  .right-text {
    bottom: 12vh;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .left-text {
    top: -40px;
    left: 15px;
  }
  
  .right-text {
    bottom: 12vh;
  }
}

.ari, .matti, .the, .estonian, .assassin {
  color: #FF0000;
  font-family: 'Bebas Neue', 'Impact', 'Arial Black', Arial, sans-serif;
  font-weight: 700;
  text-shadow: 4px 4px 0px rgba(0,0,0,0.8);
  line-height: 0.85;
  text-transform: uppercase;
  margin: 0;
}

.ari {
  color: white;
}

.estonian {
  color: white;
}

.ari, .matti {
  font-size: clamp(60px, 9vw, 150px);
  letter-spacing: clamp(-3px, -0.3vw, 0px);
}

.the, .estonian, .assassin {
  font-size: clamp(36px, 5.25vw, 90px);
  letter-spacing: clamp(-1.5px, -0.15vw, 0px);
}

/* Mobile-optimized typography and layout */
@media (max-width: 768px) {
  .ari, .matti {
    font-size: clamp(48px, 10vw, 80px);
    letter-spacing: clamp(-2px, -0.3vw, 0px);
  }
  
  .the, .estonian, .assassin {
    font-size: clamp(48px, 10vw, 80px);
    letter-spacing: clamp(-1px, -0.2vw, 0px);
  }
  
  /* Mobile-friendly navigation - top right corner */
  .navigation {
    top: 15px;
    right: 15px;
    left: auto;
    flex-direction: row;
    gap: 8px;
  }
  
  .nav-link {
    font-size: 20px;
    font-family: 'MS Sans Serif', 'Bebas Neue', sans-serif;
    font-weight: 600;
    padding: 10px 20px;
    min-height: 44px;
    min-width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 
      inset 2px 2px 0 #dfdfdf,
      inset -2px -2px 0 #000000,
      2px 2px 4px rgba(0,0,0,0.3);
    color: #000000;
    text-shadow: none;
    cursor: pointer;
    position: relative;
  }
  
  .nav-link:active {
    background: #a0a0a0;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: 
      inset 3px 3px 0 #808080,
      inset -1px -1px 0 #dfdfdf;
  }
  
  .nav-link:hover {
    color: #000000;
    text-shadow: none;
  }
  
  /* Center TV better on mobile */
  .container {
    padding: 0 2vw;
    justify-content: center;
    align-items: center;
    height: 100vh;
    display: flex;
  }
  
  /* Viewport-based TV sizing for mobile */
  .tv {
    width: var(--mobile-tv-size);
    height: calc(var(--mobile-tv-size) * 0.977); /* Maintain aspect ratio 420/430 */
    max-width: 90vw;
    max-height: 85vh;
    filter: drop-shadow(0px 8px 16px rgba(255,255,255,0.08)) drop-shadow(0px 12px 24px rgba(255,255,255,0.04));
    margin-top: -18vh;
  }
  
  /* Scale all internal TV components based on mobile size */
  .tv .antenna-container {
    width: calc(var(--mobile-tv-size) * 0.547);
    height: calc(var(--mobile-tv-size) * 0.198);
  }
  
  .tv .television {
    width: calc(var(--mobile-tv-size) * 0.988);
    height: calc(var(--mobile-tv-size) * 0.698);
  }
  
  .tv .television-base {
    width: calc(var(--mobile-tv-size) * 0.814);
    height: calc(var(--mobile-tv-size) * 0.058);
  }
  
  /* Hide TV glow effects on mobile */
  .tv::after,
  body::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .left-text {
    top: 15px;
    left: 15px;
  }
  
  .right-text {
    bottom: 12vh;
  }
  
  .ari, .matti {
    font-size: clamp(40px, 11vw, 70px);
  }
  
  .the, .estonian, .assassin {
    font-size: clamp(52px, 12vw, 90px);
  }
  
  .nav-link {
    font-size: 18px;
    padding: 10px 16px;
    min-height: 40px;
    min-width: 75px;
  }
  
  .nav-link:active {
    background: #a0a0a0 !important;
    border-color: #808080 #ffffff #ffffff #808080 !important;
    box-shadow: 
      inset 3px 3px 0 #808080,
      inset -1px -1px 0 #dfdfdf !important;
  }
  
  /* Better mobile container */
  .container {
    padding: 0 4vw;
  }
  
  /* Stack TV buttons vertically on mobile - perfectly centered */
  .buttons {
    flex-direction: column !important;
    gap: calc(8px * var(--scale-factor));
    bottom: calc(15px * var(--scale-factor)) !important;
    right: calc(30px * var(--scale-factor)) !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Touch-friendly TV controls */
  .dial {
    min-width: 44px;
    min-height: 44px;
  }
  
  .button-container {
    width: calc(31.5px * var(--scale-factor)) !important;
    height: calc(31.5px * var(--scale-factor)) !important;
    min-width: 40px;
    min-height: 40px;
  }
  
  .button {
    width: calc(19.8px * var(--scale-factor)) !important;
    height: calc(19.8px * var(--scale-factor)) !important;
    min-width: 25px;
    min-height: 25px;
  }
}


/* Video Content */
.video-content {
  width: 105%;
  height: 105%;
  object-fit: cover;
  border-radius: 30%;
  position: absolute;
  top: -2.5%;
  left: -2.5%;
  z-index: 1;
  filter: sepia(0.1) saturate(1.2) contrast(1.1) brightness(1.1) hue-rotate(5deg);
  transition: filter 0.5s ease, opacity 0.3s ease;
  animation: vcr-wobble 4s ease-in-out infinite;
}

/* Mobile video sizing - less aggressive stretch */
@media (max-width: 768px) {
  .video-content {
    width: 102%;
    height: 102%;
    top: -1%;
    left: -1%;
  }
}

@media (max-width: 480px) {
  .video-content {
    width: 101%;
    height: 101%;
    top: -0.5%;
    left: -0.5%;
  }
}

.video-content.bw {
  filter: grayscale(1) sepia(0) saturate(0) contrast(1.2) brightness(1.1);
}

/* Mobile-only: Hide all possible native video controls */
@media (max-width: 767px) {
  .video-content {
    /* Comprehensive control hiding for iOS Safari */
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    pointer-events: none !important;
  }

  /* Transparent overlay to capture taps before they reach video */
  .video-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: transparent;
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Target every possible webkit control element */
  .video-content::-webkit-media-controls,
  .video-content::-webkit-media-controls-enclosure,
  .video-content::-webkit-media-controls-panel,
  .video-content::-webkit-media-controls-overlay-play-button,
  .video-content::-webkit-media-controls-timeline,
  .video-content::-webkit-media-controls-timeline-container,
  .video-content::-webkit-media-controls-current-time-display,
  .video-content::-webkit-media-controls-time-remaining-display,
  .video-content::-webkit-media-controls-seek-back-button,
  .video-content::-webkit-media-controls-seek-forward-button,
  .video-content::-webkit-media-controls-fullscreen-button,
  .video-content::-webkit-media-controls-volume-slider,
  .video-content::-webkit-media-controls-mute-button,
  .video-content::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
  }
}

@keyframes vcr-wobble {
  0% { transform: translateX(0px) scaleX(1); }
  20% { transform: translateX(calc(0.3px * var(--scale-factor))) scaleX(1.0005); }
  40% { transform: translateX(calc(-0.2px * var(--scale-factor))) scaleX(0.9998); }
  60% { transform: translateX(calc(0.4px * var(--scale-factor))) scaleX(1.0003); }
  80% { transform: translateX(calc(-0.3px * var(--scale-factor))) scaleX(0.9997); }
  100% { transform: translateX(0px) scaleX(1); }
}

/* Enhanced scanlines effect */
.television-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent calc(2px * var(--scale-factor)),
    rgba(0, 0, 0, 0.15) calc(2px * var(--scale-factor)),
    rgba(0, 0, 0, 0.15) calc(4px * var(--scale-factor))
  );
  z-index: 4;
  pointer-events: none;
  animation: scanlines-move 0.2s linear infinite;
  border-radius: 30%;
}

@keyframes scanlines-move {
  0% { transform: translateY(0px); }
  100% { transform: translateY(calc(4px * var(--scale-factor))); }
}

/* Unmute Overlay */
.unmute-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  border-radius: 30%;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.unmute-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.unmute-text {
  color: white;
  font-family: 'Bebas Neue', 'Impact', Arial, sans-serif;
  font-size: calc(16px * var(--scale-factor));
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.5);
  padding: calc(8px * var(--scale-factor)) calc(12px * var(--scale-factor));
  border-radius: calc(8px * var(--scale-factor));
  border: 2px solid rgba(255,255,255,0.3);
  text-align: center;
}

/* Bigger unmute text for mobile */
@media (max-width: 768px) {
  .unmute-text {
    font-size: calc(24px * var(--scale-factor));
    padding: calc(12px * var(--scale-factor)) calc(18px * var(--scale-factor));
  }
  
  /* Ensure mobile video click area works properly */
  .television-screen {
    cursor: pointer;
  }
}

@media (max-width: 480px) {
  .unmute-text {
    font-size: calc(28px * var(--scale-factor));
    padding: calc(16px * var(--scale-factor)) calc(24px * var(--scale-factor));
  }
}

/* Pause Overlay Animation */
@keyframes pauseFadeIn {
  from { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.8); 
  }
  to { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
  }
}

/* Static Overlay */
.static-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, transparent 10%, rgba(120,119,198,0.3) 40%, transparent 50%),
    radial-gradient(circle at 80% 20%, transparent 10%, rgba(255,255,255,0.15) 40%, transparent 50%),
    radial-gradient(circle at 40% 40%, transparent 10%, rgba(120,119,198,0.3) 40%, transparent 50%),
    linear-gradient(90deg, transparent 80%, rgba(255,255,255,0.03) 82%, transparent 84%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  border-radius: 30%;
}

.static-overlay.active {
  opacity: 1;
  animation: staticNoise 0.5s linear;
}

@keyframes staticNoise {
  0%, 100% { 
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    opacity: 1;
  }
  25% { 
    background-position: calc(-50px * var(--scale-factor)) 0, calc(30px * var(--scale-factor)) 0, calc(-20px * var(--scale-factor)) 0, calc(10px * var(--scale-factor)) 0, 0 calc(2px * var(--scale-factor)), calc(2px * var(--scale-factor)) 0;
    opacity: 0.8;
  }
  50% { 
    background-position: calc(20px * var(--scale-factor)) 0, calc(-40px * var(--scale-factor)) 0, calc(10px * var(--scale-factor)) 0, calc(-15px * var(--scale-factor)) 0, 0 calc(-2px * var(--scale-factor)), calc(-2px * var(--scale-factor)) 0;
    opacity: 1;
  }
  75% { 
    background-position: calc(-30px * var(--scale-factor)) 0, calc(20px * var(--scale-factor)) 0, calc(-40px * var(--scale-factor)) 0, calc(5px * var(--scale-factor)) 0, 0 calc(1px * var(--scale-factor)), calc(1px * var(--scale-factor)) 0;
    opacity: 0.9;
  }
}