// Barvy výsečí — jednoduchý styl odvozuje odstíny od primární barvy,
// styl Umamusume je přebíjí vlastní paletou (viz níže)
:root {
  --wheel-c0: var(--luncher-primary);
  --wheel-c1: #0ea5e9;
  --wheel-c2: #f59e0b;
  --wheel-c3: #8b5cf6;
  --wheel-c4: #ec4899;
  --wheel-c5: #14b8a6;
  --wheel-label: #ffffff;
  --wheel-rim: var(--luncher-text);
  --wheel-hub: var(--luncher-bg-card);
}

.spin-wheel-modal {
  .spin-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    font-weight: 700;

    span {
      padding: 4px 12px;
      border-radius: 999px;
      background: var(--luncher-bg-hover);
      color: var(--luncher-text-muted);

      &.active {
        background: var(--luncher-primary);
        color: #fff;
      }

      &.done {
        background: var(--luncher-primary-light);
        color: var(--luncher-primary);
      }
    }
  }

  .spin-source-info {
    align-self: center;
    margin-left: 4px;
    color: var(--luncher-text-muted);
    font-weight: 600;
  }

  .spin-steps {
    flex-wrap: wrap;
  }

  // Přepínač zdroje jako segmentovaná „pilulka"
  .spin-source {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--luncher-bg-hover);

    > .btn {
      padding: 6px 16px;
      font-size: 0.9rem;
      border: none !important;
      border-radius: 999px !important;
      box-shadow: none !important;
      margin: 0 !important;
      transform: none !important;
    }

    > .btn-outline-primary {
      background: transparent;
      color: var(--luncher-text-secondary);

      &:hover {
        background: var(--luncher-bg-card);
        color: var(--luncher-primary);
      }
    }
  }

  .spin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 20px;
    align-items: start;

    @media (max-width: 768px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .spin-wheel-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .spin-empty {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    border: 2px dashed var(--luncher-border);
    border-radius: 50%;
    color: var(--luncher-text-muted);
  }

  .spin-result {
    min-height: 1.6em;
    font-size: 1.15rem;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;

    &.visible {
      opacity: 1;
      transform: none;
    }

    small {
      color: var(--luncher-text-muted);
    }
  }

  .spin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .spin-button {
    min-width: 160px;
  }

  .spin-options {
    border: 1px solid var(--luncher-border);
    border-radius: var(--luncher-radius);
    background: var(--luncher-bg);
    max-height: 440px;
    display: flex;
    flex-direction: column;
    min-width: 0;

    ul {
      list-style: none;
      margin: 0;
      padding: 4px;
      overflow-y: auto;
    }

    li {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 6px;
      border-radius: var(--luncher-radius-sm);
      font-size: 0.85rem;

      &:hover {
        background: var(--luncher-bg-hover);
      }
    }
  }

  .spin-options-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--luncher-border);
    font-weight: 700;
    font-size: 0.85rem;
  }

  .spin-restore {
    background: none;
    border: none;
    color: var(--luncher-primary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0;
  }

  .spin-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .spin-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .spin-option-kind {
    color: var(--luncher-text-muted);
    font-size: 0.7rem;
  }

  .spin-remove {
    flex: none;
    background: none;
    border: none;
    color: var(--luncher-text-muted);
    padding: 2px 6px;
    border-radius: 4px;

    &:hover:not(:disabled) {
      color: var(--luncher-danger);
      background: var(--luncher-bg-hover);
    }
  }
}

.spin-wheel {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
}

.spin-wheel-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.18));
}

.spin-wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 26px solid var(--luncher-danger);
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.3));
}

.spin-wheel-rim {
  fill: var(--wheel-rim);
}

.spin-wheel-hub {
  fill: var(--wheel-hub);
  stroke: var(--wheel-rim);
  stroke-width: 4;
}

.spin-seg {
  stroke: var(--wheel-hub);
  stroke-width: 1.5;
}

.spin-seg-label {
  fill: var(--wheel-label);
  font-weight: 700;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgb(0 0 0 / 0.25);
  stroke-width: 2px;
}

