/* Family Learning Hub – bright, big, tap-friendly */
.flh-app {
  --kid: #6366f1;
  --ink: #1e293b;
  --muted: #64748b;
  --card: #ffffff;
  --good: #22c55e;
  --bad: #ef4444;
  position: relative;
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 20px 28px;
  border-radius: 28px;
  min-height: 520px;
  overflow: hidden;
  color: var(--ink);
  font-family: 'Fredoka', 'Comic Sans MS', 'Segoe UI Rounded', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.7) 0 60px, transparent 61px),
    radial-gradient(circle at 90% 20%, rgba(255,255,255,.5) 0 40px, transparent 41px),
    linear-gradient(160deg, #e0f2fe 0%, #fae8ff 55%, #fef9c3 100%);
}
.flh-app *, .flh-app *::before, .flh-app *::after { box-sizing: border-box; }
.flh-app:fullscreen { max-width: none; border-radius: 0; overflow-y: auto; padding-top: 64px; }

/* Neutralize theme button styles */
.flh-app button {
  font: inherit; color: inherit; text-transform: none; letter-spacing: normal; text-shadow: none;
  margin: 0; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent;
  min-height: 0; width: auto; height: auto;
}
.flh-app button:focus-visible { outline: 4px solid var(--kid); outline-offset: 3px; }

.flh-loading { padding: 80px 0; font-size: 24px; }
.flh-title { font-size: clamp(26px, 4vw, 40px); font-weight: 700; margin: 6px 0 22px; color: var(--ink); }

/* Top-right tools */
.flh-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 3; }
.flh-app .flh-tool {
  width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85);
  font-size: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.12); padding: 0;
}

/* Pills & avatars */
.flh-pill {
  display: inline-block; background: #fff; border-radius: 999px; padding: 6px 14px;
  font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.08); white-space: nowrap;
}
.flh-avatar { font-size: 84px; line-height: 1; display: block; }
.flh-avatar.sm { font-size: 46px; }
.flh-kid-name { font-size: 28px; font-weight: 700; }
.flh-kid-grade { color: var(--muted); font-size: 16px; font-weight: 500; }

