# Prompt pro replikaci webu „WordSprout"

Zkopíruj celý text níže (od `---` po konec) do Lovable jako první zprávu nového projektu. Vznikne aplikace velmi podobná originálu.

---

Vytvoř interaktivní flashcard aplikaci s názvem **WordSprout 🌱** pro učení anglických slovíček pro středoškoláky. Aplikace je celá v češtině (UI texty), učí ale anglická slovíčka.

## Funkce

- **Otáčecí kartičky (3D flip animace)**
  - Přední strana: české slovo
  - Zadní strana: anglický překlad + příklad věty v angličtině
  - Plynulá animace `rotateY` (700 ms), perspektiva 1000px, `backface-hidden`

- **Tři režimy učení (přepínatelné v horních záložkách):**
  1. **Učení** — uživatel si jen prohlíží a otáčí karty, tlačítko „Další"
  2. **Procvičování** — po otočení uživatel klikne „Znal/a jsem" / „Neznal/a jsem"
  3. **Test** — zobrazí české slovo, uživatel vybírá ze **4 možností** anglického překladu. Okamžitá zpětná vazba: správně = zelená, špatně = červená + jemná shake animace

- **Spaced repetition logika**
  - U každé karty se ukládá `correct`, `wrong`, `weight`
  - Při správné odpovědi `weight *= 0.7`, při špatné `weight *= 1.8`
  - Další karta se vybírá vážením (`weightedPick`) — chybované se zobrazují častěji
  - Karta je „zvládnutá" po 3 správných odpovědích za sebou

- **Progress tracker (lepkavá hlavička)**
  - Aktuální level (kruhový badge), celkové XP, progress bar do dalšího levelu
  - Streak dní 🔥, počet zvládnutých karet (X/40), úspěšnost v %

- **Gamifikace**
  - XP: +10 za správnou odpověď v testu, +2 za otočení/označení v procvičování
  - Level systém: 100 XP = 1 level
  - **Odznaky za milestony**: první karta, 10 správných, 50 správných, 3denní streak, 7denní streak, level 5, 10 zvládnutých slov
  - Stav se persistuje do `localStorage`

- **Kategorie (filtrovací chipy)**: Vše 🌈 / Základní ✨ / Cestování ✈️ / Byznys 💼 / Příroda 🌿

- **Obsah: 40 reálných slovíček** (po 10 v každé kategorii), každé má `cs`, `en`, `example`. Použij běžná středoškolská slovíčka (dům/house, letiště/airport, schůzka/meeting, strom/tree…).

## Design

- **Mužský, nikoliv pastelově holčičí** — hluboká námořní modrá jako primární barva (`oklch(0.48 0.06 250)`), ocelově modrá secondary, teplá béžová/tan accent, neutrální blue-gray pozadí
- Velká čitelná písma: nadpisy **Fraunces** (display serif), tělo **Nunito** (Google Fonts)
- Zaoblené karty (`rounded-3xl`), jemné stíny s nádechem primary barvy, backdrop blur na panelech
- Animace: 3D flip karty, `pop-in` pro odznaky, `shake` při špatné odpovědi v testu
- Favicon: ikona knihy + sprout (klíček) v navy/zelené

## Technické

- TanStack Start + React, Tailwind, design tokeny v `src/styles.css` (oklch barvy, žádné hardcoded barvy v komponentách)
- Struktura: `src/lib/vocab.ts` (data + kategorie), `src/lib/store.ts` (state, XP, badges, localStorage hook), `src/components/Flashcard.tsx`, `ProgressHeader.tsx`, `ModePanel.tsx`, `src/routes/index.tsx`
- SEO: `<title>` a meta description v češtině

Naplň vše hned napoprvé — aplikace musí být funkční a hratelná po prvním buildu.