From 0cf2ddc3ce07ba2b87ea9b60053127b7de332215 Mon Sep 17 00:00:00 2001
From: Martin Berka <martin.berka@radbuza.net>
Date: Sun, 25 Oct 2026 19:38:05 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20nov=C3=BD=20vzhled=20Spy=20x=20Family?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/index.html                             |   4 +-
 client/src/App.tsx                            |   1 +
 client/src/components/EaterBadge.scss         |  11 +
 client/src/components/EaterBadge.tsx          |   9 +-
 client/src/components/WheelConfetti.scss      |  78 +++
 client/src/components/WheelConfetti.tsx       |  18 +-
 .../src/components/modals/SpinWheelModal.scss | 293 +++++++++
 client/src/context/settings.tsx               |   5 +-
 client/src/games/themeIcons.ts                |   2 +
 client/src/themes/spyfamily.scss              | 558 ++++++++++++++++++
 10 files changed, 973 insertions(+), 6 deletions(-)
 create mode 100644 client/src/themes/spyfamily.scss

diff --git a/client/index.html b/client/index.html
index 2a55a14..d3f4092 100644
--- a/client/index.html
+++ b/client/index.html
@@ -11,7 +11,7 @@
   <link rel="manifest" href="/manifest.json" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&family=Nunito:wght@600;800;900&family=Fredoka:wght@500;600;700&family=Shippori+Mincho:wght@600;700;800&family=Zen+Maru+Gothic:wght@500;700;900&family=Yusei+Magic&family=Dela+Gothic+One&family=Barlow+Condensed:wght@500;600;700&family=Kiwi+Maru:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&family=Nunito:wght@600;800;900&family=Fredoka:wght@500;600;700&family=Shippori+Mincho:wght@600;700;800&family=Zen+Maru+Gothic:wght@500;700;900&family=Yusei+Magic&family=Dela+Gothic+One&family=Barlow+Condensed:wght@500;600;700&family=Kiwi+Maru:wght@400;500&family=Playfair+Display:ital,wght@0,800;1,800&family=Courier+Prime:wght@700&display=swap" rel="stylesheet" />
   <title>Luncher</title>
   <script>
     (function() {
@@ -28,7 +28,7 @@
         }
         document.documentElement.setAttribute('data-bs-theme', theme);
         var style = localStorage.getItem('style_theme');
-        var styles = ['umamusume', 'mlp', 'hellgirl', 'kon', 'bocchi', 'evangelion', 'yurucamp'];
+        var styles = ['umamusume', 'mlp', 'hellgirl', 'kon', 'bocchi', 'evangelion', 'yurucamp', 'spyfamily'];
         document.documentElement.setAttribute('data-luncher-theme', styles.indexOf(style) >= 0 ? style : 'simple');
       } catch (e) {
         // Fallback pokud localStorage není dostupný
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 9136cc1..80a3770 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -17,6 +17,7 @@ import './themes/kon.scss';
 import './themes/bocchi.scss';
 import './themes/evangelion.scss';
 import './themes/yurucamp.scss';
+import './themes/spyfamily.scss';
 import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
 import { useSettings } from './context/settings';
 import Footer from './components/Footer';
diff --git a/client/src/components/EaterBadge.scss b/client/src/components/EaterBadge.scss
index 6dcfcc1..f53ad51 100644
--- a/client/src/components/EaterBadge.scss
+++ b/client/src/components/EaterBadge.scss
@@ -94,6 +94,17 @@
   outline-offset: -5px;
 }
 
+// Styl Spy × Family: emoji na zlaté medaili Eden Academy s petrolejovým lemem
+.eater-badge-spyfamily {
+  display: inline-grid;
+  place-items: center;
+  font-size: 15px;
+  line-height: 1;
+  border-color: #e8cc82;
+  background: radial-gradient(circle at 40% 35%, #fffcf5, #f2e2b9);
+  box-shadow: 0 0 0 2px #1e6f6c;
+}
+
 // Odznak a jméno drží na jednom řádku (úzký sloupec „Člen" na stránce objednávek)
 .user-info:has(.eater-badge) {
   display: inline-flex;
diff --git a/client/src/components/EaterBadge.tsx b/client/src/components/EaterBadge.tsx
index 2be8dd2..18c1a35 100644
--- a/client/src/components/EaterBadge.tsx
+++ b/client/src/components/EaterBadge.tsx
@@ -49,6 +49,12 @@ const YC_LEVELS = [
     { minItems: 2, emoji: '🍜', title: 'Úroveň Rin — k obědu ještě instantní nudle s výhledem na Fuji' },
 ];
 
+/** Úrovně ve stylu Spy × Family — emoji na zlaté medaili Eden Academy. Seřazeno od nejvyšší úrovně. */
+const SXF_LEVELS = [
+    { minItems: 3, emoji: '🐶', title: 'Úroveň Bond — předvídal budoucnost a v ní je ještě jeden talíř' },
+    { minItems: 2, emoji: '🥜', title: 'Úroveň Anya — k obědu ještě hrst buráků (waku waku!)' },
+];
+
 /** Úrovně podle stylu pro odznaky s emoji. */
 const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
     mlp: MLP_LEVELS,
@@ -57,6 +63,7 @@ const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
     bocchi: BOCCHI_LEVELS,
     evangelion: EVA_LEVELS,
     yurucamp: YC_LEVELS,
+    spyfamily: SXF_LEVELS,
 };
 
 type Props = {
@@ -64,7 +71,7 @@ type Props = {
     items: number,
 };
 
-/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume, My Little Pony, Hell Girl, K-ON!, Bocchi the Rock!, Evangelion a Yuru Camp△. */
+/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume, My Little Pony, Hell Girl, K-ON!, Bocchi the Rock!, Evangelion, Yuru Camp△ a Spy × Family. */
 export default function EaterBadge({ items }: Readonly<Props>) {
     const styleTheme = useSettings()?.styleTheme;
     const isUma = styleTheme === 'umamusume';
diff --git a/client/src/components/WheelConfetti.scss b/client/src/components/WheelConfetti.scss
index 1557389..032f7b4 100644
--- a/client/src/components/WheelConfetti.scss
+++ b/client/src/components/WheelConfetti.scss
@@ -638,3 +638,81 @@
     }
   }
 }
