/* listen-find.css — Listen & Find (picker and board). docs/foundational-skills-plan.md §7.
   Tiles use Andika (SIL, OFL): single-storey a and g and an unambiguous I/l/1,
   the shapes a child sees in their own handwriting and the classroom alphabet
   strip. Atkinson Hyperlegible (GraphemeDrop's b/d/p/q face) is the fallback. */
:root {
  --lf-bg: #0f1724; --lf-panel: #141c2a; --lf-text: #e6eefb; --lf-muted: #a9b7cd;
  --lf-line: #223045; --lf-pri: #6ba6ff; --lf-tile: #1b2638; --lf-tile-ink: #ffffff;
  --lf-right: #22c55e; --lf-wrong: #ef4444; --lf-prompt: #fbbf24; --lf-star: #fbbf24; --lf-star-off: #334155;
}
:root.light-mode {
  --lf-bg: #ffffff; --lf-panel: #f8fafc; --lf-text: #1e293b; --lf-muted: #64748b;
  --lf-line: #cbd5e1; --lf-pri: #2563eb; --lf-tile: #ffffff; --lf-tile-ink: #0f172a;
  --lf-right: #16a34a; --lf-wrong: #dc2626; --lf-prompt: #d97706; --lf-star: #f59e0b; --lf-star-off: #e2e8f0;
}

/* Every flex/grid box here hides with [hidden]; display:flex would beat it. */
.lf-play [hidden], .lf-options [hidden], .lf-shelf [hidden] { display: none !important; }

.lf-font { font-family: 'Andika', 'Atkinson Hyperlegible', system-ui, sans-serif; }

/* ── Board page ───────────────────────────────────────────────────────── */
body.lf-play { margin: 0; min-height: 100dvh; background: var(--lf-bg); color: var(--lf-text);
  font-family: Inter, system-ui, 'Segoe UI', Roboto, sans-serif; display: flex; flex-direction: column; }
.lf-top { display: flex; align-items: center; gap: 12px; padding: 10px clamp(10px, 2vw, 28px);
  /* The site language pill (#rf-lang-float) is fixed top-right; keep clear of it. */
  padding-right: clamp(130px, 16vw, 170px);
  border-bottom: 1px solid var(--lf-line); }
.lf-top a, .lf-top button { color: inherit; text-decoration: none; }
.lf-back, .lf-gear { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px;
  border-radius: 12px; border: 1px solid var(--lf-line); background: var(--lf-panel); font-size: 22px; cursor: pointer; }
.lf-title { flex: 1; min-width: 0; margin: 0; font-size: clamp(18px, 3vw, 26px); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lf-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 3vh, 28px); padding: 12px clamp(10px, 2vw, 28px) 20px; min-height: 0; }

.lf-start { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lf-start p { color: var(--lf-muted); margin: 0; font-size: 18px; }
.lf-start-btn { font: inherit; font-size: clamp(28px, 6vw, 44px); font-weight: 800; padding: 22px 48px; border-radius: 999px;
  border: 0; background: var(--lf-pri); color: #fff; cursor: pointer; min-width: 240px; }
.lf-start-btn:disabled { opacity: .5; cursor: wait; }
.lf-error { color: var(--lf-wrong); font-size: 20px; text-align: center; }

.lf-board { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 3vh, 26px); flex: 1; min-height: 0; }
.lf-board[hidden] { display: none; }
.lf-replay { width: clamp(96px, 18vmin, 150px); height: clamp(96px, 18vmin, 150px); border-radius: 50%;
  border: 4px solid var(--lf-pri); background: var(--lf-panel); font-size: clamp(44px, 9vmin, 72px); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--lf-text); flex: none; }
.lf-replay.is-speaking { box-shadow: 0 0 0 8px color-mix(in srgb, var(--lf-pri) 30%, transparent); }

.lf-grid { --cols: 2; --rows: 2; display: grid; grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr); gap: clamp(10px, 2.2vmin, 22px);
  width: min(100%, calc(var(--cols) * 260px)); flex: 1; max-height: 62dvh; min-height: 0; }
.lf-tile { font-family: 'Andika', 'Atkinson Hyperlegible', system-ui, sans-serif; font-weight: 700;
  min-width: 96px; min-height: 96px; border-radius: 22px; border: 3px solid var(--lf-line);
  background: var(--lf-tile); color: var(--lf-tile-ink); cursor: pointer; line-height: 1;
  font-size: clamp(48px, min(16vmin, calc(52dvh / var(--rows))), 140px);
  display: flex; align-items: center; justify-content: center; padding: 0; touch-action: manipulation;
  box-shadow: 0 4px 0 var(--lf-line); transition: transform .08s ease, opacity .25s ease, border-color .2s ease; }
.lf-tile.is-pair { letter-spacing: .04em; }
.lf-grid[data-size="9"] .lf-tile, .lf-grid[data-size="6"] .lf-tile { font-size: clamp(40px, min(13vmin, calc(46dvh / var(--rows))), 110px); }
.lf-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lf-line); }
.lf-tile:focus-visible { outline: 4px solid var(--lf-pri); outline-offset: 3px; }
.lf-tile.is-right { border-color: var(--lf-right); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lf-right) 45%, transparent); }
.lf-tile.is-wrong { opacity: .35; border-color: var(--lf-wrong); cursor: default; }
.lf-tile.is-answer, .lf-tile.is-prompt { border-color: var(--lf-prompt); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lf-prompt) 45%, transparent); }
.lf-tile.is-prompt { animation: lf-pulse 1.1s ease-in-out infinite; }
.lf-tile.shake { animation: lf-shake .35s ease; }
@keyframes lf-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
@keyframes lf-pulse { 50% { transform: scale(1.06); } }

