/* Parlons français! — the French course page. Builds on css/learn.css
   (tokens, header, map). Every class here starts with fr-. Targets are at
   least 44px, nothing is wider than the screen at 375px, and right / wrong
   always carry a ✓ / ✗ and words as well as colour. */

body.learn {
  --fr-right: #2e7d4f;
  --fr-right-bg: #e3f4e8;
  --fr-wrong: #a2553a;
  --fr-wrong-bg: #fbe9e2;
  --fr-hint: #f5c967;
  overflow-x: hidden;
}

.fr-loading { text-align: center; font-size: 1.2rem; padding: 32px 0; }

/* ---------- buttons ---------- */

.fr-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 8px 14px;
  border: 3px solid var(--learn-accent);
  border-radius: 18px;
  background: var(--learn-card);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.12s ease;
  touch-action: manipulation;
}
.fr-btn:active { transform: translateY(2px); }
.fr-btn[aria-disabled="true"] { cursor: default; }
.fr-btn-text { font-size: 1.05rem; }
.fr-next, .fr-again { background: var(--learn-accent); color: #fff; }
body.learn .fr-next, body.learn .fr-again { color: #fff; }

/* ---------- mots du jour tile ---------- */

.fr-mix-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  margin: 8px 0 20px;
  padding: 12px 16px;
  border: 3px solid var(--learn-accent);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--learn-card), var(--learn-soft));
  text-align: left;
  box-shadow: 0 0 0 4px var(--learn-sun), 0 6px 0 rgba(0, 0, 0, 0.08);
}
.fr-mix-emoji { font-size: 2.2rem; line-height: 1; flex: none; }
.fr-mix-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.fr-mix-title { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.35rem; }
.fr-mix-sub { font-size: 0.95rem; font-weight: 700; opacity: 0.85; }
.fr-due {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--learn-accent);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
}
.fr-unit-stars { margin-left: auto; font-size: 1rem; white-space: nowrap; }
.fr-map-live { min-height: 1.5em; text-align: center; font-weight: 700; }

/* ---------- activity screen ---------- */

.fr-screen { max-width: 760px; margin: 0 auto; }
.fr-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.fr-screen-title {
  margin: 0;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  overflow-wrap: anywhere;
  min-width: 0;
}
.fr-screen-emoji { margin-right: 6px; }
.fr-activity { display: flex; flex-direction: column; gap: 12px; }
.fr-top { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fr-prompt { margin: 0; text-align: center; font-size: 1.15rem; font-weight: 800; }
.fr-progress { margin: 0; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; font-size: 0.9rem; color: var(--learn-accent); }
.fr-dot-now { transform: scale(1.3); }
.fr-board { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fr-live {
  min-height: 2.6em;
  margin: 0;
  padding: 8px 12px;
  border-radius: 14px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.fr-live:empty { background: transparent; }
.fr-live:not(:empty) { background: var(--learn-soft); }
.fr-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.fr-ask { gap: 14px; }

.fr-pic { font-size: 2.6rem; line-height: 1.1; }
.fr-pic-big { font-size: clamp(3rem, 16vw, 5rem); }
/* A drawn picture (item.img) takes the place of an emoji at the same size. */
.fr-pic-img { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; object-fit: contain; pointer-events: none; user-select: none; }
.fr-phrase-one + .fr-phrase-one { margin-left: 0.25em; }
.fr-word { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.5rem; overflow-wrap: anywhere; text-align: center; }
.fr-word-big { font-size: clamp(1.6rem, 7vw, 2.4rem); }
.fr-en { font-size: 1rem; font-weight: 700; opacity: 0.8; }
.fr-en-big { font-size: 1.15rem; text-align: center; }

/* learn card */
.fr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(100%, 320px);
  min-height: 200px;
  justify-content: center;
  padding: 18px;
  border: 4px solid var(--learn-accent);
  border-radius: 28px;
  background: var(--learn-card);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08);
}
.fr-card-static { min-height: 160px; }

/* picture choices */
.fr-choices { display: grid; gap: 12px; width: 100%; max-width: 560px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fr-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 112px;
  padding: 10px 6px;
  border-radius: 24px;
  border-color: var(--learn-soft);
  background: var(--learn-card);
}
.fr-mark { font-size: 1.3rem; font-weight: 900; }
.fr-choice .fr-mark { position: absolute; top: 4px; right: 8px; }
.fr-label { font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; text-align: center; }
.fr-right { border-color: var(--fr-right) !important; background: var(--fr-right-bg) !important; color: var(--fr-right) !important; }
.fr-wrong { border-color: var(--fr-wrong) !important; background: var(--fr-wrong-bg) !important; color: var(--fr-wrong) !important; border-style: dashed !important; }
.fr-hear { font-size: 1.6rem; min-width: 64px; min-height: 64px; border-radius: 999px; }

/* match */
.fr-match { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 560px; }
.fr-col { display: flex; flex-direction: column; gap: 10px; }
.fr-tile { min-height: 60px; font-size: 1.15rem; overflow-wrap: anywhere; }
.fr-tile[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--fr-hint); background: var(--learn-soft); }
.fr-tile[aria-pressed="true"]::before { content: "👉 "; }
.fr-tile-pic .fr-pic { font-size: 2rem; }

