From 93d86fe0a5e61bd5963a9f5ad7fcf1764a4ffe8b Mon Sep 17 00:00:00 2001
From: Martin Berka <martin.berka@radbuza.net>
Date: Mon, 12 Oct 2026 11:04:54 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20p=C5=99id=C3=A1n=C3=AD=20vzhledu=20My?=
 =?UTF-8?q?=20Little=20Pony?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/index.html                             |   2 +-
 client/src/App.tsx                            |   1 +
 client/src/components/EaterBadge.scss         |  10 +
 client/src/components/EaterBadge.tsx          |  21 +-
 client/src/components/Header.tsx              |   5 +-
 client/src/components/WheelConfetti.scss      |  99 ++++
 client/src/components/WheelConfetti.tsx       |  45 ++
 .../src/components/modals/SpinWheelModal.scss | 238 ++++++++++
 client/src/context/settings.tsx               |  11 +-
 client/src/themes/mlp.scss                    | 442 ++++++++++++++++++
 10 files changed, 865 insertions(+), 9 deletions(-)
 create mode 100644 client/src/themes/mlp.scss

diff --git a/client/index.html b/client/index.html
index 9d141d3..cdca90b 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&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&display=swap" rel="stylesheet" />
   <title>Luncher</title>
   <script>
     (function() {
diff --git a/client/src/App.tsx b/client/src/App.tsx
index cf22f6c..5e5dfba 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -11,6 +11,7 @@ import SelectSearch, { SelectedOptionValue, SelectSearchOption } from 'react-sel
 import 'react-select-search/style.css';
 import './App.scss';
 import './themes/umamusume.scss';
+import './themes/mlp.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 6ea6ec3..6dc806a 100644
--- a/client/src/components/EaterBadge.scss
+++ b/client/src/components/EaterBadge.scss
@@ -19,6 +19,16 @@
   }
 }
 
