/* VaultPlayer Kids TV — 10-foot Kids identity on the shared TV shell.
   Background uses full document coverage (100% 100%), never fixed Nvh caps. */

html.vp-tv-kids,
html.vp-tv-kids body.vp-tv-kids {
  --kids-blue: #1a2a6c;
  --kids-blue-mid: #243a8c;
  --kids-teal: #1f9e9a;
  --kids-gold: #e8b84a;
  --kids-coral: #e86a5a;
  --kids-purple: #5b3d8f;
  --kids-ink: #0c1228;
  --tv-bg: var(--kids-ink);
  --tv-panel: rgba(18, 28, 64, 0.92);
  --tv-accent: var(--kids-gold);
  --tv-focus: #fff6d6;
  min-height: 100%;
  background-color: var(--kids-ink);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(36, 58, 140, 0.95) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 30%, rgba(31, 158, 154, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 70% 45% at 0% 55%, rgba(232, 184, 74, 0.22) 0%, transparent 45%),
    radial-gradient(ellipse 60% 40% at 80% 90%, rgba(232, 106, 90, 0.2) 0%, transparent 45%),
    radial-gradient(ellipse 50% 35% at 20% 95%, rgba(91, 61, 143, 0.28) 0%, transparent 50%),
    linear-gradient(180deg, #152456 0%, #0c1228 45%, #10182f 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: scroll;
}

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

html.vp-tv-kids .tv-nav {
  background: linear-gradient(180deg, rgba(26, 42, 108, 0.96), rgba(12, 18, 40, 0.98));
  border-right-color: rgba(232, 184, 74, 0.25);
  gap: 0.35rem;
  padding: 1.1rem 0.7rem;
}

html.vp-tv-kids .tv-nav-brand {
  margin-bottom: 1.1rem;
}

html.vp-tv-kids .tv-nav-pill-kids {
  background: var(--kids-coral);
  color: #fff;
  font-weight: 700;
}

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

html.vp-tv-kids .tv-nav-item.is-active,
html.vp-tv-kids .tv-nav-item:focus {
  box-shadow: 0 0 0 3px var(--kids-gold);
  background: rgba(232, 184, 74, 0.18);
}

html.vp-tv-kids .tv-hero-kicker {
  color: var(--kids-teal);
  font-weight: 700;
  letter-spacing: 0.04em;
}

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

html.vp-tv-kids .tv-btn-play,
html.vp-tv-kids .tv-btn.tv-btn-play:focus {
  background: linear-gradient(135deg, var(--kids-gold), #f0c96a);
  color: #1a1408;
  border-color: transparent;
}

html.vp-tv-kids .tv-btn:focus,
html.vp-tv-kids .tv-card:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--kids-gold), 0 0 24px rgba(232, 184, 74, 0.45);
  transform: scale(1.04);
}

html.vp-tv-kids .tv-row-title {
  color: #f4f0ff;
  font-size: 1.35rem;
}

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

html.vp-tv-kids .tv-overlay-card {
  background: linear-gradient(160deg, rgba(26, 42, 108, 0.96), rgba(12, 18, 40, 0.98));
  border: 1px solid rgba(232, 184, 74, 0.28);
}

html.vp-tv-kids .tv-status-banner {
  margin: 0.75rem 1.25rem 0;
  padding: 0.85rem 1.1rem;
  border-radius: 0.75rem;
  background: rgba(232, 106, 90, 0.22);
  border: 1px solid rgba(232, 184, 74, 0.35);
  color: #fff8e8;
  font-size: 1.05rem;
}

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

html.vp-tv-kids .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-kids .tv-hero-title {
    font-size: 3.6rem;
  }
  html.vp-tv-kids .tv-card {
    min-width: 11.5rem;
  }
}