/* ==========================================================================
   Brainland 2026 — design layer
   Calm modern edtech: light canvas, one accent, generous space, flat cards.
   Loaded LAST on a page and scoped to <body class="bl2"> so it re-skins the
   existing markup without any of the old stylesheets being deleted.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
body.bl2 {
  --canvas:        #F5F8FC;
  --surface:       #FFFFFF;
  --surface-2:     #EFF3F9;
  --ink:           #0E1726;
  --ink-2:         #33415C;
  --muted:         #68758C;
  --line:          #E3E9F2;
  --line-2:        #CFD8E6;

  --accent:        #2B5CE6;
  --accent-ink:    #1D44B5;
  --accent-soft:   #EAF0FE;
  --accent-ring:   rgba(43, 92, 230, 0.28);

  --green:         #0F9D74;
  --amber:         #C77A0A;
  --rose:          #D6455B;
  --violet:        #6D4BD6;

  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --pill: 999px;

  --sh-1: 0 1px 2px rgba(14, 23, 38, .06);
  --sh-2: 0 10px 30px -18px rgba(14, 23, 38, .35);
  --sh-3: 0 18px 44px -22px rgba(14, 23, 38, .40);

  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* zone hues — muted, used only for small icon tiles and thin accents */
  --z-math:    #2B5CE6;
  --z-english: #6D4BD6;
  --z-science: #0E9BA4;
  --z-geo:     #0B7FC4;
  --z-art:     #C94F7C;
  --z-code:    #3D5AF1;
  --z-focus:   #0F9D74;
  --z-puzzle:  #C77A0A;
  --z-review:  #55637A;
}

body.bl2.dark-mode {
  --canvas:      #0D1220;
  --surface:     #141B2B;
  --surface-2:   #1B2435;
  --ink:         #F2F5FA;
  --ink-2:       #C7D0DF;
  --muted:       #94A2B8;
  --line:        #24314A;
  --line-2:      #33425E;
  --accent:      #6D93FF;
  --accent-ink:  #9DB7FF;
  --accent-soft: #1B2743;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 10px 30px -18px rgba(0, 0, 0, .8);
  --sh-3: 0 18px 44px -22px rgba(0, 0, 0, .9);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body.bl2,
body.bl2.light-mode {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.bl2 h1,
body.bl2 h2,
body.bl2 h3,
body.bl2 .park-title,
body.bl2 .about-title {
  font-family: var(--font) !important;
  color: var(--ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  letter-spacing: -0.02em;
  text-shadow: none !important;
  font-weight: 700;
}

body.bl2 h2 {
  font-size: clamp(1.35rem, 3.4vw, 1.85rem);
  line-height: 1.25;
  margin: 56px 0 6px;
  text-align: center;
}

body.bl2 p { color: var(--ink-2); }

body.bl2 a { color: var(--accent); }

body.bl2 ::selection { background: var(--accent-soft); color: var(--accent-ink); }

body.bl2 *:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* calm: no ambient pulsing, glowing or floating decoration */
body.bl2 .area-card,
body.bl2 .area-card:not(.locked),
body.bl2 .zone,
body.bl2 .feature,
body.bl2 .step-card {
  animation: none !important;
}
body.bl2 #particles-canvas,
body.bl2 .particles,
body.bl2 .floating-shapes { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  body.bl2 *, body.bl2 *::before, body.bl2 *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Shared primitives
   -------------------------------------------------------------------------- */

/* inline SVG icons */
body.bl2 .bl-ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the tinted square an icon sits in */
body.bl2 .bl-tile {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--accent-soft);
  color: var(--accent);
}

body.bl2 .bl-tile .bl-ico { stroke-width: 1.6; }

/* zone tints — one hue per zone, only ever used on the small icon tile.
   Older browsers without color-mix() fall back to the neutral accent tint. */
body.bl2 [data-zone] .bl-tile,
body.bl2 [data-zone] .zone-icon,
body.bl2 [data-zone] .zc-icon,
body.bl2 [data-zone] .area-icon { background: var(--accent-soft); color: var(--accent); }

body.bl2 [data-zone="math"]      .bl-tile, body.bl2 [data-zone="math"]      .zone-icon,
body.bl2 [data-zone="math"]      .zc-icon, body.bl2 [data-zone="math"]      .area-icon
  { background: color-mix(in srgb, var(--z-math) 12%, var(--surface)) !important; color: var(--z-math) !important; }
body.bl2 [data-zone="english"]   .bl-tile, body.bl2 [data-zone="english"]   .zone-icon,
body.bl2 [data-zone="english"]   .zc-icon, body.bl2 [data-zone="english"]   .area-icon
  { background: color-mix(in srgb, var(--z-english) 12%, var(--surface)) !important; color: var(--z-english) !important; }
body.bl2 [data-zone="science"]   .bl-tile, body.bl2 [data-zone="science"]   .zone-icon,
body.bl2 [data-zone="science"]   .zc-icon, body.bl2 [data-zone="science"]   .area-icon
  { background: color-mix(in srgb, var(--z-science) 12%, var(--surface)) !important; color: var(--z-science) !important; }
body.bl2 [data-zone="geography"] .bl-tile, body.bl2 [data-zone="geography"] .zone-icon,
body.bl2 [data-zone="geography"] .zc-icon, body.bl2 [data-zone="geography"] .area-icon
  { background: color-mix(in srgb, var(--z-geo) 12%, var(--surface)) !important; color: var(--z-geo) !important; }
body.bl2 [data-zone="art"]       .bl-tile, body.bl2 [data-zone="art"]       .zone-icon,
body.bl2 [data-zone="art"]       .zc-icon, body.bl2 [data-zone="art"]       .area-icon
  { background: color-mix(in srgb, var(--z-art) 12%, var(--surface)) !important; color: var(--z-art) !important; }
body.bl2 [data-zone="code"]      .bl-tile, body.bl2 [data-zone="code"]      .zone-icon,
body.bl2 [data-zone="code"]      .zc-icon, body.bl2 [data-zone="code"]      .area-icon
  { background: color-mix(in srgb, var(--z-code) 12%, var(--surface)) !important; color: var(--z-code) !important; }
body.bl2 [data-zone="focus"]     .bl-tile, body.bl2 [data-zone="focus"]     .zone-icon,
body.bl2 [data-zone="focus"]     .zc-icon, body.bl2 [data-zone="focus"]     .area-icon
  { background: color-mix(in srgb, var(--z-focus) 12%, var(--surface)) !important; color: var(--z-focus) !important; }
body.bl2 [data-zone="rubiks"]    .bl-tile, body.bl2 [data-zone="rubiks"]    .zone-icon,
body.bl2 [data-zone="rubiks"]    .zc-icon, body.bl2 [data-zone="rubiks"]    .area-icon
  { background: color-mix(in srgb, var(--z-puzzle) 12%, var(--surface)) !important; color: var(--z-puzzle) !important; }
body.bl2 [data-zone="arena"]     .bl-tile, body.bl2 [data-zone="arena"]     .zone-icon,
body.bl2 [data-zone="arena"]     .zc-icon, body.bl2 [data-zone="arena"]     .area-icon
  { background: color-mix(in srgb, var(--rose) 12%, var(--surface)) !important; color: var(--rose) !important; }
body.bl2 [data-zone="review"]    .bl-tile, body.bl2 [data-zone="review"]    .zone-icon,
body.bl2 [data-zone="review"]    .zc-icon, body.bl2 [data-zone="review"]    .area-icon
  { background: color-mix(in srgb, var(--z-review) 12%, var(--surface)) !important; color: var(--z-review) !important; }

/* buttons */
body.bl2 .cta,
body.bl2 .bl2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  padding: 14px 26px !important;
  font: 600 1rem/1 var(--font) !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: var(--sh-1) !important;
  transition: background .18s ease, transform .18s ease !important;
  text-shadow: none !important;
  animation: none !important;
}
body.bl2 .cta:hover,
body.bl2 .bl2-btn:hover {
  background: var(--accent-ink) !important;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   4. Homepage
   -------------------------------------------------------------------------- */

/* top navigation */
body.bl2 .site-nav,
body.bl2 .site-nav.scrolled,
body.bl2.light-mode .site-nav {
  background: rgba(255, 255, 255, .86) !important;
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  padding: 12px 20px !important;
}
body.bl2.dark-mode .site-nav,
body.bl2.dark-mode .site-nav.scrolled { background: rgba(20, 27, 43, .88) !important; }

body.bl2 .nav-brand,
body.bl2 .nav-brand span {
  color: var(--ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
}
body.bl2 .nav-links a,
body.bl2.light-mode .site-nav a {
  color: var(--ink-2) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
  text-decoration: none;
}
body.bl2 .nav-links a:hover { color: var(--accent) !important; }
body.bl2 .nav-links a.active { color: var(--accent) !important; font-weight: 600 !important; }

body.bl2 .theme-toggle,
body.bl2 .sound-toggle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill) !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
body.bl2 .theme-toggle:hover,
body.bl2 .sound-toggle:hover { border-color: var(--line-2) !important; color: var(--accent) !important; }
body.bl2 .hamburger span { background: var(--ink-2) !important; }

/* hero */
body.bl2 .hero-wrapper,
body.bl2.light-mode .hero-wrapper {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--canvas) 100%) !important;
  border-bottom: 1px solid var(--line);
  padding: 96px 20px 56px !important;
  min-height: 0 !important;
}
body.bl2.dark-mode .hero-wrapper {
  background: linear-gradient(180deg, #131A2A 0%, var(--canvas) 100%) !important;
}
body.bl2 .hero-wrapper header { max-width: 760px; margin: 0 auto; text-align: center; }
body.bl2 .logo {
  width: 56px !important; height: 56px !important;
  margin-bottom: 20px !important;
  filter: none !important;
  animation: none !important;
}
body.bl2 h1 {
  font-size: clamp(2.1rem, 6vw, 3.3rem) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  margin: 0 0 14px !important;
}
body.bl2 .tagline {
  color: var(--muted) !important;
  font-size: clamp(1rem, 2.2vw, 1.12rem) !important;
  line-height: 1.6 !important;
  max-width: 560px;
  margin: 0 auto !important;
}
body.bl2 .typing-cursor { display: none !important; }

body.bl2 .trust-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-top: 26px !important;
}
body.bl2 .trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: var(--pill) !important;
  padding: 7px 14px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
body.bl2 .trust-badge .bl-ico { color: var(--green); font-size: 15px; }

/* stats strip */
body.bl2 .stats-row {
  max-width: 720px;
  margin: 44px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 18px 8px !important;
  box-shadow: var(--sh-1) !important;
}
body.bl2 .stat-item { border-right: 1px solid var(--line); padding: 0 6px !important; }
body.bl2 .stat-item:last-child { border-right: 0; }
body.bl2 .stat-number {
  color: var(--ink) !important;
  font-size: clamp(1.3rem, 4vw, 1.7rem) !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
}
body.bl2 .stat-label {
  color: var(--muted) !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* section intro line under each h2 */
body.bl2 .container > h2 + .zones,
body.bl2 .container > h2 + .steps { margin-top: 28px; }

/* zone cards (main grid) */
body.bl2 .zones {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px !important;
  margin-top: 28px !important;
}
body.bl2 .zone,
body.bl2.light-mode .zone {
  position: relative;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 22px 20px !important;
  box-shadow: var(--sh-1) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  overflow: hidden;
}
body.bl2 .zone::before,
body.bl2 .zone::after { display: none !important; }
body.bl2 .zone:hover {
  border-color: var(--line-2) !important;
  box-shadow: var(--sh-2) !important;
  transform: translateY(-2px) !important;
}
body.bl2 .zone-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px !important;
  margin: 0 0 14px !important;
  background: var(--accent-soft);
  color: var(--accent);
  animation: none !important;
  filter: none !important;
}
body.bl2 .zone-name {
  color: var(--ink) !important;
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  margin-bottom: 6px !important;
  text-shadow: none !important;
}
body.bl2 .zone-desc {
  color: var(--muted) !important;
  font-size: .88rem !important;
  line-height: 1.55 !important;
}
body.bl2 .zone-level {
  display: inline-block;
  margin-top: 14px !important;
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  padding: 4px 10px !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
body.bl2 .zone-arrow {
  position: absolute; right: 18px; bottom: 18px;
  color: var(--accent) !important;
  font-size: 1rem !important;
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}
body.bl2 .zone:hover .zone-arrow { opacity: 1; transform: translateX(3px); }

/* zone carousel */
body.bl2 .zone-carousel-wrap { border: 0 !important; background: none !important; }
body.bl2 .zone-carousel-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-1) !important;
  padding: 18px 16px !important;
}
body.bl2 .zc-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px !important; margin-bottom: 10px !important;
  background: var(--accent-soft); color: var(--accent);
}
body.bl2 .zc-name { color: var(--ink) !important; font-weight: 650 !important; font-size: .95rem !important; }
body.bl2 .zc-tag  { color: var(--muted) !important; font-size: .74rem !important; }
body.bl2 .zc-btn  {
  margin-top: 10px !important;
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  padding: 6px 14px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

/* how it works */
body.bl2 .steps { gap: 14px !important; }
body.bl2 .step-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 24px 20px !important;
  box-shadow: var(--sh-1) !important;
  text-align: left !important;
}
body.bl2 .step-number {
  width: 26px; height: 26px; border-radius: var(--pill);
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem !important; font-weight: 700 !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
  position: static !important;
}
body.bl2 .step-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px !important;
  background: var(--surface-2); color: var(--ink-2);
  margin-bottom: 14px !important;
  animation: none !important;
}
body.bl2 .step-title { color: var(--ink) !important; font-weight: 650 !important; font-size: 1rem !important; }
body.bl2 .step-desc  { color: var(--muted) !important; font-size: .88rem !important; line-height: 1.55 !important; }

