feat: přidání vzhledu Hell Girl

client/src/components/EaterBadge.scss

@@ -29,6 +29,17 @@
   box-shadow: 0 0 0 2px #8e4fd1;
 }
 
+// Styl Hell Girl: emoji v černém odznaku s rudým lemem (rudá nit)
+.eater-badge-hellgirl {
+  display: inline-grid;
+  place-items: center;
+  font-size: 16px;
+  line-height: 1;
+  border-color: #1c1012;
+  background: radial-gradient(circle at 50% 60%, #3a0d16, #12070a);
+  box-shadow: 0 0 0 2px #c8102e, 0 0 6px rgb(200 16 46 / 0.5);
+}
+
 // Odznak a jméno drží na jednom řádku (úzký sloupec „Člen" na stránce objednávek)
 .user-info:has(.eater-badge) {
   display: inline-flex;

client/src/components/EaterBadge.tsx

@@ -19,12 +19,18 @@ const MLP_LEVELS = [
     { minItems: 2, emoji: '🍎', title: 'Úroveň Applejack — poctivý apetit' },
 ];
 
+/** Úrovně ve stylu Hell Girl — emoji v černém odznaku s rudým lemem. Seřazeno od nejvyšší úrovně. */
+const HG_LEVELS = [
+    { minItems: 3, emoji: '🔥', title: 'Úroveň Wanyūdō — hlad jako pekelný oheň' },
+    { minItems: 2, emoji: '🥀', title: 'Úroveň Ai Enma — tichý, ale nenasytný apetit' },
+];
+
 type Props = {
     /** Počet jídel/položek, které si strávník vybral či objednal */
     items: number,
 };
 
-/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume a My Little Pony. */
+/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume, My Little Pony a Hell Girl. */
 export default function EaterBadge({ items }: Readonly<Props>) {
     const styleTheme = useSettings()?.styleTheme;
     const isUma = styleTheme === 'umamusume';
@@ -34,12 +40,12 @@ export default function EaterBadge({ items }: Readonly<Props>) {
         if (isUma) loadUmaCharacters().then(setCharacters);
     }, [isUma]);
 
-    if (styleTheme === 'mlp') {
-        const mlpLevel = MLP_LEVELS.find(l => items >= l.minItems);
-        if (!mlpLevel) return null;
+    if (styleTheme === 'mlp' || styleTheme === 'hellgirl') {
+        const emojiLevel = (styleTheme === 'mlp' ? MLP_LEVELS : HG_LEVELS).find(l => items >= l.minItems);
+        if (!emojiLevel) 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 placement="top" overlay={<Tooltip>{emojiLevel.title} ({items} jídla)</Tooltip>}>
+                <span className={`eater-badge eater-badge-${styleTheme}`} role="img" aria-label={emojiLevel.title}>{emojiLevel.emoji}</span>
             </OverlayTrigger>
         );
     }

client/src/components/WheelConfetti.scss

@@ -260,3 +260,69 @@
     border-right: 10px solid var(--mlp-speaker, #8e4fd1);
   }
 }
+
+// ============================================
+// Konfety ve stylu Hell Girl
+// ============================================
+.confetti-hg {
+  filter: drop-shadow(0 0 6px rgb(200 16 46 / 0.55)) drop-shadow(0 3px 3px rgb(0 0 0 / 0.3));
+}
+
+.confetti-hg-badge {
+  padding: 4px 14px;
+  border: 1px solid #c8102e;
+  outline: 1px solid rgb(200 16 46 / 0.4);
+  outline-offset: 2px;
+  color: #fff4ee;
+  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
+  font-weight: 800;
+  font-size: 1.1rem;
+  letter-spacing: 1px;
+  white-space: nowrap;
+  text-shadow: 0 0 8px rgb(232 52 79 / 0.7);
+}
+
+// Nápis „poslání do pekla" — černá deska s rudým lemem, vynoří se z mlhy
+.confetti-hg-banner {
+  position: absolute;
+  top: 38%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 14px 48px;
+  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
+  font-weight: 800;
+  font-size: clamp(2rem, 7vw, 4rem);
+  letter-spacing: 0.3em;
+  white-space: nowrap;
+  color: #fff4ee;
+  background: linear-gradient(90deg, transparent, #12070a 15%, #12070a 85%, transparent);
+  border-top: 2px solid #c8102e;
+  border-bottom: 2px solid #c8102e;
+  text-shadow: 0 0 18px rgb(232 52 79 / 0.9), 0 0 4px #c8102e;
+  animation: hg-banner 2.6s ease both;
+}
+
+@keyframes hg-banner {
+  0% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; filter: blur(12px); }
+  25% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
+  75% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
+  100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0; filter: blur(8px); }
+}
+
+// Postava s hláškou — tmavý odznak s rudou září a bublina jako svitek
+.confetti-hellgirl-voice {
+  .confetti-mlp-avatar {
+    border-color: #12070a;
+    background: radial-gradient(circle at 50% 60%, #3a0d16, #12070a);
+    box-shadow: 0 0 0 3px var(--mlp-speaker, #c8102e), 0 0 18px rgb(200 16 46 / 0.6);
+  }
+
+  .confetti-mlp-bubble {
+    background: #170c0f;
+    color: #f3e6e2;
+    border: 1px solid var(--mlp-speaker, #c8102e);
+    border-radius: 3px;
+    box-shadow: 0 0 16px rgb(0 0 0 / 0.6), 0 0 10px rgb(200 16 46 / 0.3);
+    font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
+  }
+}

client/src/components/WheelConfetti.tsx

@@ -35,6 +35,19 @@ const MLP_SPEAKERS = [
     { 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 HG_EMOJI = ['🥀', '🏮', '⛩️', '🔥', '🕯️', '🌑', '🦋', '👁️', '🕸️', '🌸'];
+// Hlášky z Jigoku Shōjo (Pekelná korespondence, „Ippen, shinde miru?", poslání do pekla...)
+const HG_BADGES = ['いっぺん、死んでみる？', '地獄通信', '地獄流し', 'Ippen… shinde miru?', 'Pomsta vykonána', '0:00', 'Uvaž to dobře…', 'Smlouva uzavřena'];
+const HG_BADGE_COLORS = ['#12070a', '#7a0c1f', '#2e0d24'];
+/** Ai Enma a její služebníci s „hláškou" po finálním výsledku — místo obrázků emoji. */
+const HG_SPEAKERS = [
+    { name: 'Ai Enma', emoji: '🥀', color: '#c8102e', quote: 'Smlouva je uzavřena. Tenhle oběd tě bude provázet až na věčnost.' },
+    { name: 'Ichimoku Ren', emoji: '👁️', color: '#6b5a8a', quote: 'Prohlédl jsem svým okem všechny podniky. Tenhle jediný obstál.' },
+    { name: 'Hone Onna', emoji: '💀', color: '#b8862b', quote: 'Dobré až na kost, zlato. Mně z toho stejně nic nezůstane.' },
+    { name: 'Wanyūdō', emoji: '🔥', color: '#d9582b', quote: 'Já jsem kolo. Kolo rozhodlo. Víc k tomu nemám.' },
+    { name: 'Kikuri', emoji: '🎀', color: '#d4407a', quote: 'Hihi! Tohle bych do pekla poslala jako první!' },
+    { name: 'Babička', emoji: '🕸️', color: '#8c7672', quote: 'Ai, oběd je na stole… jako každý den už čtyři sta let.' },
+];
 const DURATION_MS = 6400;
 
 const rand = (min: number, max: number) => min + Math.random() * (max - min);
@@ -121,7 +134,10 @@ function buildPieces(theme: WheelTheme, big: boolean, images: UmaImage[]): Piece
         }));
     }
     const count = big ? 50 : 24;
-    if (theme === 'mlp') {
+    if (theme === 'mlp' || theme === 'hellgirl') {
+        const [prefix, badges, colors, emoji] = theme === 'mlp'
+            ? ['confetti-mlp', MLP_BADGES, MLP_BADGE_COLORS, MLP_EMOJI]
+            : ['confetti-hg', HG_BADGES, HG_BADGE_COLORS, HG_EMOJI];
         return Array.from({ length: count }, (_, id) => {
             const base: React.CSSProperties = {
                 ...launchStyle(pick(LAUNCHES)),
@@ -129,10 +145,10 @@ function buildPieces(theme: WheelTheme, big: boolean, images: UmaImage[]): Piece
                 ['--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: `${prefix} ${prefix}-badge`, content: pick(badges),
+                    style: { ...base, background: pick(colors) } };
             }
-            return { id, className: 'confetti-mlp confetti-uma-emoji', style: { ...base, fontSize: `${rand(28, 52)}px` }, content: pick(MLP_EMOJI) };
+            return { id, className: `${prefix} confetti-uma-emoji`, style: { ...base, fontSize: `${rand(28, 52)}px` }, content: pick(emoji) };
         });
     }
     return Array.from({ length: count }, (_, id) => {
@@ -185,9 +201,9 @@ 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,
+    // MLP: hlášku pronese náhodná postava z Mane 6, Hell Girl: Ai Enma či některý z jejích služebníků
+    const emojiSpeaker = useMemo(
+        () => big ? (theme === 'mlp' ? pick(MLP_SPEAKERS) : theme === 'hellgirl' ? pick(HG_SPEAKERS) : undefined) : undefined,
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [burstKey],
     );
@@ -198,6 +214,7 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
         <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>}
             {pieces.map(p => <span key={p.id} className={p.className} style={p.style}>{p.content}</span>)}
             {speaker && (
                 <div className="confetti-uma-voice">
@@ -208,12 +225,12 @@ 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>
+            {emojiSpeaker && (
+                <div className={`confetti-uma-voice confetti-${theme}-voice`} style={{ ['--mlp-speaker' as any]: emojiSpeaker.color }}>
+                    <span className="confetti-mlp-avatar">{emojiSpeaker.emoji}</span>
                     <div className="confetti-mlp-bubble">
-                        <p>„{mlpSpeaker.quote}"</p>
-                        <small>— {mlpSpeaker.name}</small>
+                        <p>„{emojiSpeaker.quote}"</p>
+                        <small>— {emojiSpeaker.name}</small>
                     </div>
                 </div>
             )}

client/src/components/modals/SpinWheelModal.scss

@@ -774,6 +774,245 @@
   }
 }
 
+// ============================================
+// STYL HELL GIRL kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách soumraku a pekla, rudá nit jako lem,
+// černá tuš, papír washi a ostrá tlačítka s písmem mincho.
+// ============================================
+.spin-wheel-modal.spin-theme-hellgirl {
+  --hg-font: 'Shippori Mincho', 'Noto Serif JP', 'Georgia', serif;
+  --hg-crimson: #a3122a;
+  --hg-crimson-deep: #7a0c1f;
+  --hg-crimson-shadow: #4a0612;
+  --hg-panel: #fffbf5;
+  --hg-border: #dccbbb;
+  --hg-text: #1c1012;
+  --wheel-c0: #a3122a;
+  --wheel-c1: #1f1416;
+  --wheel-c2: #c8452a;
+  --wheel-c3: #4b1a4f;
+  --wheel-c4: #6e0b1a;
+  --wheel-c5: #9a6b1f;
+  --wheel-rim: #c8102e;
+  --wheel-hub: #12070a;
+
+  font-family: var(--hg-font);
+
+  .modal-content {
+    border: 1px solid var(--hg-crimson);
+    border-radius: 6px;
+    overflow: hidden;
+    background: linear-gradient(180deg, #f3d9cc, #f4ece0 220px);
+    color: var(--hg-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(90deg, transparent, #c8102e 12%, #e8344f 50%, #c8102e 88%, transparent) bottom / 100% 2px no-repeat,
+      linear-gradient(90deg, #1e0a1c, #4a0f2a 35%, #8e0f24 70%, #c8452a);
+    border-bottom: none;
+
+    h2 {
+      color: #fff4ee;
+      font-family: var(--hg-font);
+      font-weight: 800;
+      letter-spacing: 0.5px;
+      text-shadow: 0 0 10px rgb(232 52 79 / 0.5);
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 1px solid var(--hg-border);
+  }
+
+  .spin-steps span {
+    font-family: var(--hg-font);
+    background: #eadfd2;
+    color: #8c7672;
+    border-radius: 2px;
+    padding: 4px 16px;
+
+    &.active {
+      background: linear-gradient(90deg, #1c0a10, var(--hg-crimson-deep));
+      color: #fff4ee;
+    }
+
+    &.done {
+      background: var(--hg-crimson);
+      color: #fff4ee;
+    }
+  }
+
+  .btn {
+    font-family: var(--hg-font);
+    font-weight: 700;
+    border-radius: 2px;
+    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
+
+    &:active:not(:disabled) {
+      transform: translateY(1px);
+    }
+  }
+
+  .btn-primary {
+    background: linear-gradient(180deg, #c01733, var(--hg-crimson-deep));
+    border: 1px solid var(--hg-crimson-shadow);
+    color: #fff4ee;
+    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.12);
+
+    &:disabled {
+      background: #b9a3a0;
+      border-color: #9c8582;
+      box-shadow: none;
+    }
+  }
+
+  // Tlačítko roztočení — černá deska s rudou září
+  .spin-button {
+    background: linear-gradient(180deg, #2a1216, #12070a);
+    border: 1px solid #c8102e;
+    box-shadow: 0 0 0 3px rgb(200 16 46 / 0.25), 0 0 18px rgb(200 16 46 / 0.45);
+    letter-spacing: 1px;
+    font-size: 1.15rem;
+    padding: 12px 36px;
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(180deg, #3a1219, #1c0a10);
+      box-shadow: 0 0 0 3px rgb(200 16 46 / 0.4), 0 0 24px rgb(200 16 46 / 0.65);
+    }
+  }
+
+  .btn-outline-primary {
+    background: transparent;
+    border: 1px solid var(--hg-crimson);
+    color: var(--hg-crimson);
+
+    &:hover {
+      background: var(--hg-crimson);
+      color: #fff4ee;
+    }
+  }
+
+  .btn-secondary {
+    background: var(--hg-panel);
+    border: 1px solid var(--hg-border);
+    color: var(--hg-text);
+  }
+
+  .spin-source {
+    background: #eadfd2;
+
+    > .btn-primary {
+      background: linear-gradient(180deg, #c01733, var(--hg-crimson-deep));
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--hg-crimson-deep);
+
+      &:hover {
+        background: var(--hg-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 700;
+
+    strong {
+      color: var(--hg-crimson);
+    }
+  }
+
+  .spin-options {
+    background: var(--hg-panel);
+    border: 1px solid var(--hg-border);
+    border-top: 3px solid var(--hg-crimson);
+    border-radius: 3px;
+
+    li:hover {
+      background: #f8e6e2;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 1px solid var(--hg-border);
+    color: var(--hg-crimson-deep);
+  }
+
+  .spin-empty {
+    border-color: var(--hg-border);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: #c8102e;
+    filter: drop-shadow(0 0 4px rgb(200 16 46 / 0.7));
+  }
+
+  .spin-wheel-rim {
+    filter: drop-shadow(0 0 6px rgb(200 16 46 / 0.6));
+  }
+
+  .spin-seg {
+    stroke: #12070a;
+    stroke-width: 2;
+  }
+
+  .spin-seg-label {
+    font-family: var(--hg-font);
+    font-weight: 700;
+  }
+}
+
+// Tmavý režim — půlnoc Pekelné korespondence
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-hellgirl {
+  --hg-crimson: #e0334f;
+  --hg-crimson-deep: #b81c38;
+  --hg-panel: #170c0f;
+  --hg-border: #3d1c22;
+  --hg-text: #f3e6e2;
+  --wheel-c1: #2e1a1e;
+
+  .modal-content {
+    background:
+      radial-gradient(ellipse 120% 45% at 50% 115%, rgb(140 12 36 / 0.35), transparent 70%),
+      linear-gradient(180deg, #1c0a12, #0c0608 260px);
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #221216;
+    color: #8a6c6a;
+  }
+
+  .btn-outline-primary, .btn-secondary {
+    background: #170c0f;
+    color: #f3e6e2;
+  }
+
+  .spin-source {
+    background: #221216;
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: #c9aeaa;
+
+      &:hover {
+        background: #170c0f;
+        color: #fff;
+      }
+    }
+  }
+
+  .spin-options li:hover {
+    background: #2a1218;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;