/* Florentis Kids Lessons CSS v3 - Clean rebuild */


  /* Just layout tweaks – we don’t touch the main placement styles */

	  .fl-placement-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}

.fl-footer-center {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.fl-nav-btn {
  background: white;
  border: none;
  padding: 0.45rem 1.25rem;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
}

.fl-nav-btn:hover {
  background: #f4f4f4;
}

.fl-slide-counter {
  font-size: 0.85rem;
  opacity: 0.75;
}

	  
.fl-placement-header,
.fl-placement-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.75rem;
}

.fl-placement-footer{
  margin-top:.75rem;
}

.fl-placement-logo img{
  height:40px;
  width:auto;
  display:block;
}

.fl-placement-stars iframe{
  max-width:100%;
}

/* Header container for kids lessons */
.fl-placement-demo.fl-kids-lesson .fl-placement-header{
  margin-bottom:1.25rem;
}

/* Top row: logo + lesson title + slide counter */
.fl-placement-demo.fl-kids-lesson .fl-placement-header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-logo img{
  height:40px;
  width:auto;
}

/* Teacher-notes panel – always above scene content */
.fl-placement-demo.fl-kids-lesson .fl-kids-teacher-notes {
  display: none;
  position: relative;
  z-index: 999;
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.85rem;
  background: #fffdf6;
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  font-size: 0.9rem;
  line-height: 1.45;
  color: #374151;
  white-space: pre-line; /* keep your manual line breaks */
}

.fl-placement-demo.fl-kids-lesson .fl-kids-teacher-notes.is-visible {
  display: block;
}

	/* Bottom header row: stars + teacher-notes button on the far right */
.fl-placement-demo.fl-kids-lesson .fl-placement-header-bottom {
  display: flex;
  justify-content: flex-end;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-stars-row {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space between stars and 🎓 button */
}

/* Teacher-notes toggle styling in header */
.fl-placement-demo.fl-kids-lesson .fl-placement-header .fl-kids-teacher-toggle {
  border: none;
  background: #f1e5da;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-header .fl-kids-teacher-toggle:hover,
.fl-placement-demo.fl-kids-lesson .fl-placement-header .fl-kids-teacher-toggle:focus-visible {
  background: #f4d488;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
  outline: none;
}


	/* Slide jump dropdown (teacher slide navigator) */
.fl-placement-demo.fl-kids-lesson .fl-kids-jump {
  position: relative;
  margin-left: 0.75rem;
  font-size: 0.85rem;
}

.fl-kids-jump-toggle {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  line-height: 1.2;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}

.fl-kids-jump-toggle:hover,
.fl-kids-jump-toggle:focus-visible {
  background: #f4d488;
  outline: none;
}

/* The dropdown panel */
.fl-kids-jump-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16);
  padding: 0.25rem;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 60;
}

/* Individual slide buttons in the panel */
.fl-kids-jump-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.fl-kids-jump-item:hover {
  background: #f1f5f9;
}

.fl-kids-jump-item.is-active {
  background: rgba(244, 212, 136, 0.45);
  font-weight: 600;
}

	/* Make all kids primary buttons share the same pill styling */
.fl-kids-btn,
.fl-kids-match-check,
.fl-mcq-send,
.fl-kids-check-group {
  border-radius: 999px;
  border: none;
  font-weight: 600;
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  /* whatever background/text colours you’re using on the other pills */
}

/* If .fl-kids-match-check had its own boxy style before, neutralise it */
.fl-kids-match-check {
  background: inherit;
  color: inherit;
}

	/* Title slide container */