/* memory */
.fr-memory-grid { display: grid; gap: 10px; width: 100%; max-width: 520px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-memory-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fr-memcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 6px 4px;
  border-radius: 18px;
  background: var(--learn-accent);
  color: #fff;
}
body.learn .fr-memcard { color: #fff; }
.fr-memcard .fr-word { font-size: 1.05rem; }
.fr-memback { font-size: 2rem; }
body.learn .fr-memcard.fr-flipped { background: var(--learn-card); color: var(--learn-ink); }
.fr-memsound { font-size: 1rem; }
.fr-memcard .fr-mark { position: absolute; top: 2px; right: 6px; }

/* phrase */
.fr-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  min-height: 72px;
  padding: 10px;
  border: 3px dashed var(--learn-accent);
  border-radius: 18px;
  background: var(--learn-card);
}
.fr-bank { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fr-hint { box-shadow: 0 0 0 5px var(--fr-hint); }
.fr-hint::before { content: "👉 "; }
.fr-phrase-pic { text-align: center; }

/* gender + numbers */
.fr-bins { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; }
.fr-bin { min-width: 72px; min-height: 72px; font-size: 1.6rem; border-radius: 22px; }
.fr-number { display: flex; flex-direction: column; align-items: center; min-width: 88px; }
.fr-digit { font-size: 2rem; }
.fr-numword { font-size: 0.95rem; }

/* count */
.fr-counter { margin: 0; min-height: 1.4em; font-family: "Fredoka", system-ui, sans-serif; font-size: 2rem; font-weight: 600; }
.fr-bubbles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 520px; }
.fr-bubble {
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 999px;
  border-color: #8fc5e8;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d7efff 60%, #b6dcf5);
  font-size: 1.8rem;
  animation: fr-float 2.6s ease-in-out infinite;
}
.fr-bubble:nth-child(2n) { animation-delay: -1.2s; }
/* Counted bubbles while "Combien?" is asked: plain again, still, no number. */
.fr-bubble.fr-counted { animation: none; color: transparent; }
.fr-popped { animation: none; background: var(--fr-right-bg); border-color: var(--fr-right); color: var(--fr-right); font-size: 1.4rem; }
@keyframes fr-float { 50% { transform: translateY(-5px); } }

.fr-shake { animation: fr-shake 0.4s ease; }
@keyframes fr-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* result */
.fr-result { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; text-align: center; }
.fr-result-emoji { margin: 0; font-size: 4rem; }
.fr-result-title { margin: 0; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 2.2rem; }
.fr-result-stars { margin: 0; font-size: 2.4rem; letter-spacing: 4px; }

/* word shown when no voice could speak it */
.fr-bigword {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 24px;
  z-index: 50;
  padding: 16px;
  border-radius: 24px;
  background: var(--learn-accent);
  color: #fff;
  text-align: center;
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: clamp(1.8rem, 8vw, 3rem);
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* body.learn button sets font: inherit and color: inherit (0,1,2), which
   beats a single class, so the button type sizes are restated here. */
body.learn .fr-btn { font-size: 1.3rem; font-weight: 800; line-height: 1.1; }
body.learn .fr-hear { font-size: 1.6rem; }
body.learn .fr-tile { font-size: 1.15rem; }
body.learn .fr-bin { font-size: 1.6rem; }
body.learn .fr-bubble { font-size: 1.8rem; }
body.learn .fr-popped { font-size: 1.4rem; color: var(--fr-right); }
body.learn .fr-mix-tile { font-weight: 700; }

@media (max-width: 400px) {
  .fr-choice { min-height: 96px; }
  .fr-memcard { min-height: 76px; }
  .fr-bubble { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-bubble, .fr-shake { animation: none !important; }
  .fr-btn { transition: none; }
}

/* ---------- art slots (js/french/art.js) ---------- */

/* A picture slot is an <img class="fr-art fr-art-img"> once its image
   exists, else the emoji <span class="fr-art fr-art-emoji">. Screens size
   both through their own class. */
.fr-art { display: inline-block; line-height: 1.1; }
.fr-art-img { max-width: 100%; height: auto; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-select: none; }
/* An item picture in a .fr-pic slot is as big as the emoji would be. */
.fr-art-img.fr-pic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }