feat: přidání vzhledu Hell Girl

client/src/components/modals/SpinWheelModal.scss

@@ -774,6 +774,245 @@
   }
 }
 
+// ============================================
+// STYL HELL GIRL kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách soumraku a pekla, rudá nit jako lem,
+// černá tuš, papír washi a ostrá tlačítka s písmem mincho.
+// ============================================
+.spin-wheel-modal.spin-theme-hellgirl {
+  --hg-font: 'Shippori Mincho', 'Noto Serif JP', 'Georgia', serif;
+  --hg-crimson: #a3122a;
+  --hg-crimson-deep: #7a0c1f;
+  --hg-crimson-shadow: #4a0612;
+  --hg-panel: #fffbf5;
+  --hg-border: #dccbbb;
+  --hg-text: #1c1012;
+  --wheel-c0: #a3122a;
+  --wheel-c1: #1f1416;
+  --wheel-c2: #c8452a;
+  --wheel-c3: #4b1a4f;
+  --wheel-c4: #6e0b1a;
+  --wheel-c5: #9a6b1f;
+  --wheel-rim: #c8102e;
+  --wheel-hub: #12070a;
+
+  font-family: var(--hg-font);
+
+  .modal-content {
+    border: 1px solid var(--hg-crimson);
+    border-radius: 6px;
+    overflow: hidden;
+    background: linear-gradient(180deg, #f3d9cc, #f4ece0 220px);
+    color: var(--hg-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(90deg, transparent, #c8102e 12%, #e8344f 50%, #c8102e 88%, transparent) bottom / 100% 2px no-repeat,
+      linear-gradient(90deg, #1e0a1c, #4a0f2a 35%, #8e0f24 70%, #c8452a);
+    border-bottom: none;
+
+    h2 {
+      color: #fff4ee;
+      font-family: var(--hg-font);
+      font-weight: 800;
+      letter-spacing: 0.5px;
+      text-shadow: 0 0 10px rgb(232 52 79 / 0.5);
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 1px solid var(--hg-border);
+  }
+
+  .spin-steps span {
+    font-family: var(--hg-font);
+    background: #eadfd2;
+    color: #8c7672;
+    border-radius: 2px;
+    padding: 4px 16px;
+
+    &.active {
+      background: linear-gradient(90deg, #1c0a10, var(--hg-crimson-deep));
+      color: #fff4ee;
+    }
+
+    &.done {
+      background: var(--hg-crimson);
+      color: #fff4ee;
+    }
+  }
+
+  .btn {
+    font-family: var(--hg-font);
+    font-weight: 700;
+    border-radius: 2px;
+    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
+
+    &:active:not(:disabled) {
+      transform: translateY(1px);
+    }
+  }
+
+  .btn-primary {
+    background: linear-gradient(180deg, #c01733, var(--hg-crimson-deep));
+    border: 1px solid var(--hg-crimson-shadow);
+    color: #fff4ee;
+    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.12);
+
+    &:disabled {
+      background: #b9a3a0;
+      border-color: #9c8582;
+      box-shadow: none;
+    }
+  }
+
+  // Tlačítko roztočení — černá deska s rudou září
+  .spin-button {
+    background: linear-gradient(180deg, #2a1216, #12070a);
+    border: 1px solid #c8102e;
+    box-shadow: 0 0 0 3px rgb(200 16 46 / 0.25), 0 0 18px rgb(200 16 46 / 0.45);
+    letter-spacing: 1px;
+    font-size: 1.15rem;
+    padding: 12px 36px;
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(180deg, #3a1219, #1c0a10);
+      box-shadow: 0 0 0 3px rgb(200 16 46 / 0.4), 0 0 24px rgb(200 16 46 / 0.65);
+    }
+  }
+
+  .btn-outline-primary {
+    background: transparent;
+    border: 1px solid var(--hg-crimson);
+    color: var(--hg-crimson);
+
+    &:hover {
+      background: var(--hg-crimson);
+      color: #fff4ee;
+    }
+  }
+
+  .btn-secondary {
+    background: var(--hg-panel);
+    border: 1px solid var(--hg-border);
+    color: var(--hg-text);
+  }
+
+  .spin-source {
+    background: #eadfd2;
+
+    > .btn-primary {
+      background: linear-gradient(180deg, #c01733, var(--hg-crimson-deep));
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--hg-crimson-deep);
+
+      &:hover {
+        background: var(--hg-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 700;
+
+    strong {
+      color: var(--hg-crimson);
+    }
+  }
+
+  .spin-options {
+    background: var(--hg-panel);
+    border: 1px solid var(--hg-border);
+    border-top: 3px solid var(--hg-crimson);
+    border-radius: 3px;
+
+    li:hover {
+      background: #f8e6e2;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 1px solid var(--hg-border);
+    color: var(--hg-crimson-deep);
+  }
+
+  .spin-empty {
+    border-color: var(--hg-border);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: #c8102e;
+    filter: drop-shadow(0 0 4px rgb(200 16 46 / 0.7));
+  }
+
+  .spin-wheel-rim {
+    filter: drop-shadow(0 0 6px rgb(200 16 46 / 0.6));
+  }
+
+  .spin-seg {
+    stroke: #12070a;
+    stroke-width: 2;
+  }
+
+  .spin-seg-label {
+    font-family: var(--hg-font);
+    font-weight: 700;
+  }
+}
+
+// Tmavý režim — půlnoc Pekelné korespondence
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-hellgirl {
+  --hg-crimson: #e0334f;
+  --hg-crimson-deep: #b81c38;
+  --hg-panel: #170c0f;
+  --hg-border: #3d1c22;
+  --hg-text: #f3e6e2;
+  --wheel-c1: #2e1a1e;
+
+  .modal-content {
+    background:
+      radial-gradient(ellipse 120% 45% at 50% 115%, rgb(140 12 36 / 0.35), transparent 70%),
+      linear-gradient(180deg, #1c0a12, #0c0608 260px);
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #221216;
+    color: #8a6c6a;
+  }
+
+  .btn-outline-primary, .btn-secondary {
+    background: #170c0f;
+    color: #f3e6e2;
+  }
+
+  .spin-source {
+    background: #221216;
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: #c9aeaa;
+
+      &:hover {
+        background: #170c0f;
+        color: #fff;
+      }
+    }
+  }
+
+  .spin-options li:hover {
+    background: #2a1218;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;