/* =========================================================
   Likkle Coders — PRESTIGE LAYER (v477)
   Loads LAST. Perceived-quality polish only: no layout changes,
   no colour-meaning changes, nothing that can alter behaviour.
   ---------------------------------------------------------
   What actually makes an interface read as expensive is rarely more
   decoration — it is consistency and light. Four things are doing the
   work here:

   1. LAYERED SHADOWS. A single big blur reads as a sticker. Real
      depth needs a tight contact shadow, a mid shadow and a wide
      ambient one, all tinted toward the brand navy rather than black.
   2. A TOP HIGHLIGHT on raised surfaces. One hairline of light along
      the upper edge is what separates a moulded surface from a flat
      rectangle, and it costs nothing.
   3. OPTICAL TYPOGRAPHY. Big headings want negative tracking; small
      uppercase labels want positive. Getting that backwards — which
      is the default everywhere — is the single most common reason
      type looks amateur.
   4. ONE EASING CURVE. Motion that all moves the same way feels
      engineered. Mixed easings feel accidental.

   EASY REVERT: remove the one <link> in index.html. Nothing else
   depends on this file.
   ========================================================= */

:root{
  /* a shared elevation scale — tinted navy, never pure black */
  --pz-e1: 0 1px 2px rgba(11,37,69,.07), 0 2px 6px rgba(11,37,69,.06);
  --pz-e2: 0 1px 2px rgba(11,37,69,.08), 0 4px 10px rgba(11,37,69,.08), 0 12px 26px rgba(11,37,69,.07);
  --pz-e3: 0 2px 4px rgba(11,37,69,.10), 0 8px 20px rgba(11,37,69,.10), 0 24px 48px rgba(11,37,69,.10);
  --pz-ring: 0 0 0 1px rgba(11,37,69,.055);
  --pz-ease: cubic-bezier(.22,.61,.36,1);
  --pz-quick: 160ms var(--pz-ease);
}

/* ---------------------------------------------------------
   1. SURFACES — depth instead of flat drop shadows
   --------------------------------------------------------- */
.card, .lesson-card, .game-card, .grade-card, .tile,
.bh-card, .mp-card, .lc-acad-card, .rs-hero,
.lab-lv, .lab-ex, .ca-lv, .ca-lesson, .rl-m, .al-act,
.fb-q, .fb-result, .lcb-tray, .lcb-script{
  box-shadow: var(--pz-ring), var(--pz-e2);
}
/* the hairline of light along the top edge */
.card, .lesson-card, .game-card, .grade-card,
.lc-acad-card, .lab-lv, .ca-lv, .rl-m, .al-act{
  position: relative;
}
.card::before, .lesson-card::before, .game-card::before,
.lc-acad-card::before, .lab-lv::before, .ca-lv::before,
.rl-m::before, .al-act::before{
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85) 18%, rgba(255,255,255,.85) 82%, transparent);
  pointer-events: none; opacity: .9;
}

/* lift on hover — small, fast, one curve */
.card:hover, .lesson-card:hover, .game-card:hover,
.lc-acad-card:hover, .lab-lv:hover, .ca-lv:hover, .rl-m:hover, .al-act:hover{
  box-shadow: var(--pz-ring), var(--pz-e3);
  transition: box-shadow var(--pz-quick), transform var(--pz-quick);
}

/* ---------------------------------------------------------
   2. BUTTONS — a specular sheen, not a flat fill
   --------------------------------------------------------- */
.btn, .bh-cta, .mp-btn, .lab-run, .lab-check, .fb-btn, .ca-next{
  position: relative; overflow: hidden;
  transition: transform var(--pz-quick), box-shadow var(--pz-quick), filter var(--pz-quick);
}
.btn::after, .bh-cta::after, .lab-run::after, .lab-check::after, .fb-btn::after{
  content: ''; position: absolute; inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events: none; border-radius: inherit;
}
.btn:hover:not(:disabled), .bh-cta:hover, .lab-run:hover, .lab-check:hover, .fb-btn:hover{
  filter: saturate(1.06) brightness(1.03);
}
.btn:active:not(:disabled), .bh-cta:active{ transform: translateY(1px); }

/* ---------------------------------------------------------
   3. TYPE — optical tracking. Big text tightens, small caps open.
   --------------------------------------------------------- */
h1, .lp-h1, .bh-hero h1, .rs-title{ letter-spacing: -.021em; }
h2{ letter-spacing: -.015em; }
h3, h4{ letter-spacing: -.008em; }
.eyebrow, .lc-acad-cta, .pz-caps,
.lab-kicker, .ca-kick, .rl-kick, .al-kick, .fb-kicker, .lcb-col h4{
  letter-spacing: .11em; font-variant-numeric: tabular-nums;
}
/* numbers in stat rows should not jitter as they count up */
.bh-stat b, .ca-score b, .ca-stats b, .rs-ring span, .lab-prog span{
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   4. DETAIL — focus, dividers, selection
   --------------------------------------------------------- */
:focus-visible{
  outline: 2px solid #3A86FF; outline-offset: 2px; border-radius: 4px;
}
hr, .divider{
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,37,69,.14), transparent);
}
::selection{ background: rgba(58,134,255,.22); }