/* The keyword line ("m o _") and the ABC-order strip. Andika, like the tiles. */
.lf-clue { font-family: 'Andika', 'Atkinson Hyperlegible', system-ui, sans-serif; font-weight: 700; flex: none;
  font-size: clamp(34px, 8vmin, 64px); letter-spacing: .12em; line-height: 1.1; text-align: center; max-width: 100%;
  overflow-wrap: anywhere; }
.lf-clue.is-strip { font-size: clamp(22px, 4.6vmin, 40px); letter-spacing: .08em; color: var(--lf-muted); }
.lf-clue .lf-next { color: var(--lf-pri); }
.lf-order-btn { background: var(--lf-panel); color: var(--lf-text); border: 2px solid var(--lf-pri); }
/* 26 tiles: small enough to fit, still well over a 44px touch target. */
.lf-grid.is-order { max-height: 70dvh; gap: clamp(6px, 1.4vmin, 12px); width: min(100%, calc(var(--cols) * 120px)); }
.lf-grid.is-order .lf-tile { min-width: 48px; min-height: 48px; border-radius: 14px;
  font-size: clamp(26px, min(7vmin, calc(56dvh / var(--rows))), 64px); }
.lf-tile.is-placed { opacity: .3; border-color: var(--lf-right); cursor: default; }

.lf-stars { display: flex; gap: 6px; font-size: clamp(22px, 4.5vmin, 34px); flex: none; }
.lf-star { color: var(--lf-star-off); transition: color .2s ease, transform .2s ease; }
.lf-star.on { color: var(--lf-star); }
.lf-stars.burst .lf-star { animation: lf-burst .6s ease; }
@keyframes lf-burst { 50% { transform: scale(1.6) rotate(20deg); } }

.lf-celebrate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px;
  background: color-mix(in srgb, var(--lf-bg) 70%, transparent); z-index: 50; flex-wrap: wrap; padding: 16px; }
.lf-celebrate[hidden] { display: none; }
.lf-celebrate .lf-big { font: inherit; font-size: clamp(26px, 5vw, 38px); font-weight: 800; border-radius: 999px; padding: 20px 36px;
  border: 0; cursor: pointer; min-width: 200px; min-height: 80px; }
.lf-keep { background: var(--lf-pri); color: #fff; }
.lf-done { background: var(--lf-panel); color: var(--lf-text); border: 2px solid var(--lf-line) !important; }

.lf-sheet { position: fixed; left: clamp(10px, 2vw, 28px); top: 76px; z-index: 60; background: var(--lf-panel);
  border: 1px solid var(--lf-line); border-radius: 16px; padding: 14px 16px; width: min(420px, calc(100vw - 32px));
  box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.lf-sheet[hidden] { display: none; }
.lf-sheet h2 { margin: 0 0 10px; font-size: 18px; display: flex; justify-content: space-between; align-items: center; }
.lf-sheet h2 button { font: inherit; background: none; border: 0; color: inherit; font-size: 22px; cursor: pointer; min-width: 44px; min-height: 44px; }

/* ── Options rows (both pages) ───────────────────────────────────────── */
.lf-opt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.lf-opt-row[hidden] { display: none; }
.lf-opt-label { min-width: 150px; color: var(--lf-muted); font-size: 14px; font-weight: 600; }
.lf-opt-row.is-locked .lf-opt-label::after { content: ' 🔒'; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-chip { font: inherit; font-size: 15px; padding: 8px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--lf-line);
  background: transparent; color: var(--lf-text); cursor: pointer; }
.lf-chip.active { background: var(--lf-pri); border-color: var(--lf-pri); color: #fff; }
.lf-chip:disabled { cursor: not-allowed; opacity: .6; }
.lf-chip.active:disabled { opacity: .85; }

/* ── Picker page ─────────────────────────────────────────────────────── */
.lf-lede { color: var(--lf-muted); margin: 0 0 14px; max-width: 70ch; }
.lf-shelf h2 { font-size: 20px; margin: 22px 0 10px; display: flex; gap: 8px; align-items: center; }
.lf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.lf-set { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; border: 1px solid var(--lf-line);
  background: var(--lf-panel); color: var(--lf-text); text-decoration: none; min-height: 96px; transition: border-color .15s ease, transform .15s ease; }
.lf-set:hover, .lf-set:focus-visible { border-color: var(--lf-pri); transform: translateY(-2px); }
.lf-set b { font-size: 17px; }
.lf-set .lf-glyphs { font-family: 'Andika', 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 22px; color: var(--lf-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-options { background: var(--lf-panel); border: 1px solid var(--lf-line); border-radius: 14px; padding: 8px 16px; margin: 6px 0 12px; }

@media (prefers-reduced-motion: reduce) {
  .lf-tile.shake, .lf-tile.is-prompt, .lf-stars.burst .lf-star { animation: none; }
  .lf-tile.is-prompt { outline: 5px solid var(--lf-prompt); outline-offset: 4px; }
  .lf-tile, .lf-set, .lf-star { transition: none; }
}
@media (max-width: 520px) {
  .lf-opt-label { min-width: 100%; }
}