/* features */
body.bl2 .features { gap: 14px !important; }
body.bl2 .feature,
body.bl2.light-mode .feature {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 22px 20px !important;
  box-shadow: var(--sh-1) !important;
  text-align: left !important;
}
body.bl2 .feature-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px !important;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: 14px !important;
  animation: none !important;
}
body.bl2 .feature-name { color: var(--ink) !important; font-weight: 650 !important; font-size: .98rem !important; }
body.bl2 .feature-desc { color: var(--muted) !important; font-size: .87rem !important; line-height: 1.55 !important; }

/* reviews */
body.bl2 .reviews-section { background: none !important; border: 0 !important; padding: 0 !important; }
body.bl2 .reviews-grid { gap: 14px !important; }
body.bl2 .review-card,
body.bl2.light-mode .review-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 22px 20px !important;
  box-shadow: var(--sh-1) !important;
}
body.bl2 .review-avatar {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  font-weight: 650 !important;
  border: 0 !important;
}
body.bl2 .review-name  { color: var(--ink) !important; font-weight: 650 !important; }
body.bl2 .review-date  { color: var(--muted) !important; font-size: .74rem !important; }
body.bl2 .review-stars { color: var(--amber) !important; letter-spacing: 2px; font-size: .9rem !important; }
body.bl2 .review-text  { color: var(--ink-2) !important; font-size: .9rem !important; line-height: 1.6 !important; }

/* FAQ */
body.bl2 .faq-section {
  max-width: 760px; margin: 28px auto 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 4px 20px !important;
  box-shadow: var(--sh-1) !important;
}
body.bl2 .faq-item {
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: none !important;
  margin: 0 !important;
}
body.bl2 .faq-item:last-child { border-bottom: 0 !important; }
body.bl2 .faq-question {
  color: var(--ink) !important;
  font-size: .95rem !important;
  font-weight: 550 !important;
  padding: 18px 0 !important;
  background: none !important;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%;
  text-align: left !important;
}
body.bl2 .faq-arrow { color: var(--muted) !important; font-size: .7rem !important; }
body.bl2 .faq-answer p { color: var(--muted) !important; font-size: .9rem !important; line-height: 1.65 !important; }

/* about + footer */
body.bl2 .about-section {
  max-width: 760px;
  margin: 56px auto 0 !important;
  padding: 0 20px 40px !important;
  background: none !important;
  border: 0 !important;
}
body.bl2 .about-title { text-align: center; }
body.bl2 .about-text { color: var(--muted) !important; font-size: .92rem !important; line-height: 1.7 !important; }

body.bl2 footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--line) !important;
  padding: 36px 20px 100px !important;
  text-align: center;
}
body.bl2 footer p { color: var(--muted) !important; font-size: .85rem !important; }
body.bl2 .footer-links { gap: 6px 16px !important; margin-top: 12px !important; }
body.bl2 .footer-links a {
  color: var(--ink-2) !important;
  font-size: .82rem !important;
  text-decoration: none !important;
}
body.bl2 .footer-links a:hover { color: var(--accent) !important; }

body.bl2 .back-to-top {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  box-shadow: var(--sh-2) !important;
  border-radius: var(--pill) !important;
}

/* entry modal */
body.bl2 .entry-modal { background: rgba(14, 23, 38, .45) !important; backdrop-filter: blur(3px); }
body.bl2 .entry-modal-box {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-3) !important;
  color: var(--ink) !important;
}
body.bl2 .entry-btn {
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
body.bl2 .entry-btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   5. Learning Park hub
   -------------------------------------------------------------------------- */
body.bl2 .wrap { padding-bottom: 96px; }

body.bl2 .park-title {
  font-size: clamp(1.9rem, 6vw, 2.6rem) !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}
body.bl2 .park-tagline { color: var(--ink-2) !important; font-weight: 500 !important; }
body.bl2 .park-subline { color: var(--muted) !important; font-size: .88rem !important; }

/* section headers → quiet eyebrow, not a floating pill */
body.bl2 .section-divider { margin: 40px 0 14px !important; text-align: left; }
body.bl2 .section-divider::after { display: none !important; }
body.bl2 .section-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: .74rem !important;
  font-weight: 650 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
body.bl2 .section-label:hover { transform: none !important; }

/* cards / panels */
body.bl2 .section-box,
body.bl2 .daily-card,
body.bl2 .xp-bar-wrap,
body.bl2 .weekly-goal,
body.bl2 .event-banner {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.bl2 .section-box { padding: 20px 18px !important; }

body.bl2 .xp-level { color: var(--ink) !important; font-weight: 650 !important; font-size: .92rem !important; }
body.bl2 .xp-info  { color: var(--muted) !important; }
body.bl2 .xp-bar-outer,
body.bl2 .wg-bar,
body.bl2 .zp-bar {
  background: var(--surface-2) !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  overflow: hidden;
}
body.bl2 .xp-bar-inner,
body.bl2 .wg-fill,
body.bl2 .zp-fill {
  background: var(--accent) !important;
  box-shadow: none !important;
  border-radius: var(--pill) !important;
}

body.bl2 .daily-card { padding: 18px !important; }
body.bl2 .daily-badge {
  display: inline-block;
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  padding: 5px 12px !important;
  font-size: .72rem !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
  animation: none !important;
}
body.bl2 .daily-question { color: var(--ink) !important; font-weight: 600 !important; font-size: 1rem !important; }
body.bl2 .daily-options button,
body.bl2 .daily-opt {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 550 !important;
}
body.bl2 .daily-options button:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* search */
body.bl2 .search-wrap { max-width: 520px; margin: 0 auto 18px !important; }
body.bl2 .search-input {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--pill) !important;
  color: var(--ink) !important;
  font-size: .92rem !important;
  padding: 13px 18px 13px 44px !important;
  box-shadow: var(--sh-1) !important;
}
body.bl2 .search-input::placeholder { color: var(--muted) !important; }
body.bl2 .search-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-ring) !important; }
body.bl2 .search-icon { color: var(--muted) !important; opacity: 1 !important; font-size: 17px !important; left: 16px !important; }

