/* =========================================================================
   ANP WORD HELPER — tap-a-word tutor card.
   Light register by default (bands 1-2 surfaces); flips dark automatically
   inside the fieldbook overlay or on band 3-4 bodies.
   ========================================================================= */

/* tappable words in live text */
.wh-live .wh-w { cursor: pointer; border-radius: 4px; transition: background .15s; }
.wh-live .wh-w:hover { background: rgba(244, 183, 63, .22); }
.wh-live .wh-w:active { background: rgba(244, 183, 63, .4); }
.wh-w.wh-conquered { background: rgba(30, 122, 70, .14); box-shadow: 0 2px 0 rgba(30, 122, 70, .45); }

/* the tutor card */
.wh-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(20, 18, 14, .45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: whIn .22s ease both;
}
.wh-overlay.wh-bye { animation: whOut .22s ease both; }
@keyframes whIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes whOut { from { opacity: 1; } to { opacity: 0; } }

.wh-card {
  width: min(480px, 94vw); border-radius: 22px; padding: 26px 22px 24px;
  background: #FCFBF8; color: #26221C; text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  animation: whPop .3s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes whPop { from { transform: scale(.92) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.wh-kick {
  margin: 0 0 14px; font-size: .74rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: #8a6300;
}

.wh-chunks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wh-pill {
  min-width: 64px; min-height: 64px; padding: 8px 18px;
  border-radius: 16px; border: 2.5px solid rgba(38, 34, 28, .18);
  background: #fff; cursor: pointer;
  font-family: var(--anp-font-read, 'Lexend', sans-serif);
  font-weight: 700; font-size: 2rem; color: #26221C;
  transition: transform .12s;
}
.wh-pill:active { transform: scale(.94); }
.wh-pill.lit {
  border-color: #1E7A46; color: #1E7A46;
  animation: whLit .5s ease both;
}
@keyframes whLit {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30, 122, 70, .35); }
  45% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(30, 122, 70, 0); }
  100% { transform: scale(1); }
}

.wh-tip { margin: 14px 0 4px; font-size: .92rem; color: #5b5650; font-weight: 600; }

.wh-blend {
  margin-top: 12px; min-height: 52px; padding: 0 26px;
  border: none; border-radius: 14px; cursor: pointer;
  background: #26221C; color: #FCFBF8; font-family: inherit;
  font-weight: 800; font-size: 1.05rem;
}
.wh-blend:disabled { opacity: .35; cursor: default; }

.wh-whole {
  max-height: 0; overflow: hidden; opacity: 0;
  font-family: var(--anp-font-read, 'Lexend', sans-serif);
  font-weight: 700; font-size: clamp(44px, 11vw, 64px); color: #1E7A46;
  transition: max-height .4s ease, opacity .4s ease;
}
.wh-whole.show { max-height: 110px; opacity: 1; margin-top: 10px; animation: whWin .6s ease both; }
@keyframes whWin { 0% { transform: scale(.8); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }

.wh-done {
  display: none; margin: 14px auto 0; min-height: 52px; padding: 0 28px;
  border: none; border-radius: 14px; cursor: pointer;
  background: #1E7A46; color: #fff; font-family: inherit;
  font-weight: 800; font-size: 1.05rem;
}
.wh-done.show { display: inline-block; animation: whPop .3s ease both; }

/* early-reader letterforms for the youngest band */
[data-band="1"] .wh-pill, [data-band="1"] .wh-whole { font-family: var(--anp-font-early, var(--anp-font-read, sans-serif)); }

/* dark register — fieldbook overlay or band 3-4 pages */
.fb-overlay ~ .wh-overlay .wh-card,
[data-band="3"] .wh-card, [data-band="4"] .wh-card {
  background: #1B1F29; color: #E4E5F0;
}
.fb-overlay ~ .wh-overlay .wh-kick,
[data-band="3"] .wh-kick, [data-band="4"] .wh-kick { color: #8a6300; }
.fb-overlay ~ .wh-overlay .wh-pill,
[data-band="3"] .wh-pill, [data-band="4"] .wh-pill {
  background: rgba(255, 255, 255, .05); border-color: #2A2F3C; color: #E4E5F0;
}
.fb-overlay ~ .wh-overlay .wh-pill.lit,
[data-band="3"] .wh-pill.lit, [data-band="4"] .wh-pill.lit { border-color: #8a6300; color: #8a6300; }
.fb-overlay ~ .wh-overlay .wh-tip,
[data-band="3"] .wh-tip, [data-band="4"] .wh-tip { color: #5b6072; }
.fb-overlay ~ .wh-overlay .wh-blend,
[data-band="3"] .wh-blend, [data-band="4"] .wh-blend { background: #F4B73F; color: #35250E; }
.fb-overlay ~ .wh-overlay .wh-whole,
[data-band="3"] .wh-whole, [data-band="4"] .wh-whole { color: #8a6300; }

/* conquered words inside the dark fieldbook body */
.fb-p .wh-w.wh-conquered { background: rgba(244, 183, 63, .14); box-shadow: 0 2px 0 rgba(244, 183, 63, .5); }
.fb-p.wh-live .wh-w:hover { background: rgba(244, 183, 63, .16); }

/* ---------- READING SPOTLIGHT (fieldbook "Read it myself" mode) ---------- */
.fb-spot-btn {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 6;
  min-height: 48px; padding: 0 22px; border-radius: 24px; border: 1px solid #2A2F3C;
  background: rgba(19, 22, 29, .88); color: #8a6300; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .92rem;
  backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
.fb-spot-btn:hover { border-color: #8a6300; }

.fb-spotlight .fb-p .wh-w { opacity: .3; transition: opacity .25s, background .25s; }
.fb-spotlight .fb-p .wh-w.spot-done { opacity: .78; }
.fb-spotlight .fb-p .wh-w.spot-on {
  opacity: 1; background: rgba(244, 183, 63, .25); border-radius: 5px;
  box-shadow: 0 0 0 3px rgba(244, 183, 63, .18);
}

/* honor prefers-reduced-motion: stop drifting/looping animations for
   kids with vestibular sensitivity (added in the Fable-5 upgrade pass) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Set for Variability "Now flex it" step (Julie Bedell, 2026-09-08) ---------- */
.wh-flex {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s ease, opacity .35s ease, margin .35s ease;
  border-top: 1px dashed rgba(30, 122, 70, .35); margin-top: 0; padding: 0;
}
.wh-flex.show { max-height: 320px; opacity: 1; margin-top: 14px; padding-top: 12px; }
.wh-flex-kick {
  margin: 0 0 4px; font-size: .72rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: #1E7A46;
}
.wh-flex-tip { margin: 4px 0 10px; font-size: .92rem; color: #5b5650; font-weight: 600; line-height: 1.4; }
.wh-flex-hear {
  min-height: 44px; padding: 10px 18px; border: 2px solid #1E7A46; border-radius: 999px;
  background: rgba(30, 122, 70, .1); color: #1E7A46; font-family: inherit;
  font-weight: 800; font-size: .98rem; cursor: pointer;
}
.wh-flex-hear:hover { background: rgba(30, 122, 70, .18); }
/* dark story bands (fieldbook / older worlds) */
.fb-overlay ~ .wh-overlay .wh-flex-kick,
[data-band="3"] .wh-flex-kick, [data-band="4"] .wh-flex-kick { color: #F4B73F; }
.fb-overlay ~ .wh-overlay .wh-flex,
[data-band="3"] .wh-flex, [data-band="4"] .wh-flex { border-top-color: rgba(244, 183, 63, .35); }
.fb-overlay ~ .wh-overlay .wh-flex-tip,
[data-band="3"] .wh-flex-tip, [data-band="4"] .wh-flex-tip { color: #5b6072; }
.fb-overlay ~ .wh-overlay .wh-flex-hear,
[data-band="3"] .wh-flex-hear, [data-band="4"] .wh-flex-hear {
  border-color: #F4B73F; color: #F4B73F; background: rgba(244, 183, 63, .12);
}