/* =========================================================
   Florentis Previews — CLEAN CSS (no duplicates)
   ========================================================= */

/* -----------------------------
   Root preview container
------------------------------ */
.fl-preview-root{
  position: relative;
  width: 100%;
  min-height: 520px;
  overflow: hidden;
  border-radius: 16px;

  background-size: cover;
  background-position: center;
}

/* Skin backgrounds */
.fl-skin-space  { background-image: url('/wp-content/uploads/fl-previews/_shared/backgrounds/space.webp'); }
.fl-skin-forest { background-image: url('/wp-content/uploads/fl-previews/_shared/backgrounds/forest.webp'); }
.fl-skin-magic  { background-image: url('/wp-content/uploads/fl-previews/_shared/backgrounds/fantasy.webp'); }

/* Prevent lesson engine scene background from competing with skins */
.fl-preview-root .fl-placement-scene{
  background-image: none !important;
}

/* Disable drawing pen entirely in previews */
.fl-preview-root .fl-kids-penbar,
.fl-preview-root .fl-kids-pen-colors,
.fl-preview-root .fl-kids-pen-canvas{
  display: none !important;
}

/* Ensure layout container is positioned for absolute overlay/footer */
.fl-preview-root .fl-placement-window{
  position: relative;
  height: 600px; /* consistent canvas */
  padding-top: 0 !important;
}

/* Ensure emoji-capable fonts are actually used in the preview */
.fl-preview-root,
.fl-preview-root *{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji" !important;
}

.fl-preview-root .fl-placement-progress{
  display:none !important;
}



/* -----------------------------
   HUD avatar (persistent corner)
------------------------------ */
/* HUD avatar: large, game-like, lower on screen */
.fl-preview-avatar{
  position: absolute;
  right: 18px;
  bottom: 88px; /* sits above the footer */
  z-index: 50;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  pointer-events: none; /* avatar is decorative; avoids blocking clicks */
}

.fl-preview-avatar img{
  width: 180px;
  height: 180px;
  object-fit: contain;
  display: block;

  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.20));
}


.fl-preview-change-avatar{
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  line-height: 1;
}

/* -----------------------------
   Avatar picker overlay
------------------------------ */
.fl-avatar-picker{
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;

  backdrop-filter: blur(2px);
  background: rgba(0,0,0,0.25);
}

.fl-avatar-card{
  width: min(680px, 92%);
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  padding: 16px;
}

.fl-avatar-title{
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px;
}

.fl-avatar-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.fl-avatar-btn{
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
  cursor: pointer;
  text-align: center;
}

.fl-avatar-btn img{
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
}

.fl-avatar-label{ font-weight: 800; }
.fl-avatar-sub{ font-size: 12px; opacity: 0.75; }

@media (max-width: 640px){
  .fl-avatar-grid{ grid-template-columns: 1fr; }
}

/* -----------------------------
   Reward layer + animations
------------------------------ */
.fl-reward-layer{
  position: absolute;
  inset: 0;
  z-index: 95;
  pointer-events: none;
}

.fl-reward{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 96px;
  opacity: 0;
  will-change: transform, opacity;
  text-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.fl-reward-rocket{ animation: flRocket 900ms ease-out forwards; }
@keyframes flRocket{
  0%   { opacity: 0; transform: translate(-50%, 40%) scale(0.5); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1.3); }
}

.fl-reward-sparkles{ animation: flSpark 700ms ease-out forwards; }
@keyframes flSpark{
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

.fl-reward-stars{ animation: flStars 800ms ease-out forwards; }
@keyframes flStars{
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.6); }
  25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1.5); }
}

/* little flash */
.fl-reward-layer::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.25);
  opacity:0;
  animation: flFlash 300ms ease-out;
}
@keyframes flFlash{
  0%{ opacity:0; }
  50%{ opacity:1; }
  100%{ opacity:0; }
}

/* -----------------------------
   Reward BURST (multi-emoji)
------------------------------ */
.fl-reward-burst{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  font-size: 52px;
  opacity: 0;
  will-change: transform, opacity;
  text-shadow: 0 10px 30px rgba(0,0,0,0.25);
  animation: flBurst var(--dur, 900ms) ease-out forwards;
  animation-delay: var(--delay, 0ms);
  z-index: 96;
}

@keyframes flBurst{
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(0.6) rotate(0deg); }
  15%  { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1.05) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, -160px)) scale(var(--scale, 1.35)) rotate(var(--rot, 120deg)); }
}

/* -----------------------------
   Victory Screen
------------------------------ */
.fl-victory-overlay{
  position:absolute;
  inset:0;
  z-index: 80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(3px);
}

.fl-victory-card{
  width: min(720px, 96%);
  background: rgba(255,255,255,0.96);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  text-align:center;
}

.fl-victory-title{
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 6px;
}

.fl-victory-sub{
  font-size: 15px;
  opacity: 0.8;
  margin: 0 0 14px;
}

.fl-victory-stats{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}

.fl-victory-pill{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  font-weight: 900;
}

.fl-victory-actions{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}

.fl-victory-btn{
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}

.fl-victory-btn.primary{
  background: rgba(39, 83, 122, 0.12);
}


/* -----------------------------
   Overlay card system (title/vocab/match)
   Uses sidebar as a floating container
------------------------------ */

/* Sidebar becomes an overlay container (top-safe, centered) */
.fl-preview-root .fl-placement-sidebar{
  position: absolute !important;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 40px)) !important;
  max-width: 980px !important;

  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  z-index: 30;

  /* leave space so footer never overlaps */
  padding-bottom: 70px !important;
}

/* Main overlay card */
.fl-preview-root .fl-kids-question{
  color: #172830;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 14px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);

  display: grid;
  justify-items: center;
}

/* Headings / intro text */
.fl-preview-root .fl-kids-question h1,
.fl-preview-root .fl-kids-question h2{
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 900;
}

.fl-preview-root .fl-kids-question p{
  margin: 0;
  font-size: 16px;
  opacity: 0.85;
  font-weight: 700;
  max-width: 520px;
}
/* =========================================================
   Vocab single (ONE card, big emoji, tight spacing)
   ========================================================= */

