feat: přidání vzhledu My Little Pony

client/src/components/modals/SpinWheelModal.scss

@@ -536,6 +536,244 @@
   }
 }
 
+// ============================================
+// STYL MY LITTLE PONY kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách Mane 6, duhový lem Rainbow Dash, fialová Twilight
+// a růžová Pinkie Pie, kulatá „bonbonová" tlačítka.
+// ============================================
+.spin-wheel-modal.spin-theme-mlp {
+  --mlp-font: 'Fredoka', 'Nunito', 'Inter', sans-serif;
+  --mlp-twilight: #8e4fd1;
+  --mlp-twilight-deep: #6a35b0;
+  --mlp-twilight-shadow: #4b2287;
+  --mlp-pinkie: #f06aa6;
+  --mlp-pinkie-deep: #d6417f;
+  --mlp-panel: #faf5ff;
+  --mlp-border: #e5d4f7;
+  --mlp-text: #2e1f47;
+  // Mane 6: Twilight, Pinkie, Rainbow Dash, Applejack, Fluttershy, Rarity
+  --wheel-c0: #9b5fe0;
+  --wheel-c1: #f06aa6;
+  --wheel-c2: #1e98d3;
+  --wheel-c3: #f37033;
+  --wheel-c4: #e3b829;
+  --wheel-c5: #5b4fc9;
+  --wheel-rim: #ec3d8f;
+  --wheel-hub: #ffffff;
+
+  font-family: var(--mlp-font);
+
+  .modal-content {
+    border: 4px solid var(--mlp-border);
+    border-radius: 26px;
+    overflow: hidden;
+    background-color: #fff;
+    background-image:
+      radial-gradient(circle at 20% 30%, rgb(142 79 209 / 0.10) 0 2px, transparent 3px),
+      radial-gradient(circle at 70% 80%, rgb(240 106 166 / 0.10) 0 2px, transparent 3px);
+    background-size: 120px 120px, 170px 170px;
+    color: var(--mlp-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(90deg, #ee4144 0 16.6%, #f37033 16.6% 33.3%, #fdf6af 33.3% 50%, #62bc4d 50% 66.6%, #1e98d3 66.6% 83.3%, #672f89 83.3% 100%) bottom / 100% 5px no-repeat,
+      linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-twilight) 60%, var(--mlp-pinkie));
+    border-bottom: none;
+
+    h2 {
+      color: #fff;
+      font-family: var(--mlp-font);
+      font-weight: 700;
+      text-shadow: 0 2px 0 var(--mlp-twilight-shadow);
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 3px dotted var(--mlp-border);
+  }
+
+  .spin-steps span {
+    font-family: var(--mlp-font);
+    background: #f1e6fc;
+    color: #9a8ab3;
+    border-radius: 999px;
+    padding: 4px 16px;
+
+    &.active {
+      background: linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-pinkie));
+      color: #fff;
+    }
+
+    &.done {
+      background: var(--mlp-twilight);
+      color: #fff;
+    }
+  }
+
+  .btn {
+    font-family: var(--mlp-font);
+    font-weight: 600;
+    border-radius: 999px;
+    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
+
+    &:active:not(:disabled) {
+      transform: translateY(3px);
+      box-shadow: 0 1px 0 var(--mlp-btn-shadow, transparent);
+    }
+  }
+
+  .btn-primary {
+    --mlp-btn-shadow: var(--mlp-twilight-shadow);
+    background: linear-gradient(180deg, #b07ae6, var(--mlp-twilight-deep));
+    border: none;
+    box-shadow: 0 4px 0 var(--mlp-twilight-shadow);
+    color: #fff;
+    text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
+
+    &:disabled {
+      background: #c9bdd9;
+      box-shadow: 0 4px 0 #a99cbc;
+    }
+  }
+
+  .spin-button {
+    --mlp-btn-shadow: #a52c63;
+    background: linear-gradient(180deg, #ff94c4, var(--mlp-pinkie-deep));
+    box-shadow: 0 5px 0 #a52c63, 0 0 18px rgb(240 106 166 / 0.45);
+    font-size: 1.15rem;
+    padding: 12px 36px;
+  }
+
+  .btn-outline-primary {
+    --mlp-btn-shadow: var(--mlp-border);
+    background: #fff;
+    border: 2px solid var(--mlp-twilight);
+    color: var(--mlp-twilight-deep);
+    box-shadow: 0 4px 0 var(--mlp-border);
+
+    &:hover {
+      background: #f1e6fc;
+      color: var(--mlp-twilight-deep);
+    }
+  }
+
+  .btn-secondary {
+    --mlp-btn-shadow: var(--mlp-border);
+    background: #fff;
+    border: 2px solid var(--mlp-border);
+    color: var(--mlp-text);
+    box-shadow: 0 4px 0 var(--mlp-border);
+  }
+
+  .spin-source {
+    background: #f1e6fc;
+
+    > .btn-primary {
+      background: linear-gradient(180deg, #b07ae6, var(--mlp-twilight-deep));
+      box-shadow: 0 2px 0 var(--mlp-twilight-shadow) !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--mlp-twilight-deep);
+
+      &:hover {
+        background: #fff;
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 700;
+
+    strong {
+      color: var(--mlp-pinkie-deep);
+    }
+  }
+
+  .spin-options {
+    background: var(--mlp-panel);
+    border: 3px solid var(--mlp-border);
+    border-radius: 18px;
+
+    li:hover {
+      background: #fff0f7;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 3px solid var(--mlp-border);
+    color: var(--mlp-twilight-deep);
+  }
+
+  .spin-empty {
+    border-color: var(--mlp-border);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--mlp-pinkie-deep);
+  }
+
+  .spin-seg {
+    stroke: #fff;
+    stroke-width: 2.5;
+  }
+
+  .spin-seg-label {
+    font-family: var(--mlp-font);
+    font-weight: 700;
+  }
+}
+
+// Tmavý režim — noční obloha princezny Luny
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-mlp {
+  --mlp-panel: #1d1745;
+  --mlp-border: #362c6e;
+  --mlp-text: #f2edff;
+  --wheel-hub: #1d1745;
+
+  .modal-content {
+    background-color: #120e2e;
+    background-image:
+      radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.5) 0 1.5px, transparent 2.5px),
+      radial-gradient(circle at 70% 80%, rgb(183 198 255 / 0.35) 0 1px, transparent 2px);
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #282058;
+    color: #8a7fb5;
+  }
+
+  .btn-outline-primary, .btn-secondary {
+    background: #1d1745;
+    color: #f2edff;
+  }
+
+  .spin-source {
+    background: #282058;
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: #c2b6e6;
+
+      &:hover {
+        background: #1d1745;
+        color: #fff;
+      }
+    }
+  }
+
+  .spin-options li:hover {
+    background: #2e2160;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;