/* zone cards */
body.bl2 .area-grid { gap: 14px !important; }
body.bl2 .area-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-image: none !important;
  border-radius: var(--r) !important;
  padding: 20px 18px !important;
  box-shadow: var(--sh-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  filter: none !important;
}
body.bl2 .area-card::before,
body.bl2 .area-card::after { display: none !important; }
body.bl2 .area-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--line-2) !important;
  box-shadow: var(--sh-2) !important;
  filter: none !important;
}
body.bl2 .area-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px !important;
  margin: 0 0 14px !important;
  background: var(--accent-soft);
  color: var(--accent);
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}
body.bl2 .area-card:hover .area-icon { animation: none !important; }
body.bl2 .area-tag {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  padding: 3px 9px !important;
  font-size: .66rem !important;
  font-weight: 650 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
body.bl2 .area-name {
  color: var(--ink) !important;
  font-size: 1.08rem !important;
  font-weight: 650 !important;
  margin: 8px 0 6px !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
}
body.bl2 .area-desc { color: var(--muted) !important; font-size: .87rem !important; line-height: 1.55 !important; }
body.bl2 .area-status {
  color: var(--accent) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  margin-top: 14px !important;
}
body.bl2 .area-status .arrow { transition: transform .18s ease; }
body.bl2 .area-card:hover .area-status .arrow { transform: translateX(3px); }

body.bl2 .zone-badge {
  top: 14px !important; right: 14px !important;
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  padding: 4px 9px !important;
  font-size: .64rem !important;
  font-weight: 650 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.bl2 .zone-badge-popular { background: color-mix(in srgb, var(--green) 13%, var(--surface)) !important; color: var(--green) !important; }
body.bl2 .zone-badge-new,
body.bl2 .zone-badge-explore { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
body.bl2 .zone-badge-updated { background: color-mix(in srgb, var(--violet) 13%, var(--surface)) !important; color: var(--violet) !important; }

body.bl2 .zone-progress { margin-top: 14px !important; }
body.bl2 .zp-text { color: var(--muted) !important; font-size: .7rem !important; }

/* "More" tiles */
body.bl2 #moreSection a,
body.bl2 #moreSection > .section-box > div > div {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  font-weight: 550 !important;
  box-shadow: none !important;
  transition: border-color .18s ease, color .18s ease !important;
}
body.bl2 #moreSection a:hover,
body.bl2 #moreSection > .section-box > div > div:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: none !important;
}

/* top chips (home, language, apples, redeem, clock) */
body.bl2 #blHomeLink,
body.bl2 #bl-redeem-btn,
body.bl2 #bl-apple-pill,
body.bl2 .bl-apple-pill,
body.bl2 select#langSelect,
body.bl2 #timeChip {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: var(--pill) !important;
  box-shadow: var(--sh-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-weight: 550 !important;
  text-shadow: none !important;
}
body.bl2 #bl-redeem-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* level picker + modals */
body.bl2 .lvl-overlay,
body.bl2 #parentModal,
body.bl2 #profileModal,
body.bl2 #premiumModal,
body.bl2 #feedbackModal,
body.bl2 #signInModal { background: rgba(14, 23, 38, .45) !important; }
body.bl2 .lvl-box,
body.bl2 #parentModal > div,
body.bl2 #profileModal > div,
body.bl2 #premiumModal > div,
body.bl2 #feedbackModal > div,
body.bl2 #signInModal > div {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-3) !important;
  color: var(--ink) !important;
}
body.bl2 .lvl-zone-icon {
  width: 46px; height: 46px; margin: 0 auto 10px;
  border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: 24px !important;
}
body.bl2 .lvl-zone-name { color: var(--ink) !important; font-weight: 650 !important; }
body.bl2 .lvl-zone-sub  { color: var(--muted) !important; }
body.bl2 .lvl-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
}
body.bl2 .lvl-btn.selected {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
}
body.bl2 .lvl-btn-sub { color: var(--muted) !important; }
body.bl2 .lvl-go {
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.bl2 .lvl-close,
body.bl2 .mg-close { color: var(--muted) !important; }

body.bl2 .profile-stat {
  background: var(--surface-2) !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
}
body.bl2 .profile-stat-value { color: var(--ink) !important; }
body.bl2 .profile-stat-label { color: var(--muted) !important; }

body.bl2 .bl-plan {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
}
body.bl2 .bl-plan.selected {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.bl2 .bl-plan .plan-name  { color: var(--ink) !important; }
body.bl2 .bl-plan .plan-price { color: var(--accent-ink) !important; }
body.bl2 .bl-plan .plan-period{ color: var(--muted) !important; }

body.bl2 .footer { color: var(--muted) !important; font-size: .82rem !important; }

/* --------------------------------------------------------------------------
   6. Bottom tab bar (both pages)
   -------------------------------------------------------------------------- */
body.bl2 #bottomNav {
  background: var(--surface) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom)) !important;
}
body.bl2 .bn-item { color: var(--muted) !important; gap: 3px !important; }
body.bl2 .bn-item.active { color: var(--accent) !important; }
body.bl2 .bn-icon { font-size: 21px !important; line-height: 1 !important; }
body.bl2 .bn-label { font-size: .62rem !important; font-weight: 600 !important; letter-spacing: 0 !important; }

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  body.bl2 h2 { margin-top: 44px; }
  body.bl2 .hero-wrapper { padding: 84px 18px 44px !important; }
  body.bl2 .stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 18px !important; }
  body.bl2 .stat-item:nth-child(2n) { border-right: 0; }
  body.bl2 .stat-item:nth-child(-n+2) { padding-bottom: 14px !important; border-bottom: 1px solid var(--line); }
  body.bl2 .section-divider { margin: 32px 0 12px !important; }
}

/* --------------------------------------------------------------------------
   8. Refinements — legacy overrides the base rules can't reach
   -------------------------------------------------------------------------- */