+
+// ============================================
+// Konfety ve stylu Spy × Family
+// ============================================
+.confetti-sxf {
+  filter: drop-shadow(0 3px 3px rgb(34 48 60 / 0.25));
+}
+
+// Štítky jako výstřižky z novin a razítka na spisech — psací stroj, tenký vnitřní lem
+.confetti-sxf-badge {
+  padding: 4px 14px;
+  border-radius: 4px;
+  color: #fffcf5;
+  box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.35);
+  font-family: 'Courier Prime', 'Courier New', monospace;
+  font-weight: 700;
+  font-size: 1.1rem;
+  white-space: nowrap;
+}
+
+// Nápis „わくわく!" — retro titulek s dvojitou linkou, poskočí radostí jako Anya
+.confetti-sxf-banner {
+  position: absolute;
+  top: 38%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 44px 16px;
+  font-family: 'Playfair Display', Georgia, serif;
+  font-weight: 800;
+  font-size: clamp(2rem, 7vw, 4.2rem);
+  white-space: nowrap;
+  color: #fffcf5;
+  background:
+    linear-gradient(#d9483b, #d9483b) left bottom / 100% 5px no-repeat,
+    linear-gradient(#f7f0e1, #f7f0e1) left bottom 8px / 100% 3px no-repeat,
+    #1e6f6c;
+  border: 3px solid #f7f0e1;
+  border-radius: 12px;
+  box-shadow: 0 0 0 4px #1e6f6c, 0 14px 30px rgb(34 48 60 / 0.35);
+  animation: sxf-banner 2.6s ease both;
+}
+
+@keyframes sxf-banner {
+  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
+  12% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
+  18% { transform: translate(-50%, -58%) scale(1); }
+  24% { transform: translate(-50%, -50%) scale(1); }
+  30% { transform: translate(-50%, -55%) scale(1); }
+  36%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
+}
+
+// Postava s hláškou — zlatá medaile Eden a bublina jako kartička s dvojitou linkou
+.confetti-spyfamily-voice {
+  .confetti-mlp-avatar {
+    border: 4px solid #e8cc82;
+    background: radial-gradient(circle at 40% 35%, #fffcf5, #f2e2b9);
+    box-shadow: 0 0 0 3px var(--mlp-speaker, #1e6f6c), 0 4px 10px rgb(0 0 0 / 0.3);
+  }
+
+  .confetti-mlp-bubble {
+    background: #fffcf5;
+    color: #2b2620;
+    border: 2px solid var(--mlp-speaker, #1e6f6c);
+    border-radius: 8px;
+    box-shadow: 0 0 0 3px #fffcf5, 0 0 0 5px var(--mlp-speaker, #1e6f6c), 0 6px 14px rgb(0 0 0 / 0.25);
+    font-family: 'Nunito', sans-serif;
+
+    p {
+      font-weight: 800;
+    }
+
+    small {
+      font-family: 'Playfair Display', Georgia, serif;
+      font-style: italic;
+    }
+  }
+}
diff --git a/client/src/components/WheelConfetti.tsx b/client/src/components/WheelConfetti.tsx
index 199d4bc..b73831e 100644
--- a/client/src/components/WheelConfetti.tsx
+++ b/client/src/components/WheelConfetti.tsx
@@ -106,6 +106,21 @@ const YC_SPEAKERS = [
     { name: 'Sakura Kagamihara', emoji: '🚗', color: '#5a6b7d', quote: 'Nastupte, odvezu vás. Ale zpátky už jedete autobusem.' },
     { name: 'Chikuwa', emoji: '🐶', color: '#d9a35b', quote: '(vrtí ocáskem a čeká, jestli mu něco kápne)' },
 ];
+const SXF_EMOJI = ['🥜', '⭐', '🌹', '🕵️', '🐶', '🔍', '📰', '☕', '🎀', '💌', '🗝️', '🌟', '🍰', '🖍️'];
+// Hlášky ze Spy × Family (Operace Strix, waku waku, hvězda Stella, Anyino „heh", Henderson a elegance...)
+const SXF_BADGES = ['Waku waku!', 'Operace Strix', 'Stella ⭐', 'Heh.', 'PŘÍSNĚ TAJNÉ', 'Mise splněna', 'Elegance!', 'Buráky!', 'Eden Academy', 'Twilight'];
+const SXF_BADGE_COLORS = ['#1e6f6c', '#d9483b', '#e2a93b', '#e98aa8', '#22303c', '#b3263a'];
+/** Forgerovi a jejich okolí s „hláškou" po finálním výsledku. */
+const SXF_SPEAKERS = [
+    { name: 'Anya Forger', emoji: '🥜', color: '#e98aa8', quote: 'Waku waku! Anya chce tohle! A k tomu buráky!' },
+    { name: 'Loid Forger', emoji: '🕵️', color: '#1e6f6c', quote: 'Výborná volba. Operace Oběd proběhne přesně podle plánu.' },
+    { name: 'Yor Forger', emoji: '🌹', color: '#b3263a', quote: 'Chtěla jsem dnes uvařit sama… ale tohle vypadá taky moc dobře!' },
+    { name: 'Bond Forger', emoji: '🐶', color: '#8a97a6', quote: '(viděl budoucnost — a v ní je tohle jídlo)' },
+    { name: 'Yuri Briar', emoji: '💼', color: '#3c4a6b', quote: 'Sestřičko, jestli tohle budeš jíst ty, sním to taky!' },
+    { name: 'Damian Desmond', emoji: '💢', color: '#4b3f72', quote: 'N-není to tak, že bych s tebou chtěl jít na oběd, ty jedna…!' },
+    { name: 'Becky Blackbell', emoji: '🎀', color: '#d9a441', quote: 'Anyo, vždyť tohle je úplně jako z romantického dramatu!' },
+    { name: 'Henry Henderson', emoji: '🎩', color: '#5a4a3a', quote: 'Elegantní volba! Vskutku elegantní!' },
+];
 /** Styly, jejichž konfety tvoří emoji a samolepky s hláškami (a po finále promluví postava s emoji). */
 const EMOJI_CONFETTI: Partial<Record<WheelTheme, {
     prefix: string, badges: string[], colors: string[], emoji: string[],
@@ -118,6 +133,7 @@ const EMOJI_CONFETTI: Partial<Record<WheelTheme, {
     bocchi: { prefix: 'confetti-bocchi', badges: BOCCHI_BADGES, colors: BOCCHI_BADGE_COLORS, emoji: BOCCHI_EMOJI, speakers: BOCCHI_SPEAKERS, banner: '🎸 結束バンド 🎸' },
     evangelion: { prefix: 'confetti-eva', badges: EVA_BADGES, colors: EVA_BADGE_COLORS, emoji: EVA_EMOJI, speakers: EVA_SPEAKERS, banner: '👏 おめでとう 👏' },
     yurucamp: { prefix: 'confetti-yc', badges: YC_BADGES, colors: YC_BADGE_COLORS, emoji: YC_EMOJI, speakers: YC_SPEAKERS, banner: '⛺ ゆるキャン△ 🔥' },
+    spyfamily: { prefix: 'confetti-sxf', badges: SXF_BADGES, colors: SXF_BADGE_COLORS, emoji: SXF_EMOJI, speakers: SXF_SPEAKERS, banner: '🥜 わくわく! 🥜' },
 };
 const DURATION_MS = 6400;
 
@@ -271,7 +287,7 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [burstKey]);
 
-    // Ostatní tematické styly: hlášku pronese náhodná postava (Mane 6, Ai Enma, Houkago Tea Time, Kessoku Band, piloti NERV, Nokuru...)
+    // Ostatní tematické styly: hlášku pronese náhodná postava (Mane 6, Ai Enma, Houkago Tea Time, Kessoku Band, piloti NERV, Nokuru, Forgerovi...)
     const emojiConfetti = EMOJI_CONFETTI[theme];
     const emojiSpeaker = useMemo(
         () => big && emojiConfetti ? pick(emojiConfetti.speakers) : undefined,
diff --git a/client/src/components/modals/SpinWheelModal.scss b/client/src/components/modals/SpinWheelModal.scss
index bc9a0ad..c9e0480 100644
--- a/client/src/components/modals/SpinWheelModal.scss
+++ b/client/src/components/modals/SpinWheelModal.scss
@@ -2056,6 +2056,299 @@
   }
 }
 
+// ============================================
+// STYL SPY × FAMILY kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v retro barvách Forgerových (petrolejová, korálová, hořčicová,
+// růžová Anya, námořnická, olivová), krémové linky a střed jako hvězda Stella.
+// ============================================
+.spin-wheel-modal.spin-theme-spyfamily {
+  --sxf-font: 'Nunito', sans-serif;
+  --sxf-display: 'Playfair Display', Georgia, serif;
+  --sxf-typewriter: 'Courier Prime', 'Courier New', monospace;
+  --sxf-teal: #1e6f6c;
+  --sxf-teal-deep: #155452;
+  --sxf-coral: #d9483b;
+  --sxf-line: #e3d7bf;
+  --sxf-panel: #fffcf5;
+  --sxf-text: #2b2620;
+  --sxf-cream-line: #f7f0e1;
+  --wheel-c0: #1e6f6c;
+  --wheel-c1: #d9483b;
+  --wheel-c2: #e2a93b;
+  --wheel-c3: #e98aa8;
+  --wheel-c4: #22303c;
+  --wheel-c5: #6b8f4e;
+  --wheel-rim: #22303c;
+  --wheel-hub: #c9a44c;
+
+  font-family: var(--sxf-font);
+
+  .modal-content {
+    border: 1px solid var(--sxf-line);
+    border-radius: 14px;
+    overflow: hidden;
+    background: #f7f0e1;
+    color: var(--sxf-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(var(--sxf-coral), var(--sxf-coral)) left bottom / 100% 3px no-repeat,
+      linear-gradient(var(--sxf-cream-line), var(--sxf-cream-line)) left bottom 5px / 100% 2px no-repeat,
+      #22303c;
+    border-bottom: none;
+
+    h2 {
+      color: #fbf6ea;
+      font-family: var(--sxf-display);
+      font-weight: 800;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 1px solid var(--sxf-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--sxf-typewriter);
+    font-weight: 700;
+    background: #efe6d3;
+    color: #8c8274;
+    border-radius: 4px;
+    padding: 4px 16px;
+
+    &.active {
+      background: var(--sxf-teal);
+      color: #fffcf5;
+    }
+
+    &.done {
+      background: #f2e2b9;
+      color: #2b2418;
+    }
+  }
+
+  .btn {
+    font-family: var(--sxf-font);
+    font-weight: 800;
+    border-radius: 4px;
+  }
+
+  .btn-primary {
+    background: var(--sxf-teal);
+    border: 1px solid var(--sxf-teal-deep);
+    color: #fffcf5;
+    box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.25), 0 2px 0 var(--sxf-teal-deep);
+
+    &:hover:not(:disabled) {
+      background: var(--sxf-teal-deep);
+      color: #fffcf5;
+    }
+
+    &:disabled {
+      background: #d6ccbb;
+      border-color: #d6ccbb;
+      color: #8c8274;
+      box-shadow: none;
+    }
+  }
+
+  // Tlačítko roztočení — korálové jako Yořiny růže
+  .spin-button {
+    font-family: var(--sxf-display);
+    font-style: italic;
+    font-size: 1.25rem;
+    padding: 10px 38px;
+    background: var(--sxf-coral);
+    border-color: #a8332a;
+    box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.3), 0 3px 0 #a8332a;
+
+    &:hover:not(:disabled) {
+      background: #c23a2e;
+    }
+  }
+
+  .btn-outline-primary {
+    background: var(--sxf-panel);
+    border: 2px solid var(--sxf-teal);
+    color: var(--sxf-teal);
+
+    &:hover {
+      background: #dcefeb;
+      color: var(--sxf-teal);
+    }
+  }
+
+  .btn-secondary {
+    background: #22303c;
+    border: 1px solid #22303c;
+    color: #fbf6ea;
+  }
+
+  .spin-source {
+    background: #efe6d3;
+    border-radius: 6px;
+
+    > .btn {
+      border-radius: 4px !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--sxf-text);
+
+      &:hover {
+        background: var(--sxf-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 800;
+
+    strong {
+      color: var(--sxf-coral);
+    }
+  }
+
+  .spin-options {
+    background: var(--sxf-panel);
+    border: 1px solid var(--sxf-line);
+    border-radius: 10px;
+
+    li:hover {
+      background: #f6ecd8;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 2px solid var(--sxf-coral);
+    color: var(--sxf-teal);
+    font-family: var(--sxf-typewriter);
+  }
+
+  .spin-empty {
+    border-color: var(--sxf-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--sxf-coral);
+    filter: drop-shadow(0 2px 1px rgb(34 48 60 / 0.4));
+  }
+
+  .spin-seg {
+    stroke: #f7f0e1;
+    stroke-width: 2.5;
+  }
+
+  .spin-seg-label {
+    font-family: var(--sxf-font);
+    font-weight: 800;
+  }
+}
+
+// Tmavý režim — noční mise Thorn Princess
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-spyfamily {
+  --sxf-teal: #4fb3ac;
+  --sxf-teal-deep: #3a8f89;
+  --sxf-coral: #e0475a;
+  --sxf-line: #3a2a34;
+  --sxf-panel: #1f1720;
+  --sxf-text: #f4ece2;
+  --sxf-cream-line: #d8b866;
+  --wheel-c0: #2f8f89;
+  --wheel-c1: #b3263a;
+  --wheel-c4: #3c2a3e;
+  --wheel-rim: #0c080c;
+  --wheel-hub: #d8b866;
+
+  .modal-content {
+    background:
+      radial-gradient(ellipse 60% 45% at 85% -5%, rgb(224 71 90 / 0.18), transparent 70%),
+      #140e14;
+  }
+
+  .modal-header {
+    background-color: #0c080c;
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #2a1f2b;
+    color: #968a90;
+  }
+
+  .spin-steps span.done {
+    background: #2e2418;
+    color: #d8b866;
+  }
+
+  .btn-primary {
+    background: #d8b866;
+    border-color: #a88a3f;
+    color: #1c1410;
+    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.2), 0 2px 0 #7f682f;
+
+    &:hover:not(:disabled) {
+      background: #e8cc82;
+      color: #1c1410;
+    }
+
+    &:disabled {
+      background: #3a2e34;
+      border-color: #3a2e34;
+      color: #968a90;
+    }
+  }
+
+  .spin-button {
+    background: var(--sxf-coral);
+    border-color: #8f1d2c;
+    color: #fffcf5;
+    box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.25), 0 3px 0 #8f1d2c;
+
+    &:hover:not(:disabled) {
+      background: #c93a4d;
+      color: #fffcf5;
+    }
+  }
+
+  .btn-outline-primary {
+    border-color: #d8b866;
+    color: #d8b866;
+
+    &:hover {
+      background: #34281c;
+      color: #e8cc82;
+    }
+  }
+
+  .btn-secondary {
+    background: #2a1f2b;
+    border-color: #3a2a34;
+  }
+
+  .spin-source {
+    background: #2a1f2b;
+  }
+
+  .spin-options li:hover {
+    background: #2a1f2b;
+  }
+
+  .spin-options-header {
+    color: #d8b866;
+  }
+
+  .spin-seg {
+    stroke: #140e14;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;
diff --git a/client/src/context/settings.tsx b/client/src/context/settings.tsx
index 61e75b0..06d5a51 100644
--- a/client/src/context/settings.tsx
+++ b/client/src/context/settings.tsx
@@ -13,7 +13,7 @@ const AUTO_ORDER_CHOICE_KEY = 'auto_order_choice';
 export type ThemePreference = 'system' | 'light' | 'dark';
 
 /** Vizuální styl aplikace (nezávislý na světlém/tmavém režimu). */
-export type StyleTheme = 'simple' | 'umamusume' | 'mlp' | 'hellgirl' | 'kon' | 'bocchi' | 'evangelion' | 'yurucamp';
+export type StyleTheme = 'simple' | 'umamusume' | 'mlp' | 'hellgirl' | 'kon' | 'bocchi' | 'evangelion' | 'yurucamp' | 'spyfamily';
 
 export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
   { value: 'simple', label: 'Jednoduchý' },
@@ -24,6 +24,7 @@ export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
   { value: 'bocchi', label: 'Bocchi the Rock!' },
   { value: 'evangelion', label: 'Neon Genesis Evangelion' },
   { value: 'yurucamp', label: 'Yuru Camp△' },
+  { value: 'spyfamily', label: 'Spy × Family' },
 ];
 
 export type SettingsContextProps = {
@@ -255,7 +256,7 @@ function useProvideSettings(): SettingsContextProps {
   }, [autoOrderChoice]);
 
   // Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý.
-  // Tematické styly (Umamusume, My Little Pony, Hell Girl, K-ON!, Bocchi the Rock!, Evangelion, Yuru Camp△) mají vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
+  // Tematické styly (Umamusume, My Little Pony, Hell Girl, K-ON!, Bocchi the Rock!, Evangelion, Yuru Camp△, Spy × Family) mají vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
   useEffect(() => {
     localStorage.setItem(ACCENT_HUE_KEY, String(accentHue));
     if (styleTheme === 'simple') {
diff --git a/client/src/games/themeIcons.ts b/client/src/games/themeIcons.ts
index 3edea1b..47031b2 100644
--- a/client/src/games/themeIcons.ts
+++ b/client/src/games/themeIcons.ts
@@ -19,6 +19,8 @@ const ICONS: Record<StyleTheme, Record<GameId, string>> = {
     evangelion: { drawing: '📐' },
     // Nokuru: mapa s plánem další výpravy od Chiaki
     yurucamp: { drawing: '🗺️' },
+    // Forgerovi: pastelky, kterými Anya kreslí
+    spyfamily: { drawing: '🖍️' },
 };
 
 /** Styl z <html data-luncher-theme> — pro místa mimo React kontext nastavení. */
diff --git a/client/src/themes/spyfamily.scss b/client/src/themes/spyfamily.scss
new file mode 100644
index 0000000..6d079bf
--- /dev/null
+++ b/client/src/themes/spyfamily.scss
@@ -0,0 +1,558 @@
+// ============================================
+// STYL "SPY × FAMILY" (volitelný, výchozí je jednoduchý styl)
+// Inspirováno anime Spy × Family (スパイファミリー).
+// Retro 60. let v bytě Forgerových v Berlintu: krémová tapeta s hvězdičkami
+// atomic age, petrolejová Loida, korálově červená Yořiných růží, hořčicová
+// a růžová Anya. Titulek dne jako spisová složka WISE s razítkem PŘÍSNĚ TAJNÉ.
+// Tmavý režim = noční mise Thorn Princess — vínová tma, karmín a zlato Eden.
+// Aktivní, pokud má <html> atribut data-luncher-theme="spyfamily".
+// ============================================
+
+$sxf: 'html[data-luncher-theme="spyfamily"]';
+
+// Tapeta: čtyřcípé hvězdičky ve stylu atomic age (barvy jako parametry)
+@function sxf-sparkles($a, $b) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M18 8L20 16L28 18L20 20L18 28L16 20L8 18L16 16Z' fill='#{$a}'/%3E%3Cpath d='M70 52L71.5 58.5L78 60L71.5 61.5L70 68L68.5 61.5L62 60L68.5 58.5Z' fill='#{$b}'/%3E%3Ccircle cx='66' cy='18' r='2' fill='#{$b}'/%3E%3Ccircle cx='22' cy='72' r='1.6' fill='#{$a}'/%3E%3C/svg%3E");
+}
+
+// Dvojitá retro linka (krémová + korálová) pod hlavičkami
+$sxf-double-line:
+  linear-gradient(var(--sxf-coral), var(--sxf-coral)) left bottom / 100% 3px no-repeat,
+  linear-gradient(var(--sxf-cream-line), var(--sxf-cream-line)) left bottom 5px / 100% 2px no-repeat;
+
+#{$sxf} {
+  --sxf-font: 'Nunito', -apple-system, sans-serif;
+  --sxf-display: 'Playfair Display', Georgia, serif;
+  --sxf-typewriter: 'Courier Prime', 'Courier New', monospace;
+  --sxf-teal: #1e6f6c;            // oblek Loida / retro petrolejová
+  --sxf-teal-deep: #155452;
+  --sxf-coral: #d9483b;           // Yořiny růže
+  --sxf-mustard: #e2a93b;
+  --sxf-anya: #e98aa8;            // růžové vlasy Anyi
+  --sxf-navy: #22303c;
+  --sxf-gold: #c9a44c;            // Eden Academy, hvězda Stella
+  --sxf-manila: #ecd59f;          // spisová složka
+  --sxf-manila-edge: #c9a86a;
+  --sxf-cream-line: #f7f0e1;
+  --sxf-line: #e3d7bf;
+
+  --luncher-primary: var(--sxf-teal);
+  --luncher-primary-hover: var(--sxf-teal-deep);
+  --luncher-primary-light: #dcefeb;
+  --luncher-bg: #f7f0e1;
+  --luncher-bg-card: #fffcf5;
+  --luncher-bg-hover: #f6ecd8;
+  --luncher-text: #2b2620;
+  --luncher-text-secondary: #554c42;
+  --luncher-text-muted: #8c8274;
+  --luncher-border: var(--sxf-line);
+  --luncher-border-light: #efe6d3;
+  --luncher-navbar-bg: var(--sxf-navy);
+  --luncher-navbar-text: #fbf6ea;
+  --luncher-action-icon: var(--sxf-teal);
+  --luncher-buyer-icon: var(--sxf-coral);
+  --luncher-success: #3f8a4f;
+  --luncher-warning: #c98d1c;
+  --luncher-danger: var(--sxf-coral);
+  --luncher-radius-sm: 4px;
+  --luncher-radius: 8px;
+  --luncher-radius-lg: 10px;
+  --luncher-radius-xl: 14px;
+  --luncher-shadow: 0 2px 0 rgb(34 48 60 / 0.08), 0 4px 12px rgb(34 48 60 / 0.08);
+  --luncher-shadow-lg: 0 10px 26px rgb(34 48 60 / 0.18);
+
+  &[data-bs-theme="dark"] {
+    // Noční mise Thorn Princess
+    --sxf-teal: #4fb3ac;
+    --sxf-teal-deep: #3a8f89;
+    --sxf-coral: #e0475a;           // karmín Thorn Princess
+    --sxf-anya: #f2a7bf;
+    --sxf-gold: #d8b866;
+    --sxf-manila: #cdb47c;
+    --sxf-manila-edge: #9c8150;
+    --sxf-cream-line: #3a2a30;
+    --sxf-line: #3a2a34;
+
+    --luncher-primary: #d8b866;
+    --luncher-primary-hover: #e8cc82;
+    --luncher-primary-light: #34281c;
+    --luncher-bg: #140e14;
+    --luncher-bg-card: #1f1720;
+    --luncher-bg-hover: #2a1f2b;
+    --luncher-text: #f4ece2;
+    --luncher-text-secondary: #d0c4b8;
+    --luncher-text-muted: #968a90;
+    --luncher-border: var(--sxf-line);
+    --luncher-border-light: #2a2029;
+    --luncher-navbar-bg: #0c080c;
+    --luncher-action-icon: #d8b866;
+    --luncher-buyer-icon: #e0475a;
+    --luncher-success: #7fc28c;
+    --luncher-warning: #e8c15a;
+    --luncher-danger: #e0475a;
+    --luncher-shadow: 0 4px 14px rgb(0 0 0 / 0.4);
+    --luncher-shadow-lg: 0 10px 30px rgb(224 71 90 / 0.18);
+  }
+
+  body {
+    font-family: var(--sxf-font);
+    background-color: var(--luncher-bg);
+    // Tapeta s hvězdičkami, nahoře teplé světlo lampy v obýváku
+    background-image:
+      sxf-sparkles('%231e6f6c26', '%23d9483b24'),
+      radial-gradient(ellipse 80% 50% at 50% -10%, rgb(226 169 59 / 0.18), transparent 70%);
+    background-size: 96px 96px, 100% 100%;
+    background-attachment: fixed;
+  }
+
+  &[data-bs-theme="dark"] body {
+    // Zlaté hvězdičky Eden a karmínová záře jako z plesu, kde bojuje Thorn Princess
+    background-image:
+      sxf-sparkles('%23d8b86626', '%23e0475a29'),
+      radial-gradient(ellipse 60% 45% at 85% -5%, rgb(224 71 90 / 0.20), transparent 70%),
+      radial-gradient(ellipse 50% 40% at 10% 105%, rgb(216 184 102 / 0.10), transparent 70%);
+    background-size: 96px 96px, 100% 100%, 100% 100%;
+  }
+
+  .app-container {
+    background: transparent;
+  }
+
+  h1, h2, h3, h4, .navbar-brand {
+    font-family: var(--sxf-display);
+    font-weight: 800;
+  }
+
+  .btn {
+    font-family: var(--sxf-font);
+  }
+
+  // ---------- Navbar: námořnická modrá s retro dvojitou linkou ----------
+  .navbar {
+    background:
+      $sxf-double-line,
+      var(--luncher-navbar-bg) !important;
+    padding-bottom: calc(var(--bs-navbar-padding-y, 0.5rem) + 7px);
+
+    .navbar-brand {
+      font-style: italic;
+
+      // Anyiny buráky — občas se zavrtí („waku waku!")
+      &::after {
+        content: '🥜';
+        display: inline-block;
+        margin-left: 6px;
+        margin-right: 0.6em;
+        font-size: 0.75em;
+        font-style: normal;
+        animation: sxf-wiggle 5s ease-in-out infinite;
+      }
+    }
+
+    .dropdown-menu {
+      border: 1px solid var(--sxf-line);
+      border-radius: var(--luncher-radius);
+      box-shadow: var(--luncher-shadow-lg);
+    }
+  }
+
+  &[data-bs-theme="dark"] .navbar {
+    --sxf-cream-line: #d8b866;
+  }
+
+  // ---------- Titulek dne: spisová složka s razítkem PŘÍSNĚ TAJNÉ ----------
+  .day-navigator .title {
+    position: relative;
+    display: inline-block;
+    margin-top: 12px;
+    padding: 10px 30px 10px;
+    font-family: var(--sxf-typewriter);
+    font-weight: 700;
+    font-size: 1.5rem;
+    color: #2b2418 !important;
+    background: linear-gradient(180deg, #f2dfb1, var(--sxf-manila));
+    border: 1px solid var(--sxf-manila-edge);
+    border-radius: 0 6px 6px 6px;
+    box-shadow: 0 3px 0 var(--sxf-manila-edge), 0 8px 18px rgb(34 48 60 / 0.18);
+
+    // Ouško složky
+    &::before {
+      content: '';
+      position: absolute;
+      left: -1px;
+      top: -13px;
+      width: 88px;
+      height: 13px;
+      background: #f2dfb1;
+      border: 1px solid var(--sxf-manila-edge);
+      border-bottom: none;
+      border-radius: 6px 10px 0 0;
+    }
+
+    // Razítko
+    &::after {
+      content: 'PŘÍSNĚ TAJNÉ';
+      position: absolute;
+      right: -18px;
+      top: -14px;
+      padding: 1px 6px;
+      font-family: var(--sxf-typewriter);
+      font-size: 0.68rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      color: #c2352a;
+      border: 2px solid #c2352a;
+      border-radius: 3px;
+      background: rgb(247 240 225 / 0.6);
+      transform: rotate(9deg);
+      opacity: 0.88;
+    }
+
+    &.text-muted {
+      color: #5c5446 !important;
+      background: linear-gradient(180deg, #e4dccb, #d3c9b4);
+      border-color: #aa9f8a;
+      box-shadow: 0 3px 0 #aa9f8a, 0 8px 18px rgb(34 48 60 / 0.12);
+
+      &::before {
+        background: #e4dccb;
+        border-color: #aa9f8a;
+      }
+
+      &::after {
+        content: 'ARCHIV';
+        color: #6b6457;
+        border-color: #6b6457;
+      }
+    }
+  }
+
+  // ---------- Karty podniků: retro karty s dvojitou linkou ----------
+  .restaurant-card {
+    border: 1px solid var(--sxf-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    overflow: hidden;
+
+    &:hover {
+      transform: translateY(-3px);
+      border-color: var(--sxf-line);
+      box-shadow: var(--luncher-shadow-lg);
+    }
+
+    .restaurant-header {
+      background:
+        $sxf-double-line,
+        var(--sxf-teal);
+      padding-bottom: 22px;
+
+      // Při najetí Yořina korálově červená s hořčicovou linkou
+      &:hover {
+        background:
+          linear-gradient(var(--sxf-mustard), var(--sxf-mustard)) left bottom / 100% 3px no-repeat,
+          linear-gradient(var(--sxf-cream-line), var(--sxf-cream-line)) left bottom 5px / 100% 2px no-repeat,
+          var(--sxf-coral);
+      }
+
+      h3 {
+        letter-spacing: 0.01em;
+      }
+
+      small {
+        color: rgb(255 255 255 / 0.82);
+      }
+    }
+  }
+
+  &[data-bs-theme="dark"] .restaurant-card .restaurant-header {
+    // Černé šaty Thorn Princess s karmínovou a zlatou linkou
+    &:not(:hover) {
+      background:
+        linear-gradient(var(--sxf-coral), var(--sxf-coral)) left bottom / 100% 3px no-repeat,
+        linear-gradient(var(--sxf-gold), var(--sxf-gold)) left bottom 5px / 100% 1px no-repeat,
+        #0c080c;
+    }
+
+    &:hover {
+      background:
+        linear-gradient(var(--sxf-gold), var(--sxf-gold)) left bottom / 100% 3px no-repeat,
+        linear-gradient(135deg, #7a1424, #a51d33);
+    }
+  }
+
+  .food-table tbody tr:hover > td {
+    background: #f6ecd8;
+  }
+
+  &[data-bs-theme="dark"] .food-table tbody tr:hover > td {
+    background: #2a1f2b;
+  }
+
+  .food-price {
+    color: var(--sxf-coral);
+    font-weight: 800;
+  }
+
+  // ---------- Panely a tabulka voleb ----------
+  .choice-section,
+  .choices-table,
+  .pizza-section,
+  .no-votes {
+    border: 1px solid var(--sxf-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+  }
+
+  .choices-table {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  // Sloupec s podnikem: štítek na složce psaný psacím strojem
+  .choices-table > tbody > tr > td:first-child {
+    background: #f2e2b9;
+    color: #2b2418;
+    font-family: var(--sxf-typewriter);
+    font-weight: 700;
+    border-right: 1px solid var(--sxf-manila-edge);
+  }
+
+  &[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child {
+    background: #2e2418;
+    color: var(--sxf-gold);
+  }
+
+  // Bootstrap karty (skupinové objednávky apod.) a seznamy
+  .card {
+    border: 1px solid var(--sxf-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    overflow: hidden;
+    background: var(--luncher-bg-card);
+
+    // Rozbalovací výběr z nabídky nesmí karta oříznout
+    &:has(.select-search-container) {
+      overflow: visible;
+    }
+
+    > .card-header {
+      background: var(--luncher-primary-light);
+      border-bottom: 2px solid var(--sxf-coral);
+      font-weight: 800;
+
+      &:first-child {
+        border-radius: calc(var(--luncher-radius-lg) - 1px) calc(var(--luncher-radius-lg) - 1px) 0 0;
+      }
+    }
+
+    .table {
+      --bs-table-bg: transparent;
+      margin-bottom: 0;
+
+      > :last-child > tr:last-child > * {
+        border-bottom-width: 0;
+      }
+    }
+  }
+
+  .list-group {
+    border-radius: var(--luncher-radius);
+    overflow: hidden;
+    border: 1px solid var(--sxf-line);
+
+    > .list-group-item {
+      border-left: none;
+      border-right: none;
+
+      &:first-child {
+        border-top: none;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .form-select, .form-control,
+  input[type="text"], input[type="email"], input[type="password"] {
+    border-radius: var(--luncher-radius-sm);
+    border: 1px solid var(--sxf-line);
+
+    &:focus {
+      border-color: var(--sxf-teal);
+      box-shadow: 0 0 0 3px rgb(30 111 108 / 0.2);
+    }
+  }
+
+  // ---------- Tlačítka: retro, s tenkým vnitřním lemem ----------
+  .btn {
+    border-radius: var(--luncher-radius-sm);
+    font-weight: 800;
+    letter-spacing: 0.02em;
+    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
+  }
+
+  .btn-primary {
+    background: var(--sxf-teal);
+    border: 1px solid var(--sxf-teal-deep);
+    color: #fffcf5;
+    box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.25), 0 2px 0 var(--sxf-teal-deep);
+
+    &:hover {
+      background: var(--sxf-teal-deep);
+      border-color: var(--sxf-teal-deep);
+      color: #fffcf5;
+      transform: translateY(-1px);
+    }
+
+    &:active {
+      transform: translateY(1px) !important;
+    }
+
+    &:disabled {
+      background: #d6ccbb;
+      border-color: #d6ccbb;
+      color: #8c8274;
+      box-shadow: none;
+    }
+  }
+
+  // Ve tmě zlatá jako odznaky Eden Academy
+  &[data-bs-theme="dark"] .btn-primary {
+    background: var(--sxf-gold);
+    border-color: #a88a3f;
+    color: #1c1410;
+    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.2), 0 2px 0 #7f682f;
+
+    &:hover {
+      background: #e8cc82;
+      color: #1c1410;
+    }
+
+    &:disabled {
+      background: #3a2e34;
+      border-color: #3a2e34;
+      color: #968a90;
+    }
+  }
+
+  .btn-outline-primary {
+    background: var(--luncher-bg-card);
+    border: 2px solid var(--luncher-primary);
+    color: var(--luncher-primary);
+
+    &:hover {
+      background: var(--luncher-primary-light);
+      border-color: var(--luncher-primary);
+      color: var(--luncher-primary);
+    }
+  }
+
+  .btn-secondary {
+    background: var(--sxf-navy);
+    border: 1px solid var(--sxf-navy);
+    color: #fbf6ea;
+
+    &:hover {
+      background: #32465a;
+      color: #fbf6ea;
+    }
+  }
+
+  &[data-bs-theme="dark"] .btn-secondary {
+    background: #2a1f2b;
+    border-color: #3a2a34;
+
+    &:hover {
+      background: #352836;
+    }
+  }
+
+  .btn-danger {
+    background: var(--sxf-coral);
+    border: 1px solid #a8332a;
+  }
+
+  .action-icon:hover {
+    background: var(--luncher-primary-light);
+    color: var(--luncher-primary);
+  }
+
+  // ---------- Modaly ----------
+  .modal-content {
+    border: 1px solid var(--sxf-line);
+    border-radius: var(--luncher-radius-xl);
+    box-shadow: 0 16px 40px rgb(34 48 60 / 0.3);
+    overflow: hidden;
+  }
+
+  .modal-header {
+    background:
+      $sxf-double-line,
+      var(--sxf-navy);
+    border-bottom: none;
+    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 7px);
+
+    .modal-title, .modal-title h2 {
+      color: #fbf6ea;
+      font-family: var(--sxf-display);
+      font-weight: 800;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+    }
+  }
+
+  &[data-bs-theme="dark"] .modal-header {
+    --sxf-cream-line: #d8b866;
+    background-color: #0c080c;
+  }
+
+  .footer {
+    border-top: none;
+    background-image: linear-gradient(var(--sxf-coral), var(--sxf-coral)), linear-gradient(var(--sxf-cream-line), var(--sxf-cream-line));
+    background-size: 100% 3px, 100% 2px;
+    background-position: top, 0 5px;
+    background-repeat: no-repeat;
+
+    a {
+      color: var(--sxf-mustard);
+    }
+  }
+
+  &[data-bs-theme="dark"] .footer {
+    --sxf-cream-line: #d8b866;
+
+    a {
+      color: var(--sxf-gold);
+    }
+  }
+}
+
+// Buráky se občas zavrtí radostí
+@keyframes sxf-wiggle {
+  0%, 82%, 100% { transform: rotate(0deg); }
+  85% { transform: rotate(-16deg) scale(1.1); }
+  88% { transform: rotate(14deg) scale(1.1); }
+  91% { transform: rotate(-10deg); }
+  94% { transform: rotate(6deg); }
+}
+
+@media (max-width: 575.98px) {
+  #{$sxf} .day-navigator .title {
+    font-size: 1.2rem;
+    padding: 8px 20px;
+
+    &::after {
+      right: -6px;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #{$sxf} .navbar .navbar-brand::after {
+    animation: none;
+  }
+}