From 67803d2d4e756f1b156ad40b2421ab1fb6f6f360 Mon Sep 17 00:00:00 2001
From: Martin Berka <martin.berka@radbuza.net>
Date: Sun, 25 Oct 2026 20:08:06 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20nov=C3=BD=20vzhled=20Frieren?=
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      |  95 +++
 client/src/components/WheelConfetti.tsx       |  18 +-
 .../src/components/modals/SpinWheelModal.scss | 260 +++++++++
 client/src/context/settings.tsx               |   5 +-
 client/src/games/themeIcons.ts                |   2 +
 client/src/themes/frieren.scss                | 550 ++++++++++++++++++
 10 files changed, 949 insertions(+), 6 deletions(-)
 create mode 100644 client/src/themes/frieren.scss

diff --git a/client/index.html b/client/index.html
index fb1174c..a7ed878 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&family=Playfair+Display:ital,wght@0,800;1,800&family=Courier+Prime:wght@700&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&family=Cormorant+Garamond:wght@600;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', 'spyfamily', 'apothecary'];
+        var styles = ['umamusume', 'mlp', 'hellgirl', 'kon', 'bocchi', 'evangelion', 'yurucamp', 'spyfamily', 'apothecary', 'frieren'];
         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 ead0a9b..7cf8510 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -19,6 +19,7 @@ import './themes/evangelion.scss';
 import './themes/yurucamp.scss';
 import './themes/spyfamily.scss';
 import './themes/apothecary.scss';
+import './themes/frieren.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 2c84cc0..e66f0d8 100644
--- a/client/src/components/EaterBadge.scss
+++ b/client/src/components/EaterBadge.scss
@@ -116,6 +116,17 @@
   box-shadow: 0 0 0 2px #a8322a;
 }
 
+// Styl Frieren: emoji ve stříbrném kruhu se zlatým lemem a levandulovou září
+.eater-badge-frieren {
+  display: inline-grid;
+  place-items: center;
+  font-size: 15px;
+  line-height: 1;
+  border-color: #e9c86a;
+  background: radial-gradient(circle at 40% 35%, #ffffff, #e4def6);
+  box-shadow: 0 0 0 2px #8e7cc3, 0 0 8px rgb(179 163 234 / 0.7);
+}
+
 // 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 e2e2454..b58f001 100644
--- a/client/src/components/EaterBadge.tsx
+++ b/client/src/components/EaterBadge.tsx
@@ -61,6 +61,12 @@ const APO_LEVELS = [
     { minItems: 2, emoji: '🍡', title: 'Úroveň Xiaolan — k obědu ještě sladkosti a klepy z paláce' },
 ];
 
+/** Úrovně ve stylu Frieren — emoji ve stříbrném kruhu s levandulovou září. Seřazeno od nejvyšší úrovně. */
+const FR_LEVELS = [
+    { minItems: 3, emoji: '📦', title: 'Úroveň mimik — spolkne cokoli, klidně i Frieren' },
+    { minItems: 2, emoji: '🍖', title: 'Úroveň Stark — obří hamburger steak, který mu k narozeninám udělala Fern' },
+];
+
 /** Úrovně podle stylu pro odznaky s emoji. */
 const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
     mlp: MLP_LEVELS,
@@ -71,6 +77,7 @@ const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
     yurucamp: YC_LEVELS,
     spyfamily: SXF_LEVELS,
     apothecary: APO_LEVELS,
+    frieren: FR_LEVELS,
 };
 
 type Props = {
@@ -78,7 +85,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, Yuru Camp△, Spy × Family a Apothecary Diaries. */
+/** 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△, Spy × Family, Apothecary Diaries a Frieren. */
 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 756e8c7..8c067dd 100644
--- a/client/src/components/WheelConfetti.scss
+++ b/client/src/components/WheelConfetti.scss
@@ -788,3 +788,98 @@
     }
   }
 }