/* the old full-page colour wash behind the hub */
body.bl2::before {
  background: radial-gradient(1100px 520px at 50% -8%, #E9F0FE 0%, rgba(233, 240, 254, 0) 72%) !important;
  opacity: 1 !important;
  filter: none !important;
}
body.bl2.dark-mode::before {
  background: radial-gradient(1100px 520px at 50% -8%, #17233D 0%, rgba(23, 35, 61, 0) 72%) !important;
}

/* homepage hero spacing + scroll progress */
body.bl2 .hero-wrapper header {
  padding: 0 !important;
  min-height: 0 !important;
}
body.bl2 .scroll-progress {
  background: var(--accent) !important;
  height: 2px !important;
  box-shadow: none !important;
}
body.bl2 .zone-arrow {
  position: absolute !important;
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
}
body.bl2 .nav-links a[style] { color: var(--ink-2) !important; }
body.bl2 .nav-links a[style]:hover { color: var(--accent) !important; }


/* hub: floating chips along the top */
body.bl2 #blPillBar,
body.bl2 #blPillBarRight,
body.bl2 #liveClock,
body.bl2 #bl-counter,
body.bl2 #bl-timer-wrap,
body.bl2 #topLeftBar > *,
body.bl2 #langSelect {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: var(--pill) !important;
  box-shadow: var(--sh-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  font-weight: 550 !important;
}
body.bl2 #blPillBar *,
body.bl2 #blPillBarRight *,
body.bl2 #bl-counter * { color: var(--ink-2) !important; text-shadow: none !important; }
body.bl2 #blPillBarRight [onclick*="ignIn"],
body.bl2 #blPillBarRight button:last-child {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
body.bl2 #blPillBarRight [onclick*="ignIn"] * { color: #fff !important; }
body.bl2 #bl-redeem-btn,
body.bl2 #bl-redeem-btn * {
  background: var(--accent) !important;
  background-image: none !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: var(--pill) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* hub: retire the bright inline colours the old markup hard-codes */
body.bl2 .wrap [style*="color:#ff8c42"],
body.bl2 .wrap [style*="color:#FF8C42"],
body.bl2 .wrap [style*="color:#4cc9f0"],
body.bl2 .wrap [style*="color:#396BF6"],
body.bl2 .wrap [style*="color:#396DFF"],
body.bl2 .wrap [style*="color:#ff3b6b"],
body.bl2 .wrap [style*="color:#b14aff"],
body.bl2 .wrap [style*="color:#06d6a0"],
body.bl2 .wrap [style*="color:#00f5d4"],
body.bl2 .wrap [style*="color:#9ab"],
body.bl2 .wrap [style*="color:#cdd"] { color: var(--ink-2) !important; }

body.bl2 .wrap [style*="background:rgba(255,140,66"],
body.bl2 .wrap [style*="background:rgba(76,201,240"],
body.bl2 .wrap [style*="background:rgba(6,214,160"],
body.bl2 .wrap [style*="background:rgba(177,74,255"],
body.bl2 .wrap [style*="background:rgba(0,245,212"],
body.bl2 .wrap [style*="background:rgba(255,59,107"],
body.bl2 .wrap [style*="background:rgba(57,107,246"] {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

/* hub: streak row reads as a calm progress strip, no flames */
body.bl2 .sd-icon { display: none !important; }
body.bl2 .streak-day {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--muted) !important;
  min-width: 44px;
  padding: 10px 6px !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  animation: none !important;
}
body.bl2 .streak-day.reached {
  background: var(--accent-soft) !important;
  border-color: transparent !important;
  color: var(--accent-ink) !important;
}
body.bl2 .streak-day.milestone { border-style: dashed !important; }
body.bl2 .streak-day div[style] { color: inherit !important; }
body.bl2 .streak-freeze-badge { color: var(--muted) !important; }

/* hub: loading screen */
body.bl2 .loader-screen {
  background: var(--canvas) !important;
  background-image: none !important;
}
body.bl2 .loader-title {
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}
body.bl2 .loader-dots span { background: var(--accent) !important; }

/* hub: mini-game + explore cards */
body.bl2 .minigame-card,
body.bl2 .explore-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-1) !important;
}
body.bl2 .explore-icon { background: var(--accent-soft) !important; color: var(--accent) !important; }
body.bl2 .explore-name { color: var(--ink) !important; }
body.bl2 .explore-desc { color: var(--muted) !important; }
body.bl2 .explore-arrow { color: var(--accent) !important; }

/* hub: tutorial / event overlays */
body.bl2 .tutorial-box,
body.bl2 .event-banner {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
body.bl2 .tut-title {
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
}
body.bl2 .tut-text { color: var(--muted) !important; }
body.bl2 .tut-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
}

/* --------------------------------------------------------------------------
   9. Final polish
   -------------------------------------------------------------------------- */

/* homepage logo sits in a soft tile so it holds its own on white */
body.bl2 .logo {
  width: 64px !important;
  height: 64px !important;
  padding: 10px;
  box-sizing: border-box;
  background: var(--accent-soft);
  border-radius: 20px;
}

/* status chips injected by site-effects (Free / Sign in) */
body.bl2 [data-chip] {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: var(--sh-1) !important;
}
body.bl2 #blPillBarRight a [data-chip] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* progress bars: flat, no stripes or shimmer */
body.bl2 .xp-bar-inner::after,
body.bl2 .xp-bar-inner::before,
body.bl2 .wg-fill::after,
body.bl2 .zp-fill::after { display: none !important; }
body.bl2 .xp-bar-inner,
body.bl2 .wg-fill,
body.bl2 .zp-fill { background-image: none !important; animation: none !important; }

/* secondary buttons written with inline styles in the old markup */
body.bl2 .wrap button[onclick*="scrollTo"],
body.bl2 .wrap button[onclick*="scrollTo"]:hover {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  padding: 11px 22px !important;
  box-shadow: var(--sh-1) !important;
}

/* hub hero: tighten */
body.bl2 .park-title { margin-top: 8px !important; }
body.bl2 .park-tagline { font-size: 1.05rem !important; }

/* --------------------------------------------------------------------------
   10. Learning Park sub-pages (Fun, Games, Social, Customize, Tools,
       Rewards, Shop, Arena) — they share the hub's vocabulary, plus these.
   -------------------------------------------------------------------------- */
body.bl2 .bl-back,
body.bl2 .back-btn,
body.bl2 .back,
body.bl2 .exit-brainland {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: var(--pill) !important;
  padding: 8px 16px !important;
  font-size: .82rem !important;
  font-weight: 550 !important;
  text-decoration: none !important;
  box-shadow: var(--sh-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}
body.bl2 .bl-back:hover,
body.bl2 .back-btn:hover,
body.bl2 .back:hover,
body.bl2 .exit-brainland:hover { border-color: var(--line-2) !important; color: var(--accent) !important; }
body.bl2 .back-arrow { color: inherit !important; }

body.bl2 .park-logo {
  /* A fixed-width block ignores the parent's text-align, so it has to
     centre itself. The inner <img> carries an inline height, which is why
     it needs overriding here or it spills out of the tile. */
  width: 76px !important; height: 76px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important; box-sizing: border-box;
  display: flex !important; align-items: center; justify-content: center;
  background: var(--accent-soft); border-radius: 18px;
  filter: none !important; animation: none !important;
}
body.bl2 .park-logo img {
  height: 48px !important; width: auto !important;
  filter: none !important;
}

/* mini games */
body.bl2 .minigame-grid { gap: 12px !important; }
body.bl2 .minigame-card {
  padding: 18px 16px !important;
  text-align: left !important;
  transform: none !important;
}
body.bl2 .minigame-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--line-2) !important;
  box-shadow: var(--sh-2) !important;
}
body.bl2 .mg-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px !important;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: 12px !important;
  animation: none !important;
}
body.bl2 .mg-name { color: var(--ink) !important; font-weight: 650 !important; font-size: .95rem !important; }
body.bl2 .mg-desc { color: var(--muted) !important; font-size: .82rem !important; line-height: 1.5 !important; }
body.bl2 .mg-best { color: var(--accent) !important; font-size: .74rem !important; font-weight: 600 !important; }

/* shop + rewards + customize tiles */
body.bl2 .shop-grid > *,
body.bl2 .avatar-options > *,
body.bl2 .reward-card,
body.bl2 .badge-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.bl2 .shop-grid > *:hover,
body.bl2 .avatar-options > *:hover { border-color: var(--accent) !important; }
body.bl2 .avatar-options > *.selected,
body.bl2 .shop-grid > *.selected {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* arena */
body.bl2 .arena-panel,
body.bl2 .mode-card,
body.bl2 .arena-badge,
body.bl2 .summary-stat {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-1) !important;
  color: var(--ink) !important;
  backdrop-filter: none !important;
}
body.bl2 .mc-icon,
body.bl2 .ab-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px !important;
  background: var(--accent-soft) !important; color: var(--accent) !important;
  animation: none !important;
}
body.bl2 .mc-title, body.bl2 .ab-name,
body.bl2 .arena-lb-title, body.bl2 .dc-title {
  color: var(--ink) !important;
  font-weight: 650 !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
}
body.bl2 .mc-desc, body.bl2 .ab-desc { color: var(--muted) !important; font-size: .84rem !important; }
body.bl2 .mc-tag, body.bl2 .status-tag {
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
body.bl2 .battle-btn,
body.bl2 .ult-label {
  background: var(--accent) !important;
  background-image: none !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}
body.bl2 .s-val { color: var(--ink) !important; font-weight: 700 !important; }

/* music + notifications panels */
body.bl2 .music-player,
body.bl2 .notif-panel {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-2) !important;
  backdrop-filter: none !important;
  color: var(--ink) !important;
}
body.bl2 .music-btn {
  background: var(--surface-2) !important;
  border: 0 !important;
  color: var(--ink-2) !important;
  border-radius: var(--pill) !important;
}
body.bl2 .music-label { color: var(--muted) !important; }
body.bl2 .notif-header { color: var(--ink) !important; font-weight: 650 !important; }

/* --------------------------------------------------------------------------
   11. Zone pages (Number Ninja, Word Wizard, Science Lab, World Quest,
       Art Atelier, Code Cave, Study Forest, Rubik's Cube, Fix-It Lab)
   -------------------------------------------------------------------------- */
body.bl2 .top-bar {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 14px 0 !important;
}
body.bl2 .brand,
body.bl2 .brand-name { color: var(--ink) !important; font-weight: 700 !important; text-shadow: none !important; }
body.bl2 .brand-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px !important;
  background: var(--accent-soft) !important; color: var(--accent) !important;
  animation: none !important;
}

/* HUD pills: lives / streak / score */
body.bl2 .pill,
body.bl2 .stat-pill,
body.bl2 .player-stats > * {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: var(--pill) !important;
  padding: 6px 13px !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  box-shadow: var(--sh-1) !important;
  text-shadow: none !important;
  animation: none !important;
}
body.bl2 .pill.score, body.bl2 .pill.streak { color: var(--accent-ink) !important; }
body.bl2 .pill.lives { color: var(--rose) !important; }

