/* =========================================================
   Likkle Coders - Stylesheet (chunky-display layout)
   Mobile-first, responsive, low-data
   ========================================================= */

:root{
  /* Surfaces */
  --c-page:      #dbeafe;          /* light blue wash background */
  --c-page-2:    #eff6ff;          /* lighter blue alt */
  --c-card:      #f5efe1;          /* cream hero card */
  --c-card-2:    #faf6ec;          /* lighter cream */
  --c-ink:       #15131c;          /* near-black */
  --c-ink-soft:  #4b4754;
  --c-line:      #e6dccb;

  /* Brand & accents */
  --c-coral:     #ff6b3d;          /* primary CTA */
  --c-coral-d:   #e85a2e;
  --c-pink:      #ec4899;
  --c-purple:    #8b5cf6;
  --c-green:     #34d399;
  --c-yellow:    #fbbf24;
  --c-blue:      #60a5fa;
  --c-red:       #ef4444;

  /* Per-grade accents */
  --grade-1: #ff6b3d;
  --grade-2: #34d399;
  --grade-3: #60a5fa;
  --grade-4: #8b5cf6;
  --grade-5: #ec4899;
  --grade-6: #fbbf24;

  --shadow-sm: 0 2px 4px rgba(20,15,30,.08);
  --shadow-md: 0 8px 18px rgba(20,15,30,.12);
  --shadow-lg: 0 18px 40px rgba(20,15,30,.18);
  --shadow-pop: 0 6px 0 rgba(20,15,30,.15);   /* chunky offset shadow */

  --r-sm:   12px;
  --r-md:   22px;
  --r-lg:   32px;
  --r-pill: 999px;     /* canonical pill radius for buttons + chips */

  /* Spacing scale — additive, used by new components.
     Existing styles still use ad-hoc rems; future edits should reference these. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.4rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Fluid type scale */
  --text-xs:   clamp(0.78rem, 1.4vw, 0.85rem);
  --text-sm:   clamp(0.85rem, 1.6vw, 0.92rem);
  --text-base: clamp(0.95rem, 1.8vw, 1.05rem);
  --text-lg:   clamp(1.1rem,  2.2vw, 1.25rem);
  --text-xl:   clamp(1.3rem,  3vw,   1.6rem);
  --text-h2:   clamp(1.6rem,  4vw,   2.2rem);
  --text-h1:   clamp(2rem,    6vw,   3.4rem);

  /* Touch-target minimums (Apple HIG / Material spec) */
  --tap-min-h: 44px;

  /* App font stack — switched from Fredoka+Nunito to Baloo 2 (display,
     chunky rounded) + Quicksand (body, clean rounded). Both kid-friendly,
     both Google Fonts free. The fallbacks keep the Fredoka/Nunito names
     so older inline `font-family: 'Fredoka'` references still resolve to
     a sensible font even before the new variables propagate. */
  --f-display: "Baloo 2", "Fredoka", system-ui, sans-serif;
  --f-body:    "Quicksand", "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Jamaican flag accents — used sparingly on the Dashboard / Modules
     so the kid-friendly palette stays primary throughout the rest. */
  --jf-black: #000000;
  --jf-gold:  #FFD100;
  --jf-green: #009b3a;
  --jf-gold-dark:  #c79a00;
  --jf-green-dark: #007a2e;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--c-page);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  padding-bottom: 80px;       /* space for mobile bottom-nav */
}
img,svg{ max-width:100%; display:block; }
button{ font-family: inherit; cursor: pointer; border:0; background:none; }
a{ color: var(--c-ink); text-decoration: none; }
a:hover{ text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 .4em;
  font-weight: 700;
  color: var(--c-ink);
}
h1{ font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 700; text-transform: uppercase; }
h2{ font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3{ font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--c-ink-soft); }

/* Student dashboard — Today's tasks block */
.dash-assignments{
  margin: 1.4rem 0;
  padding: 1.1rem 1.2rem;
  background: var(--c-card, #fff);
  border-radius: 18px;
  border: 2px solid var(--jf-gold, #FFD100);
  box-shadow: 0 4px 14px rgba(20,15,30,.08);
}
.dash-assignments .dash-section-head{ margin-bottom: .8rem; }
.dash-assignments .assign-item{
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.dash-assignments .assign-item:hover{
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(0,155,58,.18);
}

/* ============== TEACHER CLASS DASHBOARD ============== */
.class-summary{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .8rem;
  margin: 1.2rem 0 .4rem;
}
.cs-card{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1rem .8rem;
  border-radius: 18px;
  text-align: center;
  border: 2px solid rgba(20,15,30,.06);
}
.cs-card .cs-num{
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 1.8rem; font-weight: 700; line-height: 1;
}
.cs-card .cs-label{
  font-size: .8rem; opacity: .85; margin-top: .35rem; letter-spacing: .04em; text-transform: uppercase;
}
.cs-green{ background: var(--jf-green); color: #fff; border-color: var(--jf-green-dark); }
.cs-gold { background: var(--jf-gold);  color: var(--jf-black); border-color: var(--jf-gold-dark); }
.cs-black{ background: var(--jf-black); color: var(--jf-gold); border-color: #000; }

.class-section-h{
  margin-top: 1.6rem; margin-bottom: .6rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 700;
}

.class-table-wrap{
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(20,15,30,.08);
  background: var(--c-card, #fff);
}
.class-table{
  width: 100%; border-collapse: collapse;
  font-size: .92rem;
}
.class-table th, .class-table td{
  padding: .65rem .7rem;
  text-align: left;
  border-bottom: 1px solid rgba(20,15,30,.06);
  white-space: nowrap;
}
.class-table th{
  background: rgba(20,15,30,.03);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink-soft, #555);
}
.class-table tbody tr:hover{ background: rgba(0,155,58,.04); }
.bar-mini{
  display: inline-block;
  width: 110px; height: 8px;
  background: rgba(20,15,30,.08);
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: .4rem;
}
.bar-mini > span{
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--jf-green), var(--jf-gold));
  border-radius: 999px;
}
.bar-pct{ font-size: .82rem; color: var(--c-ink-soft); }

.class-add{
  margin-top: .9rem;
  background: var(--c-card, #fff);
  border: 1px dashed rgba(20,15,30,.14);
  border-radius: 14px;
  padding: .9rem 1.1rem;
}
.class-add > summary{
  cursor: pointer;
  font-weight: 700;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  user-select: none;
}
.class-add[open] > summary{ margin-bottom: .8rem; }
.class-add-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem 1rem;
  align-items: end;
}
.class-add-form .form-row{ margin: 0; }
.class-add-form button{ grid-column: 1 / -1; justify-self: start; }

.assign-list{
  list-style: none; padding: 0; margin: .6rem 0 0;
  display: flex; flex-direction: column; gap: .55rem;
}
.assign-item{
  display: flex; align-items: center; justify-content: space-between;
  background: var(--c-card, #fff);
  border-radius: 12px;
  border-left: 5px solid var(--jf-green);
  padding: .65rem .9rem;
}
.assign-item.is-overdue{ border-left-color: #dc2626; background: #fef2f2; }
.assign-meta{ display: flex; flex-wrap: wrap; gap: .55rem .75rem; align-items: center; }
.assign-tag{
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: rgba(0,155,58,.12);
  color: var(--jf-green-dark);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.assign-due{ font-size: .82rem; color: var(--c-ink-soft); }
.assign-item.is-overdue .assign-due{ color: #dc2626; font-weight: 700; }

@media (max-width: 640px){
  .class-add-form{ grid-template-columns: 1fr; }
  .class-table th, .class-table td{ padding: .5rem; font-size: .85rem; }
  .bar-mini{ width: 70px; }
}

/* ============== CERTIFICATE — sleek minimal, framable ============== */
:root {
  --cert-ink:    #15161c;
  --cert-soft:   #6b6b76;
  --cert-line:   #c8a14a;
  --cert-line-2: #e9d8a6;
  --cert-bg:     #ffffff;
  --cert-fam:    'Nunito', 'Helvetica Neue', system-ui, -apple-system, Arial, sans-serif;
  --cert-disp:   'Fredoka', 'Helvetica Neue', system-ui, sans-serif;
}

.cert-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .9rem;
  margin-top: 1.4rem;
}
.cert-list-card{
  display: block;
  background: #fff;
  border: 1px solid rgba(20,15,30,.10);
  border-radius: 14px;
  padding: 1.1rem 1.1rem 1rem;
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 12px rgba(20,15,30,.05);
}
.cert-list-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20,15,30,.10);
}
.cert-list-icon{ font-size: 2rem; line-height: 1; margin-bottom: .3rem; }
.cert-list-card h3{
  margin: .2rem 0 .35rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 1.1rem;
}
.cert-list-card p{ margin: 0 0 .3rem; font-size: .92rem; }
.cert-list-meta{
  font-size: .75rem;
  color: var(--c-ink-soft, #666);
  font-family: ui-monospace, SF Mono, Menlo, monospace;
}
.cert-list-cta{
  display: inline-block;
  margin-top: .55rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--c-ink);
}

/* The certificate itself — viewer wraps it in a soft canvas */
.cert-screen{
  padding: clamp(.8rem, 3vw, 2.2rem);
  background: #f0eee7;
  min-height: 100vh;
}
.cert-toolbar{
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.cert-page{
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 1.414 / 1;     /* A4 landscape proportions */
  margin: 0 auto;
  background: var(--cert-bg);
  position: relative;
  box-shadow: 0 30px 80px rgba(20,15,30,.18), 0 8px 18px rgba(20,15,30,.10);
  overflow: hidden;
  font-family: var(--cert-fam);
  color: var(--cert-ink);
}
.cert-border{
  position: absolute;
  inset: 22px;
  border: 2.5px solid var(--cert-line);
  outline: 1px solid var(--cert-line-2);
  outline-offset: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-inner{
  text-align: center;
  padding: clamp(1rem, 4vw, 3rem);
  width: 100%;
  position: relative;
}
.cert-brand{
  display: flex; align-items: center; justify-content: center;
  gap: .65rem;
  margin-bottom: 1.4rem;
}
.cert-brand-mark{
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--cert-ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cert-disp);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.cert-brand-name{
  font-family: var(--cert-disp);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .04em;
  color: var(--cert-ink);
}

/* v327j — school identity row, just below the Likkle Coders brand */
.cert-school{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: -0.6rem 0 1.2rem;
  font-family: var(--cert-disp);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--cert-soft);
  letter-spacing: .03em;
}
.cert-school-logo{
  width: 32px; height: 32px;
  border-radius: 6px;
  object-fit: cover;
  background: #fff;
}
.cert-school-icon{ font-size: 1.2rem; }
.cert-school-name{
  color: var(--cert-brand, var(--cert-ink));
}
.cert-awarded-at{
  margin-top: 1.4rem;
  text-align: center;
  font-size: .8rem;
  font-style: italic;
  color: var(--cert-soft);
  letter-spacing: .03em;
}

.cert-eyebrow{
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .42em;
  color: var(--cert-soft);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.cert-presented{
  font-size: 1.05rem;
  color: var(--cert-soft);
  font-style: italic;
}
.cert-name{
  font-family: var(--cert-disp);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  margin: .55rem 0 1.2rem;
  letter-spacing: .01em;
  color: var(--cert-ink);
  border-bottom: 1.5px solid var(--cert-line);
  display: inline-block;
  padding: 0 1.5rem .35rem;
}
.cert-for{
  font-size: 1rem;
  color: var(--cert-soft);
  font-style: italic;
  margin-top: .5rem;
}
.cert-title{
  font-family: var(--cert-disp);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: .35rem 0 .35rem;
  color: var(--cert-ink);
}
.cert-subtitle{
  font-size: 1.02rem;
  color: var(--cert-soft);
  max-width: 740px;
  margin: 0 auto;
  line-height: 1.45;
}
.cert-foot{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(1.5rem, 5vh, 3.5rem);
  padding: 0 clamp(1rem, 6vw, 4rem);
}
.cert-foot-col{
  flex: 1;
  text-align: center;
}
.cert-foot-line{
  width: 100%;
  height: 1px;
  background: var(--cert-soft);
  margin-bottom: .4rem;
}
.cert-foot-label{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--cert-soft);
  text-transform: uppercase;
}
.cert-foot-value{
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  font-size: .92rem;
  margin-top: .25rem;
  color: var(--cert-ink);
}
.cert-seal{
  font-size: 2rem;
  width: 64px; height: 64px;
  border: 2px solid var(--cert-line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cert-line);
  background: rgba(200,161,74,.08);
}
.cert-watermark{
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--cert-disp);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: .15em;
  color: rgba(20,15,30,.025);
  pointer-events: none;
  white-space: nowrap;
}

/* Print rules — strip everything but the cert page when printing */
/* Default page setup — applies to lesson plans, PEP worksheets, etc. */
@page { size: A4; margin: 14mm; }

/* Certificate print — scoped via :has() so it ONLY kicks in when a certificate
   is actually on the page. Previously this was global and broke every other
   print target (lesson plans, PEP worksheets) by hiding all content. */
@media print {
  .no-print { display: none !important; }
  body:has(.cert-screen) *           { visibility: hidden; }
  body:has(.cert-screen) .cert-screen,
  body:has(.cert-screen) .cert-screen * { visibility: visible; }
  body:has(.cert-screen) .cert-screen{ padding: 0; background: #fff; }
  body:has(.cert-screen) .cert-page  { box-shadow: none; max-width: none; width: 100%; margin: 0; page-break-inside: avoid; }
}

/* ============== QUIZ EXPLANATION PANEL (in-game) ============== */
.quiz-explain{
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border-left: 5px solid;
  background: var(--c-card, #fff);
  animation: lc-explain-in .25s ease-out;
}
@keyframes lc-explain-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quiz-explain.is-right{ border-left-color: var(--jf-green, #009b3a); background: rgba(0,155,58,.06); }
.quiz-explain.is-wrong{ border-left-color: #dc2626; background: rgba(220,38,38,.06); }
.quiz-explain-head{
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 700;
  margin-bottom: .35rem;
}
.quiz-explain-body{
  font-size: .95rem;
  margin-bottom: .8rem;
  line-height: 1.5;
}
.quiz-explain-body strong{ color: var(--jf-green-dark, #007a2e); }
.quiz-explain .quiz-next{
  display: inline-block;
  background: var(--jf-green, #009b3a);
  color: #fff;
  border: 0;
  padding: .55rem 1.2rem;
  border-radius: 999px;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--jf-green-dark, #007a2e);
}
.quiz-explain .quiz-next:hover{
  background: var(--jf-green-dark, #007a2e);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #005f24;
}
.quiz-explain .quiz-next:active{
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--jf-green-dark, #007a2e);
}

/* ============== MOE ALIGNED BADGE ============== */
.moe-badge{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: .55rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--jf-green, #009b3a);
  color: #fff;
  border: 1px solid var(--jf-gold, #FFD100);
  flex-shrink: 0;
  white-space: nowrap;
  vertical-align: middle;
}
/* On lesson cards, push the badge to the right of the summary */
.lesson-card > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
/* Literacy lesson summaries are flex too */
.lit-lesson > summary .moe-badge{ margin-left: auto; }

/* ============== QUIZ DUELS ============== */
.duel-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .6rem;
  margin: 1rem 0 .4rem;
}
.duel-stat-card{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .85rem .6rem;
  border-radius: 14px;
  border: 2px solid transparent;
  text-align: center;
}
.duel-stat-card .duel-stat-num{
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 1.4rem; font-weight: 700; line-height: 1.1;
}
.duel-stat-card .duel-stat-label{
  font-size: .72rem; opacity: .85; margin-top: .25rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.duel-cs-green{ background: var(--jf-green); color: #fff; border-color: var(--jf-green-dark); }
.duel-cs-gold { background: var(--jf-gold);  color: var(--jf-black); border-color: var(--jf-gold-dark); }
.duel-cs-black{ background: var(--jf-black); color: var(--jf-gold); }

.trophy-card.is-locked{
  opacity: .55; filter: grayscale(.6);
  background: rgba(20,15,30,.04);
  border-color: rgba(20,15,30,.18);
}

.duel-quiz{
  background: var(--c-card, #fff);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  margin-top: .8rem;
}
.duel-q{
  border-bottom: 1px solid rgba(20,15,30,.06);
  padding: .9rem 0;
}
.duel-q:last-of-type{ border-bottom: 0; }
.duel-q-text{ margin: 0 0 .55rem; font-size: 1rem; }
.duel-q-opts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .35rem;
}
.duel-q-opt{
  background: rgba(20,15,30,.04);
  border: 2px solid rgba(20,15,30,.08);
  border-radius: 10px;
  padding: .6rem .8rem;
  cursor: pointer;
  text-align: left;
  font-size: .92rem;
  transition: background .15s ease, border-color .15s ease;
}
.duel-q-opt:hover{ background: rgba(0,155,58,.08); border-color: var(--jf-green); }
.duel-q-opt.right{
  background: rgba(0,155,58,.18);
  border-color: var(--jf-green);
  color: var(--jf-green-dark);
  font-weight: 700;
}
.duel-q-opt.wrong{
  background: rgba(220,38,38,.10);
  border-color: #dc2626;
  color: #dc2626;
  font-weight: 700;
}
.duel-submit-row{
  display: flex; justify-content: center;
  margin-top: 1rem;
}

.duel-result-card{
  background: var(--c-card, #fff);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  margin-top: .8rem;
  text-align: center;
}
.duel-result-card h3{ margin: 0 0 .4rem; }
.duel-final{
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 1.4rem;
  font-weight: 800;
  margin: .8rem 0 0;
}
.duel-final.win  { color: var(--jf-green-dark); }
.duel-final.lose { color: #dc2626; }
.duel-final.tie  { color: var(--jf-gold-dark); }
.duel-new-badges{
  margin-top: 1rem;
  padding: .8rem .9rem;
  background: linear-gradient(135deg, var(--jf-gold), var(--jf-gold-dark));
  color: var(--jf-black);
  border-radius: 12px;
}
.duel-new-badges h4{ margin: 0 0 .4rem; font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif); }
.duel-new-badge{
  display: inline-block;
  margin: .2rem .3rem 0 0;
  padding: .25rem .65rem;
  background: var(--jf-black);
  color: var(--jf-gold);
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
}

/* ============== CHESS — TIER 4 TOURNAMENT ============== */
.lb-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.lb-row{
  display: flex; align-items: center; gap: .8rem;
  padding: .65rem .9rem;
  background: var(--c-card, #fff);
  border-radius: 12px;
  border-left: 5px solid var(--jf-gold);
}
.lb-row .lb-rank{
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 800; font-size: 1.3rem;
  color: var(--jf-green-dark);
  min-width: 1.6rem;
}
.lb-row .lb-name{ flex: 1; font-weight: 700; }
.lb-row .lb-stat{ color: var(--jf-green-dark); font-weight: 700; }

.bracket-wrap{
  display: flex; gap: 1.2rem;
  margin-top: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.bracket-round{
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: .8rem;
  min-width: 200px;
}
.bracket-round h4{
  margin: 0 0 .35rem;
  font-size: .85rem; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.bracket-match{
  background: var(--c-card, #fff);
  border-radius: 12px;
  padding: .55rem .65rem;
  border: 1px solid rgba(20,15,30,.08);
  border-left: 4px solid var(--c-ink-soft, #999);
}
.bracket-match.is-decided{ border-left-color: var(--jf-green); }
.bracket-match.is-mine{
  border-left-color: var(--jf-gold, #FFD100);
  background: linear-gradient(180deg, #fffceb 0%, #fff 70%);
  box-shadow: 0 6px 14px -10px rgba(255, 209, 0, .55);
}
.bm-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: .25rem .35rem;
  border-radius: 6px;
  font-weight: 600;
  gap: .35rem;
}
.bm-row.win{
  background: rgba(0,155,58,.12);
  color: var(--jf-green-dark);
  font-weight: 800;
}
.bm-vs{ font-size: .7rem; color: var(--c-ink-soft); text-align: center; padding: .1rem 0; }
.bm-name{ flex: 1; }
.bm-you{
  display: inline-block;
  margin-left: .25rem;
  padding: .05rem .35rem;
  background: var(--jf-gold, #FFD100);
  color: #000;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bm-play{
  display: block;
  width: 100%;
  margin-top: .5rem;
  text-align: center;
}
/* Match-number badge for REMOTE tournaments — both players tap this
   number in the Number Lobby to play each other. */
.bm-number{
  display: inline-block;
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .04em;
  padding: .15rem .55rem;
  border-radius: 999px;
  margin-bottom: .35rem;
  box-shadow: 0 4px 10px -6px rgba(234, 88, 12, .65);
}

/* Tournament mode badge — onsite (live, same device) vs remote
   (async, share-codes). Shown on tournament list cards and on
   the bracket hero. */
.tourney-mode-badge{
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: .3rem;
}
.tourney-mode-badge.tourney-mode-onsite{
  background: var(--jf-gold, #FFD100);
  color: #000;
  border: 1px solid #b8860b;
}
.tourney-mode-badge.tourney-mode-remote{
  background: rgba(0, 155, 58, .14);
  color: var(--jf-green-dark);
  border: 1px solid rgba(0, 155, 58, .35);
}

/* Onsite tournament play UI — both players sit at the device */
.onsite-players{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .8rem;
  align-items: center;
  margin: 1rem 0;
  padding: .8rem 1rem;
  background: linear-gradient(135deg, #fef9c3 0%, #fff 70%);
  border: 2px solid var(--jf-gold, #FFD100);
  border-radius: 14px;
}
.onsite-player{
  display: flex;
  align-items: center;
  gap: .6rem;
}
.onsite-player-b{ justify-content: flex-end; text-align: right; }
.onsite-piece{
  font-size: 2.2rem;
  line-height: 1;
}
.onsite-player-w .onsite-piece{ color: #1f2937; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.onsite-player-b .onsite-piece{ color: #1f2937; }
.onsite-player-info{
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.onsite-side-label{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .08em;
  color: #64748b;
  text-transform: uppercase;
}
.onsite-player-info strong{
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: #0f172a;
  line-height: 1.1;
}
.onsite-vs{
  font-family: var(--f-display);
  font-weight: 800;
  color: #64748b;
  font-size: .9rem;
}
.onsite-result-card{
  margin-top: .8rem;
  padding: .85rem 1rem;
  background: linear-gradient(180deg, #fff7ed 0%, #fff 70%);
  border: 2px solid #fed7aa;
  border-radius: 12px;
}
@media (max-width: 540px){
  .onsite-players{ grid-template-columns: 1fr; gap: .5rem; text-align: center; }
  .onsite-player, .onsite-player-b{ justify-content: center; text-align: center; }
  .onsite-vs{ display: none; }
}

.trophy-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}
.trophy-card{
  background: linear-gradient(180deg, #fffceb, #fff);
  border-radius: 14px;
  padding: 1rem .9rem;
  border: 2px solid var(--jf-gold);
  text-align: center;
}
.trophy-card .trophy-icon{ font-size: 2.4rem; line-height: 1; margin-bottom: .35rem; }
.trophy-card h4{
  margin: .2rem 0 .25rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 1rem;
}
.trophy-card p{ margin: 0 0 .25rem; font-size: .9rem; }

/* ============== CHESS — TIER 3 CHALLENGE ============== */
.chal-actions{
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1rem 0 .5rem;
}
.chal-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .8rem;
}
.chal-card{
  background: var(--c-card, #fff);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--c-ink);
  border: 2px solid rgba(20,15,30,.08);
  border-left: 6px solid var(--c-ink-soft, #999);
  transition: transform .15s ease, border-color .15s ease;
}
.chal-card:hover{ transform: translateY(-2px); }
.chal-card.my-turn{ border-left-color: var(--jf-green); background: rgba(0,155,58,.04); }
.chal-vs{
  display: flex; align-items: baseline; gap: .5rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 1.1rem; font-weight: 700;
}
.chal-vs-mid{ color: var(--c-ink-soft); font-size: .85rem; }
.chal-status{ font-size: .9rem; color: var(--c-ink-soft); margin-top: .25rem; }
.chal-foot{
  margin-top: .5rem; font-size: .85rem; font-weight: 700;
  color: var(--jf-green-dark);
}
.chal-share-box{
  margin-top: .6rem;
  background: rgba(0,155,58,.06);
  border: 1px dashed rgba(0,155,58,.3);
  border-radius: 12px;
  padding: .8rem .95rem;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.chal-share-box.is-fresh{
  background: rgba(255, 209, 0, .15);
  border: 2px solid var(--jf-gold, #FFD100);
  box-shadow: 0 8px 18px -10px rgba(255, 209, 0, .65);
  animation: chalSharePop .45s cubic-bezier(.34, 1.56, .64, 1) 1;
}
@keyframes chalSharePop {
  0%   { transform: scale(.97); }
  100% { transform: scale(1); }
}
.chal-share-title{
  margin: 0 0 .35rem;
  font-family: var(--f-display);
  font-size: .95rem;
  color: #064e3b;
  font-weight: 800;
}
.chal-share-help{
  margin: 0 0 .5rem !important;
  font-size: .85rem;
  line-height: 1.4;
}
.chal-share-tip{
  margin: .5rem 0 0 !important;
  font-size: .78rem;
  line-height: 1.4;
}
.chal-tourney-result{
  margin-top: .8rem;
  padding: .8rem .95rem;
  background: linear-gradient(180deg, #fef3c7 0%, #fff 70%);
  border: 2px solid var(--jf-gold, #FFD100);
  border-radius: 12px;
}

/* ============== CHESS HUB & TIER PAGES ============== */
.chess-back{
  display: inline-block;
  margin-bottom: .8rem;
  font-weight: 700;
  color: var(--c-ink-soft, #555);
  text-decoration: none;
}
.chess-back:hover{ color: var(--jf-green-dark); }

.chess-tier-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}
.chess-tier{
  position: relative;
  display: block;
  background: var(--c-card, #fff);
  border-radius: 22px;
  padding: 1.6rem 1.4rem 1.3rem;
  text-decoration: none;
  color: var(--c-ink);
  border: 3px solid transparent;
  box-shadow: 0 6px 18px rgba(20,15,30,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.chess-tier:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(20,15,30,.15);
}
.chess-tier .tier-num{
  position: absolute; top: 1rem; right: 1.2rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 2.4rem; line-height: 1;
  font-weight: 800;
  opacity: .15;
}
.chess-tier .tier-icon{ font-size: 2.4rem; line-height: 1; margin-bottom: .4rem; }
.chess-tier h3{
  margin: .2rem 0 .35rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  letter-spacing: .03em;
}
.chess-tier p{ margin: 0 0 .7rem; color: var(--c-ink-soft); font-size: .95rem; }
.chess-tier .tier-cta{
  display: inline-block; font-weight: 700; font-size: .92rem;
}
.chess-tier.tier-1{ border-color: var(--jf-green); }
.chess-tier.tier-1 .tier-cta{ color: var(--jf-green-dark); }
.chess-tier.tier-2{ border-color: var(--jf-gold); }
.chess-tier.tier-2 .tier-cta{ color: #997900; }
.chess-tier.tier-3{ border-color: var(--jf-black); }
.chess-tier.tier-3 .tier-cta{ color: var(--jf-black); }
.chess-tier.tier-4{ border-color: var(--jf-green-dark); background: linear-gradient(180deg, #fffceb, #fff); }
.chess-tier.tier-4 .tier-cta{ color: var(--jf-green-dark); }
.chess-tier.tier-5{ border-color: #7c3aed; background: linear-gradient(180deg, #f5f3ff, #fff); }
.chess-tier.tier-5 .tier-cta{ color: #6d28d9; }
.chess-tier.tier-6{ border-color: #ea580c; background: linear-gradient(180deg, #fff7ed, #fff); }
.chess-tier.tier-6 .tier-cta{ color: #9a3412; }

/* =========================================================
   CHESS — NUMBER LOBBY (pick a number 1-10, no codes)
   ========================================================= */
.lobby-card{
  max-width: 640px;
  margin: 1rem auto 0;
  padding: 1.4rem 1.4rem 1.6rem;
  background: linear-gradient(180deg, #fff7ed 0%, #fff 60%);
  border: 2px solid #fed7aa;
  border-radius: 18px;
  box-shadow: 0 10px 24px -16px rgba(234, 88, 12, .4);
}
.lobby-label{
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .82rem;
  color: #7c2d12;
  margin-bottom: .35rem;
  letter-spacing: .02em;
}
.lobby-input{
  width: 100%;
  padding: .7rem .9rem;
  border-radius: 12px;
  border: 2px solid #fed7aa;
  font-family: var(--f-display);
  font-size: 1rem;
  background: #fff;
}
.lobby-input:focus{ outline: 2px solid #ea580c; outline-offset: 1px; }
.lobby-numbers{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .55rem;
  margin-top: .4rem;
}
.lobby-num{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .85rem .3rem;
  border-radius: 14px;
  border: 2px solid #fed7aa;
  background: #fff;
  cursor: pointer;
  font-family: var(--f-display);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.lobby-num:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -8px rgba(234, 88, 12, .55);
  border-color: #ea580c;
}
.lobby-num:disabled{ opacity: .55; cursor: not-allowed; }
.lobby-num-big{
  font-size: 1.8rem;
  font-weight: 800;
  color: #9a3412;
  line-height: 1;
}
.lobby-num-status{
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.lobby-num-status.status-open{ color: #059669; }
.lobby-num-status.status-waiting{ color: #b45309; }
.lobby-num-status.status-full{ color: #be123c; }
.lobby-num-status.status-done{ color: #64748b; }

/* Match-active waiting card */
.lobby-waiting{
  max-width: 520px;
  margin: 1rem auto 0;
  padding: 1.6rem 1.4rem;
  background: linear-gradient(180deg, #fef3c7 0%, #fff 70%);
  border: 2px solid var(--jf-gold, #FFD100);
  border-radius: 18px;
  text-align: center;
}
.lobby-waiting-icon{
  font-size: 3rem;
  line-height: 1;
  animation: lobbySpin 2.5s linear infinite;
}
@keyframes lobbySpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.lobby-waiting h3{
  font-family: var(--f-display);
  margin: .5rem 0 .4rem;
  color: #78350f;
}
.lobby-result-card{
  margin-top: .8rem;
  padding: .85rem 1rem;
  background: linear-gradient(180deg, #fff7ed 0%, #fff 70%);
  border: 2px solid #fed7aa;
  border-radius: 12px;
}

/* =========================================================
   CHESS — Read-aloud button on book pages + Dashboard tier
   ========================================================= */
.cbk-read-aloud{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .35rem 0 .8rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 2px solid var(--cbk-accent, #7c3aed);
  background: #fff;
  color: var(--cbk-accent, #7c3aed);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
}
.cbk-read-aloud:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(124, 58, 237, .55); }
.cbk-read-aloud.is-speaking{
  background: var(--cbk-accent, #7c3aed);
  color: #fff;
  animation: cbkReadPulse 1.4s ease-in-out infinite;
}
@keyframes cbkReadPulse {
  0%, 100% { box-shadow: 0 6px 14px -8px rgba(124, 58, 237, .55); }
  50%      { box-shadow: 0 8px 22px -2px rgba(124, 58, 237, .9); }
}
.cbk-read-icon{ font-size: 1rem; line-height: 1; }

/* 'Read' indicator on the storybook pager dots — filled gradient when
   the kid has visited that page, empty otherwise. */
.cbk-dot-page.is-read{
  background: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
  color: #fff;
  border-color: #6d28d9;
}

/* Chess Dashboard — 4-card grid */
.chess-dashboard{ max-width: 980px; margin: 0 auto; }
.cdash-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.cdash-card{
  background: #fff;
  border: 2px solid var(--c-line, #e2e8f0);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .25);
}
.cdash-card-book{ border-color: rgba(124, 58, 237, .3); background: linear-gradient(180deg, #f5f3ff 0%, #fff 60%); }
.cdash-card-challenge{ border-color: rgba(0, 155, 58, .3); background: linear-gradient(180deg, #ecfdf5 0%, #fff 60%); }
.cdash-card-tournament{ border-color: rgba(255, 209, 0, .55); background: linear-gradient(180deg, #fef9c3 0%, #fff 60%); }
.cdash-card-actions{ border-color: rgba(15, 23, 42, .15); }
.cdash-card-head{
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .7rem;
}
.cdash-icon{ font-size: 1.8rem; line-height: 1; }
.cdash-eyebrow{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .08em;
  color: #64748b;
  text-transform: uppercase;
  display: block;
}
.cdash-card h3{
  margin: .1rem 0 0;
  font-size: 1.05rem;
  color: #0f172a;
  line-height: 1.2;
}
.cdash-bar{
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  overflow: hidden;
  margin: .35rem 0 .55rem;
}
.cdash-bar-fill{
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}
.cdash-note{ margin: .15rem 0 .55rem; font-size: .85rem; line-height: 1.4; }
.cdash-pieces-row{
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.cdash-piece{
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  font-size: 1.4rem;
  text-decoration: none;
  border: 2px solid;
  transition: transform .12s ease;
}
.cdash-piece.is-read{
  background: linear-gradient(135deg, #7c3aed, #c084fc);
  color: #fff;
  border-color: #6d28d9;
}
.cdash-piece.is-unread{
  background: #fff;
  color: #cbd5e1;
  border-color: #e2e8f0;
}
.cdash-piece:hover{ transform: translateY(-2px); }
.cdash-mini-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  margin: .3rem 0 .55rem;
}
.cdash-mini-stat{
  background: #fff;
  border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 10px;
  padding: .55rem .4rem;
  text-align: center;
}
.cdash-mini-stat strong{
  display: block;
  font-family: var(--f-display);
  font-size: 1.4rem;
  color: #0f172a;
  line-height: 1;
}
.cdash-mini-stat span{
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #475569;
  text-transform: uppercase;
  margin-top: .15rem;
}
.cdash-mini-stat-gold{ background: linear-gradient(135deg, #FFD100 0%, #fef3c7 100%); border-color: #b8860b; }
.cdash-mini-stat-gold strong{ color: #78350f; }
.cdash-action-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin-top: .3rem;
}
.cdash-action{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .8rem;
  border-radius: 12px;
  background: #f1f5f9;
  text-decoration: none;
  color: #1e293b;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .9rem;
  transition: transform .12s ease, background .15s ease;
}
.cdash-action:hover{ transform: translateY(-2px); background: #e2e8f0; }
.cdash-action-icon{ font-size: 1.2rem; line-height: 1; }
@media (max-width: 540px){
  .cdash-grid{ grid-template-columns: 1fr; }
  .cdash-action-grid{ grid-template-columns: 1fr 1fr; }
}

.chess-tier-hero{
  display: flex; align-items: center; gap: 1.1rem;
  margin: .8rem 0 1.4rem;
  padding: 1.4rem 1.4rem;
  border-radius: 22px;
  color: #fff;
}
.chess-tier-hero h2{ margin: .15rem 0 .4rem; }
.chess-tier-hero p{ margin: 0; opacity: .94; }
.tier-hero-icon{ font-size: 3rem; line-height: 1; }
.tier-hero-1{ background: linear-gradient(135deg, var(--jf-green), var(--jf-green-dark)); }
.tier-hero-2{ background: linear-gradient(135deg, var(--jf-gold), var(--jf-gold-dark)); color: var(--jf-black); }
.tier-hero-3{ background: linear-gradient(135deg, #1f1d2b, var(--jf-black)); }
.tier-hero-4{ background: linear-gradient(135deg, var(--jf-green-dark), var(--jf-black)); }

.learn-h{
  margin: 1.4rem 0 .7rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
}

.chess-piece-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .9rem;
}
.chess-piece-tile{
  background: var(--c-card, #fff);
  border-radius: 16px;
  padding: 1rem 1.05rem;
  border: 2px solid transparent;
  border-left-width: 6px;
}
.chess-piece-tile.tier-card-green{ border-left-color: var(--jf-green); }
.chess-piece-tile.tier-card-gold { border-left-color: var(--jf-gold); }
.chess-piece-tile.tier-card-black{ border-left-color: var(--jf-black); }
.cpt-sym{
  font-size: 3rem; line-height: 1; margin-bottom: .35rem;
  text-align: center;
}
.chess-piece-tile h4{
  margin: 0 0 .35rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  text-align: center;
}
.cpt-moves{ margin: .4rem 0; font-size: .9rem; }
.cpt-analogy{
  margin: .4rem 0;
  font-size: .9rem;
  font-style: italic;
  color: var(--jf-green-dark);
  background: rgba(0,155,58,.07);
  padding: .5rem .65rem;
  border-radius: 10px;
}
.cpt-watch{
  margin: .35rem 0 0;
  padding-left: 1.2rem;
  font-size: .85rem;
  color: var(--c-ink-soft);
}
.cpt-watch li{ margin-bottom: .2rem; }

.chess-lesson-list{
  display: flex; flex-direction: column; gap: .5rem;
}
.chess-lesson{
  background: var(--c-card, #fff);
  border-radius: 12px;
  border: 1px solid rgba(20,15,30,.08);
  border-left: 5px solid var(--jf-green);
  padding: 0;
  overflow: hidden;
}
.chess-lesson > summary{
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem;
}
.chess-lesson > summary::-webkit-details-marker{ display: none; }
.chess-lesson-num{
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,155,58,.12);
  color: var(--jf-green-dark);
  border-radius: 50%;
  font-weight: 800;
}
.chess-lesson-body{
  padding: 0 1.1rem 1rem 4rem;
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 1.1rem;
  align-items: start;
}
.chess-lesson-body p{ margin: 0; }
.chess-lesson p{ margin: 0; padding: 0 1.1rem 1rem 4rem; }

/* Compact 8x8 diagram next to each Big Idea — reuses the storybook
   .cbk-* infrastructure but shrinks the max-width so the board sits
   alongside the lesson text on desktop, stacks above it on mobile. */
.chess-tip-diagram{
  margin: 0;
  padding: 0;
}
.chess-tip-diagram .cbk-board.cbk-tip-board{
  max-width: 220px;
  border-radius: 8px;
  border-width: 2px;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.35);
}
.chess-tip-diagram .cbk-tip-board .cbk-piece{
  font-size: clamp(.95rem, 3vw, 1.4rem);
}
.chess-tip-diagram .cbk-tip-board .cbk-dot{
  width: 32%; height: 32%;
}
.chess-tip-diagram .cbk-tip-board .cbk-dot-x{
  font-size: .85rem;
}
.cbk-tip-star{
  font-size: 1.1rem;
  color: #f59e0b;
  text-shadow: 0 0 4px rgba(245, 158, 11, .6);
  line-height: 1;
}
.chess-tip-diagram figcaption{
  font-size: .82rem;
  color: #6b5b8a;
  margin-top: .45rem;
  font-style: italic;
  max-width: 240px;
  line-height: 1.4;
}
@media (max-width: 640px){
  .chess-lesson-body{
    grid-template-columns: 1fr;
    padding-left: 1.1rem;
  }
  .chess-tip-diagram .cbk-board.cbk-tip-board{ max-width: 180px; margin: 0 auto; }
  .chess-tip-diagram figcaption{ text-align: center; max-width: none; }
}

.chess-cta-row{
  margin-top: 1.4rem;
}
.btn-jamaica{
  background: var(--jf-green);
  color: #fff;
  border-color: var(--jf-green-dark);
  font-weight: 700;
}
.btn-jamaica:hover{ background: var(--jf-green-dark); }

@media (max-width: 600px){
  .chess-tier-hero{ flex-direction: column; text-align: center; }
  .chess-lesson p{ padding: 0 1rem 1rem 1rem; }
}

/* ============== CARIBBEAN HERO SPOTLIGHT ============== */
.hero-spotlight{ padding-top: 0; }
.hero-spot-card{
  background-image: linear-gradient(135deg, #009b3a 0%, #007a2e 30%, #000 60%, #1f1d2b 80%, #c79a00 100%);
  background-color: #1f1d2b;
  border-radius: 22px;
  padding: 1.4rem 1.5rem;
  color: #fff;
  box-shadow: 0 12px 30px rgba(20,15,30,.25);
  border: 2px solid #FFD100;
}
.hero-spot-card .hero-eyebrow{
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #FFD100;
  margin-bottom: .55rem;
}
.hero-spot-card .hero-grid{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.hero-spot-card .hero-icon{
  font-size: 3.2rem; line-height: 1;
  background: rgba(255,255,255,.14);
  border-radius: 16px;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.hero-spot-card .hero-text h3{
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  margin: 0 0 .15rem;
  font-size: 1.6rem;
  color: #FFD100;
}
.hero-spot-card .hero-tag{
  margin: 0 0 .55rem;
  font-size: .9rem;
  opacity: .9;
  font-style: italic;
  color: #fff;
}
.hero-spot-card .hero-blurb{ margin: 0; font-size: .98rem; line-height: 1.45; color: #fff; }
@media (max-width: 600px){
  .hero-spot-card .hero-grid{ grid-template-columns: 1fr; text-align: center; }
  .hero-spot-card .hero-icon{ margin: 0 auto; }
}

/* ============== ROBOTICS — Sense/Decide/Act animation ============== */
.lit-card-robotics{ border-color: var(--jf-gold-dark, #c79a00); }
.lit-card-robotics .lit-tag{
  background: rgba(254,209,0,.25); color: var(--jf-black, #000);
}
.lit-card-robotics .lit-cta{ color: var(--jf-gold-dark, #c79a00); }

.bot-loop{
  background: var(--c-card, #fff);
  border-radius: 18px;
  padding: 1.1rem 1.2rem 1.4rem;
  margin: 1rem 0 1.4rem;
  border: 2px solid var(--jf-gold);
}
.bot-loop-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: .7rem;
  align-items: stretch;
  margin: .4rem 0 .8rem;
}
.bot-loop-step{
  background: rgba(0,0,0,.04);
  border-radius: 14px;
  padding: .9rem .85rem;
  text-align: center;
}
.bot-step-sense  { background: rgba(0,155,58,.10); border: 2px solid var(--jf-green); }
.bot-step-decide { background: rgba(20,15,30,.06); border: 2px solid var(--jf-black); }
.bot-step-act    { background: rgba(254,209,0,.18); border: 2px solid var(--jf-gold); }
.bot-loop-step h4{
  margin: .3rem 0 .25rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 1rem;
}
.bot-loop-step p{ margin: 0; font-size: .85rem; }
.bls-icon{ font-size: 1.8rem; line-height: 1; }
.bot-loop-arrow{
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--c-ink-soft);
  animation: bot-arrow-pulse 1.6s ease-in-out infinite;
}
@keyframes bot-arrow-pulse {
  0%,100% { opacity: .4; transform: translateX(-3px); }
  50%     { opacity: 1;  transform: translateX(3px); }
}
.bot-stage{
  position: relative;
  height: 90px;
  background: linear-gradient(180deg, rgba(0,155,58,.06), rgba(254,209,0,.10));
  border-radius: 14px;
  margin-top: .8rem;
  overflow: hidden;
}
.bot-track{
  position: absolute; left: 5%; right: 5%; bottom: 18px; height: 4px;
  background: repeating-linear-gradient(
    90deg, var(--jf-black) 0 12px, transparent 12px 22px);
  opacity: .4;
}
.bot-mango{
  position: absolute; right: 6%; bottom: 22px;
  font-size: 2rem; line-height: 1;
  animation: bot-mango-bob 1.8s ease-in-out infinite;
}
@keyframes bot-mango-bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.bot-bot{
  position: absolute; left: 4%; bottom: 18px;
  font-size: 2.2rem; line-height: 1;
  animation: bot-roll 4s ease-in-out infinite;
}
@keyframes bot-roll {
  0%   { left: 4%;  transform: translateY(0) rotate(0deg); }
  35%  { left: 4%;  transform: translateY(-2px) rotate(0deg); }
  40%  { left: 4%;  transform: translateY(0) rotate(-12deg); }
  85%  { left: 78%; transform: translateY(0) rotate(0deg); }
  92%  { left: 78%; transform: translateY(-4px) rotate(0deg); }
  100% { left: 4%;  transform: translateY(0) rotate(0deg); }
}
.bot-stage-cap{ margin: .55rem 0 0; font-size: .82rem; text-align: center; }
@media (max-width: 600px){
  .bot-loop-row{
    grid-template-columns: 1fr;
  }
  .bot-loop-arrow{
    transform: rotate(90deg);
    margin: -.2rem 0;
  }
}

/* ============== LITERACY HUB & PATH ============== */
.lit-pair{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 1.4rem;
}
.lit-card{
  display: block;
  text-decoration: none;
  background: var(--c-card, #fff);
  border-radius: 22px;
  padding: 1.5rem 1.4rem 1.3rem;
  color: var(--c-ink);
  border: 3px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 6px 18px rgba(20,15,30,.08);
}
.lit-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(20,15,30,.13);
}
.lit-card-coding{ border-color: var(--jf-green); }
.lit-card-ai{ border-color: var(--jf-black); }
.lit-card .lit-icon{ font-size: 2.6rem; line-height: 1; margin-bottom: .35rem; }
.lit-card .lit-tag{
  display: inline-block;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  padding: .2rem .65rem; border-radius: 999px;
  background: rgba(0,155,58,.12); color: var(--jf-green-dark);
  text-transform: uppercase;
  margin-bottom: .55rem;
}
.lit-card-ai .lit-tag{ background: rgba(20,15,30,.1); color: var(--jf-black); }
.lit-card h3{
  margin: 0 0 .45rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 1.25rem;
}
.lit-card > p{ margin: 0 0 .7rem; color: var(--c-ink-soft, #555); }
.lit-bullets{
  list-style: none; padding: 0; margin: 0 0 .9rem;
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .92rem;
}
.lit-cta{
  display: inline-block;
  font-weight: 700;
  color: var(--jf-green-dark);
}
.lit-card-ai .lit-cta{ color: var(--jf-black); }

.lit-hero{
  display: flex; align-items: center; gap: 1.1rem;
  margin: 1.2rem 0;
  padding: 1.4rem 1.4rem;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--lit-accent, var(--jf-green)), rgba(0,0,0,.4));
  color: #fff;
}
.lit-hero-icon{ font-size: 3rem; line-height: 1; }
.lit-hero-text{ flex: 1; }
.lit-hero-text h2{ margin: .1rem 0 .35rem; }
.lit-hero-text p{ margin: 0 0 .55rem; opacity: .92; }
.lit-progress{
  display: flex; align-items: center; gap: .6rem;
  font-size: .85rem;
}
.lit-bar{
  flex: 1;
  height: 8px; max-width: 240px;
  background: rgba(255,255,255,.25);
  border-radius: 999px; overflow: hidden;
}
.lit-bar > span{
  display: block; height: 100%;
  background: var(--jf-gold, #FFD100);
  border-radius: 999px;
}

.lit-lessons{
  display: flex; flex-direction: column; gap: .55rem;
  margin-top: 1rem;
}
.lit-lesson{
  background: var(--c-card, #fff);
  border-radius: 14px;
  border: 1px solid rgba(20,15,30,.08);
  border-left: 5px solid var(--c-ink-soft, #999);
  overflow: hidden;
  transition: border-color .15s ease;
}
.lit-lesson.is-done{ border-left-color: var(--jf-green); }
.lit-lesson > summary{
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1rem;
  user-select: none;
}
.lit-lesson > summary::-webkit-details-marker{ display: none; }
.lit-num{
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,155,58,.12);
  color: var(--jf-green-dark);
  border-radius: 50%;
  font-weight: 800;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
}
.lit-lesson.is-done .lit-num{
  background: var(--jf-green); color: #fff;
}
.lit-summary-text strong{ display: block; }
.lit-summary-text .lit-meta{
  font-size: .78rem; color: var(--c-ink-soft, #666);
}
.lit-body{
  padding: 0 1.2rem 1rem 4rem;
}
.lit-body-text p{ margin: 0 0 .65rem; }
.lit-actions{
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-top: .65rem;
}
.btn-practice{
  background: var(--jf-green);
  color: #fff;
  border-color: var(--jf-green-dark);
  text-decoration: none;
}
.btn-practice:hover{ background: var(--jf-green-dark); }

@media (max-width: 600px){
  .lit-body{ padding: 0 1rem 1rem 1rem; }
  .lit-hero{ flex-direction: column; text-align: center; }
}

/* ============== WHATSAPP PARENT REPORT MODAL ============== */
.btn-wa{
  background: #25D366;
  color: #fff;
  border-color: #1da851;
}
.btn-wa:hover{ background: #1da851; }
a.btn-wa{ text-decoration: none; }

.class-section-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-top: 1.6rem;
}
.class-section-row .class-section-h{ margin: 0; }
.row-actions{ display: flex; gap: .35rem; justify-content: flex-end; }

.wa-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 1rem;
  animation: lc-wa-fade .15s ease-out;
}
@keyframes lc-wa-fade { from { opacity: 0 } to { opacity: 1 } }
.wa-modal{
  background: var(--c-card, #fff);
  width: min(560px, 100%);
  max-height: 85vh;
  border-radius: 18px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.wa-modal-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid rgba(20,15,30,.08);
}
.wa-modal-head h3{ margin: 0; font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif); }
.wa-close{
  background: transparent; border: 0;
  font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--c-ink-soft);
  padding: 0 .25rem;
}
.wa-blurb{ padding: .6rem 1.1rem 0; margin: 0; font-size: .85rem; }

.wa-list{
  padding: .8rem 1.1rem;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: .9rem;
}
.wa-card{
  border: 1px solid rgba(20,15,30,.1);
  border-radius: 12px;
  padding: .7rem .85rem;
  background: rgba(0,155,58,.04);
}
.wa-card-head{
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: .5rem; flex-wrap: wrap;
}
.wa-grade{
  font-size: .72rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 999px;
  background: rgba(0,155,58,.15); color: var(--jf-green-dark);
  letter-spacing: .04em; text-transform: uppercase;
}
.wa-text{
  width: 100%; font-family: ui-monospace, SF Mono, Menlo, monospace;
  font-size: .88rem; line-height: 1.45;
  padding: .6rem .7rem; border-radius: 8px;
  border: 1px solid rgba(20,15,30,.12);
  resize: vertical; min-height: 6.5rem;
  background: #fff;
}
.wa-actions{ display: flex; gap: .4rem; margin-top: .55rem; flex-wrap: wrap; }
.wa-status{ margin: .35rem 0 0; font-size: .8rem; }

.wa-foot{
  display: flex; justify-content: flex-end;
  padding: .7rem 1.1rem;
  border-top: 1px solid rgba(20,15,30,.06);
}

@media (max-width: 520px){
  .wa-modal{ max-height: 92vh; }
  .wa-list{ padding: .6rem .8rem; }
}

/* ============== AI VOICE BUTTONS — mic + speaker ============== */
.btn-mic, .btn-speaker{
  width: 44px;
  padding: .5rem 0;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.btn-mic-listening{
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #b91c1c !important;
  animation: lc-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes lc-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
.btn-speaker-on{
  background: var(--jf-green, #009b3a) !important;
  color: #fff !important;
  border-color: var(--jf-green-dark, #007a2e) !important;
}

/* ============== AI: Patois hint + brain badges ============== */
.brain-live, .brain-offline{
  display: inline-flex; align-items: center; gap: .25rem;
  margin-left: .5rem; padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  vertical-align: middle;
}
.brain-live{
  background: var(--jf-green, #009b3a);
  color: #fff;
}
.brain-offline{
  background: rgba(20,15,30,.08);
  color: var(--c-ink-soft, #555);
}
.patois-hint{
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .85rem;
  background: rgba(0,155,58,.07);
  border-top: 1px solid rgba(0,155,58,.15);
  font-size: .85rem;
  color: var(--c-ink-soft, #444);
  border-radius: 0 0 14px 14px;
  transition: background .2s ease;
}
.patois-hint--active{
  background: rgba(254,209,0,.18);
  color: var(--jf-black, #000);
  font-weight: 700;
  border-top-color: var(--jf-gold, #FFD100);
}
.patois-flag{ font-size: 1.05rem; }
.patois-eg{ cursor: pointer; }
.patois-eg:hover{ background: rgba(0,155,58,.12); }

/* ============== INSTALL APP CHIP + iOS HELP MODAL ============== */
.lc-install-chip{
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 60;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem;
  background: linear-gradient(135deg, var(--jf-green, #009b3a), var(--jf-green-dark, #007a2e));
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,155,58,.35), 0 2px 0 rgba(0,0,0,.15);
  animation: lc-install-pop .35s cubic-bezier(.2,.8,.3,1.4);
}
@keyframes lc-install-pop {
  from { opacity: 0; transform: translateY(-8px) scale(.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lc-install-chip:hover{
  background: var(--jf-green-dark, #007a2e);
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(0,155,58,.45), 0 3px 0 rgba(0,0,0,.18);
}
.lc-install-icon{ font-size: 1.05rem; line-height: 1; }
.lc-install-text{ letter-spacing: .02em; }
.lc-install-close{
  margin-left: .25rem;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
}
.lc-install-close:hover{ background: rgba(255,255,255,.35); }

/* Phone: pin the install FAB to the TOP of the screen (top-centre)
   so it's the first thing a parent sees and never overlaps the
   bottom nav bar / Robi FAB. env(safe-area-inset-top) handles
   notched iPhones — the chip clears the notch automatically. */
@media (max-width: 480px){
  .lc-install-chip{
    top: max(0.55rem, env(safe-area-inset-top, 0.55rem));
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    font-size: .85rem;
    padding: .5rem .85rem;
    box-shadow: 0 4px 14px rgba(0,155,58,.45), 0 2px 0 rgba(0,0,0,.15);
    animation: lc-install-pop-mobile .35s cubic-bezier(.2,.8,.3,1.4);
  }
  .lc-install-chip:hover{
    /* Preserve centring while applying the hover lift */
    transform: translateX(-50%) translateY(-1px);
  }
  @keyframes lc-install-pop-mobile {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.85); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  }
}

/* Tablet: top-right still works well — leave the default. */
@media (min-width: 481px) and (max-width: 1024px){
  .lc-install-chip{ top: max(.8rem, env(safe-area-inset-top, .8rem)); right: .8rem; }
}
@media print {
  .lc-install-chip{ display: none !important; }
}

.lc-install-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 1rem;
  animation: lc-install-fade .15s ease-out;
}
@keyframes lc-install-fade { from { opacity: 0 } to { opacity: 1 } }
.lc-install-modal{
  background: #fff;
  border-radius: 22px;
  padding: 1.6rem 1.5rem;
  max-width: 460px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  text-align: left;
}
.lc-install-modal h3{
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  margin: 0 0 .5rem;
  font-size: 1.3rem;
  color: var(--c-ink, #15161c);
}
.lc-install-modal p{ margin: 0 0 .8rem; line-height: 1.5; }
.lc-install-modal-close{
  position: absolute; top: .6rem; right: .8rem;
  background: transparent; border: 0;
  font-size: 1.5rem; cursor: pointer;
  color: var(--c-ink-soft, #555);
}
.lc-install-modal-close:hover{ color: var(--c-ink, #15161c); }
.lc-install-steps{
  background: rgba(0,155,58,.07);
  border-radius: 12px;
  padding: .8rem 1.1rem .8rem 2rem;
  margin: .8rem 0;
}
.lc-install-steps li{ margin: .45rem 0; line-height: 1.5; }
.lc-install-share{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--jf-green, #009b3a);
  color: #fff;
  border-radius: 6px;
  margin-left: .35rem;
  font-size: 1.1rem;
  vertical-align: middle;
}
.lc-install-note{
  font-size: .88rem;
  color: var(--c-ink-soft, #555);
  font-style: italic;
}
.lc-install-modal-ok{
  display: inline-block;
  margin-top: .6rem;
  padding: .7rem 1.4rem;
  background: var(--jf-green, #009b3a);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--jf-green-dark, #007a2e);
}
.lc-install-modal-ok:hover{ background: var(--jf-green-dark, #007a2e); }

/* ============== GLOBAL BACK BUTTON ============== */
.global-back{
  position: sticky;
  top: 0;
  z-index: 49;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .8rem 0 0 1rem;
  padding: .45rem .9rem;
  background: var(--c-card, #fff);
  border: 1.5px solid rgba(20,15,30,.12);
  border-radius: 999px;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 700;
  font-size: .9rem;
  color: var(--c-ink, #15161c);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20,15,30,.06);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.global-back:hover{
  background: var(--jf-green, #009b3a);
  color: #fff;
  border-color: var(--jf-green-dark, #007a2e);
  transform: translateX(-2px);
}
.global-back[hidden]{ display: none; }
@media print {
  .global-back{ display: none !important; }
}

/* ============== OFFLINE INDICATOR ============== */
.offline-banner{
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .55rem 1rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 600; font-size: .92rem;
  color: var(--jf-gold, #FFD100);
  background: var(--jf-black, #000);
  border-bottom: 2px solid var(--jf-gold, #FFD100);
  text-align: center;
}
.offline-banner[hidden]{ display: none; }
.offline-dot{
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--jf-gold, #FFD100);
  box-shadow: 0 0 0 0 rgba(254,209,0,.6);
  animation: lc-offline-pulse 1.6s ease-in-out infinite;
}
@keyframes lc-offline-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(254,209,0,.7); }
  50%     { box-shadow: 0 0 0 .35rem rgba(254,209,0,0); }
}
@media (max-width: 480px){
  .offline-banner{ font-size: .82rem; padding: .45rem .6rem; }
}

/* ============== TOP NAV ============== */
/* Matches the home palette: soft purple-white wash, lime accent under the
   LC mark, "Coders" wordmark in purple instead of coral. The --bh-* vars
   are defined globally in css/v5-bold-home.css :root. */
.topnav{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 2.5rem);
  background: var(--bh-bg, #F4F1FF);
  border-bottom: 1px solid rgba(104,73,240,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--f-display);
  font-size: 1.4rem; font-weight: 700;
  color: var(--c-ink);
}
.brand-mark{
  width:42px; height:42px; border-radius: 14px;
  background: var(--c-ink); color: #fff;
  display:grid; place-items:center;
  font-weight:700; font-size:1rem;
  box-shadow: 0 4px 0 var(--bh-lime, #DDFF00);
}
.brand-name em{ font-style: normal; color: var(--bh-purple, #6849F0); }

.nav-links{
  display:flex; gap: .8rem; flex-wrap:wrap; align-items:center;
  flex: 1 1 auto;
  justify-content: space-between;
}
.nav-primary, .nav-secondary{
  display: flex; align-items: center; gap: .25rem;
  flex-wrap: wrap;
}
.nav-secondary{
  margin-left: auto;
  border-left: 1px solid rgba(104,73,240,.15);
  padding-left: .8rem;
  gap: .35rem;
}

/* "I'm [Name]" chip + switch button (top nav, right side). */
.nav-student-chip{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .25rem;
  background: rgba(221,255,0,.20);
  border: 1.5px solid rgba(184,230,0,.45);
  border-radius: 999px;
  margin-right: .25rem;
}
/* Honour the [hidden] attribute even though we set display:inline-flex
   above — otherwise anonymous visitors see an empty "🧒 — ↔" chip in
   the menu drawer before they've signed up. */
.nav-student-chip[hidden]{ display: none; }
.nav-student-chip-link{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none !important;
  color: var(--bh-ink, #161235);
  border-radius: 999px;
  transition: background .12s;
}
.nav-student-chip-link:hover{ background: rgba(255,255,255,.50); }
.nav-student-avatar{ font-size: 1rem; line-height: 1; }
.nav-student-name{ max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-student-switch{
  background: transparent;
  border: none;
  cursor: pointer;
  padding: .15rem .45rem;
  font-size: .9rem;
  color: var(--bh-purple-dk, #4B2DDB);
  border-radius: 999px;
  transition: background .12s, transform .12s;
  line-height: 1;
}
.nav-student-switch:hover{
  background: rgba(255,255,255,.50);
  transform: rotate(180deg);
}
@media (max-width: 640px){
  .nav-student-chip{ margin-right: 0; }
  .nav-student-name{ max-width: 80px; font-size: .76rem; }
}
/* On the role-gate landing (#/) and on every page until a student
   profile exists on the device, hide the student-primary strip and
   the mobile bottom bar — visitors should only see the brand and
   the corner Teachers/About links until they sign in. */
body.is-landing .nav-primary,
body.is-landing #mobileBar,
body.is-anon .nav-primary,
body.is-anon #mobileBar{ display: none !important; }
body.is-landing .nav-secondary,
body.is-anon .nav-secondary{
  margin-left: auto;
  border-left: none;
  padding-left: 0;
}
.nav-links a{
  padding: .55rem 1rem; border-radius: 999px;
  color: var(--c-ink); font-weight: 600; font-size:.95rem;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
/* Secondary nav links read as bh-style chips: white pill, faint purple
   border, lift + purple border on hover, lime fill when active. */
.nav-secondary a{
  font-size: .82rem;
  font-weight: 700;
  padding: .45rem 1rem;
  color: var(--c-ink, #15131c);
  letter-spacing: .01em;
  background: #fff;
  border: 1.5px solid rgba(104,73,240,.18);
  box-shadow: 0 4px 12px rgba(75,45,219,.06);
}
.nav-secondary a:hover{
  border-color: var(--bh-purple, #6849F0);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(75,45,219,.12);
}
.nav-secondary a.active{
  background: var(--bh-lime, #DDFF00) !important;
  color: var(--c-ink, #15131c) !important;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(184,230,0,.40);
}
.nav-links a:hover{ background: rgba(104,73,240,.08); }
.nav-links a.active{ background: var(--bh-purple, #6849F0); color:#fff; }
@media (max-width: 760px){
  .nav-secondary{ border-left: none; padding-left: 0; margin-left: 0; }
}
.nav-cta{
  background: var(--c-coral) !important; color:#fff !important;
  padding:.55rem 1.1rem !important;
  box-shadow: 0 3px 0 var(--c-coral-d);
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 4px 0 var(--c-coral-d); }

.nav-burger{ display:none; padding:.5rem; }
.nav-burger span{
  display:block; width:26px; height:3px; background:var(--c-ink);
  margin: 5px 0; border-radius: 2px;
}
@media (max-width: 760px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction: column; gap:0;
    background: var(--c-page); border-bottom:1px solid rgba(20,15,30,.06);
    padding:.5rem 1rem;
    display: none;
  }
  .nav-links.open{ display: flex; box-shadow: var(--shadow-md); }
  .nav-links a{ padding:.85rem; border-radius:10px; width: 100%; }
  .nav-burger{ display:block; }
}

/* ============== APP ROOT ============== */
.app-root{
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem);
  max-width: 1300px;
  margin: 0 auto;
}

/* ============== BUTTONS ============== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .85rem 1.6rem; border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700; font-size: 1.05rem;
  background: var(--c-coral); color:#fff;
  box-shadow: 0 5px 0 var(--c-coral-d);
  transition: transform .12s ease, box-shadow .12s ease;
  text-transform: none;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 7px 0 var(--c-coral-d); }
.btn:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--c-coral-d); }
.btn-dark{ background: var(--c-ink); box-shadow: 0 5px 0 #000; }
.btn-dark:hover{ box-shadow: 0 7px 0 #000; }
.btn-light{ background: #fff; color: var(--c-ink); box-shadow: 0 5px 0 var(--c-line); }
.btn-light:hover{ box-shadow: 0 7px 0 var(--c-line); }
.btn-ghost{ background:transparent; color:var(--c-ink); box-shadow: none; border: 2px solid var(--c-ink); }
.btn-ghost:hover{ background: rgba(0,0,0,.05); box-shadow: none; }
/* btn-tiny gets a guaranteed 44px tap target via min-height while keeping
   its visual padding compact — Apple HIG minimum for accessibility, and
   essential for kids ages 4-7 whose tap precision is poor. */
.btn-tiny{ padding:.5rem 1rem; font-size:.85rem; min-height: 44px; box-shadow: 0 3px 0 var(--c-coral-d); }
.btn-tiny:hover{ box-shadow: 0 4px 0 var(--c-coral-d); }
.btn-block{ width:100%; justify-content:center; }
.btn-play{
  font-family: var(--f-display); font-weight: 700;
  background: #fff; color: var(--c-ink);
  padding: .35rem 1rem; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
  font-size:.9rem; letter-spacing:.04em;
}

/* ============== HERO / LANDING ============== */
.hero-card{
  background: var(--c-card);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.2rem, 5vw, 3rem) 0;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-top: .5rem;
}
.hero-card .hero-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: clamp(1.5rem, 5vw, 3rem); flex-wrap:wrap; gap:.5rem;
}
.hero-mini-brand{
  font-family: var(--f-display); font-weight:700; font-size: 1.2rem;
}
.hero-mini-nav{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-mini-nav a{ font-weight:600; font-size:.9rem; color: var(--c-ink-soft); }
.hero-mini-nav a:hover{ color: var(--c-ink); }
.hero-mini-nav .new{
  font-size:.65rem; color:#fff; background: var(--c-coral);
  padding: 1px 6px; border-radius: 4px; margin-left: 2px; vertical-align: top;
}
.hero-headline{ text-align:center; padding: 1rem 0 1.5rem; }
.hero-headline h1{ margin: 0 0 .8rem; }
.hero-headline .sub{
  max-width: 540px; margin: 0 auto 1.4rem;
  color: var(--c-ink-soft); font-weight: 600;
}

/* play-card grid — wraps so all cards (including Chess) are fully visible */
.play-strip{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 1.5rem 0 2rem;
}
/* On phones, 2 columns max for readability */
@media (max-width: 540px){
  .play-strip{ grid-template-columns: repeat(2, 1fr); }
}
.play-strip::-webkit-scrollbar{ display:none; }

.play-card{
  /* Layered: a deep-tone base, a brighter top-left wash, plus a soft glass highlight on top */
  background:
    radial-gradient(ellipse at 25% 0%, rgba(255,255,255,.28) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(0,0,0,.18) 0%, transparent 55%),
    linear-gradient(155deg, var(--bg, var(--c-coral)) 0%, color-mix(in srgb, var(--bg, var(--c-coral)) 80%, #000 20%) 100%);
  border-radius: 24px;
  padding: 1.1rem 1.1rem .9rem;
  height: 210px;
  position: relative;
  display:flex; flex-direction: column; justify-content: space-between;
  /* Modern soft shadow with a subtle coloured glow that picks up the card's hue */
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 14px 28px -10px rgba(20,15,30,.28),
    0 4px 10px -2px rgba(20,15,30,.18);
  transition: transform .25s cubic-bezier(.2,.7,.3,1.4), box-shadow .25s ease;
  cursor: pointer;
  color: #fff;
  overflow: hidden;
}
.play-card::before{
  /* Subtle "circle blob" behind the icon for depth */
  content: "";
  position: absolute;
  right: -30px; bottom: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle at center, rgba(255,255,255,.22) 0%, transparent 60%);
  pointer-events: none;
}
.play-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 24px 38px -12px rgba(20,15,30,.35),
    0 8px 14px -4px rgba(20,15,30,.22);
}
.play-card .label{
  font-family: var(--f-display);
  font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .015em;
  max-width: 70%;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  position: relative; z-index: 2;
}
.play-card .emoji{
  position: absolute; right: -6px; bottom: 6px;
  font-size: 5.6rem;
  /* Crisp depth on the icon itself */
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.18))
    drop-shadow(0 8px 14px rgba(0,0,0,.22));
  pointer-events:none;
  transform: rotate(-6deg);
  transition: transform .35s cubic-bezier(.2,.7,.3,1.4);
  z-index: 1;
}
.play-card:hover .emoji{ transform: rotate(-2deg) scale(1.06); }
.play-card .btn-play{
  align-self: flex-start;
  margin-top: auto;
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.95);
  color: var(--c-ink, #15161c);
  border: 0;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 6px 14px -4px rgba(20,15,30,.25);
}

/* ============== TRACK CARDS (home page modules — reference layout) ============== */
.tracks-wrap{ padding-top: 1rem; }
.tracks-hero{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2rem;
}
.tracks-hero h2{
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 .6rem;
  letter-spacing: -.01em;
}
.tracks-hero p{
  color: var(--c-ink-soft, #555);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}

.track-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}

.track-card{
  background: var(--c-card, #fff);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 30px -8px rgba(20,15,30,.16), 0 4px 10px -4px rgba(20,15,30,.10);
  border: 1px solid rgba(20,15,30,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.track-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 42px -10px rgba(20,15,30,.24), 0 8px 16px -6px rgba(20,15,30,.14);
}

.track-head{
  display: flex; align-items: center; gap: .65rem;
  padding: 1.05rem 1.1rem;
  color: #fff;
}
.track-head h3{
  margin: 0;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 1.4rem;
  letter-spacing: .005em;
}
.track-grades{
  margin: .15rem 0 0;
  font-size: .82rem;
  opacity: .85;
}
.track-dot{
  width: 14px; height: 14px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

/* Jamaica flag colour variants */
.track-learn .track-head{ background: var(--jf-green, #009b3a); }
.track-code  .track-head{ background: var(--jf-black, #000);    color: var(--jf-gold, #FFD100); }
.track-code  .track-grades{ color: var(--jf-gold, #FFD100); opacity: .85; }
.track-play  .track-head{ background: var(--jf-gold, #FFD100);  color: var(--jf-black, #000); }
.track-play  .track-grades{ color: var(--jf-black, #000); opacity: .75; }

.track-focus{
  margin: 0;
  padding: .7rem 1.1rem;
  background: linear-gradient(180deg, rgba(254,209,0,.12), rgba(254,209,0,.04));
  border-bottom: 1px solid rgba(20,15,30,.06);
  font-size: .9rem;
  color: var(--c-ink, #15161c);
}
.track-focus strong{ font-weight: 700; }

.track-features{
  padding: .9rem 1.1rem;
  display: flex; flex-direction: column; gap: .65rem;
  flex: 1;
}
.track-feature{
  background: rgba(20,15,30,.025);
  border-left: 4px solid;
  padding: .7rem .85rem;
  border-radius: 8px;
}
.track-learn .track-feature{ border-left-color: var(--jf-green, #009b3a); }
.track-code  .track-feature{ border-left-color: var(--jf-black, #000); }
.track-play  .track-feature{ border-left-color: var(--jf-gold, #FFD100); }
.track-feature strong{
  display: block;
  font-size: .95rem;
  margin-bottom: .25rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  color: var(--c-ink, #15161c);
}
.track-feature p{
  margin: 0;
  font-size: .85rem;
  color: var(--c-ink-soft, #555);
  line-height: 1.45;
}

.track-actions{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .4rem;
  padding: .9rem 1.1rem 1rem;
  border-top: 1px dashed rgba(20,15,30,.08);
}
.track-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  padding: .6rem .4rem;
  border-radius: 999px;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-learn .track-btn{ background: var(--jf-green, #009b3a); color: #fff; }
.track-learn .track-btn:hover{ background: var(--jf-green-dark, #007a2e); transform: translateY(-1px); }
.track-code  .track-btn{ background: var(--jf-black, #000); color: var(--jf-gold, #FFD100); }
.track-code  .track-btn:hover{ background: #1f1d2b; transform: translateY(-1px); }
.track-play  .track-btn{ background: var(--jf-gold, #FFD100); color: var(--jf-black, #000); }
.track-play  .track-btn:hover{ background: var(--jf-gold-dark, #c79a00); transform: translateY(-1px); }

.track-btn-ghost{
  background: transparent !important;
  border: 1.5px solid rgba(20,15,30,.18) !important;
  color: var(--c-ink-soft, #555) !important;
}
.track-btn-ghost:hover{
  background: rgba(20,15,30,.05) !important;
  color: var(--c-ink, #15161c) !important;
}

@media (max-width: 480px){
  .track-actions{ grid-template-columns: 1fr; }
}

/* ============== MODULE STRIP — Module 1/2/3 in play-card style ============== */
.module-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
  overflow: visible;        /* not a scrolling strip — full grid */
  padding: 0;
  margin-top: 1.2rem;
}
/* Bigger than the small play-cards — these are hero CTAs */
.play-card.mod-pc{
  height: 240px;
  padding: 1.4rem 1.4rem 1.2rem;
  border-radius: 26px;
  cursor: pointer;
}
.play-card.mod-pc .label{
  font-size: 1.6rem;
  letter-spacing: .01em;
  max-width: 75%;
}
.play-card.mod-pc .emoji{
  right: -2px; bottom: 4px;
  font-size: 7.5rem;
  transform: rotate(-6deg);
}
.play-card.mod-pc .btn-play{
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .55rem 1.2rem;
}

/* Jamaica flag colour variants */
/* Grade tile variants — six grades, distinct colour each */
.grade-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem;
  overflow: visible;
  padding: 0;
  margin-top: 1.2rem;
}
.play-card.grade-pc{
  height: 170px;
  padding: 1.1rem;
  border-radius: 22px;
  cursor: pointer;
}
.play-card.grade-pc .label{
  font-size: 1.3rem;
  letter-spacing: .01em;
  max-width: 70%;
}
.play-card.grade-pc .emoji{
  right: -2px; bottom: 4px;
  font-size: 5.4rem;
  transform: rotate(-6deg);
}
.grade-pc-1{ background: linear-gradient(135deg, #ff8a5b, #ff6b3d); color: #fff; }
.grade-pc-2{ background: linear-gradient(135deg, #f472b6, #ec4899); color: #fff; }
.grade-pc-3{ background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; }
.grade-pc-4{ background: linear-gradient(135deg, #34d399, #059669); color: #fff; }
.grade-pc-5{ background: linear-gradient(135deg, #fbbf24, #d97706); color: #15161c; }
.grade-pc-6{ background: linear-gradient(135deg, #60a5fa, #2563eb); color: #fff; }
.grade-pc-1 .btn-play, .grade-pc-2 .btn-play, .grade-pc-3 .btn-play, .grade-pc-4 .btn-play, .grade-pc-6 .btn-play{
  background: rgba(255,255,255,.95); color: var(--c-ink, #15161c);
}
.grade-pc-5 .btn-play{ background: var(--c-ink, #15161c); color: var(--jf-gold, #FFD100); }

.grade-extras-h{
  margin: 1.8rem 0 .5rem;
  font-family: var(--ff-display, 'Fredoka', system-ui, sans-serif);
  font-size: 1rem;
  color: var(--c-ink-soft, #555);
  font-weight: 600;
}

/* New module tile variants for the special-tabs row */
.mod-pc-chess{ background: var(--jf-black, #000); color: var(--jf-gold, #FFD100); box-shadow: 0 6px 0 #1f1d2b; }
.mod-pc-chess .btn-play{ background: var(--jf-gold, #FFD100); color: var(--jf-black, #000); }
.mod-pc-tots{ background: linear-gradient(135deg, #fda4af 0%, #ff8a5b 100%); color: #fff; box-shadow: 0 6px 0 #c2410c; }
.mod-pc-tots .btn-play{ background: rgba(255,255,255,.95); color: var(--c-ink, #15161c); }
.mod-pc-pep{ background: linear-gradient(135deg, #f472b6, #ec4899); color: #fff; box-shadow: 0 6px 0 #be185d; }
.mod-pc-pep .btn-play{ background: rgba(255,255,255,.95); color: var(--c-ink, #15161c); }
.mod-pc-brain{ background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff; box-shadow: 0 6px 0 #4338ca; }
.mod-pc-brain .btn-play{ background: rgba(255,255,255,.95); color: var(--c-ink, #15161c); }

.mod-pc-learn{ background: var(--jf-green, #009b3a);  color: #fff; box-shadow: 0 6px 0 var(--jf-green-dark, #007a2e); }
.mod-pc-learn:hover{ box-shadow: 0 9px 0 var(--jf-green-dark, #007a2e); }
.mod-pc-code { background: var(--jf-black, #000);     color: var(--jf-gold, #FFD100); box-shadow: 0 6px 0 #1f1d2b; }
.mod-pc-code:hover{ box-shadow: 0 9px 0 #1f1d2b; }
.mod-pc-code .label{ color: var(--jf-gold, #FFD100); }
.mod-pc-code .btn-play{ background: var(--jf-gold, #FFD100); color: var(--jf-black, #000); }
.mod-pc-play { background: var(--jf-gold, #FFD100);   color: var(--jf-black, #000); box-shadow: 0 6px 0 var(--jf-gold-dark, #c79a00); }
.mod-pc-play:hover{ box-shadow: 0 9px 0 var(--jf-gold-dark, #c79a00); }
.mod-pc-play .label, .mod-pc-play .btn-play{ color: var(--jf-black, #000); }
.mod-pc-play .btn-play{ background: var(--jf-black, #000); color: var(--jf-gold, #FFD100); }

@media (max-width: 480px){
  .play-card.mod-pc{ height: 180px; padding: 1rem; border-radius: 20px; }
  .play-card.mod-pc .label{ font-size: 1.2rem; }
  .play-card.mod-pc .emoji{ font-size: 5.5rem; }
}

/* ============== SECTIONS ============== */
.section{ padding: clamp(1.8rem, 5vw, 3.5rem) 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content: space-between;
  flex-wrap: wrap; gap:.5rem; margin-bottom: 1.2rem;
}
.section-head h2{ margin: 0; text-transform: uppercase; }
.section-head .eyebrow{
  font-weight:700; color: var(--c-coral); text-transform: uppercase;
  letter-spacing:.1em; font-size: .8rem; display:block; margin-bottom: .3rem;
}
.section-head .small{ font-size: .9rem; color: var(--c-ink-soft); }

/* feature grid */
.feature-grid{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.feature-card{
  background:#fff; border-radius: var(--r-md);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.feature-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-card .ico{
  width:48px; height:48px; border-radius: 14px;
  display:grid; place-items:center; font-size: 1.5rem;
  margin-bottom:.7rem; color:#fff;
}
.feature-card .ico.c1{ background: var(--c-coral); }
.feature-card .ico.c2{ background: var(--c-purple); }
.feature-card .ico.c3{ background: var(--c-green); }
.feature-card .ico.c4{ background: var(--c-blue); }
.feature-card .ico.c5{ background: var(--c-pink); }
.feature-card .ico.c6{ background: var(--c-yellow); color: var(--c-ink); }

/* Clean (emoji-free) feature card variant — uses a coloured top stripe */
.feature-card--clean{ position: relative; padding-top: 1.6rem; }
.feature-card--clean .feature-bar{
  position: absolute; left: 0; right: 0; top: 0;
  height: 6px;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.feature-card--clean h3{ color: var(--c-ink); margin-bottom: .35rem; }
.feature-bar.c1{ background: var(--c-coral); }
.feature-bar.c2{ background: var(--c-purple); }
.feature-bar.c3{ background: var(--c-green); }
.feature-bar.c4{ background: var(--c-blue); }
.feature-bar.c5{ background: var(--c-pink); }
.feature-bar.c6{ background: var(--c-yellow); }
.feature-card h3{ margin-bottom:.3rem; }
.feature-card p{ font-size:.95rem; margin:0; }

/* ============== GRADE CARDS ============== */
.grade-grid{
  display:grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grade-card{
  position: relative; overflow:hidden;
  background: var(--accent, var(--c-coral));
  color: #fff;
  border-radius: var(--r-md);
  padding: 1.4rem 1.3rem 1.2rem;
  cursor:pointer;
  transition: transform .2s, box-shadow .2s;
  min-height: 220px;
  display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
}
.grade-card:hover{ transform: translateY(-4px); box-shadow: 0 9px 0 rgba(0,0,0,.18); }
.grade-card::before{
  content: attr(data-num);
  position:absolute; top: -22px; right: -6px;
  font-family: var(--f-display);
  font-size: 11rem; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.18);
  pointer-events:none;
}
.grade-card .pill{
  display:inline-block; padding:.25rem .8rem; border-radius:999px;
  font-size:.78rem; font-weight:700; margin-bottom:.5rem;
  background: rgba(0,0,0,.18); color: #fff;
  text-transform: uppercase; letter-spacing:.05em;
  align-self: flex-start;
}
.grade-card h3{
  font-family: var(--f-display); font-size: 1.7rem;
  text-transform: uppercase; color:#fff; margin-bottom:.2rem;
}
.grade-card .meta{
  display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.4rem;
  font-size:.85rem; color: rgba(255,255,255,.9); font-weight:600;
}
.grade-card .emoji{
  position: absolute; right: -10px; bottom: -10px;
  font-size: 6rem; transform: rotate(-10deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
  opacity: .9;
}

/* ============== GRADE DETAIL ============== */
.grade-hero{
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  color:#fff;
  background: var(--accent, var(--c-coral));
  margin-bottom: 1.5rem;
  position: relative; overflow:hidden;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
}
.grade-hero h1{ color:#fff; margin:0 0 .5rem; }
.grade-hero p{ color: rgba(255,255,255,.92); margin:0; max-width: 760px; }
.grade-hero .emoji{
  position:absolute; right: -10px; bottom:-15px;
  font-size: clamp(7rem, 18vw, 11rem); transform: rotate(-8deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
  opacity: .85;
}
/* Slim variant — drops the giant headline + watermark emoji so the kid's
   Top-3 and subject grid come up much faster on first paint. */
.grade-hero--slim{ padding: 1rem 1.2rem; margin-bottom: 1rem; }
.grade-hero--slim h1{
  font-size: clamp(1.4rem, 4vw, 1.9rem); margin: .35rem 0 .35rem;
}
.grade-hero--slim p{ font-size: .98rem; }
.grade-hero--slim .pill{
  display: inline-block; font-size: .78rem; padding: .35rem .75rem;
  border-radius: 999px; font-weight: 700;
}
.tabs{
  display:flex; gap:.4rem; flex-wrap:wrap;
  background:#fff; padding:.4rem;
  border-radius: 999px;
  margin: 1rem 0 1.5rem;
  width: fit-content;
  box-shadow: var(--shadow-sm);
}
.tab{
  padding: .6rem 1.2rem;
  font-family: var(--f-display);
  font-weight:700; font-size:1rem;
  color: var(--c-ink-soft);
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.tab.active{ color: #fff; background: var(--c-ink); }
.tab:hover:not(.active){ color: var(--c-ink); background: rgba(0,0,0,.04); }

/* Subject tab strip — 5 categories on the grade page. Scrolls horizontally
   on narrow screens so all five stay reachable on a phone. */
.subj-tabs{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.subj-tabs::-webkit-scrollbar{ display: none; }
.subj-tabs .tab{
  flex: 0 0 auto;
  padding: .55rem 1rem;
  font-size: .92rem;
  white-space: nowrap;
}
@media (max-width: 480px){
  .subj-tabs .tab{ padding: .5rem .8rem; font-size: .85rem; }
}

/* Hero card at the top of each subject tab panel */
.subj-hero{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(135deg, #fff 0%, #faf7ff 100%);
  border: 1px solid rgba(139, 92, 246, .14);
  border-left: 4px solid #8b5cf6;
  border-radius: 14px;
  padding: .9rem 1.1rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 2px 0 rgba(75, 30, 130, .05);
}
.subj-hero-emoji{
  font-size: 2.2rem;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-radius: 14px;
}
.subj-hero-body h3{
  margin: 0 0 .2rem;
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: #1f0f3a;
}
.subj-hero-body p{
  margin: 0;
  color: #4b3a6b;
  font-size: .88rem;
  line-height: 1.45;
}
@media (max-width: 540px){
  .subj-hero{
    grid-template-columns: auto 1fr;
    grid-template-areas: "emoji body" "cta cta";
    gap: .6rem .8rem;
  }
  .subj-hero-emoji{ grid-area: emoji; width: 44px; height: 44px; font-size: 1.6rem; }
  .subj-hero-body{ grid-area: body; }
  .subj-hero .btn{ grid-area: cta; justify-self: start; }
}

/* Lesson cards */
.lesson-list{ display:grid; gap:.8rem; }
.lesson-card{
  background:#fff; border-radius: var(--r-md);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-sm);
}
.lesson-card summary{
  cursor:pointer; font-weight:700; list-style:none;
  display:flex; align-items:center; gap:.7rem;
  font-family: var(--f-display); font-size: 1.05rem;
}
.lesson-card summary::-webkit-details-marker{ display:none; }
.lesson-card summary::before{
  content:"+"; display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background: var(--c-coral); color:#fff; font-weight:700;
  flex-shrink:0;
}
.lesson-card[open] summary::before{ content:"–"; background: var(--c-ink); }
.lesson-card .body{ margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--c-line); }
.lesson-card .body h4{ margin:.6rem 0 .2rem; font-size:.95rem; color: var(--c-coral-d); font-family: var(--f-display); }
.lesson-card .vocab{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.vocab span{
  background: var(--c-page); color: var(--c-ink);
  padding: .25rem .7rem; border-radius:999px; font-size:.85rem; font-weight:700;
}
.curriculum-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.curriculum-tags span{
  font-size:.7rem; padding:.25rem .6rem; border-radius:6px;
  background: var(--c-ink); color: #fff; font-weight:700;
  text-transform: uppercase; letter-spacing:.04em;
}

/* Game grid - colorful cards */
.game-grid{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.game-card{
  background: var(--bg, var(--c-coral));
  border-radius: var(--r-md);
  padding: 1.1rem 1.1rem 1rem;
  cursor: pointer;
  color:#fff;
  transition: transform .2s, box-shadow .2s;
  display:flex; flex-direction:column;
  position: relative; overflow:hidden;
  min-height: 200px;
  box-shadow: 0 5px 0 rgba(0,0,0,.16);
}
.game-card:hover{ transform: translateY(-3px); box-shadow: 0 8px 0 rgba(0,0,0,.16); }
.game-card .game-emoji{
  position: absolute; right: -10px; top: -2px;
  font-size: 4.6rem; transform: rotate(-8deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.18));
  opacity: .85; pointer-events:none;
}
.game-card h4{
  font-family: var(--f-display);
  text-transform: uppercase; font-size: 1.1rem;
  margin: .1rem 0 .2rem; color: #fff;
  max-width: 70%; line-height: 1.05;
}
.game-card .desc{
  font-size:.85rem; color: rgba(255,255,255,.92);
  margin: .2rem 0 .8rem; max-width: 80%;
}
.game-card .badges{
  margin-top: auto; display:flex; gap:.35rem; flex-wrap:wrap;
  align-items: center;
}
.badge{
  font-size:.65rem; font-weight:700;
  padding:.2rem .55rem; border-radius: 6px;
  background: rgba(0,0,0,.2); color: #fff;
  text-transform: uppercase; letter-spacing:.04em;
}
.badge.b-play{ background: rgba(255,255,255,.95); color: var(--c-ink); }
.badge.b-soon{ background: rgba(0,0,0,.25); color: rgba(255,255,255,.85); }
.game-card .btn-play{ margin-left:auto; }

/* Color rotation for game cards */
.bg-coral { --bg: #ff6b3d; }
.bg-pink  { --bg: #ec4899; }
.bg-purple{ --bg: #8b5cf6; }
.bg-green { --bg: #34d399; }
.bg-yellow{ --bg: #fbbf24; color: var(--c-ink); }
.bg-yellow h4, .bg-yellow .desc{ color: var(--c-ink); }
.bg-yellow .desc{ color: rgba(0,0,0,.7); }
.bg-blue  { --bg: #60a5fa; }
.bg-red   { --bg: #ef4444; }
.bg-teal  { --bg: #14b8a6; }

/* Game launcher (modal) */
.modal{
  position: fixed; inset: 0;
  background: rgba(15,12,25,.75);
  display:grid; place-items:center;
  padding: clamp(.5rem, 2vw, 2rem);
  z-index: 100;
}
.modal-card{
  background:#fff; border-radius: var(--r-lg);
  width: min(960px, 100%); max-height: 92vh;
  display:flex; flex-direction: column; overflow:hidden;
  box-shadow: var(--shadow-lg);
  animation: pop .25s ease-out;
}
@keyframes pop{ from{ transform: scale(.92); opacity:0; } to{ transform: scale(1); opacity:1; } }
.modal-head{
  display:flex; align-items:center; gap:.6rem;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--c-line);
  background: var(--c-card-2);
}
.modal-head h3{ margin:0; flex:1; font-family: var(--f-display); text-transform: uppercase; }
.modal-close{
  background:#fff; border:0; border-radius:50%;
  width: 38px; height: 38px; font-size: 1.4rem;
  display:grid; place-items:center;
  box-shadow: var(--shadow-sm);
}
.modal-body{ padding: 1.2rem; overflow:auto; }
.modal-foot{
  border-top: 1px solid var(--c-line); padding: .8rem 1.2rem;
  display:flex; justify-content: space-between; gap:.5rem; flex-wrap:wrap;
  background: var(--c-card-2);
}

/* Rules dropdown inside game modal */
.rules-drawer{ margin-bottom: 1rem; }
.rules-drawer summary{
  background: var(--c-page); padding:.7rem 1rem; border-radius: 12px;
  font-family: var(--f-display);
  font-weight: 700; cursor: pointer; list-style: none;
  display:flex; align-items:center; gap:.5rem;
}
.rules-drawer summary::-webkit-details-marker{ display:none; }
.rules-drawer summary::after{
  content: "▾"; margin-left:auto; transition: transform .2s;
}
.rules-drawer[open] summary::after{ transform: rotate(180deg); }
.rules-drawer .rules-body{
  padding: .9rem 1rem; border:1px solid var(--c-line); border-top:0;
  border-radius: 0 0 12px 12px; background:#fff;
}
.rules-drawer .rules-body ul{ padding-left: 1.2rem; margin: .3rem 0; }

.rules-section{
  display:flex; gap:.7rem; align-items:flex-start;
  padding: .8rem .9rem; border-radius: 12px;
  margin-bottom: .55rem;
  border: 1px solid transparent;
}
.rules-section:last-child{ margin-bottom: 0; }
.rules-section .rules-icon{
  font-size: 1.4rem; line-height: 1.1; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.7);
}
.rules-section strong{
  display:block; font-family: var(--f-display);
  font-size: .95rem; margin-bottom: .15rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.rules-section p, .rules-section ul{ margin: 0; }
.rules-section ul{ padding-left: 1.1rem; }
.rules-section li{ margin: .15rem 0; line-height: 1.5; }

.rules-aim{
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: #fdba74;
}
.rules-aim strong{ color: var(--c-coral-d); }

.rules-howto{
  background: #f8fafc;
  border-color: #cbd5e1;
}
.rules-howto strong{ color: var(--c-purple); }

.rules-hints{
  background: linear-gradient(135deg, #fefce8, #fef9c3);
  border-color: #fde68a;
}
.rules-hints strong{ color: #a16207; }
.rules-hints li{ font-style: italic; }

/* ============== ROBI'S DAILY TIP — bottom-left chat bubble ============== */
.dyk-bubble{
  position: fixed; left: 1rem; bottom: 90px;
  z-index: 60;
}
@media (min-width: 760px){ .dyk-bubble{ bottom: 1rem; } }

/* Floating action button (the robot icon) — smaller now to match brain fab */
.dyk-fab{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(124,58,237,.4), 0 3px 0 rgba(0,0,0,.12);
  cursor: pointer;
  display: grid; place-items: center;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
  animation: dyk-float 3.5s ease-in-out infinite;
}
.dyk-fab:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 22px rgba(124,58,237,.5), 0 4px 0 rgba(0,0,0,.15);
}
.dyk-fab:active{ transform: translateY(2px) scale(.98); }
.dyk-fab-icon{
  font-size: 1.55rem;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
  animation: dyk-bot-bob 2s ease-in-out infinite;
}

/* Likkle Brain floaty — sits ABOVE the dyk fab, same dimensions */
/* ============== SKELETON LOADER ==============
   Content-shaped placeholder so slow networks don't show a blank screen. */
.lc-skeleton{
  padding: 1.4rem 1rem 2rem;
  animation: lcSkelFade .3s ease-out;
}
@keyframes lcSkelFade { from { opacity: 0; } to { opacity: 1; } }
.lc-skel-row{
  background: linear-gradient(90deg, rgba(20,15,30,.06) 0%, rgba(20,15,30,.10) 50%, rgba(20,15,30,.06) 100%);
  background-size: 200% 100%;
  border-radius: 12px;
  animation: lcSkelShimmer 1.4s ease-in-out infinite;
}
@keyframes lcSkelShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.lc-skel-head{ height: 38px; width: 60%; margin: 1rem auto; }
.lc-skel-line{ height: 18px; width: 80%; max-width: 480px; margin: .8rem auto 1.4rem; }
.lc-skel-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
}
.lc-skel-card{
  height: 160px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(20,15,30,.06) 0%, rgba(20,15,30,.10) 50%, rgba(20,15,30,.06) 100%);
  background-size: 200% 100%;
  animation: lcSkelShimmer 1.4s ease-in-out infinite;
}
.lc-skel-card:nth-child(2){ animation-delay: .15s; }
.lc-skel-card:nth-child(3){ animation-delay: .30s; }
.lc-skel-card:nth-child(4){ animation-delay: .45s; }
.lc-skel-label{
  text-align: center;
  color: var(--c-ink-soft, #6b6b80);
  font-size: .9rem;
  margin-top: 1.4rem;
}

/* ============== ERROR BOUNDARY ==============
   Shown by safeNavigate() when a render function throws. Aims to leave
   the user with a clear way out, not a half-broken screen. */
.lc-errboundary{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem 1rem;
}
.lc-errboundary-card{
  max-width: 540px;
  width: 100%;
  background: #fff;
  border-radius: 22px;
  border: 1.5px solid rgba(75,45,219,.12);
  padding: 2rem 1.6rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(75,45,219,.10);
}
.lc-errboundary-emoji{ font-size: 3.4rem; margin-bottom: .6rem; }
.lc-errboundary-card h2{
  font-family: var(--f-display, 'Fredoka', sans-serif);
  margin: 0 0 .4rem;
  font-size: 1.4rem;
  color: var(--c-ink, #15131c);
}
.lc-errboundary-card p{ margin: 0 0 1rem; color: var(--c-ink-soft, #555); }
.lc-errboundary-details{
  margin: .8rem 0;
  text-align: left;
}
.lc-errboundary-details summary{
  cursor: pointer;
  color: var(--c-ink-soft, #555);
  font-size: .85rem;
}
.lc-errboundary-details pre{
  background: #f8f9fc;
  border: 1px solid rgba(20,15,30,.10);
  border-radius: 10px;
  padding: .8rem;
  font-size: .75rem;
  white-space: pre-wrap;
  overflow-x: auto;
  margin: .5rem 0 0;
  max-height: 240px;
}
.lc-errboundary-actions{
  display: flex; gap: .6rem; justify-content: center;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

/* ============== FAB TOOLBOX — master toggle ==============
   Single button bottom-right that hides/reveals the 4 helper FABs.
   The originals (.lc-brain-fab, .dyk-bubble, .lc-press-read-fab) keep
   their fixed positions; we just hide them with display:none until
   body.lc-fabs-open is set by the toolbox button. */
.lc-fab-toolbox{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  /* Bump above the mobile bottom-tab bar (visible <=760px for signed-in
     students). The bar is ~70px tall — sitting on top of "Profile" tab
     blocks the kid from tapping their last nav item. */
  bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bh-purple, #6849F0), var(--bh-purple-dk, #4B2DDB));
  color: #fff;
  border: 3px solid #fff;
  box-shadow:
    0 12px 24px rgba(75,45,219,.40),
    0 4px 0 rgba(0,0,0,.10);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 60;          /* above the helper FABs */
  transition: transform .15s, box-shadow .15s;
}
.lc-fab-toolbox:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 16px 32px rgba(75,45,219,.50), 0 5px 0 rgba(0,0,0,.14);
}
.lc-fab-toolbox-icon{
  font-size: 1.6rem;
  line-height: 1;
  transition: opacity .15s, transform .15s;
}
.lc-fab-toolbox-icon--open{
  position: absolute;
  font-size: 1.5rem;
  opacity: 0;
  transform: rotate(-90deg);
}
body.lc-fabs-open .lc-fab-toolbox-icon{ opacity: 0; transform: rotate(90deg); }
body.lc-fabs-open .lc-fab-toolbox-icon--open{ opacity: 1; transform: rotate(0deg); }
body.lc-fabs-open .lc-fab-toolbox{ background: linear-gradient(135deg, var(--bh-pink, #FF6BD0), var(--bh-pink-dk, #E94CB8)); }

/* Hide ALL helper FABs by default; show only when toolbox is open.
   !important is needed because the individual FAB blocks further down
   the file (.lc-brain-fab, .lc-press-read-fab, .lc-read-indicator) all
   declare their own display: grid and would otherwise win on source order. */
.lc-brain-fab,
.dyk-bubble,
.lc-press-read-fab,
.lc-read-indicator{
  display: none !important;
}
body.lc-fabs-open .lc-brain-fab,
body.lc-fabs-open .lc-press-read-fab{
  display: grid !important;
  animation: lcFabPop .2s ease-out;
}
body.lc-fabs-open .dyk-bubble{ display: block !important; animation: lcFabPop .2s ease-out; }
/* The read-indicator has an extra gate — it's [hidden] when read-to-me
   is OFF and the JS removes the attribute when the kid turns it on.
   So we only un-hide it inside the toolbox when read-to-me is actually
   active (i.e. the [hidden] attribute is not present). */
body.lc-fabs-open .lc-read-indicator:not([hidden]){
  display: grid !important;
  animation: lcFabPop .2s ease-out;
}
@keyframes lcFabPop {
  from { opacity: 0; transform: scale(.6) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media print {
  .lc-fab-toolbox{ display: none !important; }
}
/* On phones with the mobile tab bar visible, push the toolbox FAB up
   so it doesn't sit on top of the last bottom-tab. The .mobile-bar
   itself is ~72px tall with safe-area padding. */
@media (max-width: 760px){
  body:not(.is-landing):not(.is-anon) .lc-fab-toolbox{
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

.lc-brain-fab{
  position: fixed;
  left: 1rem;
  bottom: calc(1rem + 48px + .6rem);  /* sits 48px (dyk size) + gap above */
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #818cf8, #6366f1);
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(99,102,241,.45), 0 3px 0 rgba(0,0,0,.12);
  display: grid; place-items: center;
  text-decoration: none;
  z-index: 50;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  animation: dyk-float 3.5s ease-in-out infinite;
  animation-delay: -1.5s;
}
.lc-brain-fab:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 22px rgba(99,102,241,.55), 0 4px 0 rgba(0,0,0,.15);
}
.lc-brain-fab-icon{
  font-size: 1.55rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
@media print {
  .lc-brain-fab{ display: none !important; }
}
.dyk-fab-dot{
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  background: var(--c-coral);
  color: #fff; font-family: var(--f-display);
  font-size: .75rem; font-weight: 700;
  border-radius: 999px;
  display: grid; place-items: center;
  border: 2px solid #fff;
  padding: 0 .35rem;
  animation: dyk-pulse 2s ease-in-out infinite;
}
.dyk-fab.is-open .dyk-fab-dot{ display: none; }
@keyframes dyk-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes dyk-bot-bob{
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes dyk-pulse{
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,107,61,.55); }
  50%      { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255,107,61,0); }
}

/* Expanded popup card */
.dyk-popup{
  position: absolute;
  left: 0; bottom: calc(100% + 12px);
  width: min(330px, calc(100vw - 2rem));
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(20,15,30,.22);
  padding: 1rem 1.1rem;
  border: 3px solid var(--c-purple);
  animation: dyk-slide .25s ease-out;
}
.dyk-popup::after{
  content: ''; position: absolute;
  left: 22px; bottom: -10px;
  width: 18px; height: 18px;
  background: #fff;
  border-right: 3px solid var(--c-purple);
  border-bottom: 3px solid var(--c-purple);
  transform: rotate(45deg);
}
@keyframes dyk-slide{
  from{ transform: translateY(8px) scale(.96); opacity: 0; }
  to{   transform: translateY(0)    scale(1);   opacity: 1; }
}
.dyk-head{
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.5rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--c-line);
}
.dyk-icon{ font-size:1.5rem; }
.dyk-head strong{
  font-family: var(--f-display); font-size: 1.05rem;
  color: var(--c-purple);
}
.dyk-close{
  margin-left:auto;
  background:#f3f4f6; border:0; border-radius:50%;
  width: 28px; height: 28px;
  font-size:1.1rem; cursor: pointer;
  color: var(--c-ink); line-height:1;
  display: grid; place-items: center;
}
.dyk-close:hover{ background: var(--c-page); }
.dyk-body{ font-size:.95rem; margin:0; color: var(--c-ink); line-height: 1.55; }
.dyk-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:.8rem; padding-top: .6rem;
  border-top: 1px dashed var(--c-line);
}
.dyk-tag{
  font-size:.7rem; text-transform: uppercase; letter-spacing:.05em;
  background: var(--c-yellow); color: var(--c-ink);
  padding:.25rem .65rem; border-radius:6px; font-weight:700;
  font-family: var(--f-display);
}

/* ============== CHESS ============== */
.chess-shell{
  display:grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .chess-shell{ grid-template-columns: 1.1fr 1fr; }
}
.chess-board-wrap{
  background:#fff; padding: clamp(.6rem, 2vw, 1.2rem);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.chess-board{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);   /* lock rows to equal height */
  aspect-ratio: 1/1;
  width: 100%;
  border: 4px solid var(--c-ink);
  border-radius: 8px;
  overflow:hidden;
  user-select: none;
  touch-action: manipulation;
}
.chess-sq{
  display:grid; place-items:center;
  font-size: clamp(1.3rem, 4.5vw, 2.4rem);
  cursor: pointer;
  position: relative;
  min-width: 0;        /* let grid cells shrink/grow uniformly */
  min-height: 0;
  width: 100%;
  height: 100%;
}
.chess-sq.light{ background:#f3e0c0; }
.chess-sq.dark{ background:#b07a4a; }
.chess-sq.sel{ outline: 4px solid var(--c-yellow); outline-offset:-4px; }
.chess-sq.move::after{
  content:""; position:absolute;
  width: 30%; height: 30%; border-radius:50%;
  background: rgba(255,107,61,.55);
}
.chess-sq.capture::after{
  content:""; position:absolute; inset: 6%;
  border: 4px solid rgba(239,68,68,.7); border-radius:50%;
}
.chess-info{
  background:#fff; border-radius: var(--r-md);
  padding: 1.2rem;
  box-shadow: var(--shadow-md);
}
.chess-status{
  display:flex; align-items:center; gap:.6rem;
  background: var(--c-page); padding:.7rem .9rem;
  border-radius: 12px; margin-bottom: .8rem;
  font-weight: 700; font-family: var(--f-display);
}
.chess-piece-card{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:.8rem; border-radius:12px;
  background: var(--c-page-2); margin-bottom:.5rem;
}
.chess-piece-card .pic{ font-size: 2.2rem; line-height:1; }
.chess-piece-card h4{ margin:0; font-family: var(--f-display); }
.chess-piece-card p{ margin:.15rem 0 0; font-size:.9rem; }

.chess-tour-grid{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 1rem;
}
.tour-card{
  background:#fff; border-radius: var(--r-md);
  padding: 1.1rem; box-shadow: var(--shadow-sm);
}
.tour-card h4{ margin:0 0 .3rem; font-family: var(--f-display); text-transform: uppercase; }
.tour-card .when{ font-size:.85rem; color: var(--c-ink-soft); }

/* ============== ADMIN ============== */
.admin-shell{
  display:grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px){
  .admin-shell{ grid-template-columns: 1fr 1.2fr; }
}
.form-card, .preview-card{
  background:#fff; border-radius: var(--r-md);
  padding: 1.4rem; box-shadow: var(--shadow-sm);
}
.form-card h2, .preview-card h2{ margin-top: 0; font-family: var(--f-display); text-transform: uppercase; }
.form-row{ margin-bottom: .9rem; }
.form-row label{
  display:block; font-weight:700; font-size:.9rem;
  margin-bottom:.3rem; color: var(--c-ink); font-family: var(--f-display);
}
.form-row input, .form-row select, .form-row textarea{
  width: 100%; padding:.75rem .95rem;
  border:2px solid var(--c-line); border-radius: 12px;
  font-family: inherit; font-size:1rem; background:#fff;
}
.form-row textarea{ min-height: 90px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline: none; border-color: var(--c-coral);
  box-shadow: 0 0 0 3px rgba(255,107,61,.15);
}
.preview-doc{
  background: #fff;
  font-family: Georgia, "Times New Roman", serif;
  padding: 1.4rem;
  border: 1px dashed var(--c-line);
  border-radius: 12px;
  max-height: 70vh; overflow:auto;
}
.preview-doc h2{ font-family: var(--f-display); margin-top: 1.2rem; color: var(--c-coral-d); }
.preview-doc h3{ margin-top:1rem; color: var(--c-purple); font-family: var(--f-display); }
.preview-doc table{ width:100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.preview-doc th, .preview-doc td{
  text-align:left; padding:.5rem; border:1px solid var(--c-line); vertical-align: top;
  font-size:.92rem;
}
.preview-doc th{ background: var(--c-card-2); font-family: var(--f-display); }

/* ============== LEADERBOARD ============== */
.leaderboard{
  background:#fff; border-radius: var(--r-lg);
  padding: 1.3rem; box-shadow: var(--shadow-md);
}
.podium{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:.6rem;
  align-items:end; margin: 1rem 0 1.3rem; min-height: 170px;
}
.podium-step{
  border-radius: 14px 14px 0 0; padding:.8rem .5rem .6rem;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center; color:#fff;
}
.podium-step .av{
  width: 56px; height: 56px; border-radius: 50%;
  background:#fff; color: var(--c-ink);
  display:grid; place-items:center; font-size: 1.6rem;
  margin-bottom:.5rem; box-shadow: var(--shadow-sm);
}
.podium-step .name{ font-weight:700; font-family: var(--f-display); font-size:.95rem; }
.podium-step .pts{ font-size:.8rem; opacity:.92; }
.podium-step.p1{ background: var(--c-coral); height: 170px; }
.podium-step.p2{ background: var(--c-purple); height: 130px; }
.podium-step.p3{ background: var(--c-blue); height: 110px; }
.podium-step .rank{
  position:absolute; font-family: var(--f-display); font-size:1.4rem;
  font-weight:700; background:#fff; color: inherit; width:30px; height:30px;
  border-radius:50%; display:grid; place-items:center;
  box-shadow: var(--shadow-sm); margin-top: -120px;
}
.lb-list{ list-style:none; padding:0; margin:0; }
.lb-row{
  display:flex; align-items:center; gap:.7rem;
  padding: .6rem .7rem; border-radius: 12px;
  background: var(--c-page-2); margin-bottom:.45rem;
}
.lb-row .av{
  width: 36px; height:36px; border-radius:50%;
  background: var(--c-purple); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.9rem;
}
.lb-row .info{ flex:1; }
.lb-row .info b{ display:block; font-weight: 700; }
.lb-row .info span{ color: var(--c-ink-soft); font-size:.8rem; }
.lb-row .pts{
  background: var(--c-coral); color:#fff;
  padding:.25rem .7rem; border-radius:999px;
  font-weight:700; font-size:.85rem;
}
.lb-row.me{ background: var(--c-ink); color:#fff; }
.lb-row.me .info span{ color: rgba(255,255,255,.7); }

/* ============== MOBILE BOTTOM TAB BAR ============== */
.mobile-bar{
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 60;
  background:#fff;
  display:none;
  padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom)) .5rem;
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
@media (max-width: 760px){ .mobile-bar{ display:flex; justify-content: space-around; } }
.mobile-bar a{
  flex: 1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding: .55rem .4rem; border-radius: 12px;
  font-size: .68rem; font-weight: 700; letter-spacing:.02em;
  color: var(--c-ink-soft); text-transform: uppercase;
}
.mobile-bar a .ico{ font-size: 1.2rem; }
.mobile-bar a.active{ color: var(--c-coral); }

/* ============== UTILS ============== */
.row-2{ display:grid; gap:.8rem; grid-template-columns: 1fr 1fr; }
@media (max-width:560px){ .row-2{ grid-template-columns: 1fr; } }
.text-center{ text-align:center; }
.muted{ color: var(--c-ink-soft); }
.hide{ display:none !important; }

/* ============== FOOTER ============== */
.site-foot{
  background: var(--c-ink); color: #d6dbe8;
  padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
  margin-top: 3rem;
}
.foot-grid{
  display:grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 1200px; margin: 0 auto 1.5rem;
}
.foot-grid strong{ display:block; margin-bottom:.4rem; color:#fff; font-family: var(--f-display); }
.foot-grid a{ display:block; color: #aebbd1; padding:.2rem 0; }
.foot-grid a:hover{ color: #fff; }
.foot-grid p{ margin:0; font-size:.9rem; color:#aebbd1; }
.foot-copy{ text-align:center; font-size:.85rem; color:#aebbd1; margin:0; }
/* Icon-only master console link — sits next to the copyright line, no
   label. Low opacity by default so it's discoverable without shouting,
   full opacity on hover/focus. The OTP gate behind /#/master is the
   real security boundary; the icon is just an entry point for the
   site owner. */
.foot-master{
  display: inline-block;
  margin-left: .35rem;
  opacity: .35;
  text-decoration: none !important;
  font-size: .85rem;
  transition: opacity .15s ease, transform .15s ease;
}
.foot-master:hover,
.foot-master:focus-visible{
  opacity: 1;
  transform: scale(1.15);
  outline: none;
}

/* ============== GAME-SPECIFIC STYLES ============== */
.game-arena{
  background: #fff;
  border-radius: var(--r-md);
  padding: 1rem;
  min-height: 360px;
  box-shadow: var(--shadow-sm);
}
.game-msg{
  text-align:center; padding:.7rem; border-radius:12px;
  background: var(--c-page); margin-bottom:.8rem;
  font-weight:700; font-family: var(--f-display);
}
.game-msg.ok{ background: rgba(52,211,153,.18); color: #047857; }
.game-msg.err{ background: rgba(239,68,68,.14); color: #b91c1c; }
.game-toolbar{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem; align-items:center;
}
.score-pill{
  background: var(--c-purple); color:#fff;
  padding:.4rem 1rem; border-radius:999px;
  font-weight:700; font-family: var(--f-display);
}

/* Maze grid */
.maze-grid{
  display: grid; gap: 2px;
  background: var(--c-ink); padding: 6px; border-radius:12px;
  margin: 0 auto; max-width: 480px;
}
.maze-cell{
  background:#fff; aspect-ratio:1/1;
  display:grid; place-items:center; font-size: 1.4rem;
  border-radius: 4px;
}
.maze-cell.wall{ background: var(--c-ink); }
.maze-cell.goal{ background: var(--c-yellow); }
.maze-cell.bot{ background: var(--c-blue); }

/* Block code editor */
.blocks-shell{ display:grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 720px){ .blocks-shell{ grid-template-columns: 200px 1fr; } }
.blocks-palette, .blocks-stage{
  background: var(--c-page); border: 2px dashed var(--c-line);
  border-radius: 14px; padding:.8rem; min-height: 240px;
}
.code-block{
  display:flex; align-items:center; gap:.4rem;
  padding:.55rem .85rem; border-radius:10px;
  color:#fff; font-weight:700; cursor: grab;
  margin-bottom:.4rem; user-select:none;
  font-size:.95rem;
  box-shadow: var(--shadow-sm);
  font-family: var(--f-display);
}
.code-block.move{ background: var(--c-blue); }
.code-block.turn{ background: var(--c-purple); }
.code-block.repeat{ background: var(--c-yellow); color: var(--c-ink); }
.code-block.action{ background: var(--c-green); }
.code-block.dragging{ opacity:.4; }

/* Sequence drag */
.seq-stage{ display:flex; flex-wrap:wrap; gap:.5rem; padding: 1rem; min-height: 80px;
  background: var(--c-page); border-radius:14px; margin-bottom:.7rem; }
.seq-pool{ display:flex; flex-wrap:wrap; gap:.5rem; padding: 1rem; background: var(--c-page-2);
  border-radius:14px; }
.seq-tile{
  padding:.6rem 1rem; border-radius:10px; background:#fff;
  border:2px solid var(--c-line); font-weight: 700; cursor:grab;
}
.seq-tile.placed{ border-color: var(--c-green); background: rgba(52,211,153,.12); }

/* Quiz */
.quiz-q{
  font-size: 1.1rem; font-weight: 700; font-family: var(--f-display);
  background: var(--c-page); padding: 1rem; border-radius: 14px;
  margin-bottom: 1rem;
}
.quiz-options{ display:grid; gap:.5rem; }
.quiz-opt{
  padding:.85rem 1rem; border:2px solid var(--c-line); border-radius:12px;
  background:#fff; text-align:left; font-weight:600; cursor:pointer;
  transition: border-color .15s, background .15s;
}
.quiz-opt:hover{ border-color: var(--c-coral); }
.quiz-opt.right{ border-color: var(--c-green); background: rgba(52,211,153,.12); }
.quiz-opt.wrong{ border-color: var(--c-red); background: rgba(239,68,68,.1); }

/* Memory match */
.memo-grid{ display:grid; gap:.5rem; max-width: 480px; margin: 0 auto; }
.memo-card{
  aspect-ratio: 1/1; background: var(--c-purple);
  border-radius:14px; display:grid; place-items:center;
  font-size: 2rem; color:#fff; cursor:pointer;
  transition: background .2s, transform .2s;
}
.memo-card.flipped, .memo-card.matched{ background:#fff; border:2px solid var(--c-line); }
.memo-card.matched{ background: rgba(52,211,153,.18); }
.memo-card .face{ display:none; }
.memo-card.flipped .face, .memo-card.matched .face{ display:block; }

/* Pattern */
.pattern-row{ display:flex; gap:.5rem; flex-wrap: wrap; align-items:center; justify-content:center; margin-bottom:1rem; }
.pat-cell{
  width: 60px; height:60px; border-radius: 14px;
  display:grid; place-items:center; font-size: 1.7rem;
  background:#fff; border:2px solid var(--c-line);
}
.pat-q{ background: var(--c-page); color: var(--c-coral); border-style: dashed; font-weight:700; }
.pat-options{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.pat-opt{
  width:68px; height:68px; border-radius:14px; border:2px solid var(--c-line);
  background:#fff; font-size: 1.7rem; cursor:pointer;
}
.pat-opt:hover{ border-color: var(--c-coral); }

/* Binary */
.bin-display{
  background:var(--c-ink); color: var(--c-green); padding:1rem; border-radius:12px;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: clamp(1.2rem, 4vw, 1.8rem); text-align:center;
  margin-bottom: .8rem; letter-spacing:.2em;
}
.bin-bits{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
.bin-bit{
  width:54px; height: 64px; border-radius:12px; border:2px solid var(--c-line);
  background:#fff; font-weight:700; font-size: 1.4rem;
  display:grid; place-items:center; cursor:pointer;
  font-family: var(--f-display);
}
.bin-bit.on{ background: var(--c-green); color:#fff; border-color: transparent; }

/* AI sorter */
.sorter-shell{ display:grid; gap:1rem; }
.sorter-bins{ display:grid; gap:.6rem; grid-template-columns: 1fr 1fr; }
.sorter-bin{
  background: var(--c-page); border: 2px dashed var(--c-line); border-radius: 14px;
  min-height: 100px; padding:.7rem;
  display:flex; flex-wrap:wrap; gap:.4rem; align-content:flex-start;
}
.sorter-bin h4{ width:100%; margin:0; font-family: var(--f-display); }
.sorter-tile{
  padding:.5rem .9rem; background:#fff; border:2px solid var(--c-line);
  border-radius:10px; font-weight:700; cursor: grab; font-size:.95rem;
}

/* ============== AI CHAT ============== */
.ai-shell{
  display:grid; gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px){
  .ai-shell{ grid-template-columns: 1fr 320px; }
}
.chat-card{
  background:#fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  min-height: 60vh; max-height: 80vh;
}
.chat-head{
  display:flex; align-items:center; gap:.7rem;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--c-line);
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  color:#fff; border-radius: var(--r-md) var(--r-md) 0 0;
}
.chat-head .av{
  width:42px; height:42px; border-radius: 14px;
  background: #fff; color: var(--c-ink);
  display:grid; place-items:center; font-size: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.chat-head h3{ margin:0; color:#fff; font-family: var(--f-display); font-size: 1.15rem; }
.chat-head p { margin:0; font-size:.8rem; color: rgba(255,255,255,.85); }
.chat-head .chat-head-text{ flex: 1 1 auto; min-width: 0; }

/* "Read chat" button — reads only the chat messages, not the rest of the page. */
.chat-read-btn{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.30);
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  white-space: nowrap;
}
.chat-read-btn:hover{
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.50);
  transform: translateY(-1px);
}
.chat-read-btn.is-reading{
  background: #FFD100;
  color: #15131c;
  border-color: transparent;
  animation: chatReadPulse 1.6s ease-in-out infinite;
}
.chat-read-btn.is-empty{
  animation: chatReadShake .4s ease-in-out;
}
.chat-read-ico{ font-size: 1rem; line-height: 1; }
@keyframes chatReadPulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,209,0,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(255,209,0,0); }
}
@keyframes chatReadShake{
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
@media (max-width: 520px){
  .chat-read-lbl{ display: none; }
  .chat-read-btn{ padding: .5rem .65rem; }
}
.chat-body{
  flex: 1; overflow-y: auto;
  padding: 1rem 1.2rem;
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--c-page-2);
}
.chat-msg{
  max-width: 82%; padding: .7rem 1rem;
  border-radius: 18px;
  font-size: .96rem; line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
}
.chat-msg.user{
  align-self: flex-end;
  background: var(--c-coral); color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.bot{
  align-self: flex-start;
  background: #fff; color: var(--c-ink);
  border-bottom-left-radius: 4px;
}
.chat-msg.bot .src{
  display:flex; flex-wrap:wrap; gap:.3rem;
  margin-top: .5rem; font-size:.75rem;
}
.chat-msg.bot .src a{
  background: var(--c-page); color: var(--c-purple);
  padding:.2rem .55rem; border-radius:6px; font-weight:700;
}
.chat-typing{ display:flex; gap:.3rem; padding: .8rem 1rem; }
.chat-typing span{
  width:8px; height:8px; border-radius:50%; background: var(--c-ink-soft);
  animation: blink 1.2s infinite;
}
.chat-typing span:nth-child(2){ animation-delay: .2s; }
.chat-typing span:nth-child(3){ animation-delay: .4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.2; transform: translateY(0); } 40%{ opacity:1; transform: translateY(-3px); } }
.chat-input{
  display:flex; gap:.5rem; padding: .8rem 1rem;
  border-top: 1px solid var(--c-line); background: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.chat-input input{
  flex:1; padding:.8rem 1rem;
  border:2px solid var(--c-line); border-radius: 999px;
  font-size:1rem; font-family: inherit;
}
.chat-input input:focus{
  outline: none; border-color: var(--c-coral);
  box-shadow: 0 0 0 3px rgba(255,107,61,.15);
}
.chat-input .btn{ padding: .8rem 1.2rem; }
.suggest-strip{
  display:flex; gap:.4rem; flex-wrap: wrap;
  padding: 0 1.2rem .8rem; background: var(--c-page-2);
}
.suggest-chip{
  background: #fff; border:1px solid var(--c-line);
  padding:.35rem .8rem; border-radius:999px;
  font-size:.85rem; font-weight:600; cursor: pointer;
}
.suggest-chip:hover{ border-color: var(--c-coral); color: var(--c-coral); }

.ai-side{
  background: #fff; border-radius: var(--r-md);
  padding: 1.2rem; box-shadow: var(--shadow-sm);
  align-self: flex-start;
}
.ai-side h3{ font-family: var(--f-display); margin-top: 0; }
.ai-side .topic{
  background: var(--c-page); padding:.6rem .8rem;
  border-radius:10px; margin-bottom:.4rem;
  font-weight:700; font-size:.9rem;
}

/* ============== VALUE-PROP SECTION ============== */
.value-strip{
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 1rem;
}
.value-card{
  background: #fff; border-radius: var(--r-md);
  padding: 1.3rem; border: 1px solid var(--c-line);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.value-card .star{
  position:absolute; top:-12px; left:1.3rem;
  background: var(--c-coral); color:#fff;
  font-family: var(--f-display); font-weight:700;
  padding: .25rem .7rem; border-radius:999px; font-size:.75rem;
  letter-spacing:.06em;
}
.value-card h3{ margin: .6rem 0 .35rem; font-family: var(--f-display); font-size: 1.1rem; text-transform: uppercase; }
.value-card p { margin:0; font-size:.92rem; }

.matters-card{
  background: var(--c-ink); color:#fff;
  border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 1rem;
}
.matters-card h2{ color:#fff; }
.matters-card p { color: #d6dbe8; }
.matters-card strong{ color: var(--c-yellow); }

/* ============== TEACHER LOGIN (access code gate) ============== */
.login-card{
  max-width: 460px;
  margin: clamp(2rem, 6vw, 4rem) auto;
  background: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--c-purple);
}
.login-card .login-icon{
  width: 72px; height: 72px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  color:#fff;
  display: grid; place-items: center;
  font-size: 2rem;
  box-shadow: 0 6px 0 #6d28d9;
}
.login-card h2{
  font-family: var(--f-display);
  margin: 0 0 .5rem;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}
.login-card p{
  color: var(--c-ink-soft);
  font-size: .95rem; line-height: 1.55;
  margin: 0 0 1.4rem;
}
.login-card .form-row{ text-align: left; margin-bottom: .9rem; }
.login-card input{
  text-align: center; font-family: var(--f-display);
  font-size: 1.1rem; letter-spacing: .12em;
  text-transform: uppercase;
}
.login-hint{
  margin-top: 1.2rem; padding: .9rem 1rem;
  background: #fffbeb; border-left: 4px solid var(--c-yellow);
  border-radius: 8px; font-size: .9rem; line-height: 1.5;
  text-align: left;
}
.login-hint code, .login-card code{
  background: var(--c-page); color: var(--c-purple);
  padding: .15rem .55rem; border-radius: 6px;
  font-weight: 700; letter-spacing: .08em;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
}

/* Admin header buttons */
.admin-header .teach-actions{
  display: flex; gap: .4rem; flex-wrap: wrap;
  justify-content: flex-end;
}

/* Lesson picker — make it stand out */
.lesson-picker-section{
  background: linear-gradient(135deg, #ecfdf5, #fefce8);
  border-radius: 14px;
  padding: 1rem 1.2rem !important;
  margin-bottom: 1.2rem;
  border: 1px dashed var(--c-green);
  border-bottom: 1px dashed var(--c-green) !important;
}
.lesson-picker-section .form-section-title .num{
  background: var(--c-green) !important;
}
.lesson-picker-section select{
  font-family: var(--f-display); font-weight: 600;
}

/* ============== ADMIN — LESSON PLAN CREATOR ============== */
.admin-page .section-head{
  display:flex; align-items:center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.admin-page .section-head h2{ font-family: var(--f-display); font-size: 1.6rem; }

.admin-intro{
  background: #ecfdf5;
  border-left: 4px solid var(--c-green);
  padding: .9rem 1.1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-size: .95rem; line-height: 1.55;
}
.admin-intro strong{ color: #047857; }

.admin-howto{ margin-bottom: 1.4rem; }
.admin-howto summary{
  background: linear-gradient(90deg, var(--c-coral), var(--c-yellow));
  color: #fff !important; padding:.85rem 1.2rem !important;
  font-size: 1rem !important;
}
.admin-howto summary::after{ color:#fff; }
.admin-howto .rules-body{ background: #fffbeb !important; }

/* Two-column grid (sidebar + main) */
.admin-grid{
  display: grid; gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px){
  .admin-grid{ grid-template-columns: 280px 1fr; }
}

/* Sidebar */
.admin-side{
  background: #fff; border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  padding: 1.2rem;
  box-shadow: var(--shadow-sm);
  align-self: start;
  position: sticky;
  top: var(--topnav-h, 70px);
  max-height: calc(100vh - var(--topnav-h, 70px) - 20px);
  overflow-y: auto;
}
.side-h{
  font-family: var(--f-display);
  display:flex; align-items:center; gap:.5rem;
  margin: 0 0 .8rem; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing:.04em;
}
.side-h span{ font-size: 1.3rem; }

.saved-list{
  display:flex; flex-direction:column; gap:.4rem;
  margin-bottom: 1rem;
  max-height: 240px; overflow-y: auto;
}
.saved-row{
  display:flex; align-items:stretch; gap:.3rem;
}
.saved-load{
  flex: 1; text-align:left;
  background: var(--c-page-2); border: 0;
  padding:.6rem .8rem; border-radius: 10px;
  cursor: pointer;
  display: flex; flex-direction: column;
  font-size: .9rem;
  transition: background .12s;
}
.saved-load:hover{ background: var(--c-page); }
.saved-load strong{ font-family: var(--f-display); display:block; }
.saved-load span{ color: var(--c-ink-soft); font-size:.78rem; }
.saved-del{
  background: #fef2f2; color: #dc2626; border: 0;
  width: 32px; border-radius: 10px;
  font-weight: 700; font-size: 1.1rem;
  cursor: pointer;
}
.saved-del:hover{ background: #fee2e2; }

.tpl-list{ display:flex; flex-direction: column; gap: .5rem; }
.tpl-btn{
  display:flex; align-items:center; gap:.7rem;
  background: var(--bg, var(--c-coral));
  color:#fff;
  padding: .7rem .9rem; border: 0;
  border-radius: 12px;
  font-family: var(--f-display);
  font-weight: 700; font-size: .9rem;
  cursor: pointer;
  text-align:left;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
  transition: transform .12s, box-shadow .12s;
}
.tpl-btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.tpl-btn .tpl-ico{ font-size: 1.2rem; }
.tpl-btn .tpl-lbl{ flex: 1; }
.tpl-btn.bg-yellow{ color: var(--c-ink); }
.tpl-btn.bg-teal{ background: #14b8a6; }

/* Main form area */
.admin-main{ display: grid; gap: 1.2rem; }

.form-section{
  border-bottom: 1px dashed var(--c-line);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.form-section:last-of-type{ border: 0; }
.form-section-title{
  font-family: var(--f-display);
  color: var(--c-purple);
  font-size: 1.15rem;
  display:flex; align-items:center; gap:.5rem;
  margin: 0 0 .3rem;
}
.form-section-title .num{
  background: var(--c-purple); color:#fff;
  font-size: .85rem; padding: .15rem .55rem;
  border-radius: 6px;
}

.form-grid-2{
  display: grid; gap: .9rem;
  grid-template-columns: 1fr 1fr;
}
.form-grid-3{
  display: grid; gap: .9rem;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 600px){
  .form-grid-2, .form-grid-3{ grid-template-columns: 1fr; }
}

/* ============== HOME — KINDERGARTEN-STYLE HERO ============== */
.kg-hero{
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(236,72,153,.18), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(245,158,11,.15), transparent 60%),
    linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%);
  border-radius: var(--r-lg);
  padding: 1rem clamp(1rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5rem);
  margin-bottom: 0;
  color: #fff;
  isolation: isolate;
}

/* Top bar: brand + pill nav */
.kg-hero-top{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; flex-wrap: wrap;
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: .55rem .75rem .55rem 1rem;
  box-shadow: 0 8px 22px rgba(20,15,30,.18);
  position: relative; z-index: 3;
}
.kg-brand{
  display:flex; align-items:center; gap:.65rem;
  color: var(--c-ink);
}
.kg-brand-mark{
  width:42px; height:42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-pink), var(--c-purple));
  color:#fff; display:grid; place-items:center;
  font-family: var(--f-display); font-weight:700; font-size:.95rem;
  box-shadow: 0 3px 0 rgba(0,0,0,.16);
}
.kg-brand strong{
  display:block; font-family: var(--f-display);
  font-size: 1rem; line-height: 1.05; color: var(--c-ink);
}
.kg-brand em{
  display:block; font-style: normal; font-size: .72rem;
  color: var(--c-ink-soft); letter-spacing:.02em;
}
.kg-pill-nav{
  display: flex; align-items: center; gap: .15rem;
  background: linear-gradient(90deg, #fb923c, #f97316, #ec4899);
  padding: .4rem; border-radius: 999px;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.kg-pill-nav a{
  padding: .5rem .95rem; border-radius: 999px;
  color: #fff; font-family: var(--f-display);
  font-weight: 700; font-size: .85rem;
  text-decoration: none;
  transition: background .12s;
}
.kg-pill-nav a:hover, .kg-pill-nav a.active{
  background: rgba(255,255,255,.28);
}
@media (max-width: 660px){
  .kg-pill-nav{ display: none; }   /* fall back to existing topnav */
}

/* Floating doodle icons */
.kg-float{
  position: absolute; font-size: 1.6rem;
  pointer-events: none; opacity: .85;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
  z-index: 1;
}
.kg-f1{ top:18%; left:5%;  animation: kg-bob 5s ease-in-out infinite; }
.kg-f2{ top:62%; left:12%; animation: kg-bob 7s ease-in-out infinite; }
.kg-f3{ top:30%; left:48%; animation: kg-bob 6s ease-in-out infinite reverse; }
.kg-f4{ top:75%; left:55%; animation: kg-bob 8s ease-in-out infinite; }
.kg-f5{ top:14%; right:6%; animation: kg-bob 6s ease-in-out infinite; }
.kg-f6{ top:48%; right:14%;animation: kg-bob 7s ease-in-out infinite reverse; }
.kg-f7{ top:78%; right:8%; animation: kg-bob 5s ease-in-out infinite; }
@keyframes kg-bob{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-12px) rotate(8deg); }
}

/* Hero content grid */
.kg-hero-grid{
  display:grid; gap: 1.5rem; align-items: center;
  grid-template-columns: 1fr;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  position: relative; z-index: 2;
}
@media (min-width: 880px){ .kg-hero-grid{ grid-template-columns: 1.1fr .9fr; } }

.kg-hero-text h1{
  font-family: var(--f-display);
  color: #fff;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.1; margin: .5rem 0 1rem;
  text-transform: none;
}
.kg-hero-text .kg-accent{
  display:inline-block;
  background: linear-gradient(90deg, #fbbf24, #ec4899);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.kg-hero-text p{
  color: rgba(255,255,255,.92);
  font-size: 1rem; line-height: 1.6;
  max-width: 540px; margin: 0 0 1.5rem;
}
.kg-eyebrow{
  display: inline-flex; align-items: center; gap: .8rem;
  background: linear-gradient(135deg, #34d399 0%, #10b981 60%, #059669 100%);
  color: #fff;
  padding: .85rem 1.5rem .85rem 1.2rem;
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 6px 0 #047857, 0 12px 24px rgba(16,185,129,.45);
  margin-bottom: 1.2rem;
  border: 3px solid rgba(255,255,255,.35);
  animation: kg-eyebrow-pop .6s ease-out;
}
.kg-wave{
  display: inline-block;
  font-size: 2.2rem;
  line-height: 1;
  transform-origin: 70% 70%;
  animation: kg-wave-hand 2.8s ease-in-out infinite;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.18));
}
.kg-eyebrow-line{
  display: flex; flex-direction: column;
  line-height: 1.05;
  text-align: left;
}
.kg-eyebrow-line em{
  font-style: normal;
  font-size: .85rem;
  opacity: .9;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.kg-eyebrow-line strong{
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: .01em;
}
@keyframes kg-wave-hand {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}
@keyframes kg-eyebrow-pop {
  0% { transform: scale(.85); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
@media (max-width: 540px){
  .kg-wave{ font-size: 1.8rem; }
  .kg-eyebrow{ padding: .7rem 1.1rem .7rem 1rem; gap: .6rem; }
  .kg-eyebrow-line strong{ font-size: 1rem; }
  .kg-eyebrow-line em{ font-size: .75rem; }
}

.kg-buttons{ display:flex; gap:.7rem; flex-wrap: wrap; }
.kg-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding: .8rem 1.5rem; border-radius: 10px;
  font-family: var(--f-display); font-weight: 700;
  font-size: .95rem; text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.kg-btn-primary{
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color:#fff;
  box-shadow: 0 5px 0 #5b21b6;
}
.kg-btn-cyan{
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color:#fff;
  box-shadow: 0 5px 0 #0e7490;
}
.kg-btn:hover{ transform: translateY(-2px); }
.kg-btn-primary:hover{ box-shadow: 0 7px 0 #5b21b6; }
.kg-btn-cyan:hover{ box-shadow: 0 7px 0 #0e7490; }

/* Hero illustration area */
.kg-hero-img{
  position: relative; aspect-ratio: 1/1; max-width: 420px;
  margin: 0 auto;
  display: grid; place-items: center;
}
.kg-hero-img::before{
  content:''; position: absolute; inset: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.kg-bot{
  font-size: clamp(10rem, 26vw, 19rem);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.35));
  /* Three layered animations — bob, wiggle, glow — for a much more
     active feel without overwhelming the kid. */
  animation:
    kg-bob   2.6s ease-in-out infinite,
    kg-wiggle 4.8s ease-in-out infinite,
    kg-glow  3.2s ease-in-out infinite;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: transform .15s ease;
  display: inline-block;     /* needed for rotate to apply cleanly */
  transform-origin: center 75%;
}
.kg-bot:hover{
  animation-play-state: paused;
  transform: scale(1.08) rotate(-6deg);
}
.kg-bot:active{ transform: scale(1.12) rotate(8deg); }
@keyframes kg-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-5deg); }
  75%      { transform: rotate(5deg); }
}
@keyframes kg-glow {
  0%, 100% { filter: drop-shadow(0 14px 22px rgba(0,0,0,.35)); }
  50%      { filter: drop-shadow(0 18px 28px rgba(255,209,0,.55)) drop-shadow(0 0 18px rgba(0,155,58,.4)); }
}
.kg-block{
  position: absolute; width: 56px; height: 56px;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.5rem; color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,.25);
  animation: kg-bob 5s ease-in-out infinite;
}
.kg-block-a{ background: var(--c-coral);  top: 14%; right: 8%; transform: rotate(-12deg); }
.kg-block-b{ background: var(--c-blue);   bottom: 16%; left: 6%; transform: rotate(8deg); animation-duration: 6s; }
.kg-block-c{ background: var(--c-yellow); color: var(--c-ink); bottom: 10%; right: 14%; transform: rotate(-6deg); animation-duration: 7s; }

/* Scalloped cloud divider at the bottom */
.kg-cloud{
  position: absolute; bottom: -1px; left: 0; right: 0;
  width: 100%; height: 64px; display: block;
  z-index: 2;
}

/* Cream band right after the hero */
.kg-band{
  background: var(--c-card);
  margin: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem));
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2rem;
  position: relative;
}

/* ============== HOME — COURSE-STYLE GRADES ============== */
.kg-courses{
  background: var(--c-card);
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 4rem);
  margin: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem));
}
.kg-courses-head{
  text-align: center; max-width: 640px;
  margin: 0 auto 2rem;
}
.kg-pink-eyebrow{
  display: inline-block;
  font-family: var(--f-display); font-weight: 700;
  font-size: .9rem; color: var(--c-pink);
  font-style: italic;
  margin-bottom: .4rem;
  letter-spacing: .02em;
}
.kg-courses-head h2{
  font-family: var(--f-display); color: var(--c-ink);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  text-transform: none; margin: 0 0 .5rem;
}
.kg-courses-head p{ color: var(--c-ink-soft); margin: 0; }

.course-grid{
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.course-card{
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(20,15,30,.10);
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.course-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(20,15,30,.15);
  text-decoration: none;
}
.course-img{
  position: relative;
  height: 170px;
  overflow: hidden;
}
.course-img-bg{
  position: absolute; inset: 0;
}
.course-img-emoji{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 5rem;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.25));
}
.course-price{
  position: absolute; right: 1rem; bottom: -18px;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-pink), #d946ef);
  color: #fff;
  border-radius: 50%;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 4px 0 #a21caf;
  z-index: 2;
}
.course-body{
  padding: 1.4rem 1.1rem .8rem;
  flex: 1;
}
.course-body h3{
  font-family: var(--f-display); color: var(--c-ink);
  font-size: 1.15rem; text-transform: none;
  margin: 0 0 .35rem;
}
.course-body p{
  font-size: .85rem; color: var(--c-ink-soft);
  margin: 0; line-height: 1.5;
}
.course-meta{
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #fff;
  padding: .65rem .5rem;
  margin-top: auto;
}
.course-meta > div{
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.25);
  padding: .1rem .2rem;
}
.course-meta > div:last-child{ border-right: 0; }
.course-meta span{
  display: block; font-size: .65rem;
  letter-spacing: .04em; opacity: .85;
  text-transform: uppercase;
}
.course-meta strong{
  display: block; font-family: var(--f-display);
  font-size: .95rem; margin-top: .1rem;
}

/* ============== HOME — JAMAICA MANIFESTO ============== */
.ja-manifesto{
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.2rem, 4vw, 2.5rem);
  margin: clamp(1.5rem, 4vw, 2.5rem) 0;
  position: relative; overflow: hidden;
  border: 2px solid #fbbf24;
}
.ja-manifesto::before{
  content:''; position:absolute; right: -80px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,.18), transparent 70%);
  pointer-events: none;
}
.ja-manifesto::after{
  content:''; position:absolute; left: -80px; bottom: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.12), transparent 70%);
  pointer-events: none;
}
.manifesto-head{
  text-align: center; max-width: 820px; margin: 0 auto 2rem;
  position: relative; z-index: 1;
}
.ja-flag{
  font-size: 3.5rem; display: block;
  margin-bottom: .5rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
.manifesto-head h2{
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: none;
  margin: .3rem 0 .8rem;
  color: var(--c-ink);
}
.manifesto-lead{
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.65; color: var(--c-ink);
  max-width: 720px; margin: 0 auto;
}
.manifesto-lead strong{ color: var(--c-coral-d); }

.audience-trio{
  display: grid; gap: 1.2rem;
  grid-template-columns: 1fr;
  margin: 2rem 0;
  position: relative; z-index: 1;
}
@media (min-width: 800px){ .audience-trio{ grid-template-columns: repeat(3, 1fr); } }

.ja-card{
  background: #fff;
  border-radius: var(--r-md);
  padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: 0 6px 18px rgba(20,15,30,.10);
  border-top: 6px solid var(--accent, var(--c-coral));
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.ja-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,15,30,.15); }
.ja-students{ --accent: #34d399; }
.ja-teachers{ --accent: #8b5cf6; }
.ja-parents { --accent: #ec4899; }

.ja-card .ja-icon{
  font-size: 2.4rem; line-height: 1;
  margin-bottom: .6rem;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.15));
}
.ja-card h3{
  font-family: var(--f-display);
  font-size: 1.3rem;
  text-transform: none;
  margin: 0 0 .6rem;
  color: var(--accent);
}
.ja-card p{
  font-size: .96rem; line-height: 1.6;
  color: var(--c-ink); margin: 0 0 1.2rem;
  flex: 1;
}
.ja-card p strong{ color: var(--c-ink); background: rgba(251,191,36,.3); padding: 0 3px; border-radius: 3px; }
.ja-card .ja-quote{
  background: var(--c-page-2);
  padding: .7rem .9rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: .9rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
}

/* Promises chips */
.ja-promises{
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
  margin: 2rem auto 1.5rem;
  max-width: 900px;
  position: relative; z-index: 1;
}
.ja-chip{
  background: #fff;
  border: 2px solid var(--c-ink);
  padding: .55rem 1rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  box-shadow: 0 3px 0 var(--c-ink);
  transition: transform .12s;
}
.ja-chip:hover{ transform: translateY(-2px); }

.manifesto-close{
  text-align: center;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.65;
  color: var(--c-ink);
  max-width: 740px;
  margin: 0 auto;
  padding-top: 1rem;
  border-top: 2px dashed rgba(0,0,0,.15);
  position: relative; z-index: 1;
}
.manifesto-close strong{
  color: var(--c-coral-d);
  font-family: var(--f-display);
  font-size: 1.1em;
}

/* ============== ADVANCED GAMES — Frog Pond + Dance Floor ============== */
/* Frog Pond board */
.fp-board{
  display:grid; gap: 4px;
  background: #0c4a6e; padding: 6px;
  border-radius: 12px;
  width: 100%; aspect-ratio: 1/1;
  margin: 0 auto;
}
.fp-cell{
  background: #bbf7d0; border-radius: 4px;
  display: grid; place-items: center;
  font-size: clamp(.9rem, 3vw, 1.3rem);
  position: relative;
}
.fp-cell.water{ background: #38bdf8; }
.fp-cell.lily{ background: #bbf7d0; }
.fp-cell.lily.fly{ background: #fef9c3; }
.fp-cell.goal{ background: #fde68a; }
.fp-frog{
  font-size: clamp(1.4rem, 4vw, 2rem);
  position: relative; z-index: 2;
  transition: transform .25s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}

/* Dance Floor */
.df-shell{
  display:grid; gap:1rem;
  grid-template-columns: 1fr;
}
@media (min-width:880px){ .df-shell{ grid-template-columns: 1fr 1fr; } }
.df-stagepane{ background: linear-gradient(135deg, #fff7ed, #fce7f3) !important; }
.df-target{
  background: #fff;
  border: 1px dashed var(--c-line);
  border-radius: 12px;
  padding: .7rem;
  margin-bottom: .7rem;
}
.df-target-label{
  font-family: var(--f-display); font-weight: 700; font-size: .85rem;
  color: var(--c-purple);
  margin-bottom: .35rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.df-track{
  display: flex; gap: .35rem; flex-wrap: wrap;
  min-height: 40px;
  align-items: center;
}
.df-track .df-step{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  background: var(--c-page);
  border-radius: 8px;
  border: 2px solid var(--c-line);
}
.df-track.df-yours .df-step{ background: var(--c-yellow); border-color: transparent; }

.df-floor{
  background: linear-gradient(135deg, #fbcfe8, #f9a8d4);
  border-radius: 12px;
  height: 130px; margin-bottom: .7rem;
  position: relative;
  display: grid; place-items: center;
  border: 3px solid var(--c-pink);
  overflow: hidden;
}
.df-sprite{
  font-size: 4rem;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
  transition: transform .3s ease;
}
.df-jumping{ animation: df-jump .35s ease-in-out; }
.df-spinning{ animation: df-spin .35s ease-in-out; }
@keyframes df-jump{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}
@keyframes df-spin{
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* ============== TOPNAV — Dashboard mini-CTA ============== */
.nav-links a.nav-cta-mini{
  background: var(--jf-green);
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 3px 0 var(--jf-green-dark);
}
.nav-links a.nav-cta-mini:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--jf-green-dark);
  background: var(--jf-green-dark);
}
.nav-links a.nav-cta-mini.active{
  background: var(--jf-black);
  color: #fff !important;
  box-shadow: 0 3px 0 #000;
}

/* ============== DASHBOARD ============== */
.dashboard-page{ padding-top: 0; }

/* Profile header */
.dash-profile{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  background: linear-gradient(135deg, #fefce8 0%, #fff 80%);
  border-radius: var(--r-md);
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--jf-gold);
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}
@media (max-width: 720px){
  .dash-profile{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar  info"
      "stats   stats";
    gap: 1rem;
  }
  .dash-avatar{ grid-area: avatar; }
  .dash-profile-info{ grid-area: info; }
  .dash-stats{ grid-area: stats; }
}
.dash-avatar{
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--jf-green), var(--jf-green-dark));
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 0 var(--jf-black);
  border: 3px solid #fff;
}
.dash-eyebrow{
  font-family: var(--f-display);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  display: block;
}
.dash-profile-info h2{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: .15rem 0 .5rem;
  text-transform: none;
  color: var(--c-ink);
  line-height: 1.1;
}
.dash-meta{
  display: flex; gap: .4rem; flex-wrap: wrap;
}
.dash-pill{
  background: var(--c-page);
  color: var(--c-ink);
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.dash-pill-class{
  background: var(--jf-black);
  color: var(--jf-gold);
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  letter-spacing: .04em;
}
.dash-stats{
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1.2rem;
}
.dash-stat{ text-align: center; min-width: 60px; }
.dash-stat-num{
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.05;
  color: var(--c-ink);
}
.dash-stat-label{
  display: block;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-top: .15rem;
  font-weight: 700;
}

/* Module hub heading */
.dash-section-head{
  text-align: center;
  margin: 0 auto 1.6rem;
  max-width: 640px;
}
.dash-section-head .eyebrow{
  display: inline-block;
  font-family: var(--f-display);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--jf-green);
  margin-bottom: .35rem;
}
.dash-section-head h3{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  margin: 0 0 .4rem;
  color: var(--c-ink);
  text-transform: none;
}
.dash-section-head p{ margin: 0; color: var(--c-ink-soft); }

/* Module card grid (3 modules on dashboard) */
.module-grid{
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
}
@media (min-width: 760px){ .module-grid{ grid-template-columns: repeat(3, 1fr); } }

.module-card{
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  padding: 1.4rem 1.4rem 1.2rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.module-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.module-card-stripe{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--module-accent, var(--jf-green));
}
.module-card.module-learn{ --module-accent: var(--jf-green); }
.module-card.module-code{  --module-accent: var(--jf-black); }
.module-card.module-play{  --module-accent: var(--jf-gold);  }

.module-icon{
  font-size: 2.6rem;
  line-height: 1;
  margin-top: .3rem;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.18));
}
.module-tag{
  display: inline-block;
  font-family: var(--f-display);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--module-accent);
  padding: .25rem .6rem;
  border-radius: 999px;
  align-self: flex-start;
  font-weight: 700;
}
.module-card.module-play .module-tag{ color: var(--c-ink); }
.module-card h4{
  font-family: var(--f-display);
  font-size: 1.25rem;
  margin: .15rem 0 .25rem;
  color: var(--c-ink);
  text-transform: none;
}
.module-card > p{
  margin: 0 0 .5rem;
  font-size: .9rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
}
.module-features{
  list-style: none;
  margin: 0 0 .8rem;
  padding: 0;
  display: grid;
  gap: .25rem;
  font-size: .85rem;
  color: var(--c-ink);
}
.module-features li{
  background: var(--c-page-2);
  padding: .35rem .65rem;
  border-radius: 8px;
  font-weight: 600;
}
.module-cta{
  margin-top: auto;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--module-accent);
  border-top: 1px dashed var(--c-line);
  padding-top: .7rem;
}
.module-card.module-code .module-cta{ color: var(--c-ink); }

/* Dashboard footer (edit / sign-out) */
.dash-footer{
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .8rem;
  border-top: 1px dashed var(--c-line);
}

/* ============== PROFILE SETUP ============== */
.profile-setup{
  background: #fff;
  border-radius: var(--r-lg);
  border: 3px solid var(--jf-gold);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  max-width: 480px;
  margin: clamp(2rem, 6vw, 4rem) auto;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.profile-setup .ps-icon{
  width: 72px; height: 72px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--jf-green), var(--jf-green-dark));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2rem;
  box-shadow: 0 6px 0 var(--jf-black);
}
/* Avatar variant of the .ps-icon — bigger emoji, soft pulse when changed. */
.profile-setup .ps-icon-avatar{
  font-size: 2.6rem;
  background: linear-gradient(135deg, #fff 0%, #F4F1FF 100%);
  color: var(--c-ink, #15131c);
  border: 3px solid var(--jf-gold, #FFD100);
  box-shadow: 0 8px 0 rgba(255,209,0,.30);
  transition: transform .25s ease;
}
.profile-setup .ps-icon-avatar:hover{ transform: scale(1.05); }

/* ===== Avatar picker grid (profile-setup form) ===== */
.profile-setup .ps-avatar{
  background: #fafbff;
  border: 1.5px solid rgba(104,73,240,.12);
  border-radius: 14px;
  padding: .9rem 1rem;
  margin: .9rem 0;
}
.profile-setup .ps-avatar-label{
  display: block;
  margin-bottom: .7rem;
  font-size: .96rem;
}
.profile-setup .ps-avatar-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: .4rem;
}
.profile-setup .ps-avatar-opt{
  position: relative;
  display: block;
  cursor: pointer;
}
/* Hide the actual radio — the tile is the visible control. */
.profile-setup .ps-avatar-opt input[type="radio"]{
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  cursor: pointer;
}
.profile-setup .ps-avatar-tile{
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  font-size: 1.75rem;
  line-height: 1;
  background: #fff;
  border: 2px solid rgba(15,30,50,.10);
  border-radius: 12px;
  transition: transform .12s ease, border-color .15s, box-shadow .15s, background .15s;
}
.profile-setup .ps-avatar-opt:hover .ps-avatar-tile{
  transform: translateY(-2px);
  border-color: var(--bh-purple, #6849F0);
  box-shadow: 0 6px 14px rgba(75,45,219,.14);
}
.profile-setup .ps-avatar-opt input[type="radio"]:checked + .ps-avatar-tile{
  background: linear-gradient(135deg, #FFF8E6 0%, #fff 100%);
  border-color: var(--jf-gold, #FFD100);
  box-shadow:
    0 0 0 3px rgba(255,209,0,.20),
    0 6px 16px rgba(255,209,0,.25);
  transform: translateY(-2px);
}
/* Keyboard focus ring */
.profile-setup .ps-avatar-opt input[type="radio"]:focus-visible + .ps-avatar-tile{
  outline: 2px solid var(--bh-purple, #6849F0);
  outline-offset: 2px;
}
.profile-setup h2{
  font-family: var(--f-display);
  margin: 0 0 .5rem;
  text-transform: none;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--c-ink);
}
.profile-setup form{ text-align: left; }
.profile-setup input,
.profile-setup select{
  font-family: inherit;
  letter-spacing: .02em;
}
.profile-setup .ps-foot{
  margin-top: 1.2rem;
  font-size: .8rem;
  text-align: center;
  line-height: 1.5;
}

/* ============== MODULE LANDING PAGE ============== */
.module-page{ padding-top: 0; }
.module-back{
  display: inline-block;
  font-weight: 700;
  color: var(--c-ink-soft);
  margin-bottom: 1rem;
  text-decoration: none;
}
.module-back:hover{ color: var(--c-ink); text-decoration: none; }

.module-hero{
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  border-radius: var(--r-lg);
  color: #fff;
  margin-bottom: 1.8rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
}
.module-hero::before{
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  pointer-events: none;
}
.module-hero.jf-green{
  background: linear-gradient(135deg, var(--jf-green), var(--jf-green-dark));
}
.module-hero.jf-black{
  background: linear-gradient(135deg, #1f1d2b, var(--jf-black));
}
.module-hero.jf-gold{
  background: linear-gradient(135deg, var(--jf-gold), var(--jf-gold-dark));
  color: var(--c-ink);
}
.module-hero-icon{
  font-size: clamp(3rem, 6vw, 4.5rem);
  flex-shrink: 0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
  position: relative; z-index: 1;
}
.module-hero-text{ position: relative; z-index: 1; min-width: 0; }
.module-eyebrow{
  display: inline-block;
  font-family: var(--f-display);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.18);
  padding: .25rem .7rem;
  border-radius: 999px;
  margin-bottom: .4rem;
}
.module-hero.jf-gold .module-eyebrow{
  background: rgba(0,0,0,.18);
  color: var(--c-ink);
}
.module-hero-text h2{
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  text-transform: uppercase;
  margin: .15rem 0 .5rem;
  color: inherit;
  line-height: 1.05;
}
.module-hero-text p{
  margin: 0;
  font-size: .96rem;
  line-height: 1.55;
  color: inherit;
  opacity: .92;
  max-width: 600px;
}
@media (max-width: 540px){
  .module-hero{
    flex-direction: column;
    text-align: center;
  }
}

/* Tile grid inside a module page */
.module-tile-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.module-tile{
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  padding: 1.2rem 1.2rem 1rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.module-tile:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.module-tile-icon{
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: .25rem;
}
.module-tile h4{
  font-family: var(--f-display);
  font-size: 1.05rem;
  margin: 0 0 .25rem;
  color: var(--c-ink);
  text-transform: none;
}
.module-tile p{
  margin: 0 0 .8rem;
  font-size: .88rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
  flex: 1;
}
.module-tile-cta{
  margin-top: auto;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--c-ink);
  padding-top: .6rem;
  border-top: 1px dashed var(--c-line);
  transition: padding .12s;
}
.module-tile:hover .module-tile-cta{ padding-left: .25rem; }

/* ============== HOME — AUDIENCE CTA + TESTIMONIAL ============== */
.audience-section{ padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 3vw, 2rem); }
.audience-grid{
  display:grid; gap: 1.2rem;
  grid-template-columns: 1fr;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 760px){ .audience-grid{ grid-template-columns: 1fr 1fr; } }

.aud-card{
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  color: #fff; text-decoration:none;
  min-height: 280px;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.aud-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.22); text-decoration:none; }
.aud-card::before{
  content:''; position: absolute; right: -60px; top: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255,255,255,.10); pointer-events:none;
}
.aud-students{
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}
.aud-teachers{
  background: linear-gradient(135deg, #1f1d2b 0%, #2d2a3d 100%);
}
.aud-eyebrow{
  display: inline-block;
  font-family: var(--f-display); font-weight: 700;
  font-size: .8rem; letter-spacing: .14em;
  color: rgba(255,255,255,.85);
  margin-bottom: .8rem;
}
.aud-card h3{
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #fff; margin: 0 0 .8rem;
  position: relative; z-index: 1;
}
.aud-card p{
  color: rgba(255,255,255,.92);
  margin: 0 0 1.4rem; font-size: 1rem; line-height: 1.55;
  max-width: 460px;
  position: relative; z-index: 1;
}
.aud-cta{
  align-self: flex-start; margin-top: auto;
  background: #fff; color: var(--c-ink);
  padding: .75rem 1.4rem; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700;
  font-size: .95rem; letter-spacing: .02em;
  position: relative; z-index: 1;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
  transition: transform .12s;
}
.aud-card:hover .aud-cta{ transform: translateX(4px); }

/* Testimonial / pull-quote */
.big-quote{
  margin: 0 auto; max-width: 880px;
  padding: clamp(1.5rem, 4vw, 2rem) 1rem;
  text-align: center;
}
.big-quote .quote-marks{
  display: block; line-height: .5;
  font-family: Georgia, serif; font-size: 5rem;
  color: #c4b5fd; letter-spacing: -.05em;
  margin-bottom: .4rem;
}
.big-quote blockquote{
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  line-height: 1.45; color: var(--c-ink);
  margin: 0 0 1.5rem;
  font-weight: 600;
}
.big-quote figcaption{
  display: inline-flex; align-items: center; gap: .8rem;
  text-align: left;
}
.big-quote .q-av{
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-yellow); color: var(--c-ink);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
}
.big-quote figcaption strong{
  display: block; color: var(--c-ink); font-family: var(--f-display);
  font-size: 1rem;
}
.big-quote figcaption em{
  display: block; font-style: normal; color: var(--c-ink-soft);
  font-size: .85rem;
}

/* ============== CHESS — PICK YOUR PATH ============== */
.path-hero{
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.path-hero::before{
  content:''; position: absolute; right: -80px; top: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,.45), transparent 70%);
  pointer-events: none;
}
.path-hero::after{
  content:''; position: absolute; left: -60px; bottom: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,.35), transparent 70%);
  pointer-events: none;
}
.path-h{
  text-align: center; color: #fff;
  font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 1.4rem; position: relative; z-index: 1;
  letter-spacing: -.01em;
}
.path-grid{
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  position: relative; z-index: 1;
}
.path-card{
  position: relative; overflow: hidden;
  background: var(--grad);
  border: 0;
  border-radius: 22px;
  padding: 1.6rem 1.4rem 1rem;
  color: #fff; text-align: center;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  min-height: 280px;
}
.path-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.15) inset; }
.path-card::before{
  content:''; position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.10); pointer-events:none;
}
.path-card::after{
  content:''; position: absolute; left: -40px; bottom: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.08); pointer-events:none;
}
.path-learn { --grad: linear-gradient(160deg, #6366f1 0%, #22d3ee 100%); }
.path-play  { --grad: linear-gradient(160deg, #fb923c 0%, #ef4444 100%); }
.path-tough { --grad: linear-gradient(160deg, #ec4899 0%, #8b5cf6 100%); }

.path-ico{
  font-size: 3rem; line-height: 1;
  margin-bottom: .5rem; position: relative; z-index: 2;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
.path-title{
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.4rem; margin-bottom: .6rem;
  position: relative; z-index: 2;
}
.path-blurb{
  font-size: .95rem; line-height: 1.55;
  color: rgba(255,255,255,.92);
  margin: 0 auto 1.2rem; max-width: 280px;
  position: relative; z-index: 2; flex: 1;
}
.path-cta{
  display: block;
  border-top: 1px solid rgba(255,255,255,.25);
  padding-top: .85rem;
  font-family: var(--f-display); font-weight: 700;
  letter-spacing: .03em;
  position: relative; z-index: 2;
}

/* ============== CHESS — WHY + NSC/PEP ============== */
.why-grid{
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.5rem;
}
@media (min-width: 800px){ .why-grid{ grid-template-columns: 1fr 1fr; } }
.why-card{
  background: #fff;
  border-radius: var(--r-md);
  padding: 1.4rem 1.5rem;
  position: relative;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.why-card::before{
  content: ''; position: absolute; left: 0; top: 0; right: 0;
  height: 4px; border-radius: var(--r-md) var(--r-md) 0 0;
  background: linear-gradient(90deg, var(--c-yellow), var(--c-coral), var(--c-pink));
}
.why-card h3{
  font-family: var(--f-display); font-size: 1.2rem;
  margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem;
}
.why-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.why-list li{
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .95rem; line-height: 1.5;
}
.why-list strong{ color: var(--c-purple); }
.why-list .b-pawn{
  color: var(--c-pink); font-size: 1.1rem; line-height: 1.3;
  flex-shrink: 0;
}

/* ============== GLOBAL LIVE-CLASS SLOT ============== */
.global-live-slot{
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
.global-live-slot:empty{ padding: 0; }
.global-live-slot .live-class-banner{ margin-top: .8rem; margin-bottom: 0; }

/* ============== HOME — PEP PROMOTION BANNER ============== */
.pep-home-banner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.4rem);
  background: linear-gradient(135deg, #ec4899 0%, #f97316 50%, #fbbf24 100%);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.2rem, 4vw, 2rem);
  margin-top: 1.2rem;
  text-decoration: none;
  color: #fff;
  position: relative; overflow: hidden;
  box-shadow: 0 10px 28px rgba(236,72,153,.32);
  transition: transform .15s, box-shadow .15s;
}
.pep-home-banner:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(236,72,153,.42);
  text-decoration: none;
}
.pep-home-banner::before{
  content: ''; position: absolute;
  right: -50px; top: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%);
  pointer-events: none;
}
.pep-home-icon{
  font-size: 3rem; line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
  flex-shrink: 0;
}
.pep-home-text{ position: relative; z-index: 1; min-width: 0; }
.pep-home-eyebrow{
  display: inline-block;
  font-family: var(--f-display);
  font-size: .75rem; letter-spacing: .12em;
  background: rgba(255,255,255,.25);
  padding: .25rem .7rem; border-radius: 999px;
  margin-bottom: .35rem;
  text-transform: uppercase;
}
.pep-home-text h3{
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  margin: 0 0 .25rem;
  color: #fff;
  text-transform: none;
  line-height: 1.2;
}
.pep-home-text p{
  margin: 0;
  font-size: .9rem;
  color: rgba(255,255,255,.92);
  line-height: 1.5;
}
.pep-home-grades{
  display: flex; gap: .35rem;
  position: relative; z-index: 1;
}
.pep-home-grades span{
  background: rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.45);
  color: #fff;
  font-family: var(--f-display); font-weight: 700;
  font-size: .9rem;
  padding: .3rem .55rem;
  border-radius: 8px;
  min-width: 36px; text-align: center;
}
.pep-home-cta{
  background: #fff;
  color: var(--c-pink);
  font-family: var(--f-display); font-weight: 700;
  font-size: .9rem;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
  position: relative; z-index: 1;
  flex-shrink: 0;
}
@media (max-width: 760px){
  .pep-home-banner{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon text"
      "grades grades"
      "cta cta";
  }
  .pep-home-icon  { grid-area: icon; }
  .pep-home-text  { grid-area: text; }
  .pep-home-grades{ grid-area: grades; justify-content: center; margin-top: .4rem; }
  .pep-home-cta   { grid-area: cta; text-align: center; }
}

/* ============== LIVE CLASS BANNER ============== */
.live-class-banner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  box-shadow: 0 8px 22px rgba(16,185,129,.35);
  position: relative;
  animation: live-slide .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes live-slide{
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.live-class-banner .live-dot{
  font-size: 2rem;
  animation: live-pulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
@keyframes live-pulse{
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(1.18); opacity: .85; }
}
.live-class-banner .live-info{
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0;
}
.live-class-banner .live-status{
  font-family: var(--f-display);
  font-size: .7rem;
  letter-spacing: .12em;
  opacity: .85;
}
.live-class-banner .live-info strong{
  font-family: var(--f-display);
  font-size: 1.15rem;
  line-height: 1.15;
  word-break: break-word;
}
.live-class-banner .live-info em{
  font-style: normal; font-size: .9rem;
  opacity: .92; line-height: 1.4;
}
.live-class-banner .live-info small{
  font-size: .8rem; opacity: .85; margin-top: .2rem;
}
.live-class-banner .live-join{
  flex-shrink: 0;
  background: #fff !important;
  color: #047857 !important;
  font-weight: 700;
  box-shadow: 0 4px 0 rgba(0,0,0,.18) !important;
  padding: .7rem 1.2rem !important;
  white-space: nowrap;
  width: auto !important;
}
.live-class-banner .live-join:hover{ transform: translateY(-2px); }
.live-dismiss{
  position: absolute; top: 6px; right: 8px;
  background: rgba(0,0,0,.18); color: #fff; border: 0;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 1rem; cursor: pointer;
  display: grid; place-items: center;
}
.live-dismiss:hover{ background: rgba(0,0,0,.32); }
@media (max-width: 540px){
  .live-class-banner{ grid-template-columns: auto 1fr; }
  .live-class-banner .live-join{ grid-column: 1 / -1; width: 100% !important; }
}

/* ============== TEACHER TOOLS NAV BAR ============== */
.teacher-tools-bar{
  display: flex; flex-wrap: wrap; gap: .35rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: .35rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-sm);
  /* Pin just below the topnav. --topnav-h is measured by JS on every
     navigate() + resize so the offset always matches the actual nav
     height — otherwise pill-chip wrap on narrow viewports made the
     nav taller than the old hard-coded 70px and the sticky bar
     started overlapping it, causing scroll jitter. */
  position: sticky;
  top: var(--topnav-h, 70px);
  z-index: 30;
}
.teacher-tools-bar a{
  flex: 1; min-width: max-content;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .85rem;
  text-align: center;
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.teacher-tools-bar a:hover{ background: var(--c-page-2); color: var(--c-ink); text-decoration: none; }
.teacher-tools-bar a.active{
  background: var(--c-purple);
  color: #fff;
  box-shadow: 0 3px 0 #6d28d9;
}
.teacher-tools-bar .ttb-lock{
  margin-left: auto;
  background: #fef2f2;
  color: #b91c1c;
  border: 0;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
}
.teacher-tools-bar .ttb-lock:hover{ background: #fee2e2; }
@media (max-width: 760px){
  .teacher-tools-bar{ position: static; flex-wrap: nowrap; overflow-x: auto; padding: .3rem; }
  .teacher-tools-bar a, .teacher-tools-bar .ttb-lock{ flex: 0 0 auto; font-size: .78rem; padding: .45rem .8rem; }
}

/* ============== CHESS TOURNAMENT — Tier 4 (teacher-create) ============== */
/* Inline "how to create" help panel above the Create button. */
.tourney-howto{
  background: linear-gradient(135deg, rgba(78,217,255,.08) 0%, rgba(104,73,240,.06) 100%);
  border: 1.5px solid rgba(104,73,240,.18);
  border-radius: 16px;
  padding: .7rem 1rem;
  margin: .6rem 0 1rem;
}
.tourney-howto > summary{
  list-style: none;
  cursor: pointer;
  font-family: var(--f-display, 'Fredoka', sans-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink, #15131c);
  padding: .25rem 0;
}
.tourney-howto > summary::-webkit-details-marker{ display: none; }
.tourney-howto > summary::before{
  content: '▸ ';
  color: var(--bh-purple, #6849F0);
  transition: transform .15s;
  display: inline-block;
  margin-right: .2rem;
}
.tourney-howto[open] > summary::before{
  transform: rotate(90deg);
}
.tourney-howto-body{ padding: .6rem 0 .2rem .4rem; font-size: .92rem; line-height: 1.55; }
.tourney-howto-body ol{ margin: 0 0 .4rem; padding-left: 1.3rem; }
.tourney-howto-body ol > li{ margin-bottom: .4rem; }
.tourney-howto-body ul{ margin: .25rem 0 .25rem 0; padding-left: 1.1rem; }
.tourney-howto-body strong{ color: var(--bh-purple-dk, #4B2DDB); }

.tourney-student-help{
  background: #fef9c3;
  border: 1px solid #facc15;
  border-radius: 12px;
  padding: .75rem 1rem;
  margin: .6rem 0 1rem;
  font-size: .92rem;
  line-height: 1.5;
}

/* ============== Modal — generic "Create tournament" form ============== */
.lc-modal-back{
  position: fixed; inset: 0;
  background: rgba(15,15,30,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem) 1rem;
  overflow-y: auto;
  z-index: 1000;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: lcModalFade .15s ease-out;
}
body.lc-modal-open{ overflow: hidden; }
@keyframes lcModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lc-modal-card{
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: 100%; max-width: 580px;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 30px 80px rgba(15,15,30,.35);
  animation: lcModalSlide .2s ease-out;
}
@keyframes lcModalSlide {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.lc-modal-x{
  position: absolute; top: .6rem; right: .8rem;
  background: transparent; border: 0;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: #6b7280;
  width: 32px; height: 32px;
  border-radius: 50%;
  transition: background .12s, color .12s;
}
.lc-modal-x:hover{ background: rgba(0,0,0,.06); color: #15131c; }

.tourney-modal-title{
  font-family: var(--f-display, 'Fredoka', sans-serif);
  margin: 0 0 .25rem;
  padding-right: 2rem;
  font-size: 1.3rem;
}
.tourney-modal .form-row{ margin: .7rem 0; }
.tourney-modal label{ display: block; font-size: .92rem; margin-bottom: .25rem; }
.tourney-modal input[type="text"],
.tourney-modal input:not([type]),
.tourney-modal textarea{
  width: 100%;
  padding: .55rem .75rem;
  border: 1.5px solid rgba(20,15,30,.15);
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
}
.tourney-modal input:focus,
.tourney-modal textarea:focus{
  outline: none;
  border-color: var(--bh-purple, #6849F0);
  box-shadow: 0 0 0 3px rgba(104,73,240,.15);
}

.tdlg-radio-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: .35rem;
}
.tdlg-radio{
  position: relative;
  display: block;
  cursor: pointer;
  padding: .65rem .8rem;
  background: #fafbff;
  border: 1.5px solid rgba(20,15,30,.10);
  border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.tdlg-radio input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
.tdlg-radio span{ font-size: .9rem; line-height: 1.3; display: block; }
.tdlg-radio small{ color: var(--c-ink-soft, #555); font-size: .78rem; }
.tdlg-radio:hover{ border-color: var(--bh-purple, #6849F0); }
.tdlg-radio input[type="radio"]:checked ~ span,
.tdlg-radio:has(input[type="radio"]:checked){
  border-color: var(--bh-purple, #6849F0);
  background: linear-gradient(135deg, rgba(104,73,240,.08), rgba(78,217,255,.06));
}
.tdlg-radio-sm{ padding: .55rem .6rem; text-align: center; }

/* Roster checkbox grid */
.tdlg-roster{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .35rem;
  max-height: 200px;
  overflow-y: auto;
  padding: .5rem;
  background: #fafbff;
  border: 1.5px solid rgba(20,15,30,.10);
  border-radius: 10px;
}
.tdlg-roster-opt{
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .55rem;
  background: #fff;
  border: 1.5px solid rgba(20,15,30,.08);
  border-radius: 8px;
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.tdlg-roster-opt:hover{ border-color: var(--bh-purple, #6849F0); }
.tdlg-roster-opt:has(input:checked){
  background: linear-gradient(135deg, rgba(104,73,240,.10), rgba(78,217,255,.08));
  border-color: var(--bh-purple, #6849F0);
}
.tdlg-roster-opt input[type="checkbox"]{ accent-color: var(--bh-purple, #6849F0); }

.tdlg-msg{
  min-height: 1.2em;
  margin: .5rem 0 0;
  color: #dc2626;
  font-weight: 700;
  font-size: .9rem;
  text-align: center;
}
.tdlg-actions{
  display: flex; gap: .5rem; justify-content: flex-end;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(20,15,30,.08);
}
@media (max-width: 480px){
  .tdlg-radio-row{ grid-template-columns: 1fr; }
  .tdlg-actions{ flex-direction: column-reverse; }
  .tdlg-actions .btn{ width: 100%; }
}

/* ============== AI TEACHING TIPS ============== */
.ai-tips-page .section-head{ margin-bottom: 1.5rem; }

.tips-grid{ display: grid; gap: 1.4rem; }

.tips-group{
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-sm);
}
.tips-cat-head{
  font-family: var(--f-display);
  font-size: 1.15rem;
  margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .6rem;
  color: var(--c-purple);
  text-transform: none;
}
.tips-cat-head span{ font-size: 1.6rem; }
.tips-list{ display: grid; gap: .55rem; }

.tip-card{
  background: var(--c-page-2);
  border-left: 4px solid var(--c-coral);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}
.tip-card summary{
  list-style: none;
  cursor: pointer;
  padding: .8rem 1rem;
  font-size: .98rem;
  position: relative;
  padding-right: 2.3rem;
}
.tip-card summary::-webkit-details-marker{ display: none; }
.tip-card summary::after{
  content: '+';
  position: absolute; right: .9rem; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-coral);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-family: var(--f-display);
}
.tip-card[open] summary::after{ content: '−'; }
.tip-card p{
  margin: 0;
  padding: 0 1rem .8rem;
  font-size: .92rem; line-height: 1.6;
  color: var(--c-ink-soft);
}
.tip-prompt{
  background: #1d2230;
  margin: 0 .8rem .8rem;
  padding: .8rem 1rem;
  border-radius: 8px;
}
.tip-prompt-label{
  display: block; font-family: var(--f-display);
  font-size: .68rem; letter-spacing: .12em;
  color: var(--c-yellow);
  margin-bottom: .35rem;
  text-transform: uppercase;
}
.tip-prompt code{
  display: block;
  color: #d6dbe8;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: .85rem; line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.tip-rules{
  margin-top: 2rem;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 2px solid var(--c-yellow);
  border-radius: var(--r-md);
  padding: 1.4rem 1.6rem;
}
.tip-rules h3{
  font-family: var(--f-display);
  margin: 0 0 .8rem;
  font-size: 1.2rem;
  text-transform: none;
  color: #a16207;
}
.tip-rules ol{ padding-left: 1.4rem; margin: 0; }
.tip-rules li{ margin-bottom: .5rem; line-height: 1.55; }
.tip-rules strong{ color: var(--c-coral-d); }

/* ============== LEARN HUB ============== */
.learn-page .section-head{ margin-bottom: 2rem; }
.learn-page h2{
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.1;
  margin: .3rem 0 .6rem;
}

.learn-grid{
  display: grid; gap: 1.2rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.5rem;
}
@media (min-width: 720px){ .learn-grid{ grid-template-columns: repeat(3, 1fr); } }

.learn-card .course-img{ height: 160px; }
.learn-meta{
  background: linear-gradient(135deg, #34d399, #10b981) !important;
}
.learn-meta > div{ text-align: center; }

.learn-tip{
  background: #fffbeb;
  border-left: 4px solid var(--c-yellow);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  font-size: .95rem;
  line-height: 1.55;
}

/* ============== LEARN TOPIC PAGE ============== */
.learn-back{
  display: inline-block;
  font-weight: 700;
  color: var(--c-ink-soft);
  margin-bottom: 1rem;
}
.learn-back:hover{ color: var(--c-ink); text-decoration: none; }

.learn-hero{
  background: linear-gradient(135deg, var(--accent), rgba(0,0,0,.2));
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: #fff;
  position: relative; overflow: hidden;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
}
.learn-hero::before{
  content:''; position:absolute; right: -30px; top: -30px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.12); pointer-events: none;
}
.learn-hero-icon{
  font-size: clamp(3rem, 6vw, 4.5rem);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.learn-hero-text{ position: relative; z-index: 1; min-width: 0; }
.learn-hero-text h2{
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: .2rem 0 .5rem;
  text-transform: uppercase;
  color: #fff;
}
.learn-hero-text p{
  margin: 0;
  font-size: .95rem;
  color: rgba(255,255,255,.92);
  line-height: 1.55;
  max-width: 560px;
}
@media (max-width: 540px){
  .learn-hero{ flex-direction: column; text-align: center; }
}

/* Grade pills */
.learn-grade-tabs{
  display: grid; gap: .5rem;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 1.5rem;
}
@media (max-width: 540px){
  .learn-grade-tabs{ grid-template-columns: repeat(3, 1fr); }
}
.learn-tab{
  background: #fff;
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  padding: .7rem .4rem;
  cursor: pointer;
  text-align: center;
  font-family: var(--f-display);
  transition: transform .12s, border-color .12s, background .12s;
}
.learn-tab strong{ display: block; font-size: 1.2rem; color: var(--c-ink); }
.learn-tab span{ display: block; font-size: .68rem; color: var(--c-ink-soft); margin-top: .15rem; }
.learn-tab:hover{ transform: translateY(-2px); border-color: var(--accent); }
.learn-tab.active{
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.learn-tab.active strong, .learn-tab.active span{ color: #fff; }

/* Lesson accordion */
.learn-lessons{
  display: grid; gap: .8rem;
  margin-bottom: 1.5rem;
}
.learn-lesson{
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .15s;
}
.learn-lesson[open]{ box-shadow: var(--shadow-md); }
.learn-lesson summary{
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: .9rem;
  position: relative;
  padding-right: 3rem;
}
.learn-lesson summary::-webkit-details-marker{ display: none; }
.learn-lesson summary::after{
  content: '+';
  position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-family: var(--f-display);
  font-size: 1.3rem;
}
.learn-lesson[open] summary::after{ content: '−'; }
.learn-num{
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700;
}
.learn-lesson summary > div{ flex: 1; min-width: 0; }
.learn-lesson summary strong{
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--c-ink);
  display: block;
  line-height: 1.2;
}
.learn-time{
  display: block;
  font-size: .78rem;
  color: var(--c-ink-soft);
  margin-top: .15rem;
}

.learn-body{
  padding: 0 1.2rem 1.2rem;
  border-top: 1px dashed var(--c-line);
  padding-top: 1rem;
}
.learn-body-text p{
  margin: 0 0 .9rem;
  line-height: 1.7;
  font-size: 1rem;
  color: var(--c-ink);
}
.learn-body-text p:last-child{ margin-bottom: 0; }

.learn-vocab{
  background: var(--c-page-2);
  border-radius: 10px;
  padding: .9rem 1rem;
  margin: 1rem 0;
}
.learn-vocab h4{
  font-family: var(--f-display);
  font-size: .85rem;
  margin: 0 0 .5rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.learn-vocab-pills{
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.learn-vocab-pills span{
  background: #fff;
  color: var(--c-ink);
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  border: 1px solid var(--c-line);
}

.learn-fact{
  background: #fffbeb;
  border-left: 4px solid var(--c-yellow);
  border-radius: 8px;
  padding: .8rem 1rem;
  margin: 1rem 0;
}
.learn-fact strong{
  display: block;
  font-family: var(--f-display);
  color: #a16207;
  font-size: .9rem;
  margin-bottom: .25rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.learn-fact p{
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--c-ink);
}

/* YouTube video card — appears per-lesson in Learn topic.
   Opens in a new tab; no iframe so no CSP changes needed.
   Layout: thumbnail on the left (CSS-built YouTube-ish chip)
   + body text on the right. */
.learn-video{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: stretch;
  background: linear-gradient(180deg, #fff5f5, #fff);
  border: 2px solid #ff0033;
  border-radius: 12px;
  padding: .9rem 1rem;
  margin: 1rem 0;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.learn-video:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255, 0, 51, .18);
  border-color: #c8001f;
}
.learn-video-thumb{
  position: relative;
  background: #ff0033;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  overflow: hidden;
  box-shadow: inset 0 -8px 14px rgba(0,0,0,.25);
}
.learn-video-thumb::before{
  /* faint radial shine */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 60%);
}
.learn-video-play{
  width: 38px; height: 38px;
  background: #fff;
  border-radius: 50%;
  color: #ff0033;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding-left: 3px;   /* optical-centre the play triangle */
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.learn-video-yt{
  position: absolute;
  bottom: 4px; right: 6px;
  font-size: .58rem;
  letter-spacing: .08em;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  opacity: .8;
}
.learn-video-text{
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0;
}
.learn-video-text strong{
  font-family: var(--f-display);
  color: #c8001f;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.learn-video-title{
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink);
  line-height: 1.35;
}
.learn-video-desc{
  font-size: .85rem;
  color: #5a4a3a;
  line-height: 1.4;
}
.learn-video-channel{
  display: inline-block;
  background: #fffaf0;
  border: 1px dashed #f1dba8;
  color: #5a4a3a;
  font-size: .78rem;
  padding: .25rem .55rem;
  border-radius: 99px;
  margin-top: .25rem;
  align-self: flex-start;
}
.learn-video-channel strong{ color: #c8001f; }
.learn-video-cta{
  font-size: .82rem;
  color: #c8001f;
  font-weight: 700;
  margin-top: .2rem;
}
@media (max-width: 500px){
  .learn-video{ grid-template-columns: 80px 1fr; gap: .7rem; padding: .7rem .8rem; }
  .learn-video-play{ width: 30px; height: 30px; font-size: .9rem; }
  .learn-video-title{ font-size: .92rem; }
}

/* Quick check (self-test) */
.learn-quiz{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--c-line);
}
.learn-quiz h4{
  font-family: var(--f-display);
  font-size: .9rem;
  margin: 0 0 .8rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.learn-q-block{
  background: var(--c-page-2);
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-bottom: .7rem;
}
.learn-q-text{
  margin: 0 0 .6rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--c-ink);
}
.learn-q-opts{
  display: grid; gap: .35rem;
}
.learn-q-opt{
  background: #fff;
  border: 2px solid var(--c-line);
  border-radius: 8px;
  padding: .55rem .85rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: .92rem;
  transition: border-color .12s, background .12s;
}
.learn-q-opt:hover{ border-color: var(--accent); }
.learn-q-opt.right{
  background: rgba(52,211,153,.16);
  border-color: var(--c-green);
}
.learn-q-opt.wrong{
  background: rgba(239,68,68,.10);
  border-color: #ef4444;
}
.learn-q-fb{
  margin-top: .6rem;
  font-size: .9rem;
  font-weight: 600;
  padding: .5rem .8rem;
  border-radius: 8px;
}
.learn-q-fb.ok{ background: rgba(52,211,153,.16); color: #047857; }
.learn-q-fb.err{ background: rgba(239,68,68,.10); color: #b91c1c; }

/* "Try it in the app" footer */
.learn-next-up{
  background: linear-gradient(135deg, var(--accent), rgba(0,0,0,.15));
  color: #fff;
  border-radius: var(--r-md);
  padding: 1.2rem 1.4rem;
  text-align: center;
  margin-top: 1.5rem;
}
.learn-next-up strong{
  display: block;
  font-family: var(--f-display);
  font-size: 1.1rem;
  margin-bottom: .35rem;
}
.learn-next-up p{
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(255,255,255,.95);
}
.learn-next-up a{
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

/* ============== TEACHER RESOURCES — home-page course-card style ============== */
.resources-v2{ padding-top: 0; }

/* Top hero — matches the chunky display heading style of home */
.res-hero{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 1.5rem;
}
.res-hero .eyebrow{
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-coral);
  margin-bottom: .5rem;
}
.res-hero h2{
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
  margin: 0 0 .6rem;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.res-hero p{
  font-size: 1rem;
  color: var(--c-ink-soft);
  margin: 0 auto;
  max-width: 540px;
  line-height: 1.55;
}

/* Category pills — chunky like home's nav-style pills */
.res-cats-v2{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin: 1.5rem 0 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed var(--c-line);
}
.res-cat-pill{
  background: #fff;
  border: 2px solid var(--c-line);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--c-ink);
  cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s, background .12s;
}
.res-cat-pill:hover{
  border-color: var(--accent, var(--c-purple));
  transform: translateY(-2px);
}
.res-cat-pill.active{
  background: var(--accent, var(--c-purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
}

/* Each category section — bigger spacing, clearer header */
.res-section-v2{
  margin-bottom: 3rem;
  padding-bottom: 2rem;
}
.res-section-v2:last-of-type{ margin-bottom: 1rem; padding-bottom: 0; }

.res-section-head-v2{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
  padding: 1.2rem 1.4rem;
  background: #fff;
  border-radius: var(--r-md);
  border-left: 6px solid var(--accent);
  box-shadow: var(--shadow-sm);
}
.res-section-icon{
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.8rem;
  color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
}
.res-section-head-v2 > div:last-child{ flex: 1; min-width: 0; }
.res-section-eyebrow{
  display: inline-block;
  font-family: var(--f-display);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .15rem;
}
.res-section-head-v2 h3{
  font-family: var(--f-display);
  font-size: 1.4rem;
  margin: 0 0 .35rem;
  text-transform: uppercase;
  color: var(--c-ink);
  line-height: 1.05;
}
.res-section-head-v2 p{
  margin: 0;
  font-size: .9rem;
  color: var(--c-ink-soft);
  line-height: 1.55;
  max-width: 700px;
}

/* Grid — exactly like home's course-grid */
.res-grid-v2{
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Cards — extend the home page .course-card with resource-specific tweaks */
.res-card-v2{
  position: relative;
}
.res-card-v2 .course-img{
  height: 140px;   /* slightly shorter than home grade cards */
}
.res-card-letter{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 5rem;
  color: rgba(255,255,255,.95);
  text-shadow: 0 6px 12px rgba(0,0,0,.25);
  letter-spacing: -.02em;
  line-height: 1;
}
.res-cost-pill{
  /* The "course-price" pink badge — use it as the cost badge */
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  padding: .35rem .8rem !important;
  font-size: .65rem !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  bottom: -16px !important;
}

.res-card-v2 .course-body h3{
  font-size: 1.2rem;
  margin: 0 0 .2rem;
}
.res-by-v2{
  font-size: .75rem;
  color: var(--c-ink-soft);
  margin: 0 0 .6rem !important;
  font-style: italic;
}
.res-card-v2 .course-body p:not(.res-by-v2){
  font-size: .88rem;
  line-height: 1.5;
}

/* Footer meta — adapted from home course-meta but single column */
.res-meta-v2{
  grid-template-columns: 1fr !important;
  background: linear-gradient(135deg, #fde68a, #fbbf24) !important;
  color: var(--c-ink) !important;
  padding: .7rem 1rem !important;
  text-align: left !important;
}
.res-meta-v2 > div{
  border: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.res-meta-v2 span{
  display: block !important;
  font-size: .6rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .15rem;
}
.res-meta-v2 strong{
  font-family: var(--f-display) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  color: var(--c-ink) !important;
}

/* Bottom 'Visit site' CTA strip — like home page's green meta footer but coloured per category */
.res-visit-v2{
  background: var(--accent);
  color: #fff;
  padding: .8rem 1rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .9rem;
  text-align: center;
  letter-spacing: .03em;
  transition: padding .15s;
}
.res-card-v2:hover .res-visit-v2{
  padding-left: 1.4rem;
  padding-right: .6rem;
}

/* ============== TEACHER RESOURCES PAGE — clean, spacious layout (legacy, kept hidden) ============== */
.resources-page .section-head{ margin-bottom: 1.5rem; }
.resources-page h2{ font-size: clamp(1.6rem, 3vw, 2.2rem) !important; }

/* Inline category strip — single row that scrolls horizontally on phones */
.res-cats{
  display: flex; gap: .4rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--c-line);
}
.res-cats::-webkit-scrollbar{ height: 4px; }
.res-cat-btn{
  flex-shrink: 0;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: .4rem .9rem .7rem;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .9rem;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.res-cat-btn:hover{ color: var(--c-ink); }
.res-cat-btn.active{
  color: var(--c-purple);
  border-bottom-color: var(--c-purple);
  font-weight: 700;
}

/* Section groups — generous spacing between categories */
.res-group{
  margin-bottom: 3rem;
}
.res-group:last-of-type{ margin-bottom: 1.5rem; }

.res-group-head{
  display: flex; gap: 1rem; align-items: flex-start;
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
}
.res-group-icon{
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--c-page-2);
  display: grid; place-items: center;
}
.res-group-head h3{
  font-family: var(--f-display);
  font-size: 1.4rem;
  margin: 0 0 .3rem;
  color: var(--c-ink);
  text-transform: none;
  font-weight: 700;
}
.res-group-head p{
  margin: 0;
  font-size: .92rem;
  color: var(--c-ink-soft);
  line-height: 1.55;
  max-width: 720px;
}

/* Card grid — only 2 columns on desktop for plenty of breathing room */
.res-grid{
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .res-grid{ grid-template-columns: 1fr 1fr; } }

/* Cards — calm white with a single accent on hover */
.res-card{
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  padding: 1.4rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title  cost"
    "by     by"
    "note   note"
    "footer footer";
  gap: .35rem 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.res-card:hover{
  border-color: var(--c-purple);
  box-shadow: 0 4px 12px rgba(139, 92, 246, .12);
}
.res-card-head{
  display: contents;   /* let title and cost sit in named grid cells directly */
}
.res-card-head h4{
  grid-area: title;
  font-family: var(--f-display);
  font-size: 1.15rem;
  margin: 0;
  color: var(--c-ink);
  line-height: 1.2;
}
.res-cost{
  grid-area: cost;
  font-size: .68rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  white-space: nowrap;
  align-self: center;
  letter-spacing: .02em;
  text-transform: none;
  background: transparent;
  padding: 0;
}
.res-by{
  grid-area: by;
  font-size: .8rem;
  color: var(--c-ink-soft);
  margin: 0;
  font-style: normal;
}
/* Replace the bright "best for" strip with a calm grey label */
.res-best{
  display: none;   /* removed from layout — info is integrated into note */
}
.res-note{
  grid-area: note;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--c-ink);
  margin: .4rem 0 0;
}
.res-note::before{
  content: attr(data-best) " — ";
  font-weight: 600;
  color: var(--c-purple);
}
.res-card-footer{
  grid-area: footer;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.res-open{
  background: transparent;
  color: var(--c-purple) !important;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .9rem;
  padding: 0;
  border-radius: 0;
  text-decoration: none !important;
  box-shadow: none;
  transition: gap .12s;
  display: inline-flex; align-items: center; gap: .25rem;
}
.res-open:hover{ gap: .55rem; text-decoration: none !important; }
.res-open::after{ content: "→"; transition: transform .12s; }
.res-open:hover::after{ transform: translateX(2px); }

.res-footer-note{
  background: #fffbeb;
  border-left: 4px solid var(--c-yellow);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  margin-top: 2.5rem;
}
.res-footer-note h3{
  font-family: var(--f-display);
  margin: 0 0 .6rem;
  font-size: 1.05rem;
  color: #a16207;
  text-transform: none;
}
.res-footer-note ul{
  margin: 0; padding-left: 1.2rem;
}
.res-footer-note li{
  margin-bottom: .4rem;
  line-height: 1.55;
  font-size: .92rem;
}

/* ============== CLASS LINK BROADCASTER ============== */
.cl-shell{
  display: grid; gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){ .cl-shell{ grid-template-columns: 1fr 1fr; } }

.cl-form, .cl-preview{
  background: #fff;
  border-radius: var(--r-md);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-line);
}
.cl-preview{
  align-self: start;
}
.cl-share{
  display: flex; gap: .5rem;
  background: var(--c-page-2);
  padding: .4rem;
  border-radius: 999px;
  border: 1px solid var(--c-line);
}
.cl-share input{
  flex: 1; min-width: 0;
  background: transparent;
  border: 0;
  padding: .4rem .8rem;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: .82rem;
  color: var(--c-ink);
}
.cl-share input:focus{ outline: none; }

/* ============== JOIN CLASS (student-side share-URL landing) ============== */
.join-class-page{
  min-height: 60vh;
  display: grid; place-items: center;
}
.join-card{
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  max-width: 540px; width: 100%;
  text-align: center;
  border: 4px solid var(--c-green);
  box-shadow: 0 14px 40px rgba(16,185,129,.25);
}
.join-pulse{
  font-size: 4rem;
  display: inline-block;
  animation: live-pulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
  margin-bottom: .5rem;
}
.join-card h2{
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  text-transform: none;
  margin: .3rem 0 .6rem;
  color: var(--c-ink);
}
.join-msg{
  background: #fff;
  border-radius: 12px;
  padding: .8rem 1rem;
  font-size: 1rem;
  color: var(--c-ink);
  margin: 1rem auto;
  max-width: 380px;
  border-left: 4px solid var(--c-green);
  text-align: left;
}
.join-time{
  display: inline-block;
  background: var(--c-yellow);
  color: var(--c-ink);
  padding: .45rem 1rem;
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 700;
  font-size: .85rem;
  margin-bottom: 1.2rem;
}
.btn.join-big{
  background: var(--c-green) !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  padding: 1rem 2rem !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 0 #047857 !important;
  display: inline-flex;
  margin-top: .5rem;
}
.btn.join-big:hover{ box-shadow: 0 9px 0 #047857 !important; }

/* ============== CHESS CHEER TOAST ============== */
.cheer-toast{
  position: fixed; right: 1rem; bottom: 1rem;
  z-index: 80;
  background: #fff;
  border-radius: var(--r-md);
  border: 3px solid var(--c-coral);
  box-shadow: 0 14px 32px rgba(20,15,30,.22), 0 4px 0 var(--c-coral-d);
  padding: .8rem 1rem .85rem .8rem;
  display: flex; align-items: center; gap: .8rem;
  width: min(320px, calc(100vw - 2rem));
  animation: cheer-pop .35s cubic-bezier(.34,1.56,.64,1);
}
.cheer-toast.cheer-out{
  animation: cheer-fade .35s ease-out forwards;
}
@keyframes cheer-pop{
  0%   { transform: translateY(20px) scale(.85); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
@keyframes cheer-fade{
  to { transform: translateY(20px) scale(.95); opacity: 0; }
}
.cheer-toast .cheer-bot{
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  display: grid; place-items: center;
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
  animation: cheer-bot-bob 1.2s ease-in-out infinite;
}
@keyframes cheer-bot-bob{
  0%,100%{ transform: rotate(-6deg); }
  50%   { transform: rotate(6deg); }
}
.cheer-toast .cheer-tag{
  font-family: var(--f-display); font-size:.7rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-coral-d);
  margin-bottom: .1rem;
}
.cheer-toast .cheer-msg{
  font-family: var(--f-display); font-weight: 700;
  font-size: .98rem; line-height: 1.3;
  color: var(--c-ink);
}

/* ============== PEP DAILY PRACTICE ============== */
.pep-page .section-head{ gap: 1rem; flex-wrap: wrap; }
.pep-date-pill{
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid var(--c-yellow);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
.pep-grade-tabs{
  display: grid; gap: .6rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.2rem 0 1.5rem;
}
.pep-tab{
  background: #fff;
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 1rem .8rem;
  cursor: pointer;
  text-align: center;
  font-family: var(--f-display);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.pep-tab strong{ display: block; font-size: 1.4rem; color: var(--c-ink); }
.pep-tab span{ display: block; font-size: .8rem; color: var(--c-ink-soft); margin-top: .2rem; }
.pep-tab:hover{ transform: translateY(-2px); border-color: var(--c-coral); }
.pep-tab.active{
  background: linear-gradient(135deg, var(--c-coral), var(--c-pink));
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 0 var(--c-coral-d);
}
.pep-tab.active strong, .pep-tab.active span{ color: #fff; }

.pep-progress{ margin-bottom: 1rem; }
.pep-progress-track{
  height: 8px; background: var(--c-line);
  border-radius: 4px; overflow: hidden;
}
.pep-progress-fill{
  height: 100%; background: linear-gradient(90deg, var(--c-green), var(--c-coral));
  transition: width .3s ease;
}
.pep-progress-label{
  font-family: var(--f-display); font-size: .85rem;
  color: var(--c-ink-soft); margin-top: .3rem;
  text-align: right;
}

.pep-card{
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  box-shadow: var(--shadow-md);
}
.pep-pill{
  display: inline-block; padding: .35rem .9rem;
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 700;
  font-size: .8rem; letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.pep-pill-math   { background: rgba(96,165,250,.18);  color: #1d4ed8; }
.pep-pill-eng    { background: rgba(236,72,153,.16);  color: #be185d; }
.pep-pill-science{ background: rgba(52,211,153,.18);  color: #047857; }
.pep-pill-social { background: rgba(249,115,22,.16);  color: #c2410c; }
.pep-pill-ability{ background: rgba(139,92,246,.16);  color: #6d28d9; }
/* Integrated Studies — its own teal pill so kids don't confuse it
   with pure Science or Social Studies. Used for NSC G1-3 questions. */
.pep-pill-is     { background: rgba(20,184,166,.16);  color: #0f766e; }

/* =========================================================
   PEP — Sub-section tabs (Daily / Past Papers / Prep / About)
   ========================================================= */
.pep-section-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1rem 0 1.2rem;
  padding: .35rem;
  background: #f1f5f9;
  border-radius: 14px;
}
.pep-section-tab{
  flex: 1 1 0;
  min-width: 9rem;
  border: 0;
  background: transparent;
  padding: .65rem .85rem;
  border-radius: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .92rem;
  color: #475569;
  cursor: pointer;
  transition: background .2s ease, color .15s ease, transform .12s ease;
  white-space: nowrap;
}
/* Narrow phones — switch to horizontal scroll so the 5 tabs don't
   stack into an unreadable pile. Each tab keeps its full label. */
@media (max-width: 640px){
  .pep-section-tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .pep-section-tabs::-webkit-scrollbar{ display: none; }
  .pep-section-tab{
    flex: 0 0 auto;
    min-width: 0;
    scroll-snap-align: start;
  }
}
.pep-section-tab:hover{ background: #e2e8f0; color: #1e293b; }
.pep-section-tab.active{
  background: #fff;
  color: #1e293b;
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .25);
}

/* Shared intro card used at the top of Past Papers + Prep Booklets */
.pep-papers-intro{
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,155,58,.08) 0%, rgba(255,209,0,.08) 100%);
  border: 1px solid rgba(0,155,58,.2);
  margin-bottom: 1.2rem;
}
.pep-papers-intro strong{ color: #0f5132; }
.pep-papers-flag{ font-size: 1.8rem; line-height: 1; flex-shrink: 0; }

/* Past papers — one card per year, grades stacked inside */
.pep-papers-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.pep-paper-year{
  background: #fff;
  border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 16px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 4px 14px -10px rgba(15, 23, 42, .15);
}
.pep-paper-year-head{
  display: flex;
  align-items: baseline;
  gap: .6rem;
  border-bottom: 2px solid #fef3c7;
  padding-bottom: .55rem;
  margin-bottom: .8rem;
}
.pep-paper-year-head strong{
  font-family: var(--f-display);
  font-size: 1.6rem;
  color: var(--jf-green, #009b3a);
}
.pep-paper-year-head span{
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #64748b;
  text-transform: uppercase;
}
.pep-paper-grade{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .55rem 0;
  border-top: 1px dashed #e2e8f0;
}
.pep-paper-grade:first-of-type{ border-top: 0; padding-top: 0; }
.pep-paper-grade.is-empty{
  flex-direction: row;
  align-items: center;
  gap: .55rem;
  opacity: .8;
}
.pep-paper-grade-tag{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #475569;
}
.pep-paper-chips{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.pep-paper-chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
  border: 1px solid currentColor;
  transition: transform .12s ease, box-shadow .15s ease;
}
.pep-paper-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 5px 12px -6px rgba(0,0,0,.25);
  filter: brightness(1.05);
}
.pep-paper-chip-icon{ font-size: .8rem; opacity: .8; }

/* Prep booklets — bigger cards with the kind icon on the left */
.pep-prep-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: .9rem;
}
.pep-prep-card{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .2s ease;
}
.pep-prep-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(15,23,42,.25);
}
.pep-prep-icon{
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: #fff;
}
.pep-prep-text{ display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pep-prep-grade{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
}
.pep-prep-title{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.04rem;
  color: #0f172a;
  line-height: 1.2;
}
.pep-prep-blurb{
  margin: .15rem 0 0;
  font-size: .82rem;
  line-height: 1.4;
}
.pep-prep-arrow{
  font-size: 1.2rem;
  color: #94a3b8;
  font-weight: 700;
  align-self: start;
  margin-top: .2rem;
}

/* About PEP — explanatory cards in a 2-up grid */
.pep-about-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.pep-about-card{
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--c-line, #e2e8f0);
}
.pep-about-card h3{
  margin: 0 0 .45rem;
  font-size: 1.02rem;
  color: #0f172a;
}
.pep-about-card p{ margin: 0; line-height: 1.55; font-size: .92rem; color: #334155; }
.pep-about-card-0{ background: linear-gradient(135deg, rgba(0,155,58,.08) 0%, #fff 70%); border-color: rgba(0,155,58,.25); }
.pep-about-card-1{ background: linear-gradient(135deg, rgba(255,209,0,.12) 0%, #fff 70%); border-color: rgba(255,209,0,.45); }
.pep-about-card-2{ background: linear-gradient(135deg, rgba(220,38,38,.08) 0%, #fff 70%); border-color: rgba(220,38,38,.25); }
.pep-about-card-3{ background: linear-gradient(135deg, rgba(124,58,237,.08) 0%, #fff 70%); border-color: rgba(124,58,237,.25); }
.pep-about-cta{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

@media (max-width: 540px){
  .pep-section-tab{ font-size: .82rem; padding: .55rem .7rem; min-width: 0; }
  .pep-paper-year{ padding: .9rem 1rem 1rem; }
  .pep-prep-card{ grid-template-columns: 48px 1fr; }
  .pep-prep-arrow{ display: none; }
}

.pep-q{
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.45;
  margin-bottom: 1.4rem;
  color: var(--c-ink);
}
.pep-opts{ display: grid; gap: .6rem; }
.pep-opt{
  display: flex; align-items: center; gap: .8rem;
  background: #fff;
  border: 2px solid var(--c-line);
  border-radius: 12px;
  padding: .85rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .1s;
  font-size: 1rem;
  font-family: inherit;
}
.pep-opt:hover{ border-color: var(--c-coral); background: var(--c-page-2); }
.pep-opt-letter{
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-page);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700;
  color: var(--c-ink-soft);
}
.pep-opt-text{ flex: 1; }
.pep-opt.right{
  border-color: var(--c-green);
  background: rgba(52,211,153,.14);
}
.pep-opt.right .pep-opt-letter{ background: var(--c-green); color: #fff; }
.pep-opt.wrong{
  border-color: #ef4444;
  background: rgba(239,68,68,.10);
}
.pep-opt.wrong .pep-opt-letter{ background: #ef4444; color: #fff; }
.pep-feedback{
  margin-top: 1rem; padding: .8rem 1rem;
  border-radius: 10px;
  font-weight: 600; min-height: 1.2rem;
}
.pep-feedback:empty{ display: none; }
.pep-feedback.ok{ background: rgba(52,211,153,.16); color: #047857; }
.pep-feedback.err{ background: rgba(239,68,68,.12); color: #b91c1c; }
.pep-controls{
  display: flex; gap: .6rem; flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* PEP results screen */
.pep-results{
  background: #fff;
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--c-yellow);
}
.pep-stars{
  font-size: 2.4rem;
  letter-spacing: .15em;
  margin-bottom: .8rem;
}
.pep-results h3{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-transform: none;
  margin: 0 0 .5rem;
}
.pep-results .big-score{
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--c-coral-d);
  margin: .5rem 0 1rem;
}
.pep-results .big-score span{ color: var(--c-ink-soft); font-size: .55em; }
.pep-breakdown{
  background: var(--c-page-2);
  border-radius: 12px;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  display: inline-block;
  text-align: left;
}
.pep-break-row{ font-size: .95rem; line-height: 1.7; }

.pep-review{ display: grid; gap: .7rem; }
.pep-review h3{ font-family: var(--f-display); }
.pep-review-row{
  background: #fff;
  border-radius: 12px;
  padding: .9rem 1rem;
  border-left: 4px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.pep-review-row.right{ border-left-color: var(--c-green); }
.pep-review-row.wrong{ border-left-color: #ef4444; }
.pep-review-q{ margin-bottom: .4rem; line-height: 1.45; }
.pep-review-a{ font-size: .9rem; color: var(--c-ink-soft); line-height: 1.55; }

/* ============== TEACHER WARM-UPS ============== */
.warmups-page .section-head{
  gap: 1rem; flex-wrap: wrap;
}
.warm-grade-tabs{
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-bottom: 1.5rem;
}
.warm-tab{
  background: #fff;
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  padding: .85rem .7rem;
  cursor: pointer;
  text-align: center;
  font-family: var(--f-display);
  transition: transform .12s, border-color .12s;
}
.warm-tab strong{ display:block; font-size: 1.3rem; color: var(--c-ink); }
.warm-tab span{ display:block; font-size: .72rem; color: var(--c-ink-soft); margin-top: .15rem; line-height: 1.2; }
.warm-tab:hover{ transform: translateY(-2px); border-color: var(--accent); }
.warm-tab.active{
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 5px 0 rgba(0,0,0,.18);
}
.warm-tab.active strong, .warm-tab.active span{ color: #fff; }

.warm-blurb{
  background: #fff;
  border-left: 4px solid var(--accent, var(--c-coral));
  padding: .9rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  font-size: .95rem;
  color: var(--c-ink);
}

.warm-grid{
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.warm-card{
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .15s, transform .12s;
}
.warm-card[open]{ box-shadow: var(--shadow-md); }
.warm-card summary{
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.1rem;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem .8rem;
  align-items: start;
}
.warm-card summary::-webkit-details-marker{ display: none; }
.warm-card summary::after{
  content: '+';
  position: absolute; right: 1rem; top: 1rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent, var(--c-coral));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-family: var(--f-display);
  transition: transform .2s;
}
.warm-card[open] summary::after{ content: '−'; transform: rotate(180deg); }
.warm-card .warm-num{
  grid-row: 1 / span 2;
  width: 32px; height: 32px;
  background: var(--accent, var(--c-coral));
  color: #fff;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.warm-card summary strong{
  font-family: var(--f-display); font-size: 1rem;
  color: var(--c-ink);
  padding-right: 2.5rem;
}
.warm-card summary p{
  grid-column: 2;
  margin: .2rem 0 0;
  font-size: .85rem; color: var(--c-ink-soft);
  line-height: 1.4;
}

.warm-body{
  padding: 0 1.1rem 1.1rem;
  border-top: 1px dashed var(--c-line);
}
.warm-meta{
  display: flex; gap: 1rem; flex-wrap: wrap;
  background: var(--c-page-2);
  padding: .6rem .8rem;
  border-radius: 8px;
  margin: .8rem 0;
  font-size: .85rem;
}
.warm-body h4{
  font-family: var(--f-display);
  margin: .8rem 0 .3rem;
  font-size: .9rem;
  color: var(--accent, var(--c-coral));
  text-transform: uppercase; letter-spacing: .04em;
}
.warm-steps{
  padding-left: 1.3rem;
  margin: .3rem 0 .8rem;
}
.warm-steps li{
  margin-bottom: .5rem; line-height: 1.55;
  font-size: .92rem;
}
.warm-tip{
  background: #fffbeb;
  border-left: 4px solid var(--c-yellow);
  padding: .7rem .9rem;
  border-radius: 0 8px 8px 0;
  font-size: .9rem;
  line-height: 1.5;
  margin-top: .8rem;
}

/* ============== KID-FRIENDLY CHESS ============== */
.chess-page .section-head{ margin-bottom: 1rem; }

/* Mode selector */
.chess-mode-bar{
  display:flex; gap:.5rem; flex-wrap: wrap; margin-bottom: 1.2rem;
  align-items:center;
}
.mode-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background: #fff; border: 2px solid var(--c-line);
  padding:.6rem 1.1rem; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700; font-size:.95rem;
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.mode-btn:hover{ border-color: var(--c-coral); transform: translateY(-1px); }
.mode-btn.active{
  background: var(--c-coral); color:#fff; border-color: transparent;
  box-shadow: 0 4px 0 var(--c-coral-d);
}
.diff-bar{
  display:flex; gap:.4rem; margin-left: .4rem;
  background: var(--c-page-2); padding:.3rem; border-radius:999px;
}
.diff-btn{
  background: transparent; border:0; padding:.4rem 1rem;
  border-radius: 999px; font-family: var(--f-display); font-weight: 700;
  cursor: pointer; font-size:.85rem; color: var(--c-ink-soft);
}
.diff-btn.active{ background: var(--c-yellow); color: var(--c-ink); box-shadow: var(--shadow-sm); }

/* Layout */
.chess-shell-kid{
  display:grid; gap: 1.2rem; grid-template-columns: 1fr;
}
@media (min-width: 980px){ .chess-shell-kid{ grid-template-columns: 1.1fr 1fr; } }

.chess-board-card{
  background: #fff; border-radius: var(--r-lg);
  padding: 1.2rem;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--c-purple);
}
.captured-tray{
  display:flex; align-items:center; gap:.6rem; flex-wrap: wrap;
  background: var(--c-page-2);
  padding: .6rem .9rem; border-radius: 12px;
  margin-bottom: .7rem;
  min-height: 44px;
  font-family: var(--f-display); font-weight:700; font-size:.85rem;
}
.captured-tray.me{ background: #fffbeb; margin-top:.7rem; margin-bottom: 0; }
.captured-tray .tray-label{ color: var(--c-ink-soft); white-space: nowrap; }
.captured-tray .tray-pieces{ font-size: 1.4rem; line-height: 1; flex: 1; word-break: break-all; }
.cap-piece{ display:inline-block; margin-right:.1rem; }
.hint-line{ margin: .8rem 0 0; font-size:.85rem; }

/* Colourful board */
.chess-host-colorful .chess-board{
  border: 4px solid var(--c-purple);
  border-radius: 14px;
  background: linear-gradient(135deg, #fde68a, #c4b5fd, #fbcfe8);
  padding: 6px;
}
.chess-host-colorful .chess-sq{
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  border-radius: 4px;
}
.chess-host-colorful .chess-sq.light{ background: #fef3c7; }
.chess-host-colorful .chess-sq.dark{  background: #a78bfa; }
.chess-host-colorful .chess-sq.sel{
  outline: 4px solid var(--c-coral); outline-offset:-4px;
  background: rgba(251, 191, 36, .55) !important;
}
.chess-host-colorful .chess-sq.move::after{
  background: rgba(34, 197, 94, .65);
  width: 35%; height: 35%;
}
.chess-host-colorful .chess-sq.capture::after{
  border: 4px solid rgba(239, 68, 68, .9);
}

/* Tournament/competitive board — kills the legal-move highlights entirely
   AND visually marks the board as a real-tournament game. The .move and
   .capture rings simply don't render here. */
.chess-board.chess-board-competitive .chess-sq.move::after,
.chess-board.chess-board-competitive .chess-sq.capture::after{
  display: none !important;
  background: none !important;
  border: none !important;
}
.chess-board.chess-board-competitive{
  /* Subtle gold halo so kids know this is a 'real' tournament game. */
  outline: 3px solid rgba(184, 134, 11, .55);
  outline-offset: 4px;
}
.chess-board.chess-board-competitive .chess-sq.sel{
  /* Keep the selected-piece cue (you tapped THIS piece) but stripped
     down — no glow, just a thin gold ring. */
  outline: 3px solid #b8860b !important;
  outline-offset: -3px;
  background: rgba(255, 209, 0, .25) !important;
}

/* Side panel */
.chess-side{ display:flex; flex-direction:column; gap: 1rem; }
.chess-status-card{
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  color: #fff;
  padding: 1.2rem;
  border-radius: var(--r-md);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.status-eyebrow{
  font-family: var(--f-display); font-size:.95rem;
  letter-spacing: .03em; margin-bottom:.5rem;
}
.status-pill{
  background: var(--c-yellow); color: var(--c-ink);
  display:inline-block; padding:.5rem 1.2rem;
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1rem; letter-spacing:.04em;
  box-shadow: var(--shadow-sm);
}

.chess-action-grid{
  display:grid; gap:.5rem; grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 600px){ .chess-action-grid{ grid-template-columns: 1fr; } }

.history-card{
  background:#fff; border-radius: var(--r-md);
  padding: 1rem; border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.history-card h4{ margin:0 0 .5rem; font-family: var(--f-display); }
.history-list{
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size:.95rem; max-height: 180px; overflow-y: auto;
}
.hist-row{
  display:grid; grid-template-columns: 40px 1fr 1fr;
  padding: .25rem .4rem;
  border-radius: 6px;
}
.hist-row:nth-child(even){ background: var(--c-page-2); }
.hist-head{
  background: var(--c-ink) !important; color: #fff;
  font-family: var(--f-display); font-size:.8rem;
  text-transform: uppercase; letter-spacing:.05em;
}

.tip-card{
  background: #fffbeb;
  border-left: 4px solid var(--c-yellow);
  padding: .8rem 1rem; border-radius: 10px;
  font-size:.92rem; line-height:1.5;
}

.chess-piece-card.colour{
  border-radius: 14px;
  border: 0; padding: .9rem;
  color: var(--c-ink); margin-bottom: .6rem;
  position: relative; overflow: hidden;
}
.chess-piece-card.colour::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width: 6px; border-radius: 6px 0 0 6px;
}
.chess-piece-card.colour.c-coral { background: #fff7f2; }
.chess-piece-card.colour.c-coral::before { background: var(--c-coral); }
.chess-piece-card.colour.c-pink  { background: #fdf2f8; }
.chess-piece-card.colour.c-pink::before  { background: var(--c-pink); }
.chess-piece-card.colour.c-purple{ background: #f5f3ff; }
.chess-piece-card.colour.c-purple::before{ background: var(--c-purple); }
.chess-piece-card.colour.c-green { background: #ecfdf5; }
.chess-piece-card.colour.c-green::before { background: var(--c-green); }
.chess-piece-card.colour.c-blue  { background: #eff6ff; }
.chess-piece-card.colour.c-blue::before  { background: var(--c-blue); }
.chess-piece-card.colour.c-yellow{ background: #fffbeb; }
.chess-piece-card.colour.c-yellow::before{ background: var(--c-yellow); }
.chess-piece-card.colour .pic{ font-size: 2.4rem; }
.chess-piece-card.colour .moves{ font-size:.88rem; color: var(--c-ink-soft); }

/* ============== ADVANCED GAMES (BlockMaze / Treasure / etc.) ============== */
.mission-bar{
  background: #fffbeb; border-left: 4px solid var(--c-yellow);
  padding: .8rem 1rem; border-radius: 10px; margin-bottom: .8rem;
  font-size: .95rem;
}
.mission-bar strong{ color: var(--c-coral-d); }
.level-pills{
  display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center;
  margin: .2rem 0 1rem;
}
.level-pill{
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--c-ink); border: 2px solid var(--c-line);
  font-family: var(--f-display); font-weight: 700; font-size: .95rem;
  display:grid; place-items:center;
  transition: transform .12s, box-shadow .12s;
}
.level-pill:hover{ border-color: var(--c-coral); }
.level-pill.active{
  border-color: var(--c-green); color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(52,211,153,.18);
}

/* BlockMaze ----- */
.bm-shell{
  display:grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 880px){ .bm-shell{ grid-template-columns: 1fr 1fr; } }
.bm-pane{
  background: #fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line);
}
.bm-pane-head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap; gap:.5rem;
  padding-bottom: .6rem; margin-bottom: .8rem;
  border-bottom: 1px dashed var(--c-line);
  font-family: var(--f-display);
}
.bm-pill{
  background: var(--c-yellow); color: var(--c-ink);
  padding:.25rem .7rem; border-radius:999px;
  font-weight:700; font-size:.8rem;
}
.bm-blockcount{
  background: var(--c-page); color: var(--c-ink-soft);
  padding:.2rem .7rem; border-radius:999px; font-size:.78rem; font-weight:700;
}
.bm-runrow{ display:flex; gap:.4rem; flex-wrap:wrap; }
.bm-codebody{
  display:grid; gap:.6rem; grid-template-columns: 90px 1fr;
  flex: 1;
}
.bm-cat{
  font-family: var(--f-display); font-size:.75rem;
  color: var(--c-ink-soft); padding-left:.4rem; margin: .3rem 0 .25rem;
  text-transform: uppercase; letter-spacing:.05em;
  border-left: 4px solid var(--c-coral);
}
.bm-palette{
  background: var(--c-page-2); border-radius: 12px;
  padding: .5rem; min-height: 220px;
}
.bm-stage{
  background: #fcfcfa;
  border: 2px dashed var(--c-line);
  border-radius: 12px;
  padding: .8rem;
  position: relative;
  min-height: 220px;
}
.bm-program{ min-height: 180px; display:flex; flex-direction:column; gap: .35rem; }
.bm-block{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .75rem; border-radius:10px;
  color:#fff; font-weight:700; font-family: var(--f-display);
  font-size:.85rem; cursor: grab; user-select:none;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
  align-self: flex-start;
  white-space: nowrap;
  margin-bottom: .35rem;
}
.bm-block.placed{ cursor: pointer; }
.bm-block.bm-move{ background: var(--c-green); }
.bm-block.bm-turn{ background: var(--c-yellow); color: var(--c-ink); }
.bm-block.bm-repeat{ background: var(--c-purple); padding-bottom: .55rem; }
.bm-block.bm-cond{ background: var(--c-blue); }
.bm-block.bm-action{ background: var(--c-coral); }
.bm-slot{
  background: rgba(255,255,255,.25); margin-top:.3rem;
  border-radius: 8px; padding: .25rem;
  min-height: 32px; min-width: 110px;
  font-size: .75rem; color: rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
}
.bm-slot .bm-block{ margin: 0; }
.bm-trash{
  position:absolute; right: .8rem; bottom:.8rem;
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:1px solid var(--c-line);
  display:grid; place-items:center; opacity:.6;
}
.bm-board{
  display:grid; gap:3px; padding:6px;
  background: var(--c-ink); border-radius:10px;
  margin: 0 auto;
  width: 100%;
  aspect-ratio: 1/1;
}
.bm-cell{
  background: #fef9c3; border-radius: 4px;
  display:grid; place-items:center;
  font-size: clamp(1rem, 3.4vw, 1.5rem);
  position: relative;
}
.bm-cell.wall{ background: #475569; }
.bm-cell.goal{ background: #bbf7d0; }
.bm-cell.star{ background: #fde68a; }
.bm-robot{
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  transition: transform .25s ease;
}
.bm-status{
  margin-top: .8rem; padding:.7rem; border-radius:10px;
  background: var(--c-page); font-weight:700; text-align:center;
  font-family: var(--f-display);
}
.bm-status.ok{ background: rgba(52,211,153,.18); color:#047857; }
.bm-status.err{ background: rgba(239,68,68,.14); color:#b91c1c; }

/* TreasureHunt ----- */
.th-shell{
  display:grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 880px){ .th-shell{ grid-template-columns: 1.1fr 1fr; } }
.th-left, .th-right{
  background:#fff; border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  padding: 1rem; box-shadow: var(--shadow-sm);
}
.th-board{
  display:grid; gap: 3px;
  background: var(--c-line); padding: 3px;
  border-radius: 10px;
  width: 100%; aspect-ratio: 1/1;
  margin-bottom: .8rem;
}
.th-cell{
  background: #f1f5f9; border-radius:4px;
  display:grid; place-items:center;
  font-size: clamp(.9rem, 3vw, 1.2rem);
  cursor: pointer;
  transition: background .25s;
}
.th-cell.cold{ background: #cbd5e1; }
.th-cell.cool{ background: #bae6fd; }
.th-cell.warm{ background: #fde68a; }
.th-cell.hot{  background: #ff8a73; }
.th-cell.found{ background: #facc15; }
.th-cell.me{ outline: 3px solid var(--c-purple); outline-offset:-3px; z-index:2; }
.th-bot{ font-size: 1.2em; }
.th-sensor{
  text-align:center; padding:.7rem; border-radius:10px;
  background: var(--c-page); font-weight:700;
  margin-bottom: .8rem;
  font-family: var(--f-display); font-size: .95rem;
}
.th-sensor.hot { background: #ff8a73; color:#fff; }
.th-sensor.warm{ background: #fde68a; color: var(--c-ink); }
.th-sensor.cool{ background: #bae6fd; color: var(--c-ink); }
.th-sensor.cold{ background: #cbd5e1; color: var(--c-ink); }
.th-sensor.ok  { background: rgba(52,211,153,.25); color:#047857; }
.th-sensor.err { background: rgba(239,68,68,.14); color:#b91c1c; }
.th-controls{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.th-row3{ display:flex; gap:.4rem; }
.btn.btn-yellow{ background: var(--c-yellow); color: var(--c-ink); box-shadow: 0 5px 0 #d97706; }
.btn.btn-yellow:hover{ box-shadow: 0 7px 0 #d97706; }
.th-dig{ margin-top: .4rem; }
.th-stats{ display:flex; flex-direction:column; gap:.4rem; margin-bottom: 1rem; }
.th-stat{
  display:flex; justify-content:space-between; align-items:center;
  background: var(--c-page); padding:.6rem .8rem; border-radius:10px;
  font-weight:700;
}
.th-stat .val{ color: var(--c-coral); }
.th-explain{
  background: #fffbeb; border-left: 4px solid var(--c-yellow);
  padding: .8rem; border-radius: 8px; font-size: .88rem;
  line-height: 1.5; margin-bottom: .8rem;
}
.th-legend{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.3rem;
  font-size:.85rem;
}
.th-legend li{ display:flex; align-items:center; gap:.5rem; }
.th-legend .dot{ width:14px; height:14px; border-radius:50%; display:inline-block; }

/* PixelPaint ----- */
.pp-shell{
  display:grid; gap:1rem; grid-template-columns: 1fr;
}
@media (min-width: 880px){ .pp-shell{ grid-template-columns: 1fr 1fr; } }
.pp-right{
  display:grid; gap: 1rem; grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px){ .pp-right{ grid-template-columns: 1fr; } }
.pp-block{
  background:#fff; border-radius: var(--r-md);
  border: 1px solid var(--c-line); padding: .9rem;
  box-shadow: var(--shadow-sm);
}
.pp-block h4{ margin: 0 0 .5rem; font-family: var(--f-display); }
.pp-grid{
  display:grid; gap: 2px;
  background: var(--c-ink); padding: 3px;
  border-radius: 8px; aspect-ratio: 1/1;
}
.pp-pix{
  background: #fff; border-radius: 2px;
}
.pp-pix.on{ background: var(--c-coral); }

/* AITrainer ----- */
.at-acc{
  display:flex; align-items:center; gap:.6rem;
  background: var(--c-page); padding:.6rem .9rem; border-radius:10px;
  margin-bottom: .8rem; font-weight: 700; font-size:.9rem;
}
.at-bar{
  flex:1; height: 10px; border-radius: 5px;
  background: #e2e8f0; overflow: hidden;
}
.at-bar-fill{
  width: 0%; height: 100%; background: linear-gradient(90deg, var(--c-coral), var(--c-green));
  transition: width .3s;
}
.at-shell{
  display:grid; gap:1rem; grid-template-columns: 1fr;
}
@media (min-width: 720px){ .at-shell{ grid-template-columns: 1fr 1.5fr; } }
.at-card{
  background: #fff; border-radius: var(--r-md);
  border: 2px dashed var(--c-line);
  padding: 1.5rem; text-align: center;
  min-height: 180px; display:flex; flex-direction:column; justify-content:center;
}
.at-emoji{ font-size: 4.5rem; margin-bottom: .5rem; }
.at-label{ font-family: var(--f-display); font-size: 1rem; }
.at-bins{
  display:grid; gap:.5rem; align-content: start;
}
.at-bin{
  background: var(--c-page); border:2px dashed var(--c-line);
  border-radius: var(--r-md); padding: 1.2rem .7rem; cursor: pointer;
  font-family: var(--f-display);
  transition: border-color .12s, transform .1s, background .12s;
}
.at-bin:hover{ border-color: var(--c-coral); background: #fff; transform: translateY(-2px); }
.at-bin-head{ font-weight: 700; font-size: 1rem; }

/* LogicLock ----- */
.ll-shell{
  display:grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 720px){ .ll-shell{ grid-template-columns: 1fr 1.4fr; } }
.ll-facts, .ll-rules{
  background: #fff; border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  padding: 1rem; box-shadow: var(--shadow-sm);
}
.ll-facts h4, .ll-rules h4{
  margin: 0 0 .6rem; font-family: var(--f-display);
  text-transform: uppercase; font-size:.9rem; color: var(--c-ink-soft);
}
.ll-fact{
  display:inline-block; padding: .35rem .7rem; border-radius: 999px;
  background: rgba(52,211,153,.18); color: #047857;
  font-weight: 700; margin: .2rem .25rem 0 0;
  font-family: var(--f-display); font-size:.85rem;
}
.ll-rule{
  display:block; width:100%; text-align:left;
  background: var(--c-page); border:2px solid var(--c-line);
  padding:.6rem .8rem; border-radius: 10px;
  margin-bottom: .4rem; cursor: pointer; font-size:.95rem;
}
.ll-rule.ready{ border-color: var(--c-green); background:#fff; }
.ll-rule.done{ background: rgba(52,211,153,.14); border-color: transparent; opacity:.75; }
.ll-rule:hover{ border-color: var(--c-coral); }
.ll-goal{
  margin-top:.8rem; padding:.7rem 1rem; border-radius: 10px;
  background: #fff7ed; font-weight: 700; font-family: var(--f-display);
  border: 2px dashed var(--c-coral);
  text-align:center;
}

/* ============== HOME CAROUSEL ARROWS ============== */
.play-strip-wrap{ position: relative; }
.play-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-ink); color: #fff; border: 0;
  display: grid; place-items: center; font-size: 1.2rem;
  cursor: pointer; z-index: 5;
  box-shadow: var(--shadow-md); opacity: 0.9;
  transition: opacity .2s, transform .15s;
}
.play-arrow:hover{ opacity: 1; transform: translateY(-50%) scale(1.05); }
.play-arrow.left{ left: -4px; }
.play-arrow.right{ right: -4px; }
@media (max-width: 540px){ .play-arrow{ display: none; } }

/* =========================================================
   CHESS — PIECE STORY BOOK (#/chess/book/:idx)
   Two-page spread: board on left, story page on right.
   ========================================================= */
.chess-book{ max-width: 1100px; margin: 0 auto; }
.chess-book-cta{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(135deg, #fef3c7 0%, #ffe4e6 100%);
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 18px;
  padding: 1rem 1.2rem;
  text-decoration: none;
  color: #1f0f3a;
  margin: 1rem 0 1.6rem;
  box-shadow: 0 6px 18px -10px rgba(75, 30, 130, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.chess-book-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(75, 30, 130, .45);
  color: #1f0f3a;
}
.chess-book-cta-emoji{
  font-size: 2.4rem;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  background: #fff;
  border-radius: 14px;
}
.chess-book-cta-body{ display: flex; flex-direction: column; line-height: 1.3; }
.chess-book-cta-body strong{ font-family: var(--f-display); font-size: 1.15rem; }
.chess-book-cta-body span{ color: #4b3a6b; font-size: .9rem; margin-top: .2rem; }
.chess-book-cta-arrow{
  font-size: 1.6rem;
  color: #4b1e82;
  font-weight: 800;
}

.cbk-spread{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
  gap: 1.4rem;
  background: var(--cbk-accent, #fef3c7);
  border-radius: 26px;
  padding: 1.4rem;
  border: 1px solid rgba(31, 15, 58, .08);
  box-shadow: 0 12px 32px -16px rgba(31, 15, 58, .35);
  margin-top: 1rem;
}
@media (max-width: 720px){
  .cbk-spread{ grid-template-columns: 1fr; padding: 1rem; }
}

.cbk-board-wrap{
  display: grid;
  place-items: center;
}
.cbk-board{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  border: 4px solid #1f2937;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.5);
}
.cbk-sq{
  display: grid; place-items: center;
  position: relative;
  font-size: 0;
  min-width: 0;
  min-height: 0;
}
.cbk-sq.lt{ background: #f6f2e6; }
.cbk-sq.dk{ background: #1f2937; }
.cbk-piece{
  font-size: clamp(1.4rem, 4.5vw, 2.6rem);
  line-height: 1;
  color: #fbbf24;
  text-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.cbk-sq.lt .cbk-piece{ color: #1f0f3a; text-shadow: none; }
/* === Unified chess piece style ===
   Both armies use the SAME filled-glyph set (♚♛♜♝♞♟♔♕♖♗♘♙ all render
   identically across devices once we override with consistent CSS).
   We then colour the two sides:
     .cbk-piece-w → white army (white fill + dark outline)
     .cbk-piece-b → black army (solid dark fill)
   Result: one coherent piece set, two team colours. */
.cbk-piece.cbk-piece-static{ color: #1f0f3a; text-shadow: none; }
.cbk-sq.dk .cbk-piece-static{ color: #f6f2e6; }
.cbk-piece-w{
  color: #fff !important;
  text-shadow:
    -1px -1px 0 #1f0f3a,
     1px -1px 0 #1f0f3a,
    -1px  1px 0 #1f0f3a,
     1px  1px 0 #1f0f3a,
     0 2px 4px rgba(0,0,0,.35) !important;
}
.cbk-piece-b{
  color: #1f0f3a !important;
  text-shadow:
    -.5px -.5px 0 #fff,
     .5px -.5px 0 #fff,
    -.5px  .5px 0 #fff,
     .5px  .5px 0 #fff,
     0 2px 4px rgba(0,0,0,.45) !important;
}
.cbk-dot{
  width: 38%; height: 38%;
  background: rgba(34, 197, 94, .85);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
}
.cbk-sq.dk .cbk-dot{
  background: rgba(132, 204, 22, .9);
  box-shadow: 0 0 0 3px rgba(132, 204, 22, .3);
}
.cbk-dot-x{
  background: rgba(244, 63, 94, .85) !important;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .25) !important;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
}

.cbk-page{
  background: #fff;
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  position: relative;
  box-shadow: 0 4px 12px -8px rgba(0,0,0,.18);
}
.cbk-eyebrow{
  font-family: var(--f-display);
  font-size: .82rem;
  letter-spacing: .14em;
  color: #6b5b8a;
  margin-bottom: .25rem;
}
.cbk-title{
  font-family: var(--f-display);
  font-size: clamp(2rem, 6vw, 3rem);
  margin: 0 0 .8rem;
  color: #1f0f3a;
  letter-spacing: -.01em;
  line-height: 1;
}
.cbk-body{
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  color: #1f0f3a;
}
.cbk-body strong{ color: #4b1e82; }
.cbk-tagline{
  display: inline-block;
  background: #4b1e82;
  color: #fbbf24;
  padding: .55rem .95rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .9rem;
  font-weight: 700;
  margin-top: .2rem;
}
.cbk-character{
  position: absolute;
  bottom: -.2rem; right: 1rem;
  font-size: clamp(2.6rem, 8vw, 4rem);
  opacity: .15;
  pointer-events: none;
}

.cbk-nav{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-top: 1.4rem;
}
.cbk-nav-btn{
  background: #4b1e82;
  color: #fbbf24;
  font-family: var(--f-display);
  font-size: .92rem;
  font-weight: 800;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .12s ease;
  box-shadow: 0 3px 0 #2e0e54;
}
.cbk-nav-btn:hover{ transform: translateY(-2px); color: #fbbf24; }
.cbk-pager{
  display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap;
}
.cbk-dot-page{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #4b1e82;
  font-family: var(--f-display);
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid rgba(75, 30, 130, .15);
  transition: transform .12s ease;
}
.cbk-dot-page:hover{ transform: translateY(-2px); color: #4b1e82; }
.cbk-dot-page.active{
  background: #fbbf24;
  border-color: #f59e0b;
  color: #4b1e82;
  box-shadow: 0 3px 0 #b45309;
}
.cbk-foot{
  text-align: center;
  margin-top: .8rem;
  color: #6b5b8a;
  font-size: .82rem;
}

/* =========================================================
   CHESS STORYBOOK — Interactive practice slide (.cbk-practice)
   One per piece page (King / Queen / Rook / Bishop / Knight /
   Pawn). Kid taps a square; legal moves succeed with a green
   flash, illegal moves buzz red. After N correct moves the
   piece is "mastered".
   ========================================================= */
.cbk-practice{
  margin: 1.5rem auto 0;
  max-width: 540px;
  background: linear-gradient(180deg, #fffaf0, #fff);
  border: 2px solid #f3c66a;
  border-radius: 16px;
  padding: 1rem 1.1rem 1rem;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.15);
}
.cbk-practice-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .7rem;
  align-items: center;
  margin-bottom: .8rem;
}
.cbk-practice-emoji{ font-size: 1.7rem; line-height: 1; }
.cbk-practice-head strong{
  display: block;
  font-family: var(--f-display, system-ui);
  font-size: 1.05rem;
  color: #5a3000;
}
.cbk-practice-sub{
  display: block;
  font-size: .82rem;
  color: #7a5a2a;
  margin-top: .1rem;
}
.cbk-practice-score{
  background: #fff;
  border: 2px solid #c3771a;
  border-radius: 99px;
  padding: .3rem .7rem;
  font-weight: 800;
  font-family: var(--f-display, system-ui);
  color: #c3771a;
  font-size: 1rem;
  white-space: nowrap;
}
.cbk-practice-of{ color: #7a5a2a; }

.cbk-practice-board{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #1f2937;
  border: 3px solid #1f2937;
  border-radius: 8px;
  overflow: hidden;
}
.cbk-pr-sq{
  appearance: none;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;     /* allow grid 1fr to strictly equalise */
  min-height: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0;
  position: relative;
  transition: background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cbk-pr-sq.lt{ background: #f6f2e6; }
.cbk-pr-sq.dk{ background: #1f2937; }
.cbk-pr-sq:hover:not(:disabled){ filter: brightness(1.08); }
.cbk-pr-sq:focus-visible{ outline: 3px solid #ff9800; outline-offset: -3px; z-index: 2; }
.cbk-pr-sq .cbk-piece{
  font-size: clamp(1.2rem, 4.2vw, 2.4rem);
  line-height: 1;
}

/* Right answer — green flash with a check pip */
.cbk-pr-right{
  animation: cbkPrRight .55s ease;
  position: relative;
}
.cbk-pr-right::after{
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 900;
  color: #16a34a;
  text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 12px rgba(22,163,74,.6);
  pointer-events: none;
  animation: cbkPrCheck .55s ease;
}
@keyframes cbkPrRight{
  0%   { background: #22c55e; transform: scale(1.05); }
  100% { /* falls back to lt/dk */ }
}
@keyframes cbkPrCheck{
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1); }
}

/* Wrong answer — red shake */
.cbk-pr-wrong{
  animation: cbkPrWrong .6s ease;
  background: rgba(244, 63, 94, .85) !important;
}
@keyframes cbkPrWrong{
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* Hint markers — show-me-where dots */
.cbk-pr-hint::before{
  content: '';
  position: absolute;
  width: 34%; height: 34%;
  background: rgba(34, 197, 94, .85);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
  pointer-events: none;
}
.cbk-pr-from{
  outline: 3px solid #ff9800;
  outline-offset: -3px;
}

.cbk-practice-feedback{
  min-height: 2.2rem;
  margin-top: .7rem;
  padding: .55rem .8rem;
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.45;
  background: #fff7e6;
  border: 1px dashed #f1dba8;
  color: #5a4a3a;
}
.cbk-practice-feedback:empty{ display: none; }
.cbk-fb-right{ background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.cbk-fb-wrong{ background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.cbk-fb-info{  background: #eff6ff; border-color: #93c5fd; color: #1e3a8a; }
.cbk-fb-win{
  background: linear-gradient(135deg, #fff5d6, #ffd76a);
  border: 2px solid #f59e0b;
  color: #78350f;
  font-size: 1rem;
}

.cbk-practice-actions{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .65rem;
}
.cbk-practice-reset, .cbk-practice-show{
  appearance: none;
  border: 2px solid #c3771a;
  background: #fff;
  color: #c3771a;
  font-weight: 700;
  padding: .45rem .9rem;
  border-radius: 99px;
  cursor: pointer;
  font-size: .88rem;
  transition: background .15s, transform .12s;
}
.cbk-practice-reset:hover, .cbk-practice-show:hover{ background: #fff7e6; transform: translateY(-1px); }
.cbk-practice-show{ background: #fff7e6; }

@media (max-width: 540px){
  .cbk-practice{ padding: .8rem .8rem .9rem; }
  .cbk-practice-head{ grid-template-columns: auto 1fr; row-gap: .3rem; }
  .cbk-practice-score{ grid-column: 1 / -1; justify-self: end; }
}

/* =========================================================
   LANDING v3 (#/) — simple two-column hero with animated
   mascot scene on the left, title + role CTAs on the right.
   ========================================================= */
.lc-hero-v3{
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1.4rem 3rem;
}
.lc-hero-row{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: center;
  min-height: 520px;
}
@media (max-width: 820px){
  .lc-hero-row{ grid-template-columns: 1fr; gap: 1rem; min-height: 0; }
}

/* LEFT — mascot scene */
.lc-illo{
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.lc-illo-bubble{
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a7f3d0 0%, #6ee7b7 45%, #34d399 100%);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .55);
}
.lc-illo-main{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(7rem, 22vw, 14rem);
  line-height: 1;
  filter: drop-shadow(0 12px 18px rgba(31, 15, 58, .25));
  animation: lcBotBob 3.4s ease-in-out infinite;
  z-index: 2;
}
@keyframes lcBotBob {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  50%      { transform: translate(-50%, calc(-50% - 14px)) rotate(3deg); }
}
.lc-orb{
  position: absolute;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1;
  filter: drop-shadow(0 6px 8px rgba(31, 15, 58, .25));
  animation: lcOrbFloat 4.2s ease-in-out infinite;
  z-index: 3;
}
.lc-illo .lc-o1 { top: 4%;  left: 12%; animation-delay: 0s;    }
.lc-illo .lc-o2 { top: 8%;  right: 6%; animation-delay: .6s;   }
.lc-illo .lc-o3 { bottom: 22%; left: 4%; animation-delay: 1.2s; }
.lc-illo .lc-o4 { bottom: 6%;  right: 18%; animation-delay: 1.8s; }
.lc-illo .lc-o5 { top: 50%; left: 2%;  animation-delay: 2.4s; }
.lc-illo .lc-o6 { top: 38%; right: 2%; animation-delay: 3.0s; }
.lc-illo .lc-o7 { bottom: 4%; left: 38%; animation-delay: 3.6s; }
@keyframes lcOrbFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-16px) rotate(8deg); }
}

/* RIGHT — copy + CTAs */
.lc-hero-copy{ max-width: 480px; }
.lc-hero-eyebrow{
  display: block;
  font-family: var(--f-display);
  font-size: .82rem;
  letter-spacing: .14em;
  color: var(--c-coral, #ff6b3d);
  text-transform: uppercase;
}
.lc-hero-title{
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 1.05;
  margin: .25rem 0 .8rem;
  color: var(--c-ink);
  letter-spacing: -.01em;
}
.lc-hero-blurb{
  margin: 0 0 1rem;
  color: var(--c-ink-soft, #4b3a6b);
  line-height: 1.55;
  font-size: 1rem;
}
.lc-hero-prompt{
  margin: 1.4rem 0 .8rem;
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--c-ink);
  font-weight: 700;
}
.lc-hero-ctas{
  display: grid; gap: .55rem;
  margin-bottom: 1rem;
}
.lc-cta{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: center;
  padding: .8rem 1rem;
  border-radius: 16px;
  border: 2px solid rgba(31, 15, 58, .1);
  background: #fff;
  text-decoration: none;
  color: var(--c-ink);
  box-shadow: 0 6px 18px -12px rgba(31, 15, 58, .35);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lc-cta:hover{
  transform: translateY(-3px);
  color: var(--c-ink);
  box-shadow: 0 10px 22px -12px rgba(31, 15, 58, .4);
}
.lc-cta-student { border-left: 6px solid var(--jf-green); }
.lc-cta-parent  { border-left: 6px solid var(--c-coral, #ff6b3d); }
.lc-cta.is-saved{ outline: 3px solid rgba(0, 155, 58, .25); outline-offset: 2px; }
.lc-cta-emoji{
  font-size: 2rem;
  line-height: 1;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(0, 155, 58, .08);
  border-radius: 14px;
}
.lc-cta-parent .lc-cta-emoji{ background: rgba(255, 107, 61, .1); }
.lc-cta-body{ display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lc-cta-body strong{ font-family: var(--f-display); font-size: 1.05rem; color: var(--c-ink); }

/* =========================================================
   NEW SIGN-IN LANDING — playful 4-tile picker + bouncing robot
   ========================================================= */
.lc-signin-hero{
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.2rem 3rem;
  position: relative;
  overflow: hidden;
}
/* Decorative stage — robot + floating companions live here.
   Sized to ~220px so the rest of the page flows underneath. */
.lc-signin-stage{
  position: relative;
  height: 360px;
  margin: 0 auto 1.2rem;
  pointer-events: none;        /* don't block tile clicks */
}
.lc-signin-stage > *{ pointer-events: auto; }

/* GREEN ORB BACKDROP — the soft mint circle the robot sits in.
   Pure CSS. Gradient fill, soft inner shadow, gentle pulse. */
.lc-robot-orb{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 32%, #7eecb3 0%, #4dd99a 38%, #36c486 78%, #1ba768 100%);
  box-shadow:
    inset 0 -28px 50px -10px rgba(8, 80, 50, .35),
    inset 0 18px 35px -10px rgba(255, 255, 255, .55),
    0 18px 40px -12px rgba(54, 196, 134, .55);
  animation: lcOrbPulse 4s ease-in-out infinite;
  z-index: 0;
}
@keyframes lcOrbPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: inset 0 -28px 50px -10px rgba(8,80,50,.35), inset 0 18px 35px -10px rgba(255,255,255,.55), 0 18px 40px -12px rgba(54,196,134,.55); }
  50%      { transform: translate(-50%, -50%) scale(1.03); box-shadow: inset 0 -28px 50px -10px rgba(8,80,50,.4),  inset 0 18px 35px -10px rgba(255,255,255,.6),  0 22px 56px -10px rgba(54,196,134,.7); }
}

/* ROBOT v2 — pink head-only character inside the green orb.
   Two antennas (red shafts, glowing red balls). Yellow visor band
   across the top. Pink/peach face, pink ear panels, glowing blue
   rectangle eyes. Black mouth slot. Bobs continuously; spins +
   speaks on click via .is-spin. */
.lc-robot{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
  animation: lcRobotBob 2.8s ease-in-out infinite;
}

/* Antennas */
.lc-robot-antenna{
  position: absolute;
  top: -34px;
  width: 6px;
  height: 60px;
  background: linear-gradient(180deg, #ff5d6b 0%, #d63d4f 100%);
  border-radius: 4px;
  transform-origin: bottom center;
}
.lc-robot-antenna-l{ left: 56px;  transform: rotate(-12deg); }
.lc-robot-antenna-r{ right: 56px; transform: rotate( 12deg); }
.lc-robot-antenna::after{
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 35% 30%, #ffb3bd 0%, #ff5d6b 45%, #c12c40 100%);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 93, 107, .65), 0 0 24px rgba(255, 93, 107, .4);
  transform: translateX(-50%);
  animation: lcRobotAntenna 1.4s ease-in-out infinite;
}
.lc-robot-antenna-r::after{ animation-delay: .35s; }

/* Head — soft pink rounded square */
.lc-robot-head{
  position: absolute;
  top: 30px;
  left: 50%;
  width: 180px;
  height: 160px;
  background: linear-gradient(180deg, #ffd9e0 0%, #f7c6cf 100%);
  border-radius: 36px;
  transform: translateX(-50%);
  box-shadow:
    inset 0 -12px 28px -10px rgba(170, 80, 100, .35),
    inset 0 14px 20px -10px rgba(255, 255, 255, .9),
    0 14px 26px -14px rgba(15, 23, 42, .35);
}

/* Yellow visor strip across the top of the head */
.lc-robot-visor{
  position: absolute;
  top: 10px;
  left: 50%;
  width: 92px;
  height: 14px;
  background: linear-gradient(180deg, #ffd24a 0%, #f0a824 100%);
  border-radius: 8px;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,.18), inset 0 1px 2px rgba(255,255,255,.6);
}

/* Side ear panels — bright pink rounded rectangles */
.lc-robot-ear{
  position: absolute;
  top: 56px;
  width: 22px;
  height: 80px;
  background: linear-gradient(180deg, #ff6f7e 0%, #d63d4f 100%);
  border-radius: 12px;
  box-shadow: inset 0 -6px 10px -3px rgba(110, 24, 40, .55);
}
.lc-robot-ear-l{ left: -10px; }
.lc-robot-ear-r{ right: -10px; }

/* Dark face plate that holds the eyes + mouth */
.lc-robot-face{
  position: absolute;
  top: 50px;
  left: 50%;
  width: 140px;
  height: 80px;
  background: linear-gradient(180deg, #2a2640 0%, #15132a 100%);
  border-radius: 22px;
  transform: translateX(-50%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,.5);
}

/* Eyes — glowing blue rounded rectangles */
.lc-robot-eye{
  position: absolute;
  top: 22px;
  width: 22px;
  height: 30px;
  background: linear-gradient(180deg, #7bdaff 0%, #2bb5ff 60%, #0a85d8 100%);
  border-radius: 11px;
  box-shadow: 0 0 12px rgba(43, 181, 255, .9), 0 0 22px rgba(43, 181, 255, .55);
  overflow: hidden;
  animation: lcRobotBlink 5.5s ease-in-out infinite;
}
.lc-robot-eye::after{
  content: '';
  position: absolute;
  top: 4px;
  left: 5px;
  width: 6px;
  height: 8px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  animation: lcRobotEye 4s ease-in-out infinite;
}
.lc-robot-eye-l{ left: 22px; }
.lc-robot-eye-r{ right: 22px; }
.lc-robot-eye-r{ animation-delay: .1s; }

/* Mouth — dark slot at the bottom of the face plate */
.lc-robot-mouth{
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 32px;
  height: 8px;
  background: #0a0917;
  border-radius: 4px;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  animation: lcRobotMouth 3.6s ease-in-out infinite;
}

/* Shadow underneath the orb */
.lc-robot-shadow{
  position: absolute;
  bottom: -26px;
  left: 50%;
  width: 160px;
  height: 18px;
  background: rgba(15, 23, 42, .25);
  border-radius: 50%;
  filter: blur(7px);
  transform: translateX(-50%);
  animation: lcRobotShadow 2.8s ease-in-out infinite;
}

.lc-robot.is-spin{
  animation: lcRobotSpin .9s cubic-bezier(.34,1.56,.64,1) 1;
}

/* Animations */
@keyframes lcRobotBob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0)    rotate(-1.5deg); }
  50%      { transform: translate(-50%, -50%) translateY(-10px) rotate( 1.5deg); }
}
@keyframes lcRobotShadow {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: .25; }
  50%      { transform: translateX(-50%) scale(.75); opacity: .15; }
}
@keyframes lcRobotAntenna {
  0%, 100% { transform: translateX(-50%) scale(1);   filter: brightness(1)   drop-shadow(0 0 4px rgba(255,93,107,.6)); }
  50%      { transform: translateX(-50%) scale(1.2); filter: brightness(1.5) drop-shadow(0 0 12px rgba(255,93,107,.9)); }
}
@keyframes lcRobotBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.08); }
}
@keyframes lcRobotEye {
  0%, 90%, 100% { transform: translate(0, 0); }
  10%, 30%      { transform: translate(3px, 0); }
  50%, 70%      { transform: translate(-3px, 0); }
}
@keyframes lcRobotMouth {
  0%, 92%, 100% { transform: translateX(-50%) scaleX(1)  scaleY(1); }
  94%, 98%      { transform: translateX(-50%) scaleX(.6) scaleY(1.6); }
}
@keyframes lcRobotSpin {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(1); }
  40%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.08); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
@keyframes lcRobotBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-14px); }
}
@keyframes lcRobotShadow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .25; }
  50%      { transform: translateX(-50%) scale(.7); opacity: .15; }
}
@keyframes lcRobotAntenna {
  0%, 100% { transform: translateX(-50%) scale(1);   filter: brightness(1); }
  50%      { transform: translateX(-50%) scale(1.2); filter: brightness(1.4); }
}
@keyframes lcRobotEye {
  0%, 90%, 100% { transform: translate(0, 0); }
  10%, 30%      { transform: translate(2px, 0); }
  50%, 70%      { transform: translate(-2px, 0); }
}
@keyframes lcRobotSpin {
  0%   { transform: translateX(-50%) rotate(0deg) scale(1); }
  40%  { transform: translateX(-50%) rotate(180deg) scale(1.1); }
  100% { transform: translateX(-50%) rotate(360deg) scale(1); }
}

/* FLOATING COMPANIONS — emoji orbs drifting around the robot.
   Each one has its own starting position and float animation
   for varied movement. */
.lc-float{
  position: absolute;
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .25));
}
.lc-f-star  { top:  18px; left: 22%; animation: lcFloat1 5s ease-in-out infinite;    font-size: 2.2rem; }
.lc-f-rocket{ top:  32px; right:22%; animation: lcFloat2 6s ease-in-out infinite;    font-size: 2.4rem; z-index: 3; }
.lc-f-book  { top: 215px; left: 18%; animation: lcFloat3 4.6s ease-in-out infinite;  font-size: 2rem; }
.lc-f-bulb  { bottom: 22px; right: 38%; animation: lcFloat4 5.4s ease-in-out infinite; font-size: 2rem; }
.lc-f-puzzle{ top: 110px; left:  6%; animation: lcFloat5 5s ease-in-out infinite;    font-size: 2rem; }
.lc-f-mango { bottom: 38px; left: 42%; animation: lcFloat6 5.8s ease-in-out infinite; font-size: 2rem; }
.lc-f-gear  { top: 140px; right: 6%; animation: lcFloat7 6.4s ease-in-out infinite;  font-size: 1.9rem; }
.lc-f-bird  { top:  70px; right: 32%; animation: lcFloat8 4.8s ease-in-out infinite; }

@keyframes lcFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(10px, -14px) rotate(15deg); }
}
@keyframes lcFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-12px, -18px) rotate(-12deg); }
}
@keyframes lcFloat3 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(8px, 12px); }
}
@keyframes lcFloat4 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-8px, 10px); }
}
@keyframes lcFloat5 {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(6px, -8px) rotate(20deg); }
}
@keyframes lcFloat6 {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(-10px, -10px) rotate(-15deg); }
}
@keyframes lcFloat7 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(14px, 18px); }
}
@keyframes lcFloat8 {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25%      { transform: translate(-6px, -6px) rotate(-8deg); }
  75%      { transform: translate(6px, -6px) rotate(8deg); }
}

@media (max-width: 540px){
  .lc-signin-stage{ height: 280px; }
  .lc-robot-orb{ width: 240px; height: 240px; }
  .lc-robot{ width: 170px; height: 170px; }
  .lc-robot-head{ width: 140px; height: 124px; top: 22px; }
  .lc-robot-face{ width: 108px; height: 62px; top: 38px; }
  .lc-robot-visor{ width: 70px; height: 11px; top: 8px; }
  .lc-robot-ear{ width: 16px; height: 60px; top: 42px; }
  .lc-robot-ear-l{ left: -8px; }
  .lc-robot-ear-r{ right: -8px; }
  .lc-robot-eye{ width: 18px; height: 24px; top: 18px; border-radius: 9px; }
  .lc-robot-eye-l{ left: 16px; }
  .lc-robot-eye-r{ right: 16px; }
  .lc-robot-mouth{ width: 26px; bottom: 10px; }
  .lc-robot-antenna{ height: 46px; top: -26px; }
  .lc-robot-antenna-l{ left: 44px; }
  .lc-robot-antenna-r{ right: 44px; }
  .lc-robot-antenna::after{ width: 18px; height: 18px; top: -11px; }
  .lc-robot-shadow{ width: 130px; bottom: -20px; }
  .lc-float{ font-size: 1.5rem; }
  .lc-f-star, .lc-f-rocket, .lc-f-book, .lc-f-bulb, .lc-f-puzzle, .lc-f-mango{ font-size: 1.55rem; }
}
.lc-signin-head{ text-align: center; margin-bottom: 1.6rem; }
.lc-signin-eyebrow{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #64748b;
}
.lc-signin-title{
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: .2rem 0 .55rem;
  background: linear-gradient(135deg, var(--jf-green, #009b3a) 0%, var(--jf-gold, #FFD100) 60%, #ea580c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lcTitleWiggle 6s ease-in-out infinite;
  display: inline-block;
}
@keyframes lcTitleWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-1.5deg); }
  75%      { transform: rotate(1.5deg); }
}
/* Soft confetti dots in the page background — pure CSS, no images. */
.lc-signin-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 8% 22%,  rgba(255, 209, 0, .15) 0, transparent 18px),
    radial-gradient(circle at 92% 14%, rgba(0, 155, 58, .12) 0, transparent 22px),
    radial-gradient(circle at 18% 78%, rgba(124, 58, 237, .12) 0, transparent 18px),
    radial-gradient(circle at 88% 82%, rgba(234, 88, 12, .12)  0, transparent 22px),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, .08) 0, transparent 50px);
  pointer-events: none;
  z-index: 0;
}
.lc-signin-hero > *{ position: relative; z-index: 1; }
.lc-signin-blurb{
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #334155;
}
.lc-signin-section-title{
  font-family: var(--f-display);
  margin: 2rem 0 .25rem;
  font-size: 1.4rem;
  color: #0f172a;
}
.lc-signin-section-blurb{
  margin: 0 0 1rem;
  color: #64748b;
  font-size: .92rem;
}
.lc-signin-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.lc-signin-grid-2up{
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 820px;
}
.lc-signin-grid-2up .lc-tile{
  padding: 1.6rem 1.4rem 1.4rem;
}
.lc-signin-grid-2up .lc-tile-emoji{ font-size: 3.6rem; }
.lc-signin-grid-2up .lc-tile h3{ font-size: 1.45rem; }
.lc-signin-grid-2up .lc-tile p{ font-size: .95rem; }
.lc-signin-grid-staff{
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  max-width: 720px;
}
.lc-signin-grid-teacher-only{
  /* Single staff tile — keep it generous so it doesn't look lonely. */
  grid-template-columns: 1fr;
  max-width: 440px;
}
.lc-signin-grid-teacher-only .lc-tile{
  padding: 1.5rem 1.4rem 1.4rem;
}
.lc-signin-grid-6{
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  max-width: 980px;
}
.lc-tile-primary{
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 70%);
}
.lc-tile-primary .lc-tile-cta{ color: #1d4ed8; }
.lc-primary-back{
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--f-display);
  font-weight: 700;
  color: #64748b;
  text-decoration: none;
}
.lc-primary-back:hover{ color: #0f172a; }
.lc-tile{
  display: block;
  background: #fff;
  border: 3px solid transparent;
  border-radius: 18px;
  padding: 1.2rem 1.2rem 1.1rem;
  text-decoration: none;
  color: #0f172a;
  box-shadow: 0 10px 20px -16px rgba(15, 23, 42, .3);
  transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
}
.lc-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -16px rgba(15, 23, 42, .4);
}
.lc-tile-emoji{
  font-size: 3rem;
  line-height: 1;
  margin-bottom: .35rem;
}
.lc-tile h3{
  font-family: var(--f-display);
  margin: 0 0 .25rem;
  font-size: 1.2rem;
}
.lc-tile p{
  margin: 0 0 .55rem;
  font-size: .88rem;
  color: #475569;
  line-height: 1.4;
}
.lc-tile-cta{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0f172a;
  display: inline-block;
  margin-top: .15rem;
}
.lc-tile-pk{ border-color: #fed7aa; background: linear-gradient(180deg, #fff7ed 0%, #fff 70%); }
.lc-tile-pk .lc-tile-cta{ color: #9a3412; }
.lc-tile-g1{ border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4 0%, #fff 70%); }
.lc-tile-g1 .lc-tile-cta{ color: #047857; }
.lc-tile-g2{ border-color: #bae6fd; background: linear-gradient(180deg, #f0f9ff 0%, #fff 70%); }
.lc-tile-g2 .lc-tile-cta{ color: #075985; }
.lc-tile-g3{ border-color: #d8b4fe; background: linear-gradient(180deg, #faf5ff 0%, #fff 70%); }
.lc-tile-g3 .lc-tile-cta{ color: #6b21a8; }
.lc-tile-g4{ border-color: #fbcfe8; background: linear-gradient(180deg, #fdf2f8 0%, #fff 70%); }
.lc-tile-g4 .lc-tile-cta{ color: #9d174d; }
.lc-tile-g5{ border-color: #fde68a; background: linear-gradient(180deg, #fefce8 0%, #fff 70%); }
.lc-tile-g5 .lc-tile-cta{ color: #854d0e; }
.lc-tile-g6{ border-color: #fca5a5; background: linear-gradient(180deg, #fef2f2 0%, #fff 70%); }
.lc-tile-g6 .lc-tile-cta{ color: #991b1b; }
.lc-tile-teacher{ border-color: #c7d2fe; background: linear-gradient(180deg, #eef2ff 0%, #fff 70%); }
.lc-tile-teacher .lc-tile-cta{ color: #3730a3; }
.lc-tile-parent{ border-color: #d1d5db; background: linear-gradient(180deg, #f9fafb 0%, #fff 70%); }
.lc-tile-parent .lc-tile-cta{ color: #1f2937; }
.lc-tile-summer{
  border-color: #f97316;
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 50%, #fff 100%);
}
.lc-tile-summer .lc-tile-cta{ color: #9a3412; }

/* =========================================================
   SUMMER SCHOOL — full marketing/info page (/summer)
   ========================================================= */
.ss-page{ max-width: 1100px; margin: 0 auto; }

/* Hero */
.ss-hero{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem 2rem;
  margin: 1rem 0 2.5rem;
  border-radius: 24px;
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 50%, #f97316 100%);
  box-shadow: 0 18px 40px -20px rgba(249, 115, 22, .55);
  position: relative;
  overflow: hidden;
}
.ss-hero-text{ position: relative; z-index: 2; }
.ss-eyebrow{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7c2d12;
  background: rgba(255,255,255,.45);
  padding: .35rem .8rem;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: .7rem;
}
.ss-hero-title{
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: .2rem 0 .55rem;
  line-height: 1.1;
  color: #0f172a;
}
.ss-accent{
  background: linear-gradient(90deg, #1d4ed8 0%, #0e7490 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ss-blurb{
  font-size: 1.1rem;
  line-height: 1.5;
  color: #1f2937;
  margin: 0 0 1rem;
  max-width: 540px;
}
.ss-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .8rem 0 .6rem;
}
.ss-mini-blurb{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .92rem;
  color: #7c2d12;
  opacity: .85;
}
.ss-hero-icon{
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}
.ss-hero-emoji{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9rem;
  filter: drop-shadow(0 10px 20px rgba(124, 45, 18, .45));
  animation: ssBob 3s ease-in-out infinite;
}
@keyframes ssBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
.ss-hero-orb{
  position: absolute;
  font-size: 2rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
}
.ss-orb-1{ top: 4%;  left: 6%;   animation: ssOrb 4s ease-in-out infinite; }
.ss-orb-2{ top: 12%; right: 4%;  animation: ssOrb 5s ease-in-out infinite; }
.ss-orb-3{ bottom: 14%; left: 8%; animation: ssOrb 4.5s ease-in-out infinite; }
.ss-orb-4{ bottom: 4%; right: 8%; animation: ssOrb 5.5s ease-in-out infinite; }
@keyframes ssOrb {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(6px, -8px); }
}

.ss-section-h{
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: #0f172a;
  margin: 2rem 0 .35rem;
}
.ss-section-blurb{ margin: 0 0 1rem; max-width: 720px; }

/* Tracks */
.ss-tracks{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2.5rem;
}
.ss-track{
  position: relative;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.4rem 1.2rem 1.2rem;
  text-align: center;
  transition: transform .15s ease, box-shadow .2s ease;
}
.ss-track:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(15, 23, 42, .4); }
.ss-track-num{
  position: absolute;
  top: .8rem;
  right: .9rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.ss-track-emoji{ font-size: 3rem; line-height: 1; margin-bottom: .5rem; }
.ss-track h3{ font-family: var(--f-display); font-size: 1.25rem; margin: 0 0 .35rem; color: #0f172a; }
.ss-track-arrow{ font-size: .92rem; color: #1e293b; margin: 0 0 .5rem; font-weight: 600; }
.ss-track-focus{ font-size: .9rem; color: #475569; line-height: 1.45; margin: 0; }
.ss-track-2{ border-color: #34d399; background: linear-gradient(180deg, #ecfdf5 0%, #fff 70%); }
.ss-track-3{ border-color: #4ade80; background: linear-gradient(180deg, #f0fdf4 0%, #fff 70%); }
.ss-track-4{ border-color: #f472b6; background: linear-gradient(180deg, #fdf2f8 0%, #fff 70%); }
.ss-track-5{ border-color: #818cf8; background: linear-gradient(180deg, #eef2ff 0%, #fff 70%); }
.ss-track-6{ border-color: var(--jf-gold, #FFD100); background: linear-gradient(180deg, #fef9c3 0%, #fff 70%); }
.ss-track-pep{ box-shadow: 0 0 0 3px rgba(255, 209, 0, .35); }
.ss-track-badge{
  display: inline-block;
  margin-top: .6rem;
  padding: .25rem .65rem;
  background: var(--jf-gold, #FFD100);
  color: #000;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Weeks */
.ss-weeks{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .8rem;
  margin: 1rem 0 2.5rem;
}
.ss-week-card{
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1rem .9rem;
  text-align: center;
  position: relative;
}
.ss-week-card:nth-child(1){ border-color: #fb923c; background: linear-gradient(180deg, #fff7ed 0%, #fff 70%); }
.ss-week-card:nth-child(2){ border-color: #f472b6; background: linear-gradient(180deg, #fdf2f8 0%, #fff 70%); }
.ss-week-card:nth-child(3){ border-color: #38bdf8; background: linear-gradient(180deg, #f0f9ff 0%, #fff 70%); }
.ss-week-card:nth-child(4){ border-color: #facc15; background: linear-gradient(180deg, #fefce8 0%, #fff 70%); }
.ss-week-card:nth-child(5){ border-color: #a78bfa; background: linear-gradient(180deg, #f5f3ff 0%, #fff 70%); }
.ss-week-card:nth-child(6){ border-color: #34d399; background: linear-gradient(180deg, #ecfdf5 0%, #fff 70%); }
.ss-week-closing{ border-color: var(--jf-gold, #FFD100) !important; background: linear-gradient(180deg, #fef9c3 0%, #fff 70%) !important; }
.ss-week-num{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: .25rem;
}
.ss-week-emoji{ font-size: 2.2rem; line-height: 1; margin-bottom: .3rem; }
.ss-week-card h4{ font-family: var(--f-display); margin: 0 0 .35rem; font-size: 1.02rem; color: #0f172a; }
.ss-week-dates{ font-size: .82rem; font-weight: 700; color: #1e293b; margin: 0 0 .25rem; }
.ss-week-theme{ font-size: .82rem; margin: 0; line-height: 1.4; }

/* Pillars */
.ss-pillars{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2.5rem;
}
.ss-pillar{
  background: #fff;
  border-radius: 16px;
  padding: 1.3rem 1.2rem 1.1rem;
  border: 2px solid #e2e8f0;
  text-align: center;
}
.ss-pillar-emoji{ font-size: 2.6rem; line-height: 1; margin-bottom: .4rem; }
.ss-pillar h4{ font-family: var(--f-display); margin: 0 0 .35rem; font-size: 1.1rem; color: #0f172a; }
.ss-pillar p{ margin: 0; font-size: .88rem; color: #475569; line-height: 1.45; }
.ss-pillar-lesson  { border-color: #2563eb; background: linear-gradient(180deg, #eff6ff 0%, #fff 70%); }
.ss-pillar-terms   { border-color: #7c3aed; background: linear-gradient(180deg, #f5f3ff 0%, #fff 70%); }
.ss-pillar-activity{ border-color: #ea580c; background: linear-gradient(180deg, #fff7ed 0%, #fff 70%); }
.ss-pillar-quiz    { border-color: #16a34a; background: linear-gradient(180deg, #f0fdf4 0%, #fff 70%); }

/* Why */
.ss-why{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2.5rem;
}
.ss-why-card{
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.2rem 1.2rem 1.1rem;
}
.ss-why-icon{ font-size: 2rem; line-height: 1; margin-bottom: .4rem; }
.ss-why-card h4{ font-family: var(--f-display); margin: 0 0 .4rem; font-size: 1.05rem; color: #0f172a; }
.ss-why-card p{ margin: 0; font-size: .92rem; color: #334155; line-height: 1.55; }

/* Tab strip */
.ss-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.6rem 0 1.4rem;
  padding: .35rem;
  background: #fef9c3;
  border-radius: 14px;
  border: 1px solid #fbbf24;
}
.ss-tab{
  flex: 1 1 0;
  min-width: 7rem;
  border: 0;
  background: transparent;
  padding: .65rem .85rem;
  border-radius: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .92rem;
  color: #78350f;
  cursor: pointer;
  transition: background .2s ease, color .15s ease, transform .12s ease;
  white-space: nowrap;
}
.ss-tab:hover{ background: rgba(255,255,255,.6); }
.ss-tab.active{
  background: #fff;
  color: #1f2937;
  box-shadow: 0 4px 12px -6px rgba(124, 45, 18, .35);
}
.ss-tab-body{ margin-bottom: 1.6rem; }

/* TRACKS — detailed view (Tracks tab) */
.ss-tracks-detail{
  display: grid;
  gap: 1.2rem;
  margin: 1rem 0 2rem;
}
.ss-track-detail{
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.4rem 1.6rem 1.3rem;
  position: relative;
}
.ss-track-detail.ss-track-2{ border-color: #34d399; background: linear-gradient(180deg, #ecfdf5 0%, #fff 50%); }
.ss-track-detail.ss-track-3{ border-color: #4ade80; background: linear-gradient(180deg, #f0fdf4 0%, #fff 50%); }
.ss-track-detail.ss-track-4{ border-color: #f472b6; background: linear-gradient(180deg, #fdf2f8 0%, #fff 50%); }
.ss-track-detail.ss-track-5{ border-color: #818cf8; background: linear-gradient(180deg, #eef2ff 0%, #fff 50%); }
.ss-track-detail.ss-track-6{ border-color: var(--jf-gold, #FFD100); background: linear-gradient(180deg, #fef9c3 0%, #fff 50%); }
.ss-track-detail.ss-track-pep{ box-shadow: 0 0 0 3px rgba(255, 209, 0, .35); }
.ss-td-head{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .9rem;
  flex-wrap: wrap;
}
.ss-td-emoji{ font-size: 3rem; line-height: 1; }
.ss-td-num{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: .1rem;
}
.ss-track-detail h3{
  font-family: var(--f-display);
  font-size: 1.4rem;
  margin: 0 0 .2rem;
  color: #0f172a;
}
.ss-td-arrow{ margin: 0; font-size: .95rem; color: #1e293b; }
.ss-td-badge{ margin-left: auto; align-self: flex-start; }
.ss-td-focus{
  font-size: 1rem;
  color: #334155;
  margin: 0 0 1rem;
  padding: .6rem .85rem;
  background: rgba(255,255,255,.6);
  border-left: 4px solid currentColor;
  border-radius: 6px;
  opacity: .92;
}
.ss-td-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ss-td-col h4{
  font-family: var(--f-display);
  margin: 0 0 .4rem;
  font-size: .92rem;
  color: #0f172a;
}
.ss-td-col ul{
  margin: 0;
  padding-left: 1.1rem;
  font-size: .9rem;
  line-height: 1.55;
  color: #334155;
}
.ss-td-col li{ margin-bottom: .15rem; }
.ss-td-extras{
  display: grid;
  gap: .55rem;
  margin-top: .5rem;
  padding-top: .8rem;
  border-top: 1px dashed #cbd5e1;
}
.ss-td-extra{
  font-size: .88rem;
  color: #475569;
  line-height: 1.5;
}
.ss-td-extra-label{
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 800;
  color: #0f172a;
  margin-right: .25rem;
}
.ss-td-pep-note{
  background: rgba(255, 209, 0, .12);
  padding: .55rem .7rem;
  border-radius: 8px;
  border-left: 4px solid var(--jf-gold, #FFD100);
}

/* WEEKS — detailed view (Weeks tab) */
.ss-weeks-detail{
  display: grid;
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.ss-week-detail{
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.2rem 1.4rem 1.1rem;
}
.ss-week-detail:nth-child(1){ border-color: #fb923c; background: linear-gradient(180deg, #fff7ed 0%, #fff 60%); }
.ss-week-detail:nth-child(2){ border-color: #f472b6; background: linear-gradient(180deg, #fdf2f8 0%, #fff 60%); }
.ss-week-detail:nth-child(3){ border-color: #38bdf8; background: linear-gradient(180deg, #f0f9ff 0%, #fff 60%); }
.ss-week-detail:nth-child(4){ border-color: #facc15; background: linear-gradient(180deg, #fefce8 0%, #fff 60%); }
.ss-week-detail:nth-child(5){ border-color: #a78bfa; background: linear-gradient(180deg, #f5f3ff 0%, #fff 60%); }
.ss-week-detail:nth-child(6){ border-color: #34d399; background: linear-gradient(180deg, #ecfdf5 0%, #fff 60%); }
.ss-week-detail-closing{ border-color: var(--jf-gold, #FFD100) !important; background: linear-gradient(180deg, #fef9c3 0%, #fff 60%) !important; }
.ss-wd-head{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .8rem;
}
.ss-wd-num{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #475569;
}
.ss-wd-emoji{ font-size: 2.4rem; line-height: 1; }
.ss-wd-title h3{ font-family: var(--f-display); margin: 0 0 .15rem; font-size: 1.2rem; color: #0f172a; }
.ss-wd-dates{ margin: 0; font-size: .9rem; color: #1e293b; font-weight: 600; }
.ss-wd-dates em{ color: #64748b; font-style: italic; font-weight: 400; }
.ss-wd-days h4{
  font-family: var(--f-display);
  margin: .6rem 0 .35rem;
  font-size: .92rem;
  color: #0f172a;
}
.ss-wd-day-list{
  margin: 0;
  padding-left: 1.2rem;
  font-size: .92rem;
  line-height: 1.6;
  color: #334155;
}
.ss-wd-day-list li{ margin-bottom: .15rem; }
.ss-wd-weekend{
  margin-top: .9rem;
  padding: .65rem .85rem;
  background: rgba(255, 255, 255, .55);
  border-left: 4px solid #14b8a6;
  border-radius: 6px;
  font-size: .9rem;
  color: #1e293b;
  line-height: 1.55;
}

/* DAILY — A Day in summer school */
.ss-daily{
  display: grid;
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.ss-daily-meta{
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: .9rem 1.1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem .8rem;
  align-items: center;
  font-size: .9rem;
}
.ss-daily-tag{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
  white-space: nowrap;
}
.ss-pillar-block{
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 1rem 1.2rem 1.1rem;
}
.ss-pillar-block h3{
  font-family: var(--f-display);
  margin: 0 0 .55rem;
  font-size: 1.1rem;
  color: #0f172a;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem;
}
.ss-pb-time{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .78rem;
  background: rgba(15, 23, 42, .06);
  padding: .15rem .55rem;
  border-radius: 999px;
  color: #475569;
}
.ss-pillar-block p{ margin: .35rem 0; color: #334155; line-height: 1.55; font-size: .94rem; }
.ss-pb-lesson  { border-color: #2563eb; background: linear-gradient(180deg, #eff6ff 0%, #fff 60%); }
.ss-pb-terms   { border-color: #7c3aed; background: linear-gradient(180deg, #f5f3ff 0%, #fff 60%); }
.ss-pb-activity{ border-color: #ea580c; background: linear-gradient(180deg, #fff7ed 0%, #fff 60%); }
.ss-pb-quiz    { border-color: #16a34a; background: linear-gradient(180deg, #f0fdf4 0%, #fff 60%); }
.ss-terms-list{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1rem;
  row-gap: .35rem;
  margin: .5rem 0 0;
  font-size: .92rem;
}
.ss-terms-list dt{ font-weight: 800; font-family: var(--f-display); color: #4c1d95; }
.ss-terms-list dd{ margin: 0; color: #334155; }
.ss-quiz-list{
  margin: .5rem 0 .4rem;
  padding-left: 1.2rem;
  font-size: .95rem;
  line-height: 1.65;
}
.ss-quiz-scoring{ font-size: .84rem; margin-top: .3rem; }

/* PRICING */
.ss-pricing{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin: 1rem 0 0.4rem;
}
.ss-price-card{
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.4rem 1.4rem 1.3rem;
  position: relative;
}
.ss-price-included{ border-color: #34d399; background: linear-gradient(180deg, #ecfdf5 0%, #fff 60%); }
.ss-price-standalone{ border-color: #f97316; background: linear-gradient(180deg, #fff7ed 0%, #fff 60%); }
.ss-price-eyebrow{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: .55rem;
}
.ss-price-included .ss-price-eyebrow{ background: #d1fae5; color: #047857; }
.ss-price-standalone .ss-price-eyebrow{ background: #ffedd5; color: #9a3412; }
.ss-price-card h3{ font-family: var(--f-display); margin: 0 0 .4rem; font-size: 1.15rem; color: #0f172a; }
.ss-price-amount{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: #0f172a;
  margin: .25rem 0 .35rem;
  line-height: 1;
}
.ss-price-sub{ font-size: 1rem; color: #64748b; font-weight: 600; }
.ss-price-card > p{ font-size: .92rem; color: #334155; line-height: 1.55; margin: 0 0 .8rem; }
.ss-price-features{
  list-style: none;
  padding: 0;
  margin: 0 0 .5rem;
  font-size: .92rem;
  line-height: 1.7;
  color: #1e293b;
}

/* FAQ */
.ss-faq{
  display: grid;
  gap: .6rem;
  margin: 1rem 0 2rem;
}
.ss-faq-item{
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: .7rem 1rem;
  transition: box-shadow .2s ease;
}
.ss-faq-item[open]{ box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .25); border-color: #fbbf24; }
.ss-faq-item summary{
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  color: #0f172a;
  padding: .15rem 0;
  position: relative;
  padding-right: 1.5rem;
}
.ss-faq-item summary::-webkit-details-marker{ display: none; }
.ss-faq-item summary::after{
  content: '▸';
  position: absolute;
  right: 0;
  top: .15rem;
  transition: transform .15s ease;
  color: #f97316;
}
.ss-faq-item[open] summary::after{ transform: rotate(90deg); }
.ss-faq-item p{
  margin: .55rem 0 .25rem;
  color: #334155;
  font-size: .92rem;
  line-height: 1.6;
}

/* Big CTA box */
.ss-cta-box{
  margin: 2rem 0 1rem;
  padding: 2rem 1.4rem 2.2rem;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 60%, #f97316 100%);
  box-shadow: 0 14px 28px -16px rgba(249, 115, 22, .5);
}
.ss-cta-box h2{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 .55rem;
  color: #0f172a;
}
.ss-cta-box p{
  margin: 0 0 1.2rem;
  font-size: 1rem;
  color: #1f2937;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 720px){
  .ss-hero{ grid-template-columns: 1fr; text-align: center; padding: 1.6rem 1.4rem; }
  .ss-hero-icon{ width: 160px; height: 160px; margin: 0 auto; }
  .ss-hero-emoji{ font-size: 6.5rem; }
  .ss-cta-row{ justify-content: center; }
  .ss-tabs{ overflow-x: auto; flex-wrap: nowrap; }
  .ss-tab{ flex: 0 0 auto; font-size: .82rem; padding: .55rem .7rem; }
  .ss-td-grid{ grid-template-columns: 1fr; }
  .ss-td-head{ gap: .6rem; }
  .ss-td-emoji{ font-size: 2.4rem; }
  .ss-daily-meta{ grid-template-columns: 1fr; }
  .ss-daily-meta strong{ margin-bottom: .25rem; }
  .ss-terms-list{ grid-template-columns: 1fr; }
  .ss-terms-list dt{ margin-top: .25rem; }
}

.lc-signin-foot{
  margin-top: 2rem;
  text-align: center;
  font-size: .9rem;
  color: #64748b;
}

/* QR-code section on the landing — 'scan to open' for parents who
   want to put the app on the kid's phone/tablet without typing a URL. */
.lc-signin-qr{
  margin: 2rem auto 0;
  max-width: 720px;
  padding: 1.4rem 1.4rem 1.2rem;
  background: linear-gradient(135deg, rgba(0, 155, 58, .08) 0%, rgba(255, 209, 0, .12) 100%);
  border: 2px solid rgba(0, 155, 58, .25);
  border-radius: 18px;
  box-shadow: 0 12px 24px -16px rgba(15, 23, 42, .35);
}
.lc-signin-qr-body{
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.lc-signin-qr-img{
  background: #fff;
  padding: .55rem;
  border-radius: 14px;
  flex: 0 0 auto;
  box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .4);
  display: grid;
  place-items: center;
  min-width: 180px;
  min-height: 180px;
}
.lc-signin-qr-img img{
  display: block;
  width: 180px;
  height: 180px;
}
.lc-signin-qr-fallback{
  width: 180px;
  height: 180px;
  background: #f1f5f9;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.4;
  padding: .8rem;
}
.lc-signin-qr-fallback-icon{
  font-size: 2.4rem;
  margin-bottom: .3rem;
}
.lc-signin-qr-text{
  flex: 1;
  min-width: 220px;
}
.lc-signin-qr-eyebrow{
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jf-green-dark, #047857);
  margin-bottom: .4rem;
}
.lc-signin-qr-text strong{
  display: block;
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: #0f172a;
  margin-bottom: .35rem;
}
.lc-signin-qr-text p{
  margin: 0 0 .6rem;
  color: #334155;
  font-size: .92rem;
  line-height: 1.5;
}
.lc-signin-qr-link{
  display: inline-block;
  background: #fff;
  color: var(--jf-green-dark, #047857);
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 155, 58, .35);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  word-break: break-all;
}
.lc-signin-qr-link:hover{ background: var(--jf-green, #009b3a); color: #fff; }
.lc-signin-qr-copy{
  display: inline-block;
  margin-left: .55rem;
  color: #475569;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  padding: .35rem .6rem;
}
.lc-signin-qr-copy:hover{ color: #0f172a; text-decoration: underline; }
@media (max-width: 540px){
  .lc-signin-qr-body{ justify-content: center; text-align: center; }
  .lc-signin-qr-text{ min-width: 0; }
  .lc-signin-qr-copy{ display: block; margin: .35rem 0 0; }
}

/* =========================================================
   Dashboard Parent-View summary card (collapsible)
   ========================================================= */
.dash-parent-card{
  margin-top: 1.2rem;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 70%);
  border: 2px solid #bfdbfe;
  border-radius: 16px;
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: box-shadow .2s ease;
}
.dash-parent-card[open]{ box-shadow: 0 12px 24px -16px rgba(30, 64, 175, .4); }
.dash-parent-card summary{
  display: flex;
  align-items: center;
  gap: .9rem;
  list-style: none;
  cursor: pointer;
}
.dash-parent-card summary::-webkit-details-marker{ display: none; }
.dash-parent-icon{
  font-size: 2rem;
  line-height: 1;
}
.dash-parent-summary{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.dash-parent-summary strong{
  font-family: var(--f-display);
  font-size: 1.02rem;
  color: #1e3a8a;
}
.dash-parent-summary span{
  font-size: .88rem;
  color: #334155;
}
.dash-parent-chev{
  font-size: 1.2rem;
  color: #64748b;
  transition: transform .2s ease;
}
.dash-parent-card[open] .dash-parent-chev{ transform: rotate(180deg); }
.dash-parent-body{
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px dashed #bfdbfe;
}
.dash-parent-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .35rem .9rem;
}
.dash-parent-list li{
  padding: .4rem .6rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e0e7ff;
  font-size: .9rem;
}
.dash-parent-list li strong{ color: #1e3a8a; }
.lc-cta-body span{ font-size: .85rem; color: var(--c-ink-soft); margin-top: .1rem; }

.lc-hero-foot{
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--c-ink-soft);
}
.lc-hero-foot a{ color: var(--c-ink); font-weight: 700; }

/* Cleaner secondary nav on the landing page — pillify so 'Teachers'
   and 'About' read as small outlined chips like the reference. */
body.is-landing .nav-secondary a{
  border: 1.5px solid rgba(0,0,0,.18);
  border-radius: 999px;
  padding: .35rem .9rem;
  margin-left: .25rem;
  color: var(--c-ink);
  font-weight: 700;
}
body.is-landing .nav-secondary a:hover{
  background: var(--c-ink);
  color: #fff;
}

/* =========================================================
   ROLE-GATE LANDING (#/) — three big "I'm a …" cards
   (legacy classes retained for backward compat)
   ========================================================= */
.lc-rolegate{
  max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 2rem;
}
.lc-rolegate-hero{
  text-align: center; margin: 1rem 0 1.6rem;
}
.lc-role-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}
/* Two-card variant — cap at 2 columns so the cards stay roomy. */
.lc-role-cards-2{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.lc-role-card{
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 22px;
  padding: 1.6rem 1.4rem 1.4rem;
  text-decoration: none;
  color: var(--c-ink);
  border: 1px solid rgba(31, 15, 58, .08);
  box-shadow: 0 8px 26px -14px rgba(31, 15, 58, .35);
  transition: transform .15s ease, box-shadow .15s ease;
  border-top: 6px solid var(--jf-green);
}
.lc-role-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -14px rgba(31, 15, 58, .45);
  color: var(--c-ink);
}
.lc-role-card.lc-role-student { border-top-color: var(--jf-green); }
.lc-role-card.lc-role-teacher { border-top-color: var(--jf-gold);  }
.lc-role-card.lc-role-parent  { border-top-color: var(--c-coral, #ff6b3d); }
.lc-role-card.is-saved{
  outline: 3px solid rgba(0, 155, 58, .35);
  outline-offset: 2px;
}
.lc-role-emoji{
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: .6rem;
}
.lc-role-card h2{
  font-family: var(--f-display);
  font-size: 1.6rem;
  margin: 0 0 .4rem;
  color: var(--c-ink);
  letter-spacing: -.01em;
}
.lc-role-card p{
  margin: 0 0 1rem;
  color: var(--c-ink-soft, #4a3a6b);
  font-size: .95rem;
  line-height: 1.5;
}
.lc-role-cta{
  margin-top: auto;
  align-self: flex-start;
  background: var(--jf-green);
  color: #fff;
  font-family: var(--f-display);
  font-size: .92rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 3px 0 var(--jf-green-dark);
}
.lc-role-card.lc-role-teacher .lc-role-cta{
  background: var(--jf-gold); color: var(--jf-black, #000);
  box-shadow: 0 3px 0 var(--jf-gold-dark, #c79a00);
}
.lc-role-card.lc-role-parent .lc-role-cta{
  background: var(--c-coral, #ff6b3d); color: #fff;
  box-shadow: 0 3px 0 var(--c-coral-d, #d6532a);
}

/* =========================================================
   PARENT DASHBOARD (#/parent)
   ========================================================= */
.parent-page{ max-width: 1000px; margin: 0 auto; }
.parent-hero{
  text-align: center; margin: 1rem 0 1.4rem;
  background: linear-gradient(135deg, #fff7e6, #fef3c7);
  border-radius: 22px;
  padding: 1.4rem 1.2rem;
  border: 1px solid rgba(245, 158, 11, .25);
}
.parent-eyebrow{
  font-family: var(--f-display);
  letter-spacing: .14em;
  font-size: .76rem;
  color: var(--c-coral, #ff6b3d);
  text-transform: uppercase;
}
.parent-hero h1{
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin: .3rem 0 .4rem;
}
.parent-hero p{
  margin: 0 auto;
  max-width: 640px;
  color: #4a3a6b;
  line-height: 1.5;
}
.parent-card{
  background: #fff;
  border-radius: 18px;
  padding: 1.2rem 1.3rem 1.1rem;
  border: 1px solid rgba(31, 15, 58, .08);
  box-shadow: 0 4px 16px -10px rgba(31, 15, 58, .25);
  margin-bottom: 1rem;
}
.parent-card-eyebrow{
  display: block;
  font-family: var(--f-display);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--jf-green-dark);
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.parent-card h2{
  font-family: var(--f-display);
  font-size: 1.25rem;
  margin: 0 0 .8rem;
}
.parent-h3{
  font-family: var(--f-display);
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--jf-green-dark);
  margin: 1rem 0 .4rem;
  text-transform: uppercase;
}
.parent-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem;
  margin-bottom: .6rem;
}
.parent-stat{
  background: linear-gradient(135deg, var(--jf-green) 0%, var(--jf-green-dark) 100%);
  color: #fff;
  padding: .8rem .6rem;
  border-radius: 14px;
  text-align: center;
}
.parent-stat-num{
  display: block;
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 800;
}
.parent-stat-label{
  display: block;
  font-size: .72rem;
  letter-spacing: .04em;
  opacity: .9;
  margin-top: .2rem;
  text-transform: uppercase;
}
.parent-list{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .4rem;
}
.parent-list li{
  display: flex; flex-direction: column; line-height: 1.4;
  padding: .6rem .9rem;
  background: var(--c-page, #f5f5f7);
  border-radius: 12px;
}
.parent-list li strong{ color: var(--c-ink); font-size: .95rem; }
.parent-list li span{ color: var(--c-ink-soft, #4a3a6b); font-size: .82rem; margin-top: .1rem; }
.parent-list-warn li{
  background: linear-gradient(180deg, #fef3c7, #fff);
  border: 1px solid rgba(245, 158, 11, .25);
}
.parent-tip{
  margin: .8rem 0 0;
  padding: .6rem .9rem;
  background: rgba(0, 155, 58, .07);
  border-left: 3px solid var(--jf-green);
  border-radius: 8px;
  font-size: .88rem;
  color: var(--c-ink);
}
.parent-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.parent-noprofile{ text-align: center; padding: 2rem 1.2rem; }
.parent-noprofile h2{ margin-bottom: .5rem; }
.parent-noprofile p{ color: var(--c-ink-soft); max-width: 480px; margin: 0 auto 1rem; }
.parent-foot{
  margin-top: 1.4rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* =========================================================
   GRADE PAGE V2 (Wave 2) — sticky header + units with
   Learn/Practice/Play tabs, locks, completion, trophy.
   ========================================================= */
.gp-page{ max-width: 980px; margin: 0 auto; padding: 0 1rem 2rem; }

/* Sticky header — grade pills + overall progress */
.gp-sticky{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--c-page, #fff);
  padding: .8rem 0;
  border-bottom: 1px solid rgba(31, 15, 58, .08);
  margin-bottom: 1rem;
}
.gp-sticky-row{
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: .55rem;
}
.gp-back{
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 12px;
  background: #fff;
  color: var(--jf-green-dark);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 800;
  border: 1px solid rgba(31, 15, 58, .12);
  flex-shrink: 0;
}
.gp-back:hover{ background: rgba(0, 155, 58, .08); color: var(--jf-green-dark); }
.gp-grade-pills{ display: flex; gap: .35rem; flex-wrap: wrap; }
.gp-pill{
  display: grid; place-items: center;
  min-width: 40px; height: 40px;
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink);
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid rgba(31, 15, 58, .12);
  padding: 0 .8rem;
  transition: transform .12s ease, background .12s ease;
}
.gp-pill:hover{ transform: translateY(-2px); color: var(--c-ink); }
.gp-pill.active{
  background: var(--jf-green);
  color: #fff;
  border-color: var(--jf-green-dark);
  box-shadow: 0 3px 0 var(--jf-green-dark);
}
.gp-progress{
  display: flex; align-items: center; gap: .8rem;
}
.gp-progress-label{
  font-family: var(--f-display);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  flex-shrink: 0;
}
.gp-progress-bar{
  flex: 1 1 auto;
  display: block;
  height: 10px;
  background: rgba(0, 155, 58, .12);
  border-radius: 999px;
  overflow: hidden;
  min-width: 100px;
}
.gp-progress-fill{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--jf-green), var(--jf-gold));
  border-radius: 999px;
  transition: width .4s ease;
}
.gp-progress-pct{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--jf-green-dark);
  min-width: 3rem; text-align: right;
}

/* Hero */
.gp-hero{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: center;
  background: linear-gradient(135deg, var(--accent), rgba(255,255,255,.5));
  border-radius: 22px;
  padding: 1.2rem 1.4rem;
  color: #1f0f3a;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px -16px rgba(31, 15, 58, .35);
}
.gp-hero-emoji{ font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; }
.gp-hero-eyebrow{
  font-family: var(--f-display);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(31, 15, 58, .7);
}
.gp-hero-title{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  margin: .15rem 0 .35rem;
  letter-spacing: -.01em;
}
.gp-hero-blurb{
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
}

/* Quick links: NSC subjects + Chess + Code Studio */
.gp-quicklinks{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .55rem;
  margin-bottom: 1.4rem;
}
.gp-ql-card{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  padding: .65rem .85rem;
  border: 1px solid rgba(31, 15, 58, .1);
  box-shadow: 0 2px 0 rgba(31, 15, 58, .06);
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .12s ease;
}
.gp-ql-card:hover{ transform: translateY(-2px); color: var(--c-ink); }
.gp-ql-emoji{ font-size: 1.5rem; }
.gp-ql-body{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.gp-ql-body strong{ font-size: .9rem; color: var(--c-ink); }
.gp-ql-body span{ font-size: .76rem; color: var(--c-ink-soft); }
.gp-ql-card.gp-ql-chess{ border-left: 4px solid var(--jf-black, #000); }
.gp-ql-card.gp-ql-code { border-left: 4px solid var(--jf-green); }

/* Units */
.gp-units-h{
  font-family: var(--f-display);
  font-size: 1.2rem;
  margin: 0 0 .8rem;
  color: var(--c-ink);
}
.gp-units{ display: grid; gap: .6rem; }
.gp-unit{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(31, 15, 58, .1);
  box-shadow: 0 4px 14px -10px rgba(31, 15, 58, .25);
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.gp-unit[open]{ box-shadow: 0 8px 22px -12px rgba(31, 15, 58, .35); }
.gp-unit.is-locked{ opacity: .6; }
.gp-unit.is-complete{ border-color: rgba(0, 155, 58, .35); }

.gp-unit-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.gp-unit-head::-webkit-details-marker{ display: none; }
.gp-unit-icon{
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--jf-green) 0%, var(--jf-green-dark) 100%);
  color: #fff;
  border-radius: 14px;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.gp-unit.is-complete .gp-unit-icon{
  background: linear-gradient(135deg, var(--jf-gold) 0%, var(--jf-gold-dark) 100%);
  color: var(--jf-black);
}
.gp-unit-meta{ display: grid; gap: .25rem; min-width: 0; }
.gp-unit-num{
  font-family: var(--f-display);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--jf-green-dark);
  text-transform: uppercase;
}
.gp-unit-title{
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--c-ink);
  font-weight: 700;
}
.gp-unit-bar{
  display: block; width: 100%;
  height: 6px;
  background: rgba(31, 15, 58, .08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: .15rem;
}
.gp-unit-bar-fill{
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--jf-green), var(--jf-gold));
  border-radius: 999px;
  transition: width .3s ease;
}
.gp-unit-steps{
  font-size: .76rem;
  color: var(--c-ink-soft);
  font-weight: 700;
}
.gp-unit-state{ font-size: 1.6rem; line-height: 1; }
.gp-unit-lock{ filter: grayscale(.4); }

/* Unit body — tabs + panels */
.gp-unit-body{
  padding: .2rem 1.2rem 1.2rem;
  border-top: 1px solid rgba(31, 15, 58, .06);
}
.gp-locked-msg{
  margin: 1rem 0 .4rem;
  padding: .8rem 1rem;
  background: rgba(31, 15, 58, .04);
  border-radius: 12px;
  color: var(--c-ink);
}
/* Big chunky square tabs — kid-friendly tile style.
   Big emoji + label, hard 3D shadow, springs down when pressed. */
.gp-tabs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin: 1rem 0 1.2rem;
}
.gp-tab{
  position: relative;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  padding: 1rem .4rem .9rem;
  border-radius: 18px;
  border: 3px solid;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  text-align: center;
  letter-spacing: .01em;
  min-height: 88px;
  aspect-ratio: 1.15 / 1;
}
.gp-tab:hover{ transform: translateY(-3px); }
.gp-tab:active{ transform: translateY(2px); }

/* Each tab has its own chunky colour scheme — matte fill in the
   "resting" state, brighter solid + larger shadow when active. */
.gp-tab-learn{
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1e3a8a;
  box-shadow: 0 5px 0 #3b82f6;
}
.gp-tab-practice{
  background: #ffedd5;
  border-color: #fb923c;
  color: #9a3412;
  box-shadow: 0 5px 0 #fb923c;
}
.gp-tab-play{
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
  box-shadow: 0 5px 0 #ef4444;
}
.gp-tab-learn.active{
  background: #3b82f6; color: #fff; box-shadow: 0 8px 0 #1e3a8a; transform: translateY(-2px);
}
.gp-tab-practice.active{
  background: #fb923c; color: #fff; box-shadow: 0 8px 0 #9a3412; transform: translateY(-2px);
}
.gp-tab-play.active{
  background: #ef4444; color: #fff; box-shadow: 0 8px 0 #991b1b; transform: translateY(-2px);
}
.gp-tab-done{
  position: absolute;
  top: .35rem; right: .4rem;
  font-size: 1rem;
  background: rgba(255,255,255,.85);
  border-radius: 999px;
  padding: 0 .25rem;
  line-height: 1.4;
}
.gp-tab.active .gp-tab-done{
  background: rgba(255,255,255,.95);
}
.gp-tab-emoji{
  font-size: 2rem;
  line-height: 1;
}
.gp-tab-label{
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
}
@media (max-width: 480px){
  .gp-tab{ font-size: .85rem; min-height: 76px; padding: .7rem .3rem .65rem; }
  .gp-tab-emoji{ font-size: 1.6rem; }
  .gp-tab-label{ font-size: .85rem; }
}

.gp-panel.hide{ display: none; }
.gp-step-title{
  font-family: var(--f-display);
  font-size: 1.2rem;
  margin: 0 0 .35rem;
  color: var(--c-ink);
}
.gp-step-meta{
  margin: 0 0 .8rem;
  font-size: .85rem;
  color: var(--c-ink-soft);
}
.gp-learn-body{
  margin: 0 0 .9rem;
  line-height: 1.6;
  color: var(--c-ink);
}
.gp-step-desc{
  margin: 0 0 1rem;
  line-height: 1.5;
  color: var(--c-ink);
}
.gp-vocab{
  margin: 0 0 1rem;
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.gp-vocab strong{ margin-right: .25rem; color: var(--c-ink); font-size: .9rem; }
.gp-vocab-chip{
  background: rgba(0, 155, 58, .1);
  color: var(--jf-green-dark);
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
.gp-step-foot{
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding-top: .4rem;
}
.gp-step-done{
  background: rgba(0, 155, 58, .12);
  color: var(--jf-green-dark);
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
}
.gp-step-stars{
  background: rgba(255, 209, 0, .25);
  color: #b45309;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
}

/* Step buttons — colour-coded per tab */
.gp-btn{
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: transform .12s ease;
}
.gp-btn:hover{ transform: translateY(-2px); }
.gp-btn-learn   { background: #3b82f6; color: #fff; box-shadow: 0 3px 0 #1e3a8a; }
.gp-btn-practice{ background: #fb923c; color: #fff; box-shadow: 0 3px 0 #9a3412; }
.gp-btn-play    { background: #ef4444; color: #fff; box-shadow: 0 3px 0 #991b1b; }
.gp-btn-review  {
  background: #fff;
  color: var(--c-ink);
  border: 2px solid rgba(31, 15, 58, .15);
  box-shadow: none;
  padding: .6rem 1.1rem;
}
.gp-btn-trophy{
  background: var(--jf-gold);
  color: var(--jf-black);
  box-shadow: 0 4px 0 var(--jf-gold-dark);
  font-size: 1.05rem;
  padding: .8rem 1.6rem;
  margin-top: 1rem;
}

/* Trophy card */
.gp-trophy{
  margin-top: 1.6rem;
  text-align: center;
  background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 22px;
  padding: 2rem 1.4rem 1.6rem;
  box-shadow: 0 10px 28px -16px rgba(245, 158, 11, .55);
}
.gp-trophy-emoji{ font-size: 4rem; line-height: 1; }
.gp-trophy h2{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  margin: .4rem 0 .3rem;
}
.gp-trophy p{ margin: 0 auto; max-width: 520px; color: #1f0f3a; }

/* =========================================================
   BOOTCAMP — 5-day curriculum (#/bootcamp)
   ========================================================= */
.bc-page{ max-width: 1080px; margin: 0 auto; }

.bc-hero{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: center;
  background: linear-gradient(135deg, var(--jf-green) 0%, var(--jf-green-dark) 100%);
  color: #fff;
  border-radius: 22px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 10px 28px -16px rgba(0, 155, 58, .55);
}
.bc-hero-emoji{ font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; }
.bc-hero-eyebrow{
  font-family: var(--f-display);
  font-size: .8rem;
  letter-spacing: .14em;
  color: var(--jf-gold);
  text-transform: uppercase;
}
.bc-hero-title{
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: .15rem 0 .35rem;
  letter-spacing: -.01em;
}
.bc-hero-blurb{
  margin: 0;
  line-height: 1.5;
  color: rgba(255,255,255,.92);
  font-size: .95rem;
}
.bc-hero-cta{
  display: inline-block;
  margin-top: .9rem;
  background: var(--jf-gold);
  color: var(--jf-black, #000);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .92rem;
  padding: .65rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--jf-gold-dark, #c79a00);
  transition: transform .12s ease;
}
.bc-hero-cta:hover{ transform: translateY(-2px); color: var(--jf-black, #000); }

/* Tab strip */
.bc-tabs{
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  background: #fff;
  padding: .4rem;
  border-radius: 14px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 0 rgba(31, 15, 58, .06);
  border: 1px solid rgba(31, 15, 58, .08);
}
.bc-tab{
  font-family: var(--f-display);
  font-size: .92rem;
  font-weight: 700;
  padding: .55rem 1rem;
  border-radius: 10px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.bc-tab:hover{ background: rgba(0, 155, 58, .08); }
.bc-tab.active{
  background: var(--jf-green);
  color: #fff;
  box-shadow: 0 3px 0 var(--jf-green-dark);
}

/* Grade hero (inside a grade tab) */
.bc-grade-hero{
  background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(245, 158, 11, .25);
  margin-bottom: 1rem;
}
.bc-grade-eyebrow{
  font-family: var(--f-display);
  font-size: .76rem;
  letter-spacing: .14em;
  color: #b45309;
  text-transform: uppercase;
}
.bc-grade-hero h2{
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  margin: .2rem 0 .35rem;
  color: #1f0f3a;
}
.bc-grade-hero p{
  margin: 0;
  color: #4b3a6b;
  line-height: 1.5;
}

/* Day accordion */
.bc-days{ display: grid; gap: .6rem; }
.bc-day{
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(31, 15, 58, .08);
  box-shadow: 0 4px 14px -10px rgba(31, 15, 58, .25);
  overflow: hidden;
}
.bc-day[open]{ box-shadow: 0 8px 22px -12px rgba(31, 15, 58, .35); }
.bc-day-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: .9rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.bc-day-head::-webkit-details-marker{ display: none; }
.bc-day-num{
  font-family: var(--f-display);
  font-size: 1rem;
  background: var(--jf-green);
  color: #fff;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .04em;
}
.bc-day-title{
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--c-ink);
  font-weight: 700;
}
.bc-day-count{
  font-size: .78rem;
  color: var(--c-ink-soft);
  font-weight: 700;
}
.bc-day-body{
  padding: 0 1rem 1rem;
  display: grid;
  gap: .8rem;
}

/* Module cards */
.bc-mod{
  background: var(--c-page, #f7f7fa);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  border-left: 5px solid var(--jf-green);
}
.bc-mod.bc-mod-coding  { border-left-color: #3b82f6; background: linear-gradient(180deg, #dbeafe 0%, #fff 30%); }
.bc-mod.bc-mod-ai      { border-left-color: #8b5cf6; background: linear-gradient(180deg, #ede9fe 0%, #fff 30%); }
.bc-mod.bc-mod-robotics{ border-left-color: #ef4444; background: linear-gradient(180deg, #fee2e2 0%, #fff 30%); }

.bc-mod-head{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: center;
  margin-bottom: .55rem;
}
.bc-mod-emoji{
  font-size: 1.8rem;
  line-height: 1;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(31, 15, 58, .08);
}
.bc-mod-eyebrow{
  display: block;
  font-family: var(--f-display);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.bc-mod-title{
  font-family: var(--f-display);
  font-size: 1.05rem;
  margin: .15rem 0 0;
  color: var(--c-ink);
  font-weight: 700;
}
.bc-mod-row{
  margin: .35rem 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--c-ink);
}
.bc-mod-row strong{ color: #1f0f3a; }
.bc-mod-story{ color: #1f0f3a; }
.bc-mod-steps{
  margin: .4rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: .25rem;
}
.bc-mod-steps li{ font-size: .92rem; line-height: 1.5; }
.bc-mod-check{
  background: rgba(0, 155, 58, .08);
  border-radius: 8px;
  padding: .55rem .8rem;
  margin-top: .55rem;
}
.bc-mod-helper{
  background: rgba(255, 209, 0, .15);
  border-radius: 8px;
  padding: .55rem .8rem;
  margin-top: .35rem;
  font-size: .88rem;
}

/* Overview cards */
.bc-overview-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .8rem;
}
.bc-info-card{
  background: #fff;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(31, 15, 58, .08);
  box-shadow: 0 4px 14px -10px rgba(31, 15, 58, .25);
}
.bc-info-card h3{
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--jf-green-dark);
  margin: 0 0 .4rem;
}
.bc-info-card p{ margin: 0 0 .45rem; line-height: 1.55; font-size: .92rem; }
.bc-info-card.bc-info-app h3{ color: #b45309; }
.bc-appendix-h{
  font-family: var(--f-display);
  font-size: 1.2rem;
  margin: 1.4rem 0 .6rem;
  color: var(--c-ink);
}

/* =========================================================
   LIKKLE BLOCKS — ScratchJr-style coder for the bootcamp
   ========================================================= */
.lb-hub{ max-width: 1080px; margin: 0 auto; }
.lb-hero{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: center;
  background: linear-gradient(135deg, #fef3c7 0%, #ffe4e6 100%);
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 22px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.4rem;
}
.lb-hero-emoji{ font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; }
.lb-hero-eyebrow{
  font-family: var(--f-display);
  font-size: .76rem;
  letter-spacing: .14em;
  color: #b45309;
  text-transform: uppercase;
}
.lb-hero-title{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  margin: .2rem 0 .35rem;
  color: #1f0f3a;
}
.lb-hero-blurb{
  margin: 0; line-height: 1.5; color: #4b3a6b; font-size: .95rem;
}
.lb-grade-row{ margin-bottom: 1.4rem; }
.lb-grade-h{
  font-family: var(--f-display);
  font-size: 1rem;
  margin: 0 0 .55rem;
  color: var(--jf-green-dark);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lb-lesson-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .55rem;
}
.lb-lesson-card{
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(31, 15, 58, .1);
  border-left: 4px solid var(--jf-green);
  padding: .8rem 1rem;
  display: flex; flex-direction: column; gap: .25rem;
  text-decoration: none;
  color: var(--c-ink);
  box-shadow: 0 4px 14px -10px rgba(31, 15, 58, .25);
  transition: transform .12s ease;
}
.lb-lesson-card:hover{ transform: translateY(-2px); color: var(--c-ink); }
.lb-lesson-card.is-done{ border-left-color: var(--jf-gold); background: linear-gradient(180deg, #fffbeb 0%, #fff 60%); }
.lb-lesson-num{
  font-family: var(--f-display);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--jf-green-dark);
  text-transform: uppercase;
}
.lb-lesson-card strong{ font-size: 1rem; color: var(--c-ink); }
.lb-lesson-card p{ margin: 0; font-size: .85rem; color: var(--c-ink-soft); line-height: 1.4; }
.lb-lesson-cta{
  margin-top: .35rem;
  font-weight: 800;
  color: var(--jf-green-dark);
  font-size: .85rem;
}
.lb-lesson-done{ margin-top: .35rem; color: #b45309; font-weight: 800; font-size: .85rem; }
.lb-stub-card{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: center;
  padding: .9rem 1.1rem;
  background: rgba(31, 15, 58, .04);
  border-radius: 14px;
  border: 1px dashed rgba(31, 15, 58, .15);
}
.lb-stub-emoji{ font-size: 2rem; line-height: 1; }
.lb-stub-card strong{ font-family: var(--f-display); font-size: .98rem; color: var(--c-ink); }
.lb-stub-card p{ margin: .15rem 0 0; font-size: .85rem; color: var(--c-ink-soft); }

/* Lesson page */
.lb-page{ max-width: 1100px; margin: 0 auto; }
.lb-back{
  display: inline-block;
  margin-bottom: .6rem;
  font-weight: 700;
  color: var(--jf-green-dark);
  text-decoration: none;
}
.lb-lesson-head, .lb-studio-head{
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(31, 15, 58, .08);
  margin-bottom: .8rem;
}
.lb-studio-head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
}
.lb-studio-head h2{
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  margin: .3rem 0 .35rem;
}
.lb-studio-head p{ margin: 0; color: #4b3a6b; line-height: 1.5; font-size: .95rem; }
.lb-studio-head-actions{ display: flex; gap: .35rem; flex-wrap: wrap; }

.lb-starter-strip{
  display: flex;
  gap: .4rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  padding: .5rem 0;
  margin-bottom: .8rem;
  scrollbar-width: thin;
}
.lb-starter-label{
  font-family: var(--f-display);
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  flex-shrink: 0;
  margin-right: .3rem;
}
.lb-starter-chip{
  flex-shrink: 0;
  background: #fff;
  border: 1px solid rgba(31, 15, 58, .12);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease;
}
.lb-starter-chip:hover{ transform: translateY(-1px); color: var(--c-ink); background: rgba(0, 155, 58, .06); }
.lb-starter-chip.active{
  background: var(--jf-green);
  color: #fff;
  border-color: var(--jf-green-dark);
  box-shadow: 0 2px 0 var(--jf-green-dark);
}

/* Palette groups */
.lb-palette-group{
  margin-bottom: .65rem;
  padding: .35rem;
  background: rgba(255,255,255,.5);
  border-radius: 10px;
}
.lb-palette-group-h{
  font-family: var(--f-display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: .1rem 0 .35rem .15rem;
}
.lb-grade-pill{
  font-family: var(--f-display);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--jf-green-dark);
  background: rgba(0, 155, 58, .12);
  padding: .25rem .65rem;
  border-radius: 999px;
  text-transform: uppercase;
  display: inline-block;
}
.lb-lesson-head h2{
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  margin: .3rem 0 .35rem;
  color: var(--c-ink);
}
.lb-story{ margin: 0 0 .55rem; color: #1f0f3a; line-height: 1.5; }
.lb-goal{ margin: 0; color: var(--jf-green-dark); font-size: .92rem; }

.lb-status{
  background: rgba(0, 155, 58, .12);
  color: var(--jf-green-dark);
  border-radius: 10px;
  padding: .55rem .9rem;
  margin-bottom: .8rem;
  font-weight: 800;
}
.lb-status.is-try{ background: rgba(245, 158, 11, .15); color: #9a3412; }

/* Workspace: 3 panes */
.lb-workspace{
  display: grid;
  grid-template-columns: 200px 1fr 280px;
  gap: .8rem;
  background: #fff;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid rgba(31, 15, 58, .08);
}
@media (max-width: 900px){
  .lb-workspace{ grid-template-columns: 1fr; }
}

/* Palette + script columns */
.lb-palette, .lb-script-col, .lb-stage-col{
  background: var(--c-page, #f7f7fa);
  border-radius: 12px;
  padding: .8rem;
}
.lb-palette-h, .lb-script-h, .lb-stage-h{
  font-family: var(--f-display);
  font-size: .76rem;
  letter-spacing: .14em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  margin-bottom: .5rem;
  display: flex; justify-content: space-between; align-items: center;
}

/* Block tile */
.lb-block{
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg, #cbd5e1);
  border-radius: 10px;
  padding: .55rem .7rem;
  margin: .25rem 0;
  cursor: grab;
  user-select: none;
  font-family: var(--f-display);
  font-weight: 700;
  border: 2px solid rgba(0,0,0,.08);
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
  min-width: 140px;
  width: 100%;
  transition: transform .1s ease;
}
.lb-block:active{ cursor: grabbing; transform: translateY(1px); }
.lb-b-icon{ font-size: 1.2rem; }
.lb-b-label{
  display: block;
  font-size: .85rem;
  color: var(--c-ink);
  margin-top: .15rem;
  letter-spacing: .01em;
}
/* Family colours — ScratchJr-inspired */
.lb-fam-trigger { --bg: #fde68a; }   /* yellow */
.lb-fam-motion  { --bg: #93c5fd; }   /* blue */
.lb-fam-looks   { --bg: #c4b5fd; }   /* purple */
.lb-fam-control { --bg: #fdba74; }   /* orange */
.lb-fam-end     { --bg: #fca5a5; }   /* red */

/* Container blocks (e.g. Repeat) */
.lb-block.is-container .lb-block-inner{
  margin-top: .5rem;
  padding: .4rem;
  background: rgba(255,255,255,.55);
  border-radius: 8px;
  border: 1px dashed rgba(0,0,0,.18);
  min-height: 40px;
  display: flex; flex-direction: column; gap: .25rem;
}

/* Script + drop zones */
.lb-script{
  min-height: 220px;
  background: #fff;
  border-radius: 10px;
  border: 2px dashed rgba(31, 15, 58, .12);
  padding: .55rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.lb-script.lb-drop-over,
.lb-block-inner.lb-drop-over{
  background: rgba(0, 155, 58, .12);
  border-color: var(--jf-green);
}
.lb-drop-hint{
  text-align: center;
  color: var(--c-ink-soft);
  font-size: .85rem;
  font-style: italic;
  padding: .8rem;
}

/* Action buttons */
.lb-actions{ display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.lb-btn{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .9rem;
  border: none;
  cursor: pointer;
  padding: .55rem .9rem;
  border-radius: 999px;
  transition: transform .1s ease;
}
.lb-btn:hover{ transform: translateY(-2px); }
.lb-btn-run{ background: var(--jf-green); color: #fff; box-shadow: 0 3px 0 var(--jf-green-dark); }
.lb-btn-clear{ background: #fff; color: var(--c-ink); border: 2px solid rgba(31, 15, 58, .12); padding: .35rem .7rem; font-size: .8rem; }
.lb-btn-hint{ background: var(--jf-gold); color: var(--jf-black); box-shadow: 0 3px 0 var(--jf-gold-dark, #c79a00); }
.lb-btn-solve{ background: #ede9fe; color: #4b1e82; }

/* Stage */
.lb-stage-wrap{ position: relative; aspect-ratio: 6 / 5; background: #f1f5f9; border-radius: 10px; overflow: hidden; }
.lb-stage{
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  grid-template-rows: repeat(var(--rows, 5), 1fr);
  width: 100%; height: 100%;
}
.lb-cell{
  display: grid; place-items: center;
}
.lb-cell.lt{ background: #f6f2e6; }
.lb-cell.dk{ background: #d9e8d3; }
.lb-target{ font-size: clamp(1.2rem, 4vw, 1.8rem); }
.lb-sprite{
  position: absolute;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: left .35s ease, top .35s ease;
  pointer-events: none;
}
.lb-sprite{ --lb-scale: 1; }
.lb-sprite{ transform: translate(-50%, -50%) scale(var(--lb-scale, 1)); }
.lb-sprite.is-hop{ animation: lbHop .4s ease; }
.lb-sprite.is-spin{ animation: lbSpin .7s ease; }
@keyframes lbHop {
  0%   { transform: translate(-50%, -50%) scale(var(--lb-scale, 1)); }
  50%  { transform: translate(-50%, calc(-50% - 24px)) scale(var(--lb-scale, 1)); }
  100% { transform: translate(-50%, -50%) scale(var(--lb-scale, 1)); }
}
@keyframes lbSpin {
  0%   { transform: translate(-50%, -50%) scale(var(--lb-scale, 1)) rotate(0deg); }
  100% { transform: translate(-50%, -50%) scale(var(--lb-scale, 1)) rotate(360deg); }
}
.lb-bubble{
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid rgba(31, 15, 58, .15);
  border-radius: 12px;
  padding: .25rem .55rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-ink);
  white-space: nowrap;
  margin-bottom: 8px;
  box-shadow: 0 3px 8px -4px rgba(0,0,0,.25);
}

/* Bootcamp Likkle-Blocks CTA */
.bc-mod-blocks-cta{
  background: linear-gradient(135deg, #fef3c7 0%, #ffe4e6 100%);
  border-left: 4px solid var(--jf-gold);
  border-radius: 8px;
  padding: .6rem .85rem;
  margin-top: .35rem;
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.bc-mod-blocks-cta a.bc-mod-blocks-btn{
  background: var(--jf-green);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .85rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 0 var(--jf-green-dark);
}
.bc-mod-blocks-cta a.bc-mod-blocks-btn:hover{ color: #fff; }

/* =========================================================
   SUBSCRIPTION GATE (#/access) — monthly access paywall
   ========================================================= */
.access-gate{
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding: 2rem 1rem;
}
.access-card{
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 22px;
  padding: 2rem 1.6rem 1.6rem;
  border: 1px solid rgba(31, 15, 58, .1);
  box-shadow: 0 16px 40px -20px rgba(31, 15, 58, .35);
  text-align: center;
}
.access-emoji{
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: .4rem;
}
.access-card h1{
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 .4rem;
  color: var(--c-ink);
}
.access-when{
  margin: 0 0 .8rem;
  color: var(--c-ink-soft);
  font-size: .9rem;
}
.access-explain{
  margin: 0 0 1.2rem;
  color: var(--c-ink);
  line-height: 1.55;
}
.access-label{
  display: block;
  text-align: left;
  font-family: var(--f-display);
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  margin-bottom: .35rem;
}
#accessCode{
  width: 100%;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
  padding: .8rem 1rem;
  border-radius: 14px;
  border: 2px solid rgba(31, 15, 58, .15);
  background: var(--c-page, #f7f7fa);
  color: var(--c-ink);
}
#accessCode:focus{
  outline: 3px solid rgba(0, 155, 58, .35);
  outline-offset: 0;
  border-color: var(--jf-green);
}
.access-msg{
  min-height: 1.4rem;
  margin: .6rem 0 .2rem;
  font-size: .92rem;
  font-weight: 700;
}
.access-msg.is-good{ color: var(--jf-green-dark); }
.access-msg.is-bad{  color: #b91c1c; }
.access-btn{
  background: var(--jf-green);
  color: #fff;
  border: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  margin-top: .4rem;
  box-shadow: 0 4px 0 var(--jf-green-dark);
}
.access-btn:hover{ transform: translateY(-2px); }
.access-foot{
  margin: 1.2rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
}

/* Teacher Tools — current month's access code panel */
.teach-code-card{
  border-left: 4px solid var(--jf-green);
  background: linear-gradient(180deg, #ecfdf5 0%, #fff 60%);
}
.teach-code-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 540px){
  .teach-code-grid{ grid-template-columns: 1fr; }
}
.teach-code-now,
.teach-code-next{
  display: flex; flex-direction: column; gap: .35rem;
}
.teach-code-label{
  font-family: var(--f-display);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.teach-code-value{
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .15em;
  background: var(--jf-green);
  color: #fff;
  padding: .55rem 1rem;
  border-radius: 14px;
  display: inline-block;
  box-shadow: 0 4px 0 var(--jf-green-dark);
}
.teach-code-next-value{
  background: rgba(0, 155, 58, .12);
  color: var(--jf-green-dark);
  font-size: 1.2rem;
  box-shadow: none;
}
.teach-code-foot{
  margin: .9rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
}

/* =========================================================
   BOOTCAMP REQUEST FLOW
   - .bcq-modal: student-side request form (overlay)
   - .bcq-panel: teacher-side accept/decline list
   ========================================================= */

/* Hero CTA row layout — two pills side by side on the bootcamp hero */
.bc-hero-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}
.bc-hero-cta-alt{
  background: #fff;
  color: var(--jf-green-dark);
  border: 2px solid var(--jf-green);
  box-shadow: 0 3px 0 var(--jf-green-dark);
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .92rem;
  padding: .65rem 1.2rem;
  border-radius: 999px;
}
.bc-hero-cta-alt:hover{ transform: translateY(-2px); }

/* =========================================================
   STEAM — badges on lesson/game cards + About > STEAM tab
   ========================================================= */
.steam-badges{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin: .35rem 0 .55rem;
}
.steam-badges-label{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .08em;
  color: #475569;
  text-transform: uppercase;
  margin-right: .15rem;
}
.steam-badge{
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .14rem .45rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .03em;
  color: #fff;
  white-space: nowrap;
  line-height: 1.2;
}
.steam-badges-compact .steam-badge{
  padding: .1rem .4rem;
  font-size: .68rem;
}
.steam-badges-compact{
  margin-top: .35rem;
  margin-bottom: .15rem;
}
/* Game cards already have a coloured background — make the badge ring
   white so it stays readable against any tile colour. */
.game-card .steam-badge{
  background: rgba(255, 255, 255, .25) !important;
  border: 1px solid rgba(255, 255, 255, .55);
}

/* About page — Overview / STEAM tabs */
.about-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.2rem;
  padding: .35rem;
  background: #f1f5f9;
  border-radius: 14px;
  max-width: 880px;
}
.about-tab{
  flex: 1 1 0;
  min-width: 9rem;
  border: 0;
  background: transparent;
  padding: .65rem .85rem;
  border-radius: 10px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .92rem;
  color: #475569;
  cursor: pointer;
  transition: background .2s ease, color .15s ease, transform .12s ease;
}
.about-tab:hover{ background: #e2e8f0; color: #1e293b; }
.about-tab.active{
  background: #fff;
  color: #1e293b;
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .25);
}

/* STEAM tab content */
.steam-hero{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #2563eb 0%, #db2777 50%, #FFD100 100%);
  color: #fff;
  margin-bottom: 1.2rem;
  max-width: 880px;
}
.steam-hero-emoji{ font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; }
.steam-hero-eyebrow{
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.steam-hero-title{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  margin: 0 0 .5rem;
  line-height: 1.15;
}
.steam-hero-blurb{ margin: 0; line-height: 1.55; opacity: .95; }
.steam-letter-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
  max-width: 880px;
}
.steam-letter{
  position: relative;
  padding: 1.1rem 1rem 1rem 4.6rem;
  border-radius: 16px;
  background: #fff;
  border: 2px solid var(--steam-color, #2563eb);
  box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .35);
  min-height: 130px;
}
.steam-letter-mark{
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--steam-color, #2563eb);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.6rem;
  box-shadow: 0 4px 8px -4px var(--steam-color-dark, rgba(0,0,0,.35));
}
.steam-letter-emoji{
  position: absolute;
  right: .7rem;
  top: .7rem;
  font-size: 1.4rem;
  opacity: .85;
}
.steam-letter h3{
  margin: 0 0 .25rem;
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--steam-color-dark, #1e40af);
}
.steam-letter p{
  margin: 0;
  font-size: .85rem;
  line-height: 1.45;
  color: #334155;
}

/* STEAM modules table */
.steam-mod-table-wrap{
  max-width: 880px;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--c-line, #e2e8f0);
  background: #fff;
  margin-bottom: 1.4rem;
}
.steam-mod-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.steam-mod-table thead{
  background: #f1f5f9;
}
.steam-mod-table th{
  text-align: left;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #475569;
  padding: .65rem .85rem;
}
.steam-mod-table td{
  padding: .7rem .85rem;
  border-top: 1px solid var(--c-line, #e2e8f0);
  vertical-align: top;
}
.steam-mod-name{
  font-family: var(--f-display);
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}
.steam-mod-icon{ margin-right: .35rem; }
.steam-mod-letters{
  white-space: nowrap;
}
.steam-pill{
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .72rem;
  color: #fff;
  margin-right: .2rem;
}
.steam-mod-blurb{
  color: #334155;
  font-size: .88rem;
  line-height: 1.4;
}
.steam-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 0;
}
@media (max-width: 540px){
  .steam-hero{ flex-direction: column; text-align: center; }
  .steam-letter-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .steam-mod-table{ font-size: .82rem; }
}

/* =========================================================
   BOOTCAMP ACCESS GATE — shown when the kid hasn't been
   approved yet (locked / pending / declined / no profile).
   ========================================================= */
.bc-gate{
  max-width: 640px;
  margin: 1.4rem auto 0;
  padding: 1.6rem 1.4rem;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 70%);
  border: 2px solid rgba(0, 155, 58, .25);
  box-shadow: 0 14px 30px -16px rgba(0, 155, 58, .35);
}
.bc-gate-icon{
  font-size: clamp(3rem, 8vw, 4.4rem);
  line-height: 1;
  margin-bottom: .6rem;
}
.bc-gate h2{
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  margin: 0 0 .55rem;
  color: #0f172a;
  line-height: 1.25;
}
.bc-gate p{
  color: #334155;
  line-height: 1.55;
  margin: .35rem auto;
  max-width: 480px;
}
.bc-gate-status{
  margin-top: .9rem !important;
  padding: .45rem .9rem;
  display: inline-block;
  background: rgba(0, 155, 58, .08);
  border-radius: 999px;
  font-size: .9rem;
  color: #1e293b;
}
.bc-gate-foot{ margin-top: 1rem !important; font-size: .88rem; }
.bc-gate.bc-gate-pending{
  background: linear-gradient(180deg, #fef9c3 0%, #fff 70%);
  border-color: rgba(255, 209, 0, .55);
  box-shadow: 0 14px 30px -16px rgba(255, 209, 0, .55);
}
.bc-gate.bc-gate-declined{
  background: linear-gradient(180deg, #fee2e2 0%, #fff 70%);
  border-color: rgba(220, 38, 38, .35);
  box-shadow: 0 14px 30px -16px rgba(220, 38, 38, .35);
}
.bc-gate.bc-gate-noprofile{
  background: linear-gradient(180deg, #ede9fe 0%, #fff 70%);
  border-color: rgba(124, 58, 237, .35);
}
.bc-gate.bc-gate-offline{
  background: linear-gradient(180deg, #f1f5f9 0%, #fff 70%);
  border-color: #cbd5e1;
}

/* Modal overlay */
.bcq-modal{
  position: fixed; inset: 0;
  background: rgba(31, 15, 58, .55);
  display: grid; place-items: center;
  z-index: 9999;
  padding: 1.2rem;
  backdrop-filter: blur(2px);
}
.bcq-modal-card{
  background: #fff;
  border-radius: 22px;
  padding: 1.6rem 1.4rem 1.2rem;
  max-width: 460px;
  width: 100%;
  position: relative;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
}
.bcq-modal-card h2{
  font-family: var(--f-display);
  font-size: 1.4rem;
  margin: 0 0 .2rem;
  color: var(--c-ink);
}
.bcq-modal-x{
  position: absolute;
  top: .6rem; right: .8rem;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--c-ink-soft);
  cursor: pointer;
}
.bcq-modal-x:hover{ color: var(--c-ink); }
.bcq-msg{
  min-height: 1.2rem;
  margin: .4rem 0;
  font-weight: 700;
  font-size: .9rem;
}
.bcq-msg.is-good{ color: var(--jf-green-dark); }
.bcq-msg.is-bad{ color: #b91c1c; }
.bcq-foot{
  margin: 1rem 0 0;
  font-size: .82rem;
  border-top: 1px dashed rgba(31,15,58,.12);
  padding-top: .7rem;
}

/* Teacher panel */
.bcq-panel{
  background: linear-gradient(180deg, #ecfdf5 0%, #fff 70%);
  border: 1px solid rgba(0, 155, 58, .25);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.bcq-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.bcq-item{
  background: #fff;
  border-radius: 12px;
  padding: .7rem .9rem;
  border: 1px solid rgba(31, 15, 58, .08);
  box-shadow: 0 2px 8px -6px rgba(31, 15, 58, .25);
}
.bcq-item.bcq-accepted{ border-left: 4px solid var(--jf-green); opacity: .85; }
.bcq-item.bcq-declined{ border-left: 4px solid #ef4444; opacity: .7; }
.bcq-item-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.bcq-item-meta strong{ font-size: 1rem; color: var(--c-ink); }
.bcq-pill{
  background: rgba(0, 155, 58, .12);
  color: var(--jf-green-dark);
  font-family: var(--f-display);
  font-size: .7rem;
  letter-spacing: .04em;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
}
.bcq-pill-class{ background: rgba(31, 15, 58, .08); color: var(--c-ink); font-family: ui-monospace, Menlo, monospace; }
.bcq-pill-accepted{ background: rgba(0, 155, 58, .2); color: var(--jf-green-dark); }
.bcq-pill-declined{ background: rgba(239, 68, 68, .12); color: #b91c1c; }
.bcq-when{ font-size: .76rem; color: var(--c-ink-soft); margin-left: auto; }
.bcq-msg-text{
  margin: .35rem 0;
  padding: .45rem .7rem;
  background: rgba(31, 15, 58, .04);
  border-radius: 8px;
  font-size: .9rem;
  font-style: italic;
  color: var(--c-ink);
}
.bcq-actions{
  display: flex;
  gap: .45rem;
  margin-top: .5rem;
}

/* =========================================================
   READ-TO-ME — floating indicator + profile toggle
   ========================================================= */
/* Circular FAB on the bottom-right. Top of the stack:
     - Likkle Brain FAB at bottom: 1rem
     - Tap-to-Hear FAB at bottom: 5.4rem (always visible)
     - Read-to-me FAB at bottom: 9.8rem (visible only when toggled on)
   Icon-only — labels move into aria-label/title for screen readers
   and desktop hover tooltips. */
.lc-read-indicator{
  position: fixed;
  right: 1rem;
  bottom: 9.8rem;
  z-index: 70;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--jf-green);
  color: #fff;
  border: none;
  font-family: var(--f-display);
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(0, 155, 58, .65);
  transition: transform .15s ease, box-shadow .2s ease;
}
.lc-read-indicator:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(0, 155, 58, .8); }
/* Hide the pill labels — the FAB is icon-only now. */
.lc-read-indicator .lc-read-label,
.lc-read-indicator .lc-read-off{ display: none; }
.lc-read-icon{ font-size: 1.5rem; line-height: 1; }
.lc-read-indicator.is-speaking{
  animation: lcReadPulse 1.2s ease-in-out infinite;
  background: var(--jf-gold);
  color: var(--jf-black, #000);
}
/* Small × badge in the top-right of the FAB so kids see they can tap to turn off. */
.lc-read-indicator::after{
  content: '×';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1f2937;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid #fff;
}
@keyframes lcReadPulse {
  0%, 100% { box-shadow: 0 8px 18px -8px rgba(255, 209, 0, .55); }
  50%      { box-shadow: 0 8px 24px -2px rgba(255, 209, 0, .9); }
}
@media print { .lc-read-indicator{ display: none !important; } }
@media (max-width: 540px){
  .lc-read-indicator{
    right: .8rem;
    bottom: 9.4rem;
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
}

/* =========================================================
   TAP-TO-HEAR — global press-and-hold accessibility mode
   The icon + active body state + reading highlight + toast.
   ========================================================= */
/* Circular FAB on the right side, stacked above the Brain FAB.
   Always visible. Icon-only — labels live in aria-label/title. */
.lc-press-read-fab{
  position: fixed;
  right: 1rem;
  bottom: 5.4rem;       /* sits above the Likkle Brain FAB (1rem) */
  z-index: 70;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #334155;
  border: 2px solid #cbd5e1;
  font-family: var(--f-display);
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .35);
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.lc-press-read-fab:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(15, 23, 42, .5); }
/* Hide the inline label — FAB is icon-only. */
.lc-press-read-fab .lc-press-read-label{ display: none; }
.lc-press-read-fab.is-on{
  background: var(--jf-gold, #FFD100);
  color: #000;
  border-color: #b8860b;
  animation: lcPressFabPulse 1.6s ease-in-out infinite;
}
@keyframes lcPressFabPulse {
  0%, 100% { box-shadow: 0 8px 18px -8px rgba(255, 209, 0, .55); }
  50%      { box-shadow: 0 10px 28px -2px rgba(255, 209, 0, .9); }
}
.lc-press-read-icon{ font-size: 1.5rem; line-height: 1; }
@media (max-width: 540px){
  .lc-press-read-fab{
    right: .8rem;
    bottom: 5rem;
    width: 48px;
    height: 48px;
  }
  .lc-press-read-fab .lc-press-read-icon{ font-size: 1.3rem; }
}

/* When mode is active, give the cursor a clue so kids see they're in
   'tap any text to hear it' mode. */
body.lc-press-read-active{ cursor: help; }
body.lc-press-read-active .lc-press-reading{
  outline: 3px solid var(--jf-gold, #FFD100);
  outline-offset: 3px;
  background: rgba(255, 209, 0, .15);
  border-radius: 8px;
  transition: background .2s ease;
}

/* Toast that appears mid-read so the child can see what's being spoken
   AND has a big STOP button. */
.lc-press-read-toast{
  position: fixed;
  left: 50%;
  top: 1rem;
  transform: translate(-50%, -120%);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #1f2937;
  color: #fff;
  border-radius: 999px;
  padding: .55rem .85rem .55rem 1rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.45);
  max-width: min(92vw, 540px);
  transition: transform .25s ease, opacity .2s ease;
  opacity: 0;
}
.lc-press-read-toast.is-visible{
  transform: translate(-50%, 0);
  opacity: 1;
}
.lc-press-read-toast-icon{ font-size: 1.1rem; }
.lc-press-read-toast-text{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}
.lc-press-read-toast-stop{
  border: 0;
  background: var(--jf-gold, #FFD100);
  color: #000;
  border-radius: 999px;
  padding: .35rem .8rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.lc-press-read-toast-stop:hover{ filter: brightness(1.05); }

@media print { .lc-press-read-fab, .lc-press-read-toast{ display: none !important; } }
@media (max-width: 540px){
  /* (Press-read FAB sizing handled inline above; mobile-only toast tweaks below) */
  .lc-press-read-toast{ font-size: .78rem; }
  .lc-press-read-toast-text{ max-width: 50vw; }
}

/* Always-visible Read-aloud toggle chip — shown in the dashboard footer
   row and on the home hero so kids never have to hunt through Profile to
   turn the feature off (or back on). */
.lc-read-toggle{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 0;
  border-radius: 999px;
  padding: .5rem .85rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.lc-read-toggle:hover{ transform: translateY(-1px); }
.lc-read-toggle.is-on{
  background: var(--jf-green, #009b3a);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(0, 155, 58, .55);
}
.lc-read-toggle.is-off{
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.kg-readme-row{
  margin-top: .9rem;
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 540px){
  .lc-read-toggle{ font-size: .72rem; padding: .45rem .7rem; }
  .kg-readme-row{ justify-content: center; }
}

/* Profile toggle row */
.ps-readme{
  background: linear-gradient(180deg, #ecfdf5 0%, #fff 60%);
  border: 1px solid rgba(0, 155, 58, .2);
  border-radius: 12px;
  padding: .8rem 1rem;
}
.ps-readme-label{
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  cursor: pointer;
}
.ps-readme-label input[type="checkbox"]{
  width: 22px; height: 22px;
  accent-color: var(--jf-green);
  cursor: pointer;
}

/* Match list */
.match-list{ list-style:none; padding:0; margin:.6rem 0 0; }
.match-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding: .7rem .9rem;
  border-radius:12px; background: var(--c-page); margin-bottom:.4rem;
  font-weight:700;
}

/* =========================================================
   STUDENT PROFILE — visual stats screen (#/profile)
   Mobile-first card with purple gradient hero.
   ========================================================= */
.sp-page{ padding-top: 1.2rem; }
.sp-card{
  max-width: 460px;
  margin: 0 auto;
  background: linear-gradient(180deg, #f5efff 0%, #ffffff 35%);
  border-radius: 26px;
  padding: 1.1rem 1.2rem 1.6rem;
  border: 1px solid rgba(139, 92, 246, .12);
  box-shadow: 0 12px 30px -16px rgba(75, 30, 130, .25);
}
.sp-head{
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  margin-bottom: .8rem;
}
.sp-back, .sp-edit{
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 12px;
  background: #fff;
  color: #4b1e82;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 800;
  border: 1px solid rgba(75, 30, 130, .14);
  box-shadow: 0 2px 0 rgba(75, 30, 130, .08);
  transition: transform .12s ease;
}
.sp-back:hover, .sp-edit:hover{ transform: translateY(-1px); }
.sp-title{
  margin: 0;
  text-align: center;
  font-family: var(--f-display);
  letter-spacing: .12em;
  font-size: .95rem;
  color: #4b1e82;
  text-transform: uppercase;
}

.sp-hero{
  text-align: center;
  padding: .4rem 0 1rem;
}
.sp-avatar-wrap{
  position: relative;
  width: 132px; height: 132px;
  margin: 0 auto .7rem;
}
.sp-avatar{
  width: 132px; height: 132px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  display: grid; place-items: center;
  font-size: 4rem;
  border: 5px solid #fff;
  box-shadow:
    0 8px 24px -8px rgba(75, 30, 130, .55),
    inset 0 -8px 18px rgba(0,0,0,.08);
}
.sp-avatar-badge{
  position: absolute;
  bottom: -4px; right: 6px;
  background: #fbbf24;
  color: #4b1e82;
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: 0 2px 0 rgba(75, 30, 130, .2);
  text-transform: uppercase;
}
.sp-name{
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: #1f0f3a;
}
.sp-name strong{ font-weight: 800; }
.sp-name-icon{ font-size: 1.1rem; }
.sp-sub{
  margin-top: .2rem;
  color: #6b5b8a;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.sp-bar-row{ margin: .55rem 0; }
.sp-bar-label{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-display);
  font-size: .72rem;
  color: #6b5b8a;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.sp-bar-num{
  font-size: .78rem;
  letter-spacing: .04em;
  color: #4b1e82;
  text-transform: none;
}
.sp-bar{
  height: 10px;
  background: rgba(139, 92, 246, .14);
  border-radius: 999px;
  overflow: hidden;
}
.sp-bar-fill{
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}
.sp-bar-exp{
  background: linear-gradient(90deg, #8b5cf6, #c084fc);
}
.sp-bar-streak{
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.sp-section-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 1.2rem 0 .55rem;
}
.sp-section-head h3{
  margin: 0;
  font-family: var(--f-display);
  font-size: .82rem;
  letter-spacing: .14em;
  color: #4b1e82;
  font-weight: 800;
}
.sp-section-meta{
  font-size: .78rem;
  font-weight: 700;
  color: #8b6cb8;
}

.sp-badges{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
}
.sp-badge{
  background: #fff;
  border-radius: 16px;
  padding: .7rem .35rem .55rem;
  text-align: center;
  border: 1px solid rgba(139, 92, 246, .14);
  box-shadow: 0 4px 10px -6px rgba(75, 30, 130, .25);
  transition: transform .12s ease;
}
.sp-badge:hover{ transform: translateY(-2px); }
.sp-badge-emoji{
  width: 44px; height: 44px;
  margin: 0 auto .35rem;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  font-size: 1.6rem;
}
.sp-badge.is-locked .sp-badge-emoji{
  background: rgba(139, 92, 246, .08);
  filter: saturate(.2);
}
.sp-badge.is-locked{ opacity: .55; }
.sp-badge-label{
  font-size: .7rem;
  font-weight: 700;
  color: #1f0f3a;
  line-height: 1.15;
}
.sp-badge.is-locked .sp-badge-label{ color: #6b5b8a; }

.sp-badges-more{ margin-top: .6rem; }
.sp-badges-more summary{
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  color: #6d28d9;
  padding: .4rem;
  border-radius: 10px;
}
.sp-badges-more summary::-webkit-details-marker{ display: none; }
.sp-badges-more[open] summary{ color: #4b1e82; }
.sp-badges-more .sp-badges{ margin-top: .55rem; }

.sp-cert-card{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
  color: #fff;
  border-radius: 18px;
  padding: .85rem 1rem;
  text-decoration: none;
  box-shadow: 0 8px 18px -10px rgba(75, 30, 130, .55);
  transition: transform .12s ease;
}
.sp-cert-card:hover{ transform: translateY(-2px); color: #fff; }
.sp-cert-medal{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #fbbf24;
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.sp-cert-body{ display: flex; flex-direction: column; line-height: 1.2; }
.sp-cert-body strong{ font-weight: 800; font-size: .98rem; }
.sp-cert-body span{ font-size: .78rem; opacity: .85; margin-top: .1rem; }
.sp-cert-cta{
  background: rgba(255,255,255,.18);
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
}
.sp-cert-link{
  display: block;
  text-align: center;
  margin-top: .6rem;
  color: #6d28d9;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}
.sp-cert-link:hover{ text-decoration: underline; }
.sp-cert-empty{
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 1.1rem .9rem;
  border: 1px dashed rgba(139, 92, 246, .25);
}
.sp-cert-empty-emoji{
  font-size: 1.8rem; margin-bottom: .3rem;
}
.sp-cert-empty p{
  margin: 0; color: #6b5b8a; font-size: .85rem;
}

/* =========================================================
   CODE PLAYGROUND — examples · symbols · live editor (#/code)
   ========================================================= */
.cp-page{ max-width: 920px; margin: 0 auto; }
.cp-head{ text-align: center; margin-bottom: 1.4rem; }
.cp-head h2{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  margin: .3rem 0 .4rem;
  color: #1f0f3a;
}
.cp-head .muted{ max-width: 640px; margin: 0 auto; line-height: 1.5; }
.cp-section-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 1.6rem 0 .7rem;
}
.cp-section-head h3{
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: .04em;
  color: #4b1e82;
  margin: 0;
}

/* Examples grid */
.cp-examples{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .6rem;
}
.cp-ex{
  display: grid;
  grid-template-rows: auto auto auto;
  gap: .25rem;
  text-align: left;
  background: linear-gradient(180deg, #f5efff 0%, #ffffff 100%);
  border: 1px solid rgba(139, 92, 246, .18);
  border-radius: 14px;
  padding: .7rem .8rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 2px 0 rgba(75, 30, 130, .08);
}
.cp-ex:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -8px rgba(75, 30, 130, .35);
}
.cp-ex-emoji{ font-size: 1.4rem; }
.cp-ex-title{ font-weight: 800; color: #1f0f3a; font-size: .92rem; }
.cp-ex-peek{
  font-family: ui-monospace, Menlo, "Cascadia Mono", Consolas, monospace;
  font-size: .75rem;
  color: #6b5b8a;
  background: rgba(139, 92, 246, .08);
  padding: .15rem .4rem;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Symbol cheat sheet */
.cp-symbols{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .6rem;
}
.cp-sym{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  background: #fff;
  border: 1px solid rgba(139, 92, 246, .14);
  border-radius: 14px;
  padding: .7rem .85rem;
  align-items: center;
  box-shadow: 0 2px 0 rgba(75, 30, 130, .05);
}
.cp-sym-glyph{
  font-family: ui-monospace, Menlo, "Cascadia Mono", Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 800;
  color: #4b1e82;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-radius: 10px;
  padding: .4rem .55rem;
  min-width: 56px;
  text-align: center;
  line-height: 1.1;
}
.cp-sym-body strong{
  display: block;
  font-size: .92rem;
  color: #1f0f3a;
  margin-bottom: .15rem;
}
.cp-sym-body p{
  margin: 0 0 .2rem;
  font-size: .8rem;
  color: #4b3a6b;
  line-height: 1.35;
}
.cp-sym-body code{
  font-family: ui-monospace, Menlo, "Cascadia Mono", Consolas, monospace;
  font-size: .76rem;
  color: #6d28d9;
  background: rgba(139, 92, 246, .08);
  padding: .1rem .35rem;
  border-radius: 6px;
}

/* Live editor */
.cp-editor-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-top: .4rem;
}
@media (max-width: 720px){
  .cp-editor-wrap{ grid-template-columns: 1fr; }
}
.cp-editor-col, .cp-output-col{ display: flex; flex-direction: column; }
.cp-label{
  font-family: var(--f-display);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6b5b8a;
  margin-bottom: .35rem;
}
.cp-input{
  width: 100%;
  min-height: 220px;
  resize: vertical;
  font-family: ui-monospace, Menlo, "Cascadia Mono", Consolas, monospace;
  font-size: .95rem;
  line-height: 1.5;
  padding: .75rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(75, 30, 130, .18);
  background: #faf7ff;
  color: #1f0f3a;
  box-shadow: inset 0 1px 0 rgba(75, 30, 130, .04);
}
.cp-input:focus{
  outline: 3px solid rgba(139, 92, 246, .35);
  outline-offset: 0;
  border-color: #8b5cf6;
}
.cp-toolbar{
  display: flex; gap: .4rem; margin-top: .5rem;
}
.cp-output{
  width: 100%;
  min-height: 220px;
  border-radius: 14px;
  border: 1px solid rgba(75, 30, 130, .18);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(75, 30, 130, .04);
}
/* v252: the iframe was replaced by a DOM-based output target.
   Style it like a code console so it still feels like a "screen". */
.cp-output-dom{
  padding: .7rem .9rem;
  font-family: ui-monospace, Menlo, "Cascadia Mono", Consolas, monospace;
  font-size: .95rem;
  color: #1f0f3a;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-y: auto;
  max-height: 360px;
}
.cp-output-dom .err{ color: #dc2626; }
.cp-output-dom .muted{ color: #9b8bbf; font-style: italic; }
.cp-output-dom > div{ padding: .15rem 0; }

/* =========================================================
   PROGRESS REPORT — dashboard card with struggling topics,
   recent quizzes, and earned certificates.
   ========================================================= */
.dash-progress-report{
  background: #fff;
  border-radius: 18px;
  padding: 1rem 1.2rem 1.2rem;
  border: 1px solid rgba(139, 92, 246, .14);
  box-shadow: 0 4px 14px -10px rgba(75, 30, 130, .25);
  margin-bottom: 1.6rem;
}
.dpr-block{
  margin-top: .8rem;
}
.dpr-block h4{
  font-family: var(--f-display);
  font-size: .82rem;
  letter-spacing: .08em;
  color: #4b1e82;
  margin: 0 0 .55rem;
  text-transform: uppercase;
}
.dpr-weak h4{ color: #b45309; }
.dpr-list{
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: .45rem;
}
.dpr-list li{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .8rem;
  background: #faf7ff;
  border-radius: 12px;
  padding: .55rem .8rem;
  border: 1px solid rgba(139, 92, 246, .1);
}
.dpr-weak .dpr-list li{
  background: linear-gradient(180deg, #fef3c7 0%, #fff 100%);
  border-color: rgba(245, 158, 11, .25);
}
.dpr-row{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dpr-row strong{ font-size: .92rem; color: #1f0f3a; }
.dpr-meta{ font-size: .76rem; color: #6b5b8a; margin-top: .1rem; }

.dpr-cert-row{
  display: grid;
  gap: .5rem;
}
.dpr-cert{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: center;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
  color: #fff;
  border-radius: 14px;
  padding: .7rem .9rem;
  text-decoration: none;
  box-shadow: 0 4px 14px -10px rgba(75, 30, 130, .4);
  transition: transform .12s ease;
}
.dpr-cert:hover{ transform: translateY(-2px); color: #fff; }
.dpr-cert-medal{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: #fbbf24;
  border-radius: 10px;
  font-size: 1.2rem;
}
.dpr-cert-body{ display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dpr-cert-body strong{ font-size: .9rem; font-weight: 800; }
.dpr-cert-body span{ font-size: .76rem; opacity: .9; margin-top: .1rem; }

/* Cert-earned banner shown on the NSC quiz result page */
.cert-earned-banner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: center;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #4b1e82;
  border-radius: 14px;
  padding: .8rem 1rem;
  text-decoration: none;
  margin: 1rem auto 0;
  max-width: 460px;
  box-shadow: 0 6px 16px -10px rgba(245, 158, 11, .55);
  transition: transform .12s ease;
}
.cert-earned-banner:hover{ transform: translateY(-2px); color: #4b1e82; }
.cert-earned-emoji{ font-size: 1.7rem; }
.cert-earned-body{ display: flex; flex-direction: column; line-height: 1.25; }
.cert-earned-body strong{ font-weight: 800; font-size: .95rem; }
.cert-earned-body span{ font-size: .8rem; }
.cert-earned-cta{
  background: rgba(255, 255, 255, .55);
  padding: .3rem .6rem; border-radius: 999px;
  font-weight: 800; font-size: .8rem;
}

/* Weak-topics block on the NSC quiz result page */
.nsc-weak-topics{
  background: linear-gradient(180deg, #fef3c7, #fff);
  border-radius: 14px;
  padding: .8rem 1rem;
  border: 1px solid rgba(245, 158, 11, .25);
  text-align: left;
  margin: 1rem auto 0;
  max-width: 460px;
}
.nsc-weak-topics h3{
  font-family: var(--f-display);
  font-size: .82rem;
  letter-spacing: .08em;
  color: #b45309;
  margin: 0 0 .4rem;
  text-transform: uppercase;
}
.nsc-weak-topics ul{
  margin: 0; padding-left: 1.1rem;
}
.nsc-weak-topics li{
  font-size: .88rem; color: #1f0f3a; line-height: 1.4;
}

/* Cert page download tip */
.cert-tip{
  text-align: center;
  font-size: .82rem;
  margin: -.4rem 0 1rem;
}

/* =========================================================
   HOLIDAY TUTOR — coming-soon page (#/holiday)
   ========================================================= */
.ht-page{ max-width: 980px; margin: 0 auto; }
.ht-hero{
  text-align: center;
  background: linear-gradient(135deg, #fef3c7 0%, #ffe4e6 50%, #ddd6fe 100%);
  border-radius: 24px;
  padding: 2rem 1.4rem 1.8rem;
  margin-bottom: 1.4rem;
  position: relative;
}
.ht-hero-emoji{
  font-size: 3.6rem;
  line-height: 1;
}
.ht-coming{
  display: inline-block;
  background: #4b1e82;
  color: #fbbf24;
  font-family: var(--f-display);
  font-size: .72rem;
  letter-spacing: .18em;
  padding: .25rem .75rem;
  border-radius: 999px;
  margin-top: .6rem;
}
.ht-title{
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin: .4rem 0 .3rem;
  color: #1f0f3a;
}
.ht-tagline{
  margin: 0 auto;
  max-width: 640px;
  color: #4b3a6b;
  font-size: 1rem;
  line-height: 1.5;
}

.ht-intro{
  margin-bottom: 1.6rem;
}
.ht-intro p{
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: #1f0f3a;
}

.ht-section-head{
  margin: 2rem 0 .8rem;
  text-align: center;
}
.ht-section-head h2{
  font-family: var(--f-display);
  font-size: 1.4rem;
  color: #4b1e82;
  margin: 0;
}

.ht-tracks{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.ht-track{
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  color: #1f0f3a;
  text-align: center;
  border: 1px solid rgba(75, 30, 130, .12);
  box-shadow: 0 4px 14px -10px rgba(75, 30, 130, .25);
}
.ht-track-easter   { background: linear-gradient(180deg, #fef3c7 0%, #fff 100%); }
.ht-track-summer   { background: linear-gradient(180deg, #ffe4e6 0%, #fff 100%); }
.ht-track-christmas{ background: linear-gradient(180deg, #dcfce7 0%, #fff 100%); }
.ht-track-emoji{ font-size: 2.4rem; line-height: 1; }
.ht-track h3{
  font-family: var(--f-display);
  font-size: 1.15rem;
  margin: .4rem 0 .35rem;
  color: #1f0f3a;
}
.ht-track p{
  margin: 0;
  font-size: .92rem;
  color: #4b3a6b;
  line-height: 1.5;
}
.ht-pill{
  display: inline-block;
  margin-top: .7rem;
  background: rgba(75, 30, 130, .1);
  color: #4b1e82;
  font-size: .76rem;
  font-weight: 800;
  padding: .25rem .7rem;
  border-radius: 999px;
}

.ht-benefits{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.ht-benefit{
  background: #fff;
  border-radius: 18px;
  padding: 1.1rem 1.2rem 1rem;
  border: 1px solid rgba(139, 92, 246, .14);
  border-top: 4px solid #8b5cf6;
  box-shadow: 0 4px 14px -10px rgba(75, 30, 130, .25);
}
.ht-benefit-students{ border-top-color: #8b5cf6; }
.ht-benefit-parents { border-top-color: #f59e0b; }
.ht-benefit-teachers{ border-top-color: #10b981; }
.ht-benefit-emoji{
  font-size: 2rem;
  line-height: 1;
}
.ht-benefit h3{
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: #1f0f3a;
  margin: .35rem 0 .55rem;
}
.ht-benefit ul{
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .35rem;
}
.ht-benefit li{
  font-size: .9rem;
  color: #1f0f3a;
  line-height: 1.5;
}
.ht-benefit li strong{ color: #4b1e82; }

.ht-cta{
  text-align: center;
  margin-top: 1.6rem;
  background: linear-gradient(180deg, #f5efff 0%, #ffffff 100%);
}

/* =========================================================
   DAILY XP GOAL — picker on profile + ring card on dashboard
   + confetti when the goal is hit for the first time today.
   ========================================================= */

/* Profile setup goal picker — 4 cards in a row, radio-driven */
.ps-goal{
  background: linear-gradient(180deg, #fefce8 0%, #fff 60%);
  border: 1px solid rgba(255, 209, 0, .35);
  border-radius: 12px;
  padding: .8rem 1rem;
}
.ps-goal-label{
  display: block;
  font-weight: 700;
  margin-bottom: .55rem;
}
.ps-goal-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
}
.ps-goal-opt{ cursor: pointer; }
.ps-goal-opt input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ps-goal-opt .ps-goal-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .7rem .4rem;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: #fff;
  text-align: center;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  font-family: var(--f-display);
}
.ps-goal-opt .ps-goal-card strong{
  font-size: 1rem;
  color: #1e293b;
}
.ps-goal-opt .ps-goal-card span{
  font-size: .76rem;
  color: var(--c-ink-soft, #475569);
  font-weight: 600;
}
.ps-goal-opt:hover .ps-goal-card{
  transform: translateY(-2px);
  border-color: rgba(255, 209, 0, .55);
}
.ps-goal-opt input:checked + .ps-goal-card{
  border-color: #FFD100;
  background: linear-gradient(180deg, #fff7c2 0%, #fff 70%);
  box-shadow: 0 6px 14px -8px rgba(255, 209, 0, .65);
}
@media (max-width: 540px){
  .ps-goal-row{ grid-template-columns: repeat(2, 1fr); }
}

/* Dashboard daily-XP ring card */
.dash-daily-xp{
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  margin: 1rem 0 .4rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fff 60%);
  border: 1px solid rgba(255, 209, 0, .45);
  box-shadow: 0 4px 14px -8px rgba(255, 209, 0, .35);
  transition: background .3s ease, border-color .3s ease;
}
.dash-daily-xp.is-hit{
  background: linear-gradient(135deg, #FFD100 0%, #fef9c3 70%);
  border-color: #b8860b;
  animation: lcDailyHitGlow 2s ease-in-out 1;
}
@keyframes lcDailyHitGlow {
  0%, 100% { box-shadow: 0 4px 14px -8px rgba(255, 209, 0, .35); }
  50%      { box-shadow: 0 8px 28px 0 rgba(255, 209, 0, .9); }
}
.dash-daily-ring{
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.dash-daily-ring-bg{
  fill: none;
  stroke: rgba(0, 0, 0, .08);
  stroke-width: 8;
}
.dash-daily-ring-fg{
  fill: none;
  stroke: #FFD100;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray .5s ease;
}
.dash-daily-xp.is-hit .dash-daily-ring-fg{
  stroke: #f59e0b;
}
.dash-daily-ring-num{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.3rem;
  fill: #1f2937;
}
.dash-daily-ring-of{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .65rem;
  fill: #64748b;
}
.dash-daily-text h3{
  font-size: 1.05rem;
  margin: .15rem 0 0;
  color: #1f2937;
  line-height: 1.25;
}
.dash-daily-eyebrow{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .08em;
  color: #b45309;
}
.dash-daily-xp.is-hit .dash-daily-eyebrow{ color: #7c2d12; }
.dash-daily-edit{ flex-shrink: 0; align-self: center; text-decoration: none; white-space: nowrap; }
@media (max-width: 540px){
  .dash-daily-xp{
    grid-template-columns: 64px 1fr;
    grid-template-areas: "ring text" "edit edit";
    gap: .7rem;
    padding: .85rem 1rem;
  }
  .dash-daily-ring{ width: 64px; height: 64px; grid-area: ring; }
  .dash-daily-text{ grid-area: text; }
  .dash-daily-edit{ grid-area: edit; justify-self: end; }
  .dash-daily-text h3{ font-size: .96rem; }
}

/* =========================================================
   CROWN LEVELS — 5-crown row on subject cards + result banner
   ========================================================= */
.crowns-row{
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-size: 1rem;
  line-height: 1;
}
.crown{
  display: inline-block;
  width: 1.2em;
  text-align: center;
  filter: none;
  transition: transform .12s ease;
}
.crown.crown-on{
  filter: drop-shadow(0 1px 2px rgba(255, 209, 0, .55));
}
.crown.crown-off{
  color: #cbd5e1;
  font-weight: 800;
  font-size: 1.4em;
  opacity: .55;
}
.nsc-track-crowns{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: .3rem 0 .4rem;
  font-size: 1.05rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.05));
}
.quiz-crown-banner{
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: .8rem;
  margin: .9rem auto 0;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #fef3c7 0%, #fff7ed 100%);
  border: 2px solid #FFD100;
  box-shadow: 0 8px 18px -10px rgba(255, 209, 0, .65);
  animation: lcCrownPop .55s cubic-bezier(.34, 1.56, .64, 1) 1;
  text-align: left;
  max-width: 480px;
}
.quiz-crown-banner.is-cooldown{
  background: linear-gradient(135deg, #f1f5f9 0%, #fff 70%);
  border-color: #cbd5e1;
  box-shadow: 0 4px 10px -8px rgba(15, 23, 42, .25);
  animation: none;
}
.qcb-emoji{
  font-size: 2rem;
  text-align: center;
  filter: drop-shadow(0 2px 4px rgba(255, 209, 0, .55));
}
.quiz-crown-banner.is-cooldown .qcb-emoji{ filter: grayscale(.4) opacity(.7); }
.qcb-text strong{
  display: block;
  font-family: var(--f-display);
  font-size: 1.02rem;
  color: #78350f;
  margin-bottom: .12rem;
}
.qcb-text span{
  display: block;
  font-size: .85rem;
  color: #525252;
  line-height: 1.4;
}
.quiz-crown-banner.is-cooldown .qcb-text strong{ color: #475569; }
.qcb-row{ display: flex; align-items: center; }
@keyframes lcCrownPop {
  0%   { transform: scale(.7) rotate(-4deg); opacity: 0; }
  60%  { transform: scale(1.05) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@media (max-width: 540px){
  .quiz-crown-banner{ grid-template-columns: 40px 1fr; }
  .qcb-row{ grid-column: 1 / -1; justify-content: center; margin-top: .25rem; }
}

/* Streak-freeze badge inline next to the 🔥 day-streak counter */
.dash-streak-freeze{
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-size: .82rem;
  font-weight: 800;
  color: #0e7490;
  background: linear-gradient(135deg, #cffafe 0%, #ecfeff 100%);
  border: 1px solid rgba(14, 116, 144, .35);
  border-radius: 999px;
  padding: .1rem .45rem;
  margin-left: .35rem;
  vertical-align: middle;
  letter-spacing: .02em;
}

/* Streak-freeze toast — shown once when a freeze is earned or used */
.streak-freeze-toast{
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1.1rem;
  margin: .8rem 0;
  border-radius: 14px;
  font-family: var(--f-display);
  animation: lcSftPop .5s cubic-bezier(.34, 1.56, .64, 1) 1;
}
.streak-freeze-toast strong{
  display: block;
  font-size: 1.02rem;
  color: #0c4a6e;
  margin-bottom: .15rem;
}
.streak-freeze-toast span{ color: #334155; font-weight: 600; font-size: .88rem; line-height: 1.4; }
.streak-freeze-toast .sft-emoji{ font-size: 1.8rem; flex-shrink: 0; }
.streak-freeze-toast.streak-freeze-saved{
  background: linear-gradient(135deg, #cffafe 0%, #fff 70%);
  border: 2px solid #06b6d4;
  box-shadow: 0 8px 18px -10px rgba(6, 182, 212, .55);
}
.streak-freeze-toast.streak-freeze-earned{
  background: linear-gradient(135deg, #fef3c7 0%, #fff 70%);
  border: 2px solid #FFD100;
  box-shadow: 0 8px 18px -10px rgba(255, 209, 0, .65);
}
@keyframes lcSftPop {
  0%   { transform: scale(.8) translateY(-6px); opacity: 0; }
  100% { transform: scale(1)   translateY(0);   opacity: 1; }
}

/* +XP banner shown on quiz result screens (NSC + PEP) when the
   student earns daily-goal XP from the run. */
.quiz-xp-banner{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .9rem auto 0;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFD100 0%, #fef9c3 100%);
  border: 1px solid #b8860b;
  font-family: var(--f-display);
  color: #1f2937;
  box-shadow: 0 6px 14px -8px rgba(255, 209, 0, .65);
  animation: lcQuizXpPop .5s cubic-bezier(.34, 1.56, .64, 1) 1;
}
.quiz-xp-banner strong{ font-size: 1.05rem; }
.quiz-xp-emoji{ font-size: 1.15rem; }
.quiz-xp-sub{
  font-size: .8rem;
  font-weight: 600;
  color: #475569;
}
@keyframes lcQuizXpPop {
  0%   { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}

/* One-shot confetti when the goal is hit for the first time today */
.lc-xp-confetti{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.lc-xp-confetti span{
  position: absolute;
  top: -20px;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  animation: lcConfettiFall 2.6s cubic-bezier(.2,.7,.2,1) forwards;
  opacity: .95;
}
@keyframes lcConfettiFall {
  0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(0, 105vh) rotate(720deg); opacity: 0; }
}

/* =========================================================
   SUMMER SCHOOL — SELF-PACED PLAYER (.sx-*)
   Track view -> Week view -> Day view (4 pillars)
   ========================================================= */
.sx-page{ max-width: 980px; margin: 0 auto; padding: 1rem 1.2rem 4rem; }
.sx-eyebrow{
  display:inline-block; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; color:#c3771a;
  background:#fff7e6; padding:.25rem .7rem; border-radius:99px;
  margin-bottom:.35rem;
}

/* ---- Track-detail card: Start button row (on /summer tracks tab) ---- */
.sx-td-start{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  margin-top:1rem; padding-top:1rem; border-top:1px dashed #e3d6c2;
}
.sx-td-start-note{ font-size:.83rem; color:#7a6a5a; }
.ss-start-btn{ font-size:1rem; padding:.7rem 1.3rem; }

/* ---- Track view (week grid) ---- */
.sx-track-head{
  display:flex; align-items:flex-start; gap:1rem;
  background:linear-gradient(135deg,#fff5d6,#ffe7c0);
  border:2px solid #f3c66a; border-radius:18px;
  padding:1.1rem 1.3rem; margin: .8rem 0 1.4rem;
}
.sx-track-emoji{ font-size:3rem; line-height:1; }
.sx-track-blurb{ margin:.4rem 0 0; color:#3d2f1a; }

.sx-week-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1rem;
}
.sx-week-card{
  background:#fff; border:2px solid #e8d9b8; border-radius:16px;
  padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.55rem;
  transition:transform .15s, box-shadow .15s;
}
.sx-week-card:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.06); }
.sx-week-card-head{ display:flex; gap:.7rem; align-items:flex-start; }
.sx-week-emoji{ font-size:1.9rem; line-height:1; }
.sx-week-num{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#7a6a5a; font-weight:700; }
.sx-week-name{ margin:.05rem 0 .1rem; font-size:1.15rem; }
.sx-week-dates{ margin:0; font-size:.82rem; color:#7a6a5a; }
.sx-week-theme{ margin:0; color:#5a4a3a; }
.sx-week-locked{ opacity:.7; background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f3f3f3 10px,#f3f3f3 20px); }
.sx-week-coming{
  background:#fff8e8; border:1px dashed #d9bf85; border-radius:10px;
  padding:.7rem .9rem; display:flex; gap:.6rem; align-items:center;
}
.sx-week-coming p{ margin:0; font-size:.88rem; color:#7a5a2a; }
.sx-week-go{ margin-top:.4rem; text-align:center; }

.sx-progress{ display:flex; align-items:center; gap:.6rem; }
.sx-progress-bar{
  flex:1; height:8px; background:#eee; border-radius:99px; overflow:hidden;
}
.sx-progress-bar span{
  display:block; height:100%;
  background:linear-gradient(90deg,#ffb74d,#ff9800);
  transition:width .3s;
}
.sx-progress-text{ font-size:.78rem; font-weight:600; color:#5a4a3a; }

/* ---- Week view (day grid) ---- */
.sx-week-head{
  display:flex; gap:1rem; align-items:flex-start;
  background:linear-gradient(135deg,#e6f6ff,#d3eafe);
  border:2px solid #8cc7f5; border-radius:18px;
  padding:1.1rem 1.3rem; margin: .8rem 0 1.4rem;
}
.sx-week-emoji-big{ font-size:3.2rem; line-height:1; }
.sx-week-empty{
  text-align:center; padding:2rem 1rem; background:#fff;
  border:2px dashed #d9bf85; border-radius:16px;
}
.sx-week-empty h2{ margin:.5rem 0; }
.sx-week-empty p{ color:#7a6a5a; max-width:520px; margin:.4rem auto 1.1rem; }

.sx-day-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1rem;
}
.sx-day-card{
  display:flex; flex-direction:column; gap:.4rem;
  background:#fff; border:2px solid #e3d6c2; border-radius:14px;
  padding:1rem 1.1rem; color:inherit; text-decoration:none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.sx-day-card:hover{ transform:translateY(-3px); border-color:#ff9800; box-shadow:0 8px 18px rgba(255,152,0,.18); }
.sx-day-done{ background:linear-gradient(180deg,#f3fff0,#fff); border-color:#a4d98e; }
.sx-day-num{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#7a6a5a; font-weight:700; }
.sx-day-title{ margin:.1rem 0; font-size:1.1rem; }
.sx-day-meta{ margin:0; font-size:.85rem; font-weight:600; color:#3d2f1a; }
.sx-day-nsc{ margin:.1rem 0 .25rem; font-size:.78rem; }
.sx-day-pillars{
  display:flex; gap:.4rem; flex-wrap:wrap;
  font-size:.74rem; color:#5a4a3a;
}
.sx-day-pillars span{
  background:#fff7e6; border:1px solid #f1dba8; border-radius:99px;
  padding:.2rem .55rem;
}
.sx-day-state{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:.4rem; padding-top:.55rem; border-top:1px dashed #eadbc2;
}
.sx-day-stars{ color:#ff9800; font-weight:700; letter-spacing:.05em; }
.sx-day-cta{ font-weight:700; color:#c3771a; }
.sx-day-cta-go{ color:#fff; background:#ff9800; padding:.3rem .7rem; border-radius:99px; }

/* ---- Day view: 4-pillar player ---- */
.sx-player .sx-day-head{
  background:linear-gradient(135deg,#fff5d6,#ffe7c0);
  border:2px solid #f3c66a; border-radius:18px;
  padding:1rem 1.2rem; margin: .8rem 0 1rem;
}
.sx-player .sx-day-head h1{ margin:.2rem 0; }

.sx-pillar-bar{
  list-style:none; padding:0; margin:0 0 1rem;
  display:flex; gap:.4rem; justify-content:space-between;
  background:#fff; border:2px solid #e3d6c2; border-radius:99px;
  padding:.4rem .55rem;
}
.sx-pillar-step{
  flex:1; display:flex; gap:.4rem; align-items:center; justify-content:center;
  padding:.35rem .4rem; border-radius:99px;
  font-size:.85rem; font-weight:600; color:#7a6a5a;
}
.sx-pillar-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:#eee; color:#7a6a5a; font-size:.78rem; font-weight:700;
}
.sx-pillar-now{ background:#fff7e6; color:#c3771a; }
.sx-pillar-now .sx-pillar-dot{ background:#ff9800; color:#fff; }
.sx-pillar-done{ color:#2e7d32; }
.sx-pillar-done .sx-pillar-dot{ background:#4caf50; color:#fff; }
@media (max-width: 600px){
  .sx-pillar-lab{ display:none; }
  .sx-pillar-step{ padding:.35rem; }
}

.sx-card{
  background:#fff; border:2px solid #e3d6c2; border-radius:18px;
  padding:1.3rem 1.4rem 1.1rem; box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.sx-card-head{
  display:flex; align-items:center; gap:.7rem;
  border-bottom:1px dashed #e3d6c2; padding-bottom:.7rem; margin-bottom:1rem;
}
.sx-card-head h2{ margin:0; flex:1; }
.sx-card-icon{ font-size:1.8rem; line-height:1; }
.sx-card-foot{ margin-top:1.2rem; display:flex; justify-content:flex-end; }

.sx-lesson-body, .sx-activity-body{
  font-size:1.05rem; line-height:1.65; color:#2d2419; white-space:pre-wrap;
}

.sx-vocab-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem; }
.sx-vocab-row{
  display:flex; gap:.7rem; align-items:flex-start;
  background:#fffaf0; border:1px solid #f1dba8; border-radius:12px;
  padding:.55rem .7rem;
}
.sx-vocab-term{
  background:#ff9800; color:#fff; border:none; border-radius:99px;
  padding:.3rem .8rem; font-weight:700; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
}
.sx-vocab-term:hover{ background:#f57c00; }
.sx-vocab-def{ flex:1; color:#3d2f1a; line-height:1.45; }

.sx-activity-checks{
  margin-top:1rem; display:flex; flex-direction:column; gap:.5rem;
  background:#f7fbff; border:1px solid #cfe3f7; border-radius:12px;
  padding:.75rem 1rem;
}
.sx-check{ display:flex; gap:.55rem; align-items:center; font-weight:600; color:#2d2419; cursor:pointer; }
.sx-check input{ width:18px; height:18px; accent-color:#ff9800; }

.sx-quiz-progress{ font-size:.85rem; color:#7a6a5a; font-weight:600; }
.sx-quiz-q{ font-size:1.15rem; font-weight:700; margin:.3rem 0 1rem; color:#2d2419; }
.sx-quiz-opts{ display:flex; flex-direction:column; gap:.55rem; }
.sx-quiz-opt{
  display:flex; align-items:center; gap:.7rem;
  text-align:left; padding:.7rem .9rem;
  background:#fff; border:2px solid #e3d6c2; border-radius:12px;
  font-size:1rem; cursor:pointer; transition: all .15s;
}
.sx-quiz-opt:hover:not(:disabled){ border-color:#ff9800; background:#fff7e6; }
.sx-quiz-opt:disabled{ cursor:default; }
.sx-quiz-letter{
  width:28px; height:28px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:#f0e7d4; color:#5a4a3a; font-weight:700;
}
.sx-opt-right{ background:#e8f5e9 !important; border-color:#4caf50 !important; }
.sx-opt-right .sx-quiz-letter{ background:#4caf50; color:#fff; }
.sx-opt-wrong{ background:#ffebee !important; border-color:#e57373 !important; }
.sx-opt-wrong .sx-quiz-letter{ background:#e57373; color:#fff; }

.sx-quiz-feedback{
  margin-top:1rem; padding:.8rem 1rem; border-radius:12px;
  background:#fffaf0; border:1px solid #f1dba8;
  display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;
}
.sx-fb-right{ color:#2e7d32; font-weight:700; }
.sx-fb-wrong{ color:#c62828; font-weight:600; }

.sx-result-stars{
  font-size:2.4rem; text-align:center; color:#ff9800;
  letter-spacing:.05em; margin-bottom:.3rem;
}
.sx-card-result h2{ text-align:center; margin:.3rem 0; }
.sx-result-score{
  text-align:center; font-size:1.1rem; font-weight:600;
  color:#3d2f1a; margin:.3rem 0 1rem;
}
.sx-result-review{
  background:#fffaf0; border:1px solid #f1dba8; border-radius:12px;
  padding:.8rem 1rem; margin-bottom:1rem;
}
.sx-result-review summary{ font-weight:700; cursor:pointer; color:#c3771a; }
.sx-result-review ul{ margin:.7rem 0 0; padding-left:1.1rem; }
.sx-result-review li{ margin-bottom:.7rem; line-height:1.4; }
.sx-result-cta{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
  margin-top:.5rem;
}

/* ---- Interactive lesson: scenes, dots, tap-keywords, toast ---- */
.sx-scene-counter{
  font-size:.78rem; color:#7a6a5a; font-weight:600;
  background:#fff7e6; padding:.22rem .55rem; border-radius:99px;
}
.sx-scene-dots{
  display:flex; gap:.4rem; margin-bottom:.7rem;
}
.sx-scene-dot{
  flex:1; height:6px; background:#eee; border-radius:99px;
  transition: background .25s;
}
.sx-scene-dot-now{ background:#ff9800; }
.sx-scene-dot-done{ background:#4caf50; }

.sx-lesson-tip{
  margin:0 0 .8rem; font-size:.86rem; color:#5a4a3a;
  background:#fff7e6; border:1px dashed #f1dba8;
  padding:.5rem .8rem; border-radius:10px;
}
.sx-lesson-kw-demo{
  background:#ff9800; color:#fff; padding:.05rem .35rem;
  border-radius:5px; font-weight:700;
}

.sx-scene-stage{
  background:linear-gradient(180deg,#fffaf0,#fff);
  border:1px solid #f1dba8; border-radius:14px;
  padding:1rem 1.1rem; margin-bottom:.5rem;
}
.sx-scene-body{
  font-size:1.1rem; line-height:1.7; color:#2d2419;
  margin:0 0 .8rem;
}
.sx-lesson-kw{
  background:#ffe0a3; color:#8a4a00; border:none;
  padding:.05rem .35rem; border-radius:5px;
  font-weight:700; font-size:inherit; cursor:pointer;
  font-family:inherit; line-height:inherit;
  transition: background .15s, transform .1s;
}
.sx-lesson-kw:hover{ background:#ff9800; color:#fff; transform: translateY(-1px); }
.sx-lesson-kw-tapped{ background:#4caf50; color:#fff; }

.sx-lesson-nav{
  display:flex; justify-content:space-between; align-items:center;
  gap:.6rem;
}

/* YouTube video card inside a Summer School lesson. Sits between the
   scene-stage and the Prev / Next nav. Opens YouTube in a new tab. */
.sx-lesson-video{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: stretch;
  background: linear-gradient(180deg, #fff5f5, #fff);
  border: 2px solid #ff0033;
  border-radius: 12px;
  padding: .9rem 1rem;
  margin: 1rem 0 .2rem;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sx-lesson-video:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255, 0, 51, .18);
  border-color: #c8001f;
}
.sx-lv-thumb{
  position: relative;
  background: #ff0033;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  overflow: hidden;
  box-shadow: inset 0 -8px 14px rgba(0,0,0,.25);
}
.sx-lv-thumb::before{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 60%);
}
.sx-lv-play{
  width: 38px; height: 38px;
  background: #fff;
  border-radius: 50%;
  color: #ff0033;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  z-index: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.sx-lv-yt{
  position: absolute;
  bottom: 4px; right: 6px;
  font-size: .58rem;
  letter-spacing: .08em;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  opacity: .8;
}
.sx-lv-text{
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0;
}
.sx-lv-text strong{
  font-family: var(--f-display, system-ui);
  color: #c8001f;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sx-lv-title{
  font-weight: 700;
  font-size: 1rem;
  color: #2d2419;
  line-height: 1.35;
}
.sx-lv-desc{
  font-size: .85rem;
  color: #5a4a3a;
  line-height: 1.4;
}
.sx-lv-channel{
  display: inline-block;
  background: #fffaf0;
  border: 1px dashed #f1dba8;
  color: #5a4a3a;
  font-size: .78rem;
  padding: .25rem .55rem;
  border-radius: 99px;
  margin-top: .25rem;
  align-self: flex-start;
}
.sx-lv-channel strong{ color: #c8001f; }
.sx-lv-cta{
  font-size: .82rem;
  color: #c8001f;
  font-weight: 700;
  margin-top: .2rem;
}
@media (max-width: 500px){
  .sx-lesson-video{ grid-template-columns: 80px 1fr; gap: .7rem; padding: .7rem .8rem; }
  .sx-lv-play{ width: 30px; height: 30px; font-size: .9rem; }
  .sx-lv-title{ font-size: .92rem; }
}

/* Bottom-of-screen toast that pops up when a kid taps a keyword */
.sx-toast{
  position:fixed; left:50%; bottom:1.2rem;
  transform:translateX(-50%);
  max-width:90vw; min-width:260px;
  background:#2d2419; color:#fff;
  padding:.85rem 1.1rem; border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.3);
  z-index:9000; display:flex; flex-direction:column; gap:.25rem;
  animation: sxToastIn .35s ease-out;
}
.sx-toast-out{ animation: sxToastOut .35s ease-in forwards; }
@keyframes sxToastIn  { from { transform: translate(-50%, 30px); opacity:0; } to { transform: translate(-50%, 0); opacity:1; } }
@keyframes sxToastOut { to   { transform: translate(-50%, 30px); opacity:0; } }
.sx-toast-term{ font-weight:700; color:#ffb74d; }
.sx-toast-def { font-size:.95rem; line-height:1.45; }

/* ---- Quiz: tap-friendlier ---- */
.sx-quiz-pips{
  display:flex; gap:.35rem; margin-bottom:.7rem;
}
.sx-quiz-pip{
  flex:1; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#eee; color:#7a6a5a; font-weight:700; font-size:.78rem;
  border-radius:99px;
}
.sx-pip-now  { background:#fff7e6; color:#c3771a; border:2px solid #ff9800; }
.sx-pip-right{ background:#e8f5e9; color:#2e7d32; }
.sx-pip-wrong{ background:#ffebee; color:#c62828; }

.sx-quiz-q-row{
  display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.5rem;
}
.sx-quiz-q-row .sx-quiz-q{ flex:1; margin:0; }
.sx-quiz-tts{
  flex-shrink:0;
  width:44px; height:44px;
  background:#ff9800; color:#fff; border:none;
  border-radius:50%; font-size:1.2rem; cursor:pointer;
  box-shadow:0 2px 6px rgba(255,152,0,.4);
  transition: transform .1s;
}
.sx-quiz-tts:hover{ transform:scale(1.08); background:#f57c00; }
.sx-quiz-tts:active{ transform:scale(.95); }

.sx-quiz-tap-hint{
  margin:0 0 .8rem; font-size:.9rem; color:#c3771a; font-weight:600;
  text-align:center;
  animation: sxTapBob 1.6s ease-in-out infinite;
}
@keyframes sxTapBob{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(2px); }
}

/* Beefier quiz buttons + tap feedback */
.sx-quiz-opt{
  min-height:56px;
  padding:.85rem 1rem !important;
  font-size:1.05rem !important;
  position:relative;
  -webkit-tap-highlight-color: transparent;
}
.sx-quiz-text{ flex:1; }
.sx-quiz-tap-arrow{
  font-size:1.1rem; opacity:.35;
  transition: transform .2s, opacity .2s;
}
.sx-quiz-opt:hover:not(:disabled) .sx-quiz-tap-arrow{
  opacity:1; transform: translateX(4px);
}
.sx-opt-tapped{ animation: sxOptTap .25s ease-out; }
@keyframes sxOptTap{
  0%   { transform: scale(1); }
  50%  { transform: scale(.96); }
  100% { transform: scale(1); }
}

/* Mobile-friendly larger letter circle */
.sx-quiz-letter{
  width:36px !important; height:36px !important;
  font-size:1.05rem !important;
}

/* =========================================================
   SUMMER SCHOOL — CERT DAY · FINAL · CERT (.sx-closing*, .sx-final*, .sx-cert*)
   ========================================================= */

/* ---- Banner on track view linking to Cert Day ---- */
.sx-closing-banner{
  display:flex; align-items:center; gap:.9rem;
  background:linear-gradient(135deg,#fff5d6,#ffd76a);
  border:2px solid #ff9800; border-radius:14px;
  padding:.9rem 1.1rem; margin: 0 0 1.2rem;
  text-decoration:none; color:#3d2f1a;
  box-shadow:0 4px 12px rgba(255,152,0,.25);
  animation: sxBannerPulse 2.4s ease-in-out infinite;
}
.sx-closing-banner:hover{ transform:translateY(-2px); }
.sx-closing-banner-emoji{ font-size:2rem; line-height:1; }
.sx-closing-banner strong{ display:block; font-size:1.1rem; }
.sx-closing-banner span{ font-size:.86rem; color:#5a4a3a; }
.sx-closing-banner-arrow{ font-size:1.3rem; color:#c3771a; margin-left:auto; }
@keyframes sxBannerPulse{
  0%,100% { box-shadow:0 4px 12px rgba(255,152,0,.25); }
  50%     { box-shadow:0 4px 24px rgba(255,152,0,.5); }
}
.sx-closing-peek{
  display:block; padding:.6rem .9rem;
  background:#fff7e6; border:1px dashed #f1dba8; border-radius:10px;
  margin: 0 0 1.2rem; text-decoration:none; color:#5a4a3a;
  font-size:.92rem; text-align:center;
}
.sx-closing-peek:hover{ background:#fff0d0; }
.sx-closing-peek span{ color:#7a6a5a; font-style:italic; }

/* ---- Cert Day landing page ---- */
.sx-closing-page{ max-width: 980px; }
.sx-closing-hero{
  display:flex; align-items:flex-start; gap:1rem;
  background:linear-gradient(135deg,#fff8e1,#ffd76a);
  border:2px solid #ff9800; border-radius:18px;
  padding:1.2rem 1.4rem; margin: .8rem 0 1.4rem;
}
.sx-closing-trophy{ font-size:3.6rem; line-height:1; }
.sx-closing-hero h1{ margin:.2rem 0; }
.sx-closing-blurb{ margin:.4rem 0 .5rem; color:#3d2f1a; }
.sx-closing-preview{ font-size:.85rem; padding:.4rem .8rem; }

.sx-closing-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr));
  gap:.5rem; margin-bottom:1.4rem;
}
.sx-closing-stats > div{
  background:#fff; border:2px solid #e3d6c2; border-radius:12px;
  padding:.6rem .8rem; text-align:center;
}
.sx-closing-stats strong{
  display:block; font-size:1.4rem; color:#ff9800; line-height:1.1;
}
.sx-closing-stats span{ font-size:.75rem; color:#7a6a5a; letter-spacing:.06em; text-transform:uppercase; }

.sx-section-h{ margin-top:.4rem; }

.sx-closing-list{ display:flex; flex-direction:column; gap:.8rem; }
.sx-closing-item{
  display:grid; grid-template-columns: 38px 56px 1fr; gap:.8rem;
  align-items:flex-start;
  background:#fff; border:2px solid #e3d6c2; border-radius:14px;
  padding:1rem 1.1rem;
}
.sx-closing-locked{ background:repeating-linear-gradient(45deg,#fafafa,#fafafa 8px,#f3f3f3 8px,#f3f3f3 16px); }
.sx-closing-na{ opacity:.75; }
.sx-closing-num{
  width:36px; height:36px; border-radius:50%;
  background:#ff9800; color:#fff; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}
.sx-closing-locked .sx-closing-num{ background:#bdbdbd; }
.sx-closing-na .sx-closing-num{ background:#bdbdbd; }
.sx-closing-emoji{ font-size:2.2rem; line-height:1; text-align:center; }
.sx-closing-label{ margin:0 0 .25rem; font-size:1.05rem; }
.sx-closing-detail{ margin:.1rem 0 .6rem; color:#3d2f1a; line-height:1.5; }
.sx-closing-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.sx-locked-badge{
  display:inline-block; background:#eee; color:#7a6a5a;
  padding:.3rem .7rem; border-radius:99px; font-size:.82rem; font-weight:600;
}
.sx-good{ color:#2e7d32; }
.sx-warn{ color:#c3771a; }

/* Weeks-tab closing-card buttons row */
.ss-wd-closing-cta{
  margin-top:1rem; padding-top:1rem; border-top:1px dashed #e3d6c2;
}
.ss-wd-closing-buttons{ display:flex; gap:.4rem; flex-wrap:wrap; }
.ss-wd-closing-buttons .btn-sm{ font-size:.82rem; padding:.35rem .7rem; }

/* ---- Final assessment ---- */
.sx-final-head{
  display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
  background:linear-gradient(135deg,#e8f5e9,#c8e6c9);
  border:2px solid #66bb6a; border-radius:18px;
  padding:1rem 1.2rem; margin: .8rem 0 1rem;
}
.sx-final-head h1{ margin:.2rem 0; }
.sx-final-timer{
  background:#2e7d32; color:#fff; padding:.55rem 1rem;
  border-radius:99px; font-weight:700; font-size:1.15rem;
  white-space:nowrap; box-shadow:0 2px 6px rgba(46,125,50,.3);
}
.sx-timer-low{ background:#ff9800 !important; }
.sx-timer-out{
  background:#c62828 !important;
  animation: sxTimerFlash .6s ease-in-out infinite alternate;
}
@keyframes sxTimerFlash{ from { opacity:1; } to { opacity:.55; } }

/* ---- Cert presentation ---- */
.sx-cert-page{ max-width: 880px; }
.sx-cert-stage{
  position:relative;
  margin: 1rem 0 1.4rem;
  padding: 1rem;
}
.sx-cert-glow{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 30%, rgba(255,193,7,.5), transparent 70%);
  filter:blur(40px); z-index:0;
}
.sx-cert-card{
  position:relative; z-index:1;
  background:linear-gradient(180deg,#fffef5,#fff5d6);
  border:4px double #c3771a;
  border-radius:24px;
  padding:2rem 1.8rem 1.6rem;
  text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  animation: sxCertIn .8s cubic-bezier(.2,.7,.2,1);
}
@keyframes sxCertIn{
  from { transform: scale(.92) translateY(20px); opacity:0; }
  to   { transform: scale(1) translateY(0); opacity:1; }
}
.sx-cert-emoji{
  font-size:3.5rem;
  display:inline-block;
  animation: sxCertBob 2.4s ease-in-out infinite;
}
@keyframes sxCertBob{ 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.sx-cert-eyebrow{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:#c3771a; font-weight:700; margin:.4rem 0 0;
}
.sx-cert-recipient{
  font-family: Georgia, 'Times New Roman', serif;
  font-size:2.2rem; font-weight:700; color:#5a3000;
  margin:.6rem 0 .2rem;
  word-break:break-word;
}
.sx-cert-line{ font-style:italic; margin:.2rem 0; color:#7a5a2a; }
.sx-cert-title{
  font-size:1.3rem; color:#3d2f1a; margin:.3rem 0 1rem;
}
.sx-cert-stats{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin:.8rem 0;
}
.sx-cert-stats > div{
  background:rgba(255,255,255,.7);
  border:1px solid #f1dba8;
  border-radius:12px;
  padding:.5rem 1rem;
  min-width:90px;
}
.sx-cert-stats strong{
  display:block; font-size:1.6rem; color:#ff9800; line-height:1;
}
.sx-cert-stats span{
  display:block; font-size:.75rem; color:#7a6a5a;
  text-transform:uppercase; letter-spacing:.05em;
}
.sx-cert-foot{ font-size:.88rem; color:#7a5a2a; margin:.7rem 0 0; }

.sx-cert-mints{
  background:#f3fff0; border:2px solid #a4d98e; border-radius:14px;
  padding:1rem 1.2rem; margin-bottom:1.2rem;
}
.sx-cert-mints h3{ margin:0 0 .5rem; color:#2e7d32; }
.sx-cert-mints ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.sx-cert-mints li{
  display:grid; grid-template-columns: 1fr auto; gap:.5rem .8rem;
  align-items:center;
  background:#fff; border:1px solid #c8e6c9; border-radius:10px;
  padding:.5rem .8rem;
}
.sx-cert-mint-title{ font-weight:700; color:#2e7d32; display:block; }
.btn-sm{ font-size:.85rem; padding:.4rem .8rem; }

.sx-cert-share{
  background:#fff; border:2px solid #e3d6c2; border-radius:14px;
  padding:1rem 1.2rem; margin-bottom:1.2rem;
}
.sx-cert-share h3{ margin:0 0 .3rem; }
.sx-cert-share-text{
  width:100%; min-height:90px; resize:vertical;
  border:1px solid #e3d6c2; border-radius:10px;
  padding:.6rem .8rem; font-family:inherit; font-size:.92rem;
  background:#fffaf0; color:#2d2419; margin:.6rem 0;
}
.sx-cert-share-btns{ display:flex; gap:.5rem; flex-wrap:wrap; }

.sx-cert-after{
  background:#fff; border:2px solid #e3d6c2; border-radius:14px;
  padding:1rem 1.2rem;
}
.sx-cert-after h3{ margin:0 0 .6rem; }

@media (max-width: 600px){
  .sx-closing-item{ grid-template-columns: 32px 44px 1fr; gap:.6rem; padding:.8rem .9rem; }
  .sx-closing-num{ width:30px; height:30px; font-size:.92rem; }
  .sx-closing-emoji{ font-size:1.8rem; }
  .sx-cert-recipient{ font-size:1.6rem; }
  .sx-final-head{ flex-direction:column; align-items:stretch; }
}

/* =========================================================
   SUMMER SCHOOL — CHECKLIST UI (.ss-checklist, .ss-check-*)
   Used by the Weeks tab daily lineups + Cert Day landing.
   ========================================================= */
.ss-checklist-hint{
  background:#fff7e6; border:1px dashed #f1dba8;
  border-radius:10px; padding:.55rem .9rem;
  font-size:.88rem; color:#5a4a3a; margin:.4rem 0 1rem;
}
.ss-checklist-hint a{ color:#c3771a; font-weight:700; }

.ss-checklist{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.45rem;
}
.ss-check-row{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:2px solid #e3d6c2; border-radius:10px;
  padding:.5rem .7rem;
  transition: background .15s, border-color .15s;
}
.ss-check-row:hover{ border-color:#ff9800; }
.ss-checked{
  background:#f3fff0;
  border-color:#a4d98e;
}
.ss-check-weekend{
  background:#f7fbff;
  border-color:#cfe3f7;
  border-style:dashed;
}
.ss-check-weekend.ss-checked{ background:#f3fff0; border-color:#a4d98e; border-style:solid; }

.ss-check-label{
  flex:1; display:flex; align-items:flex-start; gap:.6rem;
  cursor:pointer; padding:.1rem;
  -webkit-tap-highlight-color: transparent;
}
.ss-check-input{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.ss-check-box{
  flex-shrink:0;
  width:24px; height:24px; margin-top:1px;
  border:2px solid #c3771a; border-radius:6px;
  background:#fffaf0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:700; color:#fff;
  transition: background .15s, border-color .15s, transform .1s;
}
.ss-check-input:checked + .ss-check-box{
  background:#4caf50; border-color:#2e7d32;
}
.ss-check-input:checked + .ss-check-box::after{
  content:'✓';
  animation: ssCheckPop .25s ease-out;
}
@keyframes ssCheckPop{
  0%   { transform: scale(.4); opacity:0; }
  60%  { transform: scale(1.15); opacity:1; }
  100% { transform: scale(1); }
}
.ss-check-input:focus + .ss-check-box{
  outline:2px solid #ff9800; outline-offset:2px;
}
.ss-check-text{
  flex:1; line-height:1.5; color:#2d2419;
  font-size:.95rem;
}
.ss-checked .ss-check-text{
  text-decoration: line-through;
  text-decoration-color: rgba(46,125,50,.5);
  color:#5a4a3a;
}
.ss-check-badge{
  font-size:.7rem; color:#fff; background:#ff9800;
  padding:.1rem .45rem; border-radius:99px;
  white-space:nowrap; align-self:center;
}
.ss-check-go{
  flex-shrink:0; width:30px; height:30px;
  background:#ff9800; color:#fff;
  border-radius:50%; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; transition: transform .1s;
  font-size:.9rem;
}
.ss-check-go:hover{ background:#f57c00; transform:scale(1.08); }

/* Week tally pill on the Weeks tab */
.ss-wd-tally{
  margin-left:auto;
  background:#fff7e6; color:#c3771a;
  border:2px solid #f1dba8;
  padding:.3rem .7rem; border-radius:99px;
  font-weight:700; font-size:.85rem;
  white-space:nowrap;
}

/* Cert Day "Mark as done" inline checkbox */
.sx-closing-check{
  display:inline-flex; align-items:center; gap:.5rem;
  cursor:pointer; margin-top:.6rem;
  font-size:.88rem; color:#5a4a3a;
  -webkit-tap-highlight-color: transparent;
}
.sx-closing-check-input{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.sx-closing-check .ss-check-box{
  width:22px; height:22px; font-size:.9rem;
}
.sx-closing-check-input:checked + .ss-check-box{
  background:#4caf50; border-color:#2e7d32;
}
.sx-closing-check-input:checked + .ss-check-box::after{
  content:'✓'; color:#fff;
}
.sx-closing-item.ss-checked{
  background:linear-gradient(180deg,#f3fff0,#fff);
  border-color:#a4d98e;
}
.sx-closing-item.ss-checked .sx-closing-label{
  text-decoration: line-through;
  text-decoration-color: rgba(46,125,50,.5);
}

/* =========================================================
   SUMMER SCHOOL — LOCK PAGE (.sx-lock*)
   Shown when a student tries to wander outside /summer/*
   during the holiday window (13 Jul – 24 Aug 2026).
   ========================================================= */
.sx-lock-page{
  display:flex; align-items:center; justify-content:center;
  min-height:60vh;
}
.sx-lock-card{
  max-width:640px; width:100%;
  background:linear-gradient(180deg,#fffaf0,#fff5d6);
  border:3px solid #ff9800; border-radius:22px;
  padding:1.8rem 1.8rem 1.4rem;
  text-align:center;
  box-shadow:0 12px 36px rgba(255,152,0,.18);
}
.sx-lock-emoji{
  font-size:4.5rem; line-height:1;
  display:inline-block;
  animation: sxLockBob 3s ease-in-out infinite;
}
@keyframes sxLockBob{
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-6px) rotate(4deg); }
}
.sx-lock-card h1{
  margin:.4rem 0 .6rem;
  font-size:1.8rem;
  color:#5a3000;
}
.sx-lock-blurb{
  font-size:1.02rem; line-height:1.6;
  color:#3d2f1a;
  margin:0 0 1.2rem;
  text-align:left;
  background:#fff;
  border:1px solid #f1dba8;
  border-radius:12px;
  padding:1rem 1.1rem;
}
.sx-lock-blurb strong{ color:#c3771a; }
.sx-lock-actions{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
  margin-bottom:.6rem;
}
.sx-lock-go{ font-size:1.05rem; padding:.85rem 1.4rem; }

.sx-lock-teacher{
  margin-top:1.2rem; padding-top:1rem;
  border-top:1px dashed #e3d6c2;
  text-align:left;
}
.sx-lock-teacher summary{
  cursor:pointer; font-weight:600; color:#5a4a3a;
  padding:.4rem .6rem; border-radius:8px;
  background:#fff7e6;
  list-style:none;
}
.sx-lock-teacher summary::-webkit-details-marker{ display:none; }
.sx-lock-teacher summary:hover{ background:#fff0d0; }
.sx-lock-teacher[open] summary{ background:#ffe7c0; }
.sx-lock-override{ width:100%; }

@media (max-width: 600px){
  .sx-lock-emoji{ font-size:3.5rem; }
  .sx-lock-card h1{ font-size:1.45rem; }
  .sx-lock-card{ padding:1.3rem 1.1rem 1rem; }
}

/* =========================================================
   SUMMER SCHOOL — PRINTABLE PROMOTIONAL POSTER (.sx-poster*)
   Screen view: a poster that looks great in the browser.
   Print view (@media print): A4/Letter-friendly, no toolbar.
   ========================================================= */
.sx-poster-page{
  max-width:980px;
  margin:0 auto;
  padding:1rem 1rem 3rem;
}
.sx-poster-toolbar{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  padding:.7rem .9rem; margin-bottom:1rem;
  background:#fff7e6; border:1px dashed #f1dba8; border-radius:12px;
}
.sx-poster-hint{ font-size:.85rem; color:#7a6a5a; margin-left:auto; }

/* The poster itself */
.sx-poster{
  background:#fffdf6;
  border:3px solid #1a1a1a;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 18px 42px -12px rgba(0,0,0,.25);
  font-family: var(--f-display, "Bricolage Grotesque", system-ui, sans-serif);
  color:#1a1a1a;
}

/* HEADER STRIP — Jamaica-gold gradient */
.sx-poster-head{
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.4), transparent 40%),
    linear-gradient(135deg, #ffd54a 0%, #ff9800 50%, #f43d2c 100%);
  padding:2rem 2.2rem 1.6rem;
  color:#2d1a00;
  position:relative;
  overflow:hidden;
}
.sx-poster-head::before{
  content:'🥭'; position:absolute; top:-12px; right:-8px;
  font-size:5rem; opacity:.22; transform: rotate(18deg);
}
.sx-poster-head::after{
  content:'☀️'; position:absolute; bottom:-18px; left:-8px;
  font-size:5rem; opacity:.22;
}
.sx-poster-eyebrow{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:800; color:#3d1a00;
  margin-bottom:.7rem;
}
.sx-poster-title{
  font-size:3rem; line-height:1.05; font-weight:900;
  margin:.2rem 0 .6rem; letter-spacing:-.02em;
  display:flex; flex-direction:column;
}
.sx-poster-title-1{ color:#2d1a00; }
.sx-poster-title-2{ color:#fff;
  text-shadow: 0 2px 0 #2d1a00, 0 4px 0 rgba(0,0,0,.18);
}
.sx-poster-lede{
  font-size:1.12rem; line-height:1.5;
  margin:0 0 1rem;
  max-width:46em;
  color:#2d1a00;
  font-weight:500;
}
.sx-poster-banner{
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.sx-poster-banner > div{
  background:#fff;
  border:2px solid #2d1a00;
  border-radius:99px;
  padding:.5rem 1rem;
  font-size:.92rem;
}

/* SECTION HEADINGS */
.sx-poster section > h2,
.sx-poster-why h2,
.sx-poster-tracks h2,
.sx-poster-day h2,
.sx-poster-cta h2{
  font-size:1.6rem; font-weight:900;
  margin:0 0 .9rem;
  color:#1a1a1a;
  letter-spacing:-.01em;
}

/* WHY IT MATTERS */
.sx-poster-why{
  padding:1.8rem 2.2rem 1.5rem;
  background:#fffdf6;
}
.sx-poster-why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:.8rem;
}
.sx-poster-why-card{
  border:2px solid #1a1a1a;
  border-radius:14px;
  padding:1rem 1rem .8rem;
  background:#fff;
  position:relative;
  page-break-inside: avoid;
}
.sx-poster-why-card h3{
  margin:.3rem 0 .35rem;
  font-size:1.05rem;
  font-weight:800;
  color:#1a1a1a;
}
.sx-poster-why-card p{
  font-size:.9rem; line-height:1.45;
  margin:0;
  color:#3d2f1a;
}
.sx-pw-emoji{
  font-size:1.8rem; line-height:1;
  margin-bottom:.2rem;
}
.sx-pw-1{ background: linear-gradient(180deg, #fff4e6, #fff); border-color:#ff9800; }
.sx-pw-2{ background: linear-gradient(180deg, #e8f5e9, #fff); border-color:#388e3c; }
.sx-pw-3{ background: linear-gradient(180deg, #fff8e1, #fff); border-color:#f9a825; }
.sx-pw-4{ background: linear-gradient(180deg, #e3f2fd, #fff); border-color:#1976d2; }
.sx-pw-5{ background: linear-gradient(180deg, #f3e5f5, #fff); border-color:#7b1fa2; }
.sx-pw-6{ background: linear-gradient(180deg, #fce4ec, #fff); border-color:#c2185b; }

/* TRACKS */
.sx-poster-tracks{
  padding:.6rem 2.2rem 1.5rem;
  background:#fffdf6;
}
.sx-poster-track-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:.6rem;
}
.sx-pt-card{
  border:2px solid #1a1a1a;
  border-radius:12px;
  padding:.7rem .4rem;
  text-align:center;
  background:#fff;
  display:flex; flex-direction:column; gap:.2rem;
}
.sx-pt-em{ font-size:1.8rem; line-height:1; }
.sx-pt-card strong{ font-size:.92rem; font-weight:900; }
.sx-pt-card span{ font-size:.78rem; color:#5a4a3a; }
.sx-pt-2{ background:linear-gradient(180deg,#e8f5e9,#fff); }
.sx-pt-3{ background:linear-gradient(180deg,#f1f8e9,#fff); }
.sx-pt-4{ background:linear-gradient(180deg,#fff8e1,#fff); }
.sx-pt-5{ background:linear-gradient(180deg,#fff3e0,#fff); }
.sx-pt-6{ background:linear-gradient(180deg,#fce4ec,#fff); border-width:3px; border-color:#c2185b; }

/* DAY */
.sx-poster-day{
  padding:.4rem 2.2rem 1.4rem;
}
.sx-poster-day-list{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:.5rem;
  list-style:none; padding:0; margin:0 0 .8rem;
}
.sx-poster-day-list li{
  background:#fff;
  border:2px solid #1a1a1a;
  border-radius:10px;
  padding:.6rem .7rem;
  font-size:.85rem;
  line-height:1.4;
}
.sx-poster-day-list strong{ display:block; font-size:.95rem; margin-bottom:.15rem; }
.sx-poster-day-foot{
  font-size:.85rem; color:#5a4a3a; margin:0;
  background:#fff7e6;
  border:1px dashed #c3771a;
  border-radius:10px;
  padding:.6rem .8rem;
  line-height:1.5;
}

/* CTA + QR */
.sx-poster-cta{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap:1.4rem;
  align-items:center;
  padding:1.4rem 2.2rem;
  background:linear-gradient(135deg,#1a1a1a 0%, #2d1a00 100%);
  color:#fff;
}
.sx-poster-cta h2{ color:#ffd24a; margin-top:0; }
.sx-poster-cta p{ font-size:.98rem; line-height:1.55; margin:.3rem 0; }
.sx-poster-email{
  background:#ffd24a; color:#1a1a1a;
  display:inline-block; padding:.5rem .9rem;
  border-radius:8px; font-weight:700; margin:.4rem 0 !important;
}
.sx-poster-foot-line{ font-size:.82rem; color:#bcbcbc; }
.sx-poster-qr{
  background:#fff; padding:.9rem; border-radius:12px; text-align:center;
}
.sx-poster-qr img{ display:block; width:100%; height:auto; }
.sx-poster-qr p{ margin:.45rem 0 0; font-size:.78rem; color:#1a1a1a; font-weight:700; }

/* FOOTER */
.sx-poster-footer{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.8rem 2.2rem;
  background:#fff;
  border-top:2px solid #1a1a1a;
  font-size:.8rem;
  letter-spacing:.08em;
}
.sx-poster-brand{ font-weight:900; }
.sx-poster-tagline{ color:#5a4a3a; }

/* === Responsive === */
@media (max-width: 760px){
  .sx-poster-title{ font-size:2.1rem; }
  .sx-poster-head, .sx-poster-why, .sx-poster-tracks, .sx-poster-day, .sx-poster-cta, .sx-poster-footer{
    padding-left:1.2rem; padding-right:1.2rem;
  }
  .sx-poster-why-grid{ grid-template-columns: repeat(2, 1fr); }
  .sx-poster-track-grid{ grid-template-columns: repeat(2, 1fr); }
  .sx-poster-day-list{ grid-template-columns: repeat(2, 1fr); }
  .sx-poster-cta{ grid-template-columns: 1fr; }
  .sx-poster-qr{ max-width:200px; margin:0 auto; }
}
@media (max-width: 460px){
  .sx-poster-title{ font-size:1.7rem; }
  .sx-poster-why-grid{ grid-template-columns: 1fr; }
  .sx-poster-day-list{ grid-template-columns: 1fr; }
}

/* === PRINT === Hide chrome, ink-friendly, fit one A4/Letter spread.
   Two pages is fine — the QR + CTA flows onto page 2. */
@media print{
  body, html{ background:#fff !important; }
  .lc-app-shell, .lc-nav, .lc-bottom-nav, #dykFab, #dykPopup,
  .lc-global-banner, .sx-poster-toolbar, .chess-back, #lcReadIndicator,
  .lc-footer, .lc-secondary-nav, .lc-primary-nav{
    display:none !important;
  }
  .sx-poster-page{ padding:0; max-width:none; }
  .sx-poster{
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .sx-poster-head{
    padding:1.4rem 1.6rem 1rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sx-poster-title{ font-size:2.3rem; }
  .sx-poster-why,
  .sx-poster-tracks,
  .sx-poster-day,
  .sx-poster-cta,
  .sx-poster-footer{
    padding:1rem 1.6rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sx-poster-why-card,
  .sx-pt-card,
  .sx-poster-day-list li,
  .sx-poster-banner > div,
  .sx-poster-email,
  .sx-poster-cta{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Keep the why-cards together so they don't split awkwardly */
  .sx-poster-why-card{ page-break-inside: avoid; }
  .sx-poster-why-grid{ gap:.5rem; }
  .sx-poster-cta{ page-break-before: auto; }
}

/* =========================================================
   SUMMER SCHOOL — MATH SCRATCH PAD (.sx-scratch)
   A drawing canvas that appears under math Activity + each
   math Quiz question. Pen / eraser / 4 colours / clear.
   Autosaves the strokes per-question to localStorage.
   ========================================================= */
.sx-scratch{
  margin: 1rem 0 .4rem;
  background: linear-gradient(180deg, #fff8e1, #fff);
  border: 2px dashed #f3c66a;
  border-radius: 14px;
  overflow: hidden;
}
.sx-scratch[open]{ border-style: solid; }
.sx-scratch-sum{
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: .7rem 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display, system-ui);
  color: #5a3000;
  -webkit-tap-highlight-color: transparent;
}
.sx-scratch-sum::-webkit-details-marker{ display: none; }
.sx-scratch-sum:hover{ background: rgba(255, 200, 100, .15); }
.sx-scratch-icon{ font-size: 1.4rem; line-height: 1; }
.sx-scratch-label{ font-weight: 700; font-size: 1rem; flex: 1; }
.sx-scratch-hint{
  font-size: .8rem;
  color: #7a5a2a;
  font-weight: 500;
  font-style: italic;
}

.sx-scratch-pad{
  padding: .5rem .7rem .9rem;
  border-top: 1px dashed #f1dba8;
}
.sx-scratch-tools{
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: .55rem;
  padding: .4rem .55rem;
  background: #fff;
  border: 1px solid #f1dba8;
  border-radius: 10px;
}
.sx-scratch-tool{
  appearance: none;
  border: 2px solid transparent;
  background: #fff7e6;
  width: 38px; height: 38px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.sx-scratch-tool:hover{ background: #ffe7c0; }
.sx-scratch-tool.is-active{
  background: #ff9800;
  border-color: #c3771a;
}
.sx-scratch-colors{
  display: flex;
  gap: .35rem;
  align-items: center;
  padding-left: .3rem;
  margin-left: .2rem;
  border-left: 1px solid #f1dba8;
  margin-right: auto;
}
.sx-scratch-col{
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 1px solid #d9bf85;
  cursor: pointer;
  padding: 0;
  transition: transform .12s, outline-color .12s;
}
.sx-scratch-col:hover{ transform: scale(1.12); }
.sx-scratch-col.is-active{
  outline: 3px solid #ff9800;
  transform: scale(1.18);
}
.sx-scratch-clear{
  appearance: none;
  border: 2px solid #c3771a;
  background: #fff;
  color: #c3771a;
  border-radius: 99px;
  padding: .35rem .75rem;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s;
}
.sx-scratch-clear:hover{ background: #fff7e6; }

.sx-scratch-canvas{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 420;
  background-color: #ffffff;
  /* Graph-paper grid behind the strokes (drawn via CSS so the
     eraser only clears the canvas drawing, not the grid lines). */
  background-image:
    linear-gradient(to right,  rgba(60, 120, 190, .14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(60, 120, 190, .14) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 2px solid #d9bf85;
  border-radius: 10px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}
.sx-scratch-foot{
  margin: .45rem 0 0;
  font-size: .8rem;
  color: #7a6a5a;
  text-align: center;
  font-style: italic;
}

@media (max-width: 540px){
  .sx-scratch-tools{ padding: .35rem .4rem; gap: .3rem; }
  .sx-scratch-tool{ width: 34px; height: 34px; font-size: 1rem; }
  .sx-scratch-col{ width: 22px; height: 22px; }
  .sx-scratch-canvas{ background-size: 18px 18px; }
}

/* =========================================================
   ONBOARDING MOCKUP (.ob-*) — clickable prototype for the
   school sign-up / roster / kid-login / parent-link flow.
   ========================================================= */
.ob-page{ max-width: 1000px; margin: 0 auto; padding: 1rem 1.2rem 4rem; }
.ob-banner{
  background:#fff7e6; border:2px dashed #f3c66a; border-radius:12px;
  padding:.6rem .9rem; margin: .5rem 0 1.2rem;
  font-size:.92rem; color:#5a3000;
}
.ob-hero{ margin-bottom:1.3rem; }
.ob-eyebrow{
  display:inline-block; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; color:#c3771a;
  background:#fff7e6; padding:.25rem .7rem; border-radius:99px;
}
.ob-hero h1{ margin:.4rem 0 .3rem; font-size:1.8rem; }

/* ---- step indicator strip ---- */
.ob-steps{
  list-style:none; padding:.5rem .6rem; margin: 0 0 1.6rem;
  display:flex; gap:.4rem; flex-wrap:wrap;
  background:#fff; border:2px solid #e3d6c2; border-radius:99px;
}
.ob-step{
  flex:1; min-width:120px;
  display:flex; gap:.5rem; align-items:center; justify-content:center;
  padding:.5rem .8rem; border-radius:99px;
  font-size:.88rem; font-weight:600; color:#7a6a5a;
  cursor:pointer; transition: background .15s, color .15s;
}
.ob-step:hover{ background:#fff7e6; }
.ob-step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:#eee; color:#7a6a5a; font-weight:700; font-size:.85rem;
}
.ob-step-now{ background:#fff7e6; color:#c3771a; }
.ob-step-now .ob-step-num{ background:#ff9800; color:#fff; }
.ob-step-done{ color:#2e7d32; }
.ob-step-done .ob-step-num{ background:#4caf50; color:#fff; }

/* ---- screen card ---- */
.ob-screen{
  background:#fff; border:2px solid #e3d6c2; border-radius:18px;
  padding:1.6rem 1.7rem 1.3rem;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.15);
}
.ob-screen-head{ margin-bottom:1.2rem; }
.ob-screen-num{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:#7a6a5a; background:#f0e7d4;
  padding:.2rem .6rem; border-radius:99px; display:inline-block;
}
.ob-screen-head h2{ margin:.4rem 0 .2rem; font-size:1.4rem; color:#2d2419; }

/* ---- form ---- */
.ob-form{ display:flex; flex-direction:column; gap:1rem; }
.ob-field{ display:flex; flex-direction:column; gap:.3rem; position:relative; }
.ob-field > span{ font-weight:700; color:#3d2f1a; font-size:.9rem; }
.ob-field input, .ob-field select{
  appearance:none; -webkit-appearance:none;
  border: 2px solid #e3d6c2; border-radius:10px;
  padding: .65rem .85rem;
  font-size: 1rem; font-family: inherit; color:#2d2419;
  background:#fff;
  transition: border-color .15s;
}
.ob-field input:focus, .ob-field select:focus{
  outline:none; border-color:#ff9800;
}
.ob-field-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:1rem;
}
.ob-help{ font-size:.85rem; color:#7a6a5a; margin:.2rem 0 0; }
.ob-picked{
  background:#f3fff0; border:1px solid #a4d98e; border-radius:10px;
  padding:.55rem .85rem;
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
}
.ob-picked-name{ font-weight:700; color:#1a1a1a; }
.ob-picked-meta{ font-size:.85rem; color:#5a4a3a; }
.ob-picked-tag{ font-size:.78rem; background:#4caf50; color:#fff; padding:.2rem .6rem; border-radius:99px; margin-left:auto; }

.ob-autocomplete{
  position:absolute; left:0; right:0; top:100%; z-index:10;
  background:#fff; border: 2px solid #ff9800; border-top:none;
  border-radius: 0 0 10px 10px;
  margin-top:-2px; max-height:240px; overflow-y:auto;
  box-shadow: 0 8px 18px rgba(0,0,0,.1);
}
.ob-ac-row{
  width:100%; text-align:left; padding:.6rem .85rem;
  background:#fff; border:none; border-bottom:1px solid #f3e8d3;
  cursor:pointer; display:flex; flex-direction:column; gap:.1rem;
  font-family:inherit;
}
.ob-ac-row:last-child{ border-bottom:none; }
.ob-ac-row:hover{ background:#fff7e6; }
.ob-ac-row strong{ color:#2d2419; font-size:.95rem; }
.ob-ac-row span{ font-size:.78rem; color:#7a6a5a; }
.ob-ac-empty{ padding:.7rem .9rem; color:#7a6a5a; font-style:italic; font-size:.88rem; }

.ob-quote{
  background:linear-gradient(135deg, #fff5d6, #ffe7c0);
  border: 2px solid #f3c66a; border-radius:12px;
  padding:.8rem 1rem;
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
}
.ob-quote span{ color:#5a3000; }
.ob-quote strong{ color:#c3771a; font-size:1.4rem; font-weight:900; }
.ob-muted-sm{ font-size:.75rem; color:#7a6a5a; font-style:italic; margin-left:auto; }

.ob-actions{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end;
  margin-top:1.2rem; padding-top:1rem; border-top: 1px dashed #e3d6c2;
}
.ob-actions .btn-light + .btn-jamaica { margin-left:auto; }
.btn:disabled{ opacity:.45; pointer-events:none; }

/* ---- Step 2: cert-style card ---- */
.ob-cert{
  background: linear-gradient(180deg, #fffdf6, #fff5d6);
  border: 3px double #c3771a;
  border-radius: 16px;
  padding: 1.4rem 1.5rem 1.2rem;
  text-align:center;
  max-width:480px; margin:0 auto 1.2rem;
}
.ob-cert-head{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px dashed #d9bf85; padding-bottom:.55rem; margin-bottom:.7rem;
}
.ob-cert-logo{ font-weight:900; font-family:var(--f-display,system-ui); color:#5a3000; letter-spacing:.04em; }
.ob-cert-tag{ font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:#7a5a2a; }
.ob-cert-school{ margin:.2rem 0 .3rem; color:#2d1a00; font-size:1.4rem; }
.ob-cert-meta{ font-size:.88rem; color:#5a4a3a; margin:.2rem 0 .9rem; line-height:1.5; }
.ob-cert-qr{ margin: .4rem auto; max-width:200px; }
.ob-cert-qr img{ width:100%; height:auto; display:block; border-radius:8px; }
.ob-cert-code{
  background:#1a1a1a; color:#fff7e6; font-family: ui-monospace, "Courier New", monospace;
  font-size:1.05rem; font-weight:700; letter-spacing:.05em;
  padding:.55rem .8rem; border-radius:8px; margin:.6rem auto;
  display:inline-block;
}
.ob-cert-foot{ font-size:.82rem; color:#5a3000; font-style:italic; margin:0; }

.ob-share-row{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-bottom:1.2rem; }
.ob-checklist{
  background:#fff7e6; border:1px dashed #f1dba8; border-radius:12px;
  padding:1rem 1.2rem; margin-bottom:.5rem;
}
.ob-checklist h4{ margin:0 0 .5rem; font-size:1rem; color:#3d2f1a; }
.ob-checklist label{
  display:flex; align-items:center; gap:.5rem;
  padding:.25rem 0; font-size:.9rem; color:#3d2f1a;
}
.ob-checklist input{ accent-color:#ff9800; }

/* ---- Step 3: roster ---- */
.ob-roster-pick{
  display:grid; grid-template-columns: 1fr 1fr; gap:1rem;
  margin-bottom:1.3rem;
}
.ob-roster-card{
  background:#fff; border:2px solid #e3d6c2; border-radius:12px;
  padding:1rem 1.1rem; text-align:center;
}
.ob-roster-emoji{ font-size:2rem; line-height:1; margin-bottom:.3rem; }
.ob-roster-card h3{ margin:.2rem 0 .3rem; font-size:1.05rem; }
.ob-roster-card p{ font-size:.86rem; color:#5a4a3a; line-height:1.45; margin-bottom:.7rem; }
.ob-roster-card code{ background:#fffaf0; padding:.05rem .35rem; border-radius:4px; font-size:.85em; }
.ob-tiny-link{ display:block; font-size:.78rem; color:#c3771a; margin-top:.4rem; }
.ob-empty{
  background:#fffaf0; border:1px dashed #f1dba8; border-radius:10px;
  padding:.85rem 1rem; color:#7a6a5a; font-style:italic; text-align:center;
}
.ob-roster-preview{
  background:#fff; border:2px solid #e3d6c2; border-radius:12px;
  padding:1rem 1.1rem; margin-top:.4rem;
}
.ob-roster-preview-head{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:.5rem; margin-bottom:.6rem;
}
.ob-roster-table{
  width:100%; border-collapse:collapse; font-size:.92rem;
}
.ob-roster-table th, .ob-roster-table td{
  text-align:left; padding:.5rem .6rem;
  border-bottom:1px dashed #eadbc2;
}
.ob-roster-table th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:#7a6a5a; }
.ob-roster-table code{ background:#fff7e6; padding:.1rem .35rem; border-radius:4px; }
.ob-badge-mini{
  background:#ff9800; color:#fff; padding:.1rem .4rem; border-radius:4px; font-size:.72rem; font-weight:700;
}
.ob-roster-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; padding-top:.6rem; border-top: 1px dashed #eadbc2; }

/* ---- Step 4: phone frame ---- */
.ob-phone-frame{
  max-width: 320px; margin: 0 auto;
  background:#1a1a1a; border-radius: 32px;
  padding: 14px 10px;
  box-shadow: 0 18px 42px -10px rgba(0,0,0,.4);
}
.ob-phone-frame-sm{ max-width: 260px; }
.ob-phone-screen{
  background: #fffdf6; border-radius: 22px;
  padding: 1.2rem 1.1rem;
  min-height: 460px;
  display:flex; flex-direction:column;
}
.ob-kid-school{ text-align:center; margin-bottom:1rem; }
.ob-kid-logo{ font-size:2.6rem; line-height:1; }
.ob-kid-school h3{ margin:.35rem 0 .2rem; font-size:1.1rem; }
.ob-kid-school h3 span{ color:#c3771a; }
.ob-kid-school p{ font-size:.85rem; color:#5a4a3a; margin:0; }
.ob-kid-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.ob-kid-pick{
  display:flex; gap:.6rem; align-items:center;
  background:#fff; border:2px solid #e3d6c2; border-radius:10px;
  padding:.5rem .7rem; width:100%; cursor:pointer;
  font-family:inherit; text-align:left;
  transition: border-color .12s, transform .12s;
}
.ob-kid-pick:hover{ border-color:#ff9800; transform: translateY(-1px); }
.ob-kid-avatar{
  width:36px; height:36px; border-radius:50%;
  background:#ff9800; color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.1rem;
}
.ob-kid-name{ flex:1; font-weight:600; color:#2d2419; }
.ob-kid-grade{ font-size:.78rem; color:#7a6a5a; }
.ob-kid-foot{ font-size:.78rem; color:#7a6a5a; text-align:center; margin-top:auto; padding-top:.8rem; }
.ob-kid-foot a{ color:#c3771a; }

.ob-kid-pin{ text-align:center; padding-top:.4rem; }
.ob-kid-avatar-big{
  width:64px; height:64px; border-radius:50%;
  background:#ff9800; color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:2rem;
}
.ob-kid-pin h3{ margin:.5rem 0 .15rem; }
.ob-kid-pin p{ font-size:.88rem; color:#5a4a3a; margin:.1rem 0 .7rem; }
.ob-pin-dots{ display:flex; gap:.65rem; justify-content:center; margin-bottom:1rem; }
.ob-pin-dot{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid #c3771a;
}
.ob-pin-dot.on{ background:#ff9800; }
.ob-pin-pad{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.4rem; max-width:200px; margin:0 auto; }
.ob-pin-key{
  appearance:none; border:none;
  background:#fff7e6; border:2px solid #f1dba8;
  border-radius:50%;
  width:54px; height:54px;
  font-size:1.3rem; font-weight:700; color:#3d2f1a;
  cursor:pointer; transition: background .12s, transform .12s;
}
.ob-pin-key:hover{ background:#ffe7c0; transform:scale(1.05); }
.ob-pin-key[data-key="⌫"]{ background:#f3e8d3; }
.ob-kid-hint{ font-size:.76rem; color:#7a6a5a; margin-top:1rem; font-style:italic; }

.ob-success{
  margin-top:1rem; background:#f3fff0; border:2px solid #a4d98e; border-radius:10px;
  padding:.7rem .9rem; color:#1a3d0c; font-size:.92rem; line-height:1.5;
}

/* ---- Step 5: parent-link ---- */
.ob-twocol{ display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; margin-bottom:1.2rem; }
.ob-twocol h4{ margin:0 0 .55rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#7a6a5a; }
.ob-parent-prompt{ text-align:center; padding-top:.4rem; }
.ob-parent-prompt h3{ margin:.5rem 0 .15rem; font-size:1rem; }
.ob-parent-prompt p{ font-size:.82rem; color:#5a4a3a; margin:.1rem 0 .7rem; }
.ob-parent-prompt input{ width:100%; padding:.55rem .7rem; border:2px solid #e3d6c2; border-radius:8px; font-family:inherit; font-size:.92rem; margin-bottom:.55rem; }
.btn-block{ display:block; width:100%; margin-top:.4rem; }

.ob-email-preview{
  background:#fff; border:2px solid #d4d4d4; border-radius:10px;
  overflow:hidden;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}
.ob-email-from, .ob-email-subj{
  padding:.4rem .7rem; font-size:.78rem;
}
.ob-email-from{ background:#f3f4f6; color:#525252; border-bottom:1px solid #e5e5e5; }
.ob-email-subj{ background:#fff; color:#1a1a1a; font-weight:700; border-bottom:1px solid #e5e5e5; }
.ob-email-body{ padding:.85rem 1rem; color:#2d2419; font-size:.85rem; line-height:1.5; }
.ob-email-body p{ margin:0 0 .5rem; }
.ob-email-cta{
  display:inline-block; background:#ff9800; color:#fff;
  padding:.55rem 1rem; border-radius:6px; text-decoration:none;
  font-weight:700; margin:.5rem 0;
}
.ob-email-tiny{ font-size:.75rem; color:#5a4a3a; font-style:italic; margin-top:.55rem; }

.ob-final{
  background:linear-gradient(135deg, #fff5d6, #ffe7c0);
  border:2px solid #f3c66a; border-radius:14px;
  padding:1.2rem 1.4rem; margin-bottom:.6rem;
}
.ob-final h3{ margin:0 0 .3rem; color:#5a3000; }
.ob-final p{ margin:.3rem 0; color:#3d2f1a; }
.ob-final ul{ margin:.5rem 0 0; padding-left:1.2rem; color:#3d2f1a; line-height:1.7; }

/* ---- Responsive ---- */
@media (max-width: 760px){
  .ob-field-row{ grid-template-columns: 1fr; }
  .ob-roster-pick{ grid-template-columns: 1fr; }
  .ob-twocol{ grid-template-columns: 1fr; }
  .ob-screen{ padding: 1.1rem 1.1rem 1rem; }
  .ob-steps{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; }
  .ob-step{ min-width:130px; flex:0 0 auto; }
}

/* ==== TIER CHOOSER (the 3 cards on /onboarding) ==== */
.ob-tier-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.4rem;
}
.ob-tier-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:3px solid #e3d6c2;
  border-radius:18px;
  padding:1.3rem 1.3rem 1.1rem;
  text-decoration:none;
  color:inherit;
  position:relative;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  min-height: 380px;
}
.ob-tier-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.2);
}
.ob-tier-visitor{ border-color:#88c5e8; }
.ob-tier-visitor:hover{ border-color:#3b82f6; box-shadow: 0 14px 30px -12px rgba(59,130,246,.35); }
.ob-tier-school { border-color:#f3c66a; background: linear-gradient(180deg, #fff8e1, #fff); }
.ob-tier-school:hover{ border-color:#f59e0b; box-shadow: 0 14px 30px -12px rgba(245,158,11,.4); }
.ob-tier-teacher{ border-color:#c8a8e3; }
.ob-tier-teacher:hover{ border-color:#8b5cf6; box-shadow: 0 14px 30px -12px rgba(139,92,246,.35); }
.ob-tier-summer{ border-color:#f59e0b; background: linear-gradient(180deg, #fff7e0, #fff); }
.ob-tier-summer:hover{ border-color:#d97706; box-shadow: 0 14px 30px -12px rgba(245,158,11,.4); }
.ob-tier-eci{ border-color:#f9a8d4; background: linear-gradient(180deg, #fff0f7, #fff); }
.ob-tier-eci:hover{ border-color:#ec4899; box-shadow: 0 14px 30px -12px rgba(236,72,153,.4); }
.ob-tier-pep{ border-color:#86efac; background: linear-gradient(180deg, #f0fdf4, #fff); }
.ob-tier-pep:hover{ border-color:#22c55e; box-shadow: 0 14px 30px -12px rgba(34,197,94,.4); }
.ob-tier-robotics{ border-color:#7dd3fc; background: linear-gradient(180deg, #f0f9ff, #fff); }
.ob-tier-robotics:hover{ border-color:#0ea5e9; box-shadow: 0 14px 30px -12px rgba(14,165,233,.4); }

.ob-tier-emoji{ font-size:2.8rem; line-height:1; margin-bottom:.3rem; }
.ob-tier-tag{
  display:inline-block; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:800; color:#7a6a5a; background:#f3e8d3;
  padding:.2rem .55rem; border-radius:99px;
  margin-bottom:.45rem;
}
.ob-tier-visitor .ob-tier-tag{ background:#dbeafe; color:#1e3a8a; }
.ob-tier-school  .ob-tier-tag{ background:#fde68a; color:#78350f; }
.ob-tier-teacher .ob-tier-tag{ background:#ede9fe; color:#5b21b6; }
.ob-tier-summer  .ob-tier-tag{ background:#fed7aa; color:#7c2d12; }
.ob-tier-eci     .ob-tier-tag{ background:#fce7f3; color:#831843; }
.ob-tier-pep     .ob-tier-tag{ background:#dcfce7; color:#14532d; }
.ob-tier-robotics .ob-tier-tag{ background:#dbeafe; color:#0c4a6e; }
.ob-tier-card h2{ margin:.1rem 0 .4rem; font-size:1.5rem; color:#2d2419; }
.ob-tier-who{ font-size:.92rem; line-height:1.5; color:#3d2f1a; margin:0 0 .8rem; }
.ob-tier-includes{
  font-size:.8rem; line-height:1.5; color:#5a4a3a;
  background:#fffaf0; border:1px dashed #f1dba8; border-radius:8px;
  padding:.55rem .7rem; margin-bottom:.8rem;
}
.ob-tier-includes strong{ color:#c3771a; }
.ob-tier-price{
  display:flex; align-items:baseline; gap:.35rem;
  margin-bottom:.5rem;
}
.ob-tier-price-amount strong{ font-size:1.4rem; color:#c3771a; font-weight:900; }
.ob-tier-price-unit{ font-size:.85rem; color:#7a6a5a; }
.ob-tier-durations{
  display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:.9rem;
}
.ob-tier-durations span{
  font-size:.74rem; font-weight:600;
  background:#fff7e6; color:#c3771a; padding:.18rem .55rem; border-radius:99px;
  border:1px solid #f1dba8;
}
.ob-tier-cta{
  margin-top:auto;
  font-weight:700; color:#c3771a; font-size:.95rem;
  border-top:1px dashed #e3d6c2;
  padding-top:.55rem;
}
.ob-tier-visitor .ob-tier-cta{ color:#1e3a8a; border-top-color:#cfe3f7; }
.ob-tier-teacher .ob-tier-cta{ color:#5b21b6; border-top-color:#e9d5ff; }
.ob-tier-summer  .ob-tier-cta{ color:#9a3412; border-top-color:#fdba74; }
.ob-tier-eci     .ob-tier-cta{ color:#9d174d; border-top-color:#fbcfe8; }
.ob-tier-pep     .ob-tier-cta{ color:#166534; border-top-color:#bbf7d0; }
.ob-tier-robotics .ob-tier-cta{ color:#075985; border-top-color:#bae6fd; }

/* Eyebrow chips inside PEP / Robotics flows */
.ob-tier-tag-pep{      background:#dcfce7 !important; color:#14532d !important; }
.ob-tier-tag-robotics{ background:#dbeafe !important; color:#0c4a6e !important; }

/* Summer-specific eyebrow chip inside its flow */
.ob-tier-tag-summer{ background:#fed7aa !important; color:#7c2d12 !important; }
/* ECI-specific eyebrow chip inside its flow */
.ob-tier-tag-eci{    background:#fce7f3 !important; color:#831843 !important; }

/* Buyer-type toggle (Summer School Step 1: parent vs school) */
.ob-buyer-toggle{
  display:grid; grid-template-columns: 1fr 1fr; gap:.7rem;
  margin-bottom:1.2rem;
}
.ob-buyer-pick{
  appearance:none; border:none;
  background:#fff; border:2px solid #e3d6c2;
  border-radius:14px;
  padding:1rem 1.1rem;
  text-align:center;
  cursor:pointer;
  font-family:inherit;
  display:flex; flex-direction:column; gap:.2rem; align-items:center;
  transition: border-color .15s, transform .12s, background .15s;
}
.ob-buyer-pick:hover{ border-color:#f59e0b; transform: translateY(-2px); }
.ob-buyer-pick.is-selected{
  border-color:#f59e0b;
  background:linear-gradient(180deg, #fff7e0, #fff);
  box-shadow: 0 8px 20px -10px rgba(245,158,11,.4);
}
.ob-buyer-emoji{ font-size:2.4rem; line-height:1; }
.ob-buyer-pick strong{ font-size:1.05rem; color:#2d2419; }
.ob-buyer-sub{ font-size:.85rem; color:#5a4a3a; }
.ob-buyer-price{
  margin-top:.35rem; font-size:.78rem; color:#c3771a; font-weight:700;
  background:#fff7e6; padding:.2rem .55rem; border-radius:99px;
}

.ob-tier-foot{
  font-size:.84rem; color:#7a6a5a; font-style:italic;
  text-align:center; margin:.6rem 0 1rem;
}

/* Tier eyebrow chips inside individual flows */
.ob-tier-tag-visitor{ background:#dbeafe !important; color:#1e3a8a !important; }
.ob-tier-tag-teacher{ background:#ede9fe !important; color:#5b21b6 !important; }

/* ==== PLAN PICKER (visitor + teacher flows) ==== */
.ob-plan-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:.7rem;
  margin-bottom:1.2rem;
}
.ob-plan-grid-2{ grid-template-columns: repeat(2, 1fr); }
.ob-plan-card{
  appearance:none; border:none;
  background:#fff;
  border:2px solid #e3d6c2;
  border-radius:14px;
  padding:1rem 1rem .9rem;
  text-align:left;
  cursor:pointer;
  position:relative;
  transition: border-color .15s, background .15s, transform .12s;
  font-family:inherit;
}
.ob-plan-card:hover{ border-color:#ff9800; transform: translateY(-2px); }
.ob-plan-card.is-selected{
  border-color:#ff9800;
  background:linear-gradient(180deg, #fff5d6, #fff);
  box-shadow: 0 8px 20px -10px rgba(255,152,0,.4);
}
.ob-plan-tag{
  display:inline-block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:800; color:#c3771a; background:#fff7e6;
  padding:.15rem .5rem; border-radius:99px;
  margin-bottom:.45rem;
}
.ob-plan-card h3{ margin:.1rem 0 .35rem; font-size:1.1rem; color:#2d2419; }
.ob-plan-price{
  font-size:1.6rem; font-weight:900; color:#c3771a; line-height:1;
}
.ob-plan-price span{ font-size:.85rem; color:#7a6a5a; font-weight:600; margin-left:.15rem; }
.ob-plan-meta{ font-size:.78rem; color:#7a6a5a; margin-top:.25rem; }
.ob-plan-check{
  position:absolute; top:.65rem; right:.7rem;
  width:24px; height:24px; border-radius:50%;
  background:#ff9800; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.85rem;
}

/* ==== PAYMENT GRID ==== */
.ob-pay-h{
  margin:.4rem 0 .55rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#7a6a5a;
}
.ob-pay-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:.55rem;
  margin-bottom:1.2rem;
}
.ob-pay-card{
  appearance:none; border:none;
  background:#fff;
  border:2px solid #e3d6c2; border-radius:12px;
  padding:.7rem .8rem .55rem;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  position:relative;
  display:flex; flex-direction:column; gap:.15rem;
  transition: border-color .15s, transform .12s;
}
.ob-pay-card:hover{ border-color:#ff9800; transform: translateY(-1px); }
.ob-pay-card.is-selected{
  border-color:#ff9800;
  background:#fff7e6;
}
.ob-pay-emoji{ font-size:1.6rem; line-height:1; }
.ob-pay-card strong{ font-size:.9rem; color:#2d2419; }
.ob-pay-sub{ font-size:.74rem; color:#7a6a5a; }
.ob-pay-card .ob-plan-check{ top:.45rem; right:.5rem; width:20px; height:20px; font-size:.75rem; }

/* ==== TOTAL SUMMARY ==== */
.ob-summary{
  background:#1a1a1a; color:#fff;
  padding:.85rem 1.1rem;
  border-radius:12px;
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
}
.ob-summary strong{ color:#ffd24a; }
.ob-summary-price{ font-size:1.4rem; font-weight:900; color:#ffd24a; }
.ob-summary-meta{ font-size:.85rem; color:#bcbcbc; margin-left:auto; }

/* ==== WELCOME / RECEIPT SCREEN ==== */
.ob-welcome-card{
  background:linear-gradient(180deg, #fffdf6, #fff5d6);
  border:3px double #c3771a;
  border-radius:18px;
  padding:1.5rem 1.6rem 1.3rem;
}
.ob-welcome-emoji{ font-size:3rem; line-height:1; text-align:center; }
.ob-welcome-card h3{ text-align:center; margin:.4rem 0 .5rem; color:#5a3000; }
.ob-welcome-card p{ color:#3d2f1a; line-height:1.55; }
.ob-welcome-creds{
  background:#fff; border:1px dashed #d9bf85; border-radius:10px;
  padding:.7rem .9rem; margin: .9rem 0;
  font-size:.92rem; color:#3d2f1a; line-height:1.7;
}
.ob-welcome-creds code{ background:#fff7e6; padding:.1rem .4rem; border-radius:4px; font-weight:700; }
.ob-welcome-card h4{ margin:.9rem 0 .4rem; font-size:1rem; color:#5a3000; }
.ob-welcome-list{ margin:0; padding-left:1.3rem; line-height:1.8; }
.ob-welcome-cta{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:1.2rem; }

/* ==== Responsive ==== */
@media (max-width: 1180px){
  .ob-tier-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .ob-tier-grid{ grid-template-columns: 1fr; }
  .ob-tier-card{ min-height: auto; }
  .ob-buyer-toggle{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .ob-plan-grid, .ob-plan-grid-2{ grid-template-columns: 1fr; }
  .ob-pay-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ==== SCHOOL QUOTE TABLE — per-student breakdown ==== */
.ob-quote-box{
  background:linear-gradient(135deg, #fff5d6, #ffe7c0);
  border: 2px solid #f3c66a;
  border-radius:14px;
  padding:1rem 1.1rem;
}
.ob-quote-h{
  margin:0 0 .55rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#7a5a2a;
}
.ob-quote-table{
  width:100%; border-collapse:collapse;
  margin-bottom:.7rem;
}
.ob-quote-table td{
  padding:.45rem .55rem;
  font-size:.9rem; color:#3d2f1a;
  border-bottom: 1px dashed rgba(195, 119, 26, .25);
}
.ob-quote-table td.num{ text-align:right; white-space:nowrap; }
.ob-quote-discount td{ color:#2e7d32; }
.ob-quote-discount td.num strong{ color:#2e7d32; }
.ob-quote-hint td{ color:#7a5a2a; font-style:italic; font-size:.85rem; border:none; }
.ob-quote-total td{
  padding-top:.7rem; border-bottom:none; font-size:1rem; color:#1a1a1a;
}
.ob-quote-grand{ color:#c3771a; font-size:1.3rem; }

.ob-discount-tag{
  display:inline-block;
  background:#4caf50; color:#fff;
  font-size:.7rem; font-weight:700;
  padding:.18rem .55rem; border-radius:99px;
  letter-spacing:.04em;
}

.ob-rate-card{
  background:rgba(255,255,255,.6);
  border:1px dashed #d9bf85; border-radius:10px;
  padding:.6rem .85rem;
  font-size:.83rem; line-height:1.55;
  color:#3d2f1a;
}
.ob-rate-card strong:first-child{
  display:block;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:#7a5a2a; margin-bottom:.35rem;
}
.ob-rate-card ul{ margin:0; padding-left:1rem; }
.ob-rate-card li{ margin-bottom:.15rem; }
.ob-rate-card .ob-rate-bulk{
  margin-top:.3rem; padding-top:.3rem; border-top:1px dashed #d9bf85;
  color:#2e7d32; font-weight:600;
}

/* =========================================================
   TEACHER LESSON-PLAN LIBRARY (.lib-*)
   Browse: grade → term → subject → topic → plan
   Plan-detail view formatted to print as a teacher document.
   ========================================================= */
.lib-page{ max-width: 1040px; margin: 0 auto; padding: 1rem 1.2rem 4rem; }

.lib-crumb{
  font-size:.85rem; color:#5a4a3a; margin: .6rem 0 1rem;
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem;
}
.lib-crumb a{ color:#c3771a; text-decoration:none; font-weight:600; }
.lib-crumb a:hover{ text-decoration:underline; }
.lib-crumb span{ color:#7a6a5a; }
.lib-crumb strong{ color:#2d2419; }

.lib-hero{ margin-bottom:1.4rem; }
.lib-hero h1{ margin:.4rem 0 .4rem; font-size:1.7rem; color:#2d2419; }
.lib-stat{
  background:#fff7e6; border:1px dashed #f1dba8; border-radius:10px;
  padding:.55rem .9rem; display:inline-block;
  font-size:.92rem; color:#5a3000;
}

.lib-section-h{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:#7a6a5a; margin: 1.2rem 0 .6rem;
}

/* Grade chooser */
.lib-grade-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:.8rem;
}
.lib-grade-card{
  display:flex; align-items:center; gap:1rem;
  background:#fff; border:2px solid #e3d6c2; border-radius:14px;
  padding:1rem 1.2rem;
  text-decoration:none; color:inherit;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.lib-grade-card:hover{
  transform: translateY(-2px); border-color:#ff9800;
  box-shadow: 0 10px 22px -12px rgba(255,152,0,.4);
}
.lib-grade-num{
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(135deg, #ff9800, #c3771a);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--f-display, system-ui);
  font-weight:900; font-size:1.4rem;
  flex-shrink:0;
}
.lib-grade-body{ flex:1; display:flex; flex-direction:column; gap:.15rem; }
.lib-grade-body strong{ font-size:1.1rem; color:#2d2419; }
.lib-grade-meta{ font-size:.82rem; color:#5a4a3a; }
.lib-grade-arrow{ font-size:1.4rem; color:#c3771a; font-weight:900; }

/* Term chooser */
.lib-term-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:.9rem;
}
.lib-term-card{
  background:#fff; border:2px solid #e3d6c2; border-radius:14px;
  padding:1.1rem 1.2rem;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:.4rem;
  transition: transform .12s, border-color .12s;
}
.lib-term-card:hover{ transform: translateY(-2px); border-color:#ff9800; }
.lib-term-card h2{ margin:0; font-size:1.2rem; color:#2d2419; }
.lib-term-card p{ margin:0; font-size:.88rem; color:#5a4a3a; }
.lib-term-card ul{
  margin:.4rem 0 0; padding-left:1.2rem; font-size:.85rem; color:#5a4a3a; line-height:1.7;
}
.lib-term-card .lib-grade-arrow{ align-self:flex-end; font-size:.95rem; color:#c3771a; }
.lib-term-term1{ background:linear-gradient(180deg, #fffaf0, #fff); }
.lib-term-term2{ background:linear-gradient(180deg, #f0fdf4, #fff); }
.lib-term-term3{ background:linear-gradient(180deg, #f0f9ff, #fff); }

/* Subject chooser */
.lib-subject-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:.8rem;
}
.lib-subject-card{
  background:#fff; border:2px solid #e3d6c2; border-radius:14px;
  padding:1rem 1.1rem;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  text-align:center;
  transition: transform .12s, border-color .12s;
}
.lib-subject-card:hover{ transform: translateY(-2px); border-color:#ff9800; }
.lib-subject-emoji{ font-size:2.4rem; line-height:1; }
.lib-subject-card strong{ font-size:1rem; color:#2d2419; }
.lib-subject-card span{ font-size:.8rem; color:#7a6a5a; }

/* Topic list with plan rows */
.lib-topic-list{ display:flex; flex-direction:column; gap:.6rem; }
.lib-topic{
  background:#fff; border:2px solid #e3d6c2; border-radius:12px;
  overflow:hidden;
}
.lib-topic[open]{ border-color:#ff9800; }
.lib-topic > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.7rem;
  padding:.75rem 1rem;
  background:#fffaf0;
  -webkit-tap-highlight-color: transparent;
}
.lib-topic > summary::-webkit-details-marker{ display:none; }
.lib-topic[open] > summary{ background:#fff7e6; }
.lib-topic-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:#ff9800; color:#fff; font-weight:700;
}
.lib-topic > summary > strong{ flex:1; font-size:1rem; color:#2d2419; }
.lib-topic-tag{
  font-size:.78rem; font-weight:600;
  background:#fff; color:#5a4a3a;
  padding:.18rem .6rem; border-radius:99px;
  border:1px solid #e3d6c2;
}
.lib-topic[open] .lib-topic-tag{ background:#dcfce7; color:#166534; border-color:#86efac; }

.lib-plan-list{ list-style:none; padding:.4rem .8rem .8rem; margin:0; display:flex; flex-direction:column; gap:.3rem; }
.lib-plan-row{
  display:grid; grid-template-columns: auto 1fr auto auto;
  gap:.7rem; align-items:center;
  padding:.55rem .8rem;
  background:#fff; border:1px solid #f3e8d3; border-radius:8px;
  text-decoration:none; color:inherit;
  transition: background .12s, border-color .12s;
}
.lib-plan-row:hover{ background:#fffaf0; border-color:#ff9800; }
.lib-plan-num{
  font-family: ui-monospace, monospace;
  font-size:.78rem; font-weight:700; color:#c3771a;
  background:#fff7e6; padding:.2rem .55rem; border-radius:6px;
}
.lib-plan-title{ font-weight:600; color:#2d2419; }
.lib-plan-meta{ font-size:.78rem; color:#7a6a5a; }
.lib-plan-arrow{ color:#c3771a; font-weight:700; }
.lib-coming-soon{
  padding: .7rem 1.1rem 1rem;
  font-size:.88rem; color:#7a5a2a; line-height:1.55;
}

/* Plan detail view (also styled for print) */
.lib-plan-page{ max-width: 920px; margin: 0 auto; padding: 1rem 1.2rem 4rem; }
.lib-plan-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-bottom:1rem;
}

/* Auto-generator form */
.lib-gen-form{
  background:#fff;
  border:2px solid #009b3a;
  border-radius:12px;
  padding:1.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.lib-gen-row{ display:flex; flex-direction:column; gap:.3rem; }
.lib-gen-row > span:first-child{ font-weight:600; color:#1a1a1a; font-size:.95rem; }
.lib-gen-row input, .lib-gen-row select, .lib-gen-row textarea{
  padding:.6rem .8rem; border:1px solid #ccc; border-radius:6px;
  font-size:1rem; font-family:inherit; background:#fafafa;
}
.lib-gen-row input:focus, .lib-gen-row select:focus, .lib-gen-row textarea:focus{
  outline:none; border-color:#009b3a; background:#fff;
  box-shadow:0 0 0 3px rgba(0,155,58,0.15);
}
.lib-gen-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width: 640px){
  .lib-gen-row-2{ grid-template-columns:1fr; }
}

.lib-plan-doc{
  background:#fff;
  border:2px solid #2d2419;
  border-radius:12px;
  padding:1.6rem 2rem;
  font-family: var(--f-display, "Bricolage Grotesque", system-ui, sans-serif);
  color:#1a1a1a;
  line-height:1.55;
}
.lib-plan-head .lib-plan-cover table{
  width:100%; border-collapse:collapse;
  margin-bottom:1.2rem;
}
.lib-plan-cover th, .lib-plan-cover td{
  border:1px solid #c3771a;
  padding:.5rem .7rem;
  font-size:.92rem;
  text-align:left;
  vertical-align:top;
}
.lib-plan-cover th{
  background:#fff7e6;
  color:#5a3000;
  width:18%;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lib-plan-cover td{ background:#fff; }

.lib-plan-section{
  margin: 1.2rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #c3771a;
}
.lib-plan-section:last-child{ border-bottom:none; }
.lib-plan-section h2{
  margin: 0 0 .55rem;
  font-size: 1.1rem;
  color:#5a3000;
  border-left:4px solid #ff9800;
  padding-left:.6rem;
}
.lib-plan-section p, .lib-plan-section li{
  font-size:.95rem; line-height:1.65;
}
.lib-plan-section ul{ margin:0 0 .4rem 1.2rem; }

.lib-plan-curr{
  width:100%; border-collapse: collapse;
}
.lib-plan-curr th, .lib-plan-curr td{
  border:1px solid #d9bf85; padding:.45rem .7rem;
  text-align:left; font-size:.9rem; vertical-align:top;
}
.lib-plan-curr th{
  background:#fff7e6; color:#5a3000;
  width:14%; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
}

.lib-vocab-pill{
  display:inline-block;
  background:#fff7e6; color:#c3771a;
  padding:.2rem .6rem; border-radius:99px;
  font-size:.85rem; font-weight:600;
  margin: 0 .2rem .2rem 0;
  border:1px solid #f1dba8;
}

/* 5E phases — colour-coded blocks */
.lib-5e{
  background:#fffaf0;
  border-left:4px solid #ff9800;
  border-radius:0 8px 8px 0;
  padding:.7rem .9rem;
  margin-bottom:.55rem;
}
.lib-5e h3{
  display:flex; align-items:center; gap:.55rem;
  margin:0 0 .35rem;
  font-size:1rem; color:#5a3000;
}
.lib-5e-label{
  background:#ff9800; color:#fff;
  padding:.15rem .55rem; border-radius:4px;
  font-size:.85rem; letter-spacing:.04em;
}
.lib-5e-time{
  background:#fff; color:#c3771a;
  padding:.1rem .45rem; border-radius:4px;
  font-size:.78rem; font-weight:700;
  border:1px solid #f1dba8;
}
.lib-5e p{ margin:0; font-size:.92rem; line-height:1.65; }
.lib-5e-engage   { border-left-color:#ef4444; } .lib-5e-engage   .lib-5e-label{ background:#ef4444; }
.lib-5e-explore  { border-left-color:#f59e0b; } .lib-5e-explore  .lib-5e-label{ background:#f59e0b; }
.lib-5e-explain  { border-left-color:#16a34a; } .lib-5e-explain  .lib-5e-label{ background:#16a34a; }
.lib-5e-elaborate{ border-left-color:#2563eb; } .lib-5e-elaborate.lib-5e-label{ background:#2563eb; }
.lib-5e-evaluate { border-left-color:#7c3aed; } .lib-5e-evaluate .lib-5e-label{ background:#7c3aed; }

.lib-plan-diff{
  width:100%; border-collapse:collapse;
}
.lib-plan-diff th, .lib-plan-diff td{
  border:1px solid #d9bf85; padding:.45rem .7rem;
  text-align:left; font-size:.9rem; vertical-align:top;
}
.lib-plan-diff th{
  background:#fff7e6; color:#5a3000;
  width:20%; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
}

.lib-plan-reflection{
  background:#fffaf0;
  border:1px dashed #c3771a;
  border-radius:8px;
  padding:.9rem 1rem;
  border-bottom: none;
}
.lib-plan-blank{
  border-bottom: 1px solid #d9bf85;
  height: 1.6rem;
  margin: .5rem 0;
}
.lib-plan-foot{
  margin-top: 1rem;
  text-align:center;
  font-size:.72rem;
  color:#7a6a5a;
  letter-spacing:.06em;
  font-family: ui-monospace, monospace;
}

/* @media print — clean teacher printout */
@media print {
  body, html{ background:#fff !important; }
  .lc-app-shell, .lc-nav, .lc-bottom-nav, #dykFab, #dykPopup,
  .lc-global-banner, .chess-back, #lcReadIndicator,
  .lc-footer, .lc-secondary-nav, .lc-primary-nav,
  .lib-plan-toolbar, .lib-crumb{
    display:none !important;
  }
  .lib-plan-page{ padding: 0; max-width: none; }
  .lib-plan-doc{
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .lib-5e, .lib-plan-curr, .lib-plan-cover table, .lib-plan-diff,
  .lib-plan-reflection, .lib-vocab-pill, .lib-5e-label, .lib-5e-time{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .lib-plan-section{ page-break-inside: avoid; }
}

@media (max-width: 640px){
  .lib-plan-doc{ padding: 1rem 1.1rem; }
  .lib-plan-cover th, .lib-plan-cover td{ font-size:.82rem; padding:.35rem .5rem; }
  .lib-plan-cover th{ width:auto; }
  .lib-plan-row{ grid-template-columns: auto 1fr auto; gap:.5rem; }
  .lib-plan-meta{ display:none; }
}

/* ==========================================================
   v328 — Daily Jamaica widget
   Rotates ONE hero / parish / cultural card per day on the
   Junior Daily and PEP pages. Cards are bordered in flag
   colours (gold / green / black-ink) to ground the design
   in Jamaica's identity without going kitsch.
   ========================================================== */
.dj-section{
  margin: 0 0 1.5rem;
}
.dj-head{
  margin-bottom: .8rem;
}
.dj-head .eyebrow{
  background: linear-gradient(90deg, #009b3a, #fcd116 50%, #1a1a1a);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: .04em;
}
.dj-head h2{
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  margin: .15rem 0 .25rem;
  line-height: 1.25;
}
.dj-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}
.dj-card{
  background: #fff;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
  padding: .9rem 1rem 1rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
  display: flex;
  flex-direction: column;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}
.dj-card::before{
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
}
.dj-card--hero::before    { background: #009b3a; }   /* JM green */
.dj-card--parish::before  { background: #fcd116; }   /* JM gold */
.dj-card--culture::before { background: #1a1a1a; }   /* JM black */

.dj-card-head{
  margin: .15rem 0 .35rem;
}
.dj-pill{
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #1f2937;
}
.dj-card--hero    .dj-pill{ background: rgba(0,155,58,.12);  color:#047a2d; }
.dj-card--parish  .dj-pill{ background: rgba(252,209,22,.18);color:#8a6500; }
.dj-card--culture .dj-pill{ background: rgba(26,26,26,.08);  color:#1a1a1a; }

.dj-card-body{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
}
.dj-icon{
  font-size: 1.9rem;
  line-height: 1;
}
.dj-card h3{
  font-size: 1.05rem;
  margin: .15rem 0 .15rem;
  line-height: 1.2;
}
.dj-meta{
  font-size: .82rem;
  color: #475569;
  margin: 0 0 .25rem;
}
.dj-card p{
  font-size: .9rem;
  line-height: 1.45;
  margin: .15rem 0;
  color: #334155;
}
.dj-card em{ color:#1f2937; }

@media (max-width: 880px){
  .dj-grid{ grid-template-columns: 1fr; }
  .dj-card{ min-height: 0; }
}

/* ==========================================================
   v329 — Weekly Challenge (devotion prize game)
   - Home banner that links to /#/weekly-challenge
   - The challenge page itself
   ========================================================== */

/* Home banner */
.bh-weekly-challenge{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1b69 50%, #fcd116 100%);
  color: #fff;
  padding: 1.1rem 1.4rem;
  border-radius: 22px;
  margin: 1rem 0 1.4rem;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(45, 27, 105, .35);
  border: 3px solid #fcd116;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.bh-weekly-challenge:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(45, 27, 105, .45);
}
.bh-weekly-challenge::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 40%, rgba(252,209,22,.3) 0%, transparent 60%);
  pointer-events: none;
}
.bh-wc-burst{
  font-size: 2.6rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
  position: relative;
  z-index: 1;
}
.bh-wc-body{
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: relative;
  z-index: 1;
}
.bh-wc-eyebrow{
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #fcd116;
}
.bh-wc-title{
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.1;
}
.bh-wc-sub{
  font-size: .88rem;
  opacity: .95;
  line-height: 1.35;
}
.bh-wc-cta{
  background: #fcd116;
  color: #1a1a1a;
  font-weight: 900;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .88rem;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

@media (max-width: 640px){
  .bh-weekly-challenge{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .bh-wc-cta{ grid-column: 1 / -1; text-align: center; }
}

/* Challenge page */
.wc-page{ font-family: var(--f-body, system-ui, sans-serif); }
.wc-hero{
  text-align: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1b69 50%, #009b3a 100%);
  color: #fff;
  padding: 1.6rem 1.2rem;
  border-radius: 22px;
  margin-bottom: 1.2rem;
  box-shadow: 0 14px 36px rgba(45, 27, 105, .35);
}
.wc-burst{
  font-size: 3.4rem;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.4));
  margin-bottom: .3rem;
}
.wc-eyebrow{
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #fcd116;
}
.wc-hero h1{
  font-family: var(--f-display, system-ui);
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  margin: .3rem 0 .4rem;
}
.wc-hero p{ color: rgba(255,255,255,.85); margin: 0 0 .8rem; }
.wc-pill{
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
}
.wc-pill--open  { background: rgba(0,155,58,.85); color: #fff; }
.wc-pill--closed{ background: rgba(255,255,255,.16); color: #fff; }

.wc-card{
  background: #fff;
  border-radius: 22px;
  padding: 1.4rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  border: 2px solid #e5e7eb;
  margin-bottom: 1.2rem;
}
.wc-q{
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.4;
  color: #1f2937;
  margin: 0 0 1rem;
}
.wc-opts{
  display: grid;
  gap: .65rem;
  margin-bottom: 1rem;
}
.wc-opt{
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  transition: all .12s;
}
.wc-opt:hover{
  border-color: #2d1b69;
  background: #f9fafb;
  transform: translateX(2px);
}
.wc-opt:disabled{ opacity: .5; cursor: not-allowed; transform: none; }
.wc-opt-letter{
  background: #2d1b69;
  color: #fcd116;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex-shrink: 0;
}
.wc-opt--chosen{
  border-color: #fcd116;
  background: #fef3c7;
}
.wc-warn{ font-size: .85rem; margin: .8rem 0 0; }

.wc-feedback{ margin-top: 1rem; }
.wc-feedback--err{ color: #dc2626; font-weight: 700; }

.wc-result{
  text-align: center;
  padding: 1.4rem .8rem;
  border-radius: 16px;
}
.wc-result--win {
  background: linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%);
  border: 2px solid #fcd116;
}
.wc-result--lose{
  background: #f3f4f6;
  border: 2px solid #d1d5db;
}
.wc-result-emoji{ font-size: 3rem; margin-bottom: .3rem; }
.wc-result h2{
  font-family: var(--f-display, system-ui);
  font-size: clamp(1.3rem, 3.5vw, 1.6rem);
  margin: .3rem 0 .5rem;
  color: #1f2937;
}
.wc-bigtext{
  font-size: 1.05rem;
  margin: .4rem 0;
  color: #1f2937;
}
.wc-bigtext strong{ color: #059669; font-size: 1.2em; }
.wc-winner-line{
  background: #fcd116;
  color: #1a1a1a;
  font-weight: 800;
  padding: .6rem 1rem;
  border-radius: 12px;
  margin: .8rem 0 .4rem;
  display: inline-block;
}
.wc-explain{
  font-size: .9rem;
  color: #475569;
  margin: .8rem 0 0;
  padding: .7rem 1rem;
  background: rgba(255,255,255,.7);
  border-radius: 10px;
  text-align: left;
}

.wc-closed{ text-align: center; padding: 1rem; }
.wc-closed h2{
  font-family: var(--f-display, system-ui);
  margin: .3rem 0 .5rem;
}

.wc-howto{
  background: #f9fafb;
  border-radius: 16px;
  padding: 1rem 1.4rem;
  border: 1px solid #e5e7eb;
}
.wc-howto h3{
  margin: 0 0 .6rem;
  font-size: 1rem;
  color: #1f2937;
}
.wc-howto ol{
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.7;
  color: #374151;
  font-size: .92rem;
}

/* Admin winners view (in master console) */
.wc-winners-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .8rem;
  margin: 1rem 0;
}
.wc-winners-card{
  background: linear-gradient(135deg, #fff 0%, #fef3c7 100%);
  border: 2px solid #fcd116;
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
}
.wc-winners-card--empty{
  background: #f9fafb;
  border-color: #e5e7eb;
  opacity: .7;
}
.wc-winners-grade{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #2d1b69;
}
.wc-winners-name{
  font-size: 1.15rem;
  font-weight: 900;
  color: #1f2937;
  margin: .3rem 0;
}
.wc-winners-time{
  font-size: .82rem;
  color: #475569;
}

/* ==========================================================
   v330 — Bug Report (modal + buttons)
   ========================================================== */
.ttb-bug{
  background: transparent;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}
.ttb-bug:hover{ background: #fef2f2; }

.lc-bug-modal-back{
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  display: grid;
  place-items: center;
  z-index: 9999;
  padding: 1rem;
}
.lc-bug-modal{
  background: #fff;
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
  border: 3px solid #fcd116;
}
.lc-bug-modal header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.lc-bug-modal h2{
  margin: 0;
  font-size: 1.3rem;
  color: #1a1a1a;
}
.lc-bug-close{
  background: transparent;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: #6b7280;
  padding: .25rem .5rem;
}
.lc-bug-close:hover{ color: #1a1a1a; }
.lc-bug-modal label{
  display: block;
  margin-bottom: .8rem;
  font-weight: 600;
  font-size: .9rem;
  color: #1f2937;
}
.lc-bug-modal label > span{ display: block; margin-bottom: .3rem; }
.lc-bug-modal label small{ font-weight: 400; color: #6b7280; }
.lc-bug-modal textarea,
.lc-bug-modal input,
.lc-bug-modal select{
  width: 100%;
  padding: .6rem .8rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: .95rem;
  font-family: inherit;
  resize: vertical;
}
.lc-bug-modal textarea:focus,
.lc-bug-modal input:focus,
.lc-bug-modal select:focus{
  outline: none;
  border-color: #009b3a;
}
.lc-bug-context{
  background: #f9fafb;
  padding: .7rem 1rem;
  border-radius: 10px;
  font-size: .82rem;
  line-height: 1.5;
  margin: .8rem 0;
}
.lc-bug-actions{
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.lc-bug-err{
  background: #fef2f2;
  color: #991b1b;
  padding: .8rem 1rem;
  border-radius: 10px;
  margin: .8rem 0 0;
  font-size: .88rem;
}
.lc-bug-ok{
  background: linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%);
  border: 2px solid #fcd116;
  border-radius: 14px;
  padding: 1.2rem;
  margin-top: .8rem;
  text-align: center;
}
.lc-bug-ok h3{
  font-family: var(--f-display, system-ui);
  margin: .3rem 0 .5rem;
  color: #1f2937;
}
@media (max-width: 640px){
  .lc-bug-modal{ padding: 1rem 1.1rem; border-radius: 14px; }
}

/* Master admin "Bugs" tab styles */
.bugs-grid{
  display: grid;
  gap: .9rem;
  margin: 1rem 0;
}
.bug-card{
  background: #fff;
  border: 2px solid #e5e7eb;
  border-left-width: 6px;
  border-radius: 12px;
  padding: 1rem 1.2rem;
}
.bug-card.severity-urgent { border-left-color: #dc2626; }
.bug-card.severity-medium { border-left-color: #f59e0b; }
.bug-card.severity-low    { border-left-color: #6b7280; }
.bug-card.status-closed   { opacity: .55; }
.bug-card-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .5rem;
}
.bug-card-meta{
  font-size: .82rem;
  color: #6b7280;
}
.bug-card-desc{
  font-size: .95rem;
  line-height: 1.55;
  color: #1f2937;
  margin: .5rem 0;
  white-space: pre-wrap;
}
.bug-card-actions{
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}
.bug-card-actions a, .bug-card-actions button{
  font-size: .82rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #fff;
}
.bug-card-actions a.wa{ background: #25D366; color: #fff; border-color: #25D366; }
.bug-card-actions button.close-it{ background: #009b3a; color: #fff; border-color: #009b3a; }
.bug-card-actions button.reopen{ background: #fef3c7; color: #92400e; }