From dc17fa0f0ff3e69e317352367b67bf73d053dd02 Mon Sep 17 00:00:00 2001
From: Martin Berka <martin.berka@radbuza.net>
Date: Tue, 13 Oct 2026 10:59:00 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20p=C5=99id=C3=A1n=C3=AD=20Bocchi=20the?=
 =?UTF-8?q?=20Rock!=20theme?=
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         |  17 +
 client/src/components/EaterBadge.tsx          |   9 +-
 client/src/components/WheelConfetti.scss      |  73 +++
 client/src/components/WheelConfetti.tsx       |  44 +-
 .../src/components/modals/SpinWheelModal.scss | 268 ++++++++++
 client/src/context/settings.tsx               |   5 +-
 client/src/games/themeIcons.ts                |   2 +
 client/src/themes/bocchi.scss                 | 466 ++++++++++++++++++
 10 files changed, 871 insertions(+), 18 deletions(-)
 create mode 100644 client/src/themes/bocchi.scss

diff --git a/client/index.html b/client/index.html
index c87f63f..0efca72 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&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&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'];
+        var styles = ['umamusume', 'mlp', 'hellgirl', 'kon', 'bocchi'];
         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 6ef0135..aabef14 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -14,6 +14,7 @@ import './themes/umamusume.scss';
 import './themes/mlp.scss';
 import './themes/hellgirl.scss';
 import './themes/kon.scss';
+import './themes/bocchi.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 36d73d5..fe3e06a 100644
--- a/client/src/components/EaterBadge.scss
+++ b/client/src/components/EaterBadge.scss
@@ -51,6 +51,23 @@
   box-shadow: 0 0 0 2px #d43f62, 0 2px 0 3px #27315f;
 }
 
+// Styl Bocchi the Rock!: emoji na žluté samolepce s černou linkou a růžovým stínem
+.eater-badge-bocchi {
+  display: inline-grid;
+  place-items: center;
+  font-size: 15px;
+  line-height: 1;
+  border-radius: 6px;
+  border-color: #1d1a22;
+  background: #ffe066;
+  box-shadow: 2px 2px 0 #e0457b;
+  transform: rotate(-4deg);
+
+  &:hover {
+    transform: rotate(0deg) scale(2);
+  }
+}
+
 // 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 f693ac3..a3213ff 100644
--- a/client/src/components/EaterBadge.tsx
+++ b/client/src/components/EaterBadge.tsx
@@ -31,11 +31,18 @@ const KON_LEVELS = [
     { minItems: 2, emoji: '☕', title: 'Úroveň Tea Time — k obědu ještě čaj a dortík' },
 ];
 
+/** Úrovně ve stylu Bocchi the Rock! — emoji na samolepce jako z flyeru live house. Seřazeno od nejvyšší úrovně. */
+const BOCCHI_LEVELS = [
+    { minItems: 3, emoji: '🌿', title: 'Úroveň Ryo — když dojdou peníze, sní i trávu u cesty' },
+    { minItems: 2, emoji: '🥭', title: 'Úroveň Bocchi — dvojitý oběd v klidu v krabici od manga' },
+];
+
 /** Úrovně podle stylu pro odznaky s emoji. */
 const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
     mlp: MLP_LEVELS,
     hellgirl: HG_LEVELS,
     kon: KON_LEVELS,
+    bocchi: BOCCHI_LEVELS,
 };
 
 type Props = {
@@ -43,7 +50,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 a K-ON!. */
+/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume, My Little Pony, Hell Girl, K-ON! a Bocchi the Rock!. */
 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 f7d50b5..2b020c0 100644
--- a/client/src/components/WheelConfetti.scss
+++ b/client/src/components/WheelConfetti.scss
@@ -400,3 +400,76 @@
     }
   }
 }