/* screens + headings */
body.bl2 .screen { background: none !important; }
body.bl2 .screen-title,
body.bl2 .title {
  color: var(--ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
}
body.bl2 .screen-subtitle,
body.bl2 .tagline,
body.bl2 .subline,
body.bl2 .desc { color: var(--muted) !important; }

/* topic pickers */
body.bl2 .topic-grid { gap: 12px !important; }
body.bl2 .topic-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 20px 18px !important;
  box-shadow: var(--sh-1) !important;
  backdrop-filter: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  animation: none !important;
}
body.bl2 .topic-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--line-2) !important;
  box-shadow: var(--sh-2) !important;
}
body.bl2 .topic-icon {
  width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px !important;
  background: var(--accent-soft) !important; color: var(--accent) !important;
  margin-bottom: 12px !important;
  animation: none !important;
}
body.bl2 .topic-name { color: var(--ink) !important; font-weight: 650 !important; font-size: 1rem !important; }
body.bl2 .topic-desc { color: var(--muted) !important; font-size: .85rem !important; line-height: 1.5 !important; }

/* question + answers */
body.bl2 .question-card,
body.bl2 .qz-box,
body.bl2 .tip-box,
body.bl2 .algo-box,
body.bl2 .game-over {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-1) !important;
  backdrop-filter: none !important;
  color: var(--ink) !important;
}
body.bl2 .q-text,
body.bl2 .qz-q { color: var(--ink) !important; font-weight: 600 !important; text-shadow: none !important; }
body.bl2 .choice-btn,
body.bl2 .qz-btn,
body.bl2 .time-btn,
body.bl2 .secondary {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 550 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: border-color .15s ease, background .15s ease !important;
}
body.bl2 .choice-btn:hover:not(:disabled),
body.bl2 .qz-btn:hover,
body.bl2 .time-btn:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
body.bl2 .choice-btn.correct {
  border-color: var(--green) !important;
  background: color-mix(in srgb, var(--green) 12%, var(--surface)) !important;
  color: var(--green) !important;
}
body.bl2 .choice-btn.wrong {
  border-color: var(--rose) !important;
  background: color-mix(in srgb, var(--rose) 12%, var(--surface)) !important;
  color: var(--rose) !important;
}
body.bl2 .time-btn.active,
body.bl2 .time-btn.selected { border-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--accent-ink) !important; }

body.bl2 .primary-btn,
body.bl2 .btn-start,
body.bl2 .start-btn,
body.bl2 .lvl-go,
body.bl2 .btn.primary {
  background: var(--accent) !important;
  background-image: none !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}
body.bl2 .primary-btn:hover,
body.bl2 .start-btn:hover { background: var(--accent-ink) !important; }

/* timer + progress */
body.bl2 .timer-bar,
body.bl2 .qz-prog { background: var(--surface-2) !important; border: 0 !important; border-radius: var(--pill) !important; overflow: hidden; }
body.bl2 .timer-fill { background: var(--accent) !important; background-image: none !important; box-shadow: none !important; }

/* feedback + results */
body.bl2 .feedback { color: var(--ink-2) !important; text-shadow: none !important; }
body.bl2 .final-score { color: var(--ink) !important; text-shadow: none !important; background: none !important; -webkit-text-fill-color: var(--ink) !important; }
body.bl2 .final-label { color: var(--muted) !important; }
body.bl2 .highlight { color: var(--accent-ink) !important; background: var(--accent-soft) !important; padding: 0 4px; border-radius: 5px; }
body.bl2 .lesson-text { color: var(--ink-2) !important; line-height: 1.65 !important; }
body.bl2 .algo-label { color: var(--muted) !important; }

/* number-ninja landing features + dojo cards */
body.bl2 .feature,
body.bl2 .dojo-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-1) !important;
}
body.bl2 .dojo-name { color: var(--ink) !important; font-weight: 650 !important; }
body.bl2 .dojo-desc { color: var(--muted) !important; }
body.bl2 .dojo-difficulty {
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
}

/* study forest */
body.bl2 .tree-area,
body.bl2 .empty-forest {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  color: var(--muted) !important;
}
body.bl2 .stat-value { color: var(--ink) !important; }
body.bl2 .stat-label { color: var(--muted) !important; }

/* --------------------------------------------------------------------------
   12. Rollout fixes
   -------------------------------------------------------------------------- */

/* The floating "Back to Brainland" link is the only way out of some zones
   (Number Ninja's .back buttons just move between its own screens), so it
   always stays visible. The media query below keeps it clear of the top chips. */

/* number-ninja landing feature tiles */
body.bl2 .feature .icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  margin-bottom: 12px !important;
  animation: none !important;
}
body.bl2 .feature .title { color: var(--ink) !important; font-weight: 650 !important; font-size: 1rem !important; }
body.bl2 .feature .desc  { color: var(--muted) !important; font-size: .86rem !important; }

/* keep icon tiles square whatever the old CSS did to them */
body.bl2 .topic-icon,
body.bl2 .mg-icon,
body.bl2 .mc-icon,
body.bl2 .ab-icon,
body.bl2 .wn-item-icon,
body.bl2 .plan-icon,
body.bl2 .area-icon,
body.bl2 .zone-icon,
body.bl2 .zc-icon,
body.bl2 .step-icon,
body.bl2 .feature-icon { line-height: 1 !important; text-shadow: none !important; filter: none !important; }

body.bl2 .plan-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 2px;
  font-size: 19px !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
body.bl2 .wn-item-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* arena + games tiles keep their own hue accents subtle */
body.bl2 .ab-icon, body.bl2 .mc-icon { flex: none; }

/* more legacy inline colours (sub-page section headings) */
body.bl2 .wrap [style*="color:#54D0E3"],
body.bl2 .wrap [style*="color:#54d0e3"],
body.bl2 .wrap [style*="color:#FFD700"],
body.bl2 .wrap [style*="color:#ffd60a"],
body.bl2 .wrap [style*="color:#ff70a6"],
body.bl2 .wrap [style*="color:#8b5cf6"],
body.bl2 .wrap [style*="color:#39A0F6"] { color: var(--ink) !important; }

/* the floating "Back to Brainland" chip must not collide with the top pills */

/* --------------------------------------------------------------------------
   13. Per-page leftovers
   -------------------------------------------------------------------------- */

/* the fixed back chip needs room above the first block of content */

