feat: nový vzhled Yuru Camp

2026-10-25 19:29:57 +01:00
1 parent 39fafdb575
commit 8b4a7c08b4
@@ -16,6 +16,7 @@ import './themes/hellgirl.scss';
 import './themes/kon.scss';
 import './themes/bocchi.scss';
 import './themes/evangelion.scss';
+import './themes/yurucamp.scss';
 import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
 import { useSettings } from './context/settings';
 import Footer from './components/Footer';
@@ -81,6 +81,19 @@
  box-shadow: none;
 }

+// Styl Yuru Camp△: emoji na kulaté nášivce z kempu s prošitým okrajem
+.eater-badge-yurucamp {
+  display: inline-grid;
+  place-items: center;
+  font-size: 15px;
+  line-height: 1;
+  border-color: #fffdf8;
+  background: radial-gradient(circle at 40% 35%, #fffdf8, #f3e3c3);
+  box-shadow: 0 0 0 2px #3f6b4a;
+  outline: 1px dashed #3f6b4a;
+  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;
@@ -43,6 +43,12 @@ const EVA_LEVELS = [
    { minItems: 2, emoji: '🍛', title: 'Úroveň Misato — dvojitá porce jejího legendárního kari (na vlastní nebezpečí)' },
 ];

+/** Úrovně ve stylu Yuru Camp△ — emoji na nášivce z kempu. Seřazeno od nejvyšší úrovně. */
+const YC_LEVELS = [
+    { minItems: 3, emoji: '🍲', title: 'Úroveň Nadeshiko — sní celý kotlík nabe a ještě si přidá' },
+    { minItems: 2, emoji: '🍜', title: 'Úroveň Rin — k obědu ještě instantní nudle s výhledem na Fuji' },
+];
+
 /** Úrovně podle stylu pro odznaky s emoji. */
 const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
    mlp: MLP_LEVELS,
@@ -50,6 +56,7 @@ const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
    kon: KON_LEVELS,
    bocchi: BOCCHI_LEVELS,
    evangelion: EVA_LEVELS,
+    yurucamp: YC_LEVELS,
 };

 type Props = {
@@ -57,7 +64,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! a Evangelion. */
+/** 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 a Yuru Camp△. */
 export default function EaterBadge({ items }: Readonly<Props>) {
    const styleTheme = useSettings()?.styleTheme;
    const isUma = styleTheme === 'umamusume';
@@ -560,3 +560,81 @@
    }
  }
 }
