/* "Le jardin de Bella" — Bella's French garden. Builds on css/learn.css
   (tokens, theme-bella) and css/french.css. Every class starts with fr-b-
   (or is the .fr-bella root). Targets are at least 72px (picture choices at
   least 120px), nothing is wider than the screen at 375px, and motion stops
   under prefers-reduced-motion. No :has(), no nesting (Safari 15). */

.fr-bella {
  --fr-b-grass: #cfeac0;
  --fr-b-grass-deep: #9fd08a;
  --fr-b-soil: #8a5a3b;
  --fr-b-soil-light: #b07b55;
  --fr-b-glow: #ffd166;
  --fr-b-right: #2e7d4f;
  --fr-b-card: #ffffff;
  --fr-b-ink: var(--learn-ink, #5e3d60);
  --fr-b-accent: var(--learn-accent, #b04a7c);
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 24px;
  color: var(--fr-b-ink);
  overflow-x: hidden;
}
.fr-bella .fr-b-view { width: 100%; }

/* One live region for the whole garden; screen readers only. */
.fr-bella .fr-b-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- pictures ---------- */

.fr-bella .fr-art { display: inline-block; line-height: 1; }
.fr-bella .fr-art-emoji {
  font-size: calc(var(--fr-art-size, 64px) * 0.62);
  line-height: 1;
}
.fr-bella .fr-art-img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* ---------- shared bar: home · Castor · 🔊 ---------- */

.fr-b-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
}
.fr-b-castor {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-height: 84px;
}
.fr-b-castor .fr-art-emoji { font-size: 3.6rem; }
.fr-b-castor[data-pose="cheer"] .fr-art { animation: fr-b-bounce 0.9s ease 2; }
.fr-b-castor.fr-b-talking .fr-art { animation: fr-b-boing 0.5s ease 2; }

.fr-bella .fr-b-round {
  flex: none;
  width: 72px;
  height: 72px;
  border: 4px solid var(--fr-b-accent);
  border-radius: 50%;
  background: var(--fr-b-card);
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
}
.fr-bella .fr-b-round:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); }
/* the 🔊 sits on the right even when there is no home button */
.fr-b-garden .fr-b-bar::before,
.fr-b-reward .fr-b-bar::before { content: ""; width: 72px; flex: none; }

.fr-b-title {
  margin: 4px 0 10px;
  text-align: center;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.15;
  outline: none;
}
.fr-b-title-emoji { margin-right: 6px; }

/* ---------- the garden path ---------- */

.fr-b-garden {
  padding: 0 0 12px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.55) 0 40px, transparent 41px),
    linear-gradient(180deg, #e8f6ff 0, #e8f6ff 150px, var(--fr-b-grass) 151px, var(--fr-b-grass-deep) 100%);
}
.fr-b-garden .fr-b-bar { padding: 6px 10px; }

.fr-b-path {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fr-b-stop {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
}
/* the trail of stepping dots between stops */
.fr-b-stop + .fr-b-stop::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 10px;
  height: 30px;
  margin-left: -5px;
  background: radial-gradient(circle, rgba(138, 90, 59, 0.45) 4px, transparent 5px) 0 0 / 10px 15px repeat-y;
}
.fr-b-side-r { padding-left: 144px; }
.fr-b-side-l { padding-right: 144px; }

.fr-bella .fr-b-spot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #fff7e8;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12);
  touch-action: manipulation;
}
.fr-bella .fr-b-spot:active { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); }
.fr-b-spot-done .fr-art-emoji { font-size: 3.3rem; }
.fr-b-spot-done .fr-art-img { width: 72px; height: 72px; }

/* the next stop: one big glowing ▶ */
.fr-bella .fr-b-play {
  width: 128px;
  height: 128px;
  border-color: #fff;
  background: var(--fr-b-accent);
  color: #fff;
  animation: fr-b-glow 1.8s ease-in-out infinite;
}
.fr-b-play-icon, .fr-b-go-icon {
  font-size: 3.4rem;
  line-height: 1;
  color: #fff;
  margin-left: 8px;
}