.fl-title-slide {
  width: 100%;
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(180deg, #f1e5da 0%, #ffffff 100%);
  border-radius: 22px;
}

.fl-title-slide h1 {
  font-size: 48px;
  color: #27537a;
  margin-bottom: 10px;
  font-weight: 700;
}

.fl-title-slide h2 {
  font-size: 26px;
  color: #596c10;
  margin-bottom: 30px;
}

.fl-title-slide img {
  max-width: 620px;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* ===============================
   TITLE SLIDE – FULLSCREEN TWEAKS
   =============================== */

/* Make the title card bigger and better centered in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-title-slide {
  max-width: 980px;
  margin: 40px auto 40px;
  padding: 48px 32px 64px;
}

/* Larger headings in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-title-slide h1 {
  font-size: 2.5rem; /* ~51px */
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-title-slide h2 {
  font-size: 2rem;   /* ~32px */
}

/* Make the hero image wider in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-title-slide img {
  max-width: 860px;
  width: 100%;
  border-radius: 20px;
}

/* -------------------------------------------------------
   TALK COVER SCREEN
   ------------------------------------------------------- */

.fl-kids-talk-cover {
  width: 100%;
  height: 100%;
  padding: 2rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fl-kids-talk-cover-inner {
  width: 90%;
  max-width: 940px;
  background: rgba(255,255,255,0.9);
  border-radius: 28px;
  padding: 2rem 3rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------
   Title block
-------------------------------------------- */

.fl-kids-talk-cover-titleblock {
  margin-bottom: 2rem;
  text-align: left;
}

.fl-kids-talk-main-title {
  font-size: 3rem;
  font-weight: 700;
  color: #596c10; /* Florentis green */
  margin: 0 0 .3rem 0;
}

.fl-kids-talk-subtitle {
  font-size: 1.6rem;
  font-weight: 400;
  color: #172830; /* deep navy */
  margin: 0;
}

/* --------------------------------------------
   Panel box (names, avatar selection, start)
-------------------------------------------- */

.fl-kids-talk-cover-panel {
  background: #f1e5da; /* soft cream */
  padding: 1.5rem 2rem;
  border-radius: 20px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

/* --------------------------------------------
   Name rows
-------------------------------------------- */

.fl-kids-talk-row {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
}

.fl-kids-talk-label {
  width: 110px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #172830;
}

.fl-kids-talk-input {
  flex: 1;
  padding: 0.6rem 0.9rem;
  font-size: 1.1rem;
  border: 2px solid #c7c79d;
  border-radius: 12px;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s ease;
}

.fl-kids-talk-input:focus {
  border-color: #27537a;
}

/* --------------------------------------------
   Avatar selection
-------------------------------------------- */

.fl-kids-talk-avatars-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #172830;
  margin: 1rem 0 .6rem 0;
}

.fl-kids-talk-avatars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.fl-kids-talk-avatar-btn {
  border: none;
  background: #ffffff;
  padding: 0.8rem 0.6rem;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.fl-kids-talk-avatar-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.fl-kids-talk-avatar-btn.is-selected {
  box-shadow: 0 0 0 3px #27537a inset;
  transform: translateY(-2px);
}

.fl-kids-talk-avatar-img img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 50%;
  background: #f4d488;
  padding: 8px;
}

.fl-kids-talk-avatar-text {
  margin-top: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: #172830;
}

/* --------------------------------------------
   Start button
-------------------------------------------- */

.fl-kids-talk-start-wrap {
  text-align: right;
  margin-top: 0.5rem;
}

.fl-kids-talk-start-btn {
  background: #596c10; /* green */
  color: #ffffff;
  padding: 0.8rem 2rem;
  border-radius: 16px;
  border: none;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  transition: background 0.2s ease, transform 0.15s ease;
}

.fl-kids-talk-start-btn:hover {
  background: #27537a;
  transform: translateY(-2px);
}

.fl-kids-talk-start-btn:active {
  transform: translateY(1px);
}

							  
/* ---------- WARM-UP BOARD (refined) ---------- */

.fl-placement-demo.fl-kids-lesson .fl-warmup-board {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.fl-placement-demo.fl-kids-lesson .fl-warmup-board-inner {
  width: 100%;
  max-width: 1150px;
  background: radial-gradient(circle at top left, #253b2a 0, #121c16 55%, #0b1410 100%);
  border-radius: 28px;
  padding: 1.4rem 2rem 1.6rem;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.45),
    inset 0 0 0 2px rgba(255, 255, 255, 0.03);
  color: #f9fafb;
}

/* Title + prompt */

.fl-placement-demo.fl-kids-lesson .fl-warmup-board-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: #f4d488; /* warm yellow */
}

.fl-placement-demo.fl-kids-lesson .fl-warmup-board-prompt {
  margin: 0 0 1.1rem;
  font-size: 0.98rem;
  opacity: 0.9;
}

/* 3-column layout */

.fl-placement-demo.fl-kids-lesson .fl-warmup-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.fl-placement-demo.fl-kids-lesson .fl-warmup-board-col {
  background: rgba(6, 12, 9, 0.6);
  border-radius: 22px;
  padding: 0.9rem 1rem 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

/* Column headings & sentences */

.fl-placement-demo.fl-kids-lesson .fl-warmup-board-heading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.45rem;
  color: #9ac3ff; /* brighter blue for contrast */
}

.fl-placement-demo.fl-kids-lesson .fl-warmup-board-sentence {
  margin: 0 0 0.7rem;
  font-size: 1.02rem;
}

/* Blank “chalk line” */

.fl-placement-demo.fl-kids-lesson .fl-warmup-board-blank {
  display: inline-block;
  min-width: 5ch;
  padding: 0 0.25rem 0.05rem;
  border-bottom: 2px dotted rgba(248, 250, 252, 0.8);
  text-align: center;
  font-weight: 600;
}

/* Emoji choices */

.fl-placement-demo.fl-kids-lesson .fl-warmup-board-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.fl-placement-demo.fl-kids-lesson .fl-warmup-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.7);
  padding: 0.23rem 0.7rem 0.26rem;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.06s ease;
  color: #e5e7eb;
}

.fl-placement-demo.fl-kids-lesson .fl-warmup-option-emoji {
  font-size: 1.15rem;
}

.fl-placement-demo.fl-kids-lesson .fl-warmup-option-label {
  text-transform: lowercase;
}

/* Hover + selected */

.fl-placement-demo.fl-kids-lesson .fl-warmup-option-btn:hover {
  border-color: #f4d488;
  background: rgba(244, 212, 136, 0.16);
  transform: translateY(-1px);
}

.fl-placement-demo.fl-kids-lesson .fl-warmup-option-btn.is-selected {
  background: #f4d488;
  color: #111827;
  border-color: #f4d488;
}

/* Responsive: stack columns on smaller screens */

@media (max-width: 900px) {
  .fl-placement-demo.fl-kids-lesson .fl-warmup-board-inner {
    padding: 1.1rem 1.1rem 1.3rem;
  }

  .fl-placement-demo.fl-kids-lesson .fl-warmup-board-grid {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   Fact or Fiction panel (B1)
   =============================== */
/* Beige panel inside the white info card */
.fl-placement-demo.fl-kids-lesson .fl-kids-info-card .fl-fact-panel-behind {
  background: #f1e5da; /* Florentis beige */
  padding: 1.25rem 1.5rem;
  border-radius: 22px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

/* Spacing / typography inside */
.fl-placement-demo.fl-kids-lesson .fl-fact-intro {
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.fl-placement-demo.fl-kids-lesson .fl-fact-list {
  margin-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.fl-placement-demo.fl-kids-lesson .fl-fact-sentence-frames {
  border-top: 1px dashed rgba(15,23,42,0.3);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}

/* ==========================================
   VOCAB MATCH – definition + word layout
   ========================================== */

/* Make each card a vertical stack: definition → dropdown */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 0.95rem 1.15rem 1rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.45rem;           /* space between text and dropdown */
}

/* Definition text on each card */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-def {
  font-size: 1rem;
  line-height: 1.5;
  color: #172830;
}

/* Optional vocab word label (if you use item.word) */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-word {
  font-size: 0.95rem;
  font-weight: 700;
  color: #596c10;         /* Florentis green */
  margin-bottom: 0.1rem;
}

/* Wrap for the select so it doesn't hug the card edge */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-select-wrap {
  margin-top: 0.1rem;
}

/* Dropdown styling – make it feel like a pill inside the card */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-select {
  width: 100%;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  font-size: 0.95rem;
  background: #f9fafb;
}

/* Grid: 4 columns on wide screens (8 items = 2 rows) */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-grid {
  display: grid;
  gap: 1.1rem;
  margin-top: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 2 columns on medium screens */
@media (max-width: 1100px) {
  .fl-placement-demo.fl-kids-lesson .fl-kids-match-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 1 column on smaller screens */
@media (max-width: 720px) {
  .fl-placement-demo.fl-kids-lesson .fl-kids-match-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep your existing correct/incorrect borders */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card.correct {
  border: 2px solid #16a34a;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-match-card.incorrect {
  border: 2px solid #dc2626;
}

/* Outer panel for vocab match activity */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-wrapper {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(3px);
  padding: 1.25rem 1.5rem 1.5rem;
  border-radius: 24px;
  max-width: 1100px;
  margin: 1rem auto;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
							  
/* Checkmark for correct answers */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card.correct::after {
  content: "✔";
  color: #16a34a;
  font-size: 1.4rem;
  font-weight: 700;
  position: absolute;
  top: 8px;
  right: 12px;
}

/* X for incorrect answers */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card.incorrect::after {
  content: "✖";
  color: #dc2626;
  font-size: 1.4rem;
  font-weight: 700;
  position: absolute;
  top: 8px;
  right: 12px;
}

/* Ensure cards can display icons */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card {
  position: relative;
}
							  
/* Vocab match image: keep all pictures consistent */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* consistent square box */
  object-fit: cover;     /* crop wide/tall images nicely */
  border-radius: 18px;
  display: block;
}


 
							  
/* -----------------------------------------
   Random Cards Game – Explorer (more compact)
   ----------------------------------------- */

.fl-placement-demo.fl-kids-lesson .fl-explorer-wrapper {
  max-width: 860px;                           /* a bit narrower */
  margin: 0.4rem auto 0.8rem;                 /* less top/bottom margin */
  text-align: center;
  background: rgba(248, 250, 252, 0.92);      /* soft off-white panel */
  border-radius: 26px;
  padding: 0.9rem 1.2rem 1.1rem;              /* less vertical padding */
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.24);
}

.fl-placement-demo.fl-kids-lesson .fl-explorer-instructions {
  font-size: 0.98rem;                         /* slightly smaller */
  margin-bottom: 0.7rem;
}

/* Badge bar */
.fl-placement-demo.fl-kids-lesson .fl-explorer-badges {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  background: #172830; /* deep navy */
  color: #f4d488;      /* soft yellow */
}

/* Cards row */
.fl-placement-demo.fl-kids-lesson .fl-explorer-cards-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;                                   /* tighter */
  margin: 0.7rem 0 0.9rem;
}

/* Card base */
.fl-placement-demo.fl-kids-lesson .fl-explorer-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 0.7rem 0.9rem 0.9rem;               /* less padding */
  box-shadow: 0 10px 22px rgba(15,23,42,0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Card labels */
.fl-placement-demo.fl-kids-lesson .fl-explorer-card-label {
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-bottom: 0.3rem;
}

/* Pronoun value */
.fl-placement-demo.fl-kids-lesson .fl-explorer-card-value--pronoun {
  font-size: 1.7rem;                           /* a bit smaller */
  font-weight: 700;
}

/* Pronoun card vertically centered */
.fl-placement-demo.fl-kids-lesson .fl-explorer-card--pronoun {
  justify-content: center;
  min-height: 115px;                           /* was 140px */
}

/* Action content */
.fl-placement-demo.fl-kids-lesson .fl-explorer-action-content {
  width: 100%;
  margin-top: 0.25rem;
}

.fl-placement-demo.fl-kids-lesson .fl-explorer-action-img {
  width: 100%;
  display: block;
  border-radius: 16px;
}

.fl-placement-demo.fl-kids-lesson .fl-explorer-emoji {
  font-size: 4.5rem;                           /* was 6rem */
  line-height: 1.05;
}

/* Action caption */
.fl-placement-demo.fl-kids-lesson .fl-explorer-action-caption {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Buttons row */
.fl-placement-demo.fl-kids-lesson .fl-explorer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.35rem;
}

/* Buttons */
.fl-placement-demo.fl-kids-lesson .fl-explorer-btn {
  border: none;
  border-radius: 9999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15,23,42,0.16);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.fl-placement-demo.fl-kids-lesson .fl-explorer-btn--primary {
  background: #f4d488; /* Florentis soft yellow */
}

.fl-placement-demo.fl-kids-lesson .fl-explorer-btn--correct {
  background: #596c10; /* Florentis green */
  color: #ffffff;
}

.fl-placement-demo.fl-kids-lesson .fl-explorer-btn--neutral {
  background: #e5e7eb;
}

.fl-placement-demo.fl-kids-lesson .fl-explorer-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,23,42,0.2);
}

/* Badge float animation (unchanged) */
.fl-placement-demo.fl-kids-lesson .fl-explorer-badge-float {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  font-size: 2.4rem;
  animation: flExplorerRiseFade 1.2s ease-out forwards;
  pointer-events: none;
}

@keyframes flExplorerRiseFade {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(1.1);
  }
}

/* Full-screen: just reuse base, plus *slight* extra tightening */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-explorer-wrapper {
  max-width: 860px;
  padding: 0.8rem 1.1rem 1rem;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-explorer-instructions,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-explorer-badges {
  font-size: 0.92rem;
}

/* Stack cards on narrow widths */
@media (max-width: 900px) {
  .fl-placement-demo.fl-kids-lesson .fl-explorer-cards-row {
    grid-template-columns: 1fr;
  }
}

/* Background image (unchanged) */
.fl-placement-demo.fl-kids-lesson .fl-kids-explorer-bg {
  background-image: url("https://florentislearning.ca/wp-content/uploads/kids-lessons/Grammar/beginner/lesson-9/explorer-bg-min.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* -----------------------------------------
   Random Image Game – more compact
   ----------------------------------------- */

/* Card wrapper */
.fl-placement-demo.fl-kids-lesson .fl-kids-random-prompt {
  max-width: 680px;                       /* a bit narrower */
  margin: 0.9rem auto 1.1rem;             /* less vertical margin */
  padding: 0.9rem 1.2rem 1.05rem;         /* less padding all around */
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(15,23,42,0.12);
  text-align: center;
}

/* Image inside the card */
.fl-placement-demo.fl-kids-lesson .fl-kids-random-prompt-img img {
  width: 100%;
  max-width: 460px;                       /* slightly smaller */
  border-radius: 18px;
  display: block;
  margin: 0 auto 0.65rem;                 /* less space under image */
}

/* Prompt text */
.fl-placement-demo.fl-kids-lesson .fl-kids-random-prompt-text {
  font-size: 0.98rem;                     /* a touch smaller */
  margin-bottom: 0.55rem;
}

/* New picture button inside the card */
.fl-placement-demo.fl-kids-lesson .fl-kids-random-prompt-btn {
  padding: 0.4rem 0.95rem;                /* smaller button */
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  background: #f4d488;
  color: #172830;
  box-shadow: 0 6px 14px rgba(15,23,42,0.18);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-random-prompt-btn:hover {
  box-shadow: 0 8px 20px rgba(15,23,42,0.28);
  transform: translateY(-2px);
}

.fl-placement-demo.fl-kids-lesson .fl-kids-random-prompt-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(15,23,42,0.18);
}

/* Fullscreen: keep it centered / slightly tighter, don't enlarge */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-random-prompt {
  max-width: 700px;                       /* small bump max width is fine */
  margin: 0.9rem auto 1.1rem;             /* no extra top margin */
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-random-prompt-img img {
  max-width: 500px;                       /* still modest in fullscreen */
}


/* -----------------------------------------
   Listening - Picture MCQ  (drop-in replacement)
   ----------------------------------------- */

/* Wrapper */
.fl-placement-demo.fl-kids-lesson .fl-listening-pic-mcq {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Soft panel behind everything */
.fl-placement-demo.fl-kids-lesson .fl-listening-pic-inner {
  background: rgba(241, 229, 218, 0.94); /* soft Florentis beige */
  border-radius: 24px;
  padding: 1rem 1.25rem 1.25rem;
}

/* Header: text left, audio button right */
.fl-placement-demo.fl-kids-lesson .fl-listening-pic-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.fl-placement-demo.fl-kids-lesson .fl-listening-pic-headertext {
  flex: 1 1 auto;
}

.fl-placement-demo.fl-kids-lesson .fl-listening-pic-instruction {
  font-weight: 600;
  margin: 0 0 0.15rem;
}

.fl-placement-demo.fl-kids-lesson .fl-listening-pic-question {
  margin: 0;
}

/* Audio button – compact pill */
.fl-placement-demo.fl-kids-lesson .fl-listening-pic-mcq .fl-audio-play-btn {
  background: #27537a;
  color: #ffffff;
  border: none;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15,23,42,0.18);
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.1s ease;
}

.fl-placement-demo.fl-kids-lesson .fl-listening-pic-mcq .fl-audio-play-btn:hover {
  background: #1d3f5a;
  transform: translateY(-1px);
}

/* 3-image row */
.fl-placement-demo.fl-kids-lesson .fl-listening-pic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Picture card – reuse match card feel */
.fl-placement-demo.fl-kids-lesson .fl-listening-pic-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 0.7rem 0.8rem 0.9rem;
  box-shadow: 0 10px 25px rgba(15,23,42,0.12);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, transform 0.1s ease,
              box-shadow 0.15s ease;
}

.fl-placement-demo.fl-kids-lesson .fl-listening-pic-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(15,23,42,0.16);
}

/* Image */
.fl-placement-demo.fl-kids-lesson .fl-listening-pic-img img {
  width: 100%;
  display: block;
  border-radius: 18px;
  margin-bottom: 0.4rem;
}

/* Label + little box (Cambridge-style) */
.fl-placement-demo.fl-kids-lesson .fl-listening-pic-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: #27537a;
}

.fl-placement-demo.fl-kids-lesson .fl-listening-pic-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  position: relative;
}

/* Selected: highlight + tick */
.fl-placement-demo.fl-kids-lesson
  .fl-listening-pic-card.is-selected .fl-listening-pic-box {
  border-color: #27537a;
  background: #f4d488;
}

.fl-placement-demo.fl-kids-lesson
  .fl-listening-pic-card.is-selected .fl-listening-pic-box::after {
  content: "✓";
  position: absolute;
  inset: -2px 0 0 0;
  font-size: 0.85rem;
  line-height: 1;
  text-align: center;
  color: #27537a;
}

/* Correct / incorrect borders after Check */
.fl-placement-demo.fl-kids-lesson
  .fl-listening-pic-card.is-correct {
  border-color: #4d7c0f;
}

.fl-placement-demo.fl-kids-lesson
  .fl-listening-pic-card.is-incorrect {
  border-color: #b91c1c;
}

/* Check button row */
.fl-placement-demo.fl-kids-lesson .fl-listening-pic-actions {
  margin-top: 0.8rem;
  display: flex;
  justify-content: flex-end;
}

.fl-placement-demo.fl-kids-lesson .fl-listening-pic-check {
  background: #596c10;
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  padding: 0.4rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15,23,42,0.18);
  transition: background 0.2s, transform 0.1s;
}

.fl-placement-demo.fl-kids-lesson .fl-listening-pic-check:hover {
  background: #43500c;
  transform: translateY(-1px);
}

/* Little nudge if Check clicked with no selection */
.fl-placement-demo.fl-kids-lesson
  .fl-listening-pic-check.fl-listening-pic-check--nudge {
  animation: fl-check-nudge 0.2s ease-in-out;
}

@keyframes fl-check-nudge {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px); }
  75%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

							  /* Correct: green box + tick */
.fl-placement-demo.fl-kids-lesson
  .fl-listening-pic-card.is-correct .fl-listening-pic-box {
  background: #d9f99d;          /* light green */
  border-color: #4d7c0f;
}

.fl-placement-demo.fl-kids-lesson
  .fl-listening-pic-card.is-correct .fl-listening-pic-box::after {
  content: "✓";
  position: absolute;
  inset: -2px 0 0 0;
  font-size: 0.85rem;
  line-height: 1;
  text-align: center;
  color: #365314;
}

/* Incorrect: red box + X */
.fl-placement-demo.fl-kids-lesson
  .fl-listening-pic-card.is-incorrect .fl-listening-pic-box {
  background: #fee2e2;
  border-color: #b91c1c;
}

.fl-placement-demo.fl-kids-lesson
  .fl-listening-pic-card.is-incorrect .fl-listening-pic-box::after {
  content: "✗";
  position: absolute;
  inset: -2px 0 0 0;
  font-size: 0.85rem;
  line-height: 1;
  text-align: center;
  color: #7f1d1d;
}

/* Feedback text under grid, left side of the Check button */
.fl-placement-demo.fl-kids-lesson .fl-listening-pic-actions {
  margin-top: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fl-placement-demo.fl-kids-lesson .fl-listening-pic-feedback {
  font-size: 0.9rem;
  font-weight: 600;
}

							  
/* ======================================
   Forest background theme
   ====================================== */
.fl-placement-demo.fl-kids-lesson .bg-forest {
  background-image: url('https://florentislearning.ca/wp-content/uploads/kids-lessons/speaking/b1/amazing-animals/forest-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


	/* -----------------------------------------
       Dialogue Chat – phone overlay + bubbles
       ----------------------------------------- */

/* Make the question card act as a transparent overlay in full_story layout */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-phone {
  max-width: 320px;
  width: 32%;
  min-width: 260px;
  /* push it to the right side of the scene */
  margin-left: auto;
  margin-right: 4%;
  margin-top: 4%;
}

/* Phone frame */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-phone-inner {
  border-radius: 32px;
  padding: 10px;
  background: #111827; /* dark phone bezel */
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.4);
  position: relative;
}

/* Phone screen */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-chat {
  background: #e5edf6;
  border-radius: 24px;
  padding: 10px 10px 12px;
  max-height: 360px;
  overflow-y: auto;
}

/* Tiny notch / top bar suggestion (optional) */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-phone-inner::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 5px;
  border-radius: 999px;
  background: rgba(249, 250, 251, 0.9);
}

/* Header inside phone */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-phone-header {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f9fafb;
  text-align: center;
  margin-top: 14px;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-phone-sub {
  font-size: 0.8rem;
  color: #e5e7eb;
  text-align: center;
  margin: 2px 8px 8px;
}

/* Chat bubbles container */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-bubble {
  max-width: 90%;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 0.9rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-bubble-left {
  margin-right: auto;
  background: #ffffff;
  border-bottom-left-radius: 4px;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-bubble-right {
  margin-left: auto;
  background: #c7d2fe; /* soft blue for B */
  border-bottom-right-radius: 4px;
}

/* Speaker label (A / B) */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-label {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 2px;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-bubble-left .fl-kids-dialogue-label {
  color: #374151;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-bubble-right .fl-kids-dialogue-label {
  text-align: right;
  color: #1f2937;
}

/* Message text */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-text {
  color: #111827;
  line-height: 1.35;
}

	/* Chat layout rows */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-chat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-row-left {
  justify-content: flex-start;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-row-right {
  justify-content: flex-end;
}

/* Tiny circular avatars */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f1e5da;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* For right-side rows, avatar appears *after* bubble */
.fl-placement-demo.fl-kids-lesson
  .fl-kids-dialogue-row-right .fl-kids-dialogue-avatar {
  order: 2;
}

.fl-placement-demo.fl-kids-lesson
  .fl-kids-dialogue-row-right .fl-kids-dialogue-bubble {
  order: 1;
}
							  
							  /* Board-style role play layout */
.fl-kids-dialogue-roleplay {
  padding: 1rem;
}

.fl-kids-dialogue-roleplay-inner {
  background: #ffffff;
  border-radius: 24px;
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

/* etc. – bubbles, rows, selects/inputs */


/* ================================
   WHAT'S MISSING GAME (whats_missing)
   3 × 2 classroom object grid
   ================================ */

.fl-placement-demo.fl-kids-lesson .fl-kids-whm-header {
  margin-top: 0.5rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-whm-instructions {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-whm-btn {
  display: inline-block;
  margin-bottom: 0.25rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: #f4d488; /* your soft yellow */
}

.fl-placement-demo.fl-kids-lesson .fl-kids-whm-status {
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 0.1rem;
}

/* 3 x 2 grid */
.fl-placement-demo.fl-kids-lesson .fl-kids-whm-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;

  /* optional: stop the grid from getting taller than the viewport */
  max-height: 80vh;
}

/* Cards */
.fl-placement-demo.fl-kids-lesson .fl-kids-whm-card {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

/* Make all images square-ish and crop wide ones */
.fl-placement-demo.fl-kids-lesson .fl-kids-whm-card img {
  display: block;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 0.35rem;

  aspect-ratio: 1 / 1;  /* 🔹 force consistent square */
  object-fit: cover;     /* 🔹 center crop landscape/tall images */
}

.fl-placement-demo.fl-kids-lesson .fl-kids-whm-caption {
  font-size: 0.9rem;
  transition: opacity 0.2s ease;
}

/* Hidden state: hide image + caption, show ? overlay */
.fl-placement-demo.fl-kids-lesson .fl-kids-whm-card.is-missing img {
  opacity: 0;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-whm-card.is-missing .fl-kids-whm-caption {
  opacity: 0;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-whm-card.is-missing::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: #27537a;
}

	
/* ============================================================
   TIC TAC TOE — COMPLETE & CLEAN STYLE SHEET (2025)
   Replaces ALL previous tic-tac-toe CSS.
   ============================================================ */

/* ---------- Header card (title + instructions) ---------- */
.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-header {
  max-width: 900px;
  margin: 0 auto 0.75rem auto;
  padding: 0.75rem 1.25rem;
  border-radius: 20px;
  background: rgba(241, 229, 218, 0.95); /* Florentis light beige */
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-header h2 {
  margin: 0 0 0.25rem 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #172830;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-header p {
  margin: 0;
  font-size: 0.95rem;
  color: #374151;
}


/* ---------- Tic Tac Toe Grid ---------- */
.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-cell {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  padding: 1.2rem 1rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  cursor: pointer;
}

/* Text inside squares */
.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-prompt {
  font-size: 1.05rem;
  font-weight: 600;
  color: #172830;
  padding: 0 0.25rem;
}

/* FREE SPACE */
.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-free {
  font-size: 1.05rem;
  font-weight: 700;
  color: #596c10;
}

/* Face-down state */
.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-cell.fl-kids-ttt-face-down {
  background: #e5edf6;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-cell.fl-kids-ttt-face-down .fl-kids-ttt-prompt {
  font-style: italic;
  color: #38465a;
}


/* ---------- X / O Overlay ---------- */
.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: 800;
  pointer-events: none;
  opacity: 0.9;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-cell.ttt-mark-x .fl-kids-ttt-mark {
  color: #c2410c; /* orange */
}

.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-cell.ttt-mark-o .fl-kids-ttt-mark {
  color: #2563eb; /* blue */
}


/* ---------- Controls Section (X / O Buttons) ---------- */
.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-controls {
  max-width: 900px;
  margin: 1rem auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-controls-hint {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: #4b5563;
  margin: 0.25rem 0 0;
}

/* ---------- Bottom Controls Card (matches header styling) ---------- */
.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-controls-wrapper {
  max-width: 900px;
  margin: 1rem auto 0 auto;
  padding: 0.75rem 1.25rem;
  border-radius: 20px;
  background: rgba(241, 229, 218, 0.95); /* Florentis beige */
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}

.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-current-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #172830;
}

/* X / O pill buttons */
.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-mark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  border-radius: 9999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-ttt-mark-btn.active {
  background: #f4d488;
  border-color: #f1c860;
}

/* Shading for Tic Tac Toe controls + instructions */
.fl-kids-ttt-controls {
  background: #F1E5DAf2 !important;
  backdrop-filter: blur(4px);
  border-radius: 14px;
  padding: 10px 16px;
}

	
	/* Remove white background container on chalkboard quiz slide */
.fl-writing-board,
.fl-writing-card,
.fl-chalkboard-card,
.fl-question-box {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

	
/* ============================================================
   END OF TTT STYLESHEET
   ============================================================ */  
	  
/* Title + slide info */
.fl-placement-demo.fl-kids-lesson .fl-placement-lesson-meta{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.fl-placement-demo.fl-kids-lesson .fl-lesson-title{
  font-size:1.4rem;
  font-weight:700;
  color:#596c10;
  white-space:nowrap;           /* prevents "The / Thankful / Tree" stacking */
}

.fl-placement-demo.fl-kids-lesson .fl-lesson-counter{
  font-size:.9rem;
  color:#6b7280;
  margin-top:.15rem;
}
	
	/* Wraps entire slide */
.fl-kids-video-wrapper {
  position: relative;
  width: 100%;
  height: auto; /* fits under header */
  max-height: 540px;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The “screen” area */
.fl-kids-video-screen {
  width: 75%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}

/* The actual iframe */
.fl-kids-yt {
  width: 100%;
  height: 100%;
  border: none;
}

	/* Scene panel should center its content nicely */
.fl-kids-scene,
[data-scene] {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- iPad Shell (Outer Frame) ---------- */
.fl-kids-ipad-shell {
  position: relative;
  width: 80%;
  max-width: 1000px;
  aspect-ratio: 16 / 10;
  background: #222;
  border-radius: 20px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto; /* center in classroom background */
}

/* ---------- Inner Screen ---------- */
.fl-kids-ipad-screen {
  width: 88%;
  height: 80%;
  background: #000;
  border-radius: 24px;
  overflow: hidden;

  /* NEW: make whatever is inside (video OR memory grid) fill nicely */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The YouTube iframe fills the screen (video_embed) */
.fl-kids-yt {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Memory game: use a single full-width panel (no right column) */
.fl-kids-mem-only .fl-placement-main {
  display: grid !important;
  grid-template-columns: 1fr !important;  /* single column */
}

.fl-kids-mem-only .fl-placement-questions {
  display: none !important;
}

.fl-kids-mem-only .fl-placement-scene {
  width: 100% !important;
}

	.fl-kids-mem-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
							  


	
	
/* ---------- Memory grid inside iPad ---------- */
.fl-kids-mem-grid {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* big 4 x 2 grid */
  grid-auto-rows: 1fr;
  gap: 1.1rem;
  padding: 1.5rem;
  background: #111;
}
	
	

/* Individual cards fill their grid cell */
.fl-kids-mem-card {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  perspective: 800px;
}

/* Inner flippy bit */
.fl-kids-mem-inner {
  position: relative;       /* IMPORTANT: anchor front/back faces */
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  transform-style: preserve-3d;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Flip animation */
.fl-kids-mem-card.is-flipped .fl-kids-mem-inner {
  transform: rotateY(180deg);
}

/* front & back faces */
.fl-kids-mem-front,
.fl-kids-mem-back {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Front: favicon image */
.fl-kids-mem-front {
  background: #ffffff;
}

.fl-kids-mem-front::before {
  content: "";
  display: block;
  width: 60%;
  aspect-ratio: 1 / 1;
  background-image: url("https://florentislearning.ca/wp-content/uploads/2025/11/favicon-min.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Back: image or word */
.fl-kids-mem-back {
  background: #ffffff;
  transform: rotateY(180deg);
  padding: 0.5rem;
}

.fl-kids-mem-back img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.fl-kids-mem-back span {
  font-size: 1.8rem;
  font-weight: 600;
  color: #27537a;
}

/* matched cards fade out nicely */
.fl-kids-mem-card.is-matched .fl-kids-mem-inner {
  opacity: 0;
  transform: rotateY(180deg) scale(0.96);
}

/* Title + prompt above the game, if you use them */
.fl-kids-mem-title {
  font-size: 1.7rem;
  margin: 0 0 0.3rem;   /* smaller bottom margin */
}

.fl-kids-mem-prompt {
  font-size: 1.3rem;
  margin: 0 0 0.4rem;   /* small margin */
}

/* End-of-game message inside the iPad */
.fl-kids-mem-complete {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 3px 6px rgba(0,0,0,0.45);
  background: radial-gradient(circle at center, rgba(0,0,0,0.25), rgba(0,0,0,0.75));
  pointer-events: none;
}

/* 1) MEMORY – remove white/cream card on mem-only slides */
.fl-kids-mem-only .fl-kids-question {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

	
	/* Picture Word Bank Grid (2x3) */
.fl-picture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.75rem;
  padding: 0.5rem;
}

.fl-picture-grid img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  background: #fff;
  object-fit: contain; /* prevents clipping */
}

	/* Two-card grammar layout */
.fl-grammar-row {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
  margin: 1rem 0;
}

.fl-grammar-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  width: 42%;
  max-width: 420px;
}

.fl-grammar-card h3 {
  margin-top: 0;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

/* Make MCQ options inside grammar cards look right */
.fl-grammar-card .fl-mcq-option {
  display: block;
  margin-bottom: 0.5rem;
}

/* Prevent engine from pushing cards too far down */
.fl-kids-lesson .slide-content {
  padding-top: 0.5rem !important;
}
	

/* 2x3 grid for the six images */
.fl-placement-demo.fl-kids-lesson .fl-kids-speaking-card .fl-kids-image-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Individual picture tiles */
.fl-placement-demo.fl-kids-lesson .fl-kids-speaking-card .fl-kids-image-card img {
  width: 100%;
  display: block;
  border-radius: 20px;
}

/* Prompt under the pictures */
.fl-placement-demo.fl-kids-lesson .fl-kids-speaking-card .fl-kids-speaking-prompt {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0.5rem 0 0;
}

/* ==========================================
   SPEAKING – 6 image grid (speaking_simple)
   ========================================== */

/* Overlay card on classroom bg */
.fl-placement-demo.fl-kids-lesson .fl-kids-speaking-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-radius: 1.25rem;
  padding: 1.5rem 2rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  max-width: 1100px;
  margin: 0 auto;
}

/* Title + prompt */
.fl-placement-demo.fl-kids-lesson .fl-kids-speaking-card h2 {
  font-size: 1.6rem;
  color: #1c1c1c;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-speaking-card .fl-kids-speaking-prompt {
  font-size: 1.25rem;
  color: #2c2c2c;
  margin-top: 0.75rem;
}

/* 2) SPEAKING GRID – compact only in normal view, bigger in fullscreen */

/* Normal / co-browser view: keep the compact 200px tiles */
.fl-placement-demo.fl-kids-lesson:not(.fl-placement-demo--fullscreen) .fl-kids-image-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.fl-placement-demo.fl-kids-lesson:not(.fl-placement-demo--fullscreen) .fl-kids-image-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fl-placement-demo.fl-kids-lesson:not(.fl-placement-demo--fullscreen) .fl-kids-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fullscreen: give them a bit more presence */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-image-card {
  min-height: 260px;               /* happy medium – bigger but not giant */
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-image-card img {
  height: 100%;
  object-fit: cover;
}

/* Fullscreen: small bump only */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-speaking-card {
  padding: 1.75rem 2.25rem;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-speaking-card h2 {
  font-size: 1.7rem;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-speaking-card .fl-kids-speaking-prompt {
  font-size: 1.35rem;
}

	/* Grammar MCQ group – two-column card layout */
.fl-placement-demo.fl-kids-lesson .fl-kids-mcq-group-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.fl-placement-demo.fl-kids-lesson .fl-kids-mcq-group-prompt {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* ============================================================
   FL KIDS – WRITING MODE (CHALKBOARD)
   Single clean stylesheet – normal + fullscreen
   ============================================================ */

/* Core chalkboard card – used on all writing_fill slides */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board {
  width: 100%;
  max-width: 900px;
  margin: 1.25rem auto 1.5rem;
  padding: 2rem 2.5rem;
  background: #2a3531;              /* dark board */
  border: 12px solid #b28852;       /* wood frame */
  border-radius: 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  color: #ffffff;
}

/* Title on the board */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board h2 {
  color: #ffffff;
  text-align: center;
  margin: 0 0 1.75rem 0;
  font-size: 1.4rem;
  font-weight: 700;
}

/* Container for the lines */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-lines {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Each “line” row */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-line {
  display: block;
}

/* Optional label text above a line (if you ever use it) */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-line label {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.35rem;
  color: #e8f0ea;
}

/* Input styled as a chalk line */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(255,255,255,0.9);
  border-radius: 0;
  padding: 0.6rem 0.25rem 0.4rem;
  font-size: 1.1rem;
  color: #ffffff;
  caret-color: #ffffff;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-writing-input::placeholder {
  color: rgba(255,255,255,0.65);
}

/* Make sure no stray white panel shows up behind the lines */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board .fl-kids-writing-lines::before,
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board .fl-kids-writing-lines::after {
  content: none !important;
}

/* Ensure all text on the board is “chalk white” */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board h2,
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board p,
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board label,
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board span {
  color: #f9fdf8 !important;
}

/* ===========================================
   SPLIT LAYOUT (image left, board right)
   – current behaviour for your slide 16
   =========================================== */

/* In split layout the board just lives inside the white card;
   we don’t need to kill the question card globally. 
   But we do slightly tighten its width so it feels tablet-like. */
.fl-placement-demo.fl-kids-lesson .fl-kids-question-card .fl-kids-writing-board {
  max-width: 480px;
  margin: 1.5rem auto;
}
	

/* ===========================================
   FULLSCREEN MODE – larger board and fonts
   =========================================== */

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-writing-board {
  max-width: 1100px;
	margin: 0.75rem auto 1.25rem;
  padding: 2.25rem 2.75rem;
  transform: scale(1.05);
  transform-origin: top center;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-writing-line label {
  font-size: 1.3rem;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-writing-input {
  font-size: 1.3rem;
  padding: 0.9rem 0.4rem 0.6rem;
  border-bottom-width: 3px;
}


							  /* ===========================================
   WRITING PROMPTS – base styles
   =========================================== */

/* Prompt container (normal / split view)
   Sits under the chalkboard, centered. */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-prompts {
  max-width: 900px;
  margin: 0 auto 0.75rem;
  padding: 0.4rem 0.5rem 0.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

/* Individual prompt chip */
.fl-placement-demo.fl-kids-lesson .fl-writing-prompt-chip {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  border: 2px solid #27537a;   /* navy */
  background: #f1e5da;         /* beige */
  color: #27537a;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.1s ease;
}

.fl-placement-demo.fl-kids-lesson .fl-writing-prompt-chip:hover {
  background: #f4d488;   /* soft yellow */
  border-color: #596c10; /* green */
  color: #596c10;
  transform: translateY(-1px);
}

/* ===========================================
   FULLSCREEN – compact prompt chips
   =========================================== */

/* In fullscreen, keep the writing card as a block.
   (If we previously set it to flex, this resets it.) */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen
  .fl-kids-writing-card {
  display: block;
}

/* Prompt container: centered, wraps, not full width */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen
  .fl-kids-writing-prompts {
  max-width: 820px;
  margin: 0.75rem auto 0.75rem;
  padding: 0.3rem 0.5rem 0.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

/* Chips: auto width (no 100%), slightly smaller in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen
  .fl-writing-prompt-chip {
  width: auto;                 /* <— key change: no full width */
  padding: 0.25rem 0.85rem;
  font-size: 0.85rem;
}
	

.fl-kids-writing-instructions p {
  margin: 0.25rem 0 !important;
  font-size: 0.98rem;
  color: #e8f0ea;
}

.fl-kids-writing-instructions {
  margin-bottom: 1rem;
}



/* Bottom row: reward stars right aligned */
.fl-placement-demo.fl-kids-lesson .fl-placement-header-bottom{
  margin-top:.5rem;
  display:flex;
  justify-content:flex-end;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-stars iframe{
  max-width:100%;
}

	.fl-placement-demo.fl-kids-lesson .fl-kids-vocab-heading{
  font-size:1.2rem;
  font-weight:700;
  margin:0 0 .75rem;
  color:#111827;
}

	/* Make sure the scene can host absolutely positioned overlays */
.fl-placement-demo.fl-kids-lesson .fl-placement-scene{
  position:relative;
  overflow:hidden;
}

/* Overlay mode: white rounded box at bottom-left of image */
.fl-placement-demo.fl-kids-lesson .fl-reading-strip-overlay{
  position:absolute;
  left:1.5rem;
  right:auto;
  bottom:1.5rem;
  max-width:65%;
  background:#ffffff;
  border-radius:18px;
  box-shadow:0 14px 30px rgba(15,23,42,0.2);
  padding:.9rem 1.1rem;
}

/* Text inside the reading strip */
.fl-placement-demo.fl-kids-lesson .fl-reading-strip-line{
  margin:0 0 .25rem;
  font-size:1rem;
  line-height:1.45;
  color:#111827;
}

.fl-placement-demo.fl-kids-lesson .fl-reading-strip-line:last-child{
  margin-bottom:0;
}

/* "Below" mode (if you use it later) */
.fl-placement-demo.fl-kids-lesson .fl-reading-strip-below{
  position:static;
  margin-top:.75rem;
  max-width:100%;
  border-radius:18px;
  background:#ffffff;
  padding:.9rem 1.1rem;
}

	/* Full-width activity layout (e.g. match-the-picture) */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-width .fl-placement-window{
  display:block;              /* stack instead of two columns */
}

.fl-placement-demo.fl-kids-lesson.fl-kids-full-width .fl-placement-scene{
  display:none;               /* no empty left column */
}

.fl-placement-demo.fl-kids-lesson.fl-kids-full-width .fl-placement-sidebar{
  width:100%;
}
	
	/* Word bank chips on info/sentence-frame slides */
.fl-placement-demo.fl-kids-lesson .fl-kids-wordbank {
  margin-top: 0.75rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-wordbank-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-wordbank-item {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  margin: 0 0.35rem 0.35rem 0;
  border-radius: 999px;
  background: #f1e5da;
  border: 1px solid #e5d3ba;
  font-size: 0.9rem;
  font-weight: 500;
}



/* ------------------------------------------
   TRUE / FALSE – Standard Kids Lesson Layout
   ------------------------------------------ */

.fl-placement-demo.fl-kids-lesson .fl-kids-tf-list {
  list-style: none;
  margin: 1rem auto 2rem auto;
  padding: 1rem 1.5rem;
  max-width: 900px;
  width: calc(100% - 4rem);
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.fl-placement-demo.fl-kids-lesson .fl-kids-tf-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-tf-num {
  font-weight: 700;
  font-size: 1.15rem;
  min-width: 1.5rem;
  color: #172830;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-tf-statement {
  flex: 1;
  font-size: 1.2rem;
  color: #172830;
  line-height: 1.4;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-tf-options label {
  margin-left: 1rem;
  font-size: 1.15rem;
  color: #172830;
}

/* Pill button for "Check" */
.fl-placement-demo.fl-kids-lesson .fl-kids-tf-check {
  background: #596c10;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
  transition: background 0.2s ease;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-tf-check:hover {
  background: #70891a;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-feedback {
  margin-top: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #596c10;
}

/* Optional ✔ / ✖ markers after the statement */
.fl-placement-demo.fl-kids-lesson .fl-kids-tf-item.tf-correct .fl-kids-tf-statement::after {
  content: " ✔";
  margin-left: 0.35rem;
  font-weight: 600;
  color: #2f7d32;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-tf-item.tf-incorrect .fl-kids-tf-statement::after {
  content: " ✖";
  margin-left: 0.35rem;
  font-weight: 600;
  color: #b02323;
}

/* Optional: subtle color shift when incorrect */
.fl-placement-demo.fl-kids-lesson .fl-kids-tf-item.tf-incorrect .fl-kids-tf-statement {
  color: #4a1c1c;
}

	/* --- Fill-in-the-blank container --- */
.fl-kids-fill-single {
  background: #ffffff;
  border-radius: 28px;
  padding: 2rem 2.5rem;
  max-width: 900px;
  margin: 0 auto 2rem auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* The prompt sentence */
.fl-kids-fill-single h2,
.fl-kids-fill-single .fl-kids-title-line {
  font-size: 1.8rem;
  font-weight: 700;
  color: #172830;
  margin-bottom: 1.5rem;
}

/* Dropdown styling */
.fl-kids-fill-select {
  font-size: 1.15rem;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  border: 2px solid #ccd5d9;
  margin-right: 1rem;
  min-width: 150px;
  cursor: pointer;
  outline: none;
}

.fl-kids-fill-select:focus {
  border-color: #27537a;
  box-shadow: 0 0 0 3px rgba(39, 83, 122, 0.25);
}

/* Button styling */
.fl-kids-btn.fl-kids-check-fill {
  background: #27537a;
  color: white;
  padding: 0.5rem 1.4rem;
  border-radius: 10px;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  transition: 0.2s ease;
}

.fl-kids-btn.fl-kids-check-fill:hover {
  background: #1d4161;
}

/* Feedback message */
.fl-kids-fill-single .fl-kids-feedback {
  margin-top: 1.2rem;
  font-size: 1.15rem;
  font-weight: 500;
  color: #596c10; /* friendly Florentis green */
}
	
	/* Check / X icons on MCQ options after checking */
.fl-mcq-option.correct::after {
  content: " ✅";
  font-weight: 600;
  margin-left: 0.25rem;
}

.fl-mcq-option.incorrect::after {
  content: " ❌";
  font-weight: 600;
  margin-left: 0.25rem;
  color: #b02323;
}


	/* ---------- Full-card layout (vocab slides) ---------- */

/* In full_card mode, we hide the left image column and let the sidebar fill the frame */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-placement-window{
  display:flex;
  flex-direction:column;
  min-height:420px;
  overflow-y:auto;          /* allow mcq_group / board-overlay to scroll if taller than window */
}

.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-placement-scene{
  display:none;
}

.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-placement-sidebar{
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Center the card and make it big & pretty */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-kids-question{
  background:none;
  box-shadow:none;
  padding:0;
  flex:1;
  display:flex;
  flex-direction:column;
}

.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-kids-vocab-heading{
  display:none;              /* remove "New Word" label if you prefer just the card */
}

.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-kids-vocab-single-card{
  max-width:720px;
  margin:0 auto;
  background:#ffffff;
  border-radius:32px;
  padding:1.5rem 1.75rem 1.75rem;
  box-shadow:0 18px 40px rgba(15,23,42,0.12);
}

/* Big image on the card */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-kids-vocab-single-img img{
  width:100%;
  display:block;
  border-radius:24px;
  margin-bottom:1rem;
}

/* Word + definition */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-kids-vocab-single-word{
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:.25rem;
}

.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-kids-vocab-single-def{
  font-size:1.05rem;
  color:#374151;
}
	
/* ---------- Info overlay card on classroom background ---------- */
.fl-placement-demo.fl-kids-lesson .fl-kids-info-card {
  position: relative;               /* sit above bg */
  z-index: 2;
  background: rgba(255, 255, 255, 0.93);  /* soft white, slightly see-through */
  border-radius: 28px;
  padding: 1.4rem 1.7rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
  max-width: 480px;
  margin: 1.75rem 0 1.75rem 1.75rem;   /* you can tweak this later */
}

.fl-placement-demo.fl-kids-lesson .fl-kids-info-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: #172830;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-info-card p,
.fl-placement-demo.fl-kids-lesson .fl-kids-info-card li {
  font-size: 1rem;
  line-height: 1.5;
  color: #172830;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-info-card ul {
  padding-left: 1.25rem;
  margin: 0.35rem 0 0;
}

	/* Center the big info card on bg classroom slides */
.fl-placement-demo.fl-kids-lesson.fl-kids-bg-classroom .fl-kids-question {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Let the card itself center within that flex row */
.fl-placement-demo.fl-kids-lesson .fl-kids-info-card {
  margin: 1.75rem auto;
  text-align: left; /* keep text left-aligned */
}


/* Classroom 2 background for vocab slides */
.fl-kids-bg-classroom #fl-kids-main-area {
  background-image: url('https://florentislearning.ca/wp-content/uploads/kids-lessons/thankful-tree/classroom-2-min.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-radius: 40px;         /* keeps it inside the green frame */
  padding: 8px 32px;          /* space so the card isn't touching edges */
}

/* Xmas background */
.fl-kids-bg-xmas {
	background-image: url('https://florentislearning.ca/wp-content/uploads/kids-lessons/christmas/christmas-kindness/classroombgxmas.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Optional: make the main vocab card sit nicely on top */
.fl-kids-bg-classroom .fl-kids-question-card {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}
	

/* Dialogue background (two kids talking) */
.fl-placement-demo.fl-kids-lesson .fl-kids-dialogue-bg {
  background-image: url("https://florentislearning.ca/wp-content/uploads/kids-lessons/Grammar/beginner/lesson-1/talking-in-classroom-min.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Make the card invisible on dialogue slides so only the phone shows */
.fl-placement-demo.fl-kids-lesson .fl-kids-question-card.fl-kids-dialogue-card {
  background: transparent;
  box-shadow: none;
}


	/* Full-story layout: hide sidebar, scene goes full width */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-story .fl-placement-sidebar{
  display:none;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-full-story .fl-placement-scene{
  flex:1 1 auto;
}

	/* Question card shell */
.fl-placement-demo.fl-kids-lesson .fl-kids-question{
  background:#ffffff;
  border-radius:32px;
  padding:1.5rem 2rem 1.75rem;
  box-shadow:0 18px 40px rgba(15,23,42,0.12);
}


/* Meta line + prompt */
.fl-placement-demo.fl-kids-lesson .fl-question-meta{
  font-size:.9rem;
  color:#6b7280;
  margin-bottom:.35rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-question h2{
  font-size:1.4rem;
  font-weight:800;
  margin:0 0 1rem;
}

/* MCQ options as soft pills */
.fl-placement-demo.fl-kids-lesson .fl-mcq-form{
  margin-top:.5rem;
}

.fl-placement-demo.fl-kids-lesson .fl-mcq-option{
  display:flex;
  align-items:center;
  padding:.75rem 1rem;
  border-radius:9999px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  margin-bottom:.6rem;
  font-size:1rem;
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

.fl-placement-demo.fl-kids-lesson .fl-mcq-option input{
  margin-right:.7rem;
}

/* Correct/incorrect highlighting */
.fl-placement-demo.fl-kids-lesson .fl-mcq-option.correct{
  border-color:#16a34a;
  box-shadow:0 0 0 2px rgba(22,163,74,0.15);
}

.fl-placement-demo.fl-kids-lesson .fl-mcq-option.incorrect{
  border-color:#dc2626;
  box-shadow:0 0 0 2px rgba(220,38,38,0.1);
}

/* Check button similar to placement Send */
.fl-placement-demo.fl-kids-lesson .fl-mcq-send{
  margin-top:.5rem;
  border:none;
  border-radius:9999px;
  padding:.7rem 1.4rem;
  background:#94a3b8;
  color:#ffffff;
  font-weight:700;
  font-size:.98rem;
  cursor:pointer;
}

.fl-placement-demo.fl-kids-lesson .fl-mcq-send:disabled{
  opacity:.5;
  cursor:default;
}


/* Optional: keep meta line a bit smaller */
.fl-placement-demo.fl-kids-lesson .fl-kids-mcq-single-card .fl-question-meta {
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 0.35rem;
}

/* Single MCQ on classroom background (full_card + bgTheme: classroom2) */
.fl-placement-demo.fl-kids-lesson .fl-kids-mcq-single-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 28px;
  padding: 1.5rem 2rem 1.75rem;
  box-shadow: 0 18px 40px rgba(15,23,42,0.20);
  max-width: 880px;
  margin: 1.5rem auto 0;
}

/* Title inside the single-MCQ card */
.fl-placement-demo.fl-kids-lesson .fl-kids-mcq-single-card h2 {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 800;
}

/* Default scene background probably uses cover somewhere */
.fl-placement-scene {
  background-position: center center;
  background-repeat: no-repeat;
  /* keep whatever you already have here */
}


/* --------------------------------------------------
   ANCHOR CHART LAYOUT  (layout: "anchor_full")
   Full-scene anchor chart, no sidebar, no top counter
----------------------------------------------------- */

/* Use the full window for the scene */
.fl-placement-demo.fl-kids-lesson.fl-kids-anchor-full .fl-placement-window {
  display: flex;
  align-items: center;       /* vertically centre the chart a bit */
}

/* Hide the right-hand sidebar (header + white question box) */
.fl-placement-demo.fl-kids-lesson.fl-kids-anchor-full .fl-placement-sidebar {
  display: none !important;
}

/* Let the scene fill the space and keep the chart uncropped */
.fl-placement-demo.fl-kids-lesson.fl-kids-anchor-full .fl-placement-scene {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #f1e5da;           /* “margin” colour around chart */
  background-size: contain !important; /* keep proportions, no cropping */
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
}

/* If you ever use an <img> instead of a background image */
.fl-placement-demo.fl-kids-lesson.fl-kids-anchor-full .fl-placement-scene img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Hide the extra top slide counter for anchor_full slides
   (we only want the footer counter) */
.fl-placement-demo.fl-kids-lesson.fl-kids-anchor-full .fl-kids-counter {
  display: none !important;
}

/* --------------------------------------------------
   ANCHOR CHART — NORMAL VIEW SCALING FIX
   Make the chart fill the available scene area
   without waiting for fullscreen mode
----------------------------------------------------- */

/* Remove inner padding that shrinks the chart */
.fl-placement-demo.fl-kids-lesson.fl-kids-anchor-full .fl-placement-scene {
  padding: 0 !important;
  margin: 0 !important;
}

/* Normal-view sizing: slightly smaller so buttons never go below fold */
.fl-placement-demo.fl-kids-lesson.fl-kids-anchor-full .fl-placement-window {
  height: calc(100vh - 180px); /* was 140px — reduced by 40px */
  max-height: none;
}


/* Make the chart scale up more aggressively */
.fl-placement-demo.fl-kids-lesson.fl-kids-anchor-full .fl-placement-scene {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat;
  
  width: 100%;
  height: 100%;
}




/* ----------------------------------------- */
/*              Vocab flipcard grid          */
/* ----------------------------------------- */

/* Heading + instruction above flip grid */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-heading {
  max-width: 1000px;
  margin: 0 auto 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(15,23,42,0.12);
}

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-heading h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #172830;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-heading .fl-kids-flip-sub,
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-hint {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: #374151;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Base flip grid */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid {
  display: grid;
  gap: 1rem;
  max-width: 1000px;
  margin: 0.75rem auto 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Mobile fallback — always 1×N */
@media (max-width: 640px) {
  .fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------- */
/*              Flipcard itself              */
/* ----------------------------------------- */

/* Each flipcard container */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-card {
  perspective: 1200px;
  height: 220px;           /* taller so sentence + definition fit */
  cursor: pointer;
}

/* Inner flipper */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

/* Flip state */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-card.is-flipped .fl-kids-flip-inner {
  transform: rotateY(180deg);
}

/* Front + back faces */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-face {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,0.18);
  backface-visibility: hidden;
  padding: 1rem;              /* more breathing room */
  display: flex;
  flex-direction: column;
  justify-content: center; /* ⬅️ important: no vertical squeezing */
  text-align: center;
}

/* Back face */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-back {
  transform: rotateY(180deg);
}

/* (If you ever use images on the front) */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-img {
  width: 100%;
  height: 70%;
  margin-bottom: 0.4rem;
  border-radius: 18px;
  overflow: hidden;
  background: #f9fafb;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  display: block;
}

/* Front word */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-word {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 0.1rem;
  color: #172830;
}

/* Back example sentence */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-sentence {
  font-size: 1rem;
  font-weight: 600;
  color: #172830;
  line-height: 1.4;
  margin-bottom: 0.35rem;
  padding: 0 0.75rem;
}

/* Back definition */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-definition {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.35;
  padding: 0 0.75rem;
}

	
/* Big, nicely cropped scene image */
.fl-placement-demo.fl-kids-lesson .fl-placement-scene{
  flex:0 0 55%;
  min-height:320px;
  border-radius:24px;
  background-size:cover;
  background-position:center center;
}

/* Sidebar column */
.fl-placement-demo.fl-kids-lesson .fl-placement-sidebar{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Header above the question area: title + slide counter */
.fl-placement-demo.fl-kids-lesson .fl-kids-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:1rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-title{
  font-size:1.3rem;
  font-weight:700;
  color:#596c10; /* Florentis green */
}

.fl-placement-demo.fl-kids-lesson .fl-kids-counter{
  font-size:0.9rem;
  color:#6b7280; /* muted grey */
}

/* Question text reads more like a prompt */
.fl-placement-demo.fl-kids-lesson .fl-kids-text-block p{
  font-size:1.05rem;
  line-height:1.5;
}



.fl-placement-demo.fl-kids-lesson .fl-placement-scene{
  flex:0 0 55%;
  min-height:320px;
  border-radius:24px;
  background-size:cover;
  background-position:center center;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-sidebar{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* --- Full-story reading layout: overlay vs below --- */

/* Restore flex layout for full_story slides */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-story .fl-placement-window {
  display: flex;
  flex-wrap: wrap;          /* allows the strip-below to wrap to a new row */
}

/* Scene always takes full width on full_story */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-story .fl-placement-scene {
  flex: 0 0 100%;
  margin-bottom: 0;         /* no extra gap for overlay mode */
}

/* ONLY when we actually have a 'below' strip, make it sit on its own row */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-story .fl-reading-strip-below {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 0.75rem;
  background: #ffffff;
  border-radius: 18px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.2);
}


// /* Classroom background behind full-card vocab slides */
// .fl-placement-window.fl-kids-vocab-bg {
//   background-image: url("https://florentislearning.ca/wp-content/uploads/kids-lessons/thankful-tree/classroom-2-min.jpg");
//   background-size: cover;
//   background-position: center center;
//   background-repeat: no-repeat;

//   border-radius: 40px;   /* keeps it inside the green frame */
//   padding: 40px 48px;    /* room so the vocab card isn’t touching the edges */
// }
							  
/* Layout for full-card slides with bgTheme: classroom2.
   The background image is set in the rule further below (classroom-2-min.jpg).
   This earlier rule previously hardcoded the Christmas classroom background,
   which wrongly appeared on all grammar and other non-Christmas lessons. */
.fl-placement-window.fl-kids-vocab-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 40px;
  padding: 40px 48px;
}

/* Let the main vocab card sit nicely on top */
.fl-placement-window.fl-kids-vocab-bg .fl-kids-question {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.20);
}

	
	/* Big green frame around the whole lesson, kids-only */
.fl-placement-demo.fl-kids-lesson{
  max-width:1200px;
  margin:1.75rem auto;
  padding:1.5rem 1.75rem 1.75rem;
  background:#f1e5da;
  border-radius:24px;
  border:12px solid #596c10; /* Florentis green */
  box-sizing:border-box;
}

/* Header with logo + star bar (reuse placement structure) */
.fl-placement-demo.fl-kids-lesson .fl-placement-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-logo img{
  height:40px;
  width:auto;
}


.fl-placement-demo.fl-kids-lesson .fl-placement-scene{
  flex:0 0 55%;
  min-height:320px;
  border-radius:24px;
  background-size:cover;
  background-position:center center;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-sidebar{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Title + slide counter above the question card */
.fl-placement-demo.fl-kids-lesson .fl-kids-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:1rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-title{
  font-size:1.4rem;
  font-weight:700;
  color:#596c10;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-counter{
  font-size:.9rem;
  color:#6b7280;
}

	/* One big vocab card per slide */
.fl-placement-demo.fl-kids-lesson .fl-kids-vocab-single-card{
  background:#ffffff;
  border-radius:24px;
  padding:1.25rem 1.5rem;
  box-shadow:0 14px 30px rgba(15,23,42,0.12);
}

.fl-placement-demo.fl-kids-lesson .fl-kids-vocab-single-img img{
  width:100%;
  display:block;
  border-radius:20px;
  margin-bottom:.9rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-vocab-single-word{
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:.2rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-vocab-single-def{
  font-size:1rem;
  color:#374151;
}


/* Vocab cards in a grid */
.fl-placement-demo.fl-kids-lesson .fl-kids-vocab-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-vocab-card{
  background:#ffffff;
  border-radius:18px;
  padding:.75rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.fl-placement-demo.fl-kids-lesson .fl-kids-vocab-img img{
  width:100%;
  border-radius:14px;
  display:block;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-vocab-word{
  margin-top:.25rem;
  font-weight:700;
  font-size:1.05rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-vocab-def{
  font-size:.9rem;
  margin-top:.25rem;
}

	.fl-placement-demo.fl-kids-lesson .fl-placement-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.75rem;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-logo img{
  height:40px;
  width:auto;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-lesson-meta{
  text-align:center;
  flex:1;
}

.fl-placement-demo.fl-kids-lesson .fl-lesson-title{
  margin:0;
  font-size:1.4rem;
  font-weight:700;
  color:#596c10; /* Florentis green */
}

.fl-placement-demo.fl-kids-lesson .fl-lesson-counter{
  font-size:.9rem;
  color:#6b7280;
  margin-top:.1rem;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-stars iframe{
  max-width:100%;
}



/* ---------- Grammar MCQ group layout ---------- */

/* Put MCQ group questions into two cards side by side */


// /* Tighten title/instructions spacing */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-width .fl-kids-question > h2 {
  margin-bottom: 0.35rem;
}

.fl-placement-demo.fl-kids-lesson.fl-kids-full-width 
  .fl-kids-question > .fl-kids-speaking-prompt {
  margin-bottom: 0.7rem;
}


/* --- Remove inner white card for True/False + Fill-in slides --- */
.fl-placement-demo.fl-kids-lesson .fl-kids-tf-list,
.fl-placement-demo.fl-kids-lesson .fl-kids-fill-single {
  background: none !important;   /* no second white card */
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  margin: 0 0 1.5rem 0 !important;
  padding: 0 !important;
}

/* Optional: keep things nicely centred on the main question card */
.fl-placement-demo.fl-kids-lesson .fl-kids-fill-single,
.fl-placement-demo.fl-kids-lesson .fl-kids-tf-list {
  text-align: left;              /* or center if you prefer */
}
/* Full-card grammar group */
.fl-grammar-group-card {
  background: #ffffff;
  border-radius: 28px;
  max-width: 700px;
  margin: 0 auto;
  padding: 1.75rem 2rem;
  box-shadow: 0 12px 30px rgba(15,23,42,0.12);
}

.fl-grammar-section {
  margin-bottom: 1.75rem;
}

.fl-grammar-section h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.fl-grammar-group-card .fl-mcq-option {
  display: block;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 0.6rem .85rem;
  margin-bottom: 0.55rem;
}

/* Center the check button */
.fl-grammar-group-card .fl-kids-check-group {
  display: block;
  margin: 0 auto;
  margin-top: 0.5rem;
}

/* Chalkboard backplate for grammar full-card slides */
.fl-kids-board-overlay {
  position: relative;
  background: rgba(42, 53, 49, 0.82); /* deep chalkboard green */
  border-radius: 28px;
  padding: 2rem 2.5rem;
  max-width: 900px;
  margin: 0 auto 2rem auto;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

/* On the chalkboard overlay, only the main title is white */
.fl-placement-demo.fl-kids-lesson .fl-kids-board-overlay h2 {
  color: #ffffff;
}

/* Grammar prompts inside the white cards should be dark text */
.fl-placement-demo.fl-kids-lesson .fl-kids-board-overlay .fl-kids-mcq-group-prompt {
  color: #172830;  /* or #111827 if you prefer */
}


/* Make inner MCQ cards pop */
.fl-kids-board-overlay .fl-kids-mcq-group-item {
  background: #ffffff;
  border-radius: 18px;
  padding: 1rem 1.25rem;
  box-shadow: 0 3px 10px rgba(255,255,255,0.15);
}

/* Force consistent tile size for speaking picture banks */
.fl-placement-demo.fl-kids-lesson .fl-kids-image-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Each picture card wrapper */
.fl-placement-demo.fl-kids-lesson .fl-kids-image-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;               /* ensures clean cropping */
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  height: 200px;                  /* 🔹 FIXED HEIGHT (adjust if needed) */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner image must always fill the card evenly */
.fl-placement-demo.fl-kids-lesson .fl-kids-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* 🔹 crops nicely to fill the tile */
  border-radius: 0;               /* corners already handled by wrapper */
}


/* ---------- Full-screen mode for kids lessons (clean) ---------- */

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen {
  position: fixed;
  inset: 0;
  padding: 0.5rem 1.25rem 0.75rem;   /* <— add some padding */
  box-sizing: border-box;

  margin: 0;
  max-width: none;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  border-width: 0;
  box-shadow: none;
  z-index: 9999;
  background: #f1e5da;
  display: flex;
  flex-direction: column;
}

/* Window fills the vertical space between header/footer */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-placement-window {
  flex: 1;
}


/* Scale up key content cards in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-vocab-single-card,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-info-card,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-mcq-single-card,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-board-overlay {
  max-width: 960px;    /* try 900–1000px; adjust to taste */
}

/* Reading strip text bigger + comfier in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-reading-strip {
  padding: 1rem 1.5rem;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-reading-strip-line {
  font-size: 1.1em;          /* relative to the bumped base */
  line-height: 1.6;
}


/* “Check” button bigger in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-match-check,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-btn {
  font-size: 1rem;
  padding: 0.55rem 1.4rem;
  min-width: 96px;
}

/* Grammar / MCQ cards bigger in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-mcq-single-card,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-board-overlay {
  padding: 1.5rem 2rem;
}

/* MCQ options text slightly larger */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-mcq-option {
  font-size: 1rem;
}

/* ========= Fullscreen sizing for kids lessons ========= */


* Flipcards */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-flip-word {
  font-size: 1.2em;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-flip-sentence,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-flip-definition {
  font-size: 1.1em;
  line-height: 1.35;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-flip-img img {
  max-height: 220px;
}


							  
/* Check buttons + generic lesson buttons */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-match-check,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-btn,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-mcq-send,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-check-group {
  font-size: 1.35rem;
  padding: 0.6rem 1.4rem;
  min-width: 100px;
}

/* --- 3) MCQ slides (all kinds) --- */

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-mcq-option {
  font-size: 1.15rem;
  padding: 0.45rem 0.75rem;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-mcq-option input {
  transform: scale(1.25);
}

/* Group MCQ overlay card */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-mcq-single-card,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-board-overlay {
  padding: 1.5rem 2rem;
}



/* ---------- FULLSCREEN – VOCAB FLIP CARDS (compact) ---------- */

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-flip-grid {
  max-width: 1100px;
  margin: 0 auto 0.75rem;
  gap: 1rem;
}

/* Keep basically the same height as normal view */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-flip-card {
  height: 220px;
  min-height: 0;     /* unset the old big min-heights */
}

							  
/* Remove white card / shadow when a writing board is present */
.fl-placement-demo.fl-kids-lesson .fl-kids-question-card.fl-kids-writing-card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}



/* ---------- FULLSCREEN – SPEAKING IMAGE GRID (6 PICTURES) ---------- */


/* Turn the row into a 3x2 grid in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-image-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 1.5rem;
}


// /* Image inside the card */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-image-card img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  display: block;
}

							  
							  
	/* --- 5) Reading / listening story strip text --- */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-reading-strip {
  padding: 1rem 1.25rem;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-reading-strip-line {
  font-size: 1.25em;
  line-height: 1.6;
}

 /* FULLSCREEN: Scale the entire phone card */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen 
    .fl-kids-dialogue-phone-inner {
    transform: scale(1.05);
    transform-origin: top center;
}

/* Optional: prevent layout clipping */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen 
    .fl-kids-dialogue-phone {
    overflow: visible !important;
}

							  
/* ---------- FULLSCREEN TYPOGRAPHY BOOST ---------- */

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen {
  font-size: 1.05rem; /* gentle base bump for everything */
}


/* Ensure header + teacher notes are always above scene content */
.fl-placement-demo.fl-kids-lesson .fl-placement-header,
.fl-placement-demo.fl-kids-lesson .fl-kids-teacher-notes {
  position: relative;
  z-index: 30;
}

/* Reading strip overlay should sit under the teacher notes */
.fl-placement-demo.fl-kids-lesson .fl-reading-strip-overlay {
  z-index: 10;
}

/* Anchor chart layout: use whole scene area, no cropping */
.fl-placement-demo.fl-kids-lesson.fl-kids-anchor-full .fl-placement-scene {
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #f1e5da;
}

/* Fix phone size in FULL SCREEN only */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-phone {
  transform: scale(1.1);
  transform-origin: top center;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-phone-frame {
  max-width: 780px !important;
}

/* --- Fullscreen vertical layout guard (new) --- */

/* Fullscreen kids lesson fills the viewport and uses header / window / footer */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen {
  height: 100vh;
  overflow: hidden;        /* don’t scroll the page behind */
  display: flex;
  flex-direction: column;
}

/* Middle window (cards, match grids, reading, video, etc.) scrolls if needed */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-placement-window {
  flex: 1;
  min-height: 0;           /* let flexbox shrink this */
  max-height: calc(100vh - 150px);  /* space for header + footer row */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Give a little breathing room at the bottom of the main card
   so Back/Next never sit on top of the last row of content */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-question {
  padding-bottom: 1.5rem;
}

/* ------------------------------
   GLOBAL: Stabilize slide height
   ------------------------------ */

/* Main content window inside the green frame */
.fl-placement-demo.fl-kids-lesson .fl-placement-window {
  min-height: 440px;   /* sweet spot for your layout */
  display: flex;
  align-items: stretch;
}

/* When in full_story mode (grammar poster, reading anchor, etc.) */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-story .fl-placement-window {
  min-height: 480px;   /* slightly taller because these are always visual */
}

/* Optional: add a min-height to the scene itself */
.fl-placement-demo.fl-kids-lesson .fl-placement-scene {
  min-height: 300px;   /* ensures the image never collapses */
}


/* Centre Back / Next between copyright + fullscreen */
  .fl-kids-nav-footer{
    display:flex;
    justify-content:center;
    gap:.75rem;
    flex:1;
  }

  .fl-kids-nav-footer .fl-kids-btn{
    border-radius:.75rem;
    padding:.4rem .9rem;
    border:1px solid #d1d5db;
    background:#ffffff;
    cursor:pointer;
  }
							  
/* ==========================================
   SHORT VIEWPORT FIX (co-browser / split view)
   Keep Back / Next visible – scroll the middle
   ========================================== */
@media (max-height: 750px) {

  /* Reduce vertical padding inside the green frame a bit */
  .fl-placement-demo.fl-kids-lesson {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* Let the main window flex + scroll instead of enforcing a tall min-height */
  .fl-placement-demo.fl-kids-lesson .fl-placement-window {
    min-height: auto;                          /* remove 540/600px constraint */
    max-height: calc(100vh - 150px);           /* room for header + footer */
    overflow-y: auto;                          /* scroll only the middle */
  }

	  /* Flipcards: more compact on short screens */
  .fl-placement-demo.fl-kids-lesson .fl-kids-flip-heading {
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.6rem;
  }

  .fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid {
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  }

	
  /* Make sure scene-style slides (video + full_story) respect that height */
  .fl-placement-demo.fl-kids-lesson .fl-placement-scene,
  .fl-placement-demo.fl-kids-lesson .fl-kids-video-wrapper {
    max-height: 100%;
  }
}

/* ==========================================
   FINAL OVERRIDES – keep nav visible
   ========================================== */

/* Fullscreen kids lesson: header + scrollable middle + footer */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* don’t scroll the page behind */
}

/* Middle window becomes the scroll container in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-placement-window {
  flex: 1 1 auto;
  min-height: 0 !important;                    /* beat the 440px rule */
  max-height: calc(100vh - 150px) !important;  /* room for header + footer */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Give content inside the main card a little space above Back/Next */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-question {
  padding-bottom: 1.5rem;
}

/* Short viewport (co-browser / split screen), non-fullscreen */
@media (max-height: 750px) {
  .fl-placement-demo.fl-kids-lesson:not(.fl-placement-demo--fullscreen) .fl-placement-window {
    min-height: 0 !important;
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

							  
/* ==========================================
   FULLSCREEN – vocab_single full_card (cleaned)
   ========================================== */

/* Bigger vocab card in fullscreen, but still centred */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-full-card 
  .fl-kids-vocab-single-card {
  max-width: 900px;                 /* was 840 / 720 earlier */
  padding: 1.5rem 2rem 1.75rem;     /* closer to normal card padding */
}

/* Fullscreen image: bigger, fills frame, rounded corners */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-full-card 
  .fl-kids-vocab-single-img img {
  width: 100%;
  height: auto;
  max-height: 450px;                /* more presence than 260px */
  object-fit: cover;                /* no letterboxing */
  border-radius: 24px;              /* keep the soft corners */
}

/* Text size on the card – modest bump */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-full-card 
  .fl-kids-vocab-single-word {
  font-size: 1.3rem;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-full-card 
  .fl-kids-vocab-single-def {
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Reduce extra “air” around the classroom shell in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen 
  .fl-placement-window.fl-kids-vocab-bg {
  padding: 16px 32px 24px;
}


/* Chalkboard board: remove flex gap so p + ul aren’t miles apart */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board .fl-kids-writing-lines {
  gap: 0;  /* or 0.25rem if you want a tiny bit of extra air */
}

/* Now you can control spacing just with margins */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board p {
  margin: 0.3rem 0;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board ul {
  margin: 0.25rem 0 0.3rem 1.25rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board ul li {
  margin-bottom: 0.25rem;
}
							  
 /* ==========================================
   FULLSCREEN – WHAT'S MISSING GRID (compact)
   ========================================== */

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-whm-grid {
  max-width: 1100px;                       /* center the grid */
  margin: 0.5rem auto 0.75rem;
  grid-template-columns: repeat(3, minmax(180px, 1fr)); /* smaller columns */
  gap: 1rem;
}

/* Cards a bit tighter in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-whm-card {
  padding: 0.45rem;
}

/* Images: stay square, but with a hard height cap */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-whm-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 220px;        /* 🔹 key line: keeps each row shorter */
  object-fit: cover;
  border-radius: 16px;
}

/* Caption text slightly smaller so it doesn’t add extra height */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-whm-caption {
  font-size: 0.85rem;
}

						  


/* === CNY ADDITIONS === */

/* ===============================
   TITLE SLIDE – FULL BLEED COVER
   (lesson-local)
   =============================== */

.fl-title-slide{
  position: relative;
  width: 100%;
  height: min(76vh, 640px);
  border-radius: 24px;
  overflow: hidden;
}

/* Full-bleed image */
.fl-title-slide-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay panel for title */
.fl-title-slide-overlay{
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 40px;

  padding: 18px 22px;
  border-radius: 20px;

  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.2);

  text-align: left;
}

/* Title typography */
.fl-title-slide-overlay h1{
  margin: 0 0 6px 0;
  font-size: 2.2rem;
  font-weight: 700;
  color: #27537a;
}

.fl-title-slide-overlay h2{
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #596c10;
}

/* Fullscreen tweaks */
.fl-placement-demo--fullscreen .fl-title-slide{
  height: min(82vh, 760px);
}

.fl-title-slide{
    height: 78vh;
    border-radius: 18px;
  }

.fl-title-slide-overlay{
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 14px 16px;
  }

.fl-title-slide-overlay h1{
    font-size: 1.8rem;
  }

.fl-title-slide-overlay h2{
    font-size: 1.2rem;
  }

from {
    opacity: 0;
    transform: translateY(12px);
  }

to {
    opacity: 1;
    transform: translateY(0);
  }

.fl-title-slide-overlay{
  animation: fl-cover-rise 0.45s ease-out both;
}

/* Grid: 3 columns on wide screens (6 items = 2 rows) */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-grid {
  display: grid;
  gap: 1.1rem;
  margin-top: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* was 4 */
}

/* --- Match grid: 3 columns + slightly tighter spacing --- */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;                /* was 1.1rem */
  margin-top: 0.5rem;         /* was 0.75rem */
}

/* --- Make each match card shorter --- */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card{
  border-radius: 18px;
}

/* Reduce internal padding (if your card has an inner wrapper) */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card-inner{
  padding: 0.9rem;            /* adjust if needed */
}

/* Cap the image area height so cards don’t balloon */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card img{
  max-height: 240px;          /* try 220–260 */
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ======================================
   Chinese New Year background theme
   ====================================== */
.fl-placement-demo.fl-kids-lesson .bg-cnyclassroom {
  background-image: url('https://florentislearning.ca/wp-content/uploads/kids-lessons/chinese-new-year/cny-classroom.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fl-placement-demo.fl-kids-lesson .bg-cnybkgd {
  background-image: url('https://florentislearning.ca/wp-content/uploads/kids-lessons/chinese-new-year/cny-bkgd.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------
   Full-card shell for non-classroom2 themes
   (JS wraps these in .fl-adult-card-overlay)
   -------------------------------------------------- */

.fl-placement-demo.fl-kids-lesson .fl-adult-card-overlay{
  position: relative;
  max-width: 900px;
  margin: 0 auto 2rem auto;
  padding: 2rem 2.5rem;
  border-radius: 28px;

  /* “clean card overlay” look */
  background: rgba(255,255,255,0.92);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

/* Optional: match your title spacing/contrast */
.fl-placement-demo.fl-kids-lesson .fl-adult-card-overlay h2{
  color: #172830;
  margin-bottom: 0.35rem; /* aligns with your tightened title rule */
}

/* FULL-WIDTH activities: remove the big white outer card */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-width .fl-kids-question{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;          /* optional but usually needed */
}



/* === GRAMMAR ADDITIONS === */

/* ==========================================
   VOCAB MATCH – responsive by card count
   ========================================== */

/* Base grid: 2 columns by default */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-grid {
  display: grid;
  gap: 1.1rem;
  margin-top: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* default: 2 cols */
}

/* 2 cards → 2 columns (2 × 1) */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3 cards → 3 in one row */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-grid[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 4 cards → 2 × 2 */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-grid[data-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 5 cards → 3 + 2 */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-grid[data-count="5"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 6 cards → 3 × 2 */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-grid[data-count="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Full-width layout (no column override; just sizing) */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-width .fl-kids-question {
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
}

.fl-placement-demo.fl-kids-lesson.fl-kids-full-width .fl-kids-match-grid {
  max-width: 1200px;
  margin: 0.25rem auto 0.75rem;
  padding: 0.5rem 1.5rem 0.75rem;
}

/* Match card base */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 0.8rem 1rem 0.9rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

/* Image on each card – fixed-ish height but not huge */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-img img {
  width: 100%;
  display: block;
  border-radius: 18px;
  margin-bottom: 0.4rem;
  aspect-ratio: 4 / 3;
  max-height: 150px;
  object-fit: cover;
}

/* Dropdown styling */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-select {
  width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  font-size: 0.95rem;
}

/* Fullscreen tweaks – small, not huge */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-full-width .fl-kids-match-card {
  padding: 0.9rem 1.1rem 1rem;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-full-width .fl-kids-match-img img {
  max-height: 170px;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-full-width .fl-kids-match-select {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

/* Correct / incorrect highlight */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card.correct {
  border: 2px solid #16a34a;
}

/* Correct / incorrect highlight */
.fl-placement-demo.fl-kids-lesson .fl-kids-match-card.correct {
  border: 2px solid #16a34a;
}

/* 3 x 2 grid */
.fl-placement-demo.fl-kids-lesson .fl-kids-whm-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-whm-card img {
  display: block;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 0.35rem;
}

/* ----------------------------------------- */
/*  			Vocab flipcard grid 		 */
/* ----------------------------------------- */

/* Each flipcard container */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-card {
  perspective: 1200px;
  height: 220px;             /* adjust if you want taller/shorter cards */
  cursor: pointer;
}

/* Inner element that actually flips */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

/* Flipped state */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-card.is-flipped .fl-kids-flip-inner {
  transform: rotateY(180deg);
}

/* Front + back faces */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,0.18);
  backface-visibility: hidden;
  padding: 0.45rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Back is rotated */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-back {
  transform: rotateY(180deg);
}

/* Image on the front */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-img {
  width: 100%;
  height: 80%;
  margin-bottom: 0.3rem;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 0.05rem;
}

/* Word text on front */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-word {
  font-size: 1.15rem;
  font-weight: 700;
  color: #172830;
  text-align: center;
}

/* Sentence on back */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-sentence {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin: 0 0 0.4rem;
  color: #172830;
}

/* Optional definition on back */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-definition {
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
  color: #4b5563;
}

/* Base flip grid */
/* Auto-grid by number of cards */


/* Heading + instruction above flip grid */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-heading {
  max-width: 1000px;
  margin: 0 auto 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.85); /* soft, not too “pill-y” */
  box-shadow: 0 4px 14px rgba(15,23,42,0.12);
}

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-heading .fl-kids-flip-sub {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: #374151;
}

/* ---------- Flipcards polish ONLY ---------- */

/* Card: a bit shorter + nicer hover */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-card {
  perspective: 1200px;
  height: 200px;                /* tweak if needed */
  cursor: pointer;
}

/* Front/back faces – keep as white “pills” */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-face {
  border-radius: 24px;
}

/* Image container gets rounded corners + soft background */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-img {
  width: 100%;
  height: 70%;
  margin-bottom: 0.4rem;
  border-radius: 18px;
  overflow: hidden;
  background: #f9fafb;          /* subtle grey so “letterbox” feels intentional */
}

/* Image uses full frame but keeps corners rounded */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* show full playground / ball / pets */
  border-radius: inherit;       /* rounded corners like match cards */
  display: block;
}

/* Front word label */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-word {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 0.1rem;
}

/* Back sentence – slightly larger & centered */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-sentence {
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  padding: 0 0.75rem;
}

/* Optional finer-print definition */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-definition {
  font-size: 0.9rem;
  margin-top: 0.35rem;
  padding: 0 0.75rem;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-hint {
  font-size: 0.9rem;
  opacity: 0.9;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-sub {
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 0.25rem;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Classroom background behind full-card vocab slides */
.fl-placement-window.fl-kids-vocab-bg {
  background-image: url("https://florentislearning.ca/wp-content/uploads/kids-lessons/thankful-tree/classroom-2-min.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  border-radius: 40px;   /* keeps it inside the green frame */
  padding: 40px 48px;    /* room so the vocab card isn’t touching the edges */
}

/* ========= Fullscreen sizing for kids lessons ========= */


* Flipcards */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-flip-word {
  font-size: 1.15em;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-flip-sentence,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-flip-definition {
  font-size: 1.15em;
  line-height: 1.6;
}

/* Keep basically the same height as normal view */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-flip-card {
  height: 190px;
  min-height: 0;     /* unset the old big min-heights */
}

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-card {
    height: 160px;   /* extra compact in co-browser */
  }

/* Fullscreen image: bigger, fills frame, rounded corners */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-full-card 
  .fl-kids-vocab-single-img img {
  width: 100%;
  height: auto;
  max-height: 400px;                /* more presence than 260px */
  object-fit: cover;                /* no letterboxing */
  border-radius: 24px;              /* keep the soft corners */
}


/* =============================================================================
   ADAPTER ADDITIONS — all scoped, no !important wars
   ============================================================================= */

/* ── Reward widget (original template structure) ── */
.fl-placement-demo.fl-kids-lesson .fl-reward-wrap { display:flex; align-items:center; gap:.35rem; }
.fl-placement-demo.fl-kids-lesson .fl-reward-gear { background:none; border:none; cursor:pointer; font-size:1rem; padding:.2rem; opacity:.6; }
.fl-placement-demo.fl-kids-lesson .fl-reward-gear:hover { opacity:1; }
.fl-placement-demo.fl-kids-lesson .fl-reward-stars { display:flex; align-items:center; gap:.15rem; }
.fl-placement-demo.fl-kids-lesson .fl-reward-star-btn { background:none; border:none; cursor:pointer; font-size:1.3rem; padding:.1rem; transition:transform .1s; }
.fl-placement-demo.fl-kids-lesson .fl-reward-star-btn:hover { transform:scale(1.2); }
.fl-placement-demo.fl-kids-lesson .fl-reward-reset,
.fl-placement-demo.fl-kids-lesson [data-reward-reset] { display:none !important; }

/* ── New reward fire button + picker ── */
.fl-adapter-reward-wrap { position:relative; display:flex; align-items:center; margin-right:.25rem; }
.fl-adapter-reward-fire { display:flex; align-items:center; gap:5px; background:#fff; border:1.5px solid rgba(23,40,48,.14); border-radius:999px; padding:5px 10px 5px 8px; cursor:pointer; font-family:inherit; font-size:.82rem; box-shadow:0 2px 6px rgba(15,23,42,.1); white-space:nowrap; }
.fl-adapter-reward-fire:hover { border-color:#596c10; }
.fl-adapter-rw-emoji { font-size:1.2rem; line-height:1; }
.fl-adapter-rw-label { font-weight:800; color:#172830; }
.fl-adapter-rw-count { font-size:.68rem; color:rgba(23,40,48,.42); font-weight:600; }
.fl-adapter-rw-caret { font-size:.65rem; color:rgba(23,40,48,.35); }
.fl-adapter-reward-picker { display:none; position:absolute; top:calc(100% + 7px); right:0; background:#fff; border:1px solid rgba(23,40,48,.1); border-radius:14px; box-shadow:0 10px 28px rgba(15,23,42,.18); padding:5px; z-index:9001; min-width:158px; }
.fl-adapter-reward-picker.is-open { display:block; }
.fl-adapter-pick-item { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px; cursor:pointer; border:none; background:none; width:100%; font-family:inherit; font-size:.85rem; }
.fl-adapter-pick-item:hover { background:rgba(89,108,16,.07); }
.fl-adapter-pick-item.is-active { background:#f4d488; }
.fl-adapter-pick-emoji { font-size:1.2rem; }
.fl-adapter-pick-name { font-weight:700; color:#172830; flex:1; }
.fl-adapter-pick-count { font-size:.72rem; color:rgba(23,40,48,.4); }

/* ── Tip toggle button ── */
.fl-placement-demo.fl-kids-lesson [data-kids-teacher-toggle] { background:#f4d488; border:none; border-radius:999px; padding:.3rem .7rem; font-size:1rem; font-weight:700; cursor:pointer; color:#172830; white-space:nowrap; }
.fl-placement-demo.fl-kids-lesson [data-kids-teacher-toggle]:hover { background:#f1c840; }

/* ── Teacher notes strip: hidden ── */
.fl-placement-demo.fl-kids-lesson .fl-kids-teacher-notes { display:none !important; }

/* ── Fullscreen button: rounded ── */
.fl-placement-demo.fl-kids-lesson .fl-fullscreen-toggle { border-radius:999px !important; }

/* ── Pen bar in footer ── */
.fl-placement-demo.fl-kids-lesson [data-kids-penbar],
.fl-placement-demo.fl-kids-lesson .fl-kids-penbar { display:inline-flex !important; align-items:center; gap:5px; position:static !important; top:auto !important; left:auto !important; transform:none !important; }

/* ── Reward celebrate overlay ── */
.fl-reward-celebrate { display:none; position:fixed; inset:0; z-index:999999; pointer-events:none; align-items:center; justify-content:center; flex-direction:column; gap:.5rem; }
.fl-reward-celebrate.is-active { display:flex; }
.fl-reward-celebrate-emoji { font-size:clamp(6rem,15vw,10rem); line-height:1; filter:drop-shadow(0 8px 24px rgba(0,0,0,.4)); }
@keyframes fl-reward-pop { 0%{transform:scale(0);opacity:0} 15%{transform:scale(1.3);opacity:1} 50%,82%{transform:scale(1);opacity:1} 100%{transform:scale(.7);opacity:0} }
.fl-reward-canvas { position:absolute; inset:0; width:100%; height:100%; }
.fl-reward-rocket-el { position:absolute; left:50%; bottom:-140px; transform:translateX(-50%); pointer-events:none; }

/* =============================================================================
   COVER SLIDE — full_card with .fl-title-slide
   Scoped only to slides that actually CONTAIN .fl-title-slide
   ============================================================================= */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-kids-question:has(> .fl-title-slide) {
  padding:0 !important; background:none !important; box-shadow:none !important; overflow:hidden !important;
  display:flex; flex-direction:column;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-kids-question > .fl-title-slide {
  flex:1 1 auto; width:100%; min-height:400px; border-radius:0 !important;
}

/* Also ensure window/sidebar chain fills for full_card with title slide */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card:has(.fl-title-slide) .fl-placement-window {
  display:flex !important; flex-direction:column !important; padding:0 !important; overflow:hidden !important;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card:has(.fl-title-slide) .fl-placement-sidebar {
  flex:1 1 auto !important; width:100% !important; display:flex !important; flex-direction:column !important;
}

/* Cover title slide styles */
.fl-placement-demo.fl-kids-lesson .fl-title-slide {
  position:relative; width:100%; height:100%; min-height:440px;
  background:#172830; border-radius:18px; overflow:hidden;
  padding:0 !important; text-align:left;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.fl-placement-demo.fl-kids-lesson .fl-title-slide img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  border-radius:0; box-shadow:none; max-width:none; display:block;
}
.fl-placement-demo.fl-kids-lesson .fl-title-slide::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:50%;
  background:linear-gradient(to top, rgba(15,24,42,.78) 0%, rgba(15,24,42,.3) 65%, transparent 100%);
  z-index:1; border-radius:0 0 18px 18px;
}
.fl-placement-demo.fl-kids-lesson .fl-title-slide h1 {
  position:relative; z-index:2; margin:0 0 .3rem;
  font-size:clamp(1.6rem,3vw,2.4rem); font-weight:900;
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.55);
  padding:0 1.75rem;
}
.fl-placement-demo.fl-kids-lesson .fl-title-slide h2 {
  position:relative; z-index:2; margin:0;
  font-size:clamp(1rem,1.8vw,1.5rem); font-weight:700;
  color:rgba(255,255,255,.9); text-shadow:0 1px 8px rgba(0,0,0,.5);
  padding:0 1.75rem 1.5rem;
}
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-title-slide h1 { font-size:clamp(2rem,4vw,3rem); }
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-title-slide h2 { font-size:clamp(1.25rem,2.2vw,1.9rem); }

/* =============================================================================
   SPLIT LAYOUT — 2/3 image : 1/3 white card
   Only applied when adapter adds .fl-kids-split-layout to root
   Does NOT touch full_card, full_story, or any slide without this class
   ============================================================================= */
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-placement-window {
  display:flex !important; align-items:stretch; gap:0; overflow:hidden;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-placement-scene {
  flex:0 0 62% !important; border-radius:18px 0 0 18px !important;
  background-size:cover !important; background-position:center !important;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-placement-sidebar {
  flex:0 0 38% !important; background:#fff; border-radius:0 18px 18px 0 !important;
  padding:1.5rem 1.5rem 1.25rem; box-shadow:-4px 0 18px rgba(15,23,42,.08);
  overflow-y:auto; display:flex; flex-direction:column;
}
/* Remove inner white card — sidebar IS the card */
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-question {
  background:transparent !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important; flex:1;
}
/* Suppress writing-mode dark window on split slides */
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout.fl-kids-writing-mode .fl-placement-window {
  background:var(--fl-beige, #f1e5da) !important; background-image:none !important;
}

/* Content styles inside split sidebar — scoped to split-layout only */
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-question h2 {
  font-size:1.05rem; font-weight:800; color:#172830; margin:0 0 .85rem;
  padding-bottom:.65rem; border-bottom:2px solid #f4d488;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-question > p {
  font-size:1rem; line-height:1.6; color:#374151; margin:0 0 .6rem;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-question-meta {
  font-size:.8rem; color:#6b7280; margin-bottom:.35rem;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-audio,
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout audio {
  width:100%; margin-bottom:.75rem; border-radius:8px; display:block;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-mcq-option {
  border-radius:999px; border:1px solid #e5e7eb; background:#f9fafb;
  padding:.6rem .95rem; font-size:.95rem; display:flex; align-items:center;
  gap:8px; cursor:pointer; margin-bottom:.5rem;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-mcq-option:hover { border-color:#596c10; }
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-mcq-option.correct { border-color:#16a34a; background:#f0fdf4; }
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-mcq-option.incorrect { border-color:#dc2626; background:#fef2f2; }
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-mcq-send {
  border-radius:999px; border:none; padding:.55rem 1.35rem; background:#596c10;
  color:#fff; font-weight:700; font-size:.95rem; cursor:pointer; margin-top:.5rem;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-mcq-send:disabled { background:#94a3b8; }

/* Fill multi in split */
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-writing-board {
  background:transparent !important; border:none !important; box-shadow:none !important;
  color:#172830 !important; padding:0 !important; margin:0 !important;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-writing-board h2 {
  color:#172830 !important; font-size:1.05rem; font-weight:800;
  margin:0 0 .85rem; padding-bottom:.65rem; border-bottom:2px solid #f4d488;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-fillmulti-row {
  display:flex; align-items:center; flex-wrap:wrap; gap:4px;
  padding:.5rem 0; border-bottom:1px solid rgba(23,40,48,.08);
  font-size:.95rem; color:#172830;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-fillmulti-text { color:#172830; }
/* Override the writing board's span/label white !important for split layout */
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-writing-board span,
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-writing-board label,
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-writing-board p { color:#172830 !important; }
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-fillmulti-num { font-weight:800; color:#596c10; }
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-fillmulti-select {
  padding:.32rem .6rem; border:1.5px solid #d1d5db; border-radius:8px;
  font-size:.9rem; background:#f9fafb; color:#172830; font-family:inherit;
}

/* Writing fill in split */
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-writing-lines { display:flex; flex-direction:column; gap:.75rem; }
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-writing-line { border-bottom:2px solid rgba(23,40,48,.15); padding-bottom:.4rem; }
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-writing-input {
  width:100%; background:transparent; border:none; font-size:1rem;
  color:#172830; padding:.3rem 0; outline:none; font-family:inherit;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-writing-prompts {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:.85rem;
  padding-top:.75rem; border-top:1px solid rgba(23,40,48,.08);
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-writing-prompt-chip {
  background:#f1e5da; border:1.5px solid #596c10; color:#27537a;
  border-radius:999px; padding:.28rem .75rem; font-size:.82rem;
  font-weight:600; cursor:pointer; font-family:inherit;
}

/* True/false in split — plain list, readable */
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-tf-list {
  background:none !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; max-width:100% !important;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-tf-item {
  border-bottom:1px solid rgba(23,40,48,.08); padding:.5rem 0;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-kids-tf-statement { color:#172830; font-size:.95rem; }

/* Listening pic MCQ in split */
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-listening-pic-inner {
  background:transparent; padding:0; border-radius:0;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-listening-pic-grid {
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px;
}

/* Mobile */
@media (max-width:860px) {
  .fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-placement-window { flex-direction:column; }
  .fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-placement-scene { flex:0 0 auto !important; min-height:220px; border-radius:18px 18px 0 0 !important; }
  .fl-placement-demo.fl-kids-lesson.fl-kids-split-layout .fl-placement-sidebar { flex:1 !important; border-radius:0 0 18px 18px !important; }
}

/* Fullscreen split */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-split-layout .fl-placement-scene { flex:0 0 62% !important; }
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-split-layout .fl-placement-sidebar { flex:0 0 38% !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTHORITATIVE SECTION — written after full audit of all prior rules.
   These are the single source of truth for: MCQ Slider, Vocab Flip, Memory.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. VOCAB FLIP GRID ────────────────────────────────────────────────── */

/* Remove the 40px 48px window padding that was squeezing the grid in full_card */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card
  .fl-placement-window.fl-kids-vocab-bg {
  padding: 0 !important;
}
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card
  .fl-placement-window.fl-kids-vocab-bg
  .fl-kids-question {
  padding: 0.75rem !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Flip card height — single authoritative value */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-card {
  height: 240px !important;
}

/* Column layout by card count — scoped to beat all earlier unscoped rules */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid[data-count="1"] {
  grid-template-columns: 1fr !important;
}
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid[data-count="2"],
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid[data-count="3"],
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid[data-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid[data-count="5"],
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid[data-count="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* 4-word 2×2: taller cards, they have more width to play with */
.fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid[data-count="4"] .fl-kids-flip-card {
  height: 270px !important;
}

/* ─── 2. MCQ GROUP SLIDER ───────────────────────────────────────────────── */

/* Board overlay width in full_card — fill the classroom background */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-kids-board-overlay,
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-adult-card-overlay {
  width: min(880px, 94%) !important;
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
}

/* Slider fills its overlay */
.fl-kids-board-overlay .fl-mcq-slider,
.fl-adult-card-overlay .fl-mcq-slider {
  width: 100% !important;
}

/* Progress bar, viewport, items, options, footer all fill slider width */
.fl-mcq-slider-progress,
.fl-mcq-slider-viewport,
.fl-mcq-slider-footer {
  width: 100% !important;
  box-sizing: border-box !important;
}
.fl-mcq-slider-viewport .fl-kids-mcq-group-item,
.fl-mcq-slider-viewport .fl-mcq-form,
.fl-mcq-slider-viewport .fl-mcq-option {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.fl-mcq-slider-footer {
  justify-content: center !important;
}

/* Remove legacy board-overlay width cap (line 4807: width:min(600px,88%)) */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card
  .fl-kids-board-overlay:has(.fl-mcq-slider) {
  width: min(880px, 94%) !important;
  max-width: 880px !important;
}

/* mcq-group after adapter runs: no grid constraints on the group wrapper */
.fl-placement-demo.fl-kids-lesson .fl-kids-mcq-group {
  max-width: none !important;
}
.fl-placement-demo.fl-kids-lesson .fl-kids-mcq-group.fl-kids-mcq-group--single {
  grid-template-columns: 1fr !important;
  max-width: none !important;
  width: 100% !important;
}

/* Hide the fallback footer (slider manages its own buttons) */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card
  .fl-kids-board-overlay .fl-kids-mcq-group-footer,
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card
  .fl-adult-card-overlay .fl-kids-mcq-group-footer {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MCQ SLIDER — progress bar, dots, feedback, nav buttons
   (These were lost when the MCQ slider section was cut. Restored here.)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes fl-slider-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.fl-mcq-slider { display:flex; flex-direction:column; gap:0; width:100%; }
.fl-mcq-slider-progress { display:flex; align-items:center; gap:10px; margin-bottom:.9rem; background:rgba(255,255,255,.15); border-radius:999px; padding:6px 12px; width:100%; box-sizing:border-box; }
.fl-mcq-slider-bar { height:6px; background:#f4d488; border-radius:999px; transition:width .35s; flex:1 1 auto; order:1; min-width:20px; }
.fl-mcq-slider-dots { display:flex; align-items:center; gap:6px; flex:0 0 auto; order:2; }
.fl-mcq-slider-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.3); border:1.5px solid rgba(255,255,255,.5); transition:background .2s,transform .15s; }
.fl-mcq-slider-dot.is-current { background:#f4d488; border-color:#f4d488; transform:scale(1.3); }
.fl-mcq-slider-dot.is-correct { background:#86efac; border-color:#4ade80; }
.fl-mcq-slider-dot.is-incorrect { background:#fca5a5; border-color:#f87171; }
.fl-mcq-slider-label { font-size:.78rem; font-weight:700; color:rgba(255,255,255,.7); white-space:nowrap; flex:0 0 auto; order:3; }

.fl-mcq-slider-viewport { width:100% !important; max-width:none !important; }
.fl-kids-mcq-group-item { background:rgba(255,255,255,.97); border-radius:18px; padding:1.1rem 1.25rem; box-shadow:0 4px 16px rgba(15,23,42,.15); animation:fl-slider-in .22s ease forwards; width:100% !important; max-width:none !important; box-sizing:border-box; }

.fl-mcq-slider-footer { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:.85rem; width:100% !important; }
.fl-mcq-slider-prev, .fl-mcq-slider-next { padding:.48rem 1.1rem !important; font-size:.9rem !important; border-radius:999px !important; background:rgba(255,255,255,.18) !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.4) !important; box-shadow:none !important; }
.fl-mcq-slider-check { flex:1; max-width:180px; padding:.52rem 1.3rem !important; font-size:.95rem !important; border-radius:999px !important; background:#596c10 !important; color:#fff !important; border:none !important; }
.fl-mcq-slider-check:hover { background:#4a5a0c !important; }
.fl-mcq-slider-fb { font-size:.9rem; font-weight:700; min-height:1.4em; margin-top:.5rem; padding:.4rem .75rem; border-radius:10px; color:#fff; }
.fl-mcq-slider-fb:empty { display:none; }
.fl-mcq-slider-fb.is-correct { background:rgba(74,222,128,.2); color:#d1fae5; }
.fl-mcq-slider-fb.is-incorrect { background:rgba(248,113,113,.2); color:#fee2e2; }
.fl-mcq-slider-fb.is-nudge { background:rgba(244,212,136,.2); color:#fef3c7; }
.fl-mcq-slider-summary { display:none; margin-top:.75rem; padding:.65rem 1rem; border-radius:12px; font-size:.95rem; font-weight:700; text-align:center; }
.fl-mcq-slider-summary.is-all-correct { background:rgba(22,163,74,.15); color:#14532d; }
.fl-mcq-slider-summary.is-some-wrong { background:rgba(161,98,7,.12); color:#78350f; }

/* Options inside slider */
.fl-mcq-slider-viewport .fl-mcq-option { border-radius:999px; border:1px solid #e5e7eb; background:#f9fafb; padding:.6rem .95rem; font-size:.95rem; display:flex; align-items:center; gap:8px; cursor:pointer; margin-bottom:.45rem; width:100% !important; box-sizing:border-box; }
.fl-mcq-slider-viewport .fl-mcq-option:hover { border-color:#596c10; }
.fl-mcq-slider-viewport .fl-mcq-option.correct { border-color:#16a34a !important; background:#f0fdf4 !important; }
.fl-mcq-slider-viewport .fl-mcq-option.incorrect { border-color:#dc2626 !important; background:#fef2f2 !important; }
.fl-mcq-slider-viewport .fl-mcq-form { width:100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   MEMORY GAME — fix beige background on full_story layout
   The beige comes from the fl-placement-window showing through when the
   scene hasn't been given a background. On full_story the scene fills
   the window. The ipad-shell keeps its dark frame (needed for video too).
   ═══════════════════════════════════════════════════════════════════════════ */

/* full_story + vocab-bg: remove the big padding so the scene fills cleanly */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-story
  .fl-placement-window.fl-kids-vocab-bg {
  padding: 0 !important;
  /* Keep background-image so classroom2 theme shows behind the scene */
}

/* When the scene has its own bg image (memory/video slides), don't show the
   classroom image behind it — the scene bg covers the window */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-story
  .fl-placement-scene[style*="background-image"] {
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VOCAB FLIP — explicit width fix
   Without width:100% the grid has no explicit size so 1fr fractions
   collapse to content width, making cards tall and thin.
   ═══════════════════════════════════════════════════════════════════════════ */

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-grid {
  width: 100% !important;
  box-sizing: border-box !important;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-card {
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;   /* prevent flex/grid blowout */
}

.fl-placement-demo.fl-kids-lesson .fl-kids-flip-inner {
  width: 100% !important;
  min-width: 0 !important;
}

/* Question container in full_card must also be width:100% so the grid
   has a definite size to base 1fr fractions on */
.fl-placement-demo.fl-kids-lesson.fl-kids-full-card .fl-kids-question {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   FILL MULTI — classroom2 final fix
   Specific repair for grammar fill-multi slides
   ========================================================= */

/* Make the whole slide use the classroom scene area, not a tiny band */
.fl-placement-demo.fl-kids-lesson .fl-placement-window:has(.fl-kids-fillmulti) {
  min-height: 560px !important;
  align-items: stretch !important;
}

.fl-placement-demo.fl-kids-lesson .fl-placement-window:has(.fl-kids-fillmulti) .fl-placement-scene {
  min-height: 560px !important;
  height: 560px !important;
  background-size: cover !important;
  background-position: center center !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* In fullscreen, give the classroom more vertical space */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-placement-window:has(.fl-kids-fillmulti) {
  min-height: calc(100vh - 170px) !important;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-placement-window:has(.fl-kids-fillmulti) .fl-placement-scene {
  min-height: calc(100vh - 170px) !important;
  height: calc(100vh - 170px) !important;
}

/* Remove notebook-shell behaviour for this slide type */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board:has(.fl-kids-fillmulti) {
  width: 100% !important;
  max-width: 980px !important;
  margin: 42px auto 0 !important;
  padding: 0 24px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: visible !important;
}

/* Center the dark card properly */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board:has(.fl-kids-fillmulti) .fl-kids-writing-lines.fl-kids-fillmulti {
  width: min(82%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  background: rgba(18, 32, 40, 0.92) !important;
  border-radius: 22px !important;
  padding: 26px 34px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.32) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Title must be readable on classroom background */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board:has(.fl-kids-fillmulti) h2 {
  color: #ffffff !important;
  text-align: center !important;
  margin: 0 0 18px !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
}

/* Force the actual sentence text to show */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board:has(.fl-kids-fillmulti) .fl-kids-fillmulti-row,
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board:has(.fl-kids-fillmulti) .fl-kids-fillmulti-text,
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board:has(.fl-kids-fillmulti) .fl-kids-fillmulti-num {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3) !important;
}

.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board:has(.fl-kids-fillmulti) .fl-kids-fillmulti-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 0.9rem !important;
  border-bottom: none !important;
}

/* Keep dropdowns readable */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board:has(.fl-kids-fillmulti) .fl-kids-fillmulti-select {
  background: #ffffff !important;
  color: #172830 !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  min-width: 80px !important;
}

/* Put the Check button under the card and keep it visible */
.fl-placement-demo.fl-kids-lesson .fl-kids-writing-board:has(.fl-kids-fillmulti) .fl-kids-fillmulti-controls {
  width: min(82%, 760px) !important;
  max-width: 760px !important;
  margin: 14px auto 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
}


/* =========================================================
   FILL MULTI — fullscreen scene height repair
   Fix chopped classroom2 background
   ========================================================= */

/* Stretch the main lesson viewport in fullscreen */
.fl-placement-demo.fl-kids-lesson:fullscreen .fl-placement-window,
.fl-placement-demo.fl-kids-lesson:-webkit-full-screen .fl-placement-window {
  min-height: calc(100vh - 120px) !important;
  height: calc(100vh - 120px) !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Force the classroom scene to fill the viewport */
.fl-placement-demo.fl-kids-lesson:fullscreen .fl-placement-scene,
.fl-placement-demo.fl-kids-lesson:-webkit-full-screen .fl-placement-scene {
  min-height: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Remove any lingering fixed scene height from fill_multi */
.fl-placement-demo.fl-kids-lesson:fullscreen .fl-placement-window:has(.fl-kids-fillmulti),
.fl-placement-demo.fl-kids-lesson:-webkit-full-screen .fl-placement-window:has(.fl-kids-fillmulti) {
  height: calc(100vh - 120px) !important;
}

.fl-placement-demo.fl-kids-lesson:fullscreen .fl-placement-window:has(.fl-kids-fillmulti) .fl-placement-scene,
.fl-placement-demo.fl-kids-lesson:-webkit-full-screen .fl-placement-window:has(.fl-kids-fillmulti) .fl-placement-scene {
  height: calc(100vh - 120px) !important;
  min-height: calc(100vh - 120px) !important;
}

/* =========================================================
   FILL MULTI — dedicated mode fix
   ========================================================= */

.fl-placement-demo.fl-kids-lesson.fl-kids-fillmulti-mode .fl-kids-question-card.fl-kids-fillmulti-card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 560px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.fl-placement-demo.fl-kids-lesson.fl-kids-fillmulti-mode .fl-kids-writing-board {
  width: 100%;
  max-width: 980px;
  margin: 42px auto 0 !important;
  padding: 0 24px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.fl-placement-demo.fl-kids-lesson.fl-kids-fillmulti-mode .fl-kids-writing-board h2 {
  color: #ffffff !important;
  text-align: center;
  margin: 0 0 18px !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.fl-placement-demo.fl-kids-lesson.fl-kids-fillmulti-mode .fl-kids-writing-lines.fl-kids-fillmulti {
  width: min(82%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  background: rgba(18, 32, 40, 0.92) !important;
  border-radius: 22px !important;
  padding: 26px 34px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.32) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.fl-placement-demo.fl-kids-lesson.fl-kids-fillmulti-mode .fl-kids-fillmulti-row,
.fl-placement-demo.fl-kids-lesson.fl-kids-fillmulti-mode .fl-kids-fillmulti-text,
.fl-placement-demo.fl-kids-lesson.fl-kids-fillmulti-mode .fl-kids-fillmulti-num {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.fl-placement-demo.fl-kids-lesson.fl-kids-fillmulti-mode .fl-kids-fillmulti-controls {
  width: min(82%, 760px) !important;
  max-width: 760px !important;
  margin: 14px auto 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Fullscreen: this is the part that should stop the chopped background */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-fillmulti-mode .fl-placement-window.fl-kids-fillmulti-window {
  flex: 1 1 auto !important;
  min-height: calc(100vh - 150px) !important;
  max-height: calc(100vh - 150px) !important;
  overflow-y: auto !important;
}

.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-fillmulti-mode .fl-kids-question-card.fl-kids-fillmulti-card {
  min-height: calc(100vh - 190px) !important;
}

/* Fill-multi board slides: let the visible panel own the height in fullscreen */
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen.fl-kids-fillmulti-mode .fl-placement-sidebar,
.fl-placement-demo.fl-kids-lesson.fl-placement-demo--fullscreen .fl-kids-question-card.fl-kids-fillmulti-card {
  min-height: calc(100vh - 170px) !important;
}