feat: přidání K-ON! theme

client/src/components/modals/SpinWheelModal.scss

@@ -1013,6 +1013,261 @@
   }
 }
 
+// ============================================
+// STYL K-ON! kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách členek Houkago Tea Time, tmavě modré školní sako,
+// notový sešit a tlačítko roztočení jako kytara Gitah (cherry sunburst).
+// ============================================
+.spin-wheel-modal.spin-theme-kon {
+  --kon-font: 'Zen Maru Gothic', 'M PLUS Rounded 1c', 'Nunito', sans-serif;
+  --kon-blazer: #27315f;
+  --kon-blazer-light: #3a4782;
+  --kon-blazer-shadow: #171d3d;
+  --kon-cherry: #c43358;
+  --kon-cherry-deep: #a3234a;
+  --kon-sunburst: #f2a33a;
+  --kon-panel: #fffaf0;
+  --kon-border: #e6d8c0;
+  --kon-text: #222849;
+  // Yui, Mio, Ritsu, Azusa, Ui a tmavě modrá školní
+  --wheel-c0: #d43f62;
+  --wheel-c1: #3d6fc4;
+  --wheel-c2: #f2b81d;
+  --wheel-c3: #8a6bc7;
+  --wheel-c4: #e46f9a;
+  --wheel-c5: #27315f;
+  --wheel-rim: #27315f;
+  --wheel-hub: #fffaf0;
+
+  font-family: var(--kon-font);
+
+  .modal-content {
+    border: 3px solid var(--kon-border);
+    border-radius: 22px;
+    overflow: hidden;
+    background:
+      repeating-linear-gradient(180deg, transparent 0 27px, rgb(61 111 196 / 0.07) 27px 28px),
+      var(--kon-panel);
+    color: var(--kon-text);
+  }
+
+  .modal-header {
+    background:
+      linear-gradient(90deg, #d43f62 0 20%, #3d6fc4 20% 40%, #f2b81d 40% 60%, #e8cf7a 60% 80%, #8a6bc7 80% 100%) bottom / 100% 4px no-repeat,
+      linear-gradient(90deg, var(--kon-blazer-shadow), var(--kon-blazer) 40%, var(--kon-blazer-light));
+    border-bottom: none;
+
+    h2 {
+      color: #fff;
+      font-family: var(--kon-font);
+      font-weight: 900;
+      text-shadow: 0 2px 0 var(--kon-blazer-shadow);
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 2px dashed var(--kon-border);
+  }
+
+  .spin-steps span {
+    font-family: var(--kon-font);
+    background: #f3e8d4;
+    color: #8a8aa3;
+    border-radius: 10px;
+    padding: 4px 16px;
+
+    &.active {
+      background: var(--kon-blazer);
+      color: #fff;
+    }
+
+    &.done {
+      background: var(--kon-cherry);
+      color: #fff;
+    }
+  }
+
+  .btn {
+    font-family: var(--kon-font);
+    font-weight: 700;
+    border-radius: 10px;
+    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(--kon-btn-shadow, transparent);
+    }
+  }
+
+  .btn-primary {
+    --kon-btn-shadow: var(--kon-blazer);
+    background: linear-gradient(180deg, #e0567a, var(--kon-cherry-deep));
+    border: none;
+    box-shadow: 0 4px 0 var(--kon-blazer);
+    color: #fff;
+    text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
+
+    &:disabled {
+      background: #c8c3cf;
+      box-shadow: 0 4px 0 #a5a1b0;
+    }
+  }
+
+  // Tlačítko roztočení — lak kytary Gitah (jantarový střed, třešňové okraje)
+  .spin-button {
+    --kon-btn-shadow: var(--kon-blazer);
+    background: radial-gradient(ellipse 70% 130% at 50% 45%, #ffd27a, var(--kon-sunburst) 25%, var(--kon-cherry) 65%, #6e1530);
+    box-shadow: 0 5px 0 var(--kon-blazer), 0 0 18px rgb(242 163 58 / 0.45);
+    font-size: 1.15rem;
+    padding: 12px 36px;
+  }
+
+  .btn-outline-primary {
+    --kon-btn-shadow: var(--kon-border);
+    background: #fff;
+    border: 2px solid var(--kon-blazer);
+    color: var(--kon-blazer);
+    box-shadow: 0 4px 0 var(--kon-border);
+
+    &:hover {
+      background: var(--kon-blazer);
+      color: #fff;
+    }
+  }
+
+  .btn-secondary {
+    --kon-btn-shadow: var(--kon-border);
+    background: #fff;
+    border: 2px solid var(--kon-border);
+    color: var(--kon-text);
+    box-shadow: 0 4px 0 var(--kon-border);
+  }
+
+  .spin-source {
+    background: #f3e8d4;
+
+    > .btn-primary {
+      background: linear-gradient(180deg, #e0567a, var(--kon-cherry-deep));
+      box-shadow: 0 2px 0 var(--kon-blazer) !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--kon-blazer);
+
+      &:hover {
+        background: #fff;
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 700;
+
+    strong {
+      color: var(--kon-cherry);
+    }
+  }
+
+  .spin-options {
+    background: var(--kon-panel);
+    border: 2px solid var(--kon-border);
+    border-radius: 16px;
+
+    li:hover {
+      background: #fdeee0;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 2px solid var(--kon-border);
+    color: var(--kon-blazer);
+  }
+
+  .spin-empty {
+    border-color: var(--kon-border);
+  }
+
+  // Ukazatel jako trsátko
+  .spin-wheel-pointer {
+    border-top-color: var(--kon-cherry);
+    filter: drop-shadow(0 2px 0 var(--kon-blazer));
+  }
+
+  .spin-seg {
+    stroke: #fffaf0;
+    stroke-width: 2.5;
+  }
+
+  .spin-seg-label {
+    font-family: var(--kon-font);
+    font-weight: 700;
+  }
+}
+
+// Tmavý režim — večerní koncert pod reflektory
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-kon {
+  --kon-cherry: #ff7a9a;
+  --kon-panel: #171c42;
+  --kon-border: #2c3566;
+  --kon-text: #f1f0ff;
+  --wheel-c5: #4a5ab0;
+  --wheel-rim: #8fb2ff;
+  --wheel-hub: #171c42;
+
+  .modal-content {
+    background:
+      radial-gradient(ellipse 45% 60% at 10% -10%, rgb(255 122 154 / 0.18), transparent 70%),
+      radial-gradient(ellipse 45% 60% at 90% -10%, rgb(255 209 102 / 0.14), transparent 70%),
+      #0e1230;
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #212858;
+    color: #8085b3;
+  }
+
+  .btn-outline-primary, .btn-secondary {
+    background: #171c42;
+    color: #f1f0ff;
+  }
+
+  .btn-outline-primary {
+    border-color: #8fb2ff;
+
+    &:hover {
+      background: #2b367a;
+    }
+  }
+
+  .spin-source {
+    background: #212858;
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: #bfc2e6;
+
+      &:hover {
+        background: #171c42;
+        color: #fff;
+      }
+    }
+  }
+
+  .spin-options-header {
+    color: #c9d6ff;
+  }
+
+  .spin-options li:hover {
+    background: #232a5c;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;