/* ---------- CINEMATIC THEATER MODE MODAL ---------- */
  .theater-modal {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(6, 6, 8, 0.88); backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .theater-modal.active { opacity: 1; pointer-events: auto; }
  .theater-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none !important; z-index: 1; opacity: 1 !important; transition: opacity 0.4s ease;
  }
  .theater-modal.active .theater-canvas { opacity: 1 !important; }
  
  /* Theme-specific glowing visual atmospheres on Theater Box */
  .theater-modal.theme-devotional .theater-box {
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: 0 0 95px rgba(255, 183, 77, 0.55), 0 0 35px rgba(255, 215, 0, 0.4), 0 25px 60px rgba(0,0,0,0.95);
  }
  .theater-modal.theme-mass .theater-box {
    border-color: rgba(255, 87, 34, 0.6);
    box-shadow: 0 0 100px rgba(255, 87, 34, 0.6), 0 0 40px rgba(255, 23, 68, 0.45), 0 25px 60px rgba(0,0,0,0.95);
  }
  .theater-modal.theme-instrumental .theater-box {
    border-color: rgba(3, 169, 244, 0.55);
    box-shadow: 0 0 95px rgba(3, 169, 244, 0.5), 0 0 35px rgba(0, 229, 255, 0.35), 0 25px 60px rgba(0,0,0,0.95);
  }
  .theater-modal.theme-surreal .theater-box {
    border-color: rgba(179, 136, 255, 0.6);
    box-shadow: 0 0 100px rgba(179, 136, 255, 0.55), 0 0 40px rgba(224, 64, 251, 0.4), 0 25px 60px rgba(0,0,0,0.95);
  }

  .theater-box {
    position: relative; width: 100%; max-width: 960px; z-index: 20;
    background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.95), 0 0 35px rgba(217,164,74,0.3); overflow: visible;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
  }
  .theater-video-wrap {
    position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px 12px 0 0; overflow: hidden;
  }
  .theater-video-wrap iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: none;
  }
  .theater-info {
    padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; width: 100%;
  }
  .theater-info-header {
    display: flex; flex-direction: column; gap: 4px; width: 100%;
  }
  .theater-info h3 { font-family: var(--serif); font-size: 19px; color: var(--ink); margin: 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .theater-info p { font-size: 12.5px; color: var(--gold-soft); margin: 0; }
  .theater-controls-wrap {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%;
    padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .theater-transport-row {
    display: flex; align-items: center; gap: 8px;
  }
  .theater-actions-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .theater-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100005;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(18, 18, 24, 0.92);
    border: 1.5px solid var(--gold);
    color: var(--gold);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.85), 0 0 16px rgba(217, 164, 74, 0.45);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    touch-action: manipulation;
  }
  .theater-close:hover,
  .theater-close:focus-visible {
    background: var(--gold);
    color: #121216;
    border-color: #ffffff;
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 0 26px rgba(255, 215, 0, 0.9);
  }
  .btn-theater-transport {
    font-size: 12px; font-weight: 700; padding: 8px 16px;
    background: rgba(217, 164, 74, 0.15); border: 1px solid var(--gold); color: var(--gold-soft);
    border-radius: 6px; cursor: pointer; font-family: var(--sans);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .btn-theater-transport:hover {
    background: var(--gold); color: #151007;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6); transform: translateY(-1px);
  }
  .theater-lang-badge {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    background: rgba(217, 164, 74, 0.2); color: var(--gold); border: 1px solid var(--gold-soft);
    padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 8px;
    box-shadow: 0 0 8px rgba(217, 164, 74, 0.3);
  }

  .theater-vibe-badge {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 3px 10px; border-radius: 999px; vertical-align: middle; margin-left: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    animation: vibePulse 2s infinite ease-in-out;
  }
  .theater-vibe-badge.devotional {
    background: rgba(244, 196, 101, 0.25); color: #fce3a6; border: 1px solid #f4c465;
    box-shadow: 0 0 12px rgba(244, 196, 101, 0.5);
  }
  .theater-vibe-badge.mass {
    background: rgba(255, 51, 68, 0.25); color: #ff8899; border: 1px solid #ff3344;
    box-shadow: 0 0 12px rgba(255, 51, 68, 0.5);
  }
  .theater-vibe-badge.soulful {
    background: rgba(112, 161, 255, 0.25); color: #a4c4ff; border: 1px solid #70a1ff;
    box-shadow: 0 0 12px rgba(112, 161, 255, 0.5);
  }
  .theater-vibe-badge.patriotic {
    background: rgba(255, 153, 51, 0.25); color: #ffc285; border: 1px solid #ff9933;
    box-shadow: 0 0 12px rgba(255, 153, 51, 0.5);
  }
  .theater-vibe-badge.surreal {
    background: rgba(0, 229, 255, 0.25); color: #80f2ff; border: 1px solid #00e5ff;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
  }
  @keyframes vibePulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
  }

  /* YouTube Engagement Toolbar & Floating Nudge */
  .btn-theater-engagement {
    font-size: 12px; font-weight: 700; padding: 8px 14px;
    border-radius: 6px; text-decoration: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--sans); transition: all 0.25s ease;
    white-space: nowrap;
  }
  .yt-text-mobile { display: none !important; }
  .yt-text-desktop { display: inline !important; }

  .btn-yt-like {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.35), rgba(217, 164, 74, 0.35));
    border: 1px solid var(--gold); color: #ffffff;
    box-shadow: 0 0 12px rgba(217, 164, 74, 0.25);
  }
  .btn-yt-like:hover {
    background: linear-gradient(135deg, #ff0000, var(--gold));
    color: #ffffff; transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(255, 0, 0, 0.45), 0 0 20px rgba(255, 215, 0, 0.7);
  }
  .btn-yt-sub {
    background: rgba(255, 0, 0, 0.18); border: 1px solid rgba(255, 80, 80, 0.55); color: #ff6b6b;
  }
  .btn-yt-sub:hover {
    background: #ff0000; color: #ffffff; border-color: #ff0000;
    transform: translateY(-2px); box-shadow: 0 0 16px rgba(255, 0, 0, 0.7);
  }
  .btn-yt-share {
    background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); color: var(--ink);
  }
  .btn-yt-share:hover {
    background: var(--gold-soft); color: #121216; border-color: var(--gold);
    transform: translateY(-2px);
  }
  .theater-engagement-nudge {
    position: relative; z-index: 10; display: none;
    background: rgba(217, 164, 74, 0.14); border-bottom: 1px solid var(--line);
    padding: 8px 18px; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 12.5px; color: var(--ink);
    transition: all 0.3s ease;
  }
  .theater-engagement-nudge.active {
    display: flex;
  }
  @media (max-width: 768px) {
    .theater-modal {
      padding: 10px 10px 24px;
      align-items: flex-start;
      padding-top: 50px; /* Clearance for top-right close button */
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .theater-box {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto;
      border-radius: 14px;
      overflow: hidden;
      background: rgba(17, 17, 22, 0.96);
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95);
      border-color: rgba(217, 164, 74, 0.3);
    }
    .theater-video-wrap {
      border-radius: 14px 14px 0 0;
    }
    .theater-info {
      padding: 12px 14px 16px !important;
      gap: 10px !important;
    }
    .theater-info h3 {
      font-size: 15px !important;
      line-height: 1.3;
    }
    .theater-info p {
      font-size: 11.5px !important;
    }
    /* Sleek Horizontal Ambient Vibe Scroll */
    .theater-ambient-selector {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none;
      gap: 6px !important;
      padding: 2px 0 !important;
      width: 100% !important;
    }
    .theater-ambient-selector::-webkit-scrollbar {
      display: none;
    }
    .ambient-label {
      display: none !important; /* Hide label on mobile to save horizontal space */
    }
    .btn-ambient-pill {
      flex-shrink: 0 !important;
      font-size: 10px !important;
      padding: 3px 9px !important;
      border-radius: 999px !important;
    }
    .theater-controls-wrap {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
      padding-top: 10px !important;
      border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    /* SLEEK UNIFIED 1-ROW TRANSPORT BAR (Prev - Badge - Next) */
    .theater-transport-row {
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 6px !important;
    }
    .theater-transport-row .theater-queue-badge {
      flex: 1 !important;
      justify-content: center !important;
      text-align: center !important;
      font-size: 11px !important;
      padding: 6px 8px !important;
      white-space: nowrap !important;
      background: rgba(217, 164, 74, 0.1) !important;
      border: 1px solid rgba(217, 164, 74, 0.22) !important;
      border-radius: 6px !important;
    }
    .theater-transport-row .btn-theater-transport {
      width: auto !important;
      height: 34px !important;
      font-size: 11px !important;
      padding: 0 10px !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
      border-radius: 6px !important;
    }
    /* SLEEK UNIFIED ACTIONS BAR */
    .theater-actions-row {
      width: 100% !important;
    }
    .theater-actions-row > div {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      width: 100% !important;
    }
    .theater-actions-row .btn-theater-engagement {
      flex: 1 !important;
      height: 38px !important;
      text-align: center !important;
      justify-content: center !important;
      font-size: 11.5px !important;
      padding: 0 10px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      border-radius: 6px !important;
    }
    .theater-actions-row .btn-theater-close-action {
      display: none !important; /* Hide redundant close button; fixed top-right X handles closing */
    }
    .yt-text-mobile { display: inline !important; }
    .yt-text-desktop { display: none !important; }
    .theater-close {
      top: 10px !important;
      right: 10px !important;
      width: 38px !important;
      height: 38px !important;
      font-size: 18px !important;
    }
  }