feat: nový vzhled Sumikko Gurashi

client/src/components/modals/SpinWheelModal.scss

@@ -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;