+
+// ============================================
+// Konfety ve stylu Frieren
+// ============================================
+.confetti-fr {
+  filter: drop-shadow(0 0 6px rgb(179 163 234 / 0.55)) drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
+}
+
+// Štítky jako zápisky v grimoáru — oblé, se zlatým lemem
+.confetti-fr-badge {
+  padding: 3px 16px 4px;
+  border-radius: 999px;
+  border: 1px solid #e9c86a;
+  color: #fff;
+  font-family: 'Cormorant Garamond', Georgia, serif;
+  font-weight: 700;
+  font-size: 1.25rem;
+  white-space: nowrap;
+}
+
+// Nápis „葬送のフリーレン" — vynoří se z magického kruhu, který se za ním roztáčí
+.confetti-fr-banner {
+  position: absolute;
+  top: 38%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  isolation: isolate;
+  padding: 14px 44px 16px;
+  font-family: 'Shippori Mincho', 'Cormorant Garamond', serif;
+  font-weight: 800;
+  font-size: clamp(1.8rem, 6.5vw, 3.8rem);
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  color: #fffaf0;
+  text-shadow: 0 0 16px rgb(179 163 234 / 0.95), 0 0 4px #5b4a9e;
+  background: linear-gradient(90deg, transparent, rgb(61 52 102 / 0.88) 15%, rgb(61 52 102 / 0.88) 85%, transparent);
+  border-top: 1px solid #e9c86a;
+  border-bottom: 1px solid #e9c86a;
+  animation: fr-banner 2.8s ease both;
+
+  // Magický kruh za nápisem
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    left: 50%;
+    top: 50%;
+    width: 300px;
+    height: 300px;
+    margin: -150px 0 0 -150px;
+    border-radius: 50%;
+    border: 2px solid rgb(233 200 106 / 0.8);
+    outline: 2px dashed rgb(233 200 106 / 0.6);
+    outline-offset: -22px;
+    background:
+      radial-gradient(circle, transparent 0 46%, rgb(233 200 106 / 0.55) 47% 48%, transparent 49%),
+      radial-gradient(circle, rgb(179 163 234 / 0.35), transparent 70%);
+    animation: fr-banner-circle 2.8s ease-out both;
+  }
+}
+
+@keyframes fr-banner {
+  0% { opacity: 0; filter: blur(8px); }
+  22%, 78% { opacity: 1; filter: blur(0); }
+  100% { opacity: 0; filter: blur(6px); }
+}
+
+@keyframes fr-banner-circle {
+  0% { transform: scale(0.2) rotate(0deg); opacity: 0; }
+  25% { transform: scale(1) rotate(90deg); opacity: 1; }
+  100% { transform: scale(1.15) rotate(240deg); opacity: 0.7; }
+}
+
+// Postava s hláškou — stříbrný kruh s levandulovou září a bublina jako stránka grimoáru
+.confetti-frieren-voice {
+  .confetti-mlp-avatar {
+    border: 3px solid #e9c86a;
+    background: radial-gradient(circle at 40% 35%, #ffffff, #e4def6);
+    box-shadow: 0 0 0 3px var(--mlp-speaker, #5b4a9e), 0 0 18px rgb(179 163 234 / 0.7);
+  }
+
+  .confetti-mlp-bubble {
+    background: #fdfcff;
+    color: #2e2a3d;
+    border: 1px solid #e9c86a;
+    border-radius: 14px;
+    box-shadow: 0 0 0 3px var(--mlp-speaker, #5b4a9e), 0 6px 16px rgb(0 0 0 / 0.25);
+    font-family: 'Cormorant Garamond', Georgia, serif;
+
+    p {
+      font-weight: 700;
+      font-size: 1.15rem;
+    }
+  }
+}
diff --git a/client/src/components/WheelConfetti.tsx b/client/src/components/WheelConfetti.tsx
index 015b4b2..585a2d8 100644
--- a/client/src/components/WheelConfetti.tsx
+++ b/client/src/components/WheelConfetti.tsx
@@ -136,6 +136,21 @@ const APO_SPEAKERS = [
     { name: 'Lakan', emoji: '♟️', color: '#7a5c3a', quote: 'Lidi vidím jen jako figurky na desce… ale tahle figurka je k snědku.' },
     { name: 'Konkubína Lishu', emoji: '🌸', color: '#c98fb0', quote: 'J-já si dám to samé… když to Maomao ochutnala.' },
 ];
+const FR_EMOJI = ['✨', '🌸', '🌼', '💐', '📖', '🪄', '📦', '🍇', '🌙', '⭐', '💜', '🦋', '🍖', '🔮'];
+// Hlášky z Frieren (Zoltraak, mimik, kouzlo květinového pole, „Himmel by to udělal"...)
+const FR_BADGES = ['葬送のフリーレン', 'Zoltraak', 'Mimik!', 'Pole květin', 'Himmel by to udělal', 'Fern se zlobí', 'O 1000 let později', 'Grimoár ✦', 'Potlačená mana', 'Zbytečné kouzlo'];
+const FR_BADGE_COLORS = ['#5b4a9e', '#8e7cc3', '#5b8fc7', '#bf9b4a', '#6f7a92', '#c76a96'];
+/** Družina Frieren (dnešní i Himmelova) s „hláškou" po finálním výsledku. */
+const FR_SPEAKERS = [
+    { name: 'Frieren', emoji: '✨', color: '#8a9a7a', quote: 'Dobře. Ale potom mi pomůžete otevřít tu truhlu… určitě to není mimik.' },
+    { name: 'Fern', emoji: '💜', color: '#5b4a9e', quote: 'Paní Frieren, jestli zase zaspíte, sním vaši porci.' },
+    { name: 'Stark', emoji: '🪓', color: '#a5523a', quote: 'J-já se vůbec nebojím! …Jen mám trochu hlad.' },
+    { name: 'Himmel', emoji: '💐', color: '#5b8fc7', quote: 'Tohle by udělal Himmel Hrdina. Tedy… já. Pojďme!' },
+    { name: 'Heiter', emoji: '🍷', color: '#8a6d9e', quote: 'Výborně. A k obědu malou sklenku — z Boží vůle, samozřejmě.' },
+    { name: 'Eisen', emoji: '🪨', color: '#8a7a5a', quote: '…Jídlo je dobré. To stačí.' },
+    { name: 'Aura', emoji: '⚖️', color: '#c76a96', quote: 'Poklekněte před tímto obědem! Váhy rozhodly.' },
+    { name: 'Mimik', emoji: '📦', color: '#8a6a3a', quote: '(cvak!) …(spokojeně žvýká Frieren)' },
+];
 /** 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[],
@@ -150,6 +165,7 @@ const EMOJI_CONFETTI: Partial<Record<WheelTheme, {
     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: '🥜 わくわく! 🥜' },
     apothecary: { prefix: 'confetti-apo', badges: APO_BADGES, colors: APO_BADGE_COLORS, emoji: APO_EMOJI, speakers: APO_SPEAKERS, banner: '🏮 薬屋のひとりごと 🏮' },
+    frieren: { prefix: 'confetti-fr', badges: FR_BADGES, colors: FR_BADGE_COLORS, emoji: FR_EMOJI, speakers: FR_SPEAKERS, banner: '✦ 葬送のフリーレン ✦' },
 };
 const DURATION_MS = 6400;
 
@@ -303,7 +319,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, Forgerovi, vnitřní palác...)
+    // Ostatní tematické styly: hlášku pronese náhodná postava (Mane 6, Ai Enma, Houkago Tea Time, Kessoku Band, piloti NERV, Nokuru, Forgerovi, vnitřní palác, družina Frieren...)
     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 25e7e0b..8d13ea8 100644
--- a/client/src/components/modals/SpinWheelModal.scss
+++ b/client/src/components/modals/SpinWheelModal.scss
@@ -2595,6 +2595,266 @@
   }
 }
 
+// ============================================
+// STYL FRIEREN kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách družiny a krajiny (fialová Fern, levandule, Himmelova
+// modř, zlato, louka, růžová), zlaté linky a střed jako magický kruh.
+// ============================================
+.spin-wheel-modal.spin-theme-frieren {
+  --fr-font: 'Nunito', sans-serif;
+  --fr-display: 'Cormorant Garamond', Georgia, serif;
+  --fr-violet: #5b4a9e;
+  --fr-violet-deep: #463882;
+  --fr-lavender: #8e7cc3;
+  --fr-gold: #bf9b4a;
+  --fr-line: #dcd8ea;
+  --fr-panel: #ffffff;
+  --fr-text: #2e2a3d;
+  --wheel-c0: #5b4a9e;
+  --wheel-c1: #8e7cc3;
+  --wheel-c2: #5b8fc7;
+  --wheel-c3: #bf9b4a;
+  --wheel-c4: #6f9f6a;
+  --wheel-c5: #c76a96;
+  --wheel-rim: #3d3466;
+  --wheel-hub: #e9c86a;
+
+  font-family: var(--fr-font);
+
+  .modal-content {
+    border: 1px solid var(--fr-line);
+    border-radius: 18px;
+    overflow: hidden;
+    background: linear-gradient(180deg, #e6ecf7 0, #f6f5fb 180px);
+    color: var(--fr-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
+      linear-gradient(90deg, #3d3466, #4b4380);
+    border-bottom: none;
+
+    h2 {
+      color: #f6f3ff;
+      font-family: var(--fr-display);
+      font-weight: 700;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 1px solid var(--fr-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--fr-display);
+    font-weight: 700;
+    font-size: 1.05rem;
+    background: #ebe8f3;
+    color: #8a869b;
+    border-radius: 999px;
+    padding: 2px 16px;
+
+    &.active {
+      background: var(--fr-violet);
+      color: #fff;
+      box-shadow: 0 0 10px rgb(142 124 195 / 0.5);
+    }
+
+    &.done {
+      background: #e4def6;
+      color: var(--fr-violet-deep);
+    }
+  }
+
+  .btn {
+    font-family: var(--fr-font);
+    font-weight: 800;
+    border-radius: 999px;
+  }
+
+  .btn-primary {
+    background: linear-gradient(135deg, var(--fr-violet), var(--fr-lavender));
+    border: none;
+    color: #fff;
+    box-shadow: 0 3px 10px rgb(91 74 158 / 0.25);
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, var(--fr-violet-deep), var(--fr-violet));
+      color: #fff;
+      box-shadow: 0 0 0 3px rgb(191 155 74 / 0.35), 0 0 18px rgb(142 124 195 / 0.55);
+    }
+
+    &:disabled {
+      background: #d9d6e4;
+      color: #8a869b;
+      box-shadow: none;
+    }
+  }
+
+  // Tlačítko roztočení — seslání kouzla
+  .spin-button {
+    font-family: var(--fr-display);
+    font-weight: 700;
+    font-size: 1.35rem;
+    padding: 8px 40px;
+  }
+
+  .btn-outline-primary {
+    background: var(--fr-panel);
+    border: 1px solid var(--fr-lavender);
+    color: var(--fr-violet);
+
+    &:hover {
+      background: #ebe6f7;
+      color: var(--fr-violet);
+    }
+  }
+
+  .btn-secondary {
+    background: #6f7a92;
+    border: none;
+    color: #fff;
+  }
+
+  .spin-source {
+    background: #ebe8f3;
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--fr-text);
+
+      &:hover {
+        background: var(--fr-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 800;
+
+    strong {
+      color: var(--fr-violet);
+    }
+  }
+
+  .spin-options {
+    background: var(--fr-panel);
+    border: 1px solid var(--fr-line);
+    border-radius: 14px;
+
+    li:hover {
+      background: #f1eef9;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 1px solid var(--fr-gold);
+    color: var(--fr-violet);
+    font-family: var(--fr-display);
+    font-size: 1.05rem;
+  }
+
+  .spin-empty {
+    border-color: var(--fr-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--fr-gold);
+    filter: drop-shadow(0 0 4px rgb(233 200 106 / 0.7));
+  }
+
+  .spin-seg {
+    stroke: #e9c86a;
+    stroke-width: 1.5;
+  }
+
+  .spin-seg-label {
+    font-family: var(--fr-font);
+    font-weight: 800;
+  }
+}
+
+// Tmavý režim — noc pod hvězdami
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-frieren {
+  --fr-violet: #b3a3ea;
+  --fr-violet-deep: #9a88dc;
+  --fr-gold: #dcc07a;
+  --fr-line: #2e2b45;
+  --fr-panel: #1b1a2b;
+  --fr-text: #eeebf7;
+  --wheel-c0: #45397a;
+  --wheel-rim: #0c0b16;
+
+  .modal-content {
+    background:
+      radial-gradient(1.2px 1.2px at 30px 40px, rgb(255 255 255 / 0.85), transparent) 0 0 / 200px 200px,
+      radial-gradient(1px 1px at 140px 110px, rgb(220 210 255 / 0.7), transparent) 0 0 / 200px 200px,
+      radial-gradient(circle at 88% 8%, rgb(255 244 210 / 0.16) 0 24px, transparent 90px),
+      #11101d;
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
+      #0c0b16;
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #242238;
+    color: #8f8ba5;
+  }
+
+  .spin-steps span.active {
+    color: #17142a;
+  }
+
+  .spin-steps span.done {
+    background: #2b2646;
+    color: #c8bbf2;
+  }
+
+  .btn-primary {
+    background: linear-gradient(135deg, #8e7cc3, #b3a3ea);
+    color: #17142a;
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #a593dc, #c8bbf2);
+      color: #17142a;
+    }
+
+    &:disabled {
+      background: #2e2b45;
+      color: #8f8ba5;
+    }
+  }
+
+  .btn-outline-primary:hover {
+    background: #2b2646;
+  }
+
+  .btn-secondary {
+    background: #2e2b45;
+  }
+
+  .spin-source {
+    background: #242238;
+  }
+
+  .spin-options li:hover {
+    background: #242238;
+  }
+
+  .spin-options-header {
+    color: #dcc07a;
+  }
+}
+
 // 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 7e87b90..f8ed405 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' | 'spyfamily' | 'apothecary';
+export type StyleTheme = 'simple' | 'umamusume' | 'mlp' | 'hellgirl' | 'kon' | 'bocchi' | 'evangelion' | 'yurucamp' | 'spyfamily' | 'apothecary' | 'frieren';
 
 export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
   { value: 'simple', label: 'Jednoduchý' },
@@ -26,6 +26,7 @@ export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
   { value: 'yurucamp', label: 'Yuru Camp△' },
   { value: 'spyfamily', label: 'Spy × Family' },
   { value: 'apothecary', label: 'Apothecary Diaries' },
+  { value: 'frieren', label: 'Frieren' },
 ];
 
 export type SettingsContextProps = {
@@ -257,7 +258,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△, Spy × Family, Apothecary Diaries) 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, Apothecary Diaries, Frieren) 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 415fc1d..40bebc8 100644
--- a/client/src/games/themeIcons.ts
+++ b/client/src/games/themeIcons.ts
@@ -23,6 +23,8 @@ const ICONS: Record<StyleTheme, Record<GameId, string>> = {
     spyfamily: { drawing: '🖍️' },
     // Lékárna Maomao: pero a tuš na recepty
     apothecary: { drawing: '🖋️' },
+    // Hůl mágyně Frieren
+    frieren: { drawing: '🪄' },
 };
 
 /** Styl z <html data-luncher-theme> — pro místa mimo React kontext nastavení. */
diff --git a/client/src/themes/frieren.scss b/client/src/themes/frieren.scss
new file mode 100644
index 0000000..5295985
--- /dev/null
+++ b/client/src/themes/frieren.scss
@@ -0,0 +1,550 @@
+// ============================================
+// STYL "FRIEREN" (volitelný, výchozí je jednoduchý styl)
+// Inspirováno anime Sōsō no Frieren (葬送のフリーレン).
+// Cesta krajinou po boku elfí mágyně: světlé nebe, levandulová Fern,
+// stříbro a zlato z pláště Frieren a dole pole květin — její oblíbené
+// kouzlo, které tolik miloval Himmel. Titulek dne leží v grimoáru
+// mezi dvěma magickými kruhy, které se pomalu otáčejí.
+// Tmavý režim = noc pod hvězdami se svítícími modrými květy.
+// Aktivní, pokud má <html> atribut data-luncher-theme="frieren".
+// ============================================
+
+$fr: 'html[data-luncher-theme="frieren"]';
+
+// Pole květin (kouzlo květinového pole) — opakuje se vodorovně
+@function fr-flowers($a, $b, $c, $stem) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='30'%3E%3Cpath d='M12 30V14M34 30V19M56 30V12M22 30Q24 24 28 22M46 30Q44 25 40 24' stroke='#{$stem}' stroke-width='1.4' fill='none'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='#{$a}'/%3E%3Ccircle cx='34' cy='17' r='3.6' fill='#{$b}'/%3E%3Ccircle cx='56' cy='10' r='4.2' fill='#{$c}'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='%23e9c86a'/%3E%3Ccircle cx='34' cy='17' r='1.2' fill='%23e9c86a'/%3E%3Ccircle cx='56' cy='10' r='1.4' fill='%23e9c86a'/%3E%3C/svg%3E");
+}
+
+// Hvězdy na noční obloze
+$fr-stars:
+  radial-gradient(1.2px 1.2px at 30px 40px, rgb(255 255 255 / 0.85), transparent),
+  radial-gradient(1px 1px at 140px 110px, rgb(220 210 255 / 0.7), transparent),
+  radial-gradient(1.5px 1.5px at 200px 30px, rgb(255 244 210 / 0.9), transparent),
+  radial-gradient(1px 1px at 90px 180px, rgb(255 255 255 / 0.55), transparent);
+
+// Magický kruh — vnější linka, čárkovaný vnitřní kruh, prstenec a tečka uprostřed
+@mixin fr-magic-circle($size) {
+  content: '';
+  display: inline-block;
+  width: $size;
+  height: $size;
+  vertical-align: middle;
+  border-radius: 50%;
+  border: 1.5px solid var(--fr-gold);
+  outline: 1px dashed var(--fr-gold);
+  outline-offset: -6px;
+  background:
+    radial-gradient(circle, var(--fr-gold) 0 1.5px, transparent 2px),
+    radial-gradient(circle, transparent 0 22%, var(--fr-gold) 23% 27%, transparent 28%);
+  opacity: 0.9;
+  animation: fr-spin 24s linear infinite;
+}
+
+#{$fr} {
+  --fr-font: 'Nunito', -apple-system, sans-serif;
+  --fr-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
+  --fr-violet: #5b4a9e;           // vlasy Fern
+  --fr-violet-deep: #463882;
+  --fr-lavender: #8e7cc3;
+  --fr-sky: #5b8fc7;              // modrá Himmela a květů blue moon weed
+  --fr-gold: #bf9b4a;             // zlaté lemy pláště Frieren
+  --fr-silver: #c9ced8;
+  --fr-meadow: #7fae7a;
+  --fr-line: #dcd8ea;
+
+  --luncher-primary: var(--fr-violet);
+  --luncher-primary-hover: var(--fr-violet-deep);
+  --luncher-primary-light: #ebe6f7;
+  --luncher-bg: #f6f5fb;
+  --luncher-bg-card: #ffffff;
+  --luncher-bg-hover: #f1eef9;
+  --luncher-text: #2e2a3d;
+  --luncher-text-secondary: #545069;
+  --luncher-text-muted: #8a869b;
+  --luncher-border: var(--fr-line);
+  --luncher-border-light: #ebe8f3;
+  --luncher-navbar-bg: #3d3466;
+  --luncher-navbar-text: #f6f3ff;
+  --luncher-action-icon: var(--fr-violet);
+  --luncher-buyer-icon: var(--fr-sky);
+  --luncher-success: #4f8f5a;
+  --luncher-warning: #c9952e;
+  --luncher-danger: #c0485a;
+  --luncher-radius-sm: 8px;
+  --luncher-radius: 12px;
+  --luncher-radius-lg: 14px;
+  --luncher-radius-xl: 18px;
+  --luncher-shadow: 0 4px 16px rgb(61 52 102 / 0.08);
+  --luncher-shadow-lg: 0 10px 30px rgb(91 74 158 / 0.18);
+
+  &[data-bs-theme="dark"] {
+    // Noc pod hvězdami
+    --fr-violet: #b3a3ea;
+    --fr-violet-deep: #9a88dc;
+    --fr-lavender: #8e7cc3;
+    --fr-sky: #8fb8e6;
+    --fr-gold: #dcc07a;
+    --fr-line: #2e2b45;
+
+    --luncher-primary: #b3a3ea;
+    --luncher-primary-hover: #c8bbf2;
+    --luncher-primary-light: #2b2646;
+    --luncher-bg: #11101d;
+    --luncher-bg-card: #1b1a2b;
+    --luncher-bg-hover: #242238;
+    --luncher-text: #eeebf7;
+    --luncher-text-secondary: #c6c2d8;
+    --luncher-text-muted: #8f8ba5;
+    --luncher-border: var(--fr-line);
+    --luncher-border-light: #232136;
+    --luncher-navbar-bg: #0c0b16;
+    --luncher-action-icon: #b3a3ea;
+    --luncher-buyer-icon: #8fb8e6;
+    --luncher-success: #8fcf95;
+    --luncher-warning: #e6c06a;
+    --luncher-danger: #e47a8c;
+    --luncher-shadow: 0 4px 16px rgb(0 0 0 / 0.4);
+    --luncher-shadow-lg: 0 10px 30px rgb(179 163 234 / 0.16);
+  }
+
+  body {
+    font-family: var(--fr-font);
+    background-color: var(--luncher-bg);
+    // Nebe nahoře a pole květin u spodního okraje okna
+    background-image:
+      fr-flowers('%238fb8de', '%23ffffff', '%23b9a8e6', '%237fae7a'),
+      linear-gradient(180deg, #dde6f5 0, var(--luncher-bg) 400px);
+    background-size: 96px 40px, 100% 100%;
+    background-position: left bottom, 0 0;
+    background-repeat: repeat-x, no-repeat;
+    background-attachment: fixed;
+  }
+
+  &[data-bs-theme="dark"] body {
+    // Hvězdy, měsíc a svítící modré květy
+    background-image:
+      fr-flowers('%235f8fd6', '%238fb8f0', '%237f6fc9', '%232f4a3a'),
+      $fr-stars,
+      radial-gradient(circle at 86% 6%, rgb(255 244 210 / 0.22) 0 28px, rgb(255 244 210 / 0.06) 29px 90px, transparent 160px),
+      linear-gradient(180deg, #1b1934 0, var(--luncher-bg) 440px);
+    background-size: 96px 40px, 230px 230px, 230px 230px, 230px 230px, 230px 230px, 100% 100%, 100% 100%;
+    background-position: left bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
+    background-repeat: repeat-x, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
+  }
+
+  .app-container {
+    background: transparent;
+  }
+
+  h1, h2, h3, h4, .navbar-brand {
+    font-family: var(--fr-display);
+    font-weight: 700;
+  }
+
+  .btn {
+    font-family: var(--fr-font);
+  }
+
+  // ---------- Navbar: soumrak nad krajinou se zlatou linkou ----------
+  .navbar {
+    background:
+      linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
+      linear-gradient(90deg, #3d3466, #4b4380 60%, #3d3466) !important;
+
+    .navbar-brand {
+      font-size: 1.45rem;
+      letter-spacing: 0.02em;
+
+      // Třpyt many
+      &::after {
+        content: '✦';
+        display: inline-block;
+        margin-left: 6px;
+        margin-right: 0.6em;
+        font-size: 0.7em;
+        color: #e9c86a;
+        animation: fr-shimmer 3.2s ease-in-out infinite;
+      }
+    }
+
+    .dropdown-menu {
+      border: 1px solid var(--fr-line);
+      border-radius: var(--luncher-radius);
+      box-shadow: var(--luncher-shadow-lg);
+    }
+  }
+
+  &[data-bs-theme="dark"] .navbar {
+    background:
+      linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
+      var(--luncher-navbar-bg) !important;
+  }
+
+  // ---------- Titulek dne: zápis v grimoáru mezi dvěma magickými kruhy ----------
+  .day-navigator .title {
+    position: relative;
+    display: inline-block;
+    padding: 6px 22px 8px;
+    font-family: var(--fr-display);
+    font-weight: 700;
+    font-size: 1.85rem;
+    color: var(--fr-violet-deep) !important;
+    background: rgb(255 255 255 / 0.75);
+    border: 1px solid var(--fr-gold);
+    border-radius: 999px;
+    box-shadow: 0 0 0 4px rgb(255 255 255 / 0.6), 0 0 24px rgb(142 124 195 / 0.25);
+
+    &::before, &::after {
+      @include fr-magic-circle(26px);
+    }
+
+    &::before {
+      margin-right: 14px;
+    }
+
+    &::after {
+      margin-left: 14px;
+      animation-direction: reverse;
+    }
+
+    &.text-muted {
+      color: #8a869b !important;
+      border-color: #c9c5d6;
+      box-shadow: 0 0 0 4px rgb(255 255 255 / 0.5);
+
+      &::before, &::after {
+        opacity: 0.35;
+        animation-play-state: paused;
+      }
+    }
+  }
+
+  &[data-bs-theme="dark"] .day-navigator .title {
+    color: #e6defc !important;
+    background: rgb(27 26 43 / 0.8);
+    box-shadow: 0 0 0 4px rgb(27 26 43 / 0.5), 0 0 28px rgb(179 163 234 / 0.3);
+
+    &.text-muted {
+      color: #8f8ba5 !important;
+      border-color: #3a3654;
+      box-shadow: none;
+    }
+  }
+
+  // ---------- Karty podniků: stránky grimoáru, v hlavičce slabý magický kruh ----------
+  .restaurant-card {
+    border: 1px solid var(--fr-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    overflow: hidden;
+
+    &:hover {
+      transform: translateY(-3px);
+      border-color: var(--fr-lavender);
+      box-shadow: var(--luncher-shadow-lg);
+    }
+
+    .restaurant-header {
+      background:
+        linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 2px no-repeat,
+        radial-gradient(circle at calc(100% - 34px) 50%, transparent 0 22px, rgb(255 255 255 / 0.22) 23px 24px, transparent 25px 30px, rgb(255 255 255 / 0.14) 31px 32px, transparent 33px),
+        linear-gradient(135deg, var(--fr-violet), var(--fr-lavender));
+
+      // Při najetí nebeská modř Himmela
+      &:hover {
+        background:
+          linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 2px no-repeat,
+          radial-gradient(circle at calc(100% - 34px) 50%, transparent 0 22px, rgb(255 255 255 / 0.3) 23px 24px, transparent 25px 30px, rgb(255 255 255 / 0.2) 31px 32px, transparent 33px),
+          linear-gradient(135deg, #3f74ad, #5b8fc7);
+      }
+
+      h3 {
+        font-size: 1.3rem;
+        letter-spacing: 0.01em;
+      }
+
+      small {
+        color: rgb(255 255 255 / 0.85);
+      }
+    }
+  }
+
+  &[data-bs-theme="dark"] .restaurant-card .restaurant-header:not(:hover) {
+    background:
+      linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 2px no-repeat,
+      radial-gradient(circle at calc(100% - 34px) 50%, transparent 0 22px, rgb(220 192 122 / 0.22) 23px 24px, transparent 25px 30px, rgb(220 192 122 / 0.14) 31px 32px, transparent 33px),
+      linear-gradient(135deg, #2e2756, #45397a);
+  }
+
+  .food-table tbody tr:hover > td {
+    background: #f1eef9;
+  }
+
+  &[data-bs-theme="dark"] .food-table tbody tr:hover > td {
+    background: #242238;
+  }
+
+  .food-price {
+    color: var(--fr-violet);
+    font-weight: 800;
+  }
+
+  // ---------- Panely a tabulka voleb ----------
+  .choice-section,
+  .choices-table,
+  .pizza-section,
+  .no-votes {
+    border: 1px solid var(--fr-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+  }
+
+  .choices-table {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  // Sloupec s podnikem: levandulová stránka se zlatou linkou
+  .choices-table > tbody > tr > td:first-child {
+    background: #efebf9;
+    color: var(--fr-violet-deep);
+    font-family: var(--fr-display);
+    font-size: 1.1em;
+    font-weight: 700;
+    border-right: 1px solid var(--fr-gold);
+  }
+
+  &[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child {
+    background: #24203d;
+    color: var(--fr-violet);
+  }
+
+  // Bootstrap karty (skupinové objednávky apod.) a seznamy
+  .card {
+    border: 1px solid var(--fr-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: 1px solid var(--fr-gold);
+      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(--fr-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(--fr-line);
+
+    &:focus {
+      border-color: var(--fr-lavender);
+      box-shadow: 0 0 0 3px rgb(142 124 195 / 0.25);
+    }
+  }
+
+  // ---------- Tlačítka: fialová many, při najetí se rozzáří ----------
+  .btn {
+    border-radius: 999px;
+    font-weight: 800;
+    transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.25s ease;
+  }
+
+  .btn-primary {
+    background: linear-gradient(135deg, var(--fr-violet), var(--fr-lavender));
+    border: none;
+    color: #fff;
+    box-shadow: 0 3px 10px rgb(91 74 158 / 0.25);
+
+    &:hover {
+      background: linear-gradient(135deg, var(--fr-violet-deep), var(--fr-violet));
+      color: #fff;
+      box-shadow: 0 0 0 3px rgb(191 155 74 / 0.35), 0 0 18px rgb(142 124 195 / 0.55);
+      transform: translateY(-1px);
+    }
+
+    &:disabled {
+      background: #d9d6e4;
+      color: #8a869b;
+      box-shadow: none;
+    }
+  }
+
+  &[data-bs-theme="dark"] .btn-primary {
+    background: linear-gradient(135deg, #8e7cc3, #b3a3ea);
+    color: #17142a;
+
+    &:hover {
+      background: linear-gradient(135deg, #a593dc, #c8bbf2);
+      color: #17142a;
+    }
+
+    &:disabled {
+      background: #2e2b45;
+      color: #8f8ba5;
+    }
+  }
+
+  .btn-outline-primary {
+    background: var(--luncher-bg-card);
+    border: 1px solid var(--fr-lavender);
+    color: var(--luncher-primary);
+
+    &:hover {
+      background: var(--luncher-primary-light);
+      border-color: var(--fr-lavender);
+      color: var(--luncher-primary);
+    }
+  }
+
+  .btn-secondary {
+    background: #6f7a92;
+    border: none;
+    color: #fff;
+
+    &:hover {
+      background: #5d6780;
+      color: #fff;
+    }
+  }
+
+  &[data-bs-theme="dark"] .btn-secondary {
+    background: #2e2b45;
+
+    &:hover {
+      background: #3a3654;
+    }
+  }
+
+  .btn-danger {
+    background: #c0485a;
+    border: none;
+  }
+
+  .action-icon:hover {
+    background: var(--luncher-primary-light);
+    color: var(--luncher-primary);
+  }
+
+  // ---------- Modaly: noční nebe se zlatou linkou ----------
+  .modal-content {
+    border: 1px solid var(--fr-line);
+    border-radius: var(--luncher-radius-xl);
+    box-shadow: 0 16px 44px rgb(61 52 102 / 0.3);
+    overflow: hidden;
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
+      radial-gradient(circle at calc(100% - 70px) 50%, transparent 0 18px, rgb(233 200 106 / 0.25) 19px 20px, transparent 21px 26px, rgb(233 200 106 / 0.15) 27px 28px, transparent 29px),
+      linear-gradient(90deg, #3d3466, #4b4380);
+    border-bottom: none;
+
+    .modal-title, .modal-title h2 {
+      color: #f6f3ff;
+      font-family: var(--fr-display);
+      font-weight: 700;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+    }
+  }
+
+  &[data-bs-theme="dark"] .modal-header {
+    background-color: #0c0b16;
+  }
+
+  .footer {
+    border-top: none;
+    background-image: linear-gradient(var(--fr-gold), var(--fr-gold));
+    background-size: 100% 1px;
+    background-position: top;
+    background-repeat: no-repeat;
+
+    a {
+      color: #e9c86a;
+    }
+  }
+}
+
+// Pomalé otáčení magického kruhu
+@keyframes fr-spin {
+  to { transform: rotate(360deg); }
+}
+
+// Třpyt many u loga
+@keyframes fr-shimmer {
+  0%, 100% { opacity: 0.55; transform: scale(0.9); }
+  50% { opacity: 1; transform: scale(1.15); text-shadow: 0 0 8px rgb(233 200 106 / 0.8); }
+}
+
+@media (max-width: 575.98px) {
+  #{$fr} .day-navigator .title {
+    font-size: 1.4rem;
+    padding: 5px 14px 6px;
+
+    &::before, &::after {
+      width: 18px;
+      height: 18px;
+      outline-offset: -4px;
+    }
+
+    &::before {
+      margin-right: 8px;
+    }
+
+    &::after {
+      margin-left: 8px;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #{$fr} .navbar .navbar-brand::after,
+  #{$fr} .day-navigator .title::before,
+  #{$fr} .day-navigator .title::after {
+    animation: none;
+  }
+}