feat: nový vzhled Apothecary Diaries

client/src/components/modals/SpinWheelModal.scss

@@ -2349,6 +2349,252 @@
   }
 }
 
+// ============================================
+// STYL APOTHECARY DIARIES kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách vnitřního paláce (rumělka, nefrit, zlato, inkoust,
+// fialová Jinshiho, švestkový květ), zlaté linky a střed jako zlatá pečeť.
+// ============================================
+.spin-wheel-modal.spin-theme-apothecary {
+  --apo-font: 'Nunito', sans-serif;
+  --apo-display: 'Shippori Mincho', 'Noto Serif JP', serif;
+  --apo-vermilion: #a8322a;
+  --apo-vermilion-deep: #84241d;
+  --apo-jade: #2f7d62;
+  --apo-gold: #c9a24a;
+  --apo-line: #e0d4bb;
+  --apo-panel: #fffcf4;
+  --apo-text: #24201c;
+  --wheel-c0: #a8322a;
+  --wheel-c1: #2f7d62;
+  --wheel-c2: #c9a24a;
+  --wheel-c3: #24201c;
+  --wheel-c4: #6b5aa6;
+  --wheel-c5: #c76a86;
+  --wheel-rim: #3a1f14;
+  --wheel-hub: #d9b65e;
+
+  font-family: var(--apo-font);
+
+  .modal-content {
+    border: 1px solid var(--apo-gold);
+    border-radius: 10px;
+    overflow: hidden;
+    background: #f5efe1;
+    color: var(--apo-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(var(--apo-gold), var(--apo-gold)) left bottom / 100% 2px no-repeat,
+      linear-gradient(var(--apo-gold), var(--apo-gold)) left bottom 4px / 100% 1px no-repeat,
+      #24201c;
+    border-bottom: none;
+
+    h2 {
+      color: #fdf6e6;
+      font-family: var(--apo-display);
+      font-weight: 800;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 3px double var(--apo-gold);
+  }
+
+  .spin-steps span {
+    font-family: var(--apo-display);
+    font-weight: 800;
+    background: #ece3d0;
+    color: #8b7f70;
+    border-radius: 3px;
+    padding: 4px 16px;
+
+    &.active {
+      background: var(--apo-vermilion);
+      color: #fdf6e6;
+      box-shadow: inset 0 0 0 2px rgb(201 162 74 / 0.6);
+    }
+
+    &.done {
+      background: var(--apo-jade);
+      color: #fff;
+    }
+  }
+
+  .btn {
+    font-family: var(--apo-font);
+    font-weight: 800;
+    border-radius: 3px;
+  }
+
+  .btn-primary {
+    background: var(--apo-vermilion);
+    border: 1px solid var(--apo-vermilion-deep);
+    color: #fdf6e6;
+    box-shadow: inset 0 0 0 2px rgb(201 162 74 / 0.55);
+
+    &:hover:not(:disabled) {
+      background: var(--apo-vermilion-deep);
+      color: #fdf6e6;
+      box-shadow: inset 0 0 0 2px var(--apo-gold), 0 0 12px rgb(201 162 74 / 0.45);
+    }
+
+    &:disabled {
+      background: #d8cfbf;
+      border-color: #d8cfbf;
+      color: #8b7f70;
+      box-shadow: none;
+    }
+  }
+
+  // Tlačítko roztočení — zlatá pečeť
+  .spin-button {
+    font-family: var(--apo-display);
+    font-size: 1.2rem;
+    padding: 10px 38px;
+  }
+
+  .btn-outline-primary {
+    background: var(--apo-panel);
+    border: 1px solid var(--apo-gold);
+    color: var(--apo-vermilion);
+
+    &:hover {
+      background: #f6e2dc;
+      color: var(--apo-vermilion);
+    }
+  }
+
+  .btn-secondary {
+    background: var(--apo-jade);
+    border: 1px solid #22604a;
+    color: #fff;
+  }
+
+  .spin-source {
+    background: #ece3d0;
+    border-radius: 4px;
+
+    > .btn {
+      border-radius: 3px !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--apo-text);
+
+      &:hover {
+        background: var(--apo-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 800;
+
+    strong {
+      color: var(--apo-vermilion);
+    }
+  }
+
+  .spin-options {
+    background: var(--apo-panel);
+    border: 1px solid var(--apo-line);
+    border-radius: 8px;
+
+    li:hover {
+      background: #f4ead6;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 3px double var(--apo-gold);
+    color: var(--apo-vermilion);
+    font-family: var(--apo-display);
+  }
+
+  .spin-empty {
+    border-color: var(--apo-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--apo-vermilion);
+    filter: drop-shadow(0 2px 1px rgb(58 31 20 / 0.4));
+  }
+
+  .spin-seg {
+    stroke: #d9b65e;
+    stroke-width: 2;
+  }
+
+  .spin-seg-label {
+    font-family: var(--apo-display);
+    font-weight: 800;
+  }
+}
+
+// Tmavý režim — noc v paláci pod lampiony
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-apothecary {
+  --apo-vermilion: #d6503f;
+  --apo-vermilion-deep: #b53b2d;
+  --apo-jade: #3f9474;
+  --apo-gold: #d9b65e;
+  --apo-line: #3a2e2a;
+  --apo-panel: #1e1a22;
+  --apo-text: #f2eadb;
+  --wheel-c0: #b53b2d;
+  --wheel-c3: #3a3036;
+  --wheel-rim: #0e0c10;
+
+  .modal-content {
+    background:
+      radial-gradient(circle at 8% 0%, rgb(214 80 63 / 0.22), transparent 35%),
+      radial-gradient(circle at 92% 0%, rgb(232 165 74 / 0.16), transparent 32%),
+      #14121a;
+  }
+
+  .modal-header {
+    background-color: #0e0c10;
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #29232d;
+    color: #948a80;
+  }
+
+  .btn-primary:disabled {
+    background: #3a3036;
+    border-color: #3a3036;
+    color: #948a80;
+  }
+
+  .btn-outline-primary {
+    color: #e8a54a;
+
+    &:hover {
+      background: #3a2618;
+      color: #f2bd6a;
+    }
+  }
+
+  .spin-source {
+    background: #29232d;
+  }
+
+  .spin-options li:hover {
+    background: #29232d;
+  }
+
+  .spin-options-header {
+    color: #d9b65e;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;