+
+// ============================================
+// Konfety ve stylu Yuru Camp△
+// ============================================
+.confetti-yc {
+  filter: drop-shadow(0 3px 3px rgb(90 58 36 / 0.25));
+}
+
+// Nášivky z kempů — oblé, s prošitým okrajem
+.confetti-yc-badge {
+  padding: 5px 16px;
+  border-radius: 999px;
+  color: #fff;
+  outline: 2px dashed rgb(255 255 255 / 0.75);
+  outline-offset: -6px;
+  font-family: 'Kiwi Maru', 'Zen Maru Gothic', sans-serif;
+  font-weight: 500;
+  font-size: 1.1rem;
+  white-space: nowrap;
+  text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
+}
+
+// Nápis „ゆるキャン△" na dřevěné ceduli kempu — pomalu se zhoupne jako na provázku
+.confetti-yc-banner {
+  position: absolute;
+  top: 38%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 44px 14px;
+  font-family: 'Kiwi Maru', 'Zen Maru Gothic', sans-serif;
+  font-weight: 500;
+  font-size: clamp(1.8rem, 7vw, 4rem);
+  white-space: nowrap;
+  color: #fdf3e1;
+  text-shadow: 0 2px 0 rgb(0 0 0 / 0.35);
+  background:
+    repeating-linear-gradient(178deg, rgb(255 255 255 / 0.05) 0 3px, transparent 3px 9px),
+    repeating-linear-gradient(181deg, rgb(0 0 0 / 0.07) 0 2px, transparent 2px 13px),
+    linear-gradient(180deg, #9a6743, #8a5a3b);
+  border: 4px solid #5a3a24;
+  border-radius: 12px;
+  box-shadow: 0 6px 0 #5a3a24, 0 14px 30px rgb(0 0 0 / 0.3);
+  transform-origin: 50% -40px;
+  animation: yc-banner 2.8s ease both;
+}
+
+@keyframes yc-banner {
+  0% { transform: translate(-50%, -120%) rotate(-8deg); opacity: 0; }
+  18% { transform: translate(-50%, -50%) rotate(5deg); opacity: 1; }
+  32% { transform: translate(-50%, -50%) rotate(-3deg); }
+  46% { transform: translate(-50%, -50%) rotate(1.5deg); }
+  58%, 82% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
+  100% { transform: translate(-50%, -50%) rotate(0deg) scale(0.94); opacity: 0; }
+}
+
+// Postava s hláškou — kulatá nášivka a bublina jako lísteček z deníku výprav
+.confetti-yurucamp-voice {
+  .confetti-mlp-avatar {
+    border: 4px solid #fffdf8;
+    background: radial-gradient(circle at 40% 35%, #fffdf8, #f3e3c3);
+    box-shadow: 0 0 0 4px var(--mlp-speaker, #3f6b4a), 0 4px 10px rgb(0 0 0 / 0.3);
+    outline: 2px dashed var(--mlp-speaker, #3f6b4a);
+    outline-offset: -10px;
+  }
+
+  .confetti-mlp-bubble {
+    background: #fffdf8;
+    color: #3a2e25;
+    border: 2px solid var(--mlp-speaker, #3f6b4a);
+    border-radius: 16px;
+    box-shadow: 0 4px 0 var(--mlp-speaker, #3f6b4a);
+    font-family: 'Zen Maru Gothic', 'Nunito', sans-serif;
+
+    p {
+      font-weight: 700;
+    }
+  }
+}
@@ -91,6 +91,21 @@ const EVA_SPEAKERS = [
    { name: 'Kaworu Nagisa', emoji: '🎹', color: '#8c93a8', quote: 'Oběd je vrcholem lidské kultury. Nemyslíš, Shinji-kun?' },
    { name: 'Pen Pen', emoji: '🐧', color: '#2f8fb3', quote: '(spokojeně zakváká a míří k lednici)' },
 ];
+const YC_EMOJI = ['⛺', '🏕️', '🗻', '🔥', '🍂', '🍁', '🍜', '🍲', '🌲', '☕', '🐕', '🌙', '⭐', '🧣'];
+// Hlášky z Yuru Camp△ (Nokuru, Shimarin, Chikuwa, nabe, výhled na Fuji...)
+const YC_BADGES = ['ゆるキャン△', '野クル', 'Fuji-san!', 'Nabe party!', 'Chikuwa ♡', 'Shimarin', 'Jdeme kempovat!', 'Káva u ohně', 'Mňam~', 'Hokkori~'];
+const YC_BADGE_COLORS = ['#3f6b4a', '#c8553d', '#e8833a', '#3b6fa8', '#8a5a3b', '#d9739b'];
+/** Členky Nokuru, Rin a jejich okolí s „hláškou" po finálním výsledku. */
+const YC_SPEAKERS = [
+    { name: 'Nadeshiko Kagamihara', emoji: '🍲', color: '#d9739b', quote: 'Tohle bude mňamka! A večer si k tomu uvaříme ještě nabe, jo?' },
+    { name: 'Rin Shima', emoji: '🏕️', color: '#3b6fa8', quote: 'Hm. Dobrá volba. Já si to ale dám v klidu sama u jezera.' },
+    { name: 'Chiaki Ōgaki', emoji: '🗺️', color: '#c8553d', quote: 'Nokuru to oficiálně schvaluje! Hned to zapíšu do plánu výpravy!' },
+    { name: 'Aoi Inuyama', emoji: '🍳', color: '#a87b4f', quote: 'Prý tam vaří nejlepší jídlo v celé prefektuře… Kecám. Ale vypadá to dobře.' },
+    { name: 'Ena Saitō', emoji: '🐕', color: '#7d6a9e', quote: 'Chikuwa souhlasí. Teda spí, ale určitě by souhlasil.' },
+    { name: 'Minami Toba', emoji: '🍶', color: '#6b8f71', quote: 'Výborně… a já si k tomu dám jen malou skleničku. Jen jednu.' },
+    { name: 'Sakura Kagamihara', emoji: '🚗', color: '#5a6b7d', quote: 'Nastupte, odvezu vás. Ale zpátky už jedete autobusem.' },
+    { name: 'Chikuwa', emoji: '🐶', color: '#d9a35b', quote: '(vrtí ocáskem a čeká, jestli mu něco kápne)' },
+];
 /** 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[],
@@ -102,6 +117,7 @@ const EMOJI_CONFETTI: Partial<Record<WheelTheme, {
    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: '🎸 結束バンド 🎸' },
    evangelion: { prefix: 'confetti-eva', badges: EVA_BADGES, colors: EVA_BADGE_COLORS, emoji: EVA_EMOJI, speakers: EVA_SPEAKERS, banner: '👏 おめでとう 👏' },
+    yurucamp: { prefix: 'confetti-yc', badges: YC_BADGES, colors: YC_BADGE_COLORS, emoji: YC_EMOJI, speakers: YC_SPEAKERS, banner: '⛺ ゆるキャン△ 🔥' },
 };
 const DURATION_MS = 6400;

@@ -255,7 +271,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...)
+    // Ostatní tematické styly: hlášku pronese náhodná postava (Mane 6, Ai Enma, Houkago Tea Time, Kessoku Band, piloti NERV, Nokuru...)
    const emojiConfetti = EMOJI_CONFETTI[theme];
    const emojiSpeaker = useMemo(
        () => big && emojiConfetti ? pick(emojiConfetti.speakers) : undefined,
@@ -1800,6 +1800,262 @@
  }
 }

+// ============================================
+// STYL YURU CAMP△ kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách lesa, podzimního listí, jezera a šál Rin a Nadeshiko,
+// okraj jako dřevěná obruč a střed jako žhavé uhlíky táboráku.
+// ============================================
+.spin-wheel-modal.spin-theme-yurucamp {
+  --yc-font: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
+  --yc-display: 'Kiwi Maru', 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
+  --yc-ember: #b5542a;
+  --yc-ember-bright: #e8833a;
+  --yc-forest: #3f6b4a;
+  --yc-line: #e2d5bd;
+  --yc-panel: #fffdf8;
+  --yc-text: #3a2e25;
+  --yc-kraft: #f3e3c3;
+  // Les, podzimní oranžová, javor, jezero Motosu, dřevo a růžová Nadeshiko
+  --wheel-c0: #3f6b4a;
+  --wheel-c1: #e8833a;
+  --wheel-c2: #c8553d;
+  --wheel-c3: #3b6fa8;
+  --wheel-c4: #8a5a3b;
+  --wheel-c5: #d9739b;
+  --wheel-rim: #5a3a24;
+  --wheel-hub: #f2b84b;
+
+  font-family: var(--yc-font);
+
+  .modal-content {
+    border: 1px solid var(--yc-line);
+    border-radius: 20px;
+    overflow: hidden;
+    background: linear-gradient(180deg, #eef5f8 0, #fbf6ec 160px);
+    color: var(--yc-text);
+  }
+
+  .modal-header {
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 60L88 13Q96 8 104 9H136Q144 8 152 13L240 60Z' fill='%233e5374'/%3E%3Cpath d='M88 13Q96 8 104 9H136Q144 8 152 13L141 21L132 16L124 23L114 16L106 22L97 18Z' fill='%23e6edf5'/%3E%3C/svg%3E") right 60px bottom / auto 70% no-repeat,
+      linear-gradient(180deg, #24314a, #2b3a55);
+    border-bottom: 3px solid var(--yc-ember-bright);
+
+    h2 {
+      color: #fdf8ef;
+      font-family: var(--yc-display);
+      font-weight: 500;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 2px dashed var(--yc-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--yc-font);
+    font-weight: 700;
+    background: #efe6d5;
+    color: #8f8275;
+    border-radius: 999px;
+    padding: 4px 16px;
+
+    &.active {
+      background: var(--yc-forest);
+      color: #fff;
+    }
+
+    &.done {
+      background: var(--yc-kraft);
+      color: #5a3a24;
+    }
+  }
+
+  .btn {
+    font-family: var(--yc-font);
+    font-weight: 700;
+    border-radius: 999px;
+  }
+
+  .btn-primary {
+    background: linear-gradient(180deg, var(--yc-ember-bright), var(--yc-ember));
+    border: none;
+    color: #fff;
+    box-shadow: 0 3px 0 #7a3518;
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(180deg, #f39a4f, #c45f2e);
+      color: #fff;
+      box-shadow: 0 3px 0 #7a3518, 0 0 14px rgb(232 131 58 / 0.55);
+    }
+
+    &:disabled {
+      background: #d9cfc2;
+      color: #8f8275;
+      box-shadow: none;
+    }
+  }
+
+  // Tlačítko roztočení — rozhořívající se táborák
+  .spin-button {
+    font-family: var(--yc-display);
+    font-weight: 500;
+    font-size: 1.2rem;
+    padding: 12px 38px;
+  }
+
+  .btn-outline-primary {
+    background: var(--yc-panel);
+    border: 2px solid var(--yc-ember-bright);
+    color: var(--yc-ember);
+
+    &:hover {
+      background: #fbe7d6;
+      color: var(--yc-ember);
+    }
+  }
+
+  .btn-secondary {
+    background: var(--yc-forest);
+    border: none;
+    color: #fff;
+  }
+
+  .spin-source {
+    background: #efe6d5;
+
+    > .btn-primary {
+      background: var(--yc-forest);
+      box-shadow: none !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--yc-text);
+
+      &:hover {
+        background: var(--yc-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 700;
+
+    strong {
+      color: var(--yc-ember);
+    }
+  }
+
+  .spin-options {
+    background: var(--yc-panel);
+    border: 1px solid var(--yc-line);
+    border-radius: 16px;
+
+    li:hover {
+      background: #f8efe0;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 2px dashed var(--yc-line);
+    color: var(--yc-forest);
+  }
+
+  .spin-empty {
+    border-color: var(--yc-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--yc-ember);
+    filter: drop-shadow(0 2px 1px rgb(90 58 36 / 0.4));
+  }
+
+  .spin-seg {
+    stroke: #fffdf8;
+    stroke-width: 2;
+  }
+
+  .spin-seg-label {
+    font-family: var(--yc-font);
+    font-weight: 700;
+  }
+}
+
+// Tmavý režim — noc u táboráku
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-yurucamp {
+  --yc-ember: #ff9a52;
+  --yc-ember-bright: #ffb36b;
+  --yc-forest: #2f5a3c;
+  --yc-line: #2f3a4f;
+  --yc-panel: #19223a;
+  --yc-text: #f3ece0;
+  --yc-kraft: #2e2519;
+  --wheel-c0: #2f5a3c;
+  --wheel-rim: #3a2618;
+
+  .modal-content {
+    background:
+      radial-gradient(1.2px 1.2px at 24px 38px, rgb(255 255 255 / 0.85), transparent) 0 0 / 180px 180px,
+      radial-gradient(1px 1px at 120px 100px, rgb(255 255 255 / 0.6), transparent) 0 0 / 180px 180px,
+      radial-gradient(ellipse 70% 45% at 50% 115%, rgb(255 140 60 / 0.25), transparent 70%),
+      #10172a;
+  }
+
+  .modal-header {
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 60L88 13Q96 8 104 9H136Q144 8 152 13L240 60Z' fill='%23172038'/%3E%3Cpath d='M88 13Q96 8 104 9H136Q144 8 152 13L141 21L132 16L124 23L114 16L106 22L97 18Z' fill='%23aebbd0'/%3E%3C/svg%3E") right 60px bottom / auto 70% no-repeat,
+      #0b1120;
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #222d48;
+    color: #9189a0;
+  }
+
+  .spin-steps span.done {
+    color: #ffb36b;
+  }
+
+  .btn-primary {
+    color: #2a1608;
+
+    &:hover:not(:disabled) {
+      color: #2a1608;
+    }
+
+    &:disabled {
+      background: #2f3a4f;
+      color: #9189a0;
+    }
+  }
+
+  .btn-outline-primary:hover {
+    background: #3a2618;
+  }
+
+  .spin-source {
+    background: #222d48;
+  }
+
+  .spin-options li:hover {
+    background: #222d48;
+  }
+
+  .spin-options-header {
+    color: #7fc28c;
+  }
+
+  .spin-seg {
+    stroke: #10172a;
+  }
+}
+
 // 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';
+export type StyleTheme = 'simple' | 'umamusume' | 'mlp' | 'hellgirl' | 'kon' | 'bocchi' | 'evangelion' | 'yurucamp';

 export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
  { value: 'simple', label: 'Jednoduchý' },
@@ -23,6 +23,7 @@ export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
  { value: 'kon', label: 'K-ON!' },
  { value: 'bocchi', label: 'Bocchi the Rock!' },
  { value: 'evangelion', label: 'Neon Genesis Evangelion' },
+  { value: 'yurucamp', label: 'Yuru Camp△' },
 ];

 export type SettingsContextProps = {
@@ -254,7 +255,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) 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△) mají vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
  useEffect(() => {
    localStorage.setItem(ACCENT_HUE_KEY, String(accentHue));
    if (styleTheme === 'simple') {
@@ -17,6 +17,8 @@ const ICONS: Record<StyleTheme, Record<GameId, string>> = {
    bocchi: { drawing: '📝' },
    // NERV: technické výkresy Evangelionu od Ritsuko
    evangelion: { drawing: '📐' },
+    // Nokuru: mapa s plánem další výpravy od Chiaki
+    yurucamp: { drawing: '🗺️' },
 };

 /** Styl z <html data-luncher-theme> — pro místa mimo React kontext nastavení. */
@@ -0,0 +1,532 @@
+// ============================================
+// STYL "YURU CAMP△" (volitelný, výchozí je jednoduchý styl)
+// Inspirováno anime Yuru Camp△ (ゆるキャン△).
+// Podzimní den v kempu u jezera Motosu: modré nebe, silueta hory Fuji,
+// řady smrčků, dřevěná cedule kempu a krémový papír jako v průvodci Nokuru.
+// Barvy lesa a podzimního listí, modrá šála Rin a růžová Nadeshiko.
+// Tmavý režim = noc u táboráku — hvězdy nad Fuji a teplá záře ohně odspodu.
+// Aktivní, pokud má <html> atribut data-luncher-theme="yurucamp".
+// ============================================
+
+$yc: 'html[data-luncher-theme="yurucamp"]';
+
+// Silueta hory Fuji se sněhovou čepicí (barvy svahu a sněhu jako parametry)
+@function yc-fuji($slope, $snow) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 60L88 13Q96 8 104 9H136Q144 8 152 13L240 60Z' fill='#{$slope}'/%3E%3Cpath d='M88 13Q96 8 104 9H136Q144 8 152 13L141 21L132 16L124 23L114 16L106 22L97 18Z' fill='#{$snow}'/%3E%3C/svg%3E");
+}
+
+// Řada smrčků (opakuje se vodorovně)
+@function yc-pines($color) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='20'%3E%3Cpath d='M10 0L19 20H1ZM31 5L38 20H24Z' fill='#{$color}'/%3E%3C/svg%3E");
+}
+
+// Hvězdy na noční obloze — několik vrstev teček s různým rozestupem
+$yc-stars:
+  radial-gradient(1.2px 1.2px at 24px 38px, rgb(255 255 255 / 0.9), transparent),
+  radial-gradient(1px 1px at 130px 90px, rgb(255 255 255 / 0.7), transparent),
+  radial-gradient(1.5px 1.5px at 190px 20px, rgb(255 240 200 / 0.9), transparent),
+  radial-gradient(1px 1px at 80px 160px, rgb(255 255 255 / 0.6), transparent);
+
+#{$yc} {
+  --yc-font: 'Zen Maru Gothic', 'M PLUS Rounded 1c', 'Nunito', sans-serif;
+  --yc-display: 'Kiwi Maru', 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
+  --yc-forest: #3f6b4a;           // smrkový les kolem kempu
+  --yc-forest-deep: #2c4d36;
+  --yc-ember: #b5542a;            // táborák / podzimní listí (čitelné na papíře)
+  --yc-ember-bright: #e8833a;
+  --yc-maple: #c8553d;            // javorové listí
+  --yc-rin: #3b6fa8;              // modrá šála Rin
+  --yc-nadeshiko: #e58fb0;        // růžové vlasy Nadeshiko
+  --yc-wood: #8a5a3b;             // cedule kempu, dřevo na oheň
+  --yc-wood-dark: #5a3a24;
+  --yc-paper: #fbf6ec;
+  --yc-kraft: #f3e3c3;            // kraftový papír na štítky
+  --yc-line: #e2d5bd;
+
+  --luncher-primary: var(--yc-ember);
+  --luncher-primary-hover: #964320;
+  --luncher-primary-light: #fbe7d6;
+  --luncher-bg: var(--yc-paper);
+  --luncher-bg-card: #fffdf8;
+  --luncher-bg-hover: #f8efe0;
+  --luncher-text: #3a2e25;
+  --luncher-text-secondary: #5e5045;
+  --luncher-text-muted: #8f8275;
+  --luncher-border: var(--yc-line);
+  --luncher-border-light: #efe6d5;
+  --luncher-navbar-bg: #2b3a55;   // podvečerní obloha nad Fuji
+  --luncher-navbar-text: #fdf8ef;
+  --luncher-action-icon: var(--yc-ember);
+  --luncher-buyer-icon: var(--yc-rin);
+  --luncher-success: var(--yc-forest);
+  --luncher-warning: #d99a1e;
+  --luncher-danger: var(--yc-maple);
+  --luncher-radius-sm: 8px;
+  --luncher-radius: 12px;
+  --luncher-radius-lg: 16px;
+  --luncher-radius-xl: 20px;
+  --luncher-shadow: 0 3px 10px rgb(90 58 36 / 0.10);
+  --luncher-shadow-lg: 0 8px 24px rgb(90 58 36 / 0.18);
+
+  &[data-bs-theme="dark"] {
+    // Noc u táboráku
+    --yc-forest: #6fa27a;
+    --yc-forest-deep: #1d3326;
+    --yc-ember: #ff9a52;
+    --yc-ember-bright: #ffb36b;
+    --yc-maple: #f07a5f;
+    --yc-rin: #7fa8dc;
+    --yc-kraft: #2e2519;
+    --yc-line: #2f3a4f;
+
+    --luncher-primary: #ff9a52;
+    --luncher-primary-hover: #ffb36b;
+    --luncher-primary-light: #3a2618;
+    --luncher-bg: #10172a;
+    --luncher-bg-card: #19223a;
+    --luncher-bg-hover: #222d48;
+    --luncher-text: #f3ece0;
+    --luncher-text-secondary: #cfc5b6;
+    --luncher-text-muted: #9189a0;
+    --luncher-border: var(--yc-line);
+    --luncher-border-light: #232c42;
+    --luncher-navbar-bg: #0b1120;
+    --luncher-action-icon: #ff9a52;
+    --luncher-buyer-icon: #7fa8dc;
+    --luncher-success: #7fc28c;
+    --luncher-warning: #ffc04d;
+    --luncher-danger: #f07a5f;
+    --luncher-shadow: 0 3px 12px rgb(0 0 0 / 0.35);
+    --luncher-shadow-lg: 0 8px 28px rgb(255 154 82 / 0.16);
+  }
+
+  body {
+    font-family: var(--yc-font);
+    background-color: var(--luncher-bg);
+    // Nebe nahoře, krémový papír a v dálce bledá silueta Fuji (nesmí rušit čtení)
+    background-image:
+      yc-fuji('%23e3e6e2', '%23fffdf8'),
+      linear-gradient(180deg, #d6e8f2 0, var(--luncher-bg) 380px);
+    background-size: min(1100px, 140vw) auto, 100% 100%;
+    background-position: center bottom, 0 0;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+  }
+
+  &[data-bs-theme="dark"] body {
+    // Hvězdy nad tmavou Fuji a záře táboráku odspodu
+    background-image:
+      $yc-stars,
+      radial-gradient(ellipse 60% 40% at 50% 112%, rgb(255 140 60 / 0.28), transparent 70%),
+      yc-fuji('%23172038', '%23c9d4e6'),
+      linear-gradient(180deg, #0b1120 0, var(--luncher-bg) 420px);
+    background-size: 220px 220px, 220px 220px, 220px 220px, 220px 220px, 100% 100%, min(1100px, 140vw) auto, 100% 100%;
+    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, center bottom, 0 0;
+    background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
+  }
+
+  .app-container {
+    background: transparent;
+  }
+
+  h1, h2, h3, h4, .navbar-brand {
+    font-family: var(--yc-display);
+    font-weight: 500;
+  }
+
+  .btn {
+    font-family: var(--yc-font);
+  }
+
+  // ---------- Navbar: podvečerní obloha se siluetou Fuji ----------
+  .navbar {
+    background:
+      yc-fuji('%233e5374', '%23e6edf5') right 24% bottom / auto 82% no-repeat,
+      linear-gradient(180deg, #24314a, var(--luncher-navbar-bg)) !important;
+
+    .navbar-brand {
+      // Táborák u loga
+      &::after {
+        content: '🔥';
+        display: inline-block;
+        margin-left: 6px;
+        margin-right: 0.6em;
+        font-size: 0.8em;
+        transform-origin: 50% 90%;
+        animation: yc-flicker 1.8s ease-in-out infinite;
+      }
+    }
+
+    .dropdown-menu {
+      border: 1px solid var(--yc-line);
+      border-radius: var(--luncher-radius);
+      box-shadow: var(--luncher-shadow-lg);
+    }
+  }
+
+  &[data-bs-theme="dark"] .navbar {
+    background:
+      yc-fuji('%23172038', '%23aebbd0') right 24% bottom / auto 82% no-repeat,
+      var(--luncher-navbar-bg) !important;
+  }
+
+  // ---------- Titulek dne: dřevěná cedule kempu se dvěma hřebíky ----------
+  .day-navigator .title {
+    position: relative;
+    display: inline-block;
+    padding: 8px 34px 10px;
+    font-family: var(--yc-display);
+    font-weight: 500;
+    font-size: 1.6rem;
+    color: #fdf3e1 !important;
+    text-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
+    // Letokruhy a vlákna dřeva
+    background:
+      repeating-linear-gradient(178deg, rgb(255 255 255 / 0.05) 0 3px, transparent 3px 9px),
+      repeating-linear-gradient(181deg, rgb(0 0 0 / 0.07) 0 2px, transparent 2px 13px),
+      linear-gradient(180deg, #9a6743, var(--yc-wood));
+    border: 3px solid var(--yc-wood-dark);
+    border-radius: 8px;
+    box-shadow: 0 4px 0 var(--yc-wood-dark), 0 8px 16px rgb(90 58 36 / 0.25);
+
+    // Hřebíky v rozích cedule
+    &::before, &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      width: 7px;
+      height: 7px;
+      margin-top: -3.5px;
+      border-radius: 50%;
+      background: radial-gradient(circle at 35% 35%, #e9e2d6, #7d756b);
+      box-shadow: 0 1px 1px rgb(0 0 0 / 0.4);
+    }
+
+    &::before {
+      left: 12px;
+    }
+
+    &::after {
+      right: 12px;
+    }
+
+    &.text-muted {
+      // Vybledlé dřevo pro jiný než dnešní den
+      color: #f1ebe2 !important;
+      background:
+        repeating-linear-gradient(178deg, rgb(255 255 255 / 0.05) 0 3px, transparent 3px 9px),
+        linear-gradient(180deg, #a59a8e, #8a7f73);
+      border-color: #6e655b;
+      box-shadow: 0 4px 0 #6e655b, 0 8px 16px rgb(0 0 0 / 0.15);
+    }
+  }
+
+  // ---------- Karty podniků: stránky průvodce, hlavička jako les ----------
+  .restaurant-card {
+    border: 1px solid var(--yc-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    overflow: hidden;
+
+    &:hover {
+      transform: translateY(-3px);
+      border-color: var(--yc-line);
+      box-shadow: var(--luncher-shadow-lg);
+    }
+
+    .restaurant-header {
+      // Řada smrčků podél spodního okraje hlavičky
+      background:
+        yc-pines('%232c4d36') left bottom / 44px 20px repeat-x,
+        linear-gradient(180deg, #4d7d58, var(--yc-forest));
+      padding-bottom: 26px;
+
+      // Při najetí podzimní les
+      &:hover {
+        background:
+          yc-pines('%23964320') left bottom / 44px 20px repeat-x,
+          linear-gradient(180deg, var(--yc-ember-bright), var(--yc-ember));
+      }
+
+      small {
+        color: rgb(255 255 255 / 0.82);
+      }
+    }
+  }
+
+  &[data-bs-theme="dark"] .restaurant-card .restaurant-header:not(:hover) {
+    background:
+      yc-pines('%230f1d16') left bottom / 44px 20px repeat-x,
+      linear-gradient(180deg, #2f5a3c, var(--yc-forest-deep));
+  }
+
+  &[data-bs-theme="dark"] .restaurant-card .restaurant-header:hover {
+    background:
+      yc-pines('%235a2a12') left bottom / 44px 20px repeat-x,
+      linear-gradient(180deg, #c8692e, #9a4a1f);
+  }
+
+  .food-table tbody tr:hover > td {
+    background: #f8efe0;
+  }
+
+  &[data-bs-theme="dark"] .food-table tbody tr:hover > td {
+    background: #222d48;
+  }
+
+  .food-price {
+    color: var(--yc-ember);
+    font-weight: 700;
+  }
+
+  // ---------- Panely a tabulka voleb ----------
+  .choice-section,
+  .choices-table,
+  .pizza-section,
+  .no-votes {
+    border: 1px solid var(--yc-line);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+  }
+
+  .choices-table {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  // Sloupec s podnikem: štítek z kraftového papíru
+  .choices-table > tbody > tr > td:first-child {
+    background: var(--yc-kraft);
+    color: var(--yc-wood-dark);
+    font-weight: 700;
+    border-right: 2px dashed var(--yc-line);
+  }
+
+  &[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child {
+    color: var(--yc-ember-bright);
+  }
+
+  // Bootstrap karty (skupinové objednávky apod.) a seznamy
+  .card {
+    border: 1px solid var(--yc-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(--yc-kraft);
+      border-bottom: 2px dashed var(--yc-line);
+      font-weight: 700;
+
+      &:first-child {
+        border-radius: calc(var(--luncher-radius-lg) - 1px) calc(var(--luncher-radius-lg) - 1px) 0 0;
+      }
+    }
+
+    .table {
+      --bs-table-bg: transparent;
+      margin-bottom: 0;
+
+      > :last-child > tr:last-child > * {
+        border-bottom-width: 0;
+      }
+    }
+  }
+
+  .list-group {
+    border-radius: var(--luncher-radius);
+    overflow: hidden;
+    border: 1px solid var(--yc-line);
+
+    > .list-group-item {
+      border-left: none;
+      border-right: none;
+
+      &:first-child {
+        border-top: none;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .form-select, .form-control,
+  input[type="text"], input[type="email"], input[type="password"] {
+    border-radius: var(--luncher-radius-sm);
+    border: 1px solid var(--yc-line);
+
+    &:focus {
+      border-color: var(--yc-ember-bright);
+      box-shadow: 0 0 0 3px rgb(232 131 58 / 0.25);
+    }
+  }
+
+  // ---------- Tlačítka: oblé, teplé barvy ohně ----------
+  .btn {
+    border-radius: 999px;
+    font-weight: 700;
+    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
+  }
+
+  .btn-primary {
+    background: linear-gradient(180deg, var(--yc-ember-bright), var(--yc-ember));
+    border: none;
+    color: #fff;
+    box-shadow: 0 3px 0 #7a3518;
+
+    // Při najetí se rozhoří
+    &:hover {
+      background: linear-gradient(180deg, #f39a4f, #c45f2e);
+      color: #fff;
+      box-shadow: 0 3px 0 #7a3518, 0 0 14px rgb(232 131 58 / 0.55);
+      transform: translateY(-1px);
+    }
+
+    &:active {
+      transform: translateY(2px) !important;
+      box-shadow: 0 1px 0 #7a3518 !important;
+    }
+
+    &:disabled {
+      background: #d9cfc2;
+      color: #8f8275;
+      box-shadow: none;
+    }
+  }
+
+  &[data-bs-theme="dark"] .btn-primary {
+    color: #2a1608;
+
+    &:hover {
+      color: #2a1608;
+    }
+
+    &:disabled {
+      background: #2f3a4f;
+      color: #9189a0;
+    }
+  }
+
+  .btn-outline-primary {
+    background: var(--luncher-bg-card);
+    border: 2px solid var(--yc-ember-bright);
+    color: var(--luncher-primary);
+
+    &:hover {
+      background: var(--luncher-primary-light);
+      border-color: var(--yc-ember-bright);
+      color: var(--luncher-primary);
+    }
+  }
+
+  .btn-secondary {
+    background: var(--yc-forest);
+    border: none;
+    color: #fff;
+    box-shadow: 0 3px 0 var(--yc-forest-deep);
+
+    &:hover {
+      background: #4d7d58;
+      color: #fff;
+    }
+  }
+
+  &[data-bs-theme="dark"] .btn-secondary {
+    background: #2f5a3c;
+    box-shadow: 0 3px 0 #0f1d16;
+
+    &:hover {
+      background: #3a6b49;
+    }
+  }
+
+  .btn-danger {
+    background: var(--yc-maple);
+    border: none;
+    box-shadow: 0 3px 0 #8a3322;
+  }
+
+  .action-icon:hover {
+    background: var(--luncher-primary-light);
+    color: var(--luncher-primary);
+  }
+
+  // ---------- Modaly: obloha nad kempem se siluetou Fuji ----------
+  .modal-content {
+    border: 1px solid var(--yc-line);
+    border-radius: var(--luncher-radius-xl);
+    box-shadow: 0 16px 40px rgb(43 58 85 / 0.3);
+    overflow: hidden;
+  }
+
+  .modal-header {
+    background:
+      yc-fuji('%233e5374', '%23e6edf5') right 40px bottom / auto 70% no-repeat,
+      linear-gradient(180deg, #24314a, #2b3a55);
+    border-bottom: 3px solid var(--yc-ember-bright);
+
+    .modal-title, .modal-title h2 {
+      color: #fdf8ef;
+      font-family: var(--yc-display);
+      font-weight: 500;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+    }
+  }
+
+  // ---------- Footer: les, který vyrůstá z patičky ----------
+  .footer {
+    position: relative;
+    border-top: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: -19px;
+      height: 20px;
+      background: yc-pines('%232b3a55') left bottom / 44px 20px repeat-x;
+      pointer-events: none;
+    }
+
+    a {
+      color: var(--yc-ember-bright);
+    }
+  }
+
+  &[data-bs-theme="dark"] .footer::before {
+    background-image: yc-pines('%230b1120');
+  }
+}
+
+// Mihotání plamene táboráku
+@keyframes yc-flicker {
+  0%, 100% { transform: scale(1) rotate(-2deg); filter: brightness(1); }
+  30% { transform: scale(1.08, 1.14) rotate(2deg); filter: brightness(1.15); }
+  55% { transform: scale(0.96, 1.02) rotate(-1deg); filter: brightness(0.95); }
+  80% { transform: scale(1.04, 1.1) rotate(1deg); filter: brightness(1.1); }
+}
+
+@media (max-width: 575.98px) {
+  #{$yc} .day-navigator .title {
+    font-size: 1.3rem;
+    padding: 6px 28px 8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #{$yc} .navbar .navbar-brand::after {
+    animation: none;
+  }
+}