/* If a vocab-single card exists, don't style the OUTER overlay as a card */
.fl-preview-root .fl-kids-question:has(.fl-kids-vocab-single-card){
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

/* Optional: remove the "New Word" heading entirely */
.fl-preview-root .fl-kids-vocab-heading{
  display: none !important;
}

/* The SINGLE visible card */
.fl-preview-root .fl-kids-vocab-single-card{
  background: rgba(255,255,255,0.92);
  border-radius: 26px;
  padding: 18px 18px 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);

  width: min(560px, calc(100% - 24px));
  max-width: 560px;
  text-align: center;
  margin: 0 auto;
}

/* Image wrapper (no extra whitespace) */
.fl-preview-root .fl-kids-vocab-single-img{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 auto 6px !important;
  display: flex;
  justify-content: center;
  width: auto;
  height: auto;
}

.fl-preview-root .fl-kids-vocab-single-word{
  font-size: 44px !important;
  font-weight: 900 !important;
  margin-top: 0px !important;
  line-height: 1.05;
}

.fl-preview-root .fl-kids-vocab-single-def{
  font-size: 16px !important;
  opacity: 0.8;
  margin-top: 2px !important;
}

/* Audio button (below for now; we'll move beside the word after HTML tweak) */
.fl-preview-root .fl-kids-audio-btn{
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  font-weight: 800;
}
.fl-preview-root .fl-kids-audio-btn:active{
  transform: scale(0.98);
}

/* BIG emoji image */
.fl-preview-root .fl-kids-vocab-single-img img{
  width: 340px !important;
  height: 340px !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto !important;
}

/* BIG emoji (vocab_single) — make emoji behave like the big image */
.fl-preview-root .fl-kids-vocab-emoji{
  font-size: 340px !important;
  line-height: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto 6px !important;
  width: 340px !important;
  height: 340px !important;

  /* Force reliable emoji fonts */
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;

  /* Helps in some browsers */
  font-variant-emoji: emoji;
}



/* -----------------------------
   Match game (3 across)
------------------------------ */
.fl-preview-root .fl-kids-match-wrapper{
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  width: min(620px, calc(100% - 24px));
  margin: 0 auto;
}

.fl-preview-root .fl-kids-match-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin-top: 12px;
}

.fl-preview-root .fl-kids-match-card{
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  padding: 14px;
  border: 0;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.fl-preview-root .fl-kids-match-emoji{
  font-size: 200px;
  line-height: 1;
  display: grid;
  place-items: center;
}


.fl-preview-root .fl-kids-match-img{
  width: 100%;
  min-height: 160px;
  border-radius: 16px;
  background: transparent;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Match: emoji (twemoji img lives inside .fl-kids-match-img) */
.fl-preview-root .fl-kids-match-img img.fl-emoji{
  width: 100px !important;
  height: 100px !important;
  object-fit: contain;
  display: block;
}


.fl-preview-root .fl-kids-match-select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  font-weight: 800;
  font-size: 16px;
}

.fl-preview-root .fl-kids-feedback{
  margin-top: 10px;
  font-weight: 800;
}

.fl-preview-root .fl-kids-match-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}

.fl-preview-root .fl-kids-match-actions-left{
  display:flex;
  gap:10px;
  align-items:center;
}

.fl-preview-root .fl-kids-match-check,
.fl-preview-root .fl-kids-match-reset{
  margin:0 !important;
  padding:10px 14px !important;
  border-radius:14px !important;
  border:1px solid #cbd5e1 !important;
  background:#fff !important;
  cursor:pointer;
  font-weight:700 !important;
  line-height:1 !important;
}