@for $i from 0 through 5 {
  .spin-seg-#{$i} {
    fill: var(--wheel-c#{$i});
    background: var(--wheel-c#{$i});
  }
}

@media (prefers-reduced-motion: reduce) {
  .spin-wheel-svg {
    transition-duration: 0.6s !important;
  }
}

.spin-wheel-modal .modal-header {
  gap: 12px;
  flex-wrap: wrap;

  .modal-title {
    flex: 1;
    min-width: 0;

    h2 {
      margin: 0;
    }
  }
}

// ============================================
// STYL UMAMUSUME kola štěstí (dle stylu zvoleného v nastavení).
// Trávník dostihové dráhy, růžové a nebeské akcenty, zlaté lemy,
// zaoblené tučné písmo a „herní" tlačítka s vystouplým spodkem.
// ============================================
.spin-wheel-modal.spin-theme-umamusume {
  --uma-font: 'M PLUS Rounded 1c', 'Nunito', 'Inter', sans-serif;
  --uma-turf: #5cc23d;
  --uma-turf-deep: #2e9a3a;
  --uma-turf-shadow: #1f7a2c;
  --uma-pink: #ff6fa3;
  --uma-pink-deep: #e84d86;
  --uma-gold: #ffc531;
  --uma-panel: #f4fbef;
  --uma-border: #c6ebb2;
  --uma-text: #1d3322;
  --wheel-c0: var(--uma-turf);
  --wheel-c1: var(--uma-pink);
  --wheel-c2: #43b8f0;
  --wheel-c3: #f2a91a;
  --wheel-c4: #a078f0;
  --wheel-c5: #ff8a3d;
  --wheel-rim: var(--uma-gold);
  --wheel-hub: #ffffff;

  font-family: var(--uma-font);

  .modal-content {
    border: 4px solid var(--uma-border);
    border-radius: 22px;
    overflow: hidden;
    background-color: #fff;
    background-image: repeating-linear-gradient(135deg, rgb(92 194 61 / 0.06) 0 16px, transparent 16px 32px);
    color: var(--uma-text);
  }

  .modal-header {
    background:
      repeating-linear-gradient(115deg, rgb(255 255 255 / 0.13) 0 12px, transparent 12px 24px),
      linear-gradient(90deg, var(--uma-turf-deep), var(--uma-turf));
    border-bottom: 4px solid var(--uma-gold);

    h2 {
      color: #fff;
      font-family: var(--uma-font);
      font-weight: 800;
      text-shadow: 0 2px 0 var(--uma-turf-shadow);
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
      opacity: 0.9;
    }
  }

  .modal-footer {
    border-top: 3px dashed var(--uma-border);
  }

  .spin-steps span {
    font-family: var(--uma-font);
    background: #e7f3e0;
    color: #7c9a82;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    border-radius: 0;
    padding: 4px 18px;

    &.active {
      background: linear-gradient(90deg, var(--uma-pink-deep), var(--uma-pink));
      color: #fff;
    }

    &.done {
      background: var(--uma-turf);
      color: #fff;
    }
  }

  .btn {
    font-family: var(--uma-font);
    font-weight: 800;
    border-radius: 999px;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.2s ease;

    &:active:not(:disabled) {
      transform: translateY(3px);
      box-shadow: 0 1px 0 var(--uma-btn-shadow, transparent);
    }
  }

  .btn-primary {
    --uma-btn-shadow: var(--uma-turf-shadow);
    background: linear-gradient(180deg, #7ad85a, var(--uma-turf-deep));
    box-shadow: 0 4px 0 var(--uma-turf-shadow);
    color: #fff;
    text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);

    &:disabled {
      background: #b9cbbd;
      box-shadow: 0 4px 0 #97aa9b;
    }
  }

  .spin-button {
    --uma-btn-shadow: #b8335f;
    background: linear-gradient(180deg, #ff8db5, var(--uma-pink-deep));
    box-shadow: 0 5px 0 #b8335f;
    font-size: 1.15rem;
    padding: 12px 36px;
  }

  .btn-outline-primary {
    --uma-btn-shadow: var(--uma-border);
    background: #fff;
    border: 2px solid var(--uma-turf);
    color: var(--uma-turf-deep);
    box-shadow: 0 4px 0 var(--uma-border);

    &:hover {
      background: #eaf8e2;
      color: var(--uma-turf-deep);
    }
  }

  .btn-secondary {
    --uma-btn-shadow: #d4ddd6;
    background: #fff;
    border: 2px solid #d4ddd6;
    color: var(--uma-text);
    box-shadow: 0 4px 0 #d4ddd6;
  }

  .spin-source {
    background: #e7f3e0;

    > .btn-primary {
      background: linear-gradient(180deg, #7ad85a, var(--uma-turf-deep));
      box-shadow: 0 2px 0 var(--uma-turf-shadow) !important;
    }

    > .btn-outline-primary {
      background: transparent;
      color: var(--uma-turf-deep);

      &:hover {
        background: #fff;
      }
    }
  }

  .spin-result {
    font-weight: 800;

    strong {
      color: var(--uma-pink-deep);
    }
  }

  .spin-options {
    background: var(--uma-panel);
    border: 3px solid var(--uma-border);
    border-radius: 16px;

    li:hover {
      background: #fff0f6;
    }
  }

  .spin-options-header {
    border-bottom: 3px solid var(--uma-border);
    color: var(--uma-turf-deep);
  }

  .spin-empty {
    border-color: var(--uma-border);
  }

  .spin-wheel-pointer {
    border-top-color: var(--uma-pink-deep);
  }

  .spin-seg {
    stroke: #fff;
    stroke-width: 2.5;
  }

  .spin-seg-label {
    font-family: var(--uma-font);
    font-weight: 800;
  }
}

// Tmavý režim — noční dostih pod reflektory
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-umamusume {
  --uma-panel: #19223d;
  --uma-border: #2c3a66;
  --uma-text: #f3f6ff;
  --wheel-hub: #19223d;

  .modal-content {
    background-color: #10172b;
    background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.03) 0 16px, transparent 16px 32px);
  }

  .spin-steps span:not(.active):not(.done) {
    background: #222d4f;
    color: #7d89ad;
  }

  .btn-outline-primary, .btn-secondary {
    background: #19223d;
    color: #f3f6ff;
  }

  .spin-source {
    background: #222d4f;

    > .btn-outline-primary {
      background: transparent;
      color: #b8c2e0;

      &:hover {
        background: #19223d;
        color: #fff;
      }
    }
  }

  .spin-options li:hover {
    background: #2a2344;
  }
}

// ============================================
// STYL MY LITTLE PONY kola štěstí (dle stylu zvoleného v nastavení).
// Výseče v barvách Mane 6, duhový lem Rainbow Dash, fialová Twilight
// a růžová Pinkie Pie, kulatá „bonbonová" tlačítka.
// ============================================
.spin-wheel-modal.spin-theme-mlp {
  --mlp-font: 'Fredoka', 'Nunito', 'Inter', sans-serif;
  --mlp-twilight: #8e4fd1;
  --mlp-twilight-deep: #6a35b0;
  --mlp-twilight-shadow: #4b2287;
  --mlp-pinkie: #f06aa6;
  --mlp-pinkie-deep: #d6417f;
  --mlp-panel: #faf5ff;
  --mlp-border: #e5d4f7;
  --mlp-text: #2e1f47;
  // Mane 6: Twilight, Pinkie, Rainbow Dash, Applejack, Fluttershy, Rarity
  --wheel-c0: #9b5fe0;
  --wheel-c1: #f06aa6;
  --wheel-c2: #1e98d3;
  --wheel-c3: #f37033;
  --wheel-c4: #e3b829;
  --wheel-c5: #5b4fc9;
  --wheel-rim: #ec3d8f;
  --wheel-hub: #ffffff;

  font-family: var(--mlp-font);

  .modal-content {
    border: 4px solid var(--mlp-border);
    border-radius: 26px;
    overflow: hidden;
    background-color: #fff;
    background-image:
      radial-gradient(circle at 20% 30%, rgb(142 79 209 / 0.10) 0 2px, transparent 3px),
      radial-gradient(circle at 70% 80%, rgb(240 106 166 / 0.10) 0 2px, transparent 3px);
    background-size: 120px 120px, 170px 170px;
    color: var(--mlp-text);
  }

  .modal-header {
    background:
      linear-gradient(90deg, #ee4144 0 16.6%, #f37033 16.6% 33.3%, #fdf6af 33.3% 50%, #62bc4d 50% 66.6%, #1e98d3 66.6% 83.3%, #672f89 83.3% 100%) bottom / 100% 5px no-repeat,
      linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-twilight) 60%, var(--mlp-pinkie));
    border-bottom: none;

    h2 {
      color: #fff;
      font-family: var(--mlp-font);
      font-weight: 700;
      text-shadow: 0 2px 0 var(--mlp-twilight-shadow);
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
      opacity: 0.9;
    }
  }

  .modal-footer {
    border-top: 3px dotted var(--mlp-border);
  }

  .spin-steps span {
    font-family: var(--mlp-font);
    background: #f1e6fc;
    color: #9a8ab3;
    border-radius: 999px;
    padding: 4px 16px;

    &.active {
      background: linear-gradient(90deg, var(--mlp-twilight-deep), var(--mlp-pinkie));
      color: #fff;
    }

    &.done {
      background: var(--mlp-twilight);
      color: #fff;
    }
  }

  .btn {
    font-family: var(--mlp-font);
    font-weight: 600;
    border-radius: 999px;
    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(--mlp-btn-shadow, transparent);
    }
  }

  .btn-primary {
    --mlp-btn-shadow: var(--mlp-twilight-shadow);
    background: linear-gradient(180deg, #b07ae6, var(--mlp-twilight-deep));
    border: none;
    box-shadow: 0 4px 0 var(--mlp-twilight-shadow);
    color: #fff;
    text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);

    &:disabled {
      background: #c9bdd9;
      box-shadow: 0 4px 0 #a99cbc;
    }
  }

  .spin-button {
    --mlp-btn-shadow: #a52c63;
    background: linear-gradient(180deg, #ff94c4, var(--mlp-pinkie-deep));
    box-shadow: 0 5px 0 #a52c63, 0 0 18px rgb(240 106 166 / 0.45);
    font-size: 1.15rem;
    padding: 12px 36px;
  }

  .btn-outline-primary {
    --mlp-btn-shadow: var(--mlp-border);
    background: #fff;
    border: 2px solid var(--mlp-twilight);
    color: var(--mlp-twilight-deep);
    box-shadow: 0 4px 0 var(--mlp-border);

    &:hover {
      background: #f1e6fc;
      color: var(--mlp-twilight-deep);
    }
  }

  .btn-secondary {
    --mlp-btn-shadow: var(--mlp-border);
    background: #fff;
    border: 2px solid var(--mlp-border);
    color: var(--mlp-text);
    box-shadow: 0 4px 0 var(--mlp-border);
  }

  .spin-source {
    background: #f1e6fc;

    > .btn-primary {
      background: linear-gradient(180deg, #b07ae6, var(--mlp-twilight-deep));
      box-shadow: 0 2px 0 var(--mlp-twilight-shadow) !important;
    }

    > .btn-outline-primary {
      background: transparent;
      color: var(--mlp-twilight-deep);

      &:hover {
        background: #fff;
      }
    }
  }

  .spin-result {
    font-weight: 700;

    strong {
      color: var(--mlp-pinkie-deep);
    }
  }

  .spin-options {
    background: var(--mlp-panel);
    border: 3px solid var(--mlp-border);
    border-radius: 18px;

    li:hover {
      background: #fff0f7;
    }
  }

  .spin-options-header {
    border-bottom: 3px solid var(--mlp-border);
    color: var(--mlp-twilight-deep);
  }

  .spin-empty {
    border-color: var(--mlp-border);
  }

  .spin-wheel-pointer {
    border-top-color: var(--mlp-pinkie-deep);
  }

  .spin-seg {
    stroke: #fff;
    stroke-width: 2.5;
  }

  .spin-seg-label {
    font-family: var(--mlp-font);
    font-weight: 700;
  }
}

// Tmavý režim — noční obloha princezny Luny
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-mlp {
  --mlp-panel: #1d1745;
  --mlp-border: #362c6e;
  --mlp-text: #f2edff;
  --wheel-hub: #1d1745;

  .modal-content {
    background-color: #120e2e;
    background-image:
      radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.5) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 70% 80%, rgb(183 198 255 / 0.35) 0 1px, transparent 2px);
  }

  .spin-steps span:not(.active):not(.done) {
    background: #282058;
    color: #8a7fb5;
  }

  .btn-outline-primary, .btn-secondary {
    background: #1d1745;
    color: #f2edff;
  }

  .spin-source {
    background: #282058;

    > .btn-outline-primary {
      background: transparent;
      color: #c2b6e6;

      &:hover {
        background: #1d1745;
        color: #fff;
      }
    }
  }

  .spin-options li:hover {
    background: #2e2160;
  }
}

// ============================================
// 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;
  }
}

// ============================================
// 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;
  }
}

