feat: nový vzhled Dungeon Meshi

client/src/components/modals/SpinWheelModal.scss

@@ -4170,6 +4170,269 @@
   }
 }
 
+// ============================================
+// STYL DUNGEON MESHI kola štěstí (dle stylu zvoleného v nastavení).
+// Výseče v barvách podzemní kuchyně (rez, mech, kůže, mosaz, modř Laiose,
+// červený drak), okraj jako litinová pánev a střed jako kotlík.
+// ============================================
+.spin-wheel-modal.spin-theme-dungeonmeshi {
+  --dm-font: 'Alegreya', 'Palatino Linotype', Palatino, serif;
+  --dm-display: 'Almendra', 'Alegreya', 'Palatino Linotype', Palatino, serif;
+  --dm-leather: #6b4226;
+  --dm-leather-deep: #4a2c18;
+  --dm-brass: #b8862b;
+  --dm-rust: #a0441a;
+  --dm-moss: #5c7a3a;
+  --dm-line: #d9c294;
+  --dm-panel: #fbf3e0;
+  --dm-text: #3b2a1a;
+  --wheel-c0: #a0441a;
+  --wheel-c1: #5c7a3a;
+  --wheel-c2: #6b4226;
+  --wheel-c3: #b8862b;
+  --wheel-c4: #3d5a80;
+  --wheel-c5: #b3261e;
+  --wheel-rim: #2b2420;
+  --wheel-hub: #3a302a;
+
+  font-family: var(--dm-font);
+
+  .modal-content {
+    border: 2px solid var(--dm-leather);
+    border-radius: 10px;
+    overflow: hidden;
+    background:
+      radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgb(140 90 40 / 0.2) 100%),
+      #f4e7c9;
+    color: var(--dm-text);
+  }
+
+  .modal-header {
+    background:
+      repeating-linear-gradient(90deg, #e9cf9f 0 8px, transparent 8px 14px) left bottom 6px / 100% 2px no-repeat,
+      linear-gradient(180deg, #7a4b2b, var(--dm-leather-deep));
+    border-bottom: 3px solid var(--dm-brass);
+    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 6px);
+
+    h2 {
+      color: #fbefd5;
+      font-family: var(--dm-display);
+      font-weight: 700;
+    }
+
+    .btn-close {
+      filter: invert(1) sepia(0.3) brightness(1.6);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 3px double var(--dm-line);
+  }
+
+  .spin-steps span {
+    font-family: var(--dm-display);
+    font-weight: 700;
+    background: #e8d4a8;
+    color: #94795a;
+    border-radius: 4px;
+    padding: 3px 16px;
+
+    &.active {
+      background: var(--dm-rust);
+      color: #fff6e6;
+      box-shadow: 0 0 10px rgb(232 135 63 / 0.5);
+    }
+
+    &.done {
+      background: var(--dm-moss);
+      color: #fff;
+    }
+  }
+
+  .btn {
+    font-family: var(--dm-font);
+    font-weight: 700;
+    border-radius: 4px;
+  }
+
+  .btn-primary {
+    background: linear-gradient(180deg, #b8541f, #8a3810);
+    border: 1px solid #6e2b0a;
+    color: #fff6e6;
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(180deg, #cc6326, #9c4013);
+      color: #fff;
+      box-shadow: 0 0 14px rgb(232 135 63 / 0.55);
+    }
+
+    &:disabled {
+      background: #dccaa6;
+      border-color: #cbb68d;
+      color: #94795a;
+    }
+  }
+
+  // Tlačítko roztočení — do boje (a pak k jídlu)
+  .spin-button {
+    font-family: var(--dm-display);
+    font-weight: 700;
+    font-size: 1.25rem;
+    letter-spacing: 0.04em;
+    padding: 10px 38px;
+
+    &::before {
+      content: '⚔ ';
+      font-size: 0.85em;
+    }
+  }
+
+  .btn-outline-primary {
+    background: var(--dm-panel);
+    border: 1px solid var(--dm-rust);
+    color: var(--dm-rust);
+
+    &:hover {
+      background: #f6e2c4;
+      color: var(--dm-rust);
+    }
+  }
+
+  .btn-secondary {
+    background: var(--dm-moss);
+    border: 1px solid #45602a;
+    color: #fff;
+  }
+
+  .spin-source {
+    background: #e8d4a8;
+    border-radius: 6px;
+
+    > .btn {
+      border-radius: 4px !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--dm-text);
+
+      &:hover {
+        background: var(--dm-panel);
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 800;
+
+    strong {
+      color: var(--dm-rust);
+      font-family: var(--dm-display);
+    }
+  }
+
+  .spin-options {
+    background: var(--dm-panel);
+    border: 1px solid var(--dm-line);
+    border-radius: 8px;
+
+    li:hover {
+      background: #f3e3c2;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 3px double var(--dm-leather);
+    color: var(--dm-leather);
+    font-family: var(--dm-display);
+  }
+
+  .spin-empty {
+    border-color: var(--dm-line);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--dm-brass);
+    filter: drop-shadow(0 2px 2px rgb(59 42 26 / 0.5));
+  }
+
+  .spin-wheel-hub {
+    stroke: var(--dm-brass);
+  }
+
+  .spin-seg {
+    stroke: #f4e7c9;
+    stroke-width: 2;
+  }
+
+  .spin-seg-label {
+    font-family: var(--dm-display);
+    font-weight: 700;
+  }
+}
+
+// Tmavý režim — podzemí za světla loučí
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-dungeonmeshi {
+  --dm-line: #3d3226;
+  --dm-panel: #221c16;
+  --dm-text: #f1e2c3;
+  --dm-rust: #e8873f;
+  --wheel-rim: #0d0b09;
+  --wheel-hub: #1a1511;
+
+  .modal-content {
+    border-color: #5a3a22;
+    background:
+      radial-gradient(circle at 0% 0%, rgb(255 140 50 / 0.16), transparent 40%),
+      radial-gradient(circle at 100% 0%, rgb(255 140 50 / 0.16), transparent 40%),
+      #15120f;
+    box-shadow: 0 0 30px rgb(232 135 63 / 0.15);
+  }
+
+  .modal-header {
+    background:
+      repeating-linear-gradient(90deg, rgb(232 135 63 / 0.45) 0 8px, transparent 8px 14px) left bottom 6px / 100% 2px no-repeat,
+      linear-gradient(180deg, #3e2716, #2a1a0f);
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #2c241c;
+    color: #8f7d63;
+  }
+
+  .spin-steps span.active {
+    background: #b8541f;
+  }
+
+  .btn-primary:disabled {
+    background: #2c241c;
+    border-color: #3d3226;
+    color: #8f7d63;
+  }
+
+  .btn-outline-primary:hover {
+    background: #3a2416;
+  }
+
+  .spin-source {
+    background: #2c241c;
+  }
+
+  .spin-options li:hover {
+    background: #2c241c;
+  }
+
+  .spin-options-header {
+    color: #e8b27a;
+    border-bottom-color: #8a5a33;
+  }
+
+  .spin-seg {
+    stroke: #15120f;
+  }
+}
+
 // Ikona kola se při najetí pootočí
 .spin-wheel-icon {
   transition: transform 0.4s ease !important;