/* Compact Kids header: small animated pills that stay in flow and never stretch full-width. */
.kids-header-inner{
  min-width:0;
  min-height:3.4rem;
  gap:.55rem;
  padding-block:.4rem;
  align-items:center;
}
.kids-header-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:.4rem;
  min-width:0;
  max-width:100%;
}
.kids-nav,.kids-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.32rem;
}
.kids-header-actions>:not(.kids-nav):not(.kids-tools){position:static!important;inset:auto!important}

.kids-pill,
.kids-header-actions .kids-motion,
.kids-header-actions .kids-exit,
.kids-header-actions .kids-lang,
.kids-header-actions .kids-voice-toggle,
.kids-header-actions .install-btn{
  position:static!important;
  inset:auto!important;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.28rem;
  min-height:2.05rem!important;
  height:2.05rem;
  width:auto!important;
  max-width:none;
  margin:0;
  padding:0 .62rem;
  border:1px solid #ffffff28;
  border-radius:999px;
  background:#2a1848;
  color:#fff8ee;
  font:800 .68rem/1 Nunito,system-ui,sans-serif;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
  overflow:visible;
  box-shadow:0 .12rem 0 #12081f,0 .35rem .7rem #0003;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.kids-pill-ico{
  display:inline-grid;
  place-items:center;
  font-size:.92rem;
  line-height:1;
  transform-origin:50% 70%;
}
.kids-pill svg{
  width:.95rem;
  height:.95rem;
  fill:currentColor;
  flex:0 0 auto;
}
.kids-pill[href="/kids/"],
.kids-pill[data-nav="home"]{background:#3a2460}
.kids-pill[href="/kids/#browse"]{background:#1e3d4e;color:#c8fff6}
.kids-pill[href="/kids/nostalgia/"]{background:#4a2d1e;color:#ffe3b0}
.kids-pill-exit,.kids-header-actions a#kids-exit{
  background:#ffcf72;
  color:#2b183e;
  border-color:#ffcf72;
}
.kids-tool,.kids-motion,.kids-voice-toggle,.kids-lang-wrap{
  background:#201336;
  color:#d7c9ee;
  border-color:#ffffff22;
  box-shadow:0 .1rem 0 #12081f;
}
.kids-motion[aria-pressed="true"]{border-color:#9ee8e6;color:#9ee8e6}
.kids-voice-toggle[aria-pressed="false"],html.kids-voice-muted .kids-voice-toggle{opacity:.72}
.kids-lang-wrap{padding:0 .35rem 0 .5rem;gap:.15rem}
.kids-lang{
  min-height:1.7rem!important;
  height:1.7rem;
  width:auto;
  max-width:4.2rem;
  padding:0 .15rem;
  border:0;
  background:transparent;
  color:inherit;
  font:800 .68rem/1 Nunito,system-ui,sans-serif;
  border-radius:999px;
}
.kids-lang option{background:#261544;color:#fff}

.kids-nav .kids-pill:nth-child(1){animation:kidsPillBob 2.6s ease-in-out infinite}
.kids-nav .kids-pill:nth-child(2){animation:kidsPillBob 2.8s ease-in-out .18s infinite}
.kids-nav .kids-pill:nth-child(3){animation:kidsPillBob 3s ease-in-out .32s infinite}
.kids-nav .kids-pill:nth-child(4){animation:kidsPillBob 2.7s ease-in-out .08s infinite}
.kids-nav .kids-pill .kids-pill-ico{animation:kidsIcoWiggle 3.4s ease-in-out infinite}
.kids-nav .kids-pill:nth-child(2) .kids-pill-ico{animation-delay:.4s}
.kids-nav .kids-pill:nth-child(3) .kids-pill-ico{animation-delay:.8s}
.kids-nav .kids-pill:nth-child(4) .kids-pill-ico{animation-delay:.2s}

@keyframes kidsPillBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes kidsIcoWiggle{
  0%,100%{transform:rotate(-6deg) scale(1)}
  40%{transform:rotate(8deg) scale(1.08)}
  70%{transform:rotate(-3deg) scale(1)}
}
.kids-pill:hover{
  transform:translateY(-3px) scale(1.05);
  animation:none;
}
.kids-pill:hover .kids-pill-ico{animation:kidsIcoWiggle .6s ease-in-out infinite}
.kids-pill:active{transform:translateY(1px) scale(.94);box-shadow:none}
.kids-pill[aria-current="page"]{outline:.14rem solid #9ee8e6;outline-offset:.12rem}

@media (hover:hover){
  .kids-pill-exit:hover,.kids-header-actions a#kids-exit:hover{background:#ffe39a}
}

@media (max-width:820px){
  .kids-header-inner{align-items:center;flex-wrap:wrap;gap:.4rem}
  .kids-brand{flex:1 1 10rem;min-width:0}
  .kids-header-actions{flex:1 1 auto;width:auto;display:flex;gap:.32rem}
  .kids-header-actions>*{width:auto;min-width:0;margin:0!important}
  .kids-pill span:not(.kids-pill-ico):not(.kids-sr){
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
  }
  .kids-pill,.kids-header-actions .kids-motion,.kids-header-actions .kids-voice-toggle,.kids-header-actions a#kids-exit{
    width:2.1rem!important;
    min-width:2.1rem;
    padding:0;
  }
  .kids-lang-wrap{width:auto!important;min-width:3.1rem;padding:0 .25rem}
  .kids-lang{max-width:3.1rem;font-size:.62rem}
}

@media (max-width:560px){
  .kids-header-inner{
    display:flex;
    flex-wrap:wrap;
    grid-template-columns:none;
    gap:.55rem;
    padding-block:.45rem .65rem;
  }
  .kids-brand{width:auto;flex:1 1 auto}
  .kids-header-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    justify-content:stretch;
    gap:.55rem;
  }
  .kids-nav,.kids-tools{
    display:grid;
    width:100%;
    gap:.55rem;
  }
  .kids-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kids-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kids-pill,
  .kids-header-actions .kids-motion,
  .kids-header-actions .kids-voice-toggle,
  .kids-header-actions a#kids-exit,
  .kids-header-actions .install-btn{
    width:100%!important;
    min-width:0;
    min-height:2.7rem!important;
    height:auto;
    padding:.52rem .65rem;
    justify-content:flex-start;
    gap:.48rem;
    border-radius:.9rem;
    font-size:.72rem;
  }
  .kids-pill span:not(.kids-pill-ico):not(.kids-sr){
    position:static;
    width:auto;
    height:auto;
    padding:0;
    margin:0;
    overflow:visible;
    clip:auto;
    clip-path:none;
    white-space:nowrap;
    border:0;
  }
  .kids-pill-ico{
    width:1.25rem;
    min-width:1.25rem;
    font-size:1rem;
    text-align:center;
  }
  .kids-lang-wrap{
    grid-column:1/-1;
    width:100%!important;
    min-width:0;
    padding:.45rem .65rem;
  }
  .kids-lang{
    flex:1 1 auto;
    width:100%;
    max-width:none;
    min-height:1.9rem!important;
    height:1.9rem;
    font-size:.7rem;
  }
}

@media (max-width:380px){
  .kids-header-actions{gap:.48rem}
  .kids-nav,.kids-tools{gap:.48rem}
  .kids-pill,
  .kids-header-actions .kids-motion,
  .kids-header-actions .kids-voice-toggle,
  .kids-header-actions a#kids-exit,
  .kids-header-actions .install-btn{
    padding:.48rem .52rem;
    font-size:.68rem;
  }
}

@media (min-width:1920px){
  .kids-header-actions{gap:.5rem}
  .kids-pill,.kids-motion,.kids-exit,.kids-lang,.kids-voice-toggle{min-height:2.25rem!important;height:2.25rem}
}

html[dir="rtl"] .kids-header-actions{direction:rtl}

@media (prefers-reduced-motion:reduce){
  .kids-pill,.kids-pill .kids-pill-ico,.kids-pill:hover .kids-pill-ico{animation:none!important;transition:none}
}
body.kids-paused .kids-pill,body.kids-paused .kids-pill-ico{animation:none!important}


/* 2026-09-24 Kids header polish.
   Presentation only: compact, balanced, complete top-box controls with no
   clipped labels. Existing links, install, sound, motion, guardian and
   language behavior are untouched. */
.kids-header{
  border-bottom-color:rgba(255,255,255,.10)!important;
  box-shadow:0 12px 30px rgba(5,2,18,.28)!important;
}
.kids-header .kids-header-inner{
  width:min(calc(100% - 1.5rem),90rem)!important;
  min-height:0!important;
  padding:.55rem 0!important;
  gap:.7rem!important;
}
.kids-header .kids-brand{
  flex:0 1 auto!important;
  gap:.65rem!important;
  min-width:0!important;
}
.kids-header .kids-brand>img{
  width:3.35rem!important;
  height:3.35rem!important;
  flex:0 0 3.35rem!important;
  border:2px solid rgba(255,215,122,.82)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.10)!important;
}
.kids-header .kids-brand-copy{
  min-width:0!important;
}
.kids-header .kids-brand-copy .matchapp-wordmark{
  display:block!important;
  width:min(15rem,31vw)!important;
  height:auto!important;
  max-width:100%!important;
}
.kids-header .kids-brand-copy>span{
  margin-top:.18rem!important;
  font-size:.66rem!important;
  line-height:1.15!important;
}
.kids-header .kids-header-actions{
  flex:1 1 auto!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:.4rem!important;
  min-width:0!important;
}
.kids-header .kids-nav,
.kids-header .kids-tools{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.38rem!important;
  min-width:0!important;
}
.kids-header .kids-pill,
.kids-header .kids-header-actions .kids-motion,
.kids-header .kids-header-actions .kids-voice-toggle,
.kids-header .kids-header-actions .install-btn,
.kids-header .kids-time-pill,
.kids-header .kids-lang-wrap{
  min-width:0!important;
  min-height:2.25rem!important;
  height:2.25rem!important;
  padding:0 .72rem!important;
  gap:.38rem!important;
  border:1px solid transparent!important;
  border-radius:.9rem!important;
  background:
    linear-gradient(180deg,rgba(58,36,86,.97),rgba(35,20,58,.98)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.30),rgba(149,112,190,.48),rgba(255,255,255,.12)) border-box!important;
  color:#fff9f2!important;
  font:800 .73rem/1.05 Nunito,system-ui,sans-serif!important;
  letter-spacing:.005em!important;
  white-space:normal!important;
  text-align:center!important;
  overflow:visible!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 3px 0 rgba(12,5,24,.76),
    0 7px 16px rgba(0,0,0,.20)!important;
}
.kids-header .kids-pill-ico{
  width:1.15rem!important;
  min-width:1.15rem!important;
  font-size:.95rem!important;
}
.kids-header .kids-pill svg{
  width:1rem!important;
  height:1rem!important;
}
.kids-header .kids-pill[href="/kids/"]{
  background:
    linear-gradient(180deg,#56377b,#3b235d) padding-box,
    linear-gradient(135deg,#a6fbf2,#75d8e2,#c8a6ff) border-box!important;
}
.kids-header .kids-pill[href="/kids/#browse"]{
  background:
    linear-gradient(180deg,#245469,#173849) padding-box,
    linear-gradient(135deg,#9ef4ec,#62cad5,#8bb9e8) border-box!important;
}
.kids-header .kids-pill[href="/kids/nostalgia/"]{
  background:
    linear-gradient(180deg,#68402b,#452819) padding-box,
    linear-gradient(135deg,#f5bf78,#c97f52,#8d5e91) border-box!important;
}
.kids-header .kids-pill-exit,
.kids-header a#kids-exit{
  background:
    linear-gradient(180deg,#ffd979,#efb94e) padding-box,
    linear-gradient(135deg,#fff3bd,#ffd36b,#d99536) border-box!important;
  color:#3b214c!important;
}
.kids-header .kids-time-pill{
  background:
    linear-gradient(180deg,#463064,#2e1b4a) padding-box,
    linear-gradient(135deg,#bf9de5,#7fdde6,#6b4a8e) border-box!important;
  color:#f8f0ff!important;
}
.kids-header .kids-install{
  background:
    linear-gradient(120deg,#ffe36f,#f1c665 52%,#d8a7dc) padding-box,
    linear-gradient(135deg,#fff5ba,#ffda68,#e5b7ed) border-box!important;
  color:#2d1b40!important;
}
.kids-header .kids-motion,
.kids-header .kids-voice-toggle,
.kids-header .kids-lang-wrap{
  background:
    linear-gradient(180deg,#422763,#2d184c) padding-box,
    linear-gradient(135deg,#8165a3,#5c456f,#8a6baa) border-box!important;
}
.kids-header .kids-lang-wrap{
  padding:0 .48rem!important;
}
.kids-header .kids-lang{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:1.85rem!important;
  min-height:1.85rem!important;
  padding:0 .2rem!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#fff9f2!important;
  font:900 .72rem/1 Nunito,system-ui,sans-serif!important;
}
.kids-header .kids-pill[aria-current="page"]{
  outline:2px solid #9ee8e6!important;
  outline-offset:2px!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 3px rgba(158,232,230,.10),
    0 4px 0 rgba(12,5,24,.72),
    0 8px 18px rgba(0,0,0,.20)!important;
}

/* Tablet: brand stays readable while controls pack into two tidy groups. */
@media (max-width:900px){
  .kids-header .kids-header-inner{
    flex-wrap:wrap!important;
  }
  .kids-header .kids-brand{
    flex:1 1 100%!important;
    justify-content:center!important;
  }
  .kids-header .kids-brand-copy .matchapp-wordmark{
    width:min(14rem,46vw)!important;
  }
  .kids-header .kids-brand-copy>span{
    display:none!important;
  }
  .kids-header .kids-header-actions{
    flex:1 1 100%!important;
    justify-content:center!important;
  }
  .kids-header .kids-nav,
  .kids-header .kids-tools{
    justify-content:center!important;
  }
}

/* Phone: deliberate compact grid. No orphaned Time limit / Hear / Language
   controls and no text is visually clipped. */
@media (max-width:560px){
  .kids-header .kids-header-inner{
    width:calc(100% - .8rem)!important;
    padding:.42rem 0 .52rem!important;
    gap:.46rem!important;
  }
  .kids-header .kids-brand{
    min-height:3.15rem!important;
  }
  .kids-header .kids-brand>img{
    width:2.9rem!important;
    height:2.9rem!important;
    flex-basis:2.9rem!important;
  }
  .kids-header .kids-brand-copy .matchapp-wordmark{
    width:min(12rem,62vw)!important;
  }
  .kids-header .kids-header-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.42rem!important;
    width:100%!important;
  }
  .kids-header .kids-nav,
  .kids-header .kids-tools{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:.38rem!important;
    width:100%!important;
  }
  .kids-header .kids-nav>.kids-pill:nth-child(1),
  .kids-header .kids-nav>.kids-pill:nth-child(2),
  .kids-header .kids-nav>.kids-pill:nth-child(3){
    grid-column:span 2!important;
  }
  .kids-header .kids-nav>.kids-pill:nth-child(4),
  .kids-header .kids-nav>.kids-time-pill{
    grid-column:span 3!important;
  }
  .kids-header .kids-tools>.kids-install,
  .kids-header .kids-tools>.kids-motion,
  .kids-header .kids-tools>.kids-voice-toggle,
  .kids-header .kids-tools>.kids-lang-wrap{
    grid-column:span 3!important;
  }
  .kids-header .kids-pill,
  .kids-header .kids-header-actions .kids-motion,
  .kids-header .kids-header-actions .kids-voice-toggle,
  .kids-header .kids-header-actions .install-btn,
  .kids-header .kids-time-pill,
  .kids-header .kids-lang-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:2.55rem!important;
    height:auto!important;
    padding:.5rem .52rem!important;
    justify-content:center!important;
    border-radius:.82rem!important;
    font-size:clamp(.64rem,2.7vw,.72rem)!important;
    line-height:1.06!important;
  }
  .kids-header .kids-pill span:not(.kids-pill-ico):not(.kids-sr){
    position:static!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    clip:auto!important;
    clip-path:none!important;
    white-space:normal!important;
  }
  .kids-header .kids-pill-ico{
    width:1.05rem!important;
    min-width:1.05rem!important;
    font-size:.9rem!important;
  }
  .kids-header .kids-lang{
    text-align:center!important;
    text-align-last:center!important;
  }
}

@media (max-width:360px){
  .kids-header .kids-header-inner{width:calc(100% - .55rem)!important}
  .kids-header .kids-brand-copy .matchapp-wordmark{width:min(10.8rem,60vw)!important}
  .kids-header .kids-pill,
  .kids-header .kids-time-pill,
  .kids-header .kids-header-actions .kids-motion,
  .kids-header .kids-header-actions .kids-voice-toggle,
  .kids-header .kids-header-actions .install-btn,
  .kids-header .kids-lang-wrap{
    padding:.46rem .38rem!important;
    font-size:.62rem!important;
  }
}


/* 2026-09-24 tablet label restore.
   The older <=820px rule iconized these controls. Restore complete labels for
   the polished tablet header while retaining the compact wrapping above. */
@media (min-width:561px) and (max-width:900px){
  .kids-header .kids-pill,
  .kids-header .kids-header-actions .kids-motion,
  .kids-header .kids-header-actions .kids-voice-toggle,
  .kids-header .kids-header-actions .install-btn,
  .kids-header .kids-time-pill,
  .kids-header .kids-lang-wrap{
    width:auto!important;
    min-width:0!important;
    padding:0 .68rem!important;
  }
  .kids-header .kids-pill span:not(.kids-pill-ico):not(.kids-sr){
    position:static!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    clip:auto!important;
    clip-path:none!important;
    white-space:normal!important;
  }
  .kids-header .kids-lang-wrap{min-width:4.1rem!important}
}