// ============================================
// STYL BOCCHI THE ROCK! kola štěstí (dle stylu zvoleného v nastavení).
// Výseče v barvách Kessoku Band, černé linky a tvrdé stíny jako na flyeru
// z live house STARRY, střed kola jako žlutá kostička z vlasů Bocchi.
// ============================================
.spin-wheel-modal.spin-theme-bocchi {
  --bocchi-font: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
  --bocchi-display: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
  --bocchi-pink: #cc3570;
  --bocchi-pink-deep: #a8245a;
  --bocchi-ink: #1d1a22;
  --bocchi-line: #1d1a22;
  --bocchi-panel: #ffffff;
  --bocchi-text: #1d1a22;
  // Bocchi, Nijika, Ryo, Kita, Les Paul a světle růžová
  --wheel-c0: #e0457b;
  --wheel-c1: #e8b400;
  --wheel-c2: #3a63c9;
  --wheel-c3: #d93a30;
  --wheel-c4: #2b2530;
  --wheel-c5: #f07fa8;
  --wheel-rim: #1d1a22;
  --wheel-hub: #ffcf33;

  font-family: var(--bocchi-font);

  .modal-content {
    border: 3px solid var(--bocchi-line);
    border-radius: 12px;
    overflow: hidden;
    background:
      radial-gradient(circle, rgb(224 69 123 / 0.12) 0 1.4px, transparent 1.9px) 0 0 / 12px 12px,
      #fff6f9;
    color: var(--bocchi-text);
  }

  .modal-header {
    background:
      linear-gradient(90deg, #e0457b 0 25%, #ffcf33 25% 50%, #3a63c9 50% 75%, #d93a30 75% 100%) bottom / 100% 5px no-repeat,
      #0f0d12;
    border-bottom: none;

    h2 {
      color: #fff;
      font-family: var(--bocchi-display);
      font-weight: 400;
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
      opacity: 0.9;
    }
  }

  .modal-footer {
    border-top: 2px solid var(--bocchi-line);
  }

  .spin-steps span {
    font-family: var(--bocchi-font);
    font-weight: 800;
    background: #f3e7ed;
    color: #8f8597;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 4px 16px;

    &.active {
      background: #ffcf33;
      color: var(--bocchi-ink);
      border-color: var(--bocchi-ink);
      box-shadow: 3px 3px 0 var(--bocchi-pink);
    }

    &.done {
      background: var(--bocchi-ink);
      color: #fff;
    }
  }

  .btn {
    font-family: var(--bocchi-font);
    font-weight: 800;
    border-radius: 6px;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;

    &:active:not(:disabled) {
      transform: translate(3px, 3px);
      box-shadow: none;
    }
  }

  .btn-primary {
    background: var(--bocchi-pink);
    border: 2px solid var(--bocchi-ink);
    box-shadow: 3px 3px 0 var(--bocchi-ink);
    color: #fff;

    &:disabled {
      background: #cfc6d3;
      border-color: #8f8597;
      box-shadow: 3px 3px 0 #8f8597;
    }
  }

  // Tlačítko roztočení — žlutá samolepka s růžovým a černým stínem
  .spin-button {
    font-family: var(--bocchi-display);
    font-weight: 400;
    background: #ffcf33;
    color: var(--bocchi-ink);
    border: 3px solid var(--bocchi-ink);
    box-shadow: 4px 4px 0 var(--bocchi-pink), 7px 7px 0 var(--bocchi-ink);
    font-size: 1.15rem;
    padding: 12px 36px;

    &:hover:not(:disabled) {
      background: #ffd94f;
      color: var(--bocchi-ink);
    }
  }

  .btn-outline-primary {
    background: #fff;
    border: 2px solid var(--bocchi-line);
    color: var(--bocchi-pink);
    box-shadow: 3px 3px 0 var(--bocchi-ink);

    &:hover {
      background: #ffe4ee;
      color: var(--bocchi-pink-deep);
    }
  }

  .btn-secondary {
    background: #fff;
    border: 2px solid var(--bocchi-line);
    color: var(--bocchi-text);
    box-shadow: 3px 3px 0 var(--bocchi-ink);
  }

  .spin-source {
    background: #f3e7ed;

    > .btn-primary {
      background: var(--bocchi-pink);
      box-shadow: none !important;
    }

    > .btn-outline-primary {
      background: transparent;
      box-shadow: none;
      color: var(--bocchi-ink);

      &:hover {
        background: #fff;
      }
    }
  }

  .spin-result {
    font-weight: 800;

    strong {
      color: var(--bocchi-pink);
    }
  }

  .spin-options {
    background: var(--bocchi-panel);
    border: 2px solid var(--bocchi-line);
    border-radius: 10px;
    box-shadow: 4px 4px 0 var(--bocchi-ink);

    li:hover {
      background: #fff0f5;
    }
  }

  .spin-options-header {
    border-bottom: 2px solid var(--bocchi-line);
    color: var(--bocchi-ink);
  }

  .spin-empty {
    border-color: var(--bocchi-line);
  }

  .spin-wheel-pointer {
    border-top-color: var(--bocchi-pink);
    filter: drop-shadow(2px 2px 0 var(--bocchi-ink));
  }

  .spin-seg {
    stroke: #1d1a22;
    stroke-width: 2.5;
  }

  .spin-seg-label {
    font-family: var(--bocchi-font);
    font-weight: 800;
  }
}

// Tmavý režim — koncert v live house STARRY
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-bocchi {
  --bocchi-pink: #ff6fa0;
  --bocchi-pink-deep: #e0457b;
  --bocchi-line: #5a4d66;
  --bocchi-panel: #1d1a24;
  --bocchi-text: #f5eff8;
  --wheel-c4: #4a3f58;

  .modal-content {
    background:
      radial-gradient(circle, rgb(255 111 160 / 0.10) 0 1.4px, transparent 1.9px) 0 0 / 12px 12px,
      radial-gradient(ellipse 40% 55% at 15% -10%, rgb(255 111 160 / 0.22), transparent 70%),
      radial-gradient(ellipse 40% 55% at 85% -10%, rgb(125 156 255 / 0.20), transparent 70%),
      #121016;
  }

  .spin-steps span:not(.active):not(.done) {
    background: #282231;
    color: #8f8499;
  }

  .spin-steps span.done {
    background: #3a3246;
  }

  .btn-primary {
    color: #1d1a22;
  }

  .btn-outline-primary, .btn-secondary {
    background: #1d1a24;
    color: #f5eff8;
    box-shadow: 3px 3px 0 #8c2350;
  }

  .spin-source {
    background: #282231;

    > .btn-outline-primary {
      background: transparent;
      box-shadow: none;
      color: #c9bfd2;

      &:hover {
        background: #1d1a24;
        color: #fff;
      }
    }
  }

  .spin-options {
    box-shadow: 4px 4px 0 #8c2350;
  }

  .spin-options-header {
    color: #ffcf33;
  }

  .spin-options li:hover {
    background: #2e2236;
  }
}

// ============================================
// 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;
  }
}

// ============================================
// 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;
  }
}

// ============================================
// STYL SPY × FAMILY kola štěstí (dle stylu zvoleného v nastavení).
// Výseče v retro barvách Forgerových (petrolejová, korálová, hořčicová,
// růžová Anya, námořnická, olivová), krémové linky a střed jako hvězda Stella.
// ============================================
.spin-wheel-modal.spin-theme-spyfamily {
  --sxf-font: 'Nunito', sans-serif;
  --sxf-display: 'Playfair Display', Georgia, serif;
  --sxf-typewriter: 'Courier Prime', 'Courier New', monospace;
  --sxf-teal: #1e6f6c;
  --sxf-teal-deep: #155452;
  --sxf-coral: #d9483b;
  --sxf-line: #e3d7bf;
  --sxf-panel: #fffcf5;
  --sxf-text: #2b2620;
  --sxf-cream-line: #f7f0e1;
  --wheel-c0: #1e6f6c;
  --wheel-c1: #d9483b;
  --wheel-c2: #e2a93b;
  --wheel-c3: #e98aa8;
  --wheel-c4: #22303c;
  --wheel-c5: #6b8f4e;
  --wheel-rim: #22303c;
  --wheel-hub: #c9a44c;

  font-family: var(--sxf-font);

  .modal-content {
    border: 1px solid var(--sxf-line);
    border-radius: 14px;
    overflow: hidden;
    background: #f7f0e1;
    color: var(--sxf-text);
  }

  .modal-header {
    background:
      linear-gradient(var(--sxf-coral), var(--sxf-coral)) left bottom / 100% 3px no-repeat,
      linear-gradient(var(--sxf-cream-line), var(--sxf-cream-line)) left bottom 5px / 100% 2px no-repeat,
      #22303c;
    border-bottom: none;

    h2 {
      color: #fbf6ea;
      font-family: var(--sxf-display);
      font-weight: 800;
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
      opacity: 0.9;
    }
  }

  .modal-footer {
    border-top: 1px solid var(--sxf-line);
  }

  .spin-steps span {
    font-family: var(--sxf-typewriter);
    font-weight: 700;
    background: #efe6d3;
    color: #8c8274;
    border-radius: 4px;
    padding: 4px 16px;

    &.active {
      background: var(--sxf-teal);
      color: #fffcf5;
    }

    &.done {
      background: #f2e2b9;
      color: #2b2418;
    }
  }

  .btn {
    font-family: var(--sxf-font);
    font-weight: 800;
    border-radius: 4px;
  }

  .btn-primary {
    background: var(--sxf-teal);
    border: 1px solid var(--sxf-teal-deep);
    color: #fffcf5;
    box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.25), 0 2px 0 var(--sxf-teal-deep);

    &:hover:not(:disabled) {
      background: var(--sxf-teal-deep);
      color: #fffcf5;
    }

    &:disabled {
      background: #d6ccbb;
      border-color: #d6ccbb;
      color: #8c8274;
      box-shadow: none;
    }
  }

  // Tlačítko roztočení — korálové jako Yořiny růže
  .spin-button {
    font-family: var(--sxf-display);
    font-style: italic;
    font-size: 1.25rem;
    padding: 10px 38px;
    background: var(--sxf-coral);
    border-color: #a8332a;
    box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.3), 0 3px 0 #a8332a;

    &:hover:not(:disabled) {
      background: #c23a2e;
    }
  }

  .btn-outline-primary {
    background: var(--sxf-panel);
    border: 2px solid var(--sxf-teal);
    color: var(--sxf-teal);

    &:hover {
      background: #dcefeb;
      color: var(--sxf-teal);
    }
  }

  .btn-secondary {
    background: #22303c;
    border: 1px solid #22303c;
    color: #fbf6ea;
  }

  .spin-source {
    background: #efe6d3;
    border-radius: 6px;

    > .btn {
      border-radius: 4px !important;
    }

    > .btn-outline-primary {
      background: transparent;
      color: var(--sxf-text);

      &:hover {
        background: var(--sxf-panel);
      }
    }
  }

  .spin-result {
    font-weight: 800;

    strong {
      color: var(--sxf-coral);
    }
  }

  .spin-options {
    background: var(--sxf-panel);
    border: 1px solid var(--sxf-line);
    border-radius: 10px;

    li:hover {
      background: #f6ecd8;
    }
  }

  .spin-options-header {
    border-bottom: 2px solid var(--sxf-coral);
    color: var(--sxf-teal);
    font-family: var(--sxf-typewriter);
  }

  .spin-empty {
    border-color: var(--sxf-line);
  }

  .spin-wheel-pointer {
    border-top-color: var(--sxf-coral);
    filter: drop-shadow(0 2px 1px rgb(34 48 60 / 0.4));
  }

  .spin-seg {
    stroke: #f7f0e1;
    stroke-width: 2.5;
  }

  .spin-seg-label {
    font-family: var(--sxf-font);
    font-weight: 800;
  }
}

