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

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

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