feat: nový vzhled Frieren

client/src/components/modals/SpinWheelModal.scss

@@ -2595,6 +2595,266 @@
   }
 }
 
+// ============================================
+// STYL FRIEREN kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách družiny a krajiny (fialová Fern, levandule, Himmelova
+// modř, zlato, louka, růžová), zlaté linky a střed jako magický kruh.
+// ============================================
+.spin-wheel-modal.spin-theme-frieren {
+  --fr-font: 'Nunito', sans-serif;
+  --fr-display: 'Cormorant Garamond', Georgia, serif;
+  --fr-violet: #5b4a9e;
+  --fr-violet-deep: #463882;
+  --fr-lavender: #8e7cc3;
+  --fr-gold: #bf9b4a;
+  --fr-line: #dcd8ea;
+  --fr-panel: #ffffff;
+  --fr-text: #2e2a3d;
+  --wheel-c0: #5b4a9e;
+  --wheel-c1: #8e7cc3;
+  --wheel-c2: #5b8fc7;
+  --wheel-c3: #bf9b4a;
+  --wheel-c4: #6f9f6a;
+  --wheel-c5: #c76a96;
+  --wheel-rim: #3d3466;
+  --wheel-hub: #e9c86a;
+
+  font-family: var(--fr-font);
+
+  .modal-content {
+    border: 1px solid var(--fr-line);
+    border-radius: 18px;
+    overflow: hidden;
+    background: linear-gradient(180deg, #e6ecf7 0, #f6f5fb 180px);
+    color: var(--fr-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
+      linear-gradient(90deg, #3d3466, #4b4380);
+    border-bottom: none;
+
+    h2 {
+      color: #f6f3ff;
+      font-family: var(--fr-display);
+      font-weight: 700;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 1px solid var(--fr-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--fr-display);
+    font-weight: 700;
+    font-size: 1.05rem;
+    background: #ebe8f3;
+    color: #8a869b;
+    border-radius: 999px;
+    padding: 2px 16px;
+
+    &.active {
+      background: var(--fr-violet);
+      color: #fff;
+      box-shadow: 0 0 10px rgb(142 124 195 / 0.5);
+    }
+
+    &.done {
+      background: #e4def6;
+      color: var(--fr-violet-deep);
+    }
+  }
+
+  .btn {
+    font-family: var(--fr-font);
+    font-weight: 800;
+    border-radius: 999px;
+  }
+
+  .btn-primary {
+    background: linear-gradient(135deg, var(--fr-violet), var(--fr-lavender));
+    border: none;
+    color: #fff;
+    box-shadow: 0 3px 10px rgb(91 74 158 / 0.25);
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, var(--fr-violet-deep), var(--fr-violet));
+      color: #fff;
+      box-shadow: 0 0 0 3px rgb(191 155 74 / 0.35), 0 0 18px rgb(142 124 195 / 0.55);
+    }
+
+    &:disabled {
+      background: #d9d6e4;
+      color: #8a869b;
+      box-shadow: none;
+    }
+  }
+
+  // Tlačítko roztočení — seslání kouzla
+  .spin-button {
+    font-family: var(--fr-display);
+    font-weight: 700;
+    font-size: 1.35rem;
+    padding: 8px 40px;
+  }
+
+  .btn-outline-primary {
+    background: var(--fr-panel);
+    border: 1px solid var(--fr-lavender);
+    color: var(--fr-violet);
+
+    &:hover {
+      background: #ebe6f7;
+      color: var(--fr-violet);
+    }
+  }
+
+  .btn-secondary {
+    background: #6f7a92;
+    border: none;
+    color: #fff;
+  }
+
+  .spin-source {
+    background: #ebe8f3;
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--fr-text);
+
+      &:hover {
+        background: var(--fr-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 800;
+
+    strong {
+      color: var(--fr-violet);
+    }
+  }
+
+  .spin-options {
+    background: var(--fr-panel);
+    border: 1px solid var(--fr-line);
+    border-radius: 14px;
+
+    li:hover {
+      background: #f1eef9;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 1px solid var(--fr-gold);
+    color: var(--fr-violet);
+    font-family: var(--fr-display);
+    font-size: 1.05rem;
+  }
+
+  .spin-empty {
+    border-color: var(--fr-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--fr-gold);
+    filter: drop-shadow(0 0 4px rgb(233 200 106 / 0.7));
+  }
+
+  .spin-seg {
+    stroke: #e9c86a;
+    stroke-width: 1.5;
+  }
+
+  .spin-seg-label {
+    font-family: var(--fr-font);
+    font-weight: 800;
+  }
+}
+
+// Tmavý režim — noc pod hvězdami
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-frieren {
+  --fr-violet: #b3a3ea;
+  --fr-violet-deep: #9a88dc;
+  --fr-gold: #dcc07a;
+  --fr-line: #2e2b45;
+  --fr-panel: #1b1a2b;
+  --fr-text: #eeebf7;
+  --wheel-c0: #45397a;
+  --wheel-rim: #0c0b16;
+
+  .modal-content {
+    background:
+      radial-gradient(1.2px 1.2px at 30px 40px, rgb(255 255 255 / 0.85), transparent) 0 0 / 200px 200px,
+      radial-gradient(1px 1px at 140px 110px, rgb(220 210 255 / 0.7), transparent) 0 0 / 200px 200px,
+      radial-gradient(circle at 88% 8%, rgb(255 244 210 / 0.16) 0 24px, transparent 90px),
+      #11101d;
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
+      #0c0b16;
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #242238;
+    color: #8f8ba5;
+  }
+
+  .spin-steps span.active {
+    color: #17142a;
+  }
+
+  .spin-steps span.done {
+    background: #2b2646;
+    color: #c8bbf2;
+  }
+
+  .btn-primary {
+    background: linear-gradient(135deg, #8e7cc3, #b3a3ea);
+    color: #17142a;
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #a593dc, #c8bbf2);
+      color: #17142a;
+    }
+
+    &:disabled {
+      background: #2e2b45;
+      color: #8f8ba5;
+    }
+  }
+
+  .btn-outline-primary:hover {
+    background: #2b2646;
+  }
+
+  .btn-secondary {
+    background: #2e2b45;
+  }
+
+  .spin-source {
+    background: #242238;
+  }
+
+  .spin-options li:hover {
+    background: #242238;
+  }
+
+  .spin-options-header {
+    color: #dcc07a;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;