/* images inside cards should share the card's corner, never square off */
.card img, .lesson-card img, .game-card img, .lc-acad-card img{
  border-radius: inherit;
}

/* ---------------------------------------------------------
   5. RESPECT THE USER
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .card, .lesson-card, .game-card, .lc-acad-card,
  .lab-lv, .ca-lv, .rl-m, .al-act, .btn, .bh-cta{ transition: none; }
  .btn:active:not(:disabled), .bh-cta:active{ transform: none; }
}
@media (prefers-color-scheme: dark){
  :root{
    --pz-e1: 0 1px 2px rgba(0,0,0,.4);
    --pz-e2: 0 2px 6px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.35);
    --pz-e3: 0 4px 12px rgba(0,0,0,.5), 0 24px 48px rgba(0,0,0,.4);
    --pz-ring: 0 0 0 1px rgba(255,255,255,.06);
  }
  /* the top highlight has to dim in dark mode or it reads as a seam */
  .card::before, .lesson-card::before, .game-card::before,
  .lc-acad-card::before, .lab-lv::before, .ca-lv::before,
  .rl-m::before, .al-act::before{
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 18%, rgba(255,255,255,.12) 82%, transparent);
  }
}

/* =========================================================
   v486 — FLOATING BUTTON STACK
   The accessibility button and Robi's daily tip were BOTH pinned
   bottom-left, and on desktop both resolved to bottom:1rem — so they
   sat directly on top of each other. Moved to the right and given one
   shared vertical rhythm, measured from the bottom so nothing can
   collide as items appear and disappear.

   Order bottom-up: toolbox (primary, most tapped), then
   accessibility, then the tip bubble. Each step is 58px — a 46px
   control plus a 12px gap.
   ========================================================= */
:root{
  --fab-gap: 12px;
  --fab-step: 58px;                    /* 46px control + gap */
  --fab-base: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* 1st slot — the toolbox keeps the anchor position it already had */
.lc-fab-toolbox{ right: 1rem !important; left: auto !important; }

/* 2nd slot — accessibility */
#lcA11yFab{
  left: auto !important;
  right: 1rem !important;
  bottom: calc(var(--fab-base) + var(--fab-step)) !important;
}

/* 3rd slot — Robi's daily tip. It is a wider bubble rather than a
   circle, so it is capped and allowed to shrink on small screens
   instead of pushing the layout sideways. */
.dyk-bubble{
  left: auto !important;
  right: 1rem !important;
  bottom: calc(var(--fab-base) + (var(--fab-step) * 2)) !important;
  max-width: min(280px, calc(100vw - 2rem));
}
@media (min-width: 760px){
  .dyk-bubble{ bottom: calc(var(--fab-base) + (var(--fab-step) * 2)) !important; }
}

/* On a phone the signed-in bottom tab bar occupies ~70px, so the whole
   stack lifts clear of it — otherwise the first slot covers a nav item. */
@media (max-width: 760px){
  :root{ --fab-base: calc(1rem + 70px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Likkle Jamaica hub (v486) ---------- */
.jm-hub{ max-width:760px; margin:0 auto; }
.jm-hero{
  display:flex; align-items:center; gap:16px; padding:22px 24px; margin-bottom:18px;
  border-radius:24px; color:#fff;
  background:linear-gradient(135deg,#046A38 0%,#0B8A47 55%,#F5C518 160%);
}
.jm-hero > div{ flex:1; min-width:0; }
.jm-kick{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.14em; color:#FFE38A; margin-bottom:4px; }
.jm-hero h1{ margin:0 0 6px; font-size:1.6rem; line-height:1.15; color:#fff; }
.jm-hero p{ margin:0; font-size:.92rem; line-height:1.5; color:#DCEFD5; }
.jm-hero-art{ font-size:3.2rem; line-height:1; flex:0 0 auto; }
.jm-acts{ display:grid; gap:10px; margin-bottom:22px; }
.jm-act{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:#fff; border:2px solid #E6ECF5; border-left:6px solid var(--jc,#14C76F);
  border-radius:16px; padding:14px 16px; transition:transform .15s var(--pz-ease);
}
.jm-act:hover{ transform:translateX(3px); }
.jm-act-ico{ font-size:1.9rem; flex:0 0 auto; }
.jm-act strong{ display:block; font-size:1.02rem; color:#0B2545; }
.jm-act small{ display:block; font-size:.85rem; color:#7A8AA0; margin-top:2px; }
.jm-h{ font-size:1.1rem; margin:0 4px 12px; color:#0B2545; }
@media (prefers-color-scheme: dark){
  .jm-act{ background:#1a2130; border-color:#2a3446; }
  .jm-act strong,.jm-h{ color:#e8edf7; }
}