/* VaultPlayer Teen TV — restrained 10-foot Teen identity on the shared TV shell.
   Background uses full document coverage (100% 100%), never fixed Nvh caps.
   Accents follow VaultPlayer Teen artwork (calm light blue). */

html.vp-tv-teen,
html.vp-tv-teen body.vp-tv-teen {
  --teen-ink: #0b1220;
  --teen-slate: #1e293b;
  --teen-sky: #7dd3fc;
  --teen-sky-soft: #bae6fd;
  --teen-secondary: #38bdf8;
  --teen-steel: #94a3b8;
  --tv-bg: var(--teen-ink);
  --tv-panel: rgba(15, 23, 42, 0.94);
  --tv-accent: var(--teen-sky-soft);
  --tv-focus: #e0f2fe;
  min-height: 100%;
  background-color: var(--teen-ink);
  background-image:
    radial-gradient(ellipse 110% 60% at 50% -8%, rgba(12, 74, 110, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 100% 40%, rgba(125, 211, 252, 0.16) 0%, transparent 50%),
    radial-gradient(ellipse 55% 35% at 0% 80%, rgba(71, 85, 105, 0.28) 0%, transparent 48%),
    linear-gradient(180deg, #121a2e 0%, #0b1220 48%, #0a1018 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: scroll;
}

html.vp-tv-teen body.vp-tv-teen::before,
html.vp-tv-teen body.vp-tv-teen::after {
  content: none;
}

html.vp-tv-teen .tv-nav {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.99));
  border-right-color: rgba(125, 211, 252, 0.22);
}

html.vp-tv-teen .tv-nav-pill-teen {
  background: rgba(125, 211, 252, 0.85);
  color: #0b1220;
  font-weight: 650;
}

html.vp-tv-teen .tv-nav-brand img {
  max-height: 2.6rem;
}

html.vp-tv-teen .tv-nav-item.is-active,
html.vp-tv-teen .tv-nav-item:focus {
  box-shadow: 0 0 0 3px var(--teen-sky-soft);
  background: rgba(125, 211, 252, 0.16);
}

html.vp-tv-teen .tv-hero-kicker {
  color: var(--teen-sky-soft);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.95rem;
}

html.vp-tv-teen .tv-hero-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

html.vp-tv-teen .tv-btn-play,
html.vp-tv-teen .tv-btn.tv-btn-play:focus {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  color: #0b1220;
  border-color: transparent;
}

html.vp-tv-teen .tv-btn:focus,
html.vp-tv-teen .tv-card:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--teen-sky-soft), 0 0 20px rgba(125, 211, 252, 0.35);
  transform: scale(1.04);
}

html.vp-tv-teen .tv-row-title {
  color: #f1f5f9;
  font-size: 1.3rem;
}

html.vp-tv-teen .tv-card-title {
  font-size: 1.05rem;
}

html.vp-tv-teen .tv-overlay-card {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.96), rgba(11, 18, 32, 0.98));
  border: 1px solid rgba(125, 211, 252, 0.22);
}

html.vp-tv-teen .tv-status-banner {
  margin: 0.75rem 1.25rem 0;
  padding: 0.85rem 1.1rem;
  border-radius: 0.75rem;
  background: rgba(125, 211, 252, 0.16);
  border: 1px solid rgba(186, 230, 253, 0.28);
  color: #e8eef7;
  font-size: 1.05rem;
}

html.vp-tv-teen .tv-search-input:focus {
  box-shadow: 0 0 0 3px var(--teen-sky);
}

html.vp-tv-teen .tv-main {
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1800px) {
  html.vp-tv-teen .tv-hero-title {
    font-size: 3.4rem;
  }
  html.vp-tv-teen .tv-card {
    min-width: 11.5rem;
  }
}