feat: nový vzhled Gudetama

client/src/components/modals/SpinWheelModal.scss

@@ -3654,6 +3654,266 @@
   }
 }
 
+// ============================================
+// STYL GUDETAMA kola štěstí (dle stylu zvoleného v nastavení).
+// Kolo leží na litinové pánvi: výseče v barvách snídaně (žloutek, bílek,
+// slanina, toust, sójová omáčka, nori), střed jako žloutek.
+// ============================================
+.spin-wheel-modal.spin-theme-gudetama {
+  --gt-font: 'Nunito', sans-serif;
+  --gt-display: 'Fredoka', 'Nunito', sans-serif;
+  --gt-yolk: #ffd23f;
+  --gt-yolk-shadow: #d99a00;
+  --gt-ink: #4a3520;
+  --gt-line: #efe3c4;
+  --gt-panel: #ffffff;
+  --wheel-c0: #ffd23f;
+  --wheel-c1: #f5e6b8;
+  --wheel-c2: #f2a7a0;
+  --wheel-c3: #e8c08a;
+  --wheel-c4: #c9a07a;
+  --wheel-c5: #b8d48f;
+  --wheel-label: #4a3520;
+  --wheel-rim: #2b2725;
+  --wheel-hub: #ffd23f;
+
+  font-family: var(--gt-font);
+
+  .modal-content {
+    border: 2px solid var(--gt-line);
+    border-radius: 24px;
+    overflow: hidden;
+    background:
+      linear-gradient(rgb(74 53 32 / 0.05) 1.5px, transparent 1.5px) 0 0 / 46px 46px,
+      linear-gradient(90deg, rgb(74 53 32 / 0.05) 1.5px, transparent 1.5px) 0 0 / 46px 46px,
+      #fbf8f1;
+    color: var(--gt-ink);
+  }
+
+  .modal-header {
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10'%3E%3Cpath d='M0 3Q12 0 24 3T48 3V7Q36 10 24 7T0 7Z' fill='%23f2a7a0'/%3E%3Cpath d='M0 5Q12 2 24 5T48 5' stroke='%23c8553d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") left bottom / 48px 10px repeat-x,
+      linear-gradient(180deg, #ffdc5c, var(--gt-yolk));
+    border-bottom: none;
+    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 8px);
+
+    h2 {
+      color: var(--gt-ink);
+      font-family: var(--gt-display);
+      font-weight: 600;
+    }
+  }
+
+  .modal-footer {
+    border-top: 2px solid var(--gt-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--gt-display);
+    font-weight: 600;
+    background: #f5ecd6;
+    color: #a3927c;
+    border-radius: 999px;
+    padding: 2px 16px;
+
+    // Text na žloutku je vždy tmavý (i v tmavém režimu)
+    &.active {
+      background: var(--gt-yolk);
+      color: #4a3520;
+      box-shadow: 0 3px 0 var(--gt-yolk-shadow);
+    }
+
+    &.done {
+      background: #fffdf5;
+      color: #a8650a;
+      box-shadow: inset 0 0 0 2px var(--gt-yolk);
+    }
+  }
+
+  .btn {
+    font-family: var(--gt-font);
+    font-weight: 800;
+    border-radius: 999px;
+    transition: transform 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
+  }
+
+  .btn-primary {
+    background: var(--gt-yolk);
+    border: none;
+    color: #4a3520;
+    box-shadow: 0 4px 0 var(--gt-yolk-shadow);
+
+    &:hover:not(:disabled) {
+      background: #ffdc5c;
+      color: #4a3520;
+    }
+
+    &:disabled {
+      background: #efe6cf;
+      color: #a3927c;
+      box-shadow: none;
+    }
+  }
+
+  // Tlačítko roztočení — „…tak jo, no"
+  .spin-button {
+    font-family: var(--gt-display);
+    font-weight: 600;
+    font-size: 1.3rem;
+    padding: 8px 40px;
+  }
+
+  .btn-outline-primary {
+    background: var(--gt-panel);
+    border: 2px solid #f5b301;
+    color: #a8650a;
+
+    &:hover {
+      background: #fff3c4;
+      color: #a8650a;
+    }
+  }
+
+  .btn-secondary {
+    background: #6b4a2e;
+    border: none;
+    color: #fffdf5;
+    box-shadow: 0 4px 0 #4a3220;
+  }
+
+  .spin-source {
+    background: #f5ecd6;
+
+    > .btn-primary {
+      box-shadow: none !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--gt-ink);
+
+      &:hover {
+        background: var(--gt-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 800;
+
+    strong {
+      color: #a8650a;
+    }
+  }
+
+  .spin-options {
+    background: var(--gt-panel);
+    border: 2px solid var(--gt-line);
+    border-radius: 18px;
+
+    li:hover {
+      background: #fff8dc;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 2px solid #f5dc8a;
+    color: #a8650a;
+    font-family: var(--gt-display);
+  }
+
+  .spin-empty {
+    border-color: var(--gt-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: #c8553d;
+  }
+
+  .spin-wheel-hub {
+    stroke: #fffdf5;
+  }
+
+  .spin-seg {
+    stroke: #2b2725;
+    stroke-width: 1.5;
+  }
+
+  .spin-seg-label {
+    font-family: var(--gt-display);
+    font-weight: 600;
+  }
+}
+
+// Tmavý režim — litinová pánev
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-gudetama {
+  --gt-ink: #f5ead2;
+  --gt-line: #3a332e;
+  --gt-panel: #211d1a;
+  --wheel-rim: #3a3430;
+
+  .modal-content {
+    background:
+      radial-gradient(circle at 50% 50%, rgb(255 210 63 / 0.08) 0 120px, transparent 300px),
+      #141210;
+  }
+
+  .modal-header {
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10'%3E%3Cpath d='M0 3Q12 0 24 3T48 3V7Q36 10 24 7T0 7Z' fill='%23f2a7a0'/%3E%3Cpath d='M0 5Q12 2 24 5T48 5' stroke='%23c8553d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") left bottom / 48px 10px repeat-x,
+      #0e0d0c;
+
+    h2 {
+      color: #ffd23f;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+    }
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #2b2622;
+    color: #968a7a;
+  }
+
+  .spin-steps span.done {
+    background: #2b2622;
+    color: #ffd23f;
+  }
+
+  .btn-primary:disabled {
+    background: #3a332e;
+    color: #968a7a;
+  }
+
+  .btn-outline-primary {
+    color: #ffd23f;
+
+    &:hover {
+      background: #3a3018;
+      color: #ffe17a;
+    }
+  }
+
+  .spin-source {
+    background: #2b2622;
+  }
+
+  .spin-options li:hover {
+    background: #2b2622;
+  }
+
+  .spin-options-header {
+    color: #ffd23f;
+    border-bottom-color: #4a3d1c;
+  }
+
+  .spin-result strong {
+    color: #ffd23f;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;