/* =========================================================
   Likkle Coders — FOUNDATIONS BOOST (v454)
   Scoped to .fb-zone. Deliberately the SAME visual language as the
   rest of the app: a Grade 5 working at Grade 2 level must not be
   handed an infant-looking screen. Only the wording softens.
   ========================================================= */
.fb-zone{ --fb-ink:#1b2438; --fb-dim:#5b6880; --fb-line:#e6eaf2;
  --fb-green:#0f7a55; --fb-purple:#7c3aed; --fb-bad:#e11d48;
  max-width:640px; margin:0 auto; padding:8px 14px 60px; }
.fb-zone *{ box-sizing:border-box; }

.fb-head{ margin-bottom:16px; }
.fb-kicker{ font-size:.68rem; font-weight:800; letter-spacing:.16em; color:var(--fb-purple); }
.fb-zone h2{ margin:6px 0 10px; font-size:1.3rem; color:var(--fb-ink); }
.fb-bar{ height:8px; background:#eef1f7; border-radius:999px; overflow:hidden; }
.fb-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--fb-purple),#c026d3);
  border-radius:999px; transition:width .3s ease; }
.fb-sub{ margin:9px 0 0; font-size:.86rem; color:var(--fb-dim); line-height:1.5; }

.fb-q{ background:#fff; border:2px solid var(--fb-line); border-radius:20px; padding:20px; }
.fb-prompt{ display:flex; align-items:flex-start; gap:10px; margin:0 0 16px;
  font-size:1.15rem; font-weight:600; color:var(--fb-ink); line-height:1.5; }
/* generous tap target: some of these children have fine-motor difficulty too */
.fb-say{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:#faf7ff; color:var(--fb-purple); font-size:1.15rem; line-height:1; }
.fb-say:hover{ background:#f0e8ff; }

.fb-opts{ display:grid; gap:10px; }
.fb-opt{ width:100%; text-align:left; padding:16px 18px; border-radius:14px; cursor:pointer;
  background:#fff; border:2px solid var(--fb-line); color:var(--fb-ink);
  font-size:1.05rem; font-weight:600; font-family:inherit; min-height:56px; }
.fb-opt:hover:not(:disabled){ border-color:var(--fb-purple); background:#faf7ff; }
.fb-opt:disabled{ cursor:default; }
.fb-opt.is-right{ border-color:#34d399; background:#f0fdf7; }
.fb-opt.is-wrong{ border-color:var(--fb-bad); background:#fff1f3; }

.fb-fb:empty{ display:none; }
.fb-note{ margin-top:14px; padding:15px 17px; border-radius:14px; }
.fb-note.ok{ background:#f0fdf7; border:2px solid #34d399; }
.fb-note.no{ background:#fff8ea; border:2px solid #fbe0a8; }   /* amber, not red — a wrong answer is not a failure */
.fb-note b{ display:block; margin-bottom:5px; color:var(--fb-ink); }
.fb-note p{ margin:0 0 10px; font-size:.95rem; color:#4a5670; line-height:1.55; }

.fb-btn{ display:block; text-align:center; margin-top:12px; padding:15px;
  border:0; border-radius:14px; background:var(--fb-green); color:#fff;
  font-weight:800; font-size:1rem; text-decoration:none; cursor:pointer; font-family:inherit; }
.fb-btn:hover{ background:#0c6446; }
.fb-btn.ghost{ background:#eef1f7; color:#33405c; }
.fb-btn.small{ display:inline-block; margin:0; padding:10px 20px; font-size:.9rem; }

.fb-result{ background:#fff; border:2px solid var(--fb-line); border-radius:22px;
  padding:30px 24px; text-align:center; }
.fb-result-ico{ font-size:3rem; line-height:1; margin-bottom:10px; }
.fb-result-lvl{ font-size:1.15rem; color:var(--fb-ink); margin:6px 0 10px; }
.fb-result-note{ font-size:.95rem; color:var(--fb-dim); line-height:1.6; margin:0 0 18px; }

/* entry cards on the Foundations hub */
.lc-found-boost{ display:grid; gap:10px; margin:1rem 0 1.3rem; }
.lc-found-boost a{ display:flex; align-items:center; gap:14px; text-decoration:none;
  padding:16px 18px; border-radius:18px; color:#fff; transition:transform .15s ease; }
.lc-found-boost a:hover{ transform:translateY(-2px); }
.lc-found-boost .fb-place{ background:linear-gradient(135deg,#0f7a55,#12a06e); }
.lc-found-boost .fb-fix{ background:linear-gradient(135deg,#4c1d95,#7c3aed); }
.lc-found-boost .ico{ font-size:2rem; flex:0 0 auto; }
.lc-found-boost strong{ display:block; font-size:1.05rem; }
.lc-found-boost small{ display:block; font-size:.85rem; opacity:.9; line-height:1.45; margin-top:2px; }

@media (prefers-color-scheme: dark){
  .fb-zone{ --fb-ink:#e8edf7; --fb-dim:#93a1bd; --fb-line:#2a3446; }
  .fb-q,.fb-opt,.fb-result{ background:#1a2130; }
  .fb-btn.ghost{ background:#1f2838; color:#c3cde0; }
}

/* the sentence or paragraph a comprehension item asks about — without
   this the question was unanswerable, and for a struggling reader the
   passage needs more air and a larger size than the question itself */
.fb-context{
  background:#f7f9fc; border-left:5px solid var(--fb-purple);
  border-radius:0 12px 12px 0; padding:14px 16px; margin:0 0 14px;
  font-size:1.1rem; line-height:1.75; color:var(--fb-ink);
}
@media (prefers-color-scheme: dark){ .fb-context{ background:#141b28; } }

/* hero artwork (v462) — the warm reading scene, deliberately used on
   the placement result where a struggling reader lands */
.fb-zone .fb-result{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 58%, rgba(255,255,255,.72) 100%),
    url('../assets/brand/hero-foundations.jpg');
  background-size:cover;
  background-position:center bottom;
}
@media (prefers-color-scheme: dark){
  .fb-zone .fb-result{
    background-image:
      linear-gradient(180deg, rgba(26,33,48,.97) 0%, rgba(26,33,48,.93) 58%, rgba(26,33,48,.75) 100%),
      url('../assets/brand/hero-foundations.jpg');
  }
}