/* =========================================================
   Likkle Coders — v12 "Gloss" polish layer
   ---------------------------------------------------------
   Make the whole app shinier + livelier for kids WITHOUT
   touching layout or fighting existing colours.

   Technique: the glossy sheen is a pointer-events:none
   ::after OVERLAY, so it sits ON TOP of each element's own
   background (solid OR gradient) and never overwrites it.
   Everything else is hover-lift + warmer shadow + colour
   accents — all additive.

   EASY REVERT: delete the <link> for this file in index.html
   and its entry in service-worker.js SHELL.
   ========================================================= */

/* ---------- GLOSSY BUTTONS (sheen overlay, any colour) ----------
   Match v11's specificity (button.btn / a.btn) so we win, then
   float a white top-light / soft bottom-shade over the top. */
.btn, button.btn, a.btn{ position: relative; overflow: hidden; }
.btn::after, button.btn::after, a.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 45%, rgba(0,0,0,.05) 100%);
}
.btn:hover, button.btn:hover, a.btn:hover{ filter: saturate(1.08) brightness(1.03); }
/* ghost / light buttons: keep the sheen faint so text stays crisp */
.btn-light::after, .btn-ghost::after, .btn-secondary::after{
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 60%);
}

/* ---------- COLOURFUL EYEBROWS ----------
   Plain section kickers become a bright gradient. Any eyebrow
   that sets its OWN inline colour is left exactly as-is. */
.eyebrow{
  background: linear-gradient(90deg, #7C3AED, #1AA7C0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 800;
}
.eyebrow[style*="color"]{ -webkit-text-fill-color: initial; background: none; }

/* ---------- CARD / TILE LIFT + WARMER SHADOW ----------
   No background changes (so colours + gradients stay intact) —
   just a friendly raise on hover and a softer drop shadow so
   flat white cards feel less bland. */
.value-card, .form-card, .sx-card, .lit-card, .parent-card,
.tp-stat-card, .ob-tier-card, .ob-rate-card, .ob-welcome-card,
.lc-acad-card, .bh-act, .tots-tile{
  transition: transform .15s ease, box-shadow .15s ease;
}
.value-card:hover, .sx-card:hover, .lit-card:hover, .parent-card:hover,
.lc-acad-card:hover, .bh-act:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(11,37,69,.16);
}
.tots-tile:hover{ transform: translateY(-4px) rotate(-1deg); box-shadow: 0 16px 32px rgba(11,37,69,.2); }
.tots-tile-icon, .bh-act-icon{ filter: drop-shadow(0 3px 5px rgba(11,37,69,.16)); }

/* ---------- PILLS & BADGES: subtle gloss overlay ---------- */
.pill, .badge{ position: relative; overflow: hidden; }
.pill::after, .badge::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
}

/* ---------- QUIZ / GAME option buttons: friendlier ---------- */
.eg-opt:hover, .pep-opt:hover{
  transform: translateY(-1px); box-shadow: 0 6px 14px rgba(11,37,69,.14);
}
.eg-opt, .pep-opt{ transition: transform .1s ease, box-shadow .1s ease; }

/* ---------- VIBRANT TECH ACADEMY / ARCADE CARDS ----------
   The plain white track cards were the blandest surface. Give each
   one its accent identity: a soft colour wash, a white icon badge
   with a glowing accent ring, a dark readable title, a colour "lessons"
   pill and a filled accent CTA that reads as tappable. Each card's
   colour comes from its own inline --accent, so all four differ. */
.lc-acad-card{
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent, #009B3A) 15%, #fff) 0%, #fff 60%);
  border: 2px solid color-mix(in oklab, var(--accent, #009B3A) 30%, transparent);
  border-top: 6px solid var(--accent, #009B3A);
  border-radius: 22px;
}
.lc-acad-card:hover{
  box-shadow: 0 16px 34px color-mix(in oklab, var(--accent, #009B3A) 28%, transparent);
}
.lc-acad-ico{
  width: 62px; height: 62px; font-size: 2.1rem; background: #fff;
  box-shadow: 0 5px 13px color-mix(in oklab, var(--accent, #009B3A) 38%, transparent),
              inset 0 0 0 3px color-mix(in oklab, var(--accent, #009B3A) 35%, #fff);
}
.lc-acad-card strong{ color: var(--m-ink) !important; font-size: 1.22rem; }
.lc-acad-sub{ color: #47576b; }
.lc-acad-meta{
  align-self: flex-start; display: inline-block; margin-top: 4px;
  padding: 3px 11px; border-radius: 999px;
  background: color-mix(in oklab, var(--accent, #009B3A) 16%, #fff);
  color: color-mix(in oklab, var(--accent, #009B3A) 78%, #000) !important;
}
.lc-acad-cta{
  align-self: flex-start; margin-top: 10px; padding: 8px 18px; border-radius: 999px;
  background: var(--accent, #009B3A); color: #fff !important;
  box-shadow: 0 4px 0 color-mix(in oklab, var(--accent, #009B3A) 55%, #000);
  transition: transform .1s ease;
}
.lc-acad-card:hover .lc-acad-cta{ transform: translateY(-1px); }

/* ---------- UNIFORM BIG "PICK YOUR PATHWAY" TABS ----------
   The pathway cards were white with only a thin border — the last bland
   "big tabs". Give them the SAME visual language as the Academy cards:
   an accent colour wash, a thick accent top border and a bold dark title,
   reusing each variant's own palette colour so the whole app matches. */
.bh-prog-pill-purple{ --pp: var(--bh-purple); }
.bh-prog-pill-pink  { --pp: var(--bh-pink-dk); }
.bh-prog-pill-cyan  { --pp: var(--bh-cyan-dk); }
.bh-prog-pill-lime  { --pp: var(--bh-lime-dk); }
.bh-prog-pill{
  background: linear-gradient(180deg, color-mix(in oklab, var(--pp, #7C3AED) 14%, #fff) 0%, #fff 62%) !important;
  border: 2px solid color-mix(in oklab, var(--pp, #7C3AED) 30%, transparent) !important;
  border-top: 6px solid var(--pp, #7C3AED) !important;
  border-radius: 22px;
}
.bh-prog-pill h4{ color: var(--bh-ink); font-size: 1.18rem; font-weight: 800; }
.bh-prog-pill:hover{ box-shadow: 0 16px 32px color-mix(in oklab, var(--pp, #7C3AED) 26%, transparent); }

@media (prefers-reduced-motion: reduce){
  .value-card, .lc-acad-card, .tots-tile, .bh-act, .eg-opt, .pep-opt{ transition: none; }
  .value-card:hover, .lc-acad-card:hover, .tots-tile:hover, .bh-act:hover, .eg-opt:hover, .pep-opt:hover{ transform: none; }
}