/* Home */
.flh-kids { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.flh-app .flh-kid {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 260px; padding: 28px 18px; border-radius: 28px; border: 0;
  background: var(--card); border-bottom: 10px solid var(--kid);
  box-shadow: 0 10px 24px rgba(0,0,0,.10); transition: transform .15s;
}
.flh-app .flh-kid:hover { transform: translateY(-6px) rotate(-1deg); }
/* 3 or more children: smaller cards, two per row on phones */
.flh-kids.many { gap: 16px; }
.flh-kids.many .flh-kid { width: 200px; padding: 20px 12px; }
.flh-kids.many .flh-avatar { font-size: 64px; }
.flh-kids.many .flh-kid-name { font-size: 24px; }
@media (max-width: 640px) {
  .flh-kids.many { gap: 10px; }
  .flh-app .flh-kids.many .flh-kid { width: calc(50% - 5px); padding: 14px 8px; border-radius: 22px; border-bottom-width: 7px; }
  .flh-kids.many .flh-avatar { font-size: 50px; }
  .flh-kids.many .flh-kid-name { font-size: 20px; overflow-wrap: anywhere; }
  .flh-kids.many .flh-kid-grade { font-size: 14px; }
}

/* Menu */
.flh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.flh-me { display: flex; align-items: center; gap: 12px; text-align: left; }
.flh-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.flh-app .flh-back {
  border: 0; background: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.flh-goal { background: rgba(255,255,255,.7); border-radius: 18px; padding: 10px 16px; margin-bottom: 18px; text-align: left; }
.flh-goal-label { font-weight: 600; margin-bottom: 6px; }
.flh-bar { height: 16px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.flh-bar span { display: block; height: 100%; background: linear-gradient(90deg, #facc15, #f97316); border-radius: 999px; transition: width .6s; }

.flh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.flh-app .flh-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 12px 16px; border: 0; border-radius: 22px; background: var(--card);
  box-shadow: 0 6px 14px rgba(0,0,0,.08); border-top: 6px solid var(--kid); transition: transform .12s;
}
.flh-app .flh-card:hover { transform: scale(1.04); }
.flh-card-icon { font-size: 48px; line-height: 1.1; }
.flh-card-title { font-weight: 700; font-size: 20px; }
.flh-card-desc { color: var(--muted); font-size: 14px; }
.flh-best { margin-top: 6px; font-size: 13px; font-weight: 600; background: #f1f5f9; border-radius: 999px; padding: 3px 10px; }
.flh-best.flh-new { background: #fef08a; }

/* Play */
.flh-playbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.flh-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.flh-dot { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.9); border: 2px solid #cbd5e1; }
.flh-dot.now { border-color: var(--kid); transform: scale(1.25); }
.flh-dot.ok { background: var(--good); border-color: var(--good); }
.flh-dot.meh { background: #fbbf24; border-color: #fbbf24; }
.flh-dot.no { background: var(--bad); border-color: var(--bad); }
.flh-act-title { color: var(--muted); font-weight: 600; margin: 4px 0 10px; }

.flh-prompt {
  background: var(--card); border-radius: 26px; padding: 22px 18px; margin: 0 auto 12px; max-width: 760px;
  box-shadow: 0 8px 20px rgba(0,0,0,.07);
}
.flh-ask { font-size: clamp(22px, 3.4vw, 32px); font-weight: 600; }
.flh-eq { font-size: clamp(44px, 8vw, 72px); font-weight: 700; letter-spacing: 2px; }
.flh-num { font-size: 1.3em; color: var(--kid); }
.flh-story { font-size: clamp(20px, 2.8vw, 26px); line-height: 1.5; max-width: 640px; margin: 0 auto 8px; }
.flh-story mark { background: #fde68a; padding: 0 6px; border-radius: 6px; font-weight: 700; color: inherit; }
.flh-huge { font-size: clamp(80px, 14vw, 130px); line-height: 1.1; font-weight: 700; }
.flh-mystery { font-size: 64px; cursor: pointer; display: inline-block; animation: flh-pulse 1.6s infinite; }
.flh-small { font-size: 16px; color: var(--muted); }
.flh-hint:empty { display: none; }
.flh-hint { margin-top: 6px; animation: flh-pop .3s; }
.flh-pic svg { max-width: 100%; }
.flh-clock { width: 220px; height: 220px; margin-top: 8px; }
.flh-fracbar { width: 320px; max-width: 100%; height: auto; margin-top: 10px; }
.flh-fracpie { width: 170px; height: 170px; margin-top: 10px; }
.flh-pics { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0; }
.flh-pics .flh-fracbar { width: 240px; margin: 0; }
.flh-count { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; margin: 10px auto 0; font-size: clamp(40px, 7vw, 58px); line-height: 1; }

.flh-vert {
  display: inline-grid; grid-template-columns: auto auto; column-gap: 14px; justify-items: end;
  font-size: clamp(42px, 7vw, 62px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 3px;
}
.flh-vline { grid-column: 1 / 3; justify-self: stretch; height: 6px; background: var(--ink); border-radius: 3px; margin-top: 4px; }

.flh-app .flh-hear {
  border: 0; background: rgba(255,255,255,.85); border-radius: 999px; padding: 8px 18px;
  font-weight: 600; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.flh-grade-prek .flh-hear { font-size: 22px; padding: 10px 24px; }

/* Choices */
.flh-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 820px; margin: 0 auto; }
.flh-choices.flh-two { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
.flh-choices.flh-three { grid-template-columns: repeat(3, 1fr); max-width: 720px; }
@media (max-width: 640px) { .flh-choices { grid-template-columns: repeat(2, 1fr); } }

.flh-app .flh-choice {
  min-height: 96px; padding: 14px 10px; border-radius: 22px; border: 4px solid transparent;
  background: var(--card); box-shadow: 0 6px 0 #cbd5e1, 0 8px 18px rgba(0,0,0,.08);
  font-size: clamp(26px, 4vw, 38px); font-weight: 700; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .08s;
}
.flh-app .flh-choice:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--kid); }
.flh-app .flh-choice:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #cbd5e1; }
.flh-app .flh-choice.right { background: #dcfce7; border-color: var(--good); animation: flh-pop .35s; }
.flh-app .flh-choice.wrong { background: #fee2e2; border-color: var(--bad); animation: flh-shake .4s; opacity: .7; }
.flh-app .flh-choice:disabled { cursor: default; }
.flh-app.flh-grade-prek .flh-choice { min-height: 130px; font-size: clamp(48px, 8vw, 68px); }
.flh-letter { font-size: clamp(54px, 9vw, 80px); line-height: 1; }
.flh-word { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: 1px; }
.flh-sub { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.flh-shape { width: 90px; height: 90px; }
.flh-blob { display: block; width: 90px; height: 90px; border-radius: 50%; border: 3px solid #cbd5e1; }
.flh-group { font-size: 38px; line-height: 1.25; letter-spacing: 2px; }
.flh-frac { display: inline-flex; flex-direction: column; align-items: center; font-size: 1.05em; line-height: 1.05; vertical-align: middle; }
.flh-frac span:first-child { border-bottom: 4px solid currentColor; padding: 0 8px 2px; }
.flh-frac span:last-child { padding-top: 2px; }
.flh-explain .flh-frac, .flh-explain .flh-frac span { font-size: 22px; }
.flh-explain .flh-frac span:first-child { border-bottom-width: 2px; }

/* Feedback */
.flh-feedback { min-height: 60px; margin-top: 18px; }
.flh-yay { font-size: 30px; font-weight: 700; color: #15803d; animation: flh-pop .35s; }
.flh-oops { font-size: 26px; font-weight: 700; color: #b91c1c; animation: flh-pop .3s; }
.flh-explain { background: #fff; border-radius: 20px; padding: 16px 20px; max-width: 640px; margin: 0 auto; box-shadow: 0 6px 14px rgba(0,0,0,.08); font-size: 19px; }
.flh-app .flh-next, .flh-app .flh-btn {
  margin-top: 12px; border: 0; border-radius: 999px; padding: 14px 30px; font-size: 22px; font-weight: 700;
  background: var(--kid); color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.2);
}
.flh-app .flh-btn.alt { background: #fff; color: var(--ink); }

/* Results */
.flh-score { font-size: 56px; font-weight: 700; color: var(--kid); }
.flh-starrow { font-size: 34px; letter-spacing: 4px; min-height: 40px; }
.flh-save { color: var(--muted); font-size: 15px; margin: 8px 0; }
.flh-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Confetti */
.flh-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.flh-confetti span { position: absolute; top: -50px; animation: flh-fall 3s linear forwards; }

@keyframes flh-fall { to { transform: translateY(700px) rotate(540deg); opacity: .2; } }
@keyframes flh-pop { 0% { transform: scale(.7); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes flh-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
@keyframes flh-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .flh-app * { animation: none !important; transition: none !important; } }

/* =====================================================================
 * Year curriculum: tabs, weeks, year map, lessons
 * =================================================================== */
.flh-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 16px; }
.flh-app .flh-tab {
  border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 17px;
  background: rgba(255,255,255,.75); box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.flh-app .flh-tab.on { background: var(--kid); color: #fff; }

.flh-weekbar { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 22px; padding: 12px; margin-bottom: 12px; box-shadow: 0 6px 14px rgba(0,0,0,.07); }
.flh-weekinfo { flex: 1; min-width: 0; }
.flh-weeknum { color: var(--muted); font-size: 15px; font-weight: 500; }
.flh-weektitle { font-size: clamp(19px, 2.6vw, 25px); font-weight: 700; line-height: 1.2; margin: 2px 0; }
.flh-weekprog { font-size: 15px; font-weight: 600; color: var(--kid); }
.flh-app .flh-arrow { border: 0; width: 46px; height: 46px; flex: none; border-radius: 50%; background: #f1f5f9; font-size: 18px; padding: 0; }
.flh-app .flh-arrow:disabled { opacity: .3; cursor: default; }
.flh-center { margin: -4px 0 12px; }
.flh-app .flh-link { border: 0; background: none; color: var(--kid); font-weight: 600; text-decoration: underline; padding: 4px; }

.flh-app .flh-card.passed { border-top-color: #22c55e; background: linear-gradient(#fff, #f0fdf4); }
.flh-app .flh-card.flh-learn { border-top-color: #facc15; background: linear-gradient(#fff, #fefce8); }
.flh-best.flh-pass { background: #dcfce7; color: #15803d; }
.flh-cat { text-align: left; margin: 18px 4px 10px; font-size: 20px; color: var(--ink); }
.flh-cat:first-child { margin-top: 0; }

.flh-yearhead { margin-bottom: 12px; font-size: 17px; }
.flh-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.flh-app .flh-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px 12px; border: 3px solid transparent; border-radius: 18px; background: rgba(255,255,255,.75);
  box-shadow: 0 3px 8px rgba(0,0,0,.06); min-height: 112px;
}
.flh-tile-n { font-weight: 700; font-size: 15px; color: var(--muted); }
.flh-tile-icon { font-size: 30px; line-height: 1.1; }
.flh-tile-t { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.flh-tile-bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 5px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.flh-tile-bar span { display: block; height: 100%; background: var(--kid); }
.flh-app .flh-tile.started { background: #fff; }
.flh-app .flh-tile.done { background: linear-gradient(#fef9c3, #fde68a); }
.flh-app .flh-tile.current { border-color: var(--kid); box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 6px 16px rgba(0,0,0,.15); }

.flh-lesson {
  background: #fff; border-radius: 26px; padding: 24px 22px; max-width: 760px; margin: 0 auto 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.07); font-size: clamp(19px, 2.4vw, 23px); line-height: 1.5; text-align: left;
}
.flh-lesson h3 { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 32px); text-align: center; color: var(--kid); }
.flh-lesson p { margin: 10px 0; }
.flh-example { background: #f5f3ff; border-radius: 16px; padding: 12px 16px; margin: 12px 0; text-align: center; font-weight: 600; }
.flh-example.big { font-size: 1.4em; line-height: 1.6; }
.flh-example.huge { font-size: clamp(90px, 16vw, 150px); line-height: 1.1; background: none; color: var(--kid); }
.flh-example.mono { font-family: ui-monospace, Consolas, monospace; white-space: pre; display: block; width: max-content; max-width: 100%; margin: 12px auto; text-align: left; font-size: 1.15em; overflow-x: auto; }
.flh-grade-prek .flh-lesson { text-align: center; }
.flh-wordlist { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.flh-wordlist span { background: #fef3c7; border-radius: 12px; padding: 6px 12px; font-weight: 600; }
.flh-medal { font-size: 26px; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 18px; padding: 10px; margin: 8px auto; max-width: 420px; animation: flh-pop .4s; }

/* =====================================================================
 * Game pieces
 * =================================================================== */
.flh-hears { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.flh-choices.flh-one { grid-template-columns: 1fr; max-width: 640px; }
.flh-app .flh-choices.flh-one .flh-choice { min-height: 64px; font-size: 20px; font-weight: 600; text-align: left; align-items: flex-start; }
.flh-sentence { font-size: 20px; font-weight: 500; }
.flh-pic-choice { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.flh-pic-emoji { font-size: clamp(54px, 9vw, 72px); line-height: 1.1; }
.flh-pic-word { font-size: 18px; font-weight: 600; color: var(--muted); }
.flh-sight { font-size: clamp(36px, 6vw, 52px); }
.flh-dots-row { display: block; font-size: 16px; letter-spacing: 2px; color: var(--muted); min-height: 18px; }
.flh-seq { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; font-size: clamp(38px, 7vw, 56px); font-weight: 700; }
.flh-blank { display: inline-block; min-width: 1.2em; padding: 0 6px; border-radius: 12px; background: #fef3c7; color: #b45309; border: 3px dashed #f59e0b; line-height: 1.1; }
.flh-addrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 36px; }
.flh-addrow .flh-group { font-size: 40px; }
.flh-gone { opacity: .25; filter: grayscale(1); }
.flh-count-many { font-size: clamp(30px, 5vw, 42px); }
.flh-eq-sm { font-size: clamp(28px, 5vw, 44px); }
.flh-q { margin-top: 10px; font-size: clamp(20px, 2.8vw, 26px); }
.flh-passage { text-align: left; background: #fffbeb; border-radius: 18px; padding: 14px 18px; max-height: 340px; overflow-y: auto; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; border: 2px solid #fde68a; }
.flh-passage p { margin: 0 0 10px; }
.flh-passage-title { font-weight: 700; font-size: 1.15em; margin-bottom: 6px; color: #92400e; }
.flh-array { display: inline-grid; gap: 4px; margin-top: 10px; font-size: clamp(26px, 4.5vw, 36px); line-height: 1; }
.flh-coins { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; }
.flh-graph { width: 380px; max-width: 100%; height: auto; }
.flh-numline { width: 420px; max-width: 100%; height: auto; margin-top: 8px; }
.flh-grid-svg, .flh-rect-svg, .flh-poly-svg { width: 100%; height: auto; margin-top: 8px; }
.flh-poly-svg { max-width: 260px; }
.flh-quad { width: 180px; max-width: 70%; height: auto; }
.flh-pictograph { display: inline-block; text-align: left; background: #fff; border: 2px solid #e2e8f0; border-radius: 14px; padding: 10px 14px; margin-top: 8px; }
.flh-pg-title { font-weight: 700; text-align: center; margin-bottom: 6px; }
.flh-pg-row { display: flex; gap: 10px; align-items: center; border-bottom: 1px dashed #e2e8f0; padding: 4px 0; }
.flh-pg-cat { width: 96px; font-weight: 600; font-size: 16px; }
.flh-pg-icons { font-size: 22px; letter-spacing: 2px; }
.flh-pg-key { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--muted); }

/* =====================================================================
 * School day: Mon–Fri picker and Reading / Math / Writing cards
 * =================================================================== */
.flh-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; margin-bottom: 12px; }
.flh-app .flh-daypill.weekend { background: linear-gradient(#ecfeff, #cffafe); }
.flh-app .flh-daypill.weekend.on { background: #fff; }
.flh-app .flh-daypill.weekend.complete { background: linear-gradient(#fef9c3, #fde68a); }
.flh-weekend-note { background: #ecfeff; color: #155e75; border-radius: 16px; padding: 8px 14px; margin: -4px 0 12px; font-size: 16px; font-weight: 600; }
.flh-app .flh-daypill {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 3px solid transparent;
  border-radius: 16px; background: rgba(255,255,255,.8); box-shadow: 0 2px 6px rgba(0,0,0,.06); font-weight: 700;
}
.flh-app .flh-daypill.on { border-color: var(--kid); background: #fff; }
.flh-app .flh-daypill.complete { background: linear-gradient(#fef9c3, #fde68a); }
.flh-daypill-dots { display: flex; gap: 4px; }
.flh-daypill-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.flh-daypill-dots i.on { background: #22c55e; }
.flh-dayhead { font-weight: 700; font-size: 19px; margin: 4px 0 12px; }
.flh-subjects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 12px; }
.flh-app .flh-subject {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 18px; border: 0;
  border-radius: 24px; background: #fff; border-top: 10px solid var(--sub); box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .12s; min-height: 190px; justify-content: center;
}
.flh-app .flh-subject:hover { transform: translateY(-4px); }
.flh-app .flh-subject.passed { background: linear-gradient(#fff, #f0fdf4); }
.flh-subject .flh-card-icon { font-size: 56px; }
.flh-subject-tag { display: inline-block; background: var(--sub); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 15px; font-weight: 700; }
.flh-subject-tag.inline { font-size: 13px; padding: 2px 10px; vertical-align: middle; }

/* Tricky Review + school notes */
.flh-app .flh-tricky {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; border-radius: 20px;
  padding: 12px 16px; margin-bottom: 12px; background: linear-gradient(90deg, #fef3c7, #fde68a); box-shadow: 0 5px 0 #f59e0b; font-size: 18px;
}
.flh-app .flh-tricky:hover { transform: translateY(-2px); }
.flh-tricky-icon { font-size: 40px; animation: flh-pulse 2s infinite; }
.flh-tricky-later { background: rgba(255,255,255,.75); border-radius: 16px; padding: 8px 14px; margin-bottom: 12px; font-weight: 600; font-size: 16px; }
.flh-school { background: #e0f2fe; color: #075985; border-radius: 16px; padding: 8px 14px; margin-bottom: 12px; font-size: 16px; }

/* Pass code keypad */
.flh-codebox { text-align: center; max-width: 420px; margin: 0 auto; }
.flh-codebox .flh-head { justify-content: flex-start; margin-bottom: 4px; }
.flh-codebox .flh-avatar { font-size: 64px; }
.flh-codebox .flh-title { margin: 4px 0; }
.flh-code-help { font-size: 20px; font-weight: 600; margin: 0 0 12px; }
.flh-code-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
.flh-code-dots i {
  width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.85); border: 3px dashed #c4b5fd;
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 30px;
}
.flh-code-dots i.on { border: 3px solid var(--kid); background: #fff; }
.flh-code-msg { min-height: 26px; font-weight: 700; color: #dc2626; margin-bottom: 6px; }
.flh-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.flh-app .flh-key {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; min-height: 76px;
  border: 0; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 #ddd6fe; transition: transform .08s;
}
.flh-app .flh-key:active { transform: translateY(3px); box-shadow: 0 2px 0 #ddd6fe; }
.flh-key-pic { font-size: 34px; line-height: 1; }
.flh-key-num { font-size: 17px; font-weight: 700; color: #64748b; }
.flh-app .flh-key-del { font-size: 30px; background: #fef2f2; box-shadow: 0 5px 0 #fecaca; }

/* Kindergarten math pictures */
.flh-tenframe { display: inline-grid; grid-template-columns: repeat(5, 44px); grid-auto-rows: 44px; border: 3px solid #475569; border-radius: 8px; overflow: hidden; background: #fff; margin: 8px auto; }
.flh-tenframe span { display: flex; align-items: center; justify-content: center; font-size: 26px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; }
.flh-tenframe span:nth-child(5n) { border-right: 0; }
.flh-tenframe span:nth-child(n+6) { border-bottom: 0; }
.flh-frames { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.flh-scene { display: grid; grid-template-columns: repeat(3, 70px); grid-template-rows: repeat(2, 70px); justify-content: center; margin: 10px auto; }
.flh-scene span { display: flex; align-items: center; justify-content: center; font-size: 52px; }
.flh-bar { display: inline-block; height: 26px; border-radius: 13px; vertical-align: middle; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.flh-angle-svg { display: block; width: min(300px, 80vw); height: auto; margin: 6px auto; }
@media (max-width: 640px) {
  .flh-tenframe { grid-template-columns: repeat(5, 34px); grid-auto-rows: 34px; }
  .flh-tenframe span { font-size: 20px; }
  .flh-scene { grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 56px); }
  .flh-scene span { font-size: 42px; }
}

/* 1st/2nd grade math pictures: base-ten blocks, measuring cubes, rulers */
.flh-blocks { display: flex; align-items: flex-end; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 10px auto; }
.flh-rod { display: inline-block; width: 16px; height: 160px; border-radius: 3px; background: repeating-linear-gradient(#60a5fa 0 14px, #1d4ed8 14px 16px); border: 2px solid #1e40af; }
.flh-cubes { display: inline-grid; grid-template-columns: repeat(2, 18px); gap: 3px; margin-left: 8px; align-content: end; }
.flh-cube { width: 18px; height: 18px; border-radius: 3px; background: #fbbf24; border: 2px solid #b45309; }
.flh-measure { display: inline-block; text-align: left; margin: 10px auto; }
.flh-mbar { width: calc(var(--n, 4) * 34px); height: 44px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: #fef3c7; border-radius: 22px; }
.flh-mcubes { display: flex; margin-top: 4px; }
.flh-mcubes span { width: 34px; height: 30px; background: #a7f3d0; border: 2px solid #047857; box-sizing: border-box; }
.flh-mcubes span + span { border-left: 0; }
.flh-ruler-svg { display: block; width: min(420px, 88vw); height: auto; margin: 8px auto; }
@media (max-width: 640px) {
  .flh-rod { height: 120px; width: 13px; background: repeating-linear-gradient(#60a5fa 0 10px, #1d4ed8 10px 12px); }
  .flh-mcubes span { width: 26px; height: 24px; }
  .flh-mbar { width: calc(var(--n, 4) * 26px); }
}

/* 5th grade pictures: prisms and the coordinate plane */
.flh-prism-svg { display: block; width: min(260px, 70vw); max-height: 230px; height: auto; margin: 8px auto; }
.flh-coord-svg { display: block; width: min(320px, 86vw); height: auto; margin: 6px auto; background: #fff; border-radius: 12px; }

/* Games page note (log in first / waiting for approval / add your children) */
.flh-note-box { max-width: 560px; margin: 30px auto; text-align: center; background: #fff; border-radius: 28px; padding: 28px 24px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10); font-family: Fredoka, "Segoe UI", sans-serif; color: #1e293b; }
.flh-note-icon { font-size: 64px; line-height: 1; }
.flh-note-box h2 { font-size: 28px; margin: 10px 0 6px; }
.flh-note-box p { font-size: 18px; }
.flh-note-btn { display: inline-block; background: #7c3aed; color: #fff !important; text-decoration: none; padding: 10px 22px; border-radius: 999px; font-weight: 700; box-shadow: 0 5px 0 #5b21b6; }

/* Tracing pad */
.flh-custom { max-width: 640px; margin: 0 auto; }
.flh-trace { display: inline-block; background: #fff; border-radius: 24px; padding: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.08); border: 4px dashed #ddd6fe; }
.flh-trace canvas { display: block; width: min(320px, 78vw); height: auto; aspect-ratio: 1; touch-action: none; cursor: crosshair; border-radius: 16px; }
.flh-trace canvas.flh-traced { outline: 5px solid #22c55e; }
.flh-nudge { animation: flh-shake .4s; }

/* Sentence builder */
.flh-build-line {
  min-height: 70px; background: #fff; border: 3px dashed #cbd5e1; border-radius: 18px; padding: 10px; margin-bottom: 12px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
}
.flh-build-line.right { border-color: #22c55e; background: #f0fdf4; }
.flh-build-line.wrong { border-color: #ef4444; background: #fef2f2; }
.flh-tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.flh-app .flh-tile-word {
  border: 0; border-radius: 14px; padding: 10px 16px; font-size: 22px; font-weight: 600; background: #fff;
  box-shadow: 0 4px 0 #cbd5e1; color: var(--ink);
}
.flh-app .flh-tile-word.in { background: #ede9fe; box-shadow: 0 3px 0 #c4b5fd; }
.flh-app .flh-tile-word:disabled { opacity: .25; box-shadow: none; }
.flh-app .flh-btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 640px) {
  .flh-app { padding: 52px 12px 22px; border-radius: 22px; }
  .flh-subjects { grid-template-columns: 1fr; gap: 10px; }
  .flh-app .flh-subject { min-height: 0; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; padding: 12px 14px; border-top: 0; border-left: 10px solid var(--sub); }
  .flh-subject .flh-card-icon { font-size: 40px; }
  .flh-days { gap: 3px; }
  .flh-app .flh-daypill { padding: 6px 1px; font-size: 14px; border-width: 2px; border-radius: 12px; }
  .flh-daypill-dots { gap: 2px; }
  .flh-daypill-dots i { width: 7px; height: 7px; }
  .flh-year { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .flh-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .flh-app .flh-card { padding: 14px 8px 12px; }
  .flh-card-title { font-size: 17px; }
}