feat: rozšíření chytání motýlků o progres, mince a škůdce

- serverová perzistence statistik (mince, úrovně, zlatí motýli) + týmový žebříček
- prémiová zlatá síťka za milník (větší, magnetická, odolná proti ptákům)
- perzistentní škůdci: vosy na zaklikání a ptáci trhající síťku (F5-proof)
- placený plašič ptáků s odpočtem, denní bonus, kombo
- WOW zlatý motýl + osobní statistiky v modalu žebříčku
- oprava zobrazení ikonek (root-absolutní cesty k public assetům)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

client/src/components/modals/ButterflyLeaderboardModal.scss

@@ -0,0 +1,111 @@
+.butterfly-mystats {
+  margin-bottom: 16px;
+  padding: 12px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, rgba(255, 203, 61, 0.16), rgba(224, 162, 0, 0.08));
+  border: 1px solid rgba(224, 162, 0, 0.35);
+}
+
+.butterfly-mystats-title {
+  font-weight: 700;
+  color: #6b5b2e;
+  margin-bottom: 8px;
+}
+
+.butterfly-mystats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  gap: 8px;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .v {
+    font-size: 1.3rem;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+
+    &.gold {
+      color: #e0a200;
+    }
+  }
+
+  .l {
+    font-size: 0.72rem;
+    color: #6c757d;
+  }
+}
+
+.butterfly-leaderboard-heading {
+  font-weight: 700;
+  margin: 4px 0 8px;
+}
+
+.butterfly-leaderboard {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.butterfly-leaderboard-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.03);
+
+  &.me {
+    background: rgba(255, 203, 61, 0.22);
+    border: 1px solid rgba(224, 162, 0, 0.5);
+    font-weight: 700;
+  }
+}
+
+.butterfly-leaderboard-rank {
+  flex: 0 0 auto;
+  width: 28px;
+  text-align: center;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.butterfly-leaderboard-name {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.butterfly-leaderboard-title {
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: #6b5b2e;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.butterfly-leaderboard-stats {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-variant-numeric: tabular-nums;
+}
+
+.butterfly-leaderboard-golden {
+  color: #e0a200;
+  font-weight: 700;
+}

client/src/components/modals/ButterflyLeaderboardModal.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { Modal } from "react-bootstrap";
+import { ButterflyLeaderboardEntry, ButterflyStats, getButterflyLeaderboard } from "../../../../types";
+import { useAuth } from "../../context/auth";
+import "./ButterflyLeaderboardModal.scss";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    myStats?: ButterflyStats;
+};
+
+const MEDALS = ['🥇', '🥈', '🥉'];
+
+/** Modální dialog s osobními statistikami a týmovým žebříčkem chytačů motýlů. */
+export default function ButterflyLeaderboardModal({ isOpen, onClose, myStats }: Readonly<Props>) {
+    const auth = useAuth();
+    const [entries, setEntries] = useState<ButterflyLeaderboardEntry[]>();
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        let cancelled = false;
+        setLoading(true);
+        getButterflyLeaderboard({ query: { limit: 20 } })
+            .then(res => { if (!cancelled) setEntries(res.data ?? []); })
+            .catch(() => { if (!cancelled) setEntries([]); })
+            .finally(() => { if (!cancelled) setLoading(false); });
+        return () => { cancelled = true; };
+    }, [isOpen]);
+
+    return (
+        <Modal show={isOpen} onHide={onClose} centered>
+            <Modal.Header closeButton>
+                <Modal.Title>🦋 Chytání motýlků</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {myStats && (
+                    <div className="butterfly-mystats">
+                        <div className="butterfly-mystats-title">
+                            {myStats.level}. {myStats.title}
+                        </div>
+                        <div className="butterfly-mystats-grid">
+                            <div><span className="v">{myStats.caught}</span><span className="l">🦋 chyceno</span></div>
+                            <div><span className="v gold">{myStats.goldenCaught}</span><span className="l">✨ zlatých</span></div>
+                            <div><span className="v">{myStats.coins}</span><span className="l">🪙 mincí</span></div>
+                            <div><span className="v">{myStats.waspsKilled}</span><span className="l">🪰 vos zabito</span></div>
+                            <div><span className="v">{myStats.birdsScared}</span><span className="l">🦅 vyplašeno</span></div>
+                        </div>
+                    </div>
+                )}
+
+                <h6 className="butterfly-leaderboard-heading">Žebříček týmu</h6>
+                {loading && <p className="text-center text-muted mb-0">Načítám žebříček…</p>}
+                {!loading && entries && entries.length === 0 && (
+                    <p className="text-center text-muted mb-0">Zatím nikdo nic nechytil. Buď první!</p>
+                )}
+                {!loading && entries && entries.length > 0 && (
+                    <ol className="butterfly-leaderboard">
+                        {entries.map((e, i) => (
+                            <li
+                                key={e.login}
+                                className={e.login === auth?.login ? 'butterfly-leaderboard-row me' : 'butterfly-leaderboard-row'}
+                            >
+                                <span className="butterfly-leaderboard-rank">{MEDALS[i] ?? `${i + 1}.`}</span>
+                                <span className="butterfly-leaderboard-name" title={e.title}>
+                                    {e.login}
+                                    <span className="butterfly-leaderboard-title">{e.level}. {e.title}</span>
+                                </span>
+                                <span className="butterfly-leaderboard-stats">
+                                    <span className="butterfly-leaderboard-caught">{e.caught} 🦋</span>
+                                    {e.goldenCaught > 0 && (
+                                        <span className="butterfly-leaderboard-golden">{e.goldenCaught} ✨</span>
+                                    )}
+                                </span>
+                            </li>
+                        ))}
+                    </ol>
+                )}
+            </Modal.Body>
+        </Modal>
+    );
+}