/* Arena: same daylight as the rest of the site, with a warm hint */
body.bl2 .arena-bg {
  background: linear-gradient(180deg, #FFF6EC 0%, var(--canvas) 46%) !important;
}
body.bl2 .arena-bg [style*="color:#fff"],
body.bl2 .arena-bg [style*="color:#FFF"],
body.bl2 .arena-bg [style*="color:rgba(255,255,255"],
body.bl2 .arena-bg [style*="color:rgba(255, 255, 255"],
body.bl2 .arena-bg [style*="color:#FFD700"],
body.bl2 .arena-bg [style*="color:#ffd60a"] { color: var(--ink-2) !important; }
body.bl2 .my-stats-bar {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  color: var(--ink-2) !important;
  box-shadow: var(--sh-1) !important;
}
body.bl2 .gate-text { color: var(--muted) !important; letter-spacing: .3em !important; }
body.bl2 .arena-gate, body.bl2 .gate-arch { opacity: .45 !important; }

/* Study Forest */
body.bl2 .timer-time {
  color: var(--ink) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
body.bl2 .timer-label,
body.bl2 .forest-title { color: var(--muted) !important; letter-spacing: .12em !important; text-transform: uppercase; }
body.bl2 .stats-bar,
body.bl2 .forest-stats {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  color: var(--ink) !important;
  box-shadow: var(--sh-1) !important;
}

/* Fix-It Lab */
body.bl2 .coach {
  background: var(--accent-soft) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  color: var(--ink) !important;
}
body.bl2 .quizbtn {
  background: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.bl2 .clear { color: var(--muted) !important; }

/* Number Ninja level cards */
body.bl2 .nn-lv-label { color: var(--accent) !important; font-weight: 700 !important; }
body.bl2 .nn-lv-sub { color: var(--ink) !important; font-weight: 600 !important; }

/* small inline-styled buttons scattered through the sub-pages */
body.bl2 .wrap button[style*="background:#"],
body.bl2 .wrap button[style*="background: #"] {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.bl2 .wrap button[style*="background:#"]:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* decorative confetti / sparkle layers stay out of the way */
body.bl2 .sparkle,
body.bl2 .bl-sparkle,
body.bl2 .floating-star,
body.bl2 .bg-stars,
body.bl2 .star-decor { opacity: .25 !important; }
body.bl2 .bl-glow { box-shadow: none !important; animation: none !important; }

/* Arena, continued */
body.bl2 .daily-challenge {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-1) !important;
}
body.bl2 .dc-desc { color: var(--muted) !important; }
body.bl2 .dc-timer, body.bl2 .dc-reset { color: var(--accent-ink) !important; font-weight: 600 !important; }
body.bl2 .dc-badge {
  background: var(--accent-soft) !important;
  background-image: none !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  text-shadow: none !important;
}
body.bl2 .arena-title { padding-top: 24px !important; }
body.bl2 .arena-sub, body.bl2 .arena-title p { color: var(--muted) !important; }

/* Study Forest, continued */
body.bl2 .stats {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-1) !important;
  color: var(--ink) !important;
}
body.bl2 .stats .stat-value,
body.bl2 .stats [class*="value"] { color: var(--ink) !important; }


/* --------------------------------------------------------------------------
   14. Chatbot (Sparky) landing + shared button variants
   -------------------------------------------------------------------------- */
body.bl2 h1 .gradient,
body.bl2 h2 .gradient,
body.bl2 .gradient {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}
body.bl2 .btn-ghost,
body.bl2 .btn-secondary,
body.bl2 button.secondary {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.bl2 .btn-ghost:hover,
body.bl2 .btn-secondary:hover { border-color: var(--accent) !important; color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
body.bl2 .btn-primary {
  background: var(--accent) !important;
  background-image: none !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* section titles that carry a legacy accent colour of their own */
body.bl2 .minigames-title,
body.bl2 .shop-title,
body.bl2 .rewards-title,
body.bl2 .social-title,
body.bl2 .tools-title,
body.bl2 .fun-title,
body.bl2 .achievements-title,
body.bl2 .arena-lb-title {
  color: var(--ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   15. Homepage: fewer boxes
   Only the zone tiles stay as cards — they are the things you click.
   Everything else sits straight on the page, separated by space and hairlines.
   -------------------------------------------------------------------------- */

/* stats: numbers on the page, not in a panel */
body.bl2 .stats-row {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 40px auto 0 !important;
  max-width: 640px;
}
body.bl2 .stat-item { border: 0 !important; }
body.bl2 .stat-item:nth-child(-n+2) { border-bottom: 0 !important; padding-bottom: 0 !important; }

/* how it works + features: no frames */
body.bl2 .step-card,
body.bl2 .feature,
body.bl2.light-mode .feature {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 4px 0 !important;
}
body.bl2 .how-it-works,
body.bl2 .features { gap: 32px 28px !important; }

/* reviews: quotes, not panels — a hairline on the left instead of a box */
body.bl2 .review-card,
body.bl2.light-mode .review-card {
  background: none !important;
  border: 0 !important;
  border-left: 2px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 4px 18px !important;
}
body.bl2 .reviews-grid { gap: 28px 32px !important; }

/* FAQ: a plain list with hairlines */
body.bl2 .faq-section {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* zone tiles: still cards, just lighter */
body.bl2 .zone,
body.bl2.light-mode .zone,
body.bl2 .zone-carousel-card {
  box-shadow: none !important;
}
body.bl2 .zone:hover { box-shadow: var(--sh-2) !important; }

/* a little more air between sections now that the frames are gone */
body.bl2 .container > h2 { margin-top: 72px !important; }
@media (max-width: 720px) {
  body.bl2 .container > h2 { margin-top: 52px !important; }
  body.bl2 .how-it-works, body.bl2 .features { gap: 26px !important; }
}

/* --------------------------------------------------------------------------
   16. Admin dashboard
   -------------------------------------------------------------------------- */
body.bl2.admin::before,
body.bl2.admin::after { background: none !important; content: none !important; }

body.bl2.admin { background: var(--canvas) !important; }

body.bl2.admin .card,
body.bl2.admin .section,
body.bl2.admin .bl-chart-card,
body.bl2.admin .table-wrap,
body.bl2.admin .stat-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-1) !important;
  backdrop-filter: none !important;
  color: var(--ink) !important;
}

/* KPI tiles */
body.bl2.admin .stats-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
body.bl2.admin .stat-card { padding: 16px 16px 14px !important; text-align: left !important; }
body.bl2.admin .stat-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px !important;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: 10px !important;
}
body.bl2.admin .stat-num {
  color: var(--ink) !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
body.bl2.admin .stat-label {
  color: var(--muted) !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.bl2.admin .stat-sub { font-size: .72rem !important; font-weight: 600 !important; }
body.bl2.admin .stat-sub.green, body.bl2.admin .green { color: var(--green) !important; }
body.bl2.admin .stat-sub.red, body.bl2.admin .red { color: var(--rose) !important; }

/* tabs */
body.bl2.admin .nav-tab {
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  padding: 10px 2px !important;
  margin-right: 22px !important;
  box-shadow: none !important;
}
body.bl2.admin .nav-tab.active {
  color: var(--ink) !important;
  border-bottom-color: var(--accent) !important;
  background: none !important;
}

/* chips, buttons, inputs */
body.bl2.admin .filter-chip,
body.bl2.admin .preset-btn,
body.bl2.admin .refresh-btn,
body.bl2.admin .action-btn.ghost {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.bl2.admin .filter-chip.active,
body.bl2.admin .preset-btn.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}
body.bl2.admin .action-btn,
body.bl2.admin .login-btn {
  background: var(--accent) !important;
  background-image: none !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.bl2.admin .search-input,
body.bl2.admin input, body.bl2.admin select, body.bl2.admin textarea {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font) !important;
}
body.bl2.admin .search-input:focus,
body.bl2.admin input:focus, body.bl2.admin select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-ring) !important;
  outline: none !important;
}

/* tables */
body.bl2.admin table { border-collapse: collapse !important; width: 100%; }
body.bl2.admin th {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  font-size: .72rem !important;
  font-weight: 650 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 12px !important;
  text-align: left !important;
}
body.bl2.admin td {
  color: var(--ink-2) !important;
  font-size: .84rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 11px 12px !important;
  background: none !important;
}
body.bl2.admin tr:hover td { background: var(--surface-2) !important; }

/* badges */
body.bl2.admin .badge {
  background: var(--surface-2) !important;
  background-image: none !important;
  color: var(--ink-2) !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  font-size: .7rem !important;
  font-weight: 650 !important;
  padding: 3px 9px !important;
  text-shadow: none !important;
}
body.bl2.admin .badge-pro { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
body.bl2.admin .badge.green { background: color-mix(in srgb, var(--green) 14%, var(--surface)) !important; color: var(--green) !important; }

/* headings + charts */
body.bl2.admin h1, body.bl2.admin h2, body.bl2.admin h3,
body.bl2.admin .chart-title, body.bl2.admin .dash-section-header {
  color: var(--ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
body.bl2.admin .dsh-icon {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft) !important; color: var(--accent) !important;
  font-size: 15px !important;
}
body.bl2.admin .empty-msg { color: var(--muted) !important; }
body.bl2.admin .chart-container { background: none !important; border: 0 !important; }

/* the "show all questions" toggle under the FAQ */
body.bl2 .faq-more-btn {
  display: block;
  margin: 22px auto 0;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: var(--pill) !important;
  padding: 11px 22px !important;
  font: 600 .86rem var(--font) !important;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
body.bl2 .faq-more-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* the tab bar is a phone pattern — on a laptop the top nav already does the job */
@media (min-width: 900px) {
  body.bl2 #bottomNav { display: none !important; }
  body.bl2 footer { padding-bottom: 40px !important; }
  body.bl2 .wrap { padding-bottom: 40px !important; }
}


/* --------------------------------------------------------------------------
   17. One top bar
   Every floating chip now lives in here, so the top of the page reads as a
   single row instead of eight things pinned to four corners.
   -------------------------------------------------------------------------- */
body.bl2 #blTopBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font);
}
body.bl2.dark-mode #blTopBar { background: rgba(20, 27, 43, .9); }

body.bl2 #blTopBar .bb-left  { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
body.bl2 #blTopBar .bb-mid   { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; justify-content: center; min-width: 0; }
body.bl2 #blTopBar .bb-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Everything that used to pin itself to a corner now just sits in the row.
   The music chooser is the one exception — it is a drop-down, so it has to
   keep its positioning or it unfolds into the bar as a flat strip. */
body.bl2 #blTopBar .bb-item,
body.bl2 #blTopBar .bb-item *:not(.bl-music-menu) { position: static !important; }
body.bl2 #blTopBar .bb-item {
  margin: 0 !important;
  inset: auto !important;
  transform: none !important;
  box-shadow: none !important;
  animation: none !important;
  max-width: none !important;
}
body.bl2 #blTopBar .bb-item,
body.bl2 #blTopBar .bb-brand {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--pill) !important;
  color: var(--ink-2) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
body.bl2 #blTopBar .bb-brand { color: var(--ink) !important; }
body.bl2 #blTopBar .bb-brand:hover,
body.bl2 #blTopBar .bb-item:hover { border-color: var(--line-2) !important; }

/* the sign-in chip is the one call to action up here */
body.bl2 #blTopBar #blPillBarRight a [data-chip] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* overflow menu */
body.bl2 #blTopBar .bb-menu-wrap { position: relative !important; }
body.bl2 #blTopBar .bb-menu-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
body.bl2 #blTopBar .bb-menu-btn:hover { color: var(--accent); border-color: var(--accent); }
body.bl2 #blTopBar .bb-menu {
  position: absolute !important;
  top: 40px; right: 0;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
}
body.bl2 #blTopBar .bb-menu .bb-item { width: 100%; justify-content: center; }

/* make room for the bar */
body.bl2.has-blbar { padding-top: 62px !important; }
body.bl2.has-blbar .site-nav { top: 54px !important; }
body.bl2.has-blbar .hero-wrapper { padding-top: 52px !important; }

@media (max-width: 560px) {
  body.bl2 #blTopBar { gap: 6px; padding: 6px 10px; }
  body.bl2 #blTopBar .bb-item, body.bl2 #blTopBar .bb-brand { font-size: .74rem !important; padding: 5px 10px !important; }
  body.bl2 #blTopBar .bb-brand span { display: none; }
  body.bl2 #blTopBar .bb-mid { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  body.bl2 #blTopBar .bb-mid::-webkit-scrollbar { display: none; }
}


/* the bar scrolls sideways rather than spilling off a small screen */
body.bl2 #blTopBar {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
body.bl2 #blTopBar::-webkit-scrollbar { display: none; }
body.bl2 #blTopBar .bb-left { position: sticky; left: 0; z-index: 2; }

/* the language / level pickers are <select>s — keep their text visible */
body.bl2 #blTopBar select.bb-item,
body.bl2 #blTopBar .bb-item select {
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  font: 600 .8rem var(--font) !important;
  padding: 6px 28px 6px 13px !important;
  min-width: 112px;   /* room for 'English' plus the chevron */
  width: auto !important;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2368758C' stroke-width='2.5' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
}

/* a <select> must not be display:flex — Chromium renders it blank */
body.bl2 #blTopBar select.bb-item { display: inline-block !important; line-height: 1.2 !important; }

/* the older plan/sign-in widget duplicates the newer one — keep one */
body.bl2 #blTopBar #blPillBarRight ~ #blBar { display: none !important; }

/* --------------------------------------------------------------------------
   18. Zone level picker (zone-levels.js) — the first thing a child sees
   when entering a zone, so it should look like the rest of the site.
   -------------------------------------------------------------------------- */
body.bl2 #blZLoverlay {
  background: rgba(14, 23, 38, .45) !important;
  backdrop-filter: blur(3px);
}
body.bl2 #blZLoverlay > div:first-child {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-3) !important;
  color: var(--ink) !important;
}
body.bl2 #blZLoverlay h2 {
  color: var(--ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
  font-size: 1.3rem !important;
  margin: 0 0 6px !important;
}
body.bl2 #blZLoverlay .sub { color: var(--muted) !important; font-size: .86rem !important; }
body.bl2 #blZLoverlay .blZL-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease !important;
}
body.bl2 #blZLoverlay .blZL-card:hover { border-color: var(--accent) !important; }
body.bl2 #blZLoverlay .blZL-card.sel,
body.bl2 #blZLoverlay .blZL-card.selected,
body.bl2 #blZLoverlay .blZL-card.active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
body.bl2 #blZLoverlay .blZL-g { color: var(--ink) !important; font-weight: 650 !important; }
body.bl2 #blZLoverlay .blZL-t { color: var(--muted) !important; font-size: .78rem !important; }
body.bl2 #blZLoverlay button {
  background: var(--accent) !important;
  background-image: none !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   19. One bar, properly: the bottom tab bar folds into the top one
   -------------------------------------------------------------------------- */
body.bl2 #blTopBar .bb-nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
}
body.bl2 #blTopBar .bb-nav {
  flex-direction: row !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border: 1px solid transparent !important;
  background: none !important;
  color: var(--muted) !important;
  font-size: .78rem !important;
  min-width: 0 !important;
}
body.bl2 #blTopBar .bb-nav:hover { color: var(--accent) !important; background: var(--accent-soft) !important; }
body.bl2 #blTopBar .bb-nav.active { color: var(--accent) !important; background: var(--accent-soft) !important; }
body.bl2 #blTopBar .bb-nav .bn-icon { font-size: 17px !important; }
body.bl2 #blTopBar .bb-nav .bn-label { font-size: .78rem !important; font-weight: 600 !important; }

