feat: nový vzhled Yuru Camp

client/src/components/modals/SpinWheelModal.scss

@@ -1800,6 +1800,262 @@
   }
 }
 
+// ============================================
+// STYL YURU CAMP△ kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách lesa, podzimního listí, jezera a šál Rin a Nadeshiko,
+// okraj jako dřevěná obruč a střed jako žhavé uhlíky táboráku.
+// ============================================
+.spin-wheel-modal.spin-theme-yurucamp {
+  --yc-font: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
+  --yc-display: 'Kiwi Maru', 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
+  --yc-ember: #b5542a;
+  --yc-ember-bright: #e8833a;
+  --yc-forest: #3f6b4a;
+  --yc-line: #e2d5bd;
+  --yc-panel: #fffdf8;
+  --yc-text: #3a2e25;
+  --yc-kraft: #f3e3c3;
+  // Les, podzimní oranžová, javor, jezero Motosu, dřevo a růžová Nadeshiko
+  --wheel-c0: #3f6b4a;
+  --wheel-c1: #e8833a;
+  --wheel-c2: #c8553d;
+  --wheel-c3: #3b6fa8;
+  --wheel-c4: #8a5a3b;
+  --wheel-c5: #d9739b;
+  --wheel-rim: #5a3a24;
+  --wheel-hub: #f2b84b;
+
+  font-family: var(--yc-font);
+
+  .modal-content {
+    border: 1px solid var(--yc-line);
+    border-radius: 20px;
+    overflow: hidden;
+    background: linear-gradient(180deg, #eef5f8 0, #fbf6ec 160px);
+    color: var(--yc-text);
+  }
+
+  .modal-header {
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 60L88 13Q96 8 104 9H136Q144 8 152 13L240 60Z' fill='%233e5374'/%3E%3Cpath d='M88 13Q96 8 104 9H136Q144 8 152 13L141 21L132 16L124 23L114 16L106 22L97 18Z' fill='%23e6edf5'/%3E%3C/svg%3E") right 60px bottom / auto 70% no-repeat,
+      linear-gradient(180deg, #24314a, #2b3a55);
+    border-bottom: 3px solid var(--yc-ember-bright);
+
+    h2 {
+      color: #fdf8ef;
+      font-family: var(--yc-display);
+      font-weight: 500;
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 2px dashed var(--yc-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--yc-font);
+    font-weight: 700;
+    background: #efe6d5;
+    color: #8f8275;
+    border-radius: 999px;
+    padding: 4px 16px;
+
+    &.active {
+      background: var(--yc-forest);
+      color: #fff;
+    }
+
+    &.done {
+      background: var(--yc-kraft);
+      color: #5a3a24;
+    }
+  }
+
+  .btn {
+    font-family: var(--yc-font);
+    font-weight: 700;
+    border-radius: 999px;
+  }
+
+  .btn-primary {
+    background: linear-gradient(180deg, var(--yc-ember-bright), var(--yc-ember));
+    border: none;
+    color: #fff;
+    box-shadow: 0 3px 0 #7a3518;
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(180deg, #f39a4f, #c45f2e);
+      color: #fff;
+      box-shadow: 0 3px 0 #7a3518, 0 0 14px rgb(232 131 58 / 0.55);
+    }
+
+    &:disabled {
+      background: #d9cfc2;
+      color: #8f8275;
+      box-shadow: none;
+    }
+  }
+
+  // Tlačítko roztočení — rozhořívající se táborák
+  .spin-button {
+    font-family: var(--yc-display);
+    font-weight: 500;
+    font-size: 1.2rem;
+    padding: 12px 38px;
+  }
+
+  .btn-outline-primary {
+    background: var(--yc-panel);
+    border: 2px solid var(--yc-ember-bright);
+    color: var(--yc-ember);
+
+    &:hover {
+      background: #fbe7d6;
+      color: var(--yc-ember);
+    }
+  }
+
+  .btn-secondary {
+    background: var(--yc-forest);
+    border: none;
+    color: #fff;
+  }
+
+  .spin-source {
+    background: #efe6d5;
+
+    > .btn-primary {
+      background: var(--yc-forest);
+      box-shadow: none !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--yc-text);
+
+      &:hover {
+        background: var(--yc-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 700;
+
+    strong {
+      color: var(--yc-ember);
+    }
+  }
+
+  .spin-options {
+    background: var(--yc-panel);
+    border: 1px solid var(--yc-line);
+    border-radius: 16px;
+
+    li:hover {
+      background: #f8efe0;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 2px dashed var(--yc-line);
+    color: var(--yc-forest);
+  }
+
+  .spin-empty {
+    border-color: var(--yc-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--yc-ember);
+    filter: drop-shadow(0 2px 1px rgb(90 58 36 / 0.4));
+  }
+
+  .spin-seg {
+    stroke: #fffdf8;
+    stroke-width: 2;
+  }
+
+  .spin-seg-label {
+    font-family: var(--yc-font);
+    font-weight: 700;
+  }
+}
+
+// Tmavý režim — noc u táboráku
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-yurucamp {
+  --yc-ember: #ff9a52;
+  --yc-ember-bright: #ffb36b;
+  --yc-forest: #2f5a3c;
+  --yc-line: #2f3a4f;
+  --yc-panel: #19223a;
+  --yc-text: #f3ece0;
+  --yc-kraft: #2e2519;
+  --wheel-c0: #2f5a3c;
+  --wheel-rim: #3a2618;
+
+  .modal-content {
+    background:
+      radial-gradient(1.2px 1.2px at 24px 38px, rgb(255 255 255 / 0.85), transparent) 0 0 / 180px 180px,
+      radial-gradient(1px 1px at 120px 100px, rgb(255 255 255 / 0.6), transparent) 0 0 / 180px 180px,
+      radial-gradient(ellipse 70% 45% at 50% 115%, rgb(255 140 60 / 0.25), transparent 70%),
+      #10172a;
+  }
+
+  .modal-header {
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 60L88 13Q96 8 104 9H136Q144 8 152 13L240 60Z' fill='%23172038'/%3E%3Cpath d='M88 13Q96 8 104 9H136Q144 8 152 13L141 21L132 16L124 23L114 16L106 22L97 18Z' fill='%23aebbd0'/%3E%3C/svg%3E") right 60px bottom / auto 70% no-repeat,
+      #0b1120;
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #222d48;
+    color: #9189a0;
+  }
+
+  .spin-steps span.done {
+    color: #ffb36b;
+  }
+
+  .btn-primary {
+    color: #2a1608;
+
+    &:hover:not(:disabled) {
+      color: #2a1608;
+    }
+
+    &:disabled {
+      background: #2f3a4f;
+      color: #9189a0;
+    }
+  }
+
+  .btn-outline-primary:hover {
+    background: #3a2618;
+  }
+
+  .spin-source {
+    background: #222d48;
+  }
+
+  .spin-options li:hover {
+    background: #222d48;
+  }
+
+  .spin-options-header {
+    color: #7fc28c;
+  }
+
+  .spin-seg {
+    stroke: #10172a;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;