/* ======================
   MOBILE OPTIMIZATION (minimal)
   ====================== */
@media (max-width: 640px) {
  #tv-container,
  #tv-controls {
    width: 94vw;
  }

  #tv-controls {
    padding: 0 10px;
  }

  .tv-btn.nav,
  .tv-btn.power {
    width: 56px;
    height: 56px;
  }

  #lower-third {
    left: 10px;
    bottom: 22px;
    max-width: calc(100% - 20px);
    font-size: 11px;
  }

  #mail-toast {
    bottom: 78px;
    max-width: calc(100vw - 24px);
  }
  #crt-hud {
    bottom: 22px;
    width: min(520px, 86%);
  }
  #crt-scrub {
    height: 14px;
  }

  .footer-toggle {
    bottom: 12px;
    padding: 8px 13px;
    font-size: 8px;
  }

  body.footer-open .footer-toggle {
    bottom: calc(12px + 62px);
  }
}

/* ======================
   MOBILE FOOTER (scroll strip)
   ====================== */
@media (max-width: 520px) {
  #broadcast-footer {
    padding: 10px 10px;
  }

  /* left becomes a scroll strip */
  .footer-left {
    justify-content: flex-start;
    flex-wrap: nowrap;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    /* fade out at the end */
    padding-right: 46px;
    mask-image: linear-gradient(90deg, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  }

  .footer-left::-webkit-scrollbar {
    display: none;
  }

  #broadcast-footer a {
    padding: 7px 9px;
    font-size: 11px;
  }

  #broadcast-footer .sep {
    margin: 0 6px;
    opacity: 0.45;
  }

  .footer-right {
    font-size: 11px;
  }
}