feat: nový vzhled Neon Genesis Evangelion

client/src/components/modals/SpinWheelModal.scss

@@ -1536,6 +1536,270 @@
   }
 }
 
+// ============================================
+// STYL NEON GENESIS EVANGELION kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách NERV a Evangelionů (oranžová, rudá, Unit-01 fialová a zelená,
+// Unit-00 modrá), ostré hrany a výstražné pruhy, střed kola jako jádro Anděla.
+// ============================================
+.spin-wheel-modal.spin-theme-evangelion {
+  --eva-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
+  --eva-display: 'Shippori Mincho', 'Noto Serif JP', serif;
+  --eva-orange: #f26b00;
+  --eva-orange-text: #b84d00;
+  --eva-red: #d81e1e;
+  --eva-line: #c9c6bd;
+  --eva-panel: #ffffff;
+  --eva-text: #111214;
+  // NERV oranžová, Unit-01 fialová a zelená, Unit-02 rudá, Unit-00 modrá a černá velína
+  --wheel-c0: #f26b00;
+  --wheel-c1: #5b2a86;
+  --wheel-c2: #d81e1e;
+  --wheel-c3: #3f8a2a;
+  --wheel-c4: #2f6fb3;
+  --wheel-c5: #111214;
+  --wheel-rim: #111214;
+  --wheel-hub: #d81e1e;
+
+  font-family: var(--eva-font);
+
+  .modal-content {
+    border: 1px solid var(--eva-orange);
+    border-radius: 0;
+    overflow: hidden;
+    background: #f1efe9;
+    color: var(--eva-text);
+  }
+
+  .modal-header {
+    background:
+      repeating-linear-gradient(-45deg, #f26b00 0 10px, #111214 10px 20px) bottom / 100% 5px no-repeat,
+      #0d0e10;
+    border-bottom: none;
+    border-radius: 0;
+
+    h2 {
+      color: #fff;
+      font-family: var(--eva-display);
+      font-weight: 800;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 1px solid var(--eva-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--eva-font);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    background: #e3e0d8;
+    color: #75777e;
+    border-radius: 0;
+    padding: 4px 16px;
+
+    &.active {
+      background: var(--eva-orange);
+      color: #000;
+    }
+
+    &.done {
+      background: #111214;
+      color: #fff;
+    }
+  }
+
+  .btn {
+    font-family: var(--eva-font);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    border-radius: 0;
+  }
+
+  .btn-primary {
+    background: var(--eva-orange);
+    border: 1px solid var(--eva-orange);
+    color: #000;
+
+    &:hover:not(:disabled) {
+      background: #ff8a1f;
+      border-color: #ff8a1f;
+      color: #000;
+    }
+
+    &:disabled {
+      background: #c9c6bd;
+      border-color: #c9c6bd;
+      color: #5f6168;
+    }
+  }
+
+  // Tlačítko roztočení — aktivační spínač s výstražnými pruhy kolem
+  .spin-button {
+    font-size: 1.2rem;
+    letter-spacing: 0.2em;
+    padding: 12px 36px;
+    box-shadow: 0 0 0 3px #111214;
+
+    &:hover:not(:disabled) {
+      box-shadow: 0 0 0 3px #111214, 0 0 0 4px var(--eva-red), 0 0 16px rgb(216 30 30 / 0.5);
+    }
+
+    &:active:not(:disabled) {
+      background: var(--eva-red);
+      border-color: var(--eva-red);
+      color: #fff;
+    }
+  }
+
+  .btn-outline-primary {
+    background: transparent;
+    border: 1px solid var(--eva-orange);
+    color: var(--eva-orange-text);
+
+    &:hover {
+      background: var(--eva-orange);
+      color: #000;
+    }
+  }
+
+  .btn-secondary {
+    background: #2b2d31;
+    border: 1px solid #2b2d31;
+    color: #fff;
+  }
+
+  .spin-source {
+    background: #e3e0d8;
+    border-radius: 0;
+
+    > .btn {
+      border-radius: 0 !important;
+    }
+
+    > .btn-primary {
+      box-shadow: none !important;
+    }
+
+    > .btn-outline-primary {
+      border-color: transparent;
+      color: var(--eva-text);
+
+      &:hover {
+        background: #fff;
+        color: var(--eva-text);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 700;
+    letter-spacing: 0.03em;
+
+    strong {
+      color: var(--eva-orange-text);
+    }
+  }
+
+  .spin-options {
+    background: var(--eva-panel);
+    border: 1px solid var(--eva-line);
+    border-top: 3px solid var(--eva-orange);
+    border-radius: 0;
+
+    li:hover {
+      background: #fff3e6;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 1px solid var(--eva-line);
+    color: var(--eva-orange-text);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .spin-empty {
+    border-color: var(--eva-line);
+    border-radius: 0;
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--eva-red);
+    filter: drop-shadow(0 0 4px rgb(216 30 30 / 0.6));
+  }
+
+  .spin-seg {
+    stroke: #111214;
+    stroke-width: 2;
+  }
+
+  .spin-seg-label {
+    font-family: var(--eva-font);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+  }
+}
+
+// Tmavý režim — velín Central Dogma
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-evangelion {
+  --eva-orange: #ff8a1f;
+  --eva-orange-text: #ff8a1f;
+  --eva-red: #ff3b3b;
+  --eva-line: #4a2c10;
+  --eva-panel: #111317;
+  --eva-text: #f2efe6;
+  --wheel-c5: #2b2d31;
+  --wheel-rim: #000000;
+
+  .modal-content {
+    background:
+      repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px),
+      radial-gradient(ellipse 70% 45% at 50% 110%, rgb(216 30 30 / 0.18), transparent 70%),
+      #08090b;
+    box-shadow: 0 0 30px rgb(255 138 31 / 0.18);
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #1a1d22;
+    color: #8a8780;
+  }
+
+  .spin-steps span.done {
+    background: #2b2d31;
+  }
+
+  .btn-primary:disabled {
+    background: #2b2d31;
+    border-color: #2b2d31;
+    color: #8a8780;
+  }
+
+  .btn-secondary {
+    background: #1f2227;
+    border-color: #3a3c41;
+  }
+
+  .spin-source {
+    background: #1a1d22;
+
+    > .btn-outline-primary:hover {
+      background: #111317;
+      color: #fff;
+    }
+  }
+
+  .spin-options li:hover {
+    background: #1f1408;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;