// Tmavý režim — noční mise Thorn Princess
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-spyfamily {
  --sxf-teal: #4fb3ac;
  --sxf-teal-deep: #3a8f89;
  --sxf-coral: #e0475a;
  --sxf-line: #3a2a34;
  --sxf-panel: #1f1720;
  --sxf-text: #f4ece2;
  --sxf-cream-line: #d8b866;
  --wheel-c0: #2f8f89;
  --wheel-c1: #b3263a;
  --wheel-c4: #3c2a3e;
  --wheel-rim: #0c080c;
  --wheel-hub: #d8b866;

  .modal-content {
    background:
      radial-gradient(ellipse 60% 45% at 85% -5%, rgb(224 71 90 / 0.18), transparent 70%),
      #140e14;
  }

  .modal-header {
    background-color: #0c080c;
  }

  .spin-steps span:not(.active):not(.done) {
    background: #2a1f2b;
    color: #968a90;
  }

  .spin-steps span.done {
    background: #2e2418;
    color: #d8b866;
  }

  .btn-primary {
    background: #d8b866;
    border-color: #a88a3f;
    color: #1c1410;
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.2), 0 2px 0 #7f682f;

    &:hover:not(:disabled) {
      background: #e8cc82;
      color: #1c1410;
    }

    &:disabled {
      background: #3a2e34;
      border-color: #3a2e34;
      color: #968a90;
    }
  }

  .spin-button {
    background: var(--sxf-coral);
    border-color: #8f1d2c;
    color: #fffcf5;
    box-shadow: inset 0 0 0 2px rgb(255 252 245 / 0.25), 0 3px 0 #8f1d2c;

    &:hover:not(:disabled) {
      background: #c93a4d;
      color: #fffcf5;
    }
  }

  .btn-outline-primary {
    border-color: #d8b866;
    color: #d8b866;

    &:hover {
      background: #34281c;
      color: #e8cc82;
    }
  }

  .btn-secondary {
    background: #2a1f2b;
    border-color: #3a2a34;
  }

  .spin-source {
    background: #2a1f2b;
  }

  .spin-options li:hover {
    background: #2a1f2b;
  }

  .spin-options-header {
    color: #d8b866;
  }

  .spin-seg {
    stroke: #140e14;
  }
}

// ============================================
// STYL APOTHECARY DIARIES kola štěstí (dle stylu zvoleného v nastavení).
// Výseče v barvách vnitřního paláce (rumělka, nefrit, zlato, inkoust,
// fialová Jinshiho, švestkový květ), zlaté linky a střed jako zlatá pečeť.
// ============================================
.spin-wheel-modal.spin-theme-apothecary {
  --apo-font: 'Nunito', sans-serif;
  --apo-display: 'Shippori Mincho', 'Noto Serif JP', serif;
  --apo-vermilion: #a8322a;
  --apo-vermilion-deep: #84241d;
  --apo-jade: #2f7d62;
  --apo-gold: #c9a24a;
  --apo-line: #e0d4bb;
  --apo-panel: #fffcf4;
  --apo-text: #24201c;
  --wheel-c0: #a8322a;
  --wheel-c1: #2f7d62;
  --wheel-c2: #c9a24a;
  --wheel-c3: #24201c;
  --wheel-c4: #6b5aa6;
  --wheel-c5: #c76a86;
  --wheel-rim: #3a1f14;
  --wheel-hub: #d9b65e;

  font-family: var(--apo-font);

  .modal-content {
    border: 1px solid var(--apo-gold);
    border-radius: 10px;
    overflow: hidden;
    background: #f5efe1;
    color: var(--apo-text);
  }

  .modal-header {
    background:
      linear-gradient(var(--apo-gold), var(--apo-gold)) left bottom / 100% 2px no-repeat,
      linear-gradient(var(--apo-gold), var(--apo-gold)) left bottom 4px / 100% 1px no-repeat,
      #24201c;
    border-bottom: none;

    h2 {
      color: #fdf6e6;
      font-family: var(--apo-display);
      font-weight: 800;
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
      opacity: 0.9;
    }
  }

  .modal-footer {
    border-top: 3px double var(--apo-gold);
  }

  .spin-steps span {
    font-family: var(--apo-display);
    font-weight: 800;
    background: #ece3d0;
    color: #8b7f70;
    border-radius: 3px;
    padding: 4px 16px;

    &.active {
      background: var(--apo-vermilion);
      color: #fdf6e6;
      box-shadow: inset 0 0 0 2px rgb(201 162 74 / 0.6);
    }

    &.done {
      background: var(--apo-jade);
      color: #fff;
    }
  }

  .btn {
    font-family: var(--apo-font);
    font-weight: 800;
    border-radius: 3px;
  }

  .btn-primary {
    background: var(--apo-vermilion);
    border: 1px solid var(--apo-vermilion-deep);
    color: #fdf6e6;
    box-shadow: inset 0 0 0 2px rgb(201 162 74 / 0.55);

    &:hover:not(:disabled) {
      background: var(--apo-vermilion-deep);
      color: #fdf6e6;
      box-shadow: inset 0 0 0 2px var(--apo-gold), 0 0 12px rgb(201 162 74 / 0.45);
    }

    &:disabled {
      background: #d8cfbf;
      border-color: #d8cfbf;
      color: #8b7f70;
      box-shadow: none;
    }
  }

  // Tlačítko roztočení — zlatá pečeť
  .spin-button {
    font-family: var(--apo-display);
    font-size: 1.2rem;
    padding: 10px 38px;
  }

  .btn-outline-primary {
    background: var(--apo-panel);
    border: 1px solid var(--apo-gold);
    color: var(--apo-vermilion);

    &:hover {
      background: #f6e2dc;
      color: var(--apo-vermilion);
    }
  }

  .btn-secondary {
    background: var(--apo-jade);
    border: 1px solid #22604a;
    color: #fff;
  }

  .spin-source {
    background: #ece3d0;
    border-radius: 4px;

    > .btn {
      border-radius: 3px !important;
    }

    > .btn-outline-primary {
      background: transparent;
      color: var(--apo-text);

      &:hover {
        background: var(--apo-panel);
      }
    }
  }

  .spin-result {
    font-weight: 800;

    strong {
      color: var(--apo-vermilion);
    }
  }

  .spin-options {
    background: var(--apo-panel);
    border: 1px solid var(--apo-line);
    border-radius: 8px;

    li:hover {
      background: #f4ead6;
    }
  }

  .spin-options-header {
    border-bottom: 3px double var(--apo-gold);
    color: var(--apo-vermilion);
    font-family: var(--apo-display);
  }

  .spin-empty {
    border-color: var(--apo-line);
  }

  .spin-wheel-pointer {
    border-top-color: var(--apo-vermilion);
    filter: drop-shadow(0 2px 1px rgb(58 31 20 / 0.4));
  }

  .spin-seg {
    stroke: #d9b65e;
    stroke-width: 2;
  }

  .spin-seg-label {
    font-family: var(--apo-display);
    font-weight: 800;
  }
}

// Tmavý režim — noc v paláci pod lampiony
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-apothecary {
  --apo-vermilion: #d6503f;
  --apo-vermilion-deep: #b53b2d;
  --apo-jade: #3f9474;
  --apo-gold: #d9b65e;
  --apo-line: #3a2e2a;
  --apo-panel: #1e1a22;
  --apo-text: #f2eadb;
  --wheel-c0: #b53b2d;
  --wheel-c3: #3a3036;
  --wheel-rim: #0e0c10;

  .modal-content {
    background:
      radial-gradient(circle at 8% 0%, rgb(214 80 63 / 0.22), transparent 35%),
      radial-gradient(circle at 92% 0%, rgb(232 165 74 / 0.16), transparent 32%),
      #14121a;
  }

  .modal-header {
    background-color: #0e0c10;
  }

  .spin-steps span:not(.active):not(.done) {
    background: #29232d;
    color: #948a80;
  }

  .btn-primary:disabled {
    background: #3a3036;
    border-color: #3a3036;
    color: #948a80;
  }

  .btn-outline-primary {
    color: #e8a54a;

    &:hover {
      background: #3a2618;
      color: #f2bd6a;
    }
  }

  .spin-source {
    background: #29232d;
  }

  .spin-options li:hover {
    background: #29232d;
  }

  .spin-options-header {
    color: #d9b65e;
  }
}

