feat: add subtle fish silhouettes

apps/web/src/components/ActivityCard.astro

@@ -3,6 +3,7 @@ import type { Activity } from "../lib/api";
 import { activityLevel, ago, kg, plural, spotPath } from "../lib/api";
 import FishingIcon from "./FishingIcon.astro";
 import DataPassport from "./DataPassport.astro";
+import FishSilhouette from "./FishSilhouette.astro";
 const { item } = Astro.props as { item: Activity };
 const level = activityLevel(item.activity_score);
 const limited = item.catches < 3;
@@ -12,6 +13,7 @@ const limited = item.catches < 3;
   <div class="spot-main">
     <div class="spot-topline"><span>{item.waterbody}</span><span class="activity-pill" data-activity-level={level.short}><i></i>{level.short}</span>{limited && <span class="data-quality">Данных мало</span>}</div>
     <h3>{item.fish}</h3>
+    <FishSilhouette name={item.fish}/>
     <div class="spot-meta"><span><FishingIcon name="pin" size={14}/> {item.x}:{item.y}</span><span><FishingIcon name="clock" size={14}/> {ago(item.last_confirmed_at)}</span></div>
     <p class="data-note">{item.explanation}</p>
     <DataPassport sources={item.sources} observedAt={item.last_confirmed_at} completeness={limited ? 75 : 100} confidence={item.confidence_score}/>

apps/web/src/components/FishSilhouette.astro

@@ -0,0 +1,9 @@
+---
+const { name, size = 92 } = Astro.props as { name: string; size?: number };
+const variant = [...name].reduce((sum, char) => sum + (char.codePointAt(0) ?? 0), 0) % 3;
+---
+<svg class="fish-silhouette" width={size} height={Math.round(size * .48)} viewBox="0 0 120 58" aria-hidden="true">
+  {variant === 0 && <><path d="M22 29C38 7 78 8 101 29 78 50 38 51 22 29Z"/><path d="m25 29-22-18v36Z"/><path d="M55 14 69 2l8 15M57 44l15 11 8-16"/><circle cx="91" cy="25" r="2.4" class="fish-eye"/></>}
+  {variant === 1 && <><path d="M19 30C39 14 80 13 104 29 80 45 39 47 19 30Z"/><path d="M22 30 3 17v28Z"/><path d="m48 17 11-14 13 13M47 44l12 11 13-12"/><path d="M101 29h15"/><circle cx="94" cy="25" r="2.4" class="fish-eye"/></>}
+  {variant === 2 && <><path d="M20 30C34 3 79 4 103 29 79 54 34 55 20 30Z"/><path d="M23 30 2 8v44Z"/><path d="m52 10 8-9 14 10M52 49l9 8 14-10"/><circle cx="92" cy="24" r="2.4" class="fish-eye"/></>}
+</svg>

apps/web/src/layouts/Layout.astro

@@ -6,6 +6,7 @@ import "../styles/data-passport.css";
 import "../styles/data-legend.css";
 import "../styles/coordinate-radar.css";
 import "../styles/activity-timeline.css";
+import "../styles/fish-silhouette.css";
 import FishingIcon from "../components/FishingIcon.astro";
 const {
   title = "RF4 Spotter — свежие точки клёва Russian Fishing 4",

apps/web/src/pages/fish/index.astro

@@ -1,10 +1,11 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+import FishSilhouette from "../../components/FishSilhouette.astro";
 import { api, type DictionaryItem } from "../../lib/api";
 let fishes: DictionaryItem[] = [], unavailable = false;
 try { fishes = await api<DictionaryItem[]>("/api/v1/fishes?limit=500"); } catch { unavailable = true; }
 ---
 <Layout title="Все виды рыб Russian Fishing 4 — RF4 Spotter" description="Каталог рыб RF4 со свежими точками, уловами, приманками и прозрачными источниками данных.">
   <section class="catalog-hero content-grid"><span class="overline">Справочник RF4</span><h1>Рыбы</h1><p>Выберите вид, чтобы увидеть свежие подтверждённые точки и полевые сигналы.</p></section>
-  {unavailable ? <div class="state content-grid"><h2>Каталог временно недоступен</h2></div> : <nav class="catalog-grid content-grid" aria-label="Виды рыб">{fishes.map(fish => <a href={`/fish/${fish.slug}`}><span>Вид рыбы</span><strong>{fish.name_ru}</strong><i>→</i></a>)}</nav>}
+  {unavailable ? <div class="state content-grid"><h2>Каталог временно недоступен</h2></div> : <nav class="catalog-grid content-grid" aria-label="Виды рыб">{fishes.map(fish => <a href={`/fish/${fish.slug}`}><span>Вид рыбы</span><strong>{fish.name_ru}</strong><i>→</i><FishSilhouette name={fish.name_ru} size={76}/></a>)}</nav>}
 </Layout>

apps/web/src/styles/fish-silhouette.css

@@ -0,0 +1 @@
+.fish-silhouette{fill:currentColor;color:#315f63;pointer-events:none}.fish-silhouette .fish-eye{fill:var(--paper)}.spot-main{position:relative}.spot-main>.fish-silhouette{position:absolute;right:2px;top:38px;opacity:.075}.catalog-grid>a{position:relative;overflow:hidden}.catalog-grid>a>.fish-silhouette{position:absolute;right:34px;bottom:-3px;opacity:.07;transform:rotate(-4deg)}@media(max-width:720px){.spot-main>.fish-silhouette{width:68px;right:0;opacity:.055}}