/* -----------------------------
   Footer pinned to bottom + centered controls
------------------------------ */
.fl-preview-root .fl-placement-footer{
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;

  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(7px);
  padding: 14px 16px;

  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.fl-preview-root .fl-footer-center{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

.fl-preview-root .fl-nav-btn{
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.14) !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.fl-preview-root .fl-slide-counter{
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(8px);
  font-weight: 900 !important;
}

/* Footer: left logo, center nav, right actions */
.fl-preview-root .fl-placement-footer .fl-footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fl-preview-root .fl-footer-left,
.fl-preview-root .fl-footer-right{
  display: flex;
  align-items: center;
  min-width: 160px; /* keeps center truly centered */
}

.fl-preview-root .fl-footer-right{
  justify-content: flex-end;
}

.fl-preview-root .fl-footer-logo{
  height: 26px;
  width: auto;
  display: block;
  opacity: 0.95;
}


/* Twemoji images should behave like big emoji */
.fl-preview-root .fl-kids-vocab-emoji img.fl-emoji {
  width: 340px !important;
  height: 340px !important;
  display: block;
  margin: 0 auto;
}

body.fl-mini-debug .fl-preview-root img.fl-emoji{ outline:1px solid red; }


/* Vocab: audio + text in one row */
.fl-preview-root .fl-kids-vocab-meta{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.fl-preview-root .fl-kids-vocab-text{
  text-align: left;
}

@media (max-width: 560px){
  .fl-preview-root .fl-kids-vocab-meta{
    flex-direction: column;
    align-items: center;
  }
  .fl-preview-root .fl-kids-vocab-text{
    text-align: center;
  }
}

.fl-preview-root .fl-kids-info-card{
  background: rgba(255,255,255,0.92);
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
  width: min(720px, calc(100% - 24px));
  margin: 0 auto;
  text-align: center;
}

.fl-preview-root .fl-kids-info-title{
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 10px;
}

.fl-preview-root .fl-kids-info-text{
  font-size: 18px;
  opacity: 0.85;
}

/* Match footer layout */
.fl-preview-root .fl-kids-match-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.fl-preview-root .fl-kids-match-actions button{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
}

/* Let the mini engine control layout for certain kinds */
.fl-kids-question[data-question-container][data-mini-kind="info"],
.fl-kids-question[data-question-container][data-mini-kind="speaking_simple"]{
  display:flex;
  align-items:center;      /* vertical center */
  justify-content:center;  /* horizontal center */
}

/* If your info/speaking renderer already has a card, remove extra padding from container */
.fl-kids-question[data-question-container][data-mini-kind="info"],
.fl-kids-question[data-question-container][data-mini-kind="speaking_simple"],
.fl-kids-question[data-question-container][data-mini-kind="vocab_match"],
.fl-kids-question[data-question-container][data-mini-kind="listen_choose"],
.fl-kids-question[data-question-container][data-mini-kind="tap_word"],
.fl-kids-question[data-question-container][data-mini-kind="true_false"],
.fl-kids-question[data-question-container][data-mini-kind="tap_emoji"],
.fl-kids-question[data-question-container][data-mini-kind="emoji_word_match"],
.fl-kids-question[data-question-container][data-mini-kind="picture_describe"],
.fl-kids-question[data-question-container][data-mini-kind="spell_tap"]
{
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter: none !important;
}

.fl-kids-question[data-question-container][data-mini-kind="vocab_match"] .fl-kids-match-wrapper{
  max-width: 560px;
  width: min(560px, calc(100% - 32px));
  margin: 0 auto;
}

.fl-kids-match-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}

.fl-kids-match-actions-left{
  display:flex;
  gap:10px;
  align-items:center;
}

.fl-kids-match-check,
.fl-kids-match-reset{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid #cbd5e1;
  background:#fff;
  cursor:pointer;
  font-weight:700;
}

.fl-kids-match-score{
  color:#334155;
  font-weight:700;
  white-space:nowrap;
}

/* Hide mini debug nav by default */
[data-mini-nav] { display: none !important; }

/* Only show when debug mode is enabled */
body.fl-mini-debug [data-mini-nav] { 
  display: flex !important; 
}


/* =========================================================
   speaking_simple — SINGLE SOURCE OF TRUTH (images + emoji)
   Fixes desktop consistency + mobile overlap
   ========================================================= */

   /* SpeakingSimple card title */
.fl-preview-root .fl-kids-speak-title{
  font-size: 32px;
  font-weight: 900;
  margin: 6px 0 12px;
  text-align: center;
}


/* Speaking dialogue bubbles */
.fl-preview-root .fl-kids-speak-dialog{
  max-width: 820px;
  margin: 0 auto 14px;
  display: grid;
  gap: 10px;
}

.fl-preview-root .fl-kids-speak-bubble{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.fl-preview-root .fl-bubble-label{
  font-weight: 900;
  opacity: 0.65;
  white-space: nowrap;
}

.fl-preview-root .fl-bubble-text{
  font-weight: 900;
  flex: 1;
}

.fl-preview-root .fl-bubble-buddy{
  border-left: 8px solid rgba(39,83,122,0.35);
}

.fl-preview-root .fl-bubble-you{
  border-left: 8px solid rgba(89,108,16,0.35);
}

.fl-preview-root .fl-kids-speak-audio-badge{
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 16px;
  opacity: 0.8;
}

.fl-preview-root .fl-kids-speak-option.is-selected{
  outline: 4px solid rgba(244,212,136,0.55);
  box-shadow: 0 18px 34px rgba(0,0,0,0.18);
  transform: translateY(-2px) scale(1.02);
}

.fl-preview-root .fl-speaking-turn .fl-kids-speak-card{
  box-shadow: 0 0 0 6px rgba(244,212,136,0.30), 0 18px 36px rgba(0,0,0,0.16);
  transition: box-shadow .25s ease;
}

/* Buddy bubble row layout */
.fl-preview-root .fl-kids-speak-bubble.fl-bubble-buddy{
  display: flex;
  align-items: center;
  gap: 12px;
}

.fl-preview-root .fl-kids-speak-bubble.fl-bubble-buddy .fl-bubble-text{
  flex: 1;
}

/* Move avatar up on speaking slides so it feels part of the dialogue */
.fl-preview-root .fl-kids-question[data-mini-kind="speaking_simple"] .fl-preview-avatar{
  bottom: 210px; /* adjust: 180–260 depending on your card height */
}

/* Grid: default 2-up; add is-3 support already in your CSS */
.fl-preview-root .fl-kids-speak-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* 3-up when your JS adds .is-3 */
.fl-preview-root .fl-kids-speak-grid.is-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Each option card */
.fl-preview-root .fl-kids-speak-option{
  border: 0;
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  cursor: pointer;
  position: relative;
}

/* The image box: enforces equal visual size */
.fl-preview-root .fl-kids-speak-img{
  width: 100%;
  height: 160px;            /* desktop */
  display: grid;
  place-items: center;
  overflow: hidden;         /* crops real images consistently */
  border-radius: 14px;
  background: rgba(15, 23, 42, 0, 0.04);
}

/* Any real image inside the box */
.fl-preview-root .fl-kids-speak-img img{
  width: 150px;             /* desktop visual */
  height: 150px;
  object-fit: cover;        /* ✅ crops mismatched images */
  object-position: center;
  display: block;
}

/* Emoji should not be cropped */
.fl-preview-root .fl-kids-speak-img img.fl-emoji{
  width: 150px !important;
  height: 150px !important;
  object-fit: contain !important;
}

/* 3-up: slightly smaller so it fits cleanly */
.fl-preview-root .fl-kids-speak-grid.is-3 .fl-kids-speak-img{
  height: 140px;
}
.fl-preview-root .fl-kids-speak-grid.is-3 .fl-kids-speak-img img{
  width: 120px;
  height: 120px;
}
.fl-preview-root .fl-kids-speak-grid.is-3 .fl-kids-speak-img img.fl-emoji{
  width: 120px !important;
  height: 120px !important;
}

/* Label */
.fl-preview-root .fl-kids-speak-label{
  font-weight: 900;
  margin-top: 8px;
  text-align: center;
}

/* Mobile: stop overlap by shrinking the image box + art */
@media (max-width: 680px){
  .fl-preview-root .fl-kids-speak-grid{
    gap: 10px;
  }

  .fl-preview-root .fl-kids-speak-img{
    height: 120px;
  }

  .fl-preview-root .fl-kids-speak-img img{
    width: 96px;
    height: 96px;
    object-fit: cover;
  }

  .fl-preview-root .fl-kids-speak-img img.fl-emoji{
    width: 96px !important;
    height: 96px !important;
    object-fit: contain !important;
  }
}


@media (max-width: 680px){
  .fl-preview-root .fl-kids-speak-title{
    font-size: 26px;
  }
}


/* =========================================================
   speaking_simple — FINAL VISUAL LAYER (forces card + tiles)
   Paste at VERY END so it wins
   ========================================================= */

.fl-preview-root .fl-kids-question[data-mini-kind="speaking_simple"] .fl-kids-speak-card{
  background: rgba(255,255,255,0.92) !important;
  border-radius: 26px !important;
  padding: 18px !important;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16) !important;
  width: min(860px, calc(100% - 24px)) !important;
  margin: 0 auto !important;
}

.fl-preview-root .fl-kids-question[data-mini-kind="speaking_simple"] .fl-kids-speak-option{
  background: rgba(255,255,255,0.95) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12) !important;
}


/* =========================================================
   picture_describe — responsive 2-col desktop, stacked mobile
   ========================================================= */

.fl-preview-root .fl-pd-card{
  max-width: 920px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);

  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* image a touch wider */
  grid-template-rows: auto auto 1fr auto;
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
}

