/* Spectrum look (option A, Ismael 2026-10-22): the same night header, spectrum light and stage
   colors as aiplaybase.com, so AIPlayBase Kids reads as one brand with the master site.
   Loaded last on every page, after styles.css and theme.css. Kids keeps its rounded font. */
:root:not([data-theme="dark"]) {
  --ink: #0e1222;
  --ink-2: #4b4870;
  --line: #e6e3f5;
  --tint: #f4f3ff;
  --blue-text: #5a2fd6;
}
/* Dark mode keeps theme.css text colors; only the link tone moves to the spectrum violet. */
[data-theme="dark"] { --blue-text: #b9a6ff; }
:root {
  --blue: #6a3bf0;
  --blue-dark: #4a22c8;
  --indigo: #070714;
  --indigo-2: #1b1446;
  --navy: #0e1222;
  --sky: #8fb2ff;
  /* "Go" actions take the Kids coral; white on it stays above 4.5:1. */
  --green: #d6334f;
  --green-dark: #a82239;
  --orange: #ffc53d;
  --spectrum: linear-gradient(90deg, #ffc53d, #ff8a65, #ff6b81, #7a4bff, #4a7bff, #22c7e8, #2fd4a3);
}

/* Night header on every page, light or dark mode. */
.top, html[data-theme] .top { background: #070714; border-bottom: 0; box-shadow: none; color: #fff; }
.top .logo, html[data-theme] .top .logo { color: #fff; }
.logo__word b { color: #ff6b81; }
.top .menu a, html[data-theme] .top .menu a { color: #c9c6f0; }
.top .menu a:hover, html[data-theme] .top .menu a:hover,
.top .menu a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff; }
.top .lang select, html[data-theme] .top .lang select { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .2); }
.top .lang option { color: #0e1222; }
.top .btn--line, html[data-theme] .top .btn--line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; }
.burger span, .burger span::before, .burger span::after,
html[data-theme] .burger span, html[data-theme] .burger span::before, html[data-theme] .burger span::after { background: #fff; }
.burger[aria-expanded="true"] span, html[data-theme] .burger[aria-expanded="true"] span { background: transparent; }
.theme-toggle { border-color: rgba(255, 255, 255, .25); color: #fff; }
.drawer, html[data-theme] .drawer { background: #0e0d24; border-top-color: rgba(255, 255, 255, .1); }
.drawer a, html[data-theme] .drawer a { color: #c9c6f0; }
.drawer a:hover { color: #fff; }
.drawer .lang select { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .2); }

/* Hero: night sky, one spectrum light across it. */
.hero, .page-hero {
  background:
    radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 28px 28px,
    #070714;
}
.hero::before, .page-hero::before {
  inset: 40% -10% auto; height: 320px; opacity: .45; border-radius: 50%; filter: blur(90px); transform: rotate(-6deg);
  background-image: var(--spectrum); background-size: auto; -webkit-mask-image: none; mask-image: none;
}
.grad { background: linear-gradient(90deg, #ffc53d, #ff6b81 30%, #7a4bff 60%, #22c7e8); -webkit-background-clip: text; background-clip: text; }
.lead--light { color: #c9c6f0; }
.hero__note { color: #9c98c9; }
.kicker--light { color: #22c7e8; }
.blob { background: linear-gradient(180deg, #2b1f6e, #5b3bd6 55%, #ff8a65); box-shadow: 0 40px 120px -30px rgba(122, 75, 255, .7), 0 0 0 1px rgba(255, 255, 255, .15); }
.stats li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.stats span { color: #c9c6f0; }
.newbar__txt span { color: #c9c6f0; }
.newbar__pill { color: #070714; }

/* Primary action: the warm side of the spectrum with a pressed edge. */
.btn--go { background: linear-gradient(90deg, #e5643f, #d6334f 55%, #7a3be0); box-shadow: 0 4px 0 var(--green-dark); }
.btn--play { background: #ffc53d; color: #070714; box-shadow: 0 4px 0 #c98f00; }
.btn--play:hover { box-shadow: 0 6px 0 #c98f00; }
.btn--play:active { box-shadow: 0 2px 0 #c98f00; }

/* Colored bands take spectrum slices instead of the old blues. */
.section--blue { background: linear-gradient(160deg, #6a3bf0, #4a2bd8 60%, #1b1446); }
.section--navy { background: radial-gradient(circle at 85% 0%, rgba(34, 199, 232, .35) 0, transparent 45%), radial-gradient(circle at 10% 100%, rgba(255, 107, 129, .3) 0, transparent 45%), #070714; }
.footer, html[data-theme] .footer { background: #070714; color: #c9c6f0; }
.footer::before { content: ""; display: block; height: 4px; margin: -56px 0 52px; background: var(--spectrum); }
.footer .kicker { color: #22c7e8; }

/* Home hero: Cacabara and Mini Mundo stand in the spectrum window, as on aiplaybase.com. */
.hero__art--cast .blob { inset: 10px 20px 0; border-radius: 32px; overflow: hidden; }
.hero__art--cast .blob::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -70px; height: 150px; border-radius: 50%; background: rgba(47, 212, 163, .85); }
.cast { position: absolute; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3)); }
.cast--main { left: 12%; bottom: 4px; width: 52%; height: auto; }
.cast--side { right: 12%; bottom: 18px; width: 30%; height: auto; }
@media (max-width: 900px) { .cast--main { left: 14%; } }

/* Stage cards: chunky tiles with a pressed bottom edge, as on aiplaybase.com. */
.stages { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stage { --tone: #8fb2ff; display: flex; flex-direction: column; padding: 24px; border-radius: 24px; background: rgba(255, 255, 255, .05); border: 2px solid rgba(255, 255, 255, .14); border-bottom-width: 6px; }
.stage--kids { --tone: #ff6b81; }
.stage--adults { --tone: #2fd4a3; }
.stage--live { border-color: var(--tone); }
.stage__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stage__top img { width: 56px; height: 56px; }
.stage__pill { padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.stage__name { margin: 20px 0 0; font-size: .85rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #9c98c9; }
.stage__verb { margin: 2px 0 0; font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--tone); }
.stage__text { margin: 12px 0 0; color: #c9c6f0; }
.stage__go { margin-top: 24px; display: block; text-align: center; padding: 16px; border-radius: 16px; background: #d6334f; border-bottom: 5px solid #a82239; color: #fff !important; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.stage__go:active { transform: translateY(3px); border-bottom-width: 2px; }
@media (max-width: 900px) { .stages { grid-template-columns: 1fr; } }