// ============================================
// STYL FRIEREN kola štěstí (dle stylu zvoleného v nastavení).
// Výseče v barvách družiny a krajiny (fialová Fern, levandule, Himmelova
// modř, zlato, louka, růžová), zlaté linky a střed jako magický kruh.
// ============================================
.spin-wheel-modal.spin-theme-frieren {
  --fr-font: 'Nunito', sans-serif;
  --fr-display: 'Cormorant Garamond', Georgia, serif;
  --fr-violet: #5b4a9e;
  --fr-violet-deep: #463882;
  --fr-lavender: #8e7cc3;
  --fr-gold: #bf9b4a;
  --fr-line: #dcd8ea;
  --fr-panel: #ffffff;
  --fr-text: #2e2a3d;
  --wheel-c0: #5b4a9e;
  --wheel-c1: #8e7cc3;
  --wheel-c2: #5b8fc7;
  --wheel-c3: #bf9b4a;
  --wheel-c4: #6f9f6a;
  --wheel-c5: #c76a96;
  --wheel-rim: #3d3466;
  --wheel-hub: #e9c86a;

  font-family: var(--fr-font);

  .modal-content {
    border: 1px solid var(--fr-line);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #e6ecf7 0, #f6f5fb 180px);
    color: var(--fr-text);
  }

  .modal-header {
    background:
      linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
      linear-gradient(90deg, #3d3466, #4b4380);
    border-bottom: none;

    h2 {
      color: #f6f3ff;
      font-family: var(--fr-display);
      font-weight: 700;
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
      opacity: 0.9;
    }
  }

  .modal-footer {
    border-top: 1px solid var(--fr-line);
  }

  .spin-steps span {
    font-family: var(--fr-display);
    font-weight: 700;
    font-size: 1.05rem;
    background: #ebe8f3;
    color: #8a869b;
    border-radius: 999px;
    padding: 2px 16px;

    &.active {
      background: var(--fr-violet);
      color: #fff;
      box-shadow: 0 0 10px rgb(142 124 195 / 0.5);
    }

    &.done {
      background: #e4def6;
      color: var(--fr-violet-deep);
    }
  }

  .btn {
    font-family: var(--fr-font);
    font-weight: 800;
    border-radius: 999px;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--fr-violet), var(--fr-lavender));
    border: none;
    color: #fff;
    box-shadow: 0 3px 10px rgb(91 74 158 / 0.25);

    &:hover:not(:disabled) {
      background: linear-gradient(135deg, var(--fr-violet-deep), var(--fr-violet));
      color: #fff;
      box-shadow: 0 0 0 3px rgb(191 155 74 / 0.35), 0 0 18px rgb(142 124 195 / 0.55);
    }

    &:disabled {
      background: #d9d6e4;
      color: #8a869b;
      box-shadow: none;
    }
  }

  // Tlačítko roztočení — seslání kouzla
  .spin-button {
    font-family: var(--fr-display);
    font-weight: 700;
    font-size: 1.35rem;
    padding: 8px 40px;
  }

  .btn-outline-primary {
    background: var(--fr-panel);
    border: 1px solid var(--fr-lavender);
    color: var(--fr-violet);

    &:hover {
      background: #ebe6f7;
      color: var(--fr-violet);
    }
  }

  .btn-secondary {
    background: #6f7a92;
    border: none;
    color: #fff;
  }

  .spin-source {
    background: #ebe8f3;

    > .btn-outline-primary {
      background: transparent;
      color: var(--fr-text);

      &:hover {
        background: var(--fr-panel);
      }
    }
  }

  .spin-result {
    font-weight: 800;

    strong {
      color: var(--fr-violet);
    }
  }

  .spin-options {
    background: var(--fr-panel);
    border: 1px solid var(--fr-line);
    border-radius: 14px;

    li:hover {
      background: #f1eef9;
    }
  }

  .spin-options-header {
    border-bottom: 1px solid var(--fr-gold);
    color: var(--fr-violet);
    font-family: var(--fr-display);
    font-size: 1.05rem;
  }

  .spin-empty {
    border-color: var(--fr-line);
  }

  .spin-wheel-pointer {
    border-top-color: var(--fr-gold);
    filter: drop-shadow(0 0 4px rgb(233 200 106 / 0.7));
  }

  .spin-seg {
    stroke: #e9c86a;
    stroke-width: 1.5;
  }

  .spin-seg-label {
    font-family: var(--fr-font);
    font-weight: 800;
  }
}

