/* ==========================================================
   LabaFlix — LabaTOTO Kids skin
   Loaded only on /kids.html
   Desktop + mobile LabaFlix: untouched.
   ========================================================== */

:root {
  --kids-bg:#1a1230;
  --kids-bg-2:#241a44;
  --kids-yellow:#ffd54a;
  --kids-green:#25d366;
  --kids-blue:#0088cc;
  --kids-red:#e50914;
  --kids-text:#fff8e7;
  --kids-muted:#c9b8e8;
}

html, body {
  background: linear-gradient(180deg, #2a1a4a 0%, #1a1230 100%) !important;
  color: var(--kids-text) !important;
  font-family: "Comic Sans MS", "Trebuchet MS", "Helvetica Neue", sans-serif !important;
}

/* Logo */
nav .brand, .brand {
  font-family: "Comic Sans MS", "Trebuchet MS", sans-serif !important;
  color: var(--kids-yellow) !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
}
nav .brand span, .brand span {
  color: var(--kids-green) !important;
}

/* Nav bar */
nav {
  background: linear-gradient(180deg, rgba(26,18,48,.95), rgba(26,18,48,0)) !important;
}
nav.scrolled { background: var(--kids-bg) !important; }
nav .nav-links a {
  color: var(--kids-text) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  opacity: .85 !important;
}
nav .nav-links a:hover,
nav .nav-links a.active {
  color: var(--kids-yellow) !important;
  opacity: 1 !important;
}

/* Hero */
.hero {
  background: linear-gradient(135deg, #3a2670 0%, #2a1a4a 100%) !important;
  border-radius: 24px !important;
  margin: 20px !important;
  padding: 60px 40px !important;
}
.hero h1, #hero-title {
  color: var(--kids-yellow) !important;
  text-shadow: 4px 4px 0 rgba(0,0,0,.3) !important;
  font-family: "Comic Sans MS", sans-serif !important;
}
.hero p, .hero-meta {
  color: var(--kids-text) !important;
  font-size: 1.1rem !important;
}

/* Play button — big and green */
.btn-play {
  background: var(--kids-green) !important;
  color: #0a3b1f !important;
  font-weight: 900 !important;
  border-radius: 30px !important;
  padding: 1rem 2.4rem !important;
  font-size: 1.15rem !important;
  box-shadow: 0 8px 24px rgba(37,211,102,.4) !important;
  border: none !important;
}
.btn-play:hover { background: #1fb855 !important; }
.btn-play svg { fill: #0a3b1f !important; }

/* Rows */
.row h3 {
  color: var(--kids-yellow) !important;
  font-family: "Comic Sans MS", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .5px !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,.3) !important;
}
.row-scroll { padding-top: .5rem !important; }

/* Cards — bigger, rounder */
.card {
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s !important;
  background: var(--kids-bg-2) !important;
}
.card:hover, .card:focus {
  transform: scale(1.08) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,.7), 0 0 0 4px var(--kids-yellow) !important;
}
.card img {
  border-radius: 16px 16px 0 0 !important;
  aspect-ratio: 2/3 !important;
  object-fit: cover !important;
}
.card-info, .card .info {
  padding: 10px 12px 14px !important;
  background: var(--kids-bg-2) !important;
}
.card-title, .card .title {
  color: var(--kids-text) !important;
  font-weight: 800 !important;
  font-family: inherit !important;
}
.card-meta, .card .meta {
  color: var(--kids-muted) !important;
}

/* KIDS badge on every card */
.card::after {
  content: "KIDS";
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--kids-yellow);
  color: #141414;
  font-size: .65rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: .8px;
  z-index: 5;
  font-family: inherit;
}
.card { position: relative; }

/* Modal / detail */
.modal {
  background: var(--kids-bg-2) !important;
  border-radius: 20px !important;
  color: var(--kids-text) !important;
}
.modal h2, .modal-title {
  color: var(--kids-yellow) !important;
  font-family: "Comic Sans MS", sans-serif !important;
}
.modal-backdrop { background: rgba(26,18,48,.92) !important; }

/* Exit button — top right, red */
.kids-exit {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--kids-red);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 30px;
  font-weight: 900;
  font-size: .95rem;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 20px rgba(229,9,20,.4);
  transition: transform .15s, background .15s;
}
.kids-exit:hover {
  background: #b8070f;
  transform: scale(1.05);
}

/* Hide the desktop nav links & mobile bottom nav on kids page */
@media (max-width: 768px) {
  .mobile-bottom-nav { background: var(--kids-bg) !important; }
  .mobile-bottom-nav a { color: var(--kids-muted) !important; }
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav a[data-tab="home"] {
    color: var(--kids-yellow) !important;
  }
}

/* Fun confetti-like background dots */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,213,74,.12) 0, transparent 40px),
    radial-gradient(circle at 90% 80%, rgba(37,211,102,.10) 0, transparent 50px),
    radial-gradient(circle at 50% 50%, rgba(0,136,204,.08) 0, transparent 60px);
  z-index: 0;
}