/* nothing pinned to the bottom any more */
body.bl2.no-bottomnav #bottomNav { display: none !important; }
body.bl2.no-bottomnav .wrap,
body.bl2.no-bottomnav footer { padding-bottom: 40px !important; }

@media (max-width: 720px) {
  /* icons only — the labels would push the bar off the screen */
  body.bl2 #blTopBar .bb-nav .bn-label { display: none !important; }
  body.bl2 #blTopBar .bb-nav { padding: 6px 8px !important; }
}

/* the thin progress line across the top of the homepage */
body.bl2 .scroll-progress,
body.bl2 #scrollProgress { display: none !important; }

/* no rule under the hero — the change in background is enough separation */
body.bl2 .hero-wrapper { border-bottom: 0 !important; }

/* the bar is one line, always — overflow goes to the ⋯ menu, never a second row */
body.bl2 #blTopBar {
  flex-wrap: nowrap !important;
  overflow: visible !important;
  min-height: 52px;
}
body.bl2 #blTopBar > * { min-width: 0; }
body.bl2 #blTopBar .bb-mid { overflow: hidden; }

/* no hairline under the top navigation on the marketing pages either */
body.bl2 .site-nav,
body.bl2 .site-nav.scrolled,
body.bl2.light-mode .site-nav { border-bottom: 0 !important; }

/* the ⋯ menu stays shut until it's clicked (display:flex was beating [hidden]) */
body.bl2 #blTopBar .bb-menu[hidden] { display: none !important; }

/* the Sparky circle, once it joins the bar, looks like the other tabs */
body.bl2 #blTopBar .bb-sparky {
  width: auto !important;
  height: auto !important;
  border-radius: var(--pill) !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 17px !important;
  padding: 6px 10px !important;
  bottom: auto !important;
  right: auto !important;
}

/* --------------------------------------------------------------------------
   20. Mini-game modal (now also home to the arcade games)
   -------------------------------------------------------------------------- */
body.bl2 #mgModal { background: rgba(14, 23, 38, .45) !important; }
body.bl2 #mgModal > div,
body.bl2 .mg-box {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-3) !important;
  color: var(--ink) !important;
}
body.bl2 #mgTitle {
  color: var(--ink) !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
}
body.bl2 #mgTimer {
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
  text-shadow: none !important;
  font-size: 1.6rem !important;
}
body.bl2 #mgScore { color: var(--muted) !important; font-weight: 600 !important; text-shadow: none !important; }
body.bl2 .mg-btn {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.bl2 .mg-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; transform: none !important; }
body.bl2 .mg-btn.start {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
body.bl2 .mem-tile {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--r-sm) !important;
}
body.bl2 .mem-tile.matched { background: color-mix(in srgb, var(--green) 14%, var(--surface)) !important; }

/* --------------------------------------------------------------------------
   21. Arcade row on the Learning Park hub
   The three arcade games launch straight from the hub, so a child doesn't
   have to go looking in Mini Games for them. Same card language as the
   zone cards, just smaller, since these are a break, not a lesson.
   -------------------------------------------------------------------------- */
body.bl2 .hub-arcade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
body.bl2 .hub-game {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 14px 12px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.bl2 .hub-game:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
body.bl2 .hub-game-ico {
  display: inline-flex;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border-radius: 10px;
  margin-bottom: 6px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
body.bl2 .hub-game-ico .bl-ico { width: 19px; height: 19px; }
body.bl2 .hub-game-name {
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
body.bl2 .hub-game-desc { font-size: .76rem; color: var(--muted); }
body.bl2 .hub-game-best {
  font-size: .7rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
  min-height: .9em;
}
body.bl2 .hub-arcade-more {
  display: inline-block;
  margin-top: 12px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
body.bl2 .hub-arcade-more:hover { color: var(--accent); }
@media (max-width: 560px) {
  /* On a phone, three across is too narrow and two leaves an orphan.
     One per row, laid out sideways, reads better and stays tappable. */
  body.bl2 .hub-arcade { grid-template-columns: 1fr; gap: 8px; }
  body.bl2 .hub-game {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas: 'ico name' 'ico desc' 'ico best';
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    padding: 12px 14px;
  }
  body.bl2 .hub-game-ico  { grid-area: ico; margin-bottom: 0; }
  body.bl2 .hub-game-name { grid-area: name; }
  body.bl2 .hub-game-desc { grid-area: desc; }
  body.bl2 .hub-game-best { grid-area: best; margin-top: 2px; min-height: 0; }
  body.bl2 .hub-game-best:empty { display: none; }
}

/* --------------------------------------------------------------------------
   22. Study music control (study-music.js)
   Lives in the one top bar: a play button and a volume slider, side by side.
   Small, quiet-looking, and out of the way — it is background music, not a
   feature to show off.
   -------------------------------------------------------------------------- */
body.bl2 .bl-music {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 4px 10px 4px 6px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--pill) !important;
  box-shadow: none !important;
}
body.bl2 .bl-music.bm-on {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
  background: var(--accent-soft) !important;
}
body.bl2 .bl-music-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s ease, background .15s ease;
}
body.bl2 .bl-music-btn:hover { color: var(--accent); background: var(--accent-soft); }
body.bl2 .bl-music.bm-on .bl-music-btn { color: var(--accent); }
body.bl2 .bl-music-btn .bl-ico { width: 16px; height: 16px; }

/* The slider, drawn the same way in every browser */
body.bl2 .bl-music-vol {
  -webkit-appearance: none; appearance: none;
  width: 66px; height: 4px;
  margin: 0; padding: 0;
  border: 0; border-radius: var(--pill);
  background: var(--line-2);
  cursor: pointer;
}
body.bl2 .bl-music-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px;
  border: 0; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
body.bl2 .bl-music-vol::-moz-range-thumb {
  width: 12px; height: 12px;
  border: 0; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
body.bl2 .bl-music-vol:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 3px; }

/* No bar on this page: sit where the bar would have been */
body.bl2 .bl-music-float {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 996;
  box-shadow: var(--sh-2) !important;
}

@media (max-width: 560px) {
  /* Narrower on a phone, but the slider stays: being able to turn it down
     is half the point of putting it up here. */
  body.bl2 .bl-music { padding: 3px 8px 3px 4px !important; gap: 5px; }
  body.bl2 .bl-music-vol { width: 46px; }
  body.bl2 .bl-music-btn { width: 24px; height: 24px; }
}

/* --------------------------------------------------------------------------
   23. Two blanks in the bar
   The hearts were ❤️ characters, so the emoji clear-out left empty spans and
   the chip rendered as a bare pill. They're drawn here instead, as a shape.
   The Sparky circle's icon carried brightness(2) for its old dark background
   and washed out to nothing once the bar went light.
   -------------------------------------------------------------------------- */
body.bl2 .blH {
  display: inline-block !important;
  width: 14px; height: 14px;
  font-size: 0 !important;
  background-color: var(--rose);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}
:root {
  --heart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.7-9.6-9.2C.7 8.4 2.4 4.8 5.9 4.1c2-.4 3.9.5 5 2 1.1-1.5 3-2.4 5-2 3.5.7 5.2 4.3 3.5 7.7C19.5 16.3 12 21 12 21Z' fill='black'/></svg>");
}
body.bl2 #blTopBar #blHeartChip {
  background: color-mix(in srgb, var(--rose) 10%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--rose) 35%, var(--line)) !important;
  color: var(--rose) !important;
  gap: 3px !important;
}
/* Nothing to show yet? Don't leave an empty pill sitting there. */
body.bl2 #blTopBar #blPillBar:not(:has(.blH)) { display: none !important; }

