/* ==========================================================================
   官方素材转盘
   静态层：wheel-stage.png（包含中心按钮、手写便签、红色底座、彩带）
   旋转层：wheel-rotor.png（盘面 + 外圈，中心挖空）
   奖品层：官方奖品图标 + 文案，跟随盘面旋转
   ========================================================================== */

.lottery-wheel {
  --lw-u: var(--u, calc(100vw / 887));
  --lw-font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  position: relative;
  width: 100%;
  font-family: var(--lw-font);
  --wheel-rot: 0deg;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}

.lottery-wheel *,
.lottery-wheel *::before,
.lottery-wheel *::after {
  box-sizing: border-box;
}

.ol-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1751 / 1181;
}

.ol-stage-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--lw-u) * 8) calc(var(--lw-u) * 14) rgba(117, 45, 8, 0.12));
}

/* 盘面旋转体：位置/尺寸按 1751×1181 原图测得 */
.ol-rotor {
  position: absolute;
  left: 15.36265%;
  top: 2.37087%;
  width: 61.4506%;
  aspect-ratio: 1;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  z-index: 2;
}

.ol-rotor-art {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.ol-items {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ol-prize {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a));
  transform-origin: 50% 50%;
}

/* 文字保持“图标在上、文案在下”，并抵消扇区旋转 */
.ol-prize-inner {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--lw-u) * 205);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--lw-u) * 2);
  width: calc(var(--lw-u) * 160);
  margin-left: calc(var(--lw-u) * -80);
  transform: rotate(calc(-1 * var(--a) - var(--wheel-rot)));
  transform-origin: 50% 50%;
  text-align: center;
  will-change: transform;
}

.ol-prize-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--lw-u) * 86);
  height: calc(var(--lw-u) * 60);
  filter: drop-shadow(0 calc(var(--lw-u) * 2) calc(var(--lw-u) * 4) rgba(143, 71, 6, 0.22));
}

.ol-prize-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.ol-prize-name {
  color: #9a4812;
  font-size: clamp(9px, calc(var(--lw-u) * 22), 13px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: calc(var(--lw-u) * 0.2);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 calc(var(--lw-u) * 3) rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* 中心按钮：官方静态图已绘制按钮，这里只做透明点击热区 */
.ol-hub {
  position: absolute;
  z-index: 5;
  left: 46.08795%;
  top: 49.78831%;
  width: 24.2%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ol-hub::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 242, 0.3), rgba(255, 188, 83, 0) 68%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.ol-hub:active {
  transform: translate(-50%, -50%) scale(0.965);
}

.ol-hub:active::before,
.lottery-wheel.is-spinning .ol-hub::before {
  opacity: 1;
}

.ol-hub:focus-visible {
  outline: calc(var(--lw-u) * 4) solid rgba(15, 100, 220, 0.9);
  outline-offset: calc(var(--lw-u) * 7);
}

.ol-hub[disabled],
.ol-hub.is-disabled {
  cursor: not-allowed;
}

.lottery-wheel.is-disabled .ol-stage-art {
  filter: drop-shadow(0 calc(var(--lw-u) * 8) calc(var(--lw-u) * 14) rgba(117, 45, 8, 0.12)) saturate(0.82) brightness(0.98);
}

.lottery-wheel.is-disabled .ol-hub {
  cursor: not-allowed;
}

.lottery-wheel.is-spinning .ol-hub {
  cursor: default;
}

/* 旋转时给中心按钮加一层很轻的呼吸光，不盖住官方按钮 */
@keyframes olHubGlow {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50% { opacity: 0.85; transform: scale(1.04); }
}

.lottery-wheel.is-spinning .ol-hub::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 197, 92, 0.26), rgba(255, 197, 92, 0) 68%);
  animation: olHubGlow 1.8s ease-in-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .lottery-wheel.is-spinning .ol-hub::after {
    animation: none;
    opacity: 0.4;
  }
}