// Tmavý režim — noc pod hvězdami
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-frieren {
  --fr-violet: #b3a3ea;
  --fr-violet-deep: #9a88dc;
  --fr-gold: #dcc07a;
  --fr-line: #2e2b45;
  --fr-panel: #1b1a2b;
  --fr-text: #eeebf7;
  --wheel-c0: #45397a;
  --wheel-rim: #0c0b16;

  .modal-content {
    background:
      radial-gradient(1.2px 1.2px at 30px 40px, rgb(255 255 255 / 0.85), transparent) 0 0 / 200px 200px,
      radial-gradient(1px 1px at 140px 110px, rgb(220 210 255 / 0.7), transparent) 0 0 / 200px 200px,
      radial-gradient(circle at 88% 8%, rgb(255 244 210 / 0.16) 0 24px, transparent 90px),
      #11101d;
  }

  .modal-header {
    background:
      linear-gradient(var(--fr-gold), var(--fr-gold)) left bottom / 100% 1px no-repeat,
      #0c0b16;
  }

  .spin-steps span:not(.active):not(.done) {
    background: #242238;
    color: #8f8ba5;
  }

  .spin-steps span.active {
    color: #17142a;
  }

  .spin-steps span.done {
    background: #2b2646;
    color: #c8bbf2;
  }

  .btn-primary {
    background: linear-gradient(135deg, #8e7cc3, #b3a3ea);
    color: #17142a;

    &:hover:not(:disabled) {
      background: linear-gradient(135deg, #a593dc, #c8bbf2);
      color: #17142a;
    }

    &:disabled {
      background: #2e2b45;
      color: #8f8ba5;
    }
  }

  .btn-outline-primary:hover {
    background: #2b2646;
  }

  .btn-secondary {
    background: #2e2b45;
  }

  .spin-source {
    background: #242238;
  }

  .spin-options li:hover {
    background: #242238;
  }

  .spin-options-header {
    color: #dcc07a;
  }
}

// ============================================
// STYL MY LITTLE PONY (G5) kola štěstí (dle stylu zvoleného v nastavení).
// Výseče v barvách Mane 5 a Misty, bílé linky a střed jako sluníčko Sunny.
// ============================================
.spin-wheel-modal.spin-theme-mlpg5 {
  --g5-font: 'Nunito', sans-serif;
  --g5-display: 'Baloo 2', 'Nunito', sans-serif;
  --g5-sunny: #f08a3c;
  --g5-sunny-deep: #c85a14;
  --g5-pipp: #ee5fa8;
  --g5-hitch: #2fa89c;
  --g5-line: #f3dccb;
  --g5-panel: #ffffff;
  --g5-text: #2b2440;
  --wheel-c0: #f08a3c;
  --wheel-c1: #ee5fa8;
  --wheel-c2: #9b6fe0;
  --wheel-c3: #5a7bd8;
  --wheel-c4: #2fa89c;
  --wheel-c5: #6fb1d6;
  --wheel-rim: #1f8f9a;
  --wheel-hub: #ffd23f;

  font-family: var(--g5-font);

  .modal-content {
    border: none;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(180deg, #e2f6f6 0, #fff8f1 200px);
    color: var(--g5-text);
  }

  .modal-header {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12'%3E%3Cpath d='M0 12V6Q20 0 40 6T80 6V12Z' fill='%23e2f6f6'/%3E%3C/svg%3E") left bottom / 80px 12px repeat-x,
      linear-gradient(120deg, #1f8f9a, #2fa89c);
    border-bottom: none;
    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 10px);

    h2 {
      color: #fff;
      font-family: var(--g5-display);
      font-weight: 800;
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
      opacity: 0.9;
    }
  }

  .modal-footer {
    border-top: 2px solid var(--g5-line);
  }

  .spin-steps span {
    font-family: var(--g5-display);
    font-weight: 800;
    background: #f3ece6;
    color: #908aa3;
    border-radius: 999px;
    padding: 2px 16px;

    &.active {
      background: linear-gradient(120deg, var(--g5-sunny), var(--g5-pipp));
      color: #fff;
    }

    &.done {
      background: var(--g5-hitch);
      color: #fff;
    }
  }

  .btn {
    font-family: var(--g5-font);
    font-weight: 800;
    border-radius: 999px;
  }

  .btn-primary {
    background: linear-gradient(120deg, var(--g5-sunny), var(--g5-pipp));
    border: none;
    color: #fff;
    text-shadow: 0 1px 0 rgb(0 0 0 / 0.15);
    box-shadow: 0 4px 0 #c43d82;

    &:hover:not(:disabled) {
      background: linear-gradient(120deg, var(--g5-sunny), var(--g5-pipp));
      color: #fff;
      filter: brightness(1.07) saturate(1.1);
    }

    &:active:not(:disabled) {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #c43d82;
    }

    &:disabled {
      background: #e3dde9;
      color: #908aa3;
      text-shadow: none;
      box-shadow: 0 4px 0 #cbc4d6;
    }
  }

  // Tlačítko roztočení — velká buclatá pilulka
  .spin-button {
    font-family: var(--g5-display);
    font-size: 1.35rem;
    padding: 8px 40px 4px;
    box-shadow: 0 5px 0 #c43d82, 0 10px 20px -6px rgb(238 95 168 / 0.6);
  }

  .btn-outline-primary {
    background: var(--g5-panel);
    border: 2px solid var(--g5-pipp);
    color: var(--g5-sunny-deep);

    &:hover {
      background: #ffeadb;
      color: var(--g5-sunny-deep);
    }
  }

  .btn-secondary {
    background: var(--g5-hitch);
    border: none;
    color: #fff;
    box-shadow: 0 4px 0 #1e7a70;
  }

  .spin-source {
    background: #f3ece6;

    > .btn-primary {
      box-shadow: none !important;
    }

    > .btn-outline-primary {
      background: transparent;
      color: var(--g5-text);

      &:hover {
        background: var(--g5-panel);
      }
    }
  }

  .spin-result {
    font-weight: 800;

    strong {
      color: var(--g5-sunny-deep);
    }
  }

  .spin-options {
    background: var(--g5-panel);
    border: 1px solid var(--g5-line);
    border-radius: 20px;

    li:hover {
      background: #fff1e5;
    }
  }

  .spin-options-header {
    border-bottom: 2px solid var(--g5-line);
    color: var(--g5-pipp);
    font-family: var(--g5-display);
  }

  .spin-empty {
    border-color: var(--g5-line);
  }

  .spin-wheel-pointer {
    border-top-color: var(--g5-pipp);
    filter: drop-shadow(0 3px 2px rgb(196 61 130 / 0.45));
  }

  .spin-seg {
    stroke: #fff;
    stroke-width: 3;
  }

  .spin-seg-label {
    font-family: var(--g5-display);
    font-weight: 800;
  }
}

// Tmavý režim — noční Bridlewood
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-mlpg5 {
  --g5-sunny: #ffa560;
  --g5-sunny-deep: #ff9a4d;
  --g5-pipp: #ff7cbb;
  --g5-hitch: #1f8f86;
  --g5-line: #2c3650;
  --g5-panel: #1a2233;
  --g5-text: #f1eefa;
  --wheel-rim: #0c3a42;

  .modal-content {
    background:
      radial-gradient(circle at 12% 20%, rgb(79 209 194 / 0.14) 0 40px, transparent 110px),
      radial-gradient(circle at 88% 70%, rgb(184 148 242 / 0.16) 0 50px, transparent 130px),
      #0f1724;
  }

  .modal-header {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12'%3E%3Cpath d='M0 12V6Q20 0 40 6T80 6V12Z' fill='%230f1724'/%3E%3C/svg%3E") left bottom / 80px 12px repeat-x,
      linear-gradient(120deg, #0c3a42, #12505a);
  }

  .spin-steps span:not(.active):not(.done) {
    background: #222c40;
    color: #8e89a6;
  }

  .btn-primary:disabled {
    background: #2c3650;
    color: #8e89a6;
    box-shadow: 0 4px 0 #1f273a;
  }

  .btn-outline-primary:hover {
    background: #3a2a26;
  }

  .btn-secondary {
    box-shadow: 0 4px 0 #125a54;
  }

  .spin-source {
    background: #222c40;
  }

  .spin-options li:hover {
    background: #222c40;
  }

  .spin-seg {
    stroke: #0f1724;
  }
}

// ============================================
// STYL AGGRETSUKO kola štěstí (dle stylu zvoleného v nastavení).
// Výseče v barvách kanceláře (rezavá Retsuko, ocelově modrá, lepicí
// papírek, razítko, růžová Tsunoda, šedá Haida), střed jako razítko hanko.
// V rage mode černé kolo s rudými výsečemi.
// ============================================
.spin-wheel-modal.spin-theme-aggretsuko {
  --agg-font: 'Nunito', sans-serif;
  --agg-display: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
  --agg-metal: 'Metal Mania', 'M PLUS Rounded 1c', sans-serif;
  --agg-retsuko: #d9673a;
  --agg-retsuko-deep: #b4481f;
  --agg-office: #4a5d7a;
  --agg-line: #ecdccb;
  --agg-panel: #ffffff;
  --agg-text: #2f2a2a;
  --wheel-c0: #d9673a;
  --wheel-c1: #4a5d7a;
  --wheel-c2: #e8b923;
  --wheel-c3: #c8102e;
  --wheel-c4: #e08aa6;
  --wheel-c5: #6b6f7a;
  --wheel-rim: #394a63;
  --wheel-hub: #fff4e8;

  font-family: var(--agg-font);

  .modal-content {
    border: 1px solid var(--agg-line);
    border-radius: 16px;
    overflow: hidden;
    background:
      linear-gradient(rgb(74 93 122 / 0.07) 1px, transparent 1px) 0 0 / 100% 26px,
      linear-gradient(90deg, rgb(74 93 122 / 0.07) 1px, transparent 1px) 0 0 / 104px 100%,
      #fbf6ef;
    color: var(--agg-text);
  }

  .modal-header {
    background:
      linear-gradient(var(--agg-retsuko), var(--agg-retsuko)) left bottom / 100% 4px no-repeat,
      var(--agg-office);
    border-bottom: none;

    h2 {
      color: #fff;
      font-family: var(--agg-display);
      font-weight: 800;
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
      opacity: 0.9;
    }
  }

  .modal-footer {
    border-top: 1px solid var(--agg-line);
  }

  .spin-steps span {
    font-family: var(--agg-display);
    font-weight: 800;
    background: #f1e8de;
    color: #8f8584;
    border-radius: 6px;
    padding: 4px 16px;

    &.active {
      background: var(--agg-retsuko);
      color: #fff;
    }

    &.done {
      background: #ffe873;
      color: #3a3220;
    }
  }

  .btn {
    font-family: var(--agg-font);
    font-weight: 800;
    border-radius: 6px;
  }

  .btn-primary {
    background: var(--agg-retsuko);
    border: 1px solid var(--agg-retsuko-deep);
    color: #fff;
    box-shadow: 0 2px 0 var(--agg-retsuko-deep);

    &:hover:not(:disabled) {
      background: var(--agg-retsuko-deep);
      color: #fff;
    }

    &:disabled {
      background: #e4dcd4;
      border-color: #e4dcd4;
      color: #8f8584;
      box-shadow: none;
    }
  }

  // Tlačítko roztočení — Retsuko se chystá zařvat
  .spin-button {
    font-family: var(--agg-display);
    font-size: 1.2rem;
    padding: 10px 38px;

    &:hover:not(:disabled) {
      background: #c8102e;
      border-color: #8f0a20;
      animation: agg-rage 0.35s ease-in-out;
    }
  }

  .btn-outline-primary {
    background: var(--agg-panel);
    border: 1px solid var(--agg-retsuko);
    color: var(--agg-retsuko-deep);

    &:hover {
      background: #fde6d8;
      color: var(--agg-retsuko-deep);
    }
  }

  .btn-secondary {
    background: var(--agg-office);
    border: 1px solid #394a63;
    color: #fff;
  }

  .spin-source {
    background: #f1e8de;
    border-radius: 8px;

    > .btn {
      border-radius: 6px !important;
    }

    > .btn-outline-primary {
      background: transparent;
      color: var(--agg-text);

      &:hover {
        background: var(--agg-panel);
      }
    }
  }

  .spin-result {
    font-weight: 800;

    strong {
      color: var(--agg-retsuko-deep);
    }
  }

  .spin-options {
    background: var(--agg-panel);
    border: 1px solid var(--agg-line);
    border-radius: 12px;

    li:hover {
      background: #fff1e4;
    }
  }

  .spin-options-header {
    border-bottom: 2px solid var(--agg-retsuko);
    color: var(--agg-office);
    font-family: var(--agg-display);
  }

  .spin-empty {
    border-color: var(--agg-line);
  }

  .spin-wheel-pointer {
    border-top-color: #c8102e;
    filter: drop-shadow(0 2px 1px rgb(0 0 0 / 0.3));
  }

  .spin-wheel-hub {
    stroke: #c8102e;
  }

  .spin-seg {
    stroke: #fff;
    stroke-width: 2;
  }

  .spin-seg-label {
    font-family: var(--agg-display);
    font-weight: 800;
  }
}

// Rage mode — karaoke box
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-aggretsuko {
  --agg-retsuko: #ff4a3d;
  --agg-retsuko-deep: #c8102e;
  --agg-line: #3a1c20;
  --agg-panel: #171314;
  --agg-text: #f2ecea;
  --wheel-c0: #c8102e;
  --wheel-c1: #5c2a30;
  --wheel-c2: #ff4a3d;
  --wheel-c3: #3a1c20;
  --wheel-c4: #8f0a20;
  --wheel-c5: #6b4a4e;
  --wheel-rim: #ff2e3f;
  --wheel-hub: #000000;

  .modal-content {
    border-color: #ff2e3f;
    background:
      radial-gradient(ellipse 50% 40% at 50% -10%, rgb(255 46 63 / 0.3), transparent 70%),
      #0d0b0c;
  }

  .modal-header {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 7L4 1L8 7L12 1L16 7' fill='none' stroke='%23ff2e3f' stroke-width='2'/%3E%3C/svg%3E") left bottom / 16px 8px repeat-x,
      #000;
    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 6px);

    h2 {
      font-family: var(--agg-metal);
      font-weight: 400;
      letter-spacing: 0.03em;
      text-shadow: 0 0 10px rgb(255 46 63 / 0.8);
    }
  }

  .spin-steps span:not(.active):not(.done) {
    background: #221a1b;
    color: #8f8584;
  }

  .spin-steps span.active {
    background: #c8102e;
  }

  .spin-steps span.done {
    background: #2a0f12;
    color: #ff4a3d;
  }

  .btn-primary {
    background: #c8102e;
    border-color: #ff2e3f;
    box-shadow: 0 0 12px rgb(255 46 63 / 0.45);

    &:hover:not(:disabled) {
      background: #e0283f;
    }

    &:disabled {
      background: #2a1f20;
      border-color: #2a1f20;
      color: #8f8584;
      box-shadow: none;
    }
  }

  .spin-button {
    font-family: var(--agg-metal);
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
  }

  .btn-outline-primary:hover {
    background: #3a1416;
  }

  .btn-secondary {
    background: #241c1d;
    border-color: #3a2a2c;
  }

  .spin-source {
    background: #221a1b;
  }

  .spin-options li:hover {
    background: #221a1b;
  }

  .spin-options-header {
    color: #ff4a3d;
    font-family: var(--agg-metal);
    font-weight: 400;
    letter-spacing: 0.03em;
  }

  .spin-wheel-hub {
    stroke: #ff2e3f;
  }

  .spin-seg {
    stroke: #ff2e3f;
    stroke-width: 1.5;
  }
}

// ============================================
// STYL SUMIKKO GURASHI kola štěstí (dle stylu zvoleného v nastavení).
// Pastelové výseče v barvách postaviček s hnědými popisky a linkami,
// střed jako tapioková perlička.
// ============================================
.spin-wheel-modal.spin-theme-sumikko {
  --sk-font: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
  --sk-display: 'Klee One', 'Zen Maru Gothic', sans-serif;
  --sk-brown: #8b5e3c;
  --sk-brown-deep: #6b4428;
  --sk-ink: #5a4636;
  --sk-line: #e8dcc8;
  --sk-panel: #fffdf8;
  --wheel-c0: #b9dba3;
  --wheel-c1: #ecd5b8;
  --wheel-c2: #b6d9ea;
  --wheel-c3: #f6c6d2;
  --wheel-c4: #f2dc8f;
  --wheel-c5: #d4c6e8;
  --wheel-label: #5a4636;
  --wheel-rim: #8b5e3c;
  --wheel-hub: #5a4636;

  font-family: var(--sk-font);

  .modal-content {
    border: 2px solid var(--sk-line);
    border-radius: 22px;
    overflow: hidden;
    background: #f8f3e8;
    color: var(--sk-ink);
  }

  .modal-header {
    background:
      repeating-linear-gradient(90deg, rgb(139 94 60 / 0.4) 0 8px, transparent 8px 14px) left bottom / 100% 2px no-repeat,
      #f3e6cf;
    border-bottom: none;

    h2 {
      color: var(--sk-ink);
      font-family: var(--sk-display);
      font-weight: 600;
    }
  }

  .modal-footer {
    border-top: 2px dashed var(--sk-line);
  }

  .spin-steps span {
    font-family: var(--sk-display);
    font-weight: 600;
    background: #efe6d8;
    color: #a8988a;
    border-radius: 12px;
    padding: 2px 16px;

    &.active {
      background: var(--sk-brown);
      color: #fffaf0;
    }

    &.done {
      background: #b9dba3;
      color: #2f3a2a;
    }
  }

  .btn {
    font-family: var(--sk-font);
    font-weight: 700;
    border-radius: 12px;
  }

  .btn-primary {
    background: var(--sk-brown);
    border: none;
    color: #fffaf0;
    box-shadow: 0 3px 0 var(--sk-brown-deep);

    &:hover:not(:disabled) {
      background: #9c6c48;
      color: #fffaf0;
    }

    &:disabled {
      background: #e4dbcf;
      color: #a8988a;
      box-shadow: none;
    }
  }

  .spin-button {
    font-family: var(--sk-display);
    font-weight: 600;
    font-size: 1.25rem;
    padding: 8px 38px;
  }

  .btn-outline-primary {
    background: var(--sk-panel);
    border: 2px solid #c9a07a;
    color: var(--sk-brown);

    &:hover {
      background: #f5e9d8;
      color: var(--sk-brown);
    }
  }

  .btn-secondary {
    background: #a8cf8e;
    border: none;
    color: #2f3a2a;
    box-shadow: 0 3px 0 #86ad6c;
  }

  .spin-source {
    background: #efe6d8;

    > .btn-primary {
      box-shadow: none !important;
    }

    > .btn-outline-primary {
      background: transparent;
      color: var(--sk-ink);

      &:hover {
        background: var(--sk-panel);
      }
    }
  }

  .spin-result {
    font-weight: 700;

    strong {
      color: var(--sk-brown);
    }
  }

  .spin-options {
    background: var(--sk-panel);
    border: 2px solid var(--sk-line);
    border-radius: 16px;

    li:hover {
      background: #f7efe2;
    }
  }

  .spin-options-header {
    border-bottom: 2px dashed var(--sk-line);
    color: var(--sk-brown);
    font-family: var(--sk-display);
  }

  .spin-empty {
    border-color: var(--sk-line);
  }

  .spin-wheel-pointer {
    border-top-color: var(--sk-brown);
  }

  .spin-seg {
    stroke: var(--sk-brown);
    stroke-width: 1.5;
  }

  .spin-seg-label {
    font-family: var(--sk-display);
    font-weight: 600;
  }
}

// Tmavý režim — večer v koutku pod dekou
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-sumikko {
  --sk-brown: #e0b48a;
  --sk-brown-deep: #a87a50;
  --sk-ink: #f3e8d8;
  --sk-line: #3a302a;
  --sk-panel: #26201d;
  --wheel-rim: #e0b48a;
  --wheel-hub: #e0b48a;

  .modal-content {
    background:
      radial-gradient(circle at 0% 0%, rgb(255 210 150 / 0.14), transparent 45%),
      #1d1816;
  }

  .modal-header {
    background:
      repeating-linear-gradient(90deg, rgb(224 180 138 / 0.4) 0 8px, transparent 8px 14px) left bottom / 100% 2px no-repeat,
      #2f2620;

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
    }
  }

  .spin-steps span:not(.active):not(.done) {
    background: #2f2824;
    color: #93877a;
  }

  .spin-steps span.active {
    color: #2a1f18;
  }

  .btn-primary {
    color: #2a1f18;

    &:hover:not(:disabled) {
      background: #ecc8a4;
      color: #2a1f18;
    }

    &:disabled {
      background: #3a302a;
      color: #93877a;
    }
  }

  .btn-outline-primary:hover {
    background: #3a2e26;
  }

  .spin-source {
    background: #2f2824;
  }

  .spin-options li:hover {
    background: #2f2824;
  }
}

// ============================================
// STYL GUDETAMA kola štěstí (dle stylu zvoleného v nastavení).
// Kolo leží na litinové pánvi: výseče v barvách snídaně (žloutek, bílek,
// slanina, toust, sójová omáčka, nori), střed jako žloutek.
// ============================================
.spin-wheel-modal.spin-theme-gudetama {
  --gt-font: 'Nunito', sans-serif;
  --gt-display: 'Fredoka', 'Nunito', sans-serif;
  --gt-yolk: #ffd23f;
  --gt-yolk-shadow: #d99a00;
  --gt-ink: #4a3520;
  --gt-line: #efe3c4;
  --gt-panel: #ffffff;
  --wheel-c0: #ffd23f;
  --wheel-c1: #f5e6b8;
  --wheel-c2: #f2a7a0;
  --wheel-c3: #e8c08a;
  --wheel-c4: #c9a07a;
  --wheel-c5: #b8d48f;
  --wheel-label: #4a3520;
  --wheel-rim: #2b2725;
  --wheel-hub: #ffd23f;

  font-family: var(--gt-font);

  .modal-content {
    border: 2px solid var(--gt-line);
    border-radius: 24px;
    overflow: hidden;
    background:
      linear-gradient(rgb(74 53 32 / 0.05) 1.5px, transparent 1.5px) 0 0 / 46px 46px,
      linear-gradient(90deg, rgb(74 53 32 / 0.05) 1.5px, transparent 1.5px) 0 0 / 46px 46px,
      #fbf8f1;
    color: var(--gt-ink);
  }

  .modal-header {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10'%3E%3Cpath d='M0 3Q12 0 24 3T48 3V7Q36 10 24 7T0 7Z' fill='%23f2a7a0'/%3E%3Cpath d='M0 5Q12 2 24 5T48 5' stroke='%23c8553d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") left bottom / 48px 10px repeat-x,
      linear-gradient(180deg, #ffdc5c, var(--gt-yolk));
    border-bottom: none;
    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 8px);

    h2 {
      color: var(--gt-ink);
      font-family: var(--gt-display);
      font-weight: 600;
    }
  }

  .modal-footer {
    border-top: 2px solid var(--gt-line);
  }

  .spin-steps span {
    font-family: var(--gt-display);
    font-weight: 600;
    background: #f5ecd6;
    color: #a3927c;
    border-radius: 999px;
    padding: 2px 16px;

    // Text na žloutku je vždy tmavý (i v tmavém režimu)
    &.active {
      background: var(--gt-yolk);
      color: #4a3520;
      box-shadow: 0 3px 0 var(--gt-yolk-shadow);
    }

    &.done {
      background: #fffdf5;
      color: #a8650a;
      box-shadow: inset 0 0 0 2px var(--gt-yolk);
    }
  }

  .btn {
    font-family: var(--gt-font);
    font-weight: 800;
    border-radius: 999px;
    transition: transform 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  }

  .btn-primary {
    background: var(--gt-yolk);
    border: none;
    color: #4a3520;
    box-shadow: 0 4px 0 var(--gt-yolk-shadow);

    &:hover:not(:disabled) {
      background: #ffdc5c;
      color: #4a3520;
    }

    &:disabled {
      background: #efe6cf;
      color: #a3927c;
      box-shadow: none;
    }
  }

  // Tlačítko roztočení — „…tak jo, no"
  .spin-button {
    font-family: var(--gt-display);
    font-weight: 600;
    font-size: 1.3rem;
    padding: 8px 40px;
  }

  .btn-outline-primary {
    background: var(--gt-panel);
    border: 2px solid #f5b301;
    color: #a8650a;

    &:hover {
      background: #fff3c4;
      color: #a8650a;
    }
  }

  .btn-secondary {
    background: #6b4a2e;
    border: none;
    color: #fffdf5;
    box-shadow: 0 4px 0 #4a3220;
  }

  .spin-source {
    background: #f5ecd6;

    > .btn-primary {
      box-shadow: none !important;
    }

    > .btn-outline-primary {
      background: transparent;
      color: var(--gt-ink);

      &:hover {
        background: var(--gt-panel);
      }
    }
  }

  .spin-result {
    font-weight: 800;

    strong {
      color: #a8650a;
    }
  }

  .spin-options {
    background: var(--gt-panel);
    border: 2px solid var(--gt-line);
    border-radius: 18px;

    li:hover {
      background: #fff8dc;
    }
  }

  .spin-options-header {
    border-bottom: 2px solid #f5dc8a;
    color: #a8650a;
    font-family: var(--gt-display);
  }

  .spin-empty {
    border-color: var(--gt-line);
  }

  .spin-wheel-pointer {
    border-top-color: #c8553d;
  }

  .spin-wheel-hub {
    stroke: #fffdf5;
  }

  .spin-seg {
    stroke: #2b2725;
    stroke-width: 1.5;
  }

  .spin-seg-label {
    font-family: var(--gt-display);
    font-weight: 600;
  }
}

// Tmavý režim — litinová pánev
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-gudetama {
  --gt-ink: #f5ead2;
  --gt-line: #3a332e;
  --gt-panel: #211d1a;
  --wheel-rim: #3a3430;

  .modal-content {
    background:
      radial-gradient(circle at 50% 50%, rgb(255 210 63 / 0.08) 0 120px, transparent 300px),
      #141210;
  }

  .modal-header {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10'%3E%3Cpath d='M0 3Q12 0 24 3T48 3V7Q36 10 24 7T0 7Z' fill='%23f2a7a0'/%3E%3Cpath d='M0 5Q12 2 24 5T48 5' stroke='%23c8553d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") left bottom / 48px 10px repeat-x,
      #0e0d0c;

    h2 {
      color: #ffd23f;
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
    }
  }

  .spin-steps span:not(.active):not(.done) {
    background: #2b2622;
    color: #968a7a;
  }

  .spin-steps span.done {
    background: #2b2622;
    color: #ffd23f;
  }

  .btn-primary:disabled {
    background: #3a332e;
    color: #968a7a;
  }

  .btn-outline-primary {
    color: #ffd23f;

    &:hover {
      background: #3a3018;
      color: #ffe17a;
    }
  }

  .spin-source {
    background: #2b2622;
  }

  .spin-options li:hover {
    background: #2b2622;
  }

  .spin-options-header {
    color: #ffd23f;
    border-bottom-color: #4a3d1c;
  }

  .spin-result strong {
    color: #ffd23f;
  }
}

// ============================================
// STYL HATSUNE MIKU kola štěstí (dle stylu zvoleného v nastavení).
// Výseče v barvách Vocaloidů (Miku, Luka, Rin, Kaito, Meiko, šedá rukávů),
// bílé linky a střed jako reproduktor s tyrkysovým lemem.
// ============================================
.spin-wheel-modal.spin-theme-miku {
  --miku-font: 'Nunito', sans-serif;
  --miku-display: 'Exo 2', 'Nunito', sans-serif;
  --miku-teal: #39c5bb;
  --miku-teal-deep: #138f87;
  --miku-teal-ink: #137a7f;
  --miku-pink: #e12885;
  --miku-grey: #3a3f44;
  --miku-line: #d8e3e6;
  --miku-panel: #ffffff;
  --miku-text: #263036;
  --wheel-c0: #2fb3a9;
  --wheel-c1: #e12885;
  --wheel-c2: #5a6268;
  --wheel-c3: #e0a000;
  --wheel-c4: #3a6fd8;
  --wheel-c5: #c8302c;
  --wheel-rim: #3a3f44;
  --wheel-hub: #2b2f33;

  font-family: var(--miku-font);

  .modal-content {
    border: 1px solid var(--miku-line);
    border-radius: 16px;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgb(57 197 187 / 0.12) 1px, transparent 1px) 0 0 / 88px 100%,
      repeating-linear-gradient(180deg, #f6fafb 0 22px, #edf3f5 22px 44px);
    color: var(--miku-text);
  }

  .modal-header {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='10'%3E%3Crect width='98' height='10' fill='%23ffffff'/%3E%3Cpath d='M14 0V10M28 0V10M42 0V10M56 0V10M70 0V10M84 0V10M98 0V10' stroke='%239aa3a8'/%3E%3Cpath d='M10 0h8v6h-8zM24 0h8v6h-8zM52 0h8v6h-8zM66 0h8v6h-8zM80 0h8v6h-8z' fill='%232b2f33'/%3E%3C/svg%3E") left bottom / 98px 10px repeat-x,
      linear-gradient(var(--miku-teal), var(--miku-teal)) left bottom 10px / 100% 3px no-repeat,
      linear-gradient(180deg, #454b51, var(--miku-grey));
    border-bottom: none;
    padding-bottom: calc(var(--bs-modal-header-padding-y, 1rem) + 13px);

    h2 {
      color: #fff;
      font-family: var(--miku-display);
      font-weight: 700;
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(2);
      opacity: 0.9;
    }
  }

  .modal-footer {
    border-top: 1px solid var(--miku-line);
  }

  .spin-steps span {
    font-family: var(--miku-display);
    font-weight: 700;
    background: #e3eaed;
    color: #8a979e;
    border-radius: 6px;
    padding: 3px 16px;

    &.active {
      background: var(--miku-teal-deep);
      color: #fff;
      box-shadow: 0 0 10px rgb(57 197 187 / 0.5);
    }

    &.done {
      background: var(--miku-pink);
      color: #fff;
    }
  }

  .btn {
    font-family: var(--miku-font);
    font-weight: 800;
    border-radius: 6px;
  }

  .btn-primary {
    background: linear-gradient(180deg, #23a99f, var(--miku-teal-deep));
    border: 1px solid #0e7a73;
    color: #fff;

    &:hover:not(:disabled) {
      background: linear-gradient(180deg, #2fb3a9, #179a91);
      color: #fff;
      box-shadow: 0 0 0 3px rgb(57 197 187 / 0.3), 0 0 16px rgb(57 197 187 / 0.55);
    }

    &:disabled {
      background: #cfd8dc;
      border-color: #cfd8dc;
      color: #8a979e;
    }
  }

  // Tlačítko roztočení — „play"
  .spin-button {
    font-family: var(--miku-display);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    padding: 10px 38px;

    &::before {
      content: '▶ ';
      font-size: 0.8em;
    }
  }

  .btn-outline-primary {
    background: var(--miku-panel);
    border: 1px solid var(--miku-teal);
    color: var(--miku-teal-ink);

    &:hover {
      background: #e0f6f4;
      color: var(--miku-teal-ink);
    }
  }

  .btn-secondary {
    background: var(--miku-pink);
    border: 1px solid #b81e6c;
    color: #fff;
  }

  .spin-source {
    background: #e3eaed;
    border-radius: 8px;

    > .btn {
      border-radius: 6px !important;
    }

    > .btn-outline-primary {
      background: transparent;
      color: var(--miku-text);

      &:hover {
        background: var(--miku-panel);
      }
    }
  }

  .spin-result {
    font-weight: 800;

    strong {
      color: var(--miku-teal-ink);
    }
  }

  .spin-options {
    background: var(--miku-panel);
    border: 1px solid var(--miku-line);
    border-radius: 12px;

    li:hover {
      background: #eef8f7;
    }
  }

  .spin-options-header {
    border-bottom: 2px solid var(--miku-teal);
    color: var(--miku-teal-ink);
    font-family: var(--miku-display);
  }

  .spin-empty {
    border-color: var(--miku-line);
  }

  .spin-wheel-pointer {
    border-top-color: var(--miku-pink);
    filter: drop-shadow(0 0 4px rgb(225 40 133 / 0.6));
  }

  .spin-wheel-hub {
    stroke: var(--miku-teal);
  }

  .spin-seg {
    stroke: #fff;
    stroke-width: 2;
  }

  .spin-seg-label {
    font-family: var(--miku-display);
    font-weight: 700;
  }
}

// Tmavý režim — koncert
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-miku {
  --miku-teal-ink: #5fd6cd;
  --miku-line: #23303a;
  --miku-panel: #14191d;
  --miku-text: #eef4f6;
  --wheel-c2: #3a4248;
  --wheel-rim: #050607;
  --wheel-hub: #050607;

  .modal-content {
    border-color: #23303a;
    background:
      linear-gradient(115deg, transparent 38%, rgb(57 197 187 / 0.10) 46%, transparent 54%),
      linear-gradient(-115deg, transparent 38%, rgb(225 40 133 / 0.09) 46%, transparent 54%),
      #0b0d10;
    box-shadow: 0 0 30px rgb(57 197 187 / 0.2);
  }

  .modal-header {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='10'%3E%3Crect width='98' height='10' fill='%23ffffff'/%3E%3Cpath d='M14 0V10M28 0V10M42 0V10M56 0V10M70 0V10M84 0V10M98 0V10' stroke='%239aa3a8'/%3E%3Cpath d='M10 0h8v6h-8zM24 0h8v6h-8zM52 0h8v6h-8zM66 0h8v6h-8zM80 0h8v6h-8z' fill='%232b2f33'/%3E%3C/svg%3E") left bottom / 98px 10px repeat-x,
      linear-gradient(var(--miku-teal), var(--miku-teal)) left bottom 10px / 100% 2px no-repeat,
      #101417;
  }

  .spin-steps span:not(.active):not(.done) {
    background: #1b2328;
    color: #82919a;
  }

  .btn-primary:disabled {
    background: #23303a;
    border-color: #23303a;
    color: #82919a;
  }

  .btn-outline-primary:hover {
    background: #12302e;
  }

  .spin-source {
    background: #1b2328;
  }

  .spin-options li:hover {
    background: #1b2328;
  }

  .spin-seg {
    stroke: #0b0d10;
  }
}

// Ikona kola se při najetí pootočí
.spin-wheel-icon {
  transition: transform 0.4s ease !important;

  &:hover {
    transform: rotate(180deg) scale(1.15) !important;
  }
}