feat: nový vzhled My Little Pony G5

client/src/components/modals/SpinWheelModal.scss

@@ -2855,6 +2855,256 @@
   }
 }
 
+// ============================================
+// STYL MY LITTLE PONY (G5) kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách Mane 5 a Misty, bílé linky a střed jako sluníčko Sunny.
+// ============================================
+.spin-wheel-modal.spin-theme-mlpg5 {
+  --g5-font: 'Nunito', sans-serif;
+  --g5-display: 'Baloo 2', 'Nunito', sans-serif;
+  --g5-sunny: #f08a3c;
+  --g5-sunny-deep: #c85a14;
+  --g5-pipp: #ee5fa8;
+  --g5-hitch: #2fa89c;
+  --g5-line: #f3dccb;
+  --g5-panel: #ffffff;
+  --g5-text: #2b2440;
+  --wheel-c0: #f08a3c;
+  --wheel-c1: #ee5fa8;
+  --wheel-c2: #9b6fe0;
+  --wheel-c3: #5a7bd8;
+  --wheel-c4: #2fa89c;
+  --wheel-c5: #6fb1d6;
+  --wheel-rim: #1f8f9a;
+  --wheel-hub: #ffd23f;
+
+  font-family: var(--g5-font);
+
+  .modal-content {
+    border: none;
+    border-radius: 26px;
+    overflow: hidden;
+    background: linear-gradient(180deg, #e2f6f6 0, #fff8f1 200px);
+    color: var(--g5-text);
+  }
+
+  .modal-header {
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12'%3E%3Cpath d='M0 12V6Q20 0 40 6T80 6V12Z' fill='%23e2f6f6'/%3E%3C/svg%3E") left bottom / 80px 12px repeat-x,
+      linear-gradient(120deg, #1f8f9a, #2fa89c);
+    border-bottom: none;
+    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 10px);
+
+    h2 {
+      color: #fff;
+      font-family: var(--g5-display);
+      font-weight: 800;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 2px solid var(--g5-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--g5-display);
+    font-weight: 800;
+    background: #f3ece6;
+    color: #908aa3;
+    border-radius: 999px;
+    padding: 2px 16px;
+
+    &.active {
+      background: linear-gradient(120deg, var(--g5-sunny), var(--g5-pipp));
+      color: #fff;
+    }
+
+    &.done {
+      background: var(--g5-hitch);
+      color: #fff;
+    }
+  }
+
+  .btn {
+    font-family: var(--g5-font);
+    font-weight: 800;
+    border-radius: 999px;
+  }
+
+  .btn-primary {
+    background: linear-gradient(120deg, var(--g5-sunny), var(--g5-pipp));
+    border: none;
+    color: #fff;
+    text-shadow: 0 1px 0 rgb(0 0 0 / 0.15);
+    box-shadow: 0 4px 0 #c43d82;
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(120deg, var(--g5-sunny), var(--g5-pipp));
+      color: #fff;
+      filter: brightness(1.07) saturate(1.1);
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(3px);
+      box-shadow: 0 1px 0 #c43d82;
+    }
+
+    &:disabled {
+      background: #e3dde9;
+      color: #908aa3;
+      text-shadow: none;
+      box-shadow: 0 4px 0 #cbc4d6;
+    }
+  }
+
+  // Tlačítko roztočení — velká buclatá pilulka
+  .spin-button {
+    font-family: var(--g5-display);
+    font-size: 1.35rem;
+    padding: 8px 40px 4px;
+    box-shadow: 0 5px 0 #c43d82, 0 10px 20px -6px rgb(238 95 168 / 0.6);
+  }
+
+  .btn-outline-primary {
+    background: var(--g5-panel);
+    border: 2px solid var(--g5-pipp);
+    color: var(--g5-sunny-deep);
+
+    &:hover {
+      background: #ffeadb;
+      color: var(--g5-sunny-deep);
+    }
+  }
+
+  .btn-secondary {
+    background: var(--g5-hitch);
+    border: none;
+    color: #fff;
+    box-shadow: 0 4px 0 #1e7a70;
+  }
+
+  .spin-source {
+    background: #f3ece6;
+
+    > .btn-primary {
+      box-shadow: none !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--g5-text);
+
+      &:hover {
+        background: var(--g5-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 800;
+
+    strong {
+      color: var(--g5-sunny-deep);
+    }
+  }
+
+  .spin-options {
+    background: var(--g5-panel);
+    border: 1px solid var(--g5-line);
+    border-radius: 20px;
+
+    li:hover {
+      background: #fff1e5;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 2px solid var(--g5-line);
+    color: var(--g5-pipp);
+    font-family: var(--g5-display);
+  }
+
+  .spin-empty {
+    border-color: var(--g5-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--g5-pipp);
+    filter: drop-shadow(0 3px 2px rgb(196 61 130 / 0.45));
+  }
+
+  .spin-seg {
+    stroke: #fff;
+    stroke-width: 3;
+  }
+
+  .spin-seg-label {
+    font-family: var(--g5-display);
+    font-weight: 800;
+  }
+}
+
+// Tmavý režim — noční Bridlewood
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-mlpg5 {
+  --g5-sunny: #ffa560;
+  --g5-sunny-deep: #ff9a4d;
+  --g5-pipp: #ff7cbb;
+  --g5-hitch: #1f8f86;
+  --g5-line: #2c3650;
+  --g5-panel: #1a2233;
+  --g5-text: #f1eefa;
+  --wheel-rim: #0c3a42;
+
+  .modal-content {
+    background:
+      radial-gradient(circle at 12% 20%, rgb(79 209 194 / 0.14) 0 40px, transparent 110px),
+      radial-gradient(circle at 88% 70%, rgb(184 148 242 / 0.16) 0 50px, transparent 130px),
+      #0f1724;
+  }
+
+  .modal-header {
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12'%3E%3Cpath d='M0 12V6Q20 0 40 6T80 6V12Z' fill='%230f1724'/%3E%3C/svg%3E") left bottom / 80px 12px repeat-x,
+      linear-gradient(120deg, #0c3a42, #12505a);
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #222c40;
+    color: #8e89a6;
+  }
+
+  .btn-primary:disabled {
+    background: #2c3650;
+    color: #8e89a6;
+    box-shadow: 0 4px 0 #1f273a;
+  }
+
+  .btn-outline-primary:hover {
+    background: #3a2a26;
+  }
+
+  .btn-secondary {
+    box-shadow: 0 4px 0 #125a54;
+  }
+
+  .spin-source {
+    background: #222c40;
+  }
+
+  .spin-options li:hover {
+    background: #222c40;
+  }
+
+  .spin-seg {
+    stroke: #0f1724;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;