+
+// ============================================
+// Konfety ve stylu Bocchi the Rock!
+// ============================================
+.confetti-bocchi {
+  filter: drop-shadow(3px 3px 0 rgb(29 26 34 / 0.85));
+}
+
+// Samolepky z flyeru live house — černá linka a tvrdý stín
+.confetti-bocchi-badge {
+  padding: 4px 14px;
+  border-radius: 6px;
+  border: 3px solid #1d1a22;
+  color: #fff;
+  font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
+  font-size: 1.05rem;
+  white-space: nowrap;
+}
+
+// Nápis „Kessoku Band" — žlutá samolepka s růžovým stínem, při dopadu se zachvěje jako Bocchi
+.confetti-bocchi-banner {
+  position: absolute;
+  top: 38%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 40px;
+  font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
+  font-size: clamp(1.8rem, 7vw, 4rem);
+  white-space: nowrap;
+  color: #1d1a22;
+  background: #ffcf33;
+  border: 5px solid #1d1a22;
+  border-radius: 10px;
+  box-shadow: 10px 10px 0 #e0457b, 18px 18px 0 #1d1a22;
+  animation: bocchi-banner 2.4s ease both;
+}
+
+@keyframes bocchi-banner {
+  0% { transform: translate(-50%, -50%) scale(2.2) rotate(-8deg); opacity: 0; }
+  14% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; }
+  17% { transform: translate(calc(-50% - 6px), -50%) rotate(-3deg); }
+  20% { transform: translate(calc(-50% + 6px), -50%) rotate(-3deg); }
+  23% { transform: translate(calc(-50% - 3px), -50%) rotate(-3deg); }
+  26%, 80% { transform: translate(-50%, -50%) rotate(-3deg); opacity: 1; }
+  100% { transform: translate(-50%, 60%) rotate(4deg); opacity: 0; }
+}
+
+// Postava s hláškou — hranatý odznak a bublina jako z mangy s tvrdým stínem
+.confetti-bocchi-voice {
+  .confetti-mlp-avatar {
+    border-radius: 12px;
+    border: 3px solid #1d1a22;
+    background: #ffcf33;
+    box-shadow: 5px 5px 0 var(--mlp-speaker, #e0457b);
+  }
+
+  .confetti-mlp-bubble {
+    background: #fff;
+    color: #1d1a22;
+    border: 3px solid #1d1a22;
+    border-radius: 10px;
+    box-shadow: 5px 5px 0 var(--mlp-speaker, #e0457b);
+    font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
+
+    p {
+      font-weight: 800;
+    }
+
+    &::before {
+      border-right-color: #1d1a22;
+    }
+  }
+}
diff --git a/client/src/components/WheelConfetti.tsx b/client/src/components/WheelConfetti.tsx
index 4a3dd23..06ed64a 100644
--- a/client/src/components/WheelConfetti.tsx
+++ b/client/src/components/WheelConfetti.tsx
@@ -63,6 +63,30 @@ const KON_SPEAKERS = [
     { name: 'Sawako Yamanaka', emoji: '👗', color: '#27315f', quote: 'Oběd? Výborně. Mezitím vám ušiju nové kostýmy!' },
     { name: 'Ton-chan', emoji: '🐢', color: '#3c9a6b', quote: '(spokojeně mává ploutvičkou)' },
 ];
+const BOCCHI_EMOJI = ['🎸', '🥁', '🎤', '📦', '🥭', '🟨', '🟦', '✨', '🌿', '🫠', '⭐', '🔊'];
+// Hlášky z Bocchi the Rock! (Kessoku Band, Kita-aura, krabice od manga, guitarhero, live house STARRY...)
+const BOCCHI_BADGES = ['結束バンド', 'Kessoku Band!', 'Kitaaan ✨', 'guitarhero', 'A-ano…', 'Live at STARRY', 'Bocchi-chan!', 'ぼっち・ざ・ろっく!', 'Mango box', 'Rock!'];
+const BOCCHI_BADGE_COLORS = ['#e0457b', '#e8b400', '#3a63c9', '#d93a30', '#1d1a22'];
+/** Kessoku Band a jejich okolí s „hláškou" po finálním výsledku. */
+const BOCCHI_SPEAKERS = [
+    { name: 'Hitori Gotoh', emoji: '🎸', color: '#e0457b', quote: 'A-ano… t-tohle by šlo… teda, pokud to nikomu nevadí…' },
+    { name: 'Nijika Ijichi', emoji: '🥁', color: '#e8b400', quote: 'Tak jo, kapelo, jdeme jíst! Bocchi, vylez z té krabice!' },
+    { name: 'Ryo Yamada', emoji: '🌿', color: '#3a63c9', quote: 'Dobrá volba. Mimochodem… nepůjčíš mi na oběd?' },
+    { name: 'Ikuyo Kita', emoji: '✨', color: '#d93a30', quote: 'Kitaaan! Tohle se mi děsně líbí, vyfotím to na Instagram!' },
+    { name: 'Seika Ijichi', emoji: '🎛️', color: '#7a4fc0', quote: 'Najezte se pořádně. Večer v STARRY neodfláknete zkoušku.' },
+    { name: 'Futari Gotoh', emoji: '🐕', color: '#f08fb4', quote: 'Ségra zase obědvá ve skříni! Jimihen, pojď se podívat!' },
+];
+/** 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[],
+    speakers: { name: string, emoji: string, color: string, quote: string }[],
+    banner: string,
+}>> = {
+    mlp: { prefix: 'confetti-mlp', badges: MLP_BADGES, colors: MLP_BADGE_COLORS, emoji: MLP_EMOJI, speakers: MLP_SPEAKERS, banner: '🌈 Sonic Rainboom! 🌈' },
+    hellgirl: { prefix: 'confetti-hg', badges: HG_BADGES, colors: HG_BADGE_COLORS, emoji: HG_EMOJI, speakers: HG_SPEAKERS, banner: '🏮 地獄流し 🏮' },
+    kon: { prefix: 'confetti-kon', badges: KON_BADGES, colors: KON_BADGE_COLORS, emoji: KON_EMOJI, speakers: KON_SPEAKERS, banner: '🎸 放課後ティータイム 🍰' },
+    bocchi: { prefix: 'confetti-bocchi', badges: BOCCHI_BADGES, colors: BOCCHI_BADGE_COLORS, emoji: BOCCHI_EMOJI, speakers: BOCCHI_SPEAKERS, banner: '🎸 結束バンド 🎸' },
+};
 const DURATION_MS = 6400;
 
 const rand = (min: number, max: number) => min + Math.random() * (max - min);
@@ -149,12 +173,9 @@ function buildPieces(theme: WheelTheme, big: boolean, images: UmaImage[]): Piece
         }));
     }
     const count = big ? 50 : 24;
-    if (theme === 'mlp' || theme === 'hellgirl' || theme === 'kon') {
-        const [prefix, badges, colors, emoji] = theme === 'mlp'
-            ? ['confetti-mlp', MLP_BADGES, MLP_BADGE_COLORS, MLP_EMOJI]
-            : theme === 'hellgirl'
-                ? ['confetti-hg', HG_BADGES, HG_BADGE_COLORS, HG_EMOJI]
-                : ['confetti-kon', KON_BADGES, KON_BADGE_COLORS, KON_EMOJI];
+    const emojiConfetti = EMOJI_CONFETTI[theme];
+    if (emojiConfetti) {
+        const { prefix, badges, colors, emoji } = emojiConfetti;
         return Array.from({ length: count }, (_, id) => {
             const base: React.CSSProperties = {
                 ...launchStyle(pick(LAUNCHES)),
@@ -218,11 +239,10 @@ 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, Hell Girl: Ai Enma či některý z jejích služebníků,
-    // K-ON!: některá z členek Houkago Tea Time
+    // Ostatní tematické styly: hlášku pronese náhodná postava (Mane 6, Ai Enma, Houkago Tea Time, Kessoku Band...)
+    const emojiConfetti = EMOJI_CONFETTI[theme];
     const emojiSpeaker = useMemo(
-        () => big ? (theme === 'mlp' ? pick(MLP_SPEAKERS) : theme === 'hellgirl' ? pick(HG_SPEAKERS)
-            : theme === 'kon' ? pick(KON_SPEAKERS) : undefined) : undefined,
+        () => big && emojiConfetti ? pick(emojiConfetti.speakers) : undefined,
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [burstKey],
     );
@@ -232,9 +252,7 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
     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>}
-            {theme === 'hellgirl' && big && <div className="confetti-hg-banner">🏮 地獄流し 🏮</div>}
-            {theme === 'kon' && big && <div className="confetti-kon-banner">🎸 放課後ティータイム 🍰</div>}
+            {emojiConfetti && big && <div className={`${emojiConfetti.prefix}-banner`}>{emojiConfetti.banner}</div>}
             {pieces.map(p => <span key={p.id} className={p.className} style={p.style}>{p.content}</span>)}
             {speaker && (
                 <div className="confetti-uma-voice">
diff --git a/client/src/components/modals/SpinWheelModal.scss b/client/src/components/modals/SpinWheelModal.scss
index 3fb13b0..bf35113 100644
--- a/client/src/components/modals/SpinWheelModal.scss
+++ b/client/src/components/modals/SpinWheelModal.scss
@@ -1268,6 +1268,274 @@
   }
 }
 
+// ============================================
+// STYL BOCCHI THE ROCK! kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách Kessoku Band, černé linky a tvrdé stíny jako na flyeru
+// z live house STARRY, střed kola jako žlutá kostička z vlasů Bocchi.
+// ============================================
+.spin-wheel-modal.spin-theme-bocchi {
+  --bocchi-font: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
+  --bocchi-display: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
+  --bocchi-pink: #cc3570;
+  --bocchi-pink-deep: #a8245a;
+  --bocchi-ink: #1d1a22;
+  --bocchi-line: #1d1a22;
+  --bocchi-panel: #ffffff;
+  --bocchi-text: #1d1a22;
+  // Bocchi, Nijika, Ryo, Kita, Les Paul a světle růžová
+  --wheel-c0: #e0457b;
+  --wheel-c1: #e8b400;
+  --wheel-c2: #3a63c9;
+  --wheel-c3: #d93a30;
+  --wheel-c4: #2b2530;
+  --wheel-c5: #f07fa8;
+  --wheel-rim: #1d1a22;
+  --wheel-hub: #ffcf33;
+
+  font-family: var(--bocchi-font);
+
+  .modal-content {
+    border: 3px solid var(--bocchi-line);
+    border-radius: 12px;
+    overflow: hidden;
+    background:
+      radial-gradient(circle, rgb(224 69 123 / 0.12) 0 1.4px, transparent 1.9px) 0 0 / 12px 12px,
+      #fff6f9;
+    color: var(--bocchi-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(90deg, #e0457b 0 25%, #ffcf33 25% 50%, #3a63c9 50% 75%, #d93a30 75% 100%) bottom / 100% 5px no-repeat,
+      #0f0d12;
+    border-bottom: none;
+
+    h2 {
+      color: #fff;
+      font-family: var(--bocchi-display);
+      font-weight: 400;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 2px solid var(--bocchi-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--bocchi-font);
+    font-weight: 800;
+    background: #f3e7ed;
+    color: #8f8597;
+    border: 2px solid transparent;
+    border-radius: 6px;
+    padding: 4px 16px;
+
+    &.active {
+      background: #ffcf33;
+      color: var(--bocchi-ink);
+      border-color: var(--bocchi-ink);
+      box-shadow: 3px 3px 0 var(--bocchi-pink);
+    }
+
+    &.done {
+      background: var(--bocchi-ink);
+      color: #fff;
+    }
+  }
+
+  .btn {
+    font-family: var(--bocchi-font);
+    font-weight: 800;
+    border-radius: 6px;
+    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
+
+    &:active:not(:disabled) {
+      transform: translate(3px, 3px);
+      box-shadow: none;
+    }
+  }
+
+  .btn-primary {
+    background: var(--bocchi-pink);
+    border: 2px solid var(--bocchi-ink);
+    box-shadow: 3px 3px 0 var(--bocchi-ink);
+    color: #fff;
+
+    &:disabled {
+      background: #cfc6d3;
+      border-color: #8f8597;
+      box-shadow: 3px 3px 0 #8f8597;
+    }
+  }
+
+  // Tlačítko roztočení — žlutá samolepka s růžovým a černým stínem
+  .spin-button {
+    font-family: var(--bocchi-display);
+    font-weight: 400;
+    background: #ffcf33;
+    color: var(--bocchi-ink);
+    border: 3px solid var(--bocchi-ink);
+    box-shadow: 4px 4px 0 var(--bocchi-pink), 7px 7px 0 var(--bocchi-ink);
+    font-size: 1.15rem;
+    padding: 12px 36px;
+
+    &:hover:not(:disabled) {
+      background: #ffd94f;
+      color: var(--bocchi-ink);
+    }
+  }
+
+  .btn-outline-primary {
+    background: #fff;
+    border: 2px solid var(--bocchi-line);
+    color: var(--bocchi-pink);
+    box-shadow: 3px 3px 0 var(--bocchi-ink);
+
+    &:hover {
+      background: #ffe4ee;
+      color: var(--bocchi-pink-deep);
+    }
+  }
+
+  .btn-secondary {
+    background: #fff;
+    border: 2px solid var(--bocchi-line);
+    color: var(--bocchi-text);
+    box-shadow: 3px 3px 0 var(--bocchi-ink);
+  }
+
+  .spin-source {
+    background: #f3e7ed;
+
+    > .btn-primary {
+      background: var(--bocchi-pink);
+      box-shadow: none !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      box-shadow: none;
+      color: var(--bocchi-ink);
+
+      &:hover {
+        background: #fff;
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 800;
+
+    strong {
+      color: var(--bocchi-pink);
+    }
+  }
+
+  .spin-options {
+    background: var(--bocchi-panel);
+    border: 2px solid var(--bocchi-line);
+    border-radius: 10px;
+    box-shadow: 4px 4px 0 var(--bocchi-ink);
+
+    li:hover {
+      background: #fff0f5;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 2px solid var(--bocchi-line);
+    color: var(--bocchi-ink);
+  }
+
+  .spin-empty {
+    border-color: var(--bocchi-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--bocchi-pink);
+    filter: drop-shadow(2px 2px 0 var(--bocchi-ink));
+  }
+
+  .spin-seg {
+    stroke: #1d1a22;
+    stroke-width: 2.5;
+  }
+
+  .spin-seg-label {
+    font-family: var(--bocchi-font);
+    font-weight: 800;
+  }
+}
+
+// Tmavý režim — koncert v live house STARRY
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-bocchi {
+  --bocchi-pink: #ff6fa0;
+  --bocchi-pink-deep: #e0457b;
+  --bocchi-line: #5a4d66;
+  --bocchi-panel: #1d1a24;
+  --bocchi-text: #f5eff8;
+  --wheel-c4: #4a3f58;
+
+  .modal-content {
+    background:
+      radial-gradient(circle, rgb(255 111 160 / 0.10) 0 1.4px, transparent 1.9px) 0 0 / 12px 12px,
+      radial-gradient(ellipse 40% 55% at 15% -10%, rgb(255 111 160 / 0.22), transparent 70%),
+      radial-gradient(ellipse 40% 55% at 85% -10%, rgb(125 156 255 / 0.20), transparent 70%),
+      #121016;
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #282231;
+    color: #8f8499;
+  }
+
+  .spin-steps span.done {
+    background: #3a3246;
+  }
+
+  .btn-primary {
+    color: #1d1a22;
+  }
+
+  .btn-outline-primary, .btn-secondary {
+    background: #1d1a24;
+    color: #f5eff8;
+    box-shadow: 3px 3px 0 #8c2350;
+  }
+
+  .spin-source {
+    background: #282231;
+
+    > .btn-outline-primary {
+      background: transparent;
+      box-shadow: none;
+      color: #c9bfd2;
+
+      &:hover {
+        background: #1d1a24;
+        color: #fff;
+      }
+    }
+  }
+
+  .spin-options {
+    box-shadow: 4px 4px 0 #8c2350;
+  }
+
+  .spin-options-header {
+    color: #ffcf33;
+  }
+
+  .spin-options li:hover {
+    background: #2e2236;
+  }
+}
+
 // 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 3ab323e..d1a4bc5 100644
--- a/client/src/context/settings.tsx
+++ b/client/src/context/settings.tsx
@@ -12,7 +12,7 @@ const SHOW_BUTTERFLIES_KEY = 'show_butterflies';
 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';
+export type StyleTheme = 'simple' | 'umamusume' | 'mlp' | 'hellgirl' | 'kon' | 'bocchi';
 
 export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
   { value: 'simple', label: 'Jednoduchý' },
@@ -20,6 +20,7 @@ export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
   { value: 'mlp', label: 'My Little Pony' },
   { value: 'hellgirl', label: 'Hell Girl' },
   { value: 'kon', label: 'K-ON!' },
+  { value: 'bocchi', label: 'Bocchi the Rock!' },
 ];
 
 export type SettingsContextProps = {
@@ -235,7 +236,7 @@ function useProvideSettings(): SettingsContextProps {
   }, [showButterflies]);
 
   // Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý.
-  // Tematické styly (Umamusume, My Little Pony, Hell Girl, K-ON!) 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!) 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 737e3ec..df6e6be 100644
--- a/client/src/games/themeIcons.ts
+++ b/client/src/games/themeIcons.ts
@@ -13,6 +13,8 @@ const ICONS: Record<StyleTheme, Record<GameId, string>> = {
     hellgirl: { reaction: '🔥', snake: '🪢', tetris: '🏮', pong: '🪆', drawing: '📜' },
     // Klub lehké hudby: bicí Ritsu, želva Ton-chan, dortíky k čaji, kytara Gitah a notový zápis
     kon: { reaction: '🥁', snake: '🐢', tetris: '🍰', pong: '🎸', drawing: '🎼' },
+    // Kessoku Band: mikrofon Kity, kabel od kytary, krabice od manga, bicí Nijiky a sešit s texty Bocchi
+    bocchi: { reaction: '🎤', snake: '🔌', tetris: '📦', pong: '🥁', drawing: '📝' },
 };
 
 /** Styl z <html data-luncher-theme> — pro místa mimo React kontext nastavení. */
diff --git a/client/src/themes/bocchi.scss b/client/src/themes/bocchi.scss
new file mode 100644
index 0000000..a2ccce6
--- /dev/null
+++ b/client/src/themes/bocchi.scss
@@ -0,0 +1,466 @@
+// ============================================
+// STYL "BOCCHI THE ROCK!" (volitelný, výchozí je jednoduchý styl)
+// Inspirováno anime Bocchi the Rock! (ぼっち・ざ・ろっく!) a kapelou Kessoku Band (結束バンド).
+// Růžová tepláková bunda Bocchi, žlutá a modrá kostička z jejích vlasů,
+// černý Les Paul, flyery z live house STARRY — tlusté černé linky, tvrdé stíny,
+// rastr jako z kopírky a samolepky. Občas se nápis „zasekne" Bocchiinou úzkostí.
+// Tmavý režim = koncert v live house STARRY pod barevnými světly.
+// Aktivní, pokud má <html> atribut data-luncher-theme="bocchi".
+// ============================================
+
+$bocchi: 'html[data-luncher-theme="bocchi"]';
+
+// Kessoku Band: Bocchi (růžová), Nijika (žlutá), Ryo (modrá), Kita (červená)
+$bocchi-band: linear-gradient(90deg, #e0457b 0 25%, #ffcf33 25% 50%, #3a63c9 50% 75%, #d93a30 75% 100%);
+
+#{$bocchi} {
+  --bocchi-font: 'M PLUS Rounded 1c', 'Nunito', -apple-system, sans-serif;
+  --bocchi-display: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
+  --bocchi-pink: #cc3570;         // tepláková bunda Bocchi
+  --bocchi-pink-deep: #a8245a;
+  --bocchi-pink-light: #ffd6e5;
+  --bocchi-nijika: #ffcf33;       // kostička ve vlasech / Nijika
+  --bocchi-ryo: #3a63c9;          // kostička ve vlasech / Ryo
+  --bocchi-kita: #d93a30;
+  --bocchi-ink: #1d1a22;          // černý Les Paul, linky flyeru
+  --bocchi-line: var(--bocchi-ink);
+  --bocchi-hard-shadow: rgb(29 26 34 / 0.9);
+  --bocchi-halftone: rgb(224 69 123 / 0.13);
+
+  --luncher-primary: var(--bocchi-pink);
+  --luncher-primary-hover: var(--bocchi-pink-deep);
+  --luncher-primary-light: #ffe4ee;
+  --luncher-bg: #fff6f9;
+  --luncher-bg-card: #ffffff;
+  --luncher-bg-hover: #fff0f5;
+  --luncher-text: var(--bocchi-ink);
+  --luncher-text-secondary: #4a4252;
+  --luncher-text-muted: #8f8597;
+  --luncher-border: #e9d9e1;
+  --luncher-border-light: #f5e9ef;
+  --luncher-navbar-bg: var(--bocchi-ink);
+  --luncher-navbar-text: #ffffff;
+  --luncher-action-icon: var(--bocchi-pink);
+  --luncher-buyer-icon: var(--bocchi-ryo);
+  --luncher-success: #2e8a4f;
+  --luncher-warning: #d08f00;
+  --luncher-danger: var(--bocchi-kita);
+  --luncher-radius-sm: 6px;
+  --luncher-radius: 8px;
+  --luncher-radius-lg: 10px;
+  --luncher-radius-xl: 12px;
+  --luncher-shadow: 4px 4px 0 var(--bocchi-hard-shadow);
+  --luncher-shadow-lg: 6px 6px 0 var(--bocchi-pink);
+
+  &[data-bs-theme="dark"] {
+    // Live house STARRY — tma, kouř a barevná světla nad pódiem
+    --bocchi-pink: #ff6fa0;
+    --bocchi-pink-deep: #e0457b;
+    --bocchi-pink-light: #4a1f33;
+    --bocchi-ryo: #7d9cff;
+    --bocchi-kita: #ff6a5c;
+    --bocchi-line: #5a4d66;
+    --bocchi-hard-shadow: #8c2350;
+    --bocchi-halftone: rgb(255 111 160 / 0.10);
+
+    --luncher-primary: #ff7aa8;
+    --luncher-primary-hover: #ff9cbf;
+    --luncher-primary-light: #3a1a2b;
+    --luncher-bg: #121016;
+    --luncher-bg-card: #1d1a24;
+    --luncher-bg-hover: #282231;
+    --luncher-text: #f5eff8;
+    --luncher-text-secondary: #c9bfd2;
+    --luncher-text-muted: #8f8499;
+    --luncher-border: #3a3246;
+    --luncher-border-light: #2a2433;
+    --luncher-navbar-bg: #0a090c;
+    --luncher-action-icon: #ff7aa8;
+    --luncher-buyer-icon: #ffcf33;
+    --luncher-success: #6fd59a;
+    --luncher-warning: #ffcf33;
+    --luncher-danger: #ff6a5c;
+    --luncher-shadow: 4px 4px 0 var(--bocchi-hard-shadow);
+    --luncher-shadow-lg: 6px 6px 0 var(--bocchi-ryo);
+  }
+
+  body {
+    font-family: var(--bocchi-font);
+    background-color: var(--luncher-bg);
+    // Rastr jako z kopírovaného flyeru, nahoře růžový nádech
+    background-image:
+      radial-gradient(circle, var(--bocchi-halftone) 0 1.4px, transparent 1.9px),
+      linear-gradient(180deg, #ffe0ec 0, var(--luncher-bg) 360px);
+    background-size: 12px 12px, 100% 100%;
+    background-attachment: fixed;
+  }
+
+  &[data-bs-theme="dark"] body {
+    // Růžové a modré světlo z rampy nad pódiem
+    background-image:
+      radial-gradient(circle, var(--bocchi-halftone) 0 1.4px, transparent 1.9px),
+      radial-gradient(ellipse 40% 55% at 15% -10%, rgb(255 111 160 / 0.22), transparent 70%),
+      radial-gradient(ellipse 40% 55% at 85% -10%, rgb(125 156 255 / 0.20), transparent 70%),
+      linear-gradient(180deg, #1c1622 0, var(--luncher-bg) 420px);
+    background-size: 12px 12px, 100% 100%, 100% 100%, 100% 100%;
+  }
+
+  .app-container {
+    background: transparent;
+  }
+
+  h1, h2, h3, h4, .navbar-brand {
+    font-family: var(--bocchi-display);
+    font-weight: 400;
+  }
+
+  .btn {
+    font-family: var(--bocchi-font);
+  }
+
+  // ---------- Navbar: černá jako Les Paul, pod ním pruh Kessoku Band ----------
+  .navbar {
+    background:
+      #{$bocchi-band} bottom / 100% 5px no-repeat,
+      var(--luncher-navbar-bg) !important;
+    padding-bottom: calc(var(--bs-navbar-padding-y, 0.5rem) + 5px);
+
+    .navbar-brand {
+      letter-spacing: 0.5px;
+      animation: bocchi-glitch 7s steps(1, end) infinite;
+
+      // Žlutá a modrá kostička z vlasů Bocchi
+      &::after {
+        content: '';
+        display: inline-block;
+        width: 0.42em;
+        height: 0.42em;
+        margin-left: 8px;
+        margin-right: 0.6em;
+        vertical-align: super;
+        background: var(--bocchi-nijika);
+        box-shadow: 0.55em 0.18em 0 var(--bocchi-ryo);
+        transform: rotate(-12deg);
+      }
+    }
+
+    .dropdown-menu {
+      border: 2px solid var(--bocchi-line);
+      border-radius: var(--luncher-radius);
+      box-shadow: var(--luncher-shadow);
+    }
+  }
+
+  // ---------- Titulek dne: žlutá samolepka z flyeru ----------
+  .day-navigator .title {
+    position: relative;
+    display: inline-block;
+    padding: 6px 24px 8px;
+    font-family: var(--bocchi-display);
+    font-weight: 400;
+    font-size: 1.6rem;
+    color: var(--bocchi-ink) !important;
+    background: var(--bocchi-nijika);
+    border: 3px solid var(--bocchi-ink);
+    border-radius: var(--luncher-radius-sm);
+    box-shadow: 5px 5px 0 var(--bocchi-pink);
+    transform: rotate(1.2deg);
+
+    &::before, &::after {
+      content: '★';
+      font-size: 0.7em;
+      margin: 0 10px;
+      vertical-align: middle;
+      color: var(--bocchi-pink-deep);
+    }
+
+    &.text-muted {
+      background: #e6e0e8;
+      color: #6b6273 !important;
+      box-shadow: 5px 5px 0 #b9afbf;
+
+      &::before, &::after {
+        color: #8f8597;
+      }
+    }
+  }
+
+  // ---------- Karty podniků: flyery s tvrdým stínem ----------
+  .restaurant-card {
+    border: 2px solid var(--bocchi-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+
+    &:hover {
+      transform: translate(-2px, -2px);
+      border-color: var(--bocchi-line);
+      box-shadow: var(--luncher-shadow-lg);
+    }
+
+    .restaurant-header {
+      position: relative;
+      background:
+        #{$bocchi-band} bottom / 100% 4px no-repeat,
+        var(--bocchi-ink);
+
+      &:hover {
+        background:
+          #{$bocchi-band} bottom / 100% 4px no-repeat,
+          linear-gradient(90deg, var(--bocchi-pink-deep), var(--bocchi-pink));
+      }
+
+      h3 {
+        letter-spacing: 0.3px;
+      }
+
+      small {
+        color: rgb(255 255 255 / 0.85);
+      }
+    }
+  }
+
+  &[data-bs-theme="dark"] .restaurant-card .restaurant-header:not(:hover) {
+    background:
+      #{$bocchi-band} bottom / 100% 4px no-repeat,
+      #0a090c;
+  }
+
+  .food-table tbody tr:hover > td {
+    background: #fff0f5;
+  }
+
+  &[data-bs-theme="dark"] .food-table tbody tr:hover > td {
+    background: #2e2236;
+  }
+
+  .food-price {
+    color: var(--bocchi-pink);
+    font-weight: 800;
+  }
+
+  // ---------- Panely a tabulka voleb ----------
+  .choice-section,
+  .choices-table,
+  .pizza-section,
+  .no-votes {
+    border: 2px solid var(--bocchi-line);
+    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: světle žlutý jako Nijika, oddělený černou linkou
+  .choices-table > tbody > tr > td:first-child {
+    background: #fff4c7;
+    color: var(--bocchi-ink);
+    font-weight: 800;
+    border-right: 2px solid var(--bocchi-line);
+  }
+
+  &[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child {
+    background: #2a2416;
+    color: var(--bocchi-nijika);
+  }
+
+  // Bootstrap karty (skupinové objednávky apod.) a seznamy — stejné linky a stíny jako ostatní panely
+  .card {
+    border: 2px solid var(--bocchi-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(--bocchi-line);
+      font-weight: 800;
+
+      &:first-child {
+        border-radius: calc(var(--luncher-radius-lg) - 2px) calc(var(--luncher-radius-lg) - 2px) 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(--bocchi-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: 2px solid var(--bocchi-line);
+
+    &:focus {
+      border-color: var(--bocchi-pink);
+      box-shadow: 3px 3px 0 var(--bocchi-pink);
+    }
+  }
+
+  // ---------- Tlačítka: samolepky s černou linkou, po stisku „zaklapnou" do stínu ----------
+  .btn {
+    border-radius: var(--luncher-radius-sm);
+    font-weight: 800;
+    letter-spacing: 0.2px;
+    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
+
+    &:active {
+      transform: translate(3px, 3px) !important;
+      box-shadow: none !important;
+    }
+  }
+
+  .btn-primary {
+    background: var(--bocchi-pink);
+    border: 2px solid var(--bocchi-ink);
+    color: #fff;
+    box-shadow: 3px 3px 0 var(--bocchi-ink);
+
+    &:hover {
+      background: var(--bocchi-pink-deep);
+      border-color: var(--bocchi-ink);
+      box-shadow: 3px 3px 0 var(--bocchi-ink), 0 0 0 3px rgb(255 207 51 / 0.6);
+    }
+
+    &:disabled {
+      background: #cfc6d3;
+      border-color: #8f8597;
+      box-shadow: 3px 3px 0 #8f8597;
+    }
+  }
+
+  &[data-bs-theme="dark"] .btn-primary {
+    color: #1d1a22;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .btn-outline-primary {
+    background: var(--luncher-bg-card);
+    border: 2px solid var(--bocchi-line);
+    color: var(--luncher-primary);
+    box-shadow: 3px 3px 0 var(--bocchi-hard-shadow);
+
+    &:hover {
+      background: var(--luncher-primary-light);
+      border-color: var(--bocchi-line);
+      color: var(--luncher-primary);
+    }
+  }
+
+  .btn-secondary {
+    background: var(--luncher-bg-card);
+    border: 2px solid var(--bocchi-line);
+    color: var(--luncher-text);
+    box-shadow: 3px 3px 0 var(--bocchi-hard-shadow);
+
+    &:hover {
+      background: var(--luncher-bg-hover);
+      border-color: var(--bocchi-line);
+      color: var(--luncher-text);
+    }
+  }
+
+  .btn-danger {
+    background: var(--bocchi-kita);
+    border: 2px solid var(--bocchi-ink);
+    box-shadow: 3px 3px 0 var(--bocchi-ink);
+  }
+
+  .action-icon:hover {
+    background: var(--luncher-primary-light);
+    color: var(--bocchi-pink);
+  }
+
+  // ---------- Modaly ----------
+  .modal-content {
+    border: 3px solid var(--bocchi-line);
+    border-radius: var(--luncher-radius-xl);
+    box-shadow: 8px 8px 0 var(--bocchi-pink);
+    overflow: hidden;
+  }
+
+  .modal-header {
+    background:
+      #{$bocchi-band} bottom / 100% 5px no-repeat,
+      #0f0d12;
+    border-bottom: none;
+    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 5px);
+
+    .modal-title, .modal-title h2 {
+      color: #fff;
+      font-family: var(--bocchi-display);
+      font-weight: 400;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+    }
+  }
+
+  .footer {
+    border-top: none;
+    background-image: #{$bocchi-band};
+    background-size: 100% 4px;
+    background-repeat: no-repeat;
+    background-position: top;
+  }
+}
+
+// Bocchiina úzkost: nápis se na okamžik „rozpadne" do růžového a modrého posunu
+@keyframes bocchi-glitch {
+  0%, 92%, 100% { text-shadow: none; transform: none; }
+  93% { text-shadow: -3px 0 #ff6fa0, 3px 0 #7d9cff; transform: translateX(1px) skewX(-6deg); }
+  94% { text-shadow: 2px 0 #ff6fa0, -2px 0 #7d9cff; transform: translateX(-2px); }
+  95% { text-shadow: -1px 0 #ff6fa0, 1px 0 #7d9cff; transform: translateX(1px) skewX(4deg); }
+  96% { text-shadow: none; transform: none; }
+}
+
+@media (max-width: 575.98px) {
+  #{$bocchi} .day-navigator .title {
+    font-size: 1.3rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #{$bocchi} .navbar .navbar-brand {
+    animation: none;
+  }
+}