feat: nový vzhled Sumikko Gurashi

2026-10-25 21:12:09 +01:00
1 parent 46d8dac45b
commit 3ea4addc61
@@ -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&family=Cormorant+Garamond:wght@600;700&family=Baloo+2:wght@600;800&family=Metal+Mania&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&family=Baloo+2:wght@600;800&family=Metal+Mania&family=Klee+One:wght@600&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', 'frieren', 'mlpg5', 'aggretsuko'];
+        var styles = ['umamusume', 'mlp', 'hellgirl', 'kon', 'bocchi', 'evangelion', 'yurucamp', 'spyfamily', 'apothecary', 'frieren', 'mlpg5', 'aggretsuko', 'sumikko'];
        document.documentElement.setAttribute('data-luncher-theme', styles.indexOf(style) >= 0 ? style : 'simple');
      } catch (e) {
        // Fallback pokud localStorage není dostupný
@@ -22,6 +22,7 @@ import './themes/apothecary.scss';
 import './themes/frieren.scss';
 import './themes/mlpg5.scss';
 import './themes/aggretsuko.scss';
+import './themes/sumikko.scss';
 import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
 import { useSettings } from './context/settings';
 import Footer from './components/Footer';
@@ -151,6 +151,19 @@
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c8102e;
 }

+// Styl Sumikko Gurashi: emoji na krémovém kolečku s hnědou čárkovanou linkou
+.eater-badge-sumikko {
+  display: inline-grid;
+  place-items: center;
+  font-size: 15px;
+  line-height: 1;
+  border-color: #fffdf8;
+  background: radial-gradient(circle at 40% 35%, #fffdf8, #f5e7d4);
+  box-shadow: 0 0 0 2px #8b5e3c;
+  outline: 1px dashed rgb(139 94 60 / 0.5);
+  outline-offset: -5px;
+}
+
 // Odznak a jméno drží na jednom řádku (úzký sloupec „Člen" na stránce objednávek)
 .user-info:has(.eater-badge) {
  display: inline-flex;
@@ -79,6 +79,12 @@ const AGG_LEVELS = [
    { minItems: 2, emoji: '🍙', title: 'Úroveň Retsuko — po ránu se šéfem k obědu ještě onigiri na uklidnění' },
 ];

+/** Úrovně ve stylu Sumikko Gurashi — emoji na krémovém kolečku s hnědou čárkovanou linkou. Seřazeno od nejvyšší úrovně. */
+const SK_LEVELS = [
+    { minItems: 3, emoji: '🐷', title: 'Úroveň tonkatsu — 99 % tuku, 1 % masa, a stejně si ještě přidá' },
+    { minItems: 2, emoji: '🥒', title: 'Úroveň Penguin? — k obědu ještě okurka, aby se cítil jako kappa' },
+];
+
 /** Úrovně podle stylu pro odznaky s emoji. */
 const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
    mlp: MLP_LEVELS,
@@ -92,6 +98,7 @@ const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
    frieren: FR_LEVELS,
    mlpg5: G5_LEVELS,
    aggretsuko: AGG_LEVELS,
+    sumikko: SK_LEVELS,
 };

 type Props = {
@@ -99,7 +106,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, Apothecary Diaries, Frieren, My Little Pony G5 a Aggretsuko. */
+/** 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, Frieren, My Little Pony G5, Aggretsuko a Sumikko Gurashi. */
 export default function EaterBadge({ items }: Readonly<Props>) {
    const styleTheme = useSettings()?.styleTheme;
    const isUma = styleTheme === 'umamusume';
@@ -1040,3 +1040,79 @@
    }
  }
 }
