.vp-wheel-page { padding: 8px 0 36px; }

.vp-wheel-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(280px, .85fr);
  gap: 24px;
  align-items: start;
}

.vp-wheel-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 580px;
  padding: 56px 20px 36px;
  border-radius: 32px;
  border: 1px solid var(--vp-line);
  background:
    radial-gradient(480px 240px at 50% 0%, color-mix(in srgb, var(--vp-orange) 24%, transparent), transparent 72%),
    radial-gradient(circle at 50% 58%, color-mix(in srgb, #c9a227 10%, transparent), transparent 58%),
    var(--vp-surface);
  box-shadow: var(--vp-shadow-sm);
}

.vp-wheel-pointer {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 6;
  width: 40px;
  height: 58px;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 0 #8a3d0c);
  animation: vp-pointer-idle 1.8s ease-in-out infinite;
}
.vp-wheel-pointer svg { display: block; }

@keyframes vp-pointer-idle {
  0%, 100% { transform: translateX(-50%) rotate(-4deg); }
  50% { transform: translateX(-50%) rotate(4deg); }
}

.vp-wheel-frame {
  --rim: min(270px, 44vw);
  position: relative;
  width: min(540px, 88vw);
  height: min(540px, 88vw);
  border-radius: 50%;
  padding: 22px;
  background:
    repeating-conic-gradient(from 8deg, #5c3416 0deg 9deg, #2e1a0c 9deg 18deg);
  box-shadow:
    0 22px 44px color-mix(in srgb, #000 38%, transparent),
    inset 0 0 0 4px #f0c14a,
    inset 0 0 0 9px #7a4a14,
    inset 0 0 0 13px #d4b05a;
}

.vp-wheel-lights {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.vp-wheel-lights i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fffdf2, #ffd978 46%, #e08a18);
  box-shadow: 0 0 10px #ffcc5a, 0 0 0 2px #6b3a0c;
  transform: rotate(calc(var(--i) * 15deg)) translateY(calc(var(--rim) * -1 + 12px));
  animation: vp-bulb 1.15s ease-in-out infinite;
  animation-delay: calc(var(--i) * .07s);
}

@keyframes vp-bulb {
  0%, 100% { filter: brightness(1.15); }
  50% { filter: brightness(.55); }
}

.vp-wheel-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(0deg);
  will-change: transform;
  overflow: hidden;
  box-shadow: inset 0 0 0 3px #1a1020;
}

.vp-wheel-disc.is-spinning {
  transition: transform 5.1s cubic-bezier(.13, .78, .05, 1);
}

.vp-wheel-disc svg {
  display: block;
  width: 100%;
  height: 100%;
}

.vp-wheel-glare {
  position: absolute;
  inset: 22px;
  z-index: 2;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 40%, transparent 62%, rgba(0,0,0,.1));
  pointer-events: none;
}

.vp-wheel-hub {
  position: absolute;
  inset: 50%;
  z-index: 4;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #3a2418, #1a1020 70%);
  border: 5px solid #e8c36a;
  color: var(--vp-orange);
  box-shadow: 0 0 0 5px #1a1020, 0 8px 16px color-mix(in srgb, #000 40%, transparent);
  pointer-events: none;
}

.vp-wheel-hub .vp-paws-ico { width: 1.7rem; height: 1.7rem; fill: currentColor; }
.vp-eyebrow .vp-paws-ico { width: 1rem; height: 1rem; fill: currentColor; vertical-align: -2px; }

.vp-wheel-side {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid var(--vp-line);
  background: var(--vp-surface);
  box-shadow: var(--vp-shadow-sm);
}

.vp-wheel-status {
  margin: 0 0 16px;
  font-weight: 750;
  font-size: 1.05rem;
}

.vp-wheel-actions { display: grid; gap: 10px; }
.vp-wheel-go { width: 100%; }

.vp-wheel-odds-title {
  margin: 20px 0 8px;
  font-family: var(--vp-font-title);
  font-size: 1.15rem;
}

.vp-wheel-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.vp-wheel-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--vp-surface-2) 70%, transparent);
  font-weight: 800;
  font-size: .9rem;
}

.vp-wheel-legend i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.vp-wheel-legend b {
  color: var(--vp-orange);
  font-variant-numeric: tabular-nums;
}

.vp-wheel-history { margin-top: 22px; }
.vp-wheel-history h2 {
  margin: 0 0 10px;
  font-family: var(--vp-font-title);
  font-size: 1.15rem;
}
.vp-wheel-history ul { list-style: none; margin: 0; padding: 0; }
.vp-wheel-history li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px dashed var(--vp-line);
  font-weight: 800;
}
.vp-wheel-history li span { color: var(--vp-muted); font-size: .82rem; font-weight: 700; }
.vp-wheel-history li.is-empty { color: var(--vp-muted); border-top: 0; font-weight: 650; }

@media (max-width: 899px) {
  .vp-wheel-grid { grid-template-columns: 1fr; }
  .vp-wheel-stage { min-height: 0; padding-top: 48px; }
  .vp-wheel-frame { --rim: min(270px, 44vw); }
}