/* Born from Blood — Lucky Wheel styles */
.wheel-section {
  display: flex; gap: 40px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: linear-gradient(160deg, rgba(40,12,18,.65), rgba(12,6,9,.7));
  border: 1px solid rgba(150,40,55,.35); border-radius: 16px; padding: 32px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.wheel-stage {
  position: relative; width: 340px; height: 340px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}

/* idle ambient glow ring — separate element so it never fights the spin transform */
.wheel-idle-glow {
  position: absolute; inset: -10%;
  background: conic-gradient(from 0deg, transparent, rgba(255,207,110,.35), transparent 40%);
  border-radius: 50%;
  animation: spin 7s linear infinite;
}

.wheel-pointer {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 3;
  border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 22px solid var(--accent2);
  filter: drop-shadow(0 0 6px rgba(232,101,127,.7));
}

.wheel {
  position: relative; width: 300px; height: 300px; border-radius: 50%;
  border: 6px solid var(--gold2);
  box-shadow: 0 0 0 4px rgba(0,0,0,.4), inset 0 0 40px rgba(0,0,0,.5), 0 8px 30px rgba(0,0,0,.6);
  transform: rotate(0deg);
  transition: transform 4s cubic-bezier(.13,.66,.18,1);
  background: conic-gradient(
    from 0deg,
    #c4233f 0deg 36deg,
    #281620 36deg 72deg,
    #9a48e0 72deg 108deg,
    #ffcf6e 108deg 144deg,
    #3fa45a 144deg 180deg,
    #e8657f 180deg 216deg,
    #7b3aa0 216deg 252deg,
    #e0a23c 252deg 288deg,
    #fff3cc 288deg 324deg,
    #c7a2ff 324deg 360deg
  );
}

.wheel-seg {
  position: absolute; inset: 0;
  transform: rotate(calc(var(--seg) * 36deg + 18deg));
}
.wheel-label {
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%) rotate(calc(var(--seg) * -36deg - 18deg));
  display: block; width: 70px; text-align: center;
  font-family: "Cinzel", serif; font-weight: 900; font-size: 14px; line-height: 1.25;
  color: #1a0a0e; text-shadow: 0 1px 4px rgba(255,255,255,.25);
}
.wheel-seg[style*="--seg:0"] .wheel-label,
.wheel-seg[style*="--seg:1"] .wheel-label,
.wheel-seg[style*="--seg:2"] .wheel-label,
.wheel-seg[style*="--seg:4"] .wheel-label,
.wheel-seg[style*="--seg:5"] .wheel-label,
.wheel-seg[style*="--seg:6"] .wheel-label {
  color: #fff8e0; font-size: 13px; text-shadow: 0 0 8px #000, 0 2px 4px #000;
}

.wheel-hub {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 2; pointer-events: none;
}
.wheel-hub #spinBtn { pointer-events: auto; }

.wheel-info { flex: 1 1 320px; min-width: 280px; }

.wheel-legend {
  margin: 0 0 16px; padding-left: 1.2em;
  color: #d7b9bf; font-size: 13px; line-height: 1.6;
}
.wheel-legend li { margin-bottom: 2px; }

.wheel-results {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 18px;
}
.wr-item {
  width: 84px; padding: 10px 6px; border-radius: 10px;
  background: var(--surface2); border: 1px solid rgba(150,40,55,.35);
  text-align: center; font-size: 12px; line-height: 1.35; color: #f3d9b0;
}
.wr-item.is-headline {
  outline: 2px solid var(--gold);
  box-shadow: 0 0 14px rgba(255,207,110,.6);
  color: #fff8e0;
}

@media (max-width: 560px) {
  .wheel-stage { width: 280px; height: 280px; }
  .wheel { width: 250px; height: 250px; }
}