+// Styl My Little Pony: cutie mark s emoji v kulatém odznaku
+.eater-badge-mlp {
+  display: inline-grid;
+  place-items: center;
+  font-size: 17px;
+  line-height: 1;
+  background: radial-gradient(circle at 35% 30%, #fff, #f6ecff);
+  box-shadow: 0 0 0 2px #8e4fd1;
+}
+
 // 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 52a8c7d..2eae99a 100644
--- a/client/src/components/EaterBadge.tsx
+++ b/client/src/components/EaterBadge.tsx
@@ -13,20 +13,37 @@ const LEVELS = [
     { minItems: 2, character: 'Special Week', title: 'Úroveň Special Week — pořádný apetit' },
 ];
 
+/** Úrovně ve stylu My Little Pony — místo portrétu cutie mark (emoji). Seřazeno od nejvyšší úrovně. */
+const MLP_LEVELS = [
+    { minItems: 3, emoji: '🧁', title: 'Úroveň Pinkie Pie — cupcaků není nikdy dost' },
+    { minItems: 2, emoji: '🍎', title: 'Úroveň Applejack — poctivý apetit' },
+];
+
 type Props = {
     /** Počet jídel/položek, které si strávník vybral či objednal */
     items: number,
 };
 
-/** Odznak s postavou Umamusume u strávníků s více jídly — jen ve stylu Umamusume. */
+/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume a My Little Pony. */
 export default function EaterBadge({ items }: Readonly<Props>) {
-    const isUma = useSettings()?.styleTheme === 'umamusume';
+    const styleTheme = useSettings()?.styleTheme;
+    const isUma = styleTheme === 'umamusume';
     const [characters, setCharacters] = useState<UmaCharacter[]>([]);
 
     useEffect(() => {
         if (isUma) loadUmaCharacters().then(setCharacters);
     }, [isUma]);
 
+    if (styleTheme === 'mlp') {
+        const mlpLevel = MLP_LEVELS.find(l => items >= l.minItems);
+        if (!mlpLevel) return null;
+        return (
+            <OverlayTrigger placement="top" overlay={<Tooltip>{mlpLevel.title} ({items} jídla)</Tooltip>}>
+                <span className="eater-badge eater-badge-mlp" role="img" aria-label={mlpLevel.title}>{mlpLevel.emoji}</span>
+            </OverlayTrigger>
+        );
+    }
+
     const level = LEVELS.find(l => items >= l.minItems);
     const character = level && characters.find(c => c.name === level.character);
     // Malý odznak potřebuje obličej — portrét (icon), případně kulatý obrázek postavy
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 35a5b9b..3cd5d7e 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -77,7 +77,8 @@ export default function Header({ choices, dayIndex }: Props) {
         setQrModalOpen(true);
     }
 
-    const isUmamusume = settings?.styleTheme === 'umamusume';
+    // Tematické styly mají pevnou paletu, výběr barvy má smysl jen u jednoduchého stylu
+    const isSimpleStyle = (settings?.styleTheme ?? 'simple') === 'simple';
 
     const toggleTheme = () => {
         const newTheme: ThemePreference = effectiveDark ? 'light' : 'dark';
@@ -158,7 +159,7 @@ export default function Header({ choices, dayIndex }: Props) {
                 >
                     <FontAwesomeIcon icon={effectiveDark ? faSun : faMoon} />
                 </button>
-                {!isUmamusume && <HuePicker
+                {isSimpleStyle && <HuePicker
                     accentHue={settings?.accentHue ?? 142}
                     isDark={effectiveDark}
                     onChange={hue => settings?.setAccentHue(hue)}
diff --git a/client/src/components/WheelConfetti.scss b/client/src/components/WheelConfetti.scss
index ca00d8e..1427f80 100644
--- a/client/src/components/WheelConfetti.scss
+++ b/client/src/components/WheelConfetti.scss
@@ -161,3 +161,102 @@
   85% { opacity: 1; transform: translateY(0); }
   100% { opacity: 0; transform: translateY(20px); }
 }
+
+// ============================================
+// Konfety ve stylu My Little Pony
+// ============================================
+.confetti-mlp {
+  filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
+}
+
+.confetti-mlp-badge {
+  padding: 4px 14px;
+  border-radius: 999px;
+  border: 3px solid #fff;
+  color: #fff;
+  font-family: 'Fredoka', 'Nunito', sans-serif;
+  font-weight: 700;
+  font-size: 1.1rem;
+  white-space: nowrap;
+  text-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 0 12px rgb(255 255 255 / 0.7), 0 4px 0 rgb(0 0 0 / 0.15);
+}
+
+// Duhový nápis „Sonic Rainboom" přes celou obrazovku
+.confetti-mlp-banner {
+  position: absolute;
+  top: 38%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 44px;
+  font-family: 'Fredoka', 'Nunito', sans-serif;
+  font-weight: 700;
+  font-size: clamp(1.8rem, 6.5vw, 3.6rem);
+  white-space: nowrap;
+  color: #fff;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #ee4144, #f37033, #e3b829, #62bc4d, #1e98d3, #672f89);
+  border: 5px solid #fff;
+  text-shadow: 0 3px 0 rgb(0 0 0 / 0.25);
+  box-shadow: 0 0 30px rgb(236 61 143 / 0.5), 0 8px 0 rgb(0 0 0 / 0.12);
+  animation: mlp-banner 2s cubic-bezier(0.2, 1.4, 0.4, 1) both;
+}
+
+@keyframes mlp-banner {
+  0% { transform: translate(-50%, -50%) scale(0.2) rotate(-8deg); opacity: 0; }
+  25% { transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1; }
+  35% { transform: translate(-50%, -50%) scale(1); }
+  75% { transform: translate(-50%, -50%) scale(1.03); opacity: 1; }
+  100% { transform: translate(-50%, -160%) scale(0.9); opacity: 0; }
+}
+
+// Postava s hláškou — místo obrázku kulatý „cutie mark" s emoji
+.confetti-mlp-avatar {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 84px;
+  height: 84px;
+  margin-bottom: 8px;
+  font-size: 46px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #fff, #f6ecff);
+  border: 4px solid #fff;
+  box-shadow: 0 0 0 4px var(--mlp-speaker, #8e4fd1), 0 4px 10px rgb(0 0 0 / 0.3);
+}
+
+.confetti-mlp-bubble {
+  position: relative;
+  margin-bottom: 40px;
+  padding: 12px 16px;
+  background: #fff;
+  color: #2e1f47;
+  border: 3px solid var(--mlp-speaker, #8e4fd1);
+  border-radius: 22px;
+  box-shadow: 0 4px 0 var(--mlp-speaker, #8e4fd1);
+  font-family: 'Fredoka', 'Nunito', sans-serif;
+
+  p {
+    margin: 0;
+    font-weight: 600;
+    font-size: 1rem;
+    line-height: 1.35;
+  }
+
+  small {
+    display: block;
+    margin-top: 4px;
+    color: var(--mlp-speaker, #8e4fd1);
+    font-weight: 700;
+  }
+
+  // ocásek bubliny směrem k postavě
+  &::before {
+    content: '';
+    position: absolute;
+    left: -14px;
+    bottom: 14px;
+    border: 8px solid transparent;
+    border-right: 10px solid var(--mlp-speaker, #8e4fd1);
+  }
+}
diff --git a/client/src/components/WheelConfetti.tsx b/client/src/components/WheelConfetti.tsx
index a9643bc..1b9b5d1 100644
--- a/client/src/components/WheelConfetti.tsx
+++ b/client/src/components/WheelConfetti.tsx
@@ -21,6 +21,20 @@ const UMA_EMOJI = ['🐴', '🏇', '🥕', '🏆', '🌸', '✨', '⭐', '🍙',
 // Hlášky z fandomu Umamusume (Umapyoi Densetsu, Teio step, hachimī, Golshi, Oguri „okawari"...)
 const UMA_BADGES = ['1着!', 'Umazing!', 'Umapyoi!', 'Teio step!', 'Hachimī~', 'Golshi approves', 'Okawari!', 'Pakapaka~', 'ウマい!'];
 const UMA_BADGE_COLORS = ['#ff6fa3', '#2e9a3a', '#43b8f0', '#f2a91a'];
+const MLP_EMOJI = ['🦄', '🌈', '✨', '⭐', '🧁', '🍎', '🦋', '💎', '🎈', '🎉', '🍰', '💜'];
+// Hlášky a narážky z My Little Pony: Friendship is Magic
+const MLP_BADGES = ['Friendship is Magic!', '20% cooler!', 'Sonic Rainboom!', 'Yay!', 'Party!', 'Yeehaw!', 'Everypony!', 'Awesome!', 'Darling!', 'Pinkie Promise'];
+const MLP_BADGE_COLORS = ['#8e4fd1', '#f06aa6', '#1e98d3', '#f37033', '#e3b829', '#5b4fc9'];
+/** Postavy Mane 6 (+ Spike) s „hláškou" po finálním výsledku — místo obrázků cutie mark emoji. */
+const MLP_SPEAKERS = [
+    { name: 'Twilight Sparkle', emoji: '⭐', color: '#8e4fd1', quote: 'Podle mého seznamu je to ta nejlogičtější volba!' },
+    { name: 'Rainbow Dash', emoji: '🌈', color: '#1e98d3', quote: 'Tohle je o 20 % úžasnější než ostatní!' },
+    { name: 'Pinkie Pie', emoji: '🎈', color: '#f06aa6', quote: 'Tohle volá po PÁRTY! S dortem! A s cupcaky!' },
+    { name: 'Applejack', emoji: '🍎', color: '#f37033', quote: 'Poctivé jídlo pro poctivou práci. Jíhá!' },
+    { name: 'Fluttershy', emoji: '🦋', color: '#e3b829', quote: 'Jé… teda, jestli to nevadí… yay.' },
+    { name: 'Rarity', emoji: '💎', color: '#5b4fc9', quote: 'Naprosto božská volba, drahoušku!' },
+    { name: 'Spike', emoji: '🐉', color: '#62bc4d', quote: 'Zapsáno do svitku a odesláno princezně!' },
+];
 const DURATION_MS = 6400;
 
 const rand = (min: number, max: number) => min + Math.random() * (max - min);
@@ -107,6 +121,20 @@ function buildPieces(theme: WheelTheme, big: boolean, images: UmaImage[]): Piece
         }));
     }
     const count = big ? 50 : 24;
+    if (theme === 'mlp') {
+        return Array.from({ length: count }, (_, id) => {
+            const base: React.CSSProperties = {
+                ...launchStyle(pick(LAUNCHES)),
+                ['--r1' as any]: `${rand(-25, 25)}deg`,
+                ['--r2' as any]: `${rand(-40, 40)}deg`,
+            };
+            if (Math.random() < 0.35) {
+                return { id, className: 'confetti-mlp confetti-mlp-badge', content: pick(MLP_BADGES),
+                    style: { ...base, background: pick(MLP_BADGE_COLORS) } };
+            }
+            return { id, className: 'confetti-mlp confetti-uma-emoji', style: { ...base, fontSize: `${rand(28, 52)}px` }, content: pick(MLP_EMOJI) };
+        });
+    }
     return Array.from({ length: count }, (_, id) => {
         const roll = Math.random();
         // Samolepky se tolik netočí, ať jsou čitelné
@@ -157,11 +185,19 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [burstKey]);
 
+    // MLP: hlášku pronese náhodná postava z Mane 6
+    const mlpSpeaker = useMemo(
+        () => theme === 'mlp' && big ? pick(MLP_SPEAKERS) : undefined,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [burstKey],
+    );
+
     if (!active || window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return null;
 
     return createPortal(
         <div className={`wheel-confetti wheel-confetti-${theme}`} key={burstKey} aria-hidden>
             {theme === 'umamusume' && big && <div className="confetti-uma-banner">🏆 1着 🏆</div>}
+            {theme === 'mlp' && big && <div className="confetti-mlp-banner">🌈 Sonic Rainboom! 🌈</div>}
             {pieces.map(p => <span key={p.id} className={p.className} style={p.style}>{p.content}</span>)}
             {speaker && (
                 <div className="confetti-uma-voice">
@@ -172,6 +208,15 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
                     </div>
                 </div>
             )}
+            {mlpSpeaker && (
+                <div className="confetti-uma-voice confetti-mlp-voice" style={{ ['--mlp-speaker' as any]: mlpSpeaker.color }}>
+                    <span className="confetti-mlp-avatar">{mlpSpeaker.emoji}</span>
+                    <div className="confetti-mlp-bubble">
+                        <p>„{mlpSpeaker.quote}"</p>
+                        <small>— {mlpSpeaker.name}</small>
+                    </div>
+                </div>
+            )}
         </div>,
         document.body,
     );
diff --git a/client/src/components/modals/SpinWheelModal.scss b/client/src/components/modals/SpinWheelModal.scss
index 3ac29cd..3c9a906 100644
--- a/client/src/components/modals/SpinWheelModal.scss
+++ b/client/src/components/modals/SpinWheelModal.scss
@@ -536,6 +536,244 @@
   }
 }
 
+// ============================================
+// STYL MY LITTLE PONY kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách Mane 6, duhový lem Rainbow Dash, fialová Twilight
+// a růžová Pinkie Pie, kulatá „bonbonová" tlačítka.
+// ============================================
+.spin-wheel-modal.spin-theme-mlp {
+  --mlp-font: 'Fredoka', 'Nunito', 'Inter', sans-serif;
+  --mlp-twilight: #8e4fd1;
+  --mlp-twilight-deep: #6a35b0;
+  --mlp-twilight-shadow: #4b2287;
+  --mlp-pinkie: #f06aa6;
+  --mlp-pinkie-deep: #d6417f;
+  --mlp-panel: #faf5ff;
+  --mlp-border: #e5d4f7;
+  --mlp-text: #2e1f47;
+  // Mane 6: Twilight, Pinkie, Rainbow Dash, Applejack, Fluttershy, Rarity
+  --wheel-c0: #9b5fe0;
+  --wheel-c1: #f06aa6;
+  --wheel-c2: #1e98d3;
+  --wheel-c3: #f37033;
+  --wheel-c4: #e3b829;
+  --wheel-c5: #5b4fc9;
+  --wheel-rim: #ec3d8f;
+  --wheel-hub: #ffffff;
+
+  font-family: var(--mlp-font);
+
+  .modal-content {
+    border: 4px solid var(--mlp-border);
+    border-radius: 26px;
+    overflow: hidden;
+    background-color: #fff;
+    background-image:
+      radial-gradient(circle at 20% 30%, rgb(142 79 209 / 0.10) 0 2px, transparent 3px),
+      radial-gradient(circle at 70% 80%, rgb(240 106 166 / 0.10) 0 2px, transparent 3px);
+    background-size: 120px 120px, 170px 170px;
+    color: var(--mlp-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(90deg, #ee4144 0 16.6%, #f37033 16.6% 33.3%, #fdf6af 33.3% 50%, #62bc4d 50% 66.6%, #1e98d3 66.6% 83.3%, #672f89 83.3% 100%) bottom / 100% 5px no-repeat,
+      linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-twilight) 60%, var(--mlp-pinkie));
+    border-bottom: none;
+
+    h2 {
+      color: #fff;
+      font-family: var(--mlp-font);
+      font-weight: 700;
+      text-shadow: 0 2px 0 var(--mlp-twilight-shadow);
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 3px dotted var(--mlp-border);
+  }
+
+  .spin-steps span {
+    font-family: var(--mlp-font);
+    background: #f1e6fc;
+    color: #9a8ab3;
+    border-radius: 999px;
+    padding: 4px 16px;
+
+    &.active {
+      background: linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-pinkie));
+      color: #fff;
+    }
+
+    &.done {
+      background: var(--mlp-twilight);
+      color: #fff;
+    }
+  }
+
+  .btn {
+    font-family: var(--mlp-font);
+    font-weight: 600;
+    border-radius: 999px;
+    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
+
+    &:active:not(:disabled) {
+      transform: translateY(3px);
+      box-shadow: 0 1px 0 var(--mlp-btn-shadow, transparent);
+    }
+  }
+
+  .btn-primary {
+    --mlp-btn-shadow: var(--mlp-twilight-shadow);
+    background: linear-gradient(180deg, #b07ae6, var(--mlp-twilight-deep));
+    border: none;
+    box-shadow: 0 4px 0 var(--mlp-twilight-shadow);
+    color: #fff;
+    text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
+
+    &:disabled {
+      background: #c9bdd9;
+      box-shadow: 0 4px 0 #a99cbc;
+    }
+  }
+
+  .spin-button {
+    --mlp-btn-shadow: #a52c63;
+    background: linear-gradient(180deg, #ff94c4, var(--mlp-pinkie-deep));
+    box-shadow: 0 5px 0 #a52c63, 0 0 18px rgb(240 106 166 / 0.45);
+    font-size: 1.15rem;
+    padding: 12px 36px;
+  }
+
+  .btn-outline-primary {
+    --mlp-btn-shadow: var(--mlp-border);
+    background: #fff;
+    border: 2px solid var(--mlp-twilight);
+    color: var(--mlp-twilight-deep);
+    box-shadow: 0 4px 0 var(--mlp-border);
+
+    &:hover {
+      background: #f1e6fc;
+      color: var(--mlp-twilight-deep);
+    }
+  }
+
+  .btn-secondary {
+    --mlp-btn-shadow: var(--mlp-border);
+    background: #fff;
+    border: 2px solid var(--mlp-border);
+    color: var(--mlp-text);
+    box-shadow: 0 4px 0 var(--mlp-border);
+  }
+
+  .spin-source {
+    background: #f1e6fc;
+
+    > .btn-primary {
+      background: linear-gradient(180deg, #b07ae6, var(--mlp-twilight-deep));
+      box-shadow: 0 2px 0 var(--mlp-twilight-shadow) !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--mlp-twilight-deep);
+
+      &:hover {
+        background: #fff;
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 700;
+
+    strong {
+      color: var(--mlp-pinkie-deep);
+    }
+  }
+
+  .spin-options {
+    background: var(--mlp-panel);
+    border: 3px solid var(--mlp-border);
+    border-radius: 18px;
+
+    li:hover {
+      background: #fff0f7;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 3px solid var(--mlp-border);
+    color: var(--mlp-twilight-deep);
+  }
+
+  .spin-empty {
+    border-color: var(--mlp-border);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--mlp-pinkie-deep);
+  }
+
+  .spin-seg {
+    stroke: #fff;
+    stroke-width: 2.5;
+  }
+
+  .spin-seg-label {
+    font-family: var(--mlp-font);
+    font-weight: 700;
+  }
+}
+
+// Tmavý režim — noční obloha princezny Luny
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-mlp {
+  --mlp-panel: #1d1745;
+  --mlp-border: #362c6e;
+  --mlp-text: #f2edff;
+  --wheel-hub: #1d1745;
+
+  .modal-content {
+    background-color: #120e2e;
+    background-image:
+      radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.5) 0 1.5px, transparent 2.5px),
+      radial-gradient(circle at 70% 80%, rgb(183 198 255 / 0.35) 0 1px, transparent 2px);
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #282058;
+    color: #8a7fb5;
+  }
+
+  .btn-outline-primary, .btn-secondary {
+    background: #1d1745;
+    color: #f2edff;
+  }
+
+  .spin-source {
+    background: #282058;
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: #c2b6e6;
+
+      &:hover {
+        background: #1d1745;
+        color: #fff;
+      }
+    }
+  }
+
+  .spin-options li:hover {
+    background: #2e2160;
+  }
+}
+
 // 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 11949d4..3d3ec1b 100644
--- a/client/src/context/settings.tsx
+++ b/client/src/context/settings.tsx
@@ -11,11 +11,12 @@ const STYLE_THEME_KEY = 'style_theme';
 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';
+export type StyleTheme = 'simple' | 'umamusume' | 'mlp';
 
 export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
   { value: 'simple', label: 'Jednoduchý' },
   { value: 'umamusume', label: 'Umamusume' },
+  { value: 'mlp', label: 'My Little Pony' },
 ];
 
 export type SettingsContextProps = {
@@ -63,8 +64,10 @@ function getInitialTheme(): ThemePreference {
 
 function getInitialStyleTheme(): StyleTheme {
   try {
-    if (localStorage.getItem(STYLE_THEME_KEY) === 'umamusume') {
-      return 'umamusume';
+    const saved = localStorage.getItem(STYLE_THEME_KEY);
+    const known = STYLE_THEMES.find(t => t.value === saved);
+    if (known) {
+      return known.value;
     }
   } catch {
     // localStorage nedostupný
@@ -213,7 +216,7 @@ function useProvideSettings(): SettingsContextProps {
   }, [styleTheme]);
 
   // Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý.
-  // Styl Umamusume má vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
+  // Tematické styly (Umamusume, My Little Pony) 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/themes/mlp.scss b/client/src/themes/mlp.scss
new file mode 100644
index 0000000..203a6e1
--- /dev/null
+++ b/client/src/themes/mlp.scss
@@ -0,0 +1,442 @@
+// ============================================
+// STYL "MY LITTLE PONY" (volitelný, výchozí je jednoduchý styl)
+// Inspirováno 4. generací — My Little Pony: Friendship is Magic.
+// Fialová Twilight Sparkle, růžová Pinkie Pie, pastelová obloha Ponyville,
+// duhový pruh Rainbow Dash (Sonic Rainboom) a hvězdička z cutie marku Twilight.
+// Tmavý režim = noční obloha princezny Luny.
+// Aktivní, pokud má <html> atribut data-luncher-theme="mlp".
+// ============================================
+
+$mlp: 'html[data-luncher-theme="mlp"]';
+
+// Duha Rainbow Dash (červená, oranžová, žlutá, zelená, modrá, fialová)
+$mlp-rainbow: linear-gradient(90deg, #ee4144 0 16.6%, #f37033 16.6% 33.3%, #fdf6af 33.3% 50%, #62bc4d 50% 66.6%, #1e98d3 66.6% 83.3%, #672f89 83.3% 100%);
+$mlp-rainbow-soft: linear-gradient(90deg, #ee4144, #f37033, #fdf6af, #62bc4d, #1e98d3, #672f89);
+
+#{$mlp} {
+  --mlp-font: 'Fredoka', 'Nunito', 'Inter', -apple-system, sans-serif;
+  --mlp-twilight: #8e4fd1;        // srst Twilight (sytější kvůli kontrastu)
+  --mlp-twilight-deep: #6a35b0;
+  --mlp-twilight-shadow: #4b2287;
+  --mlp-twilight-light: #d9b8f5;
+  --mlp-pinkie: #f06aa6;          // Pinkie Pie
+  --mlp-pinkie-deep: #d6417f;
+  --mlp-star: #ec3d8f;            // cutie mark Twilight
+  --mlp-fluttershy: #fff3b0;      // Fluttershy
+  --mlp-sky: #5ec8f2;             // Rainbow Dash
+  --mlp-card-border: #e5d4f7;
+  --mlp-sparkle: rgb(142 79 209 / 0.10);
+  --mlp-sparkle-2: rgb(240 106 166 / 0.10);
+
+  --luncher-primary: var(--mlp-twilight-deep);
+  --luncher-primary-hover: var(--mlp-twilight-shadow);
+  --luncher-primary-light: #f1e6fc;
+  --luncher-bg: #faf5ff;
+  --luncher-bg-card: #ffffff;
+  --luncher-bg-hover: #f6edff;
+  --luncher-text: #2e1f47;
+  --luncher-text-secondary: #5d4a7a;
+  --luncher-text-muted: #9a8ab3;
+  --luncher-border: #e5d4f7;
+  --luncher-border-light: #f0e6fb;
+  --luncher-navbar-bg: var(--mlp-twilight-deep);
+  --luncher-navbar-text: #ffffff;
+  --luncher-action-icon: var(--mlp-twilight-deep);
+  --luncher-buyer-icon: #f37033;
+  --luncher-success: #3f9d3a;
+  --luncher-warning: #e8891c;
+  --luncher-danger: #e0395c;
+  --luncher-radius-sm: 12px;
+  --luncher-radius: 16px;
+  --luncher-radius-lg: 22px;
+  --luncher-radius-xl: 26px;
+  --luncher-shadow: 0 4px 14px -4px rgb(106 53 176 / 0.22);
+  --luncher-shadow-lg: 0 10px 28px -8px rgb(106 53 176 / 0.32);
+
+  &[data-bs-theme="dark"] {
+    // Noční obloha princezny Luny
+    --mlp-twilight: #b78af0;
+    --mlp-twilight-deep: #9b6be0;
+    --mlp-twilight-shadow: #3d2380;
+    --mlp-twilight-light: #3a2b6e;
+    --mlp-pinkie: #ff8cc0;
+    --mlp-pinkie-deep: #f06aa6;
+    --mlp-card-border: #362c6e;
+    --mlp-sparkle: rgb(255 255 255 / 0.55);
+    --mlp-sparkle-2: rgb(183 198 255 / 0.35);
+
+    --luncher-primary: #c4a0f7;
+    --luncher-primary-hover: #d9c0fb;
+    --luncher-primary-light: #2b2160;
+    --luncher-bg: #120e2e;
+    --luncher-bg-card: #1d1745;
+    --luncher-bg-hover: #282058;
+    --luncher-text: #f2edff;
+    --luncher-text-secondary: #c2b6e6;
+    --luncher-text-muted: #8a7fb5;
+    --luncher-border: #362c6e;
+    --luncher-border-light: #2b2360;
+    --luncher-navbar-bg: #2a1f66;
+    --luncher-action-icon: #c4a0f7;
+    --luncher-buyer-icon: #ffb36b;
+    --luncher-success: #7fd67a;
+    --luncher-warning: #ffcf5c;
+    --luncher-danger: #ff6f8f;
+    --luncher-shadow: 0 4px 16px -4px rgb(0 0 0 / 0.55);
+    --luncher-shadow-lg: 0 12px 30px -8px rgb(0 0 0 / 0.65);
+  }
+
+  body {
+    font-family: var(--mlp-font);
+    background-color: var(--luncher-bg);
+    // Rozeseté jiskřičky (ve dne pastelové, v noci hvězdy)
+    background-image:
+      radial-gradient(circle at 20% 30%, var(--mlp-sparkle) 0 2px, transparent 3px),
+      radial-gradient(circle at 70% 80%, var(--mlp-sparkle-2) 0 2px, transparent 3px),
+      radial-gradient(circle at 85% 15%, var(--mlp-sparkle) 0 1.5px, transparent 2.5px),
+      linear-gradient(180deg, #fde9f4 0, var(--luncher-bg) 360px);
+    background-size: 140px 140px, 190px 190px, 230px 230px, 100% 100%;
+    background-attachment: fixed;
+  }
+
+  &[data-bs-theme="dark"] body {
+    background-image:
+      radial-gradient(circle at 20% 30%, var(--mlp-sparkle) 0 1.5px, transparent 2.5px),
+      radial-gradient(circle at 70% 80%, var(--mlp-sparkle-2) 0 1px, transparent 2px),
+      radial-gradient(circle at 85% 15%, var(--mlp-sparkle) 0 1px, transparent 2px),
+      linear-gradient(180deg, #221a55 0, var(--luncher-bg) 420px);
+  }
+
+  .app-container {
+    background: transparent;
+  }
+
+  h1, h2, h3, h4, .navbar-brand, .btn {
+    font-family: var(--mlp-font);
+  }
+
+  // ---------- Navbar: fialová Twilight s duhovým pruhem dole ----------
+  .navbar {
+    background:
+      #{$mlp-rainbow} bottom / 100% 5px no-repeat,
+      linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-twilight) 60%, var(--mlp-pinkie)) !important;
+    padding-bottom: calc(var(--bs-navbar-padding-y, 0.5rem) + 5px);
+    box-shadow: 0 3px 10px -2px rgb(106 53 176 / 0.35);
+
+    .navbar-brand {
+      font-weight: 700;
+      letter-spacing: 0.4px;
+      text-shadow: 0 2px 0 var(--mlp-twilight-shadow), 0 0 14px rgb(255 255 255 / 0.3);
+
+      // Hvězdička z cutie marku Twilight Sparkle
+      &::after {
+        content: '✦';
+        display: inline-block;
+        margin-left: 6px;
+        color: #ffd1ea;
+        font-size: 0.8em;
+        vertical-align: super;
+        text-shadow: 0 0 8px var(--mlp-star), 0 0 2px #fff;
+        animation: mlp-twinkle 2.4s ease-in-out infinite;
+      }
+    }
+
+    .dropdown-menu {
+      border: 2px solid var(--mlp-card-border);
+    }
+  }
+
+  &[data-bs-theme="dark"] .navbar {
+    background:
+      #{$mlp-rainbow} bottom / 100% 5px no-repeat,
+      linear-gradient(90deg, #1f1650, #2f2276 60%, #3d2d8a) !important;
+  }
+
+  // ---------- Titulek dne: pilulka s duhovou linkou a jiskřičkami ----------
+  .day-navigator .title {
+    position: relative;
+    display: inline-block;
+    padding: 6px 30px 10px;
+    font-weight: 700;
+    font-size: 1.7rem;
+    color: #fff !important;
+    border-radius: 999px;
+    background:
+      #{$mlp-rainbow-soft} bottom / 100% 5px no-repeat,
+      linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-pinkie));
+    text-shadow: 0 2px 0 rgb(0 0 0 / 0.15);
+    box-shadow: 0 4px 0 var(--mlp-twilight-shadow);
+    overflow: hidden;
+
+    &::before, &::after {
+      content: '✨';
+      font-size: 0.7em;
+      margin: 0 6px;
+      vertical-align: middle;
+    }
+
+    &.text-muted {
+      background: linear-gradient(90deg, #a597bd, #c3b8d6);
+      box-shadow: 0 4px 0 #8a7ca3;
+    }
+  }
+
+  // ---------- Karty podniků ----------
+  .restaurant-card {
+    border: 3px solid var(--mlp-card-border);
+    border-radius: var(--luncher-radius-lg);
+
+    &:hover {
+      transform: translateY(-3px);
+      border-color: var(--mlp-twilight-light);
+      box-shadow: var(--luncher-shadow-lg), 0 0 0 4px rgb(240 106 166 / 0.18);
+    }
+
+    .restaurant-header {
+      position: relative;
+      background:
+        #{$mlp-rainbow} bottom / 100% 4px no-repeat,
+        linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-twilight));
+
+      &:hover {
+        background:
+          #{$mlp-rainbow} bottom / 100% 4px no-repeat,
+          linear-gradient(90deg, var(--mlp-pinkie-deep), var(--mlp-pinkie));
+      }
+
+      h3 {
+        font-weight: 700;
+        text-shadow: 0 2px 0 rgb(0 0 0 / 0.18);
+      }
+
+      small {
+        color: rgb(255 255 255 / 0.88);
+      }
+    }
+  }
+
+  .food-table tbody tr:hover > td {
+    background: #fff0f7;
+  }
+
+  &[data-bs-theme="dark"] .food-table tbody tr:hover > td {
+    background: #2e2160;
+  }
+
+  .food-price {
+    color: var(--mlp-pinkie-deep);
+    font-weight: 700;
+  }
+
+  &[data-bs-theme="dark"] .food-price {
+    color: var(--mlp-pinkie);
+  }
+
+  // ---------- Panely a tabulka voleb ----------
+  .choice-section,
+  .choices-table,
+  .pizza-section,
+  .no-votes {
+    border: 3px solid var(--mlp-card-border);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+  }
+
+  // <table> s border-collapse: collapse ignoruje border-radius — kulaté rohy jen se „separate"
+  .choices-table {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  // Sloupec s podnikem: jemná žlutá Fluttershy přecházející do růžové
+  .choices-table > tbody > tr > td:first-child {
+    background: linear-gradient(90deg, var(--mlp-fluttershy), #ffe6f2);
+    color: var(--mlp-twilight-deep);
+    font-weight: 700;
+    border-right: 3px solid var(--mlp-card-border);
+  }
+
+  &[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child {
+    background: linear-gradient(90deg, #2f2468, #241c55);
+    color: var(--mlp-twilight);
+  }
+
+  // Bootstrap karty (skupinové objednávky apod.) a seznamy — stejné zaoblení a lem jako ostatní panely
+  .card {
+    border: 3px solid var(--mlp-card-border);
+    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: 3px solid var(--mlp-card-border);
+
+      &:first-child {
+        border-radius: calc(var(--luncher-radius-lg) - 3px) calc(var(--luncher-radius-lg) - 3px) 0 0;
+      }
+    }
+
+    // Průhledná tabulka — rohy pak zaobluje karta sama (i když nesmí ořezávat obsah)
+    .table {
+      --bs-table-bg: transparent;
+      margin-bottom: 0;
+
+      // Spodní linka posledního řádku by přečnívala přes zaoblené rohy
+      > :last-child > tr:last-child > * {
+        border-bottom-width: 0;
+      }
+    }
+  }
+
+  .list-group {
+    border-radius: var(--luncher-radius);
+    overflow: hidden;
+    border: 2px solid var(--mlp-card-border);
+
+    > .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: 999px;
+    border-width: 2px;
+
+    &:focus {
+      border-color: var(--mlp-twilight);
+      box-shadow: 0 0 0 4px rgb(240 106 166 / 0.25);
+    }
+  }
+
+  // ---------- Tlačítka: kulaté „bonbony" s magickou září ----------
+  .btn {
+    border-radius: 999px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease, filter 0.2s ease;
+
+    &:active {
+      transform: translateY(3px) !important;
+      box-shadow: 0 1px 0 var(--mlp-btn-shadow, transparent) !important;
+    }
+  }
+
+  .btn-primary {
+    --mlp-btn-shadow: var(--mlp-twilight-shadow);
+    background: linear-gradient(180deg, #b07ae6, var(--mlp-twilight-deep));
+    border: none;
+    color: #fff;
+    box-shadow: 0 4px 0 var(--mlp-twilight-shadow);
+    text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
+
+    // Magická aura Twilight při najetí
+    &:hover {
+      background: linear-gradient(180deg, #bf8cf0, #7a42c4);
+      box-shadow: 0 4px 0 var(--mlp-twilight-shadow), 0 0 14px rgb(236 61 143 / 0.45);
+    }
+
+    &:disabled {
+      background: #c9bdd9;
+      box-shadow: 0 4px 0 #a99cbc;
+    }
+  }
+
+  .btn-outline-primary {
+    --mlp-btn-shadow: var(--mlp-card-border);
+    background: var(--luncher-bg-card);
+    border: 2px solid var(--mlp-twilight);
+    color: var(--luncher-primary);
+    box-shadow: 0 4px 0 var(--mlp-card-border);
+
+    &:hover {
+      background: var(--luncher-primary-light);
+      color: var(--luncher-primary);
+    }
+  }
+
+  .btn-secondary {
+    --mlp-btn-shadow: var(--luncher-border);
+    background: var(--luncher-bg-card);
+    border: 2px solid var(--luncher-border);
+    color: var(--luncher-text);
+    box-shadow: 0 4px 0 var(--luncher-border);
+  }
+
+  .btn-danger {
+    --mlp-btn-shadow: #a8264a;
+    background: linear-gradient(180deg, #ff7e9a, var(--luncher-danger));
+    border: none;
+    box-shadow: 0 4px 0 #a8264a;
+  }
+
+  .action-icon:hover {
+    background: #ffe3f0;
+    color: var(--mlp-pinkie-deep);
+  }
+
+  &[data-bs-theme="dark"] .action-icon:hover {
+    background: #3a2462;
+    color: var(--mlp-pinkie);
+  }
+
+  // ---------- Modaly ----------
+  .modal-content {
+    border: 3px solid var(--mlp-card-border);
+    border-radius: var(--luncher-radius-xl);
+    overflow: hidden;
+  }
+
+  .modal-header {
+    background:
+      #{$mlp-rainbow} bottom / 100% 5px no-repeat,
+      linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-twilight) 60%, var(--mlp-pinkie));
+    border-bottom: none;
+    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 5px);
+
+    .modal-title, .modal-title h2 {
+      color: #fff;
+      font-weight: 700;
+      text-shadow: 0 2px 0 rgb(0 0 0 / 0.18);
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+    }
+  }
+
+  .footer {
+    border-top: none;
+    background-image: #{$mlp-rainbow};
+    background-size: 100% 5px;
+    background-repeat: no-repeat;
+    background-position: top;
+  }
+}
+
+@keyframes mlp-twinkle {
+  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
+  50% { transform: scale(1.35) rotate(20deg); opacity: 0.75; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #{$mlp} .navbar .navbar-brand::after {
+    animation: none;
+  }
+}