feat: nový vzhled Totoro

client/src/components/modals/SpinWheelModal.scss

@@ -4710,6 +4710,270 @@
   }
 }
 
+// ============================================
+// STYL MŮJ SOUSED TOTORO kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách filmu (les, Totoro, Kočkobus, žalud, nebe, Mei),
+// krémové linky, okraj tmavě zelený a střed jako Totorovo bříško.
+// ============================================
+.spin-wheel-modal.spin-theme-totoro {
+  --tt-font: 'Kiwi Maru', 'Nunito', sans-serif;
+  --tt-display: 'Yomogi', 'Kiwi Maru', sans-serif;
+  --tt-forest: #3f6b2f;
+  --tt-forest-deep: #2f5223;
+  --tt-moss: #8bb06a;
+  --tt-catbus: #e39b2f;
+  --tt-line: #d6e2c8;
+  --tt-panel: #fffdf6;
+  --tt-text: #2e3a2c;
+  --wheel-c0: #4f7f3a;
+  --wheel-c1: #7d8a8c;
+  --wheel-c2: #d98a1f;
+  --wheel-c3: #8a5a2b;
+  --wheel-c4: #5b8fb0;
+  --wheel-c5: #c96a7c;
+  --wheel-rim: #2f5223;
+  --wheel-hub: #f2ead3;
+
+  font-family: var(--tt-font);
+
+  .modal-content {
+    border: 1px solid var(--tt-line);
+    border-radius: 22px;
+    overflow: hidden;
+    background:
+      radial-gradient(ellipse 140px 50px at 85% 4%, rgb(255 255 255 / 0.9) 60%, transparent 62%),
+      linear-gradient(180deg, #dff0f3, #f4f8ee 40%);
+    color: var(--tt-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(var(--tt-moss), var(--tt-moss)) left bottom / 100% 4px no-repeat,
+      linear-gradient(160deg, #4b7c38, var(--tt-forest-deep));
+    border-bottom: none;
+    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 4px);
+
+    h2 {
+      color: #fbf7e6;
+      font-family: var(--tt-display);
+      font-weight: 400;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 1px solid var(--tt-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--tt-display);
+    background: #e6ecdc;
+    color: #8c9786;
+    border-radius: 10px;
+    padding: 3px 16px;
+
+    &.active {
+      background: var(--tt-forest);
+      color: #fbf7e6;
+    }
+
+    &.done {
+      background: var(--tt-catbus);
+      color: #3a2a12;
+    }
+  }
+
+  .btn {
+    font-family: var(--tt-font);
+    font-weight: 500;
+    border-radius: 10px;
+  }
+
+  .btn-primary {
+    background: linear-gradient(180deg, #4b7c38, var(--tt-forest));
+    border: 1px solid var(--tt-forest-deep);
+    color: #fbf7e6;
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(180deg, #55893f, #3a6529);
+      color: #fff;
+      box-shadow: 0 4px 12px rgb(63 107 47 / 0.35);
+    }
+
+    &:disabled {
+      background: #dfe6d6;
+      border-color: #d0d9c5;
+      color: #8c9786;
+    }
+  }
+
+  // Tlačítko roztočení — přijíždí Kočkobus
+  .spin-button {
+    font-family: var(--tt-display);
+    font-size: 1.3rem;
+    padding: 10px 38px;
+
+    &::before {
+      content: '🚌 ';
+      font-size: 0.85em;
+    }
+  }
+
+  .btn-outline-primary {
+    background: var(--tt-panel);
+    border: 1px solid var(--tt-forest);
+    color: var(--tt-forest);
+
+    &:hover {
+      background: #e6f0dc;
+      color: var(--tt-forest);
+    }
+  }
+
+  .btn-secondary {
+    background: var(--tt-catbus);
+    border: 1px solid #c47f1a;
+    color: #3a2a12;
+  }
+
+  .spin-source {
+    background: #e6ecdc;
+    border-radius: 12px;
+
+    > .btn {
+      border-radius: 10px !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--tt-text);
+
+      &:hover {
+        background: var(--tt-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 500;
+
+    strong {
+      color: var(--tt-forest);
+      font-family: var(--tt-display);
+    }
+  }
+
+  .spin-options {
+    background: var(--tt-panel);
+    border: 1px solid var(--tt-line);
+    border-radius: 14px;
+
+    li:hover {
+      background: #f1f6e8;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 2px solid var(--tt-moss);
+    color: var(--tt-forest);
+    font-family: var(--tt-display);
+  }
+
+  .spin-empty {
+    border-color: var(--tt-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--tt-catbus);
+    filter: drop-shadow(0 2px 2px rgb(46 58 44 / 0.4));
+  }
+
+  .spin-wheel-hub {
+    stroke: #7d8a8c;
+    stroke-width: 3;
+  }
+
+  .spin-seg {
+    stroke: #fffdf3;
+    stroke-width: 2;
+  }
+
+  .spin-seg-label {
+    font-family: var(--tt-display);
+    font-weight: 400;
+  }
+}
+
+// Tmavý režim — noc u kafrovníku
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-totoro {
+  --tt-forest: #9fd07a;
+  --tt-line: #2a3d33;
+  --tt-panel: #172a27;
+  --tt-text: #eef2e4;
+  --wheel-rim: #0d211b;
+  --wheel-hub: #4d5a5c;
+
+  .modal-content {
+    border-color: #2a3d33;
+    background:
+      radial-gradient(circle at 90% 6%, #fdf6d8 0 14px, rgb(253 246 216 / 0.2) 16px, transparent 50px),
+      linear-gradient(180deg, #0c1826, #10221f);
+    box-shadow: 0 0 30px rgb(216 242 122 / 0.1);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(#2f5223, #2f5223) left bottom / 100% 4px no-repeat,
+      linear-gradient(160deg, #1f3a2a, #142a1f);
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #1e3530;
+    color: #84968a;
+  }
+
+  .spin-steps span.active {
+    color: #10221a;
+  }
+
+  .btn-primary {
+    background: #9fd07a;
+    border-color: #7fb35a;
+    color: #10221a;
+
+    &:hover:not(:disabled) {
+      background: #b9e09a;
+      color: #10221a;
+    }
+
+    &:disabled {
+      background: #1e3530;
+      border-color: #2a3d33;
+      color: #84968a;
+    }
+  }
+
+  .btn-outline-primary:hover {
+    background: #1f3524;
+  }
+
+  .spin-source {
+    background: #1e3530;
+  }
+
+  .spin-options li:hover {
+    background: #1e3530;
+  }
+
+  .spin-seg {
+    stroke: #0f1c22;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;