.fl-preview-root .fl-pd-title{
  grid-column: 1 / -1;
  font-weight: 900;
  font-size: 20px;
  margin: 0;
}

.fl-preview-root .fl-pd-stem{
  grid-column: 1 / -1;
  font-weight: 800;
  opacity: 0.8;
  margin: 0 0 2px;
}

/* LEFT: image */
.fl-preview-root .fl-pd-imageWrap{
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  aspect-ratio: 1 / 1;       /* ✅ square frame */
}

.fl-preview-root .fl-pd-imageWrap img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;         /* swap to contain if you want no cropping */
}

/* RIGHT: bubble + chips are ONE column stack */
.fl-preview-root .fl-pd-bubbleRow{
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 0;
}

/* ✅ chips sit directly under the bubble (same "area") */
.fl-preview-root .fl-pd-grid{
  grid-column: 2;
  grid-row: 3;              /* was 4 */
  align-self: start;
  margin-top: 58px;         /* pushes chips below bubble row */
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}


.fl-preview-root .fl-pd-bubbleLabel{
  font-weight: 900;
  opacity: 0.65;
  white-space: nowrap;
}

.fl-preview-root .fl-pd-bubble{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.98);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
  font-weight: 900;
}


.fl-preview-root .fl-pd-chip{
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  background: rgba(244,212,136,0.28);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.fl-preview-root .fl-pd-chip:active{ transform: translateY(1px); }

.fl-preview-root .fl-pd-actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.fl-preview-root .fl-pd-clear{
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  background: rgba(0,0,0,0.06);
}

/* MOBILE: stack everything, no overlap */
@media (max-width: 760px){
  .fl-preview-root .fl-pd-card{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
  }

  .fl-preview-root .fl-pd-imageWrap{
    grid-column: 1;
    grid-row: 3;
    max-width: 420px;      /* ✅ keeps it from getting huge */
    margin: 0 auto;
  }

  .fl-preview-root .fl-pd-bubbleRow{
    grid-column: 1;
    grid-row: 4;
  }

  .fl-preview-root .fl-pd-grid{
    grid-column: 1;
    grid-row: 5;
    max-width: 520px;
    margin: 0 auto;
  }
}


/* =========================================
   listen_choose (Listen & Choose) slide
   ========================================= */
.fl-preview-root .fl-kids-lc-card{
  background: rgba(255,255,255,0.92);
  border-radius: 22px;
  padding: 18px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

.fl-preview-root .fl-kids-lc-title{
  font-size: 34px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 6px;
}

.fl-preview-root .fl-kids-lc-instr{
  text-align: center;
  color: #475569;
  margin-bottom: 12px;
  font-weight: 600;
}

.fl-preview-root .fl-kids-lc-topbar{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-bottom: 14px;
}

.fl-preview-root .fl-kids-lc-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 720px){
  .fl-preview-root .fl-kids-lc-grid{ grid-template-columns: 1fr; }
}

.fl-preview-root .fl-kids-lc-choice{
  background: rgba(255,255,255,0.96);
  border: 2px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  text-align:center;
}

.fl-preview-root .fl-kids-lc-choice:hover{
  transform: translateY(-2px);
}

.fl-preview-root .fl-kids-lc-choice.is-selected{
  border-color: #94a3b8;
}

.fl-preview-root .fl-kids-lc-choice.is-correct{
  border-color: #16a34a;
  box-shadow: 0 12px 30px rgba(22,163,74,.18);
}

.fl-preview-root .fl-kids-lc-choice.is-wrong{
  border-color: #ef4444;
  box-shadow: 0 12px 30px rgba(239,68,68,.16);
}

.fl-preview-root .fl-kids-lc-emoji{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 180px;
}

.fl-preview-root .fl-kids-lc-emoji img.fl-emoji{
  width: 140px;
  height: 140px;
  display:block;
}

.fl-preview-root .fl-kids-lc-label{
  font-size: 18px;
  font-weight: 900;
  margin-top: 8px;
}

.fl-preview-root .fl-kids-lc-feedback{
  margin-top: 12px;
  text-align:center;
  font-weight: 900;
  color: #0f172a;
}

/* tiny shake */
.fl-preview-root .fl-shake{
  animation: flshake .45s ease;
}
@keyframes flshake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}

/* listen_choose: size normal images too (png/webp/jpg) */
.fl-preview-root .fl-kids-lc-emoji img{
  width: 160px;
  height: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* 3 across: scale down */
.fl-preview-root .fl-kids-lc-grid.is-3 .fl-kids-lc-emoji img{
  width: 110px;
  height: 110px;
}


/* =========================================================
   Florentis emoji sizing (Twemoji uses img.fl-emoji)
   ========================================================= */

.fl-preview-root img.fl-emoji{
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  border: 0;
  box-shadow: none;
  background: none;
  padding: 0;
}

/* vocab_single: keep big */
.fl-preview-root .fl-kids-vocab-emoji > img.fl-emoji{
  width: 340px;
  height: 340px;
  display: block;
}

/* match: 100px */
.fl-preview-root .mini-emoji-host > img.fl-emoji{
  width: 100px;
  height: 100px;
  display: block;
}

/* speaking: larger than match (change to 100px if you want same size) */
.fl-preview-root .fl-kids-speak-img .fl-kids-emoji-host > img.fl-emoji{
  width: 140px;
  height: 140px;
  display: block;
}


/* =========================================================
   Florentis emoji Word Match
   ========================================================= */

.fl-preview-root .fl-kids-ewm-card{
  background: rgba(255,255,255,.88);
  border-radius: 22px;
  padding: 22px 22px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  max-width: 860px;
  margin: 0 auto;
}

.fl-preview-root .fl-kids-ewm-title{
  font-size: 40px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 6px;
}

.fl-preview-root .fl-kids-ewm-instr{
  text-align: center;
  opacity: .85;
  margin-bottom: 14px;
  font-weight: 600;
}

.fl-preview-root .fl-kids-ewm-topbar{
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-bottom: 14px;
}

/* reuse your existing “Listen” pill button class */
.fl-preview-root .fl-kids-ewm-topbar .fl-kids-audio-btn{
  min-width: 140px;
}

.fl-preview-root .fl-kids-ewm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}