body.bl2 #blTopBar .bb-sparky {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  color: var(--ink-2) !important;
  font-size: .82rem !important;
  font-weight: 600;
}
body.bl2 #blTopBar .bb-sparky:hover { color: var(--accent) !important; }
body.bl2 #blTopBar .bb-sparky .bl-ico { width: 17px; height: 17px; }
body.bl2 #blTopBar .bb-sparky img { display: none !important; }


/* --------------------------------------------------------------------------
   24. Trims
   -------------------------------------------------------------------------- */

/* The XP box was given a border and rounded corners but no padding, so the
   text on the right ran out past the edge of its own box. */
body.bl2 .xp-bar-wrap { padding: 14px 16px !important; }
body.bl2 .xp-info {
  gap: 12px;
  align-items: baseline;
  font-size: .78rem !important;
}
body.bl2 .xp-info > span:last-child { white-space: nowrap; flex: 0 0 auto; }
body.bl2 .xp-level { flex: 1 1 auto; min-width: 0; }

/* Section eyebrows sat hard against the window edge while everything else on
   the page — logo, title, tagline, cards — is centred, so they read as a
   mistake. Centred, they line up with the rest. */
body.bl2 .section-divider { text-align: center !important; }

/* The clock is gone from the bar; hide any copy still in the markup. */
body.bl2 #liveClock, body.bl2 .live-clock { display: none !important; }


/* --------------------------------------------------------------------------
   25. Choosing a piece
   The music control carries the name of what's playing; tapping the name
   opens the list. Anything out of copyright can live in that list, which is
   why it's all Pachelbel, Bach, Beethoven and Satie.
   -------------------------------------------------------------------------- */
body.bl2 .bl-music-name {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
body.bl2 .bl-music.bm-on .bl-music-name { color: var(--accent); }
body.bl2 .bl-music-name:hover { color: var(--accent); }

body.bl2 .bl-music-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  min-width: 212px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--sh-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.bl2 .bl-music-menu[hidden] { display: none !important; }
body.bl2 .bl-music-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
body.bl2 .bl-music-opt:hover { background: var(--surface-2); }
body.bl2 .bl-music-opt.is-on { background: var(--accent-soft); }
body.bl2 .bl-music-opt-name { font-size: .8rem; font-weight: 600; color: var(--ink); }
body.bl2 .bl-music-opt.is-on .bl-music-opt-name { color: var(--accent); }
body.bl2 .bl-music-opt-by { font-size: .7rem; color: var(--muted); }

@media (max-width: 700px) {
  /* On a narrow bar the name is the first thing to go; the list is still
     one tap away on the note button's own menu. */
  body.bl2 .bl-music-name { display: none; }
}

/* --------------------------------------------------------------------------
   26. Sparky's chat keeps to its button
   A fixed 340px panel slid away from the button on narrower windows, because
   it had to be pushed left to fit on screen. Letting it shrink keeps it put.
   -------------------------------------------------------------------------- */
body.bl2 #sparkyChat {
  width: min(340px, calc(100vw - 20px)) !important;
  max-width: min(340px, calc(100vw - 20px)) !important;
}


/* --------------------------------------------------------------------------
   27. The music chooser really is a drop-down
   Stated last and with the id in the selector so nothing in the bar's own
   reset can flatten it again.
   -------------------------------------------------------------------------- */
body.bl2 #blTopBar .bl-music { position: relative !important; }
body.bl2 #blTopBar .bb-item .bl-music-menu,
body.bl2 .bl-music .bl-music-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2000 !important;
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
body.bl2 #blTopBar .bb-item .bl-music-menu[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   28. The Daily button
   Matches the other tabs in the bar. The dot marks a reward still waiting;
   it clears itself once the child claims it.
   -------------------------------------------------------------------------- */
body.bl2 #blTopBar .bb-daily {
  position: relative !important;      /* the dot hangs off this */
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
body.bl2 #blTopBar .bb-daily.has-new::after {
  content: '';
  position: absolute !important;
  top: 3px; right: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 2px var(--surface);
}

/* ==========================================================================
   2026.10 polish layer — richer colour, depth and motion (Oct 2026)
   Same calm layout; adds zone colour, soft depth and friendlier tiles.
   ========================================================================== */
body.bl2 { --zh: var(--accent); }
body.bl2 [data-zone="math"]      { --zh: var(--z-math); }
body.bl2 [data-zone="english"]   { --zh: var(--z-english); }
body.bl2 [data-zone="science"]   { --zh: var(--z-science); }
body.bl2 [data-zone="geography"] { --zh: var(--z-geo); }
body.bl2 [data-zone="art"]       { --zh: var(--z-art); }
body.bl2 [data-zone="code"]      { --zh: var(--z-code); }
body.bl2 [data-zone="focus"]     { --zh: var(--z-focus); }
body.bl2 [data-zone="review"]    { --zh: var(--z-review); }

/* soft colour wash behind every page */
html body.bl2,
html body.bl2.light-mode {
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(43, 92, 230, .09), transparent 60%),
    radial-gradient(760px 480px at 100% 4%, rgba(14, 155, 164, .08), transparent 60%),
    var(--canvas) !important;
  background-attachment: fixed !important;
}
html body.bl2.dark-mode {
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(109, 147, 255, .14), transparent 60%),
    var(--canvas) !important;
  background-attachment: fixed !important;
}

/* zone icon tiles: solid colour with a white glyph */
body.bl2 [data-zone] .zone-icon,
body.bl2 [data-zone] .area-icon,
body.bl2 [data-zone] .zc-icon,
body.bl2 [data-zone] .bl-tile {
  background: linear-gradient(140deg, var(--zh), color-mix(in srgb, var(--zh) 62%, #ffffff)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--zh) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
body.bl2 [data-zone] .zone-icon .bl-ico,
body.bl2 [data-zone] .area-icon .bl-ico,
body.bl2 [data-zone] .zc-icon .bl-ico,
body.bl2 [data-zone] .bl-tile .bl-ico { stroke: #ffffff !important; }

/* zone cards: colour edge + lift on hover */
body.bl2 .zone[data-zone],
body.bl2 .area-card[data-zone],
body.bl2 .zone-carousel-card[data-zone] {
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
body.bl2 .zone[data-zone]::before,
body.bl2 .area-card[data-zone]::before,
body.bl2 .zone-carousel-card[data-zone]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--zh), color-mix(in srgb, var(--zh) 45%, #ffffff));
  opacity: .9; pointer-events: none;
}
body.bl2 .zone[data-zone]:hover,
body.bl2 .area-card[data-zone]:hover,
body.bl2 .zone-carousel-card[data-zone]:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--zh) 35%, var(--line)) !important;
  box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--zh) 75%, transparent) !important;
}

/* feature / step tiles get a gentle tint */
body.bl2 .feature-icon,
body.bl2 .step-icon {
  background: linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--accent) 16%, var(--surface))) !important;
}

/* primary buttons: gradient + soft glow */
body.bl2 .cta,
body.bl2 .bl2-btn.primary,
body.bl2 .btn-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #0E9BA4)) !important;
  box-shadow: 0 12px 26px -14px var(--accent) !important;
}

/* the big numbers on the homepage */
body.bl2 .stat-number {
  background: linear-gradient(135deg, var(--accent), #0E9BA4) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  body.bl2 .zone[data-zone]:hover,
  body.bl2 .area-card[data-zone]:hover,
  body.bl2 .zone-carousel-card[data-zone]:hover { transform: none !important; }
}

/* zone hero icon: keep the line icon inside its tile */
body.bl2 div.logo {
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important; overflow: hidden;
  background: linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--accent) 18%, var(--surface))) !important;
  box-shadow: 0 14px 30px -18px var(--accent);
}
body.bl2 div.logo > svg.bl-ico { width: 100% !important; height: 100% !important; color: var(--accent); stroke: var(--accent); }