/* Hình học vòng quay — xem ghi chú trong Wheel.tsx trước khi đổi số.
   Biến màu dùng đúng tên token của prototype đã duyệt (generated/tokens). */

.wheel { position: relative; width: 340px; height: 337px; margin: 0 auto; flex: none; }

.w-spin {
  position: absolute; inset: 0; z-index: 1;
  background-size: 283px auto; background-position: center; background-repeat: no-repeat;
  transform-origin: 50% 50%;
}
.w-spin.go { transition: transform 4s cubic-bezier(.14, .82, .24, 1); }
.w-rim { position: absolute; inset: 0; z-index: 2; background-size: 100% 100%; pointer-events: none; }
.w-rim-lit {
  position: absolute; inset: 0; z-index: 3; background-size: 100% 100%; pointer-events: none;
  filter: brightness(1.55) saturate(.92); mix-blend-mode: screen; opacity: .55;
  animation: pulseFrame 1.7s ease-in-out infinite;
}
.w-hub {
  position: absolute; left: 134px; top: 132.5px; width: 72px; height: 72px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 36% 30%, var(--cream), var(--gold) 68%, var(--gold-deep));
  display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--r-primary); letter-spacing: .5px;
}
/* left/top suy ra từ tâm vòng kim x 46.02% · y 56.73% và tâm đĩa (170, 168.5). */
.w-kim {
  position: absolute; width: 104px; height: 138px; left: 122.1px; top: 90.2px; z-index: 5;
  background-size: 100% 100%; pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(var(--ink-rgb), .55));
}

.wl {
  position: absolute; left: 50%; top: 50%; width: 80px; margin-left: -40px; margin-top: -22px;
  text-align: center; line-height: 1.16; color: #fff; font-weight: 700; font-size: 12.5px;
  -webkit-text-stroke: 2px var(--r-primary-dark); paint-order: stroke fill;

}
.wl.gold { margin-top: -18px; }
.wl.gold.one { margin-top: -9px; }
  /* background-clip:text và -webkit-text-stroke KHÔNG chồng được trên cùng một thẻ,
     nên chữ gradient phải dựng 2 lớp: <i> vẽ viền phía sau, <b> vẽ chữ gradient. */
.wl.gold b {
    display: block; font-weight: 800; font-size: 15px; -webkit-text-stroke: 0;
    background: var(--goldTextGrad); background-size: 320% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: goldShine 2.8s linear infinite;
  }
.wl.gold i {
    position: absolute; inset: 0; font-style: normal; font-weight: 800; font-size: 15px; color: transparent;
    -webkit-text-stroke: 2px var(--r-primary-dark); paint-order: stroke fill; z-index: -1;
  }

@keyframes pulseFrame { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .w-rim-lit { animation: none; opacity: .78; }
  .wl.gold b { animation: none; background-position: 50% 0; }
}