.fl-preview-root .fl-kids-ewm-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fl-preview-root .fl-kids-ewm-tile{
  border: 2px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 14px;
  min-height: 110px;
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

.fl-preview-root .fl-kids-ewm-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
}

.fl-preview-root .fl-kids-ewm-tile.is-selected{
  border-color: rgba(39,83,122,.55);
  box-shadow: 0 12px 22px rgba(39,83,122,.18);
}

.fl-preview-root .fl-kids-ewm-tile.is-wrong{
  border-color: rgba(220,38,38,.55);
}

.fl-preview-root .fl-kids-ewm-tile.is-matched{
  opacity: .55;
  transform: none;
  box-shadow: none;
}

/* BIG emoji like vocab_single */
.fl-preview-root .fl-kids-ewm-emoji-host .fl-emoji{
  width: 96px !important;
  height: 96px !important;
}

.fl-preview-root .fl-kids-ewm-word-text{
  font-size: 22px;
  font-weight: 900;
}

.fl-preview-root .fl-kids-ewm-word-audio{
  position:absolute;
  top: 10px;
  right: 10px;
  opacity: .55;
  font-size: 16px;
}

.fl-preview-root .fl-kids-ewm-footer{
  text-align:center;
  margin-top: 12px;
  font-weight: 900;
  min-height: 24px;
}