+
+// ============================================
+// Konfety ve stylu Sumikko Gurashi
+// ============================================
+.confetti-sk {
+  filter: drop-shadow(0 3px 2px rgb(139 94 60 / 0.25));
+}
+
+// Štítky jako nášivky — měkké, s čárkovaným prošitím
+.confetti-sk-badge {
+  padding: 4px 16px;
+  border-radius: 14px;
+  color: #fff;
+  outline: 1.5px dashed rgb(255 255 255 / 0.8);
+  outline-offset: -5px;
+  font-family: 'Klee One', 'Zen Maru Gothic', sans-serif;
+  font-weight: 600;
+  font-size: 1.15rem;
+  white-space: nowrap;
+  text-shadow: 0 1px 0 rgb(90 70 54 / 0.35);
+}
+
+// Nápis „すみっコぐらし" — krémový lísteček s hnědou linkou, poskakuje jako postavičky
+.confetti-sk-banner {
+  position: absolute;
+  top: 38%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 44px 14px;
+  font-family: 'Klee One', 'Zen Maru Gothic', sans-serif;
+  font-weight: 600;
+  font-size: clamp(1.8rem, 6.5vw, 3.8rem);
+  white-space: nowrap;
+  color: #5a4636;
+  background: #fffdf8;
+  border: 3px solid #8b5e3c;
+  border-radius: 24px;
+  outline: 2px dashed rgb(139 94 60 / 0.35);
+  outline-offset: -10px;
+  box-shadow: 0 6px 0 rgb(139 94 60 / 0.2), 0 16px 30px rgb(0 0 0 / 0.2);
+  animation: sk-banner 2.6s ease both;
+}
+
+@keyframes sk-banner {
+  0% { transform: translate(-50%, 20%) scale(0.6); opacity: 0; }
+  15% { transform: translate(-50%, -58%) scale(1.02); opacity: 1; }
+  24% { transform: translate(-50%, -50%) scale(1, 0.94); }
+  32% { transform: translate(-50%, -54%) scale(1); }
+  40%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+  100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
+}
+
+// Postavička s hláškou — krémové kolečko s prošitím a bublina jako lísteček
+.confetti-sumikko-voice {
+  .confetti-mlp-avatar {
+    border: 3px solid #fffdf8;
+    background: radial-gradient(circle at 40% 35%, #fffdf8, #f5e7d4);
+    box-shadow: 0 0 0 3px var(--mlp-speaker, #8b5e3c), 0 4px 10px rgb(0 0 0 / 0.25);
+    outline: 1.5px dashed rgb(139 94 60 / 0.45);
+    outline-offset: -10px;
+  }
+
+  .confetti-mlp-bubble {
+    background: #fffdf8;
+    color: #5a4636;
+    border: 2px solid var(--mlp-speaker, #8b5e3c);
+    border-radius: 18px;
+    box-shadow: 0 4px 0 rgb(139 94 60 / 0.2);
+    font-family: 'Klee One', 'Zen Maru Gothic', sans-serif;
+
+    p {
+      font-weight: 600;
+      font-size: 1.05rem;
+    }
+  }
+}
@@ -181,6 +181,21 @@ const AGG_SPEAKERS = [
    { name: 'Tsunoda', emoji: '🦌', color: '#e8a0b8', quote: 'Jééé, to je tak roztomilý podnik! Šéfe, pojďte taky~' },
    { name: 'Kabae', emoji: '🦛', color: '#9ab0c8', quote: 'Prý tam vaří skvěle — a taky jsem o nich slyšela pár drbů…' },
 ];
+const SK_EMOJI = ['🐧', '🐻‍❄️', '🐱', '🦎', '🍤', '🥒', '🍵', '🧋', '🌱', '🍄', '⛰️', '🐌', '🧺', '☁️'];
+// Hlášky ze Sumikko Gurashi (kouty, tonkatsu, ocásek krevety, Penguin?, tapioka...)
+const SK_BADGES = ['すみっコぐらし', 'Do kouta!', 'Tonkatsu ♡', 'Ebifurai no shippo', 'Klid v koutě', 'Brrr, zima…', 'Okurka!', 'Tapioka', 'Penguin?', 'Rohový stoleček'];
+const SK_BADGE_COLORS = ['#8fbf7a', '#d9a066', '#7fb3d0', '#e8a0b8', '#a8988a', '#c9a07a'];
+/** Postavičky z koutků s „hláškou" po finálním výsledku. */
+const SK_SPEAKERS = [
+    { name: 'Shirokuma', emoji: '🐻‍❄️', color: '#8fa8bf', quote: 'Brrr… vezmu si deku a horký čaj. A ten nejteplejší kout.' },
+    { name: 'Penguin?', emoji: '🐧', color: '#8fbf7a', quote: 'Nejsem si jistý, jestli jsem tučňák… ale okurku k tomu si dám určitě.' },
+    { name: 'Tonkatsu', emoji: '🐷', color: '#d9a066', quote: 'Jsem jen kraj řízku, 99 % tuku… snad mě tam na talíři nenechají.' },
+    { name: 'Neko', emoji: '🐱', color: '#c9a88a', quote: 'Jé, to vypadá dobře… ale hlídám si postavu. Tak jen malou porci.' },
+    { name: 'Tokage', emoji: '🦎', color: '#7fb3d0', quote: 'Psst, já jsem vlastně dinosaurus. Ale oběd si dám jako ještěrka.' },
+    { name: 'Ebifurai no shippo', emoji: '🍤', color: '#e8a86a', quote: 'S tonkatsu jsme nejlepší kamarádi — zbytky drží spolu!' },
+    { name: 'Zassou', emoji: '🌱', color: '#9cc06f', quote: 'Jednou ze mě bude krásná kytice. Do té doby si dám oběd.' },
+    { name: 'Tapioka', emoji: '🧋', color: '#e8a0b8', quote: 'Nás perliček zbylo na dně hodně… tak jdeme na to!' },
+];
 /** 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[],
@@ -198,6 +213,7 @@ const EMOJI_CONFETTI: Partial<Record<WheelTheme, {
    frieren: { prefix: 'confetti-fr', badges: FR_BADGES, colors: FR_BADGE_COLORS, emoji: FR_EMOJI, speakers: FR_SPEAKERS, banner: '✦ 葬送のフリーレン ✦' },
    mlpg5: { prefix: 'confetti-g5', badges: G5_BADGES, colors: G5_BADGE_COLORS, emoji: G5_EMOJI, speakers: G5_SPEAKERS, banner: '☀️ Make Your Mark! ☀️' },
    aggretsuko: { prefix: 'confetti-agg', badges: AGG_BADGES, colors: AGG_BADGE_COLORS, emoji: AGG_EMOJI, speakers: AGG_SPEAKERS, banner: '🤘 RAAAAAH!!! 🎤' },
+    sumikko: { prefix: 'confetti-sk', badges: SK_BADGES, colors: SK_BADGE_COLORS, emoji: SK_EMOJI, speakers: SK_SPEAKERS, banner: '🍤 すみっコぐらし 🐧' },
 };
 const DURATION_MS = 6400;

@@ -351,7 +367,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, družina Frieren, poníci z Maretime Bay, kancelář Retsuko...)
+    // 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, poníci z Maretime Bay, kancelář Retsuko, postavičky z koutků...)
    const emojiConfetti = EMOJI_CONFETTI[theme];
    const emojiSpeaker = useMemo(
        () => big && emojiConfetti ? pick(emojiConfetti.speakers) : undefined,
@@ -3414,6 +3414,246 @@
  }
 }

+// ============================================
+// STYL SUMIKKO GURASHI kola štěstí (dle stylu zvoleného v nastavení).
+// Pastelové výseče v barvách postaviček s hnědými popisky a linkami,
+// střed jako tapioková perlička.
+// ============================================
+.spin-wheel-modal.spin-theme-sumikko {
+  --sk-font: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
+  --sk-display: 'Klee One', 'Zen Maru Gothic', sans-serif;
+  --sk-brown: #8b5e3c;
+  --sk-brown-deep: #6b4428;
+  --sk-ink: #5a4636;
+  --sk-line: #e8dcc8;
+  --sk-panel: #fffdf8;
+  --wheel-c0: #b9dba3;
+  --wheel-c1: #ecd5b8;
+  --wheel-c2: #b6d9ea;
+  --wheel-c3: #f6c6d2;
+  --wheel-c4: #f2dc8f;
+  --wheel-c5: #d4c6e8;
+  --wheel-label: #5a4636;
+  --wheel-rim: #8b5e3c;
+  --wheel-hub: #5a4636;
+
+  font-family: var(--sk-font);
+
+  .modal-content {
+    border: 2px solid var(--sk-line);
+    border-radius: 22px;
+    overflow: hidden;
+    background: #f8f3e8;
+    color: var(--sk-ink);
+  }
+
+  .modal-header {
+    background:
+      repeating-linear-gradient(90deg, rgb(139 94 60 / 0.4) 0 8px, transparent 8px 14px) left bottom / 100% 2px no-repeat,
+      #f3e6cf;
+    border-bottom: none;
+
+    h2 {
+      color: var(--sk-ink);
+      font-family: var(--sk-display);
+      font-weight: 600;
+    }
+  }
+
+  .modal-footer {
+    border-top: 2px dashed var(--sk-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--sk-display);
+    font-weight: 600;
+    background: #efe6d8;
+    color: #a8988a;
+    border-radius: 12px;
+    padding: 2px 16px;
+
+    &.active {
+      background: var(--sk-brown);
+      color: #fffaf0;
+    }
+
+    &.done {
+      background: #b9dba3;
+      color: #2f3a2a;
+    }
+  }
+
+  .btn {
+    font-family: var(--sk-font);
+    font-weight: 700;
+    border-radius: 12px;
+  }
+
+  .btn-primary {
+    background: var(--sk-brown);
+    border: none;
+    color: #fffaf0;
+    box-shadow: 0 3px 0 var(--sk-brown-deep);
+
+    &:hover:not(:disabled) {
+      background: #9c6c48;
+      color: #fffaf0;
+    }
+
+    &:disabled {
+      background: #e4dbcf;
+      color: #a8988a;
+      box-shadow: none;
+    }
+  }
+
+  .spin-button {
+    font-family: var(--sk-display);
+    font-weight: 600;
+    font-size: 1.25rem;
+    padding: 8px 38px;
+  }
+
+  .btn-outline-primary {
+    background: var(--sk-panel);
+    border: 2px solid #c9a07a;
+    color: var(--sk-brown);
+
+    &:hover {
+      background: #f5e9d8;
+      color: var(--sk-brown);
+    }
+  }
+
+  .btn-secondary {
+    background: #a8cf8e;
+    border: none;
+    color: #2f3a2a;
+    box-shadow: 0 3px 0 #86ad6c;
+  }
+
+  .spin-source {
+    background: #efe6d8;
+
+    > .btn-primary {
+      box-shadow: none !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--sk-ink);
+
+      &:hover {
+        background: var(--sk-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 700;
+
+    strong {
+      color: var(--sk-brown);
+    }
+  }
+
+  .spin-options {
+    background: var(--sk-panel);
+    border: 2px solid var(--sk-line);
+    border-radius: 16px;
+
+    li:hover {
+      background: #f7efe2;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 2px dashed var(--sk-line);
+    color: var(--sk-brown);
+    font-family: var(--sk-display);
+  }
+
+  .spin-empty {
+    border-color: var(--sk-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--sk-brown);
+  }
+
+  .spin-seg {
+    stroke: var(--sk-brown);
+    stroke-width: 1.5;
+  }
+
+  .spin-seg-label {
+    font-family: var(--sk-display);
+    font-weight: 600;
+  }
+}
+
+// Tmavý režim — večer v koutku pod dekou
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-sumikko {
+  --sk-brown: #e0b48a;
+  --sk-brown-deep: #a87a50;
+  --sk-ink: #f3e8d8;
+  --sk-line: #3a302a;
+  --sk-panel: #26201d;
+  --wheel-rim: #e0b48a;
+  --wheel-hub: #e0b48a;
+
+  .modal-content {
+    background:
+      radial-gradient(circle at 0% 0%, rgb(255 210 150 / 0.14), transparent 45%),
+      #1d1816;
+  }
+
+  .modal-header {
+    background:
+      repeating-linear-gradient(90deg, rgb(224 180 138 / 0.4) 0 8px, transparent 8px 14px) left bottom / 100% 2px no-repeat,
+      #2f2620;
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+    }
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #2f2824;
+    color: #93877a;
+  }
+
+  .spin-steps span.active {
+    color: #2a1f18;
+  }
+
+  .btn-primary {
+    color: #2a1f18;
+
+    &:hover:not(:disabled) {
+      background: #ecc8a4;
+      color: #2a1f18;
+    }
+
+    &:disabled {
+      background: #3a302a;
+      color: #93877a;
+    }
+  }
+
+  .btn-outline-primary:hover {
+    background: #3a2e26;
+  }
+
+  .spin-source {
+    background: #2f2824;
+  }
+
+  .spin-options li:hover {
+    background: #2f2824;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
  transition: transform 0.4s ease !important;
@@ -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' | 'frieren' | 'mlpg5' | 'aggretsuko';
+export type StyleTheme = 'simple' | 'umamusume' | 'mlp' | 'hellgirl' | 'kon' | 'bocchi' | 'evangelion' | 'yurucamp' | 'spyfamily' | 'apothecary' | 'frieren' | 'mlpg5' | 'aggretsuko' | 'sumikko';

 export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
  { value: 'simple', label: 'Jednoduchý' },
@@ -29,6 +29,7 @@ export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
  { value: 'apothecary', label: 'Apothecary Diaries' },
  { value: 'frieren', label: 'Frieren' },
  { value: 'aggretsuko', label: 'Aggretsuko' },
+  { value: 'sumikko', label: 'Sumikko Gurashi' },
 ];

 export type SettingsContextProps = {
@@ -260,7 +261,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, Frieren, My Little Pony G5, Aggretsuko) 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, My Little Pony G5, Aggretsuko, Sumikko Gurashi) mají vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
  useEffect(() => {
    localStorage.setItem(ACCENT_HUE_KEY, String(accentHue));
    if (styleTheme === 'simple') {
@@ -29,6 +29,8 @@ const ICONS: Record<StyleTheme, Record<GameId, string>> = {
    mlpg5: { drawing: '🦄' },
    // Kancelářské pero z účetního oddělení Retsuko
    aggretsuko: { drawing: '🖊️' },
+    // Tužka, kterou se kreslí postavičky ze San-X
+    sumikko: { drawing: '✏️' },
 };

 /** Styl z <html data-luncher-theme> — pro místa mimo React kontext nastavení. */
@@ -0,0 +1,548 @@
+// ============================================
+// STYL "SUMIKKO GURASHI" (volitelný, výchozí je jednoduchý styl)
+// Inspirováno postavičkami Sumikko Gurashi (すみっコぐらし) od San-X.
+// Postavičky nejraději posedávají v koutech — proto rohové „fotorůžky"
+// na panelech, postavičky sedící na rozích titulku dne a v každé kartě
+// podniku jedna, která z koutku vykoukne při najetí. Tlumené pastely,
+// krémový papír, hnědé ručně kreslené linky a tapiokové perličky.
+// Tmavý režim = útulný večer v koutku pod dekou u lampičky.
+// Aktivní, pokud má <html> atribut data-luncher-theme="sumikko".
+// ============================================
+
+$sk: 'html[data-luncher-theme="sumikko"]';
+
+// Rohové „fotorůžky" — čtyři malé L ve všech rozích (barva jako parametr)
+@function sk-corners($color, $len: 14px, $w: 3px) {
+  $piece: linear-gradient($color, $color);
+  @return
+    $piece top left / $len $w no-repeat, $piece top left / $w $len no-repeat,
+    $piece top right / $len $w no-repeat, $piece top right / $w $len no-repeat,
+    $piece bottom left / $len $w no-repeat, $piece bottom left / $w $len no-repeat,
+    $piece bottom right / $len $w no-repeat, $piece bottom right / $w $len no-repeat;
+}
+
+// Prošití (čárkovaná linka) — vodorovně
+@function sk-stitch($color) {
+  @return repeating-linear-gradient(90deg, $color 0 8px, transparent 8px 14px);
+}
+
+// Tapiokové perličky — pastelové tečky v několika vrstvách
+$sk-dots:
+  radial-gradient(circle at 20px 30px, rgb(185 219 163 / 0.45) 0 4px, transparent 4.5px),
+  radial-gradient(circle at 90px 80px, rgb(246 198 210 / 0.45) 0 3.5px, transparent 4px),
+  radial-gradient(circle at 60px 140px, rgb(182 217 234 / 0.5) 0 4px, transparent 4.5px),
+  radial-gradient(circle at 140px 20px, rgb(240 207 160 / 0.5) 0 3px, transparent 3.5px);
+
+#{$sk} {
+  --sk-font: 'Zen Maru Gothic', 'M PLUS Rounded 1c', 'Nunito', sans-serif;
+  --sk-display: 'Klee One', 'Zen Maru Gothic', sans-serif;
+  --sk-brown: #8b5e3c;            // hnědé linky kreseb San-X
+  --sk-brown-deep: #6b4428;
+  --sk-ink: #5a4636;
+  --sk-cream: #fbf6ec;
+  --sk-penguin: #b9dba3;          // Penguin?
+  --sk-neko: #ecd5b8;             // Neko
+  --sk-tokage: #b6d9ea;           // Tokage
+  --sk-tapioca: #f6c6d2;          // růžová tapioka
+  --sk-shirokuma: #e3edf3;        // Shirokuma
+  --sk-line: #e8dcc8;
+
+  --luncher-primary: var(--sk-brown);
+  --luncher-primary-hover: var(--sk-brown-deep);
+  --luncher-primary-light: #f5e9d8;
+  --luncher-bg: #f8f3e8;
+  --luncher-bg-card: #fffdf8;
+  --luncher-bg-hover: #f7efe2;
+  --luncher-text: var(--sk-ink);
+  --luncher-text-secondary: #7a6656;
+  --luncher-text-muted: #a8988a;
+  --luncher-border: var(--sk-line);
+  --luncher-border-light: #f0e7d8;
+  --luncher-navbar-bg: #8b6f5a;
+  --luncher-navbar-text: #fffaf0;
+  --luncher-action-icon: var(--sk-brown);
+  --luncher-buyer-icon: #6f9fbf;
+  --luncher-success: #6f9f5a;
+  --luncher-warning: #d9a03a;
+  --luncher-danger: #d0606e;
+  --luncher-radius-sm: 10px;
+  --luncher-radius: 14px;
+  --luncher-radius-lg: 18px;
+  --luncher-radius-xl: 22px;
+  --luncher-shadow: 0 3px 0 rgb(139 94 60 / 0.10), 0 6px 14px rgb(139 94 60 / 0.08);
+  --luncher-shadow-lg: 0 5px 0 rgb(139 94 60 / 0.14), 0 12px 24px rgb(139 94 60 / 0.14);
+
+  &[data-bs-theme="dark"] {
+    // Večer v koutku pod dekou
+    --sk-brown: #e0b48a;
+    --sk-brown-deep: #c9986a;
+    --sk-ink: #f3e8d8;
+    --sk-line: #3a302a;
+
+    --luncher-primary: #e0b48a;
+    --luncher-primary-hover: #ecc8a4;
+    --luncher-primary-light: #3a2e26;
+    --luncher-bg: #1d1816;
+    --luncher-bg-card: #26201d;
+    --luncher-bg-hover: #2f2824;
+    --luncher-text: var(--sk-ink);
+    --luncher-text-secondary: #cdbfae;
+    --luncher-text-muted: #93877a;
+    --luncher-border-light: #2c2521;
+    --luncher-navbar-bg: #3a2e26;
+    --luncher-action-icon: #e0b48a;
+    --luncher-buyer-icon: #9cc6e0;
+    --luncher-success: #9ccf86;
+    --luncher-warning: #e8c06a;
+    --luncher-danger: #ec8a96;
+    --luncher-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
+    --luncher-shadow-lg: 0 10px 26px rgb(0 0 0 / 0.45);
+  }
+
+  body {
+    font-family: var(--sk-font);
+    background-color: var(--luncher-bg);
+    // Krémový papír posetý tapiokovými perličkami
+    background-image:
+      $sk-dots,
+      linear-gradient(180deg, var(--sk-cream) 0, var(--luncher-bg) 360px);
+    background-size: 170px 170px, 170px 170px, 170px 170px, 170px 170px, 100% 100%;
+    background-attachment: fixed;
+  }
+
+  &[data-bs-theme="dark"] body {
+    // Světlo lampičky v rohu pokoje a ztlumené perličky
+    background-image:
+      radial-gradient(circle at 0% 0%, rgb(255 210 150 / 0.16), transparent 40%),
+      radial-gradient(circle at 20px 30px, rgb(185 219 163 / 0.12) 0 4px, transparent 4.5px),
+      radial-gradient(circle at 90px 80px, rgb(246 198 210 / 0.12) 0 3.5px, transparent 4px),
+      radial-gradient(circle at 60px 140px, rgb(182 217 234 / 0.12) 0 4px, transparent 4.5px);
+    background-size: 100% 100%, 170px 170px, 170px 170px, 170px 170px;
+  }
+
+  .app-container {
+    background: transparent;
+  }
+
+  h1, h2, h3, h4, .navbar-brand {
+    font-family: var(--sk-display);
+    font-weight: 600;
+  }
+
+  .btn {
+    font-family: var(--sk-font);
+  }
+
+  // ---------- Navbar: hnědá jako linky kreseb, dole prošití ----------
+  .navbar {
+    background:
+      #{sk-stitch(rgb(255 250 240 / 0.55))} left bottom 5px / 100% 2px no-repeat,
+      var(--luncher-navbar-bg) !important;
+    padding-bottom: calc(var(--bs-navbar-padding-y, 0.5rem) + 6px);
+
+    .navbar-brand {
+      // Ocásek smažené krevety (ebifurai no shippo)
+      &::after {
+        content: '🍤';
+        display: inline-block;
+        margin-left: 6px;
+        margin-right: 0.6em;
+        font-size: 0.75em;
+      }
+    }
+
+    .dropdown-menu {
+      border: 2px solid var(--sk-line);
+      border-radius: var(--luncher-radius);
+      box-shadow: var(--luncher-shadow-lg);
+    }
+  }
+
+  // ---------- Titulek dne: lísteček, na jehož rozích sedí postavičky ----------
+  .day-navigator .title {
+    position: relative;
+    display: inline-block;
+    margin: 10px 0;
+    padding: 6px 30px 8px;
+    font-family: var(--sk-display);
+    font-weight: 600;
+    font-size: 1.7rem;
+    color: var(--sk-ink) !important;
+    background: var(--luncher-bg-card);
+    border: 2px solid var(--sk-brown);
+    border-radius: 16px;
+    outline: 1.5px dashed rgb(139 94 60 / 0.35);
+    outline-offset: -7px;
+    box-shadow: 0 4px 0 rgb(139 94 60 / 0.15);
+
+    // Shirokuma v levém horním koutku, Penguin? v pravém dolním
+    &::before, &::after {
+      position: absolute;
+      font-size: 1em;
+      line-height: 1;
+    }
+
+    &::before {
+      content: '🐻‍❄️';
+      left: -16px;
+      top: -18px;
+      transform: rotate(-10deg);
+    }
+
+    &::after {
+      content: '🐧';
+      right: -14px;
+      bottom: -14px;
+      transform: rotate(8deg);
+    }
+
+    &.text-muted {
+      color: var(--luncher-text-muted) !important;
+      border-color: #c9bcae;
+      outline-color: rgb(169 152 138 / 0.35);
+      box-shadow: none;
+
+      // Jiný den — postavičky dřímají
+      &::before, &::after {
+        opacity: 0.45;
+        filter: grayscale(0.6);
+      }
+    }
+  }
+
+  // ---------- Karty podniků: každý podnik má barvu jiné postavičky ----------
+  .food-tables > :nth-child(5n+1) { --sk-head: var(--sk-penguin); --sk-head-dark: #34442e; --sk-peek: '🐧'; }
+  .food-tables > :nth-child(5n+2) { --sk-head: var(--sk-neko); --sk-head-dark: #44382c; --sk-peek: '🐱'; }
+  .food-tables > :nth-child(5n+3) { --sk-head: var(--sk-tokage); --sk-head-dark: #2c3e48; --sk-peek: '🦎'; }
+  .food-tables > :nth-child(5n+4) { --sk-head: var(--sk-tapioca); --sk-head-dark: #46303a; --sk-peek: '🧋'; }
+  .food-tables > :nth-child(5n+5) { --sk-head: var(--sk-shirokuma); --sk-head-dark: #343c44; --sk-peek: '🐻‍❄️'; }
+
+  .restaurant-card {
+    border: 2px solid var(--sk-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    overflow: hidden;
+
+    &:hover {
+      transform: translateY(-3px);
+      border-color: var(--sk-line);
+      box-shadow: var(--luncher-shadow-lg);
+    }
+
+    .restaurant-header {
+      position: relative;
+      overflow: hidden;
+      background: var(--sk-head, var(--sk-neko));
+      border-bottom: 2px dashed rgb(90 70 54 / 0.3);
+
+      // Postavička schovaná v pravém dolním koutku, při najetí vykoukne
+      &::after {
+        content: var(--sk-peek, '🐧');
+        position: absolute;
+        right: 14px;
+        bottom: -4px;
+        font-size: 1.8rem;
+        line-height: 1;
+        transform: translateY(100%);
+        transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
+        pointer-events: none;
+      }
+
+      &:hover {
+        background: var(--sk-head, var(--sk-neko));
+        filter: saturate(1.25) brightness(0.98);
+
+        &::after {
+          transform: translateY(18%);
+        }
+      }
+
+      h3 {
+        color: var(--sk-ink);
+        font-size: 1.25rem;
+      }
+
+      small {
+        color: rgb(90 70 54 / 0.7);
+      }
+    }
+  }
+
+  &[data-bs-theme="dark"] .restaurant-card .restaurant-header {
+    background: var(--sk-head-dark, #44382c);
+    border-bottom-color: rgb(243 232 216 / 0.2);
+
+    small {
+      color: rgb(243 232 216 / 0.7);
+    }
+  }
+
+  .food-table tbody tr:hover > td {
+    background: #f7efe2;
+  }
+
+  &[data-bs-theme="dark"] .food-table tbody tr:hover > td {
+    background: #2f2824;
+  }
+
+  .food-price {
+    color: var(--sk-brown);
+    font-weight: 700;
+  }
+
+  // ---------- Panely s rohovými fotorůžky ----------
+  .choice-section,
+  .pizza-section,
+  .no-votes {
+    border: 2px solid var(--sk-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    background:
+      #{sk-corners(rgb(139 94 60 / 0.35))},
+      var(--luncher-bg-card);
+    background-origin: padding-box;
+  }
+
+  &[data-bs-theme="dark"] {
+    .choice-section,
+    .pizza-section,
+    .no-votes {
+      background:
+        #{sk-corners(rgb(224 180 138 / 0.3))},
+        var(--luncher-bg-card);
+    }
+  }
+
+  .choices-table {
+    border: 2px solid var(--sk-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  // Sloupec s podnikem: béžová jako Neko
+  .choices-table > tbody > tr > td:first-child {
+    background: #f5e7d4;
+    color: var(--sk-ink);
+    font-family: var(--sk-display);
+    font-weight: 600;
+    border-right: 2px dashed var(--sk-line);
+  }
+
+  &[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child {
+    background: #33291f;
+    color: var(--sk-brown);
+  }
+
+  // Bootstrap karty (skupinové objednávky apod.) a seznamy
+  .card {
+    border: 2px solid var(--sk-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 dashed var(--sk-line);
+      font-weight: 700;
+
+      &:first-child {
+        border-radius: calc(var(--luncher-radius-lg) - 2px) calc(var(--luncher-radius-lg) - 2px) 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: 2px solid var(--sk-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(--sk-line);
+
+    &:focus {
+      border-color: #c9a07a;
+      box-shadow: 0 0 0 3px rgb(201 160 122 / 0.25);
+    }
+  }
+
+  // ---------- Tlačítka: měkká, hnědá jako linky kreseb ----------
+  .btn {
+    border-radius: 12px;
+    font-weight: 700;
+    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
+  }
+
+  .btn-primary {
+    background: var(--sk-brown);
+    border: none;
+    color: #fffaf0;
+    box-shadow: 0 3px 0 var(--sk-brown-deep);
+
+    &:hover {
+      background: #9c6c48;
+      color: #fffaf0;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 0 var(--sk-brown-deep);
+    }
+
+    &:active {
+      transform: translateY(2px) !important;
+      box-shadow: 0 1px 0 var(--sk-brown-deep) !important;
+    }
+
+    &:disabled {
+      background: #e4dbcf;
+      color: #a8988a;
+      box-shadow: none;
+    }
+  }
+
+  &[data-bs-theme="dark"] .btn-primary {
+    color: #2a1f18;
+
+    &:hover {
+      background: #ecc8a4;
+      color: #2a1f18;
+    }
+
+    &:disabled {
+      background: #3a302a;
+      color: #93877a;
+    }
+  }
+
+  .btn-outline-primary {
+    background: var(--luncher-bg-card);
+    border: 2px solid #c9a07a;
+    color: var(--luncher-primary);
+
+    &:hover {
+      background: var(--luncher-primary-light);
+      border-color: #c9a07a;
+      color: var(--luncher-primary);
+    }
+  }
+
+  // Sekundární — světle zelená jako Penguin?
+  .btn-secondary {
+    background: #a8cf8e;
+    border: none;
+    color: #2f3a2a;
+    box-shadow: 0 3px 0 #86ad6c;
+
+    &:hover {
+      background: #b9dba3;
+      color: #2f3a2a;
+    }
+  }
+
+  &[data-bs-theme="dark"] .btn-secondary {
+    background: #4a6340;
+    color: #f3e8d8;
+    box-shadow: 0 3px 0 #34442e;
+
+    &:hover {
+      background: #567350;
+    }
+  }
+
+  .btn-danger {
+    background: #d0606e;
+    border: none;
+    box-shadow: 0 3px 0 #a8404e;
+  }
+
+  .action-icon:hover {
+    background: var(--luncher-primary-light);
+    color: var(--luncher-primary);
+  }
+
+  // ---------- Modaly: světlý lísteček s prošitím ----------
+  .modal-content {
+    border: 2px solid var(--sk-line);
+    border-radius: var(--luncher-radius-xl);
+    box-shadow: 0 16px 40px rgb(139 94 60 / 0.25);
+    overflow: hidden;
+  }
+
+  .modal-header {
+    background:
+      #{sk-stitch(rgb(139 94 60 / 0.4))} left bottom / 100% 2px no-repeat,
+      #f3e6cf;
+    border-bottom: none;
+
+    .modal-title, .modal-title h2 {
+      color: var(--sk-ink);
+      font-family: var(--sk-display);
+      font-weight: 600;
+    }
+  }
+
+  &[data-bs-theme="dark"] .modal-header {
+    background:
+      #{sk-stitch(rgb(224 180 138 / 0.4))} left bottom / 100% 2px no-repeat,
+      #2f2620;
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+    }
+  }
+
+  .footer {
+    border-top: none;
+    background-image: sk-stitch(rgb(255 250 240 / 0.5));
+    background-size: 100% 2px;
+    background-position: 0 6px;
+    background-repeat: no-repeat;
+
+    a {
+      color: #ffe0b8;
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  #{$sk} .day-navigator .title {
+    font-size: 1.35rem;
+    padding: 5px 20px 6px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #{$sk} .restaurant-card .restaurant-header::after {
+    transition: none;
+  }
+}