/* a seed still under the soil */
.fr-bella .fr-b-seed {
  width: 80px;
  height: 80px;
  border-color: rgba(255, 255, 255, 0.6);
  background: radial-gradient(circle at 50% 30%, var(--fr-b-soil-light), var(--fr-b-soil));
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.15);
}
.fr-b-seed-shape {
  display: block;
  width: 22px;
  height: 30px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #f1d39a;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.12);
  transform: rotate(18deg);
}

/* a sticker that just grew */
.fr-bella .fr-b-grow .fr-art { animation: fr-b-grow 1.3s cubic-bezier(0.3, 1.6, 0.5, 1) both; }

/* ---------- a session ---------- */

.fr-b-screen, .fr-b-reward { padding: 0 0 12px; }
.fr-b-leaves {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 10px;
}
.fr-b-leaf {
  width: 14px;
  height: 14px;
  border-radius: 0 70% 0 70%;
  background: rgba(46, 125, 79, 0.2);
}
.fr-b-leaf-on { background: var(--fr-b-right); }
.fr-b-stage { display: flex; flex-direction: column; align-items: center; }

/* picture buttons */
.fr-bella .fr-b-big,
.fr-bella .fr-b-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border: 5px solid var(--fr-b-accent);
  border-radius: 32px;
  background: var(--fr-b-card);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.fr-bella .fr-b-big { width: min(280px, 82vw); min-height: 260px; }
.fr-b-big .fr-art-emoji { font-size: 8.5rem; }
.fr-b-big .fr-art-img { width: 220px; height: 220px; }
.fr-b-word {
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  opacity: 0.75;
}
.fr-b-big .fr-b-word { font-size: 1.5rem; }
.fr-b-look { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.fr-bella .fr-b-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: var(--fr-b-right);
  color: #fff;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.14);
  touch-action: manipulation;
}
.fr-bella .fr-b-go[hidden] { display: none; }
.fr-b-replay { margin: 8px auto 0; }
.fr-b-to-garden .fr-b-go-icon { margin-left: 0; }