.fl-preview-root .fl-kids-ewm-footer.is-ok{ color: #15803d; }
.fl-preview-root .fl-kids-ewm-footer.is-bad{ color: #b45309; }

.fl-preview-root .fl-kids-match-grid{
  display:grid;
  gap:12px;
}

/* emoji_word_match: support PNG images in the left column */
.fl-preview-root .fl-kids-ewm-emoji-host img.fl-kids-ewm-img{
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}


/* default 3-up */
.fl-preview-root .fl-kids-match-grid.is-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 2-up (for 2 items) */
.fl-preview-root .fl-kids-match-grid.is-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 2x2 (for 4 items) */
.fl-preview-root .fl-kids-match-grid.is-4{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Center + remove duplicate background wrapper (same pattern as speaking/info) */
.fl-kids-question[data-question-container][data-mini-kind="listen_choose"]{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

/* Listen & Choose card */
.fl-preview-root .fl-kids-lc-card{
  background: rgba(255,255,255,0.92);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
  width: min(760px, calc(100% - 24px));
  margin: 0 auto;
  text-align: center;
}

.fl-preview-root .fl-kids-lc-title{
  font-size: 32px;
  font-weight: 900;
  margin: 6px 0 6px;
}

.fl-preview-root .fl-kids-lc-instr{
  opacity: .85;
  margin-bottom: 14px;
  font-weight: 700;
}

.fl-preview-root .fl-kids-lc-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin: 10px 0 16px;
}

/* Make Reset match Listen by using the same button class */
.fl-preview-root .fl-kids-lc-actions .fl-kids-audio-btn{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  border: 0 !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.14) !important;
  cursor: pointer;
}

/* Choice grid: default 2-up, switch to 3-up when needed */
.fl-preview-root .fl-kids-lc-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fl-preview-root .fl-kids-lc-grid.is-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Cards */
.fl-preview-root .fl-kids-lc-choice{
  border: 0;
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  cursor:pointer;
  position:relative;
}

.fl-preview-root .fl-kids-lc-choice.is-correct{
  outline: 2px solid #22c55e;
}

.fl-preview-root .fl-kids-lc-emoji{
  display:grid;
  place-items:center;
  min-height: 160px;
}

/* Big emoji for listen_choose (your Twemoji img class is now fl-emoji) */
.fl-preview-root .fl-kids-lc-emoji img.fl-emoji{
  width: 140px !important;
  height: 140px !important;
}

/* If 3 across, scale down a bit so it fits nicely */
.fl-preview-root .fl-kids-lc-grid.is-3 .fl-kids-lc-emoji img.fl-emoji{
  width: 110px !important;
  height: 110px !important;
}

.fl-preview-root .fl-kids-lc-label{
  font-weight: 900;
  margin-top: 8px;
}

/* Speaking: allow 3 across */
.fl-preview-root .fl-kids-speak-grid.is-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* If 3 across, scale down */
.fl-preview-root .fl-kids-speak-grid.is-3 .fl-kids-speak-img img.fl-emoji{
  width: 110px !important;
  height: 110px !important;
} */

.fl-kids-question[data-question-container][data-mini-kind="match_emoji"],
.fl-kids-question[data-question-container][data-mini-kind="emoji_word_match"],
.fl-kids-question[data-question-container][data-mini-kind="tap_word"],
.fl-kids-question[data-question-container][data-mini-kind="tap_emoji"],
.fl-kids-question[data-question-container][data-mini-kind="true_false"],
.fl-kids-question[data-question-container][data-mini-kind="order_words"]{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

/* =========================
   HUD (Rewards + Streak)
   ========================= */

.fl-hud {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fl-hud-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Reward / streak icon */
.fl-hud-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

/* Numeric value */
.fl-hud-value {
  font-weight: 600;
  font-size: 13px;
  min-width: 1ch;
  text-align: left;
}

/* Optional: slightly larger on desktop */
@media (min-width: 768px) {
  .fl-hud-item {
    font-size: 15px;
  }
  .fl-hud-icon {
    width: 20px;
    height: 20px;
    font-size: 18px;
  }
}

.fl-hud-item.is-burst {
  animation: fl-hud-pop 300ms ease-out;
}

@keyframes fl-hud-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}


/* =========================
   tap_word (Tap the word)
   ========================= */
.fl-preview-root .fl-tw-card{
  background: rgba(255,255,255,0.92);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
  width: min(760px, calc(100% - 24px));
  margin: 0 auto;
  text-align: center;
}

.fl-preview-root .fl-tw-title{
  font-size: 32px;
  font-weight: 900;
  margin: 6px 0 6px;
}

.fl-preview-root .fl-tw-prompt{
  opacity: .85;
  margin-bottom: 14px;
  font-weight: 800;
  font-size: 18px;
}

.fl-preview-root .fl-tw-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px){
  .fl-preview-root .fl-tw-grid{ grid-template-columns: 1fr; }
}

.fl-preview-root .fl-tw-choice{
  border: 0;
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  cursor:pointer;
  font-weight: 900;
  font-size: 22px;
  transition: transform .12s ease, box-shadow .12s ease;
}

.fl-preview-root .fl-tw-choice:hover{
  transform: translateY(-2px);
}

.fl-preview-root .fl-tw-choice.is-correct{
  outline: 3px solid rgba(34,197,94,.65);
  box-shadow: 0 18px 34px rgba(34,197,94,.18);
}

.fl-preview-root .fl-tw-choice.is-wrong{
  outline: 3px solid rgba(239,68,68,.55);
  box-shadow: 0 18px 34px rgba(239,68,68,.16);
}

.fl-preview-root .fl-tw-msg{
  margin-top: 12px;
  font-weight: 900;
  min-height: 24px;
}

.fl-preview-root .fl-tw-msg.is-ok{ color:#15803d; }
.fl-preview-root .fl-tw-msg.is-bad{ color:#b45309; }

/* tap_word — prompt row + prompt emoji/image sizing */
.fl-preview-root .fl-tw-promptRow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}

.fl-preview-root .fl-tw-promptVisual{
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fl-preview-root .fl-tw-promptVisual img{
  width: 260px;
  height: 260px;
  object-fit: contain;
  display: block;
}

.fl-preview-root .fl-tw-emoji-host img.fl-emoji{
  width: 260px !important;
  height: 260px !important;
  object-fit: contain;
  display: block;
}

.fl-preview-root .fl-tw-promptText{
  font-size: 22px;
  font-weight: 900;
  opacity: 0.9;
}

@media (max-width: 720px){
  .fl-preview-root .fl-tw-promptVisual{
    width: 200px;
    height: 200px;
  }
  .fl-preview-root .fl-tw-promptVisual img,
  .fl-preview-root .fl-tw-emoji-host img.fl-emoji{
    width: 200px !important;
    height: 200px !important;
  }
}

/* =========================
   tap_word — DESKTOP FIX (desktop-only)
   image left + sentence right
   ========================= */

@media (min-width: 721px){

  .fl-preview-root .fl-tw-promptRow{
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: 18px;

    /* ensure it behaves like desktop */
    flex-wrap: nowrap;
    text-align: left;
  }

  .fl-preview-root .fl-tw-promptVisual{
    width: 260px;
    height: 260px;
  }

  .fl-preview-root .fl-tw-promptText{
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;

    /* normal wrapping */
    word-break: normal;
    overflow-wrap: normal;
  }
}



/* =========================
   tap_emoji (Tap the picture)
   ========================= */
.fl-preview-root .fl-te-card{
  background: rgba(255,255,255,0.92);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
  width: min(760px, calc(100% - 24px));
  margin: 0 auto;
  text-align: center;
}

.fl-preview-root .fl-te-title{
  font-size: 32px;
  font-weight: 900;
  margin: 6px 0 6px;
}

.fl-preview-root .fl-te-prompt{
  opacity: .85;
  margin-bottom: 14px;
  font-weight: 800;
  font-size: 18px;
}

.fl-preview-root .fl-te-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px){
  .fl-preview-root .fl-te-grid{ grid-template-columns: repeat(2, 1fr); }
}

.fl-preview-root .fl-te-choice{
  border: 0;
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 160px;
}

.fl-preview-root .fl-te-choice.is-correct{
  outline: 3px solid rgba(34,197,94,.65);
}

.fl-preview-root .fl-te-choice.is-wrong{
  outline: 3px solid rgba(239,68,68,.55);
}

.fl-preview-root .fl-te-choice img{
  width: 140px;
  height: 140px;
  object-fit: contain;
}

/* Tap Picture: make Twemoji big */
.fl-preview-root .fl-te-choice img.fl-emoji{
  width: 180px !important;
  height: 180px !important;
  display:block;
  margin: 0 auto;
}

/* If 3 across, scale down */
.fl-preview-root .fl-te-grid.is-3 .fl-te-choice img.fl-emoji{
  width: 120px !important;
  height: 120px !important;
}


.fl-preview-root .fl-te-msg{
  margin-top: 12px;
  font-weight: 900;
  min-height: 24px;
}

.fl-preview-root .fl-te-msg.is-ok{ color:#15803d; }
.fl-preview-root .fl-te-msg.is-bad{ color:#b45309; }

/* =========================
   spell_tap (tap-to-spell)
   ========================= */
.fl-preview-root .fl-spell-card{
  width: min(900px, calc(100% - 24px)); /* ✅ NEW: lets the card expand on desktop */
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255,255,255,0.92);
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
  padding: 16px;
}


.fl-preview-root .fl-spell-title{
  font-weight: 900;
  font-size: 22px;
  text-align: center;
  margin-bottom: 10px;
}

.fl-preview-root .fl-spell-top{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.fl-preview-root .fl-spell-visual{
  width: 180px;
  height: 180px;
  border-radius: 18px;
  background: rgba(0,0,0,0.04);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.fl-preview-root .fl-spell-visual img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fl-preview-root .fl-spell-instr{
  font-weight: 800;
  opacity: 0.8;
  margin-bottom: 10px;
}

.fl-preview-root .fl-spell-answer{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 10px 0 14px;
}

.fl-preview-root .fl-spell-slot{
  min-width: 54px;
  height: 62px;
  padding: 0 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.06);
  display: grid;
  place-items: center;
  font-weight: 1000;
  font-size: 28px;
  white-space: nowrap;
}

/* spell_tap — visual spacer between words (e.g., "ant farm") */
.fl-preview-root .fl-spell-gap{
  width: 22px;       /* controls the word spacing */
  height: 62px;      /* match .fl-spell-slot height */
  flex: 0 0 22px;
}

@media (max-width: 720px){
  .fl-preview-root .fl-spell-gap{
    width: 14px;
    height: 54px;    /* match mobile .fl-spell-slot height */
    flex: 0 0 14px;
  }
}


.fl-preview-root .fl-spell-tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
}

.fl-preview-root .fl-spell-tile{
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.10);
  padding: 16px 6px;
  font-weight: 1000;
  font-size: clamp(18px, 3.6vw, 30px);
  cursor: pointer;
  white-space: nowrap;
}

.fl-preview-root .fl-spell-tile:disabled{
  opacity: 0.35;
  cursor: default;
}

.fl-preview-root .fl-spell-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

.fl-preview-root .fl-spell-btn{
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  background: rgba(0,0,0,0.06);
  cursor: pointer;
}

.fl-preview-root .fl-spell-msg{
  text-align: center;
  margin-top: 10px;
  font-weight: 900;
}
.fl-preview-root .fl-spell-msg.is-ok{ color: #1b7f3a; }
.fl-preview-root .fl-spell-msg.is-bad{ color: #b42318; }

/* Mobile */
@media (max-width: 720px){
  .fl-preview-root .fl-spell-top{
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    justify-items: center;
    text-align: center;
  }
  .fl-preview-root .fl-spell-visual{
    width: 150px;
    height: 150px;
  }
  .fl-preview-root .fl-spell-tiles{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    font-size: clamp(18px, 5vw, 26px);
    padding: 14px 6px;
  }
  .fl-preview-root .fl-spell-slot{
    min-width: 44px;
    height: 54px;
    padding: 0 8px;
    font-size: 22px;
  }
}


/* =========================
   true_false
   ========================= */

/* True/False card */
.fl-preview-root .fl-tf-card{
  background: rgba(255,255,255,0.92);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
  width: min(720px, calc(100% - 24px));
  margin: 0 auto;
  text-align: center;
}

.fl-preview-root .fl-tf-title{
  font-size: 32px;
  font-weight: 900;
  margin: 6px 0 10px;
}

.fl-preview-root .fl-tf-promptRow{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.fl-preview-root .fl-tf-visual{
  display:grid;
  place-items:center;
  min-height: 140px;
}

.fl-preview-root .fl-tf-visual img{
  max-width: 220px;
  max-height: 220px;
  object-fit: contain;
}

.fl-preview-root .fl-tf-visual img.fl-emoji{
  width: 200px !important;
  height: 200px !important;
}

.fl-preview-root .fl-tf-text{
  font-size: 22px;
  font-weight: 900;
  opacity: 0.95;
}

.fl-preview-root .fl-tf-actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.fl-preview-root .fl-tf-btn{
  padding: 12px 16px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
  font-weight: 900;
  cursor:pointer;
  min-width: 140px;
}

.fl-preview-root .fl-tf-btn.is-correct{
  outline: 2px solid #22c55e;
}

.fl-preview-root .fl-tf-btn.is-wrong{
  outline: 2px solid #ef4444;
}

.fl-preview-root .fl-tf-msg{
  margin-top: 12px;
  font-weight: 900;
  min-height: 24px;
}

.fl-preview-root .fl-tf-msg.is-ok{ color: #15803d; }
.fl-preview-root .fl-tf-msg.is-bad{ color: #b45309; }

/* =========================
   order_words - Put the Words in Order to Make a Sentence
   ========================= */

/* Card */
.fl-preview-root .fl-ow-card{
  background: rgba(255,255,255,0.92);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
  width: min(820px, calc(100% - 24px));
  margin: 0 auto;
  text-align: center;
}

.fl-preview-root .fl-ow-title{
  font-size: 32px;
  font-weight: 900;
  margin: 6px 0 6px;
}

.fl-preview-root .fl-ow-instr{
  opacity: .85;
  margin-bottom: 12px;
  font-weight: 700;
}

.fl-preview-root .fl-ow-promptRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}

.fl-preview-root .fl-ow-visual{
  display:grid;
  place-items:center;
  width: 140px;
  height: 140px;
}

.fl-preview-root .fl-ow-visual img{
  width: 140px;
  height: 140px;
  object-fit: contain;
}

.fl-preview-root .fl-ow-text{
  font-weight: 900;
  font-size: 18px;
}

.fl-preview-root .fl-ow-answer{
  min-height: 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(15,23,42,0.06);
  font-weight: 900;
  margin: 10px 0 12px;
}

.fl-preview-root .fl-ow-answer.is-wrong{
  outline: 3px solid rgba(239,68,68,.45);
}

.fl-preview-root .fl-ow-bank{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content:center;
  margin-bottom: 12px;
}

.fl-preview-root .fl-ow-tile{
  border: 0;
  background: rgba(255,255,255,0.95);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  cursor: pointer;
  font-weight: 900;
}

.fl-preview-root .fl-ow-tile.is-used{
  opacity: .35;
}

.fl-preview-root .fl-ow-actions{
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.fl-preview-root .fl-ow-btn{
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}

.fl-preview-root .fl-ow-btn.primary{
  background: rgba(39, 83, 122, 0.12);
}

.fl-preview-root .fl-ow-msg{
  font-weight: 900;
  min-height: 24px;
}
.fl-preview-root .fl-ow-msg.is-ok{ color:#15803d; }
.fl-preview-root .fl-ow-msg.is-bad{ color:#b45309; }


/* =========================================================
   Practice Picker Overlay (Choose button modal)
   ========================================================= */

.fl-preview-root .fl-overlay[hidden] { display: none !important; }

.fl-preview-root .fl-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 18px 18px;
  background: rgba(0,0,0,0.35);
}

.fl-preview-root .fl-overlay-card{
  width: min(640px, 92vw);
  max-height: min(80vh, 720px);
  overflow: auto;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  padding: 18px;
}

.fl-preview-root .fl-overlay-close{
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  float: none;
  z-index: 2;
}


.fl-preview-root .fl-overlay-body h3{
  margin: 10px 10px 12px !important;
  padding: 10px 10px 12px;
  font-weight: 900;
}

/* =========================================
   Practice picker “game cards”
   ========================================= */

.fl-preview-root .fl-practice-grid{
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.fl-preview-root .fl-practice-card{
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 12px 24px rgba(0,0,0,0.10);
  color: inherit;
  border: 1px solid rgba(0,0,0,0.05);
}

.fl-preview-root .fl-practice-card:hover{
  transform: translateY(-1px);
}

.fl-preview-root .fl-practice-ico{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(0,0,0,0.05);
  display: grid;
  place-items: center;
  font-size: 28px;
  flex: 0 0 auto;
}

.fl-preview-root .fl-practice-title{
  font-weight: 1000;
  font-size: 18px;
  color: #596c10;
}

.fl-preview-root .fl-practice-sub{
  font-weight: 800;
  opacity: 0.7;
  margin-top: 2px;
  font-size: 13px;
}

.fl-preview-root .fl-practice-tip{
  margin: 12px 0 0;
  opacity: 0.7;
  font-weight: 800;
  font-size: 13px;
}



/* =========================================================
   MOBILE (single source of truth)
   Paste this at the VERY END of fl-previews.css
   ========================================================= */

@media (max-width: 680px){

  .fl-preview-root{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    height: 100dvh !important;
    min-height: 100dvh !important;

    border-radius: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* Footer MUST override desktop's position:absolute !important */
  .fl-preview-root .fl-placement-footer{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    border-radius: 18px 18px 0 0 !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    z-index: 1000 !important;
  }

  .fl-preview-root .fl-footer-inner{
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }

  /* Window becomes viewport minus footer */
  .fl-preview-root .fl-placement-window{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;

    height: calc(100dvh - var(--fl-footer-h, 110px)) !important;
    overflow: hidden !important;
  }

  .fl-preview-root .fl-placement-scene{
    border-radius: 0 !important;
  }

  /* Sidebar MUST override desktop centering + padding !important */
  .fl-preview-root .fl-placement-sidebar{
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    bottom: 12px !important;

    width: auto !important;
    max-width: none !important;

    transform: none !important;
    margin-left: 0 !important;

    /* THIS is what fixes cut-off interactions */
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;

    background: transparent !important;
    box-shadow: none !important;

    /* override desktop padding:0 !important + padding-bottom:70 !important */
    padding: 12px !important;
    padding-bottom: 12px !important;

    border-radius: 18px !important;
  }

  /* The injected activity container */
  .fl-preview-root .fl-kids-question{
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* tap targets */
  .fl-preview-root button,
  .fl-preview-root .fl-tw-choice,
  .fl-preview-root .fl-kids-ewm-tile{
    min-height: 44px !important;
  }

  .fl-preview-root .fl-kids-ewm-title{
    font-size: clamp(22px, 6vw, 30px) !important;
  }
}

@media (max-width: 420px){
  .fl-preview-root .fl-kids-ewm-grid{
    grid-template-columns: 1fr !important;
  }
  .fl-preview-root .fl-kids-ewm-col{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   MOBILE TUNING: vocab_single + vocab_match
   Paste at VERY END of fl-previews.css
   ========================================================= */

@media (max-width: 680px){

  /* -----------------------------------------
     A) vocab_single: reduce emoji/image size
     ----------------------------------------- */

  /* Big emoji image */
  .fl-preview-root .fl-kids-vocab-single-img img{
    width: 240px !important;
    height: 240px !important;
  }

  /* Big emoji (when vocab_single uses emoji text) */
  .fl-preview-root .fl-kids-vocab-emoji{
    width: 240px !important;
    height: 240px !important;
    font-size: 240px !important;
  }

  /* Big emoji (when vocab_single uses Twemoji img) */
  .fl-preview-root .fl-kids-vocab-emoji > img.fl-emoji,
  .fl-preview-root .fl-kids-vocab-emoji img.fl-emoji{
    width: 240px !important;
    height: 240px !important;
  }

  /* Tighten the card a bit on mobile */
  .fl-preview-root .fl-kids-vocab-single-card{
    padding: 14px 14px 12px;
    border-radius: 22px;
    width: min(520px, calc(100% - 24px));
  }

  .fl-preview-root .fl-kids-vocab-single-word{
    font-size: 38px !important;
  }

  .fl-preview-root .fl-kids-vocab-single-def{
    font-size: 15px !important;
  }


  /* -----------------------------------------
     B) vocab_match: reflow to fit on mobile
     (your screenshot shows 3 columns too tight)
     ----------------------------------------- */

  /* Make the grid 1 column (stack the 3 match cards) */
  .fl-preview-root .fl-kids-match-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Turn each match card into a 2-column row:
     image on the left, dropdown on the right */
  .fl-preview-root .fl-kids-match-card{
    grid-template-columns: 110px 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    padding: 12px;
  }

  /* Keep the image area compact */
  .fl-preview-root .fl-kids-match-img{
    min-height: 0;
    height: 110px;
    border-radius: 14px;
  }

  /* Twemoji inside the match image area */
  .fl-preview-root .fl-kids-match-img img.fl-emoji{
    width: 88px !important;
    height: 88px !important;
  }

  /* If you ever use emoji text instead of Twemoji here */
  .fl-preview-root .fl-kids-match-emoji{
    font-size: 110px;
  }

  /* Dropdown: make it full width and easier to tap */
  .fl-preview-root .fl-kids-match-select{
    width: 100%;
    font-size: 16px;
    padding: 12px 12px;
  }

  /* Actions row: wrap nicely */
  .fl-preview-root .fl-kids-match-actions{
    flex-wrap: wrap;
    justify-content: center;
  }

  .fl-preview-root .fl-kids-match-actions-left{
    flex-wrap: wrap;
    justify-content: center;
  }

  .fl-preview-root .fl-kids-match-score{
    width: 100%;
    text-align: center;
  }
}

/* Very small phones: shrink vocab_single a bit more */
@media (max-width: 420px){

  .fl-preview-root .fl-kids-vocab-single-img img{
    width: 210px !important;
    height: 210px !important;
  }

  .fl-preview-root .fl-kids-vocab-emoji{
    width: 210px !important;
    height: 210px !important;
    font-size: 210px !important;
  }

  .fl-preview-root .fl-kids-vocab-emoji > img.fl-emoji,
  .fl-preview-root .fl-kids-vocab-emoji img.fl-emoji{
    width: 210px !important;
    height: 210px !important;
  }

  .fl-preview-root .fl-kids-vocab-single-word{
    font-size: 34px !important;
  }
}