.fr-b-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.fr-bella .fr-b-choice { width: 150px; min-width: 120px; min-height: 160px; }
.fr-b-choice .fr-art-emoji { font-size: 5.2rem; }
.fr-b-choice .fr-art-img { width: 120px; height: 120px; }
.fr-bella .fr-b-choice[aria-disabled="true"] { cursor: default; }
.fr-bella .fr-b-miss { opacity: 0.55; border-style: dashed; }
.fr-bella .fr-b-right { border-color: var(--fr-b-right); background: #e3f4e8; }
.fr-bella .fr-b-glow { border-color: #e9a400; box-shadow: 0 0 0 8px var(--fr-b-glow), 0 7px 0 rgba(0, 0, 0, 0.1); animation: fr-b-glow-ring 1.2s ease-in-out infinite; }

/* ---------- Attrape! ---------- */

.fr-b-meter { display: flex; gap: 8px; justify-content: center; margin: 0 0 8px; }
.fr-b-dot {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(48, 105, 171, 0.5);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.fr-b-dot-on { background: #6fb6ff; border-color: #3069ab; }

.fr-b-sky {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 340px;
  margin: 0 auto;
  border-radius: 28px;
  background: linear-gradient(180deg, #dff1ff, #f4fbff);
  overflow: hidden;
}
.fr-bella .fr-b-bubble {
  position: absolute;
  top: 110px;
  width: 104px;
  height: 104px;
  padding: 0;
  border: 4px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 9px, rgba(190, 228, 255, 0.85) 10px, rgba(150, 205, 255, 0.55) 100%);
  box-shadow: inset 0 -6px 12px rgba(48, 105, 171, 0.2), 0 4px 10px rgba(48, 105, 171, 0.2);
  touch-action: manipulation;
  animation: fr-b-rise 1.6s ease-out var(--fr-b-delay, 0s) both, fr-b-bob 4.2s ease-in-out calc(var(--fr-b-delay, 0s) + 1.6s) infinite;
}
.fr-b-bubble .fr-art-emoji { font-size: 3.4rem; }
.fr-b-bubble .fr-art-img { width: 68px; height: 68px; }
.fr-b-bubble .fr-b-word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.fr-b-lane0 { left: calc(16.66% - 52px); }
.fr-b-lane1 { left: calc(50% - 52px); top: 60px; }
.fr-b-lane2 { left: calc(83.33% - 52px); top: 150px; }
.fr-bella .fr-b-popped { animation: fr-b-pop 0.45s ease-out forwards; pointer-events: none; }

/* reduced motion: a still grid of bubbles */
.fr-b-still {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: auto;
  min-height: 160px;
  padding: 20px 8px;
}
.fr-b-still .fr-b-bubble { position: static; animation: none; }
.fr-b-still .fr-b-popped { animation: none; opacity: 0.25; }

/* ---------- reward ---------- */

.fr-b-pot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px auto 18px;
  width: 240px;
}
.fr-b-pot .fr-b-sticker { animation: fr-b-grow 1.4s cubic-bezier(0.3, 1.6, 0.5, 1) 0.2s both; }
.fr-b-pot .fr-art-emoji { font-size: 9rem; }
.fr-b-soil {
  display: block;
  width: 200px;
  height: 34px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, var(--fr-b-soil-light), var(--fr-b-soil));
}
.fr-b-row { display: flex; align-items: center; justify-content: center; gap: 24px; }

/* ---------- little motions ---------- */

.fr-b-shake { animation: fr-b-shake 0.5s ease; }
.fr-b-wiggle { animation: fr-b-wiggle 0.9s ease; }
.fr-b-boing { animation: fr-b-boing 0.5s ease; }
.fr-b-hop { animation: fr-b-hop 0.8s ease; }

@keyframes fr-b-glow {
  0%, 100% { box-shadow: 0 0 0 6px var(--fr-b-glow), 0 6px 0 rgba(0, 0, 0, 0.12); }
  50% { box-shadow: 0 0 0 16px rgba(255, 209, 102, 0.55), 0 6px 0 rgba(0, 0, 0, 0.12); }
}
@keyframes fr-b-glow-ring {
  0%, 100% { box-shadow: 0 0 0 6px var(--fr-b-glow), 0 7px 0 rgba(0, 0, 0, 0.1); }
  50% { box-shadow: 0 0 0 14px rgba(255, 209, 102, 0.6), 0 7px 0 rgba(0, 0, 0, 0.1); }
}
@keyframes fr-b-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
@keyframes fr-b-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg) scale(1.06); }
  40% { transform: rotate(7deg) scale(1.06); }
  60% { transform: rotate(-5deg) scale(1.04); }
  80% { transform: rotate(4deg); }
}
@keyframes fr-b-boing {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.1); }
}
@keyframes fr-b-hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-14px); }
}
@keyframes fr-b-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px); }
}
@keyframes fr-b-grow {
  0% { transform: scale(0.15); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fr-b-rise {
  0% { transform: translateY(260px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes fr-b-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-26px); }
}
@keyframes fr-b-pop {
  0% { transform: scale(1); opacity: 1; }
  60% { transform: scale(1.3); opacity: 0.7; }
  100% { transform: scale(0.2); opacity: 0; }
}

@media (max-width: 400px) {
  .fr-b-side-r { padding-left: 120px; }
  .fr-b-side-l { padding-right: 120px; }
  .fr-bella .fr-b-choice { width: 140px; }
  .fr-b-title { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-bella *, .fr-bella *::before, .fr-bella *::after {
    animation: none !important;
    transition: none !important;
  }
  .fr-bella .fr-b-play { box-shadow: 0 0 0 8px var(--fr-b-glow), 0 6px 0 rgba(0, 0, 0, 0.12); }
}
.fr-b-reduced .fr-b-bubble { position: static; }

/* ---------- no voice: Castor rests, pictures point ---------- */

/* 💤 by Castor only while no voice can speak (bella.js adds fr-b-quiet). */
.fr-b-castor { position: relative; }
.fr-b-zzz {
  display: none;
  position: absolute;
  top: 0;
  left: calc(50% + 22px);
  font-size: 1.6rem;
  line-height: 1;
  pointer-events: none;
}
.fr-b-quiet .fr-b-zzz { display: block; }

/* The picture of a word no voice could say pulses once instead. */
.fr-bella .fr-b-hint { box-shadow: 0 0 0 10px var(--fr-b-glow), 0 6px 0 rgba(0, 0, 0, 0.1); }
.fr-bella .fr-b-big.fr-b-hint,
.fr-bella .fr-b-choice.fr-b-hint { animation: fr-b-wiggle 0.9s ease; }

/* ---------- the start: "▶ Bonjour!" ----------
   Before the first tap (so before any sound on an iPad) a cover sits over
   the garden: Castor hops and one big ▶ waits. The tap plays his hello. */
.fr-b-start {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  background: rgba(238, 246, 238, 0.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.fr-b-start-castor .fr-art { animation: fr-b-hop 1.4s ease-in-out infinite; }
.fr-b-start-castor .fr-art-emoji { font-size: 7.5rem; }
.fr-b-start-castor .fr-art-img { width: 200px; height: 200px; }
.fr-bella .fr-b-start-go {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 200px;
  max-width: 100%;
  height: 200px;
  border: 6px solid #fff;
  border-radius: 50%;
  background: var(--fr-b-accent);
  color: #fff;
  font-family: "Fredoka", system-ui, sans-serif;
  touch-action: manipulation;
  animation: fr-b-glow 1.8s ease-in-out infinite;
}
.fr-b-start-go .fr-b-go-icon { font-size: 4.6rem; }
.fr-b-start-word { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }

/* ---------- the garden picture and Castor at rest ---------- */

/* bella-garden-bg covers the whole garden, tall (as the manifest asks) or
   wide, top first; the drawn meadow stays underneath until it loads. */
.fr-b-garden.fr-b-has-bg {
  background:
    var(--fr-b-bg) center top / cover no-repeat,
    linear-gradient(180deg, #e8f6ff 0, #e8f6ff 150px, var(--fr-b-grass) 151px, var(--fr-b-grass-deep) 100%);
}
/* Today's stop is done: the ▶ still plays, but stops calling. */
.fr-b-resting .fr-b-play { animation: none; opacity: 0.85; }
/* castor-sleep until its art exists: the 💤 shows by the beaver. */
.fr-b-castor[data-pose="sleep"] .fr-b-zzz { display: block; }

/* ---------- the shell header while Bella plays ----------
   The site's header controls are for grown-ups: smaller and quieter, and the
   site-home link shows a door so it is not mistaken for Bella's 🏡 garden
   button. Targets stay at least 44px. (bella.js puts fr-b-on on <body>.) */
.fr-b-on .learn-header { opacity: 0.85; }  /* quieter, still >= 4.5:1 text contrast */
.fr-b-on .learn-header:focus-within { opacity: 1; }
.fr-b-on .learn-header .learn-title { font-size: 1.1rem; }
.fr-b-on .learn-header .learn-home {
  min-width: 44px;
  min-height: 44px;
  font-size: 0;
  box-shadow: none;
}
.fr-b-on .learn-header .learn-home::before { content: "🚪"; font-size: 1.2rem; line-height: 1; }
.fr-b-on .learn-header .learn-chip { min-height: 44px; padding: 2px 10px; border-width: 2px; font-size: 0.85rem; }
.fr-b-on .learn-header .learn-chip-emoji { font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .fr-b-start-castor .fr-art, .fr-bella .fr-b-start-go { animation: none; }
}