/* 轉盤與扭蛋舞台 */

/* 1. 轉盤外層雙層氛圍呼吸光環 (Dual-layer Ambient Glow Rings - 曜石深邃與微光物理層) */
/* 第一層：深邃曜石底質微溫潤柔和微光 */
.wheel-ambient-glow {
  position: absolute;
  inset: -20px;
  border-radius: 9999px;
  background: radial-gradient(circle at center, rgba(234, 179, 8, 0.08) 0%, rgba(217, 119, 6, 0.03) 45%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  animation: ambient-breathe-outer 6s infinite ease-in-out;
}

/* 第二層：內嵌深冷微白曜石層 (告別粗糙彩虹霓虹) */
.wheel-ambient-glow-inner {
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 0%, rgba(148, 163, 184, 0.02) 55%, rgba(0, 0, 0, 0) 72%);
  filter: blur(12px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

@keyframes ambient-breathe-outer {
  0%, 100% {
    transform: scale(0.98);
    opacity: 0.45;
    filter: blur(16px);
  }
  50% {
    transform: scale(1.02);
    opacity: 0.75;
    filter: blur(22px);
  }
}

/* 轉盤高速旋轉時的氛圍激發態 (內斂深邃聚攏，非刺眼爆炸) */
.wheel-ambient-glow.spinning {
  animation: ambient-spin-pulse-outer 1.2s infinite ease-in-out;
}

.wheel-ambient-glow-inner.spinning {
  opacity: 0.75;
  filter: blur(14px);
}

@keyframes ambient-spin-pulse-outer {
  0%, 100% {
    transform: scale(1.01);
    opacity: 0.65;
    filter: blur(18px);
  }
  50% {
    transform: scale(1.04);
    opacity: 0.85;
    filter: blur(24px);
  }
}

/* 中獎定格時沉穩香檳金微光 (Apple 篤定儀式質感) */
.wheel-ambient-glow.jackpot {
  background: radial-gradient(circle at center, rgba(255, 214, 10, 0.26) 0%, rgba(217, 119, 6, 0.12) 45%, rgba(255, 255, 255, 0.03) 65%, rgba(0, 0, 0, 0) 80%);
  transform: scale(1.08);
  opacity: 1;
  filter: blur(26px);
}

.wheel-ambient-glow-inner.jackpot {
  opacity: 0.8;
  filter: blur(16px);
  transform: scale(1.04);
}

/* 2. 轉盤外圈雙層精密鈦金屬飾環 (Titanium Precision Bezel) */
.wheel-outer-ring {
  position: relative;
  z-index: 10;
  box-shadow: 
    0 24px 64px -8px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.18),
    inset 0 -3px 8px rgba(0, 0, 0, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle at 50% 45%, #18181b 0%, #0d0d0f 65%, #08080a 100%);
  transition: box-shadow 0.4s ease;
}

.wheel-outer-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 9999px;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 214, 10, 0.16) 75%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 3. 指針立體金屬冷白微投影與物理回彈 (Swiss-grade Probe) */
.wheel-pointer {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.88)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  transform-origin: 17px 12px;
  transform: rotate(0deg);
  will-change: transform;
  transition: transform 0.06s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4. 轉盤中心按鈕立體金屬質感與微米同心波 (Apple Digital Crown 質感) */
.wheel-btn-ripple-wave {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 20;
}

@media (min-width: 640px) {
  .wheel-btn-ripple-wave {
    width: 90px;
    height: 90px;
  }
}

.wheel-btn-ripple-wave::before,
.wheel-btn-ripple-wave::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
  opacity: 0;
  animation: btn-wave-pulse 3.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.wheel-btn-ripple-wave::after {
  animation-delay: 1.8s;
}

@keyframes btn-wave-pulse {
  0% {
    transform: scale(0.96);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.36);
    opacity: 0;
  }
}

.wheel-center-btn {
  position: relative;
  z-index: 25;
  width: 76px;
  height: 76px;
  background: radial-gradient(circle at 35% 28%, #27272a 0%, #18181b 55%, #0f0f11 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.88),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.35),
    inset 0 -2px 6px rgba(0, 0, 0, 0.7);
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 640px) {
  .wheel-center-btn {
    width: 88px;
    height: 88px;
  }
}

.wheel-center-btn:not(:disabled):hover {
  transform: scale(1.04);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.92),
    0 0 16px rgba(255, 255, 255, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.45);
}

.wheel-center-btn:not(:disabled):active {
  transform: scale(0.95);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.85),
    inset 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* 旋轉中按鈕微光流轉 */
.wheel-center-btn.spinning {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 4px 18px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(255, 255, 255, 0.1);
}

/* 中獎慶祝光暈動畫 */
@keyframes prize-glow {
  0% {
    box-shadow: 0 0 0 rgba(255, 214, 10, 0), inset 0 0 0 rgba(255, 214, 10, 0);
    border-color: rgba(255, 214, 10, 0.25);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 214, 10, 0.35), inset 0 0 18px rgba(255, 214, 10, 0.15);
    border-color: rgba(255, 214, 10, 0.65);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 214, 10, 0), inset 0 0 0 rgba(255, 214, 10, 0);
    border-color: rgba(255, 214, 10, 0.25);
  }
}

.prize-celebrate {
  animation: prize-glow 2.4s infinite ease-in-out;
}

/* 滑動進入的抽屜 (Drawer) */
.drawer-backdrop {
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* 自訂數字輸入框移除上下小箭頭 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Apple 極簡原生浮動通知 (Toast) */
.apple-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
  z-index: 100;
}

.apple-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* 抽屜內獎項列互動平滑微動效 */
.admin-prz-row, #admin-no-prize-row {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.admin-prz-row:hover, #admin-no-prize-row:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.05);
}

/* 轉盤動態提示文字淡入微過渡 */
.hint-text-fade {
  animation: hint-fade 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hint-fade {
  from {
    opacity: 0.35;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apple 暗色極簡微光骨架佔位符 (Apple Shimmer Skeleton) */
.apple-skeleton {
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  display: inline-block;
  user-select: none;
  pointer-events: none;
  color: transparent !important;
  vertical-align: middle;
}

.apple-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: apple-skeleton-shimmer 2s infinite ease-in-out;
}

@keyframes apple-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ----------------------------------------------------
   指針動態聚光島 (Spotlight Pill) - Apple Dynamic Island 原生質感
   ---------------------------------------------------- */
.spotlight-pill {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  min-width: 168px;
  max-width: 256px;
  padding: 5px 16px 6px 16px;
  background: rgba(18, 18, 22, 0.82);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  box-shadow: 
    0 10px 32px rgba(0, 0, 0, 0.78),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  pointer-events: none;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}

@media (min-width: 640px) {
  .spotlight-pill {
    top: -76px;
    min-width: 180px;
    max-width: 280px;
    padding: 6px 18px 7px 18px;
  }
}

.spotlight-pill-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  margin-bottom: 2px;
}

.spotlight-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  display: inline-block;
  background-color: #ffd60a;
  box-shadow: 0 0 6px rgba(255, 214, 10, 0.5);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

.spotlight-dot.idle {
  background-color: rgba(255, 214, 10, 0.75);
  box-shadow: 0 0 6px rgba(255, 214, 10, 0.35);
  animation: spotlight-dot-breathe 2.4s ease-in-out infinite;
}

@keyframes spotlight-dot-breathe {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.92);
    box-shadow: 0 0 4px rgba(255, 214, 10, 0.2);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(255, 214, 10, 0.55);
  }
}

.spotlight-status {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s ease;
}

.spotlight-pill-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.spotlight-name {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  will-change: transform;
}

@media (min-width: 640px) {
  .spotlight-name {
    font-size: 19px;
  }
}

/* 指針切換扇區時的極輕微換格動態 (平滑微彈簧，杜絕抽搐) */
.spotlight-name.spotlight-tick {
  animation: spotlight-tick-jump 0.06s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spotlight-tick-jump {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
  100% {
    transform: scale(1);
  }
}

/* 旋轉進行中的聚光島聚焦態 */
.spotlight-pill.spinning {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 
    0 10px 32px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(255, 255, 255, 0.08),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.25);
}

/* 定格中獎時的高雅金色脈衝 (Apple Spring Curve) */
.spotlight-pill.jackpot {
  border-color: rgba(255, 214, 10, 0.45);
  background: rgba(22, 20, 15, 0.9);
  animation: spotlight-pop 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards, spotlight-gold-breathe 3s ease-in-out infinite 0.48s;
}

.spotlight-pill.jackpot .spotlight-name {
  color: #ffd60a;
  text-shadow: 0 0 12px rgba(255, 214, 10, 0.35), 0 2px 6px rgba(0, 0, 0, 0.85);
}

@keyframes spotlight-pop {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.06);
  }
  100% {
    transform: translateX(-50%) scale(1.02);
  }
}

@keyframes spotlight-gold-breathe {
  0%, 100% {
    box-shadow: 
      0 10px 32px rgba(0, 0, 0, 0.85),
      0 0 16px rgba(255, 214, 10, 0.2),
      inset 0 1px 2px rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 214, 10, 0.4);
  }
  50% {
    box-shadow: 
      0 12px 38px rgba(0, 0, 0, 0.9),
      0 0 24px rgba(255, 214, 10, 0.35),
      inset 0 1px 2.5px rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 214, 10, 0.65);
  }
}

/* ----------------------------------------------------
   遊戲模式按鈕 (Apple 原生設計：選中高亮醒目、未選中暗淡透明)
   ---------------------------------------------------- */
.apple-mode-switcher {
  position: relative;
  background: rgba(24, 24, 27, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.5);
}

.mode-tab-btn {
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.mode-tab-btn:disabled,
.mode-tab-btn.locked {
  opacity: 0.42;
  cursor: not-allowed;
}

.mode-tab-btn.active {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.admin-mode-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #86868b;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  cursor: pointer;
  position: relative;
}

.admin-mode-btn .mode-btn-icon {
  opacity: 0.45;
  filter: grayscale(60%);
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-mode-btn:hover:not(.locked) {
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.22);
}

.admin-mode-btn:hover:not(.locked) .mode-btn-icon {
  opacity: 0.75;
  filter: grayscale(20%);
}

/* 選中狀態 (Selected / Active)：鮮明高亮醒目，遵循 Apple 原生美學 */
.admin-mode-btn.active {
  background:#31453a;
  color:#fff;
  font-weight:600;
  border-color:#9db9a6;
  box-shadow:none;
}

.admin-mode-btn.active .mode-btn-icon {
  opacity:1;
  filter:none;
}

.admin-mode-btn:disabled,
.admin-mode-btn.locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.5);
  pointer-events: auto !important;
}

/* 管理分頁按鈕選中高光強化 */
.apple-tab.active {
  font-weight:600;
}

/* ----------------------------------------------------
   扭蛋機主體與微物理動效 (Apple 曜石黑頂級工藝質感)
   ---------------------------------------------------- */
.gashapon-machine {
  filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.92));
  will-change: transform;
}

/* 機身微震動感 (Machine Rumble 回饋) */
.gashapon-machine.machine-rumbling {
  animation: machine-rumble 0.085s infinite linear;
}

@keyframes machine-rumble {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-1.2px, 0.8px) rotate(-0.2deg); }
  40% { transform: translate(1.4px, -0.6px) rotate(0.25deg); }
  60% { transform: translate(-0.8px, -1px) rotate(-0.15deg); }
  80% { transform: translate(1px, 0.8px) rotate(0.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* (1) 透明圓拱球艙 (Capsule Dome) */
.gashapon-dome {
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.05) 0%, rgba(24, 24, 27, 0.85) 60%, #0d0d0f 100%);
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.95),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    inset 0 -12px 24px rgba(0, 0, 0, 0.8);
}

/* 玻璃外覆蓋層曲面高光反光 (Curved Specular Glare) */
.gashapon-glass-glare {
  position: absolute;
  top: 10px;
  left: 20px;
  right: 20px;
  height: 60px;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.03) 70%, transparent 100%);
  transform: skewX(-4deg);
  opacity: 0.85;
}

.gashapon-dome-floor {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.95) 100%);
}

/* (2) 曜石黑金屬機座 (Metal Machine Base) */
.gashapon-base {
  background: linear-gradient(180deg, #1c1c1f 0%, #121214 45%, #0a0a0c 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 18px 48px rgba(0, 0, 0, 0.95),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.16),
    inset 0 -2px 6px rgba(0, 0, 0, 0.7);
}

/* (3) 扭蛋切削金屬旋鈕 (Rotary Crank Dial) */
.gashapon-knob-dial {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.4) 100%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.85);
}

.gashapon-crank-btn {
  background: radial-gradient(circle at 35% 30%, #2c2c30 0%, #1a1a1d 55%, #101012 100%);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.88),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.35),
    inset 0 -2px 6px rgba(0, 0, 0, 0.75);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  will-change: transform;
}

.gashapon-crank-btn:not(:disabled):hover {
  transform: scale(1.04);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.95), 0 0 14px rgba(255, 255, 255, 0.12);
}

.gashapon-crank-btn:not(:disabled):active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), inset 0 2px 6px rgba(0, 0, 0, 0.95);
}

/* 旋鈕立體翼把手 (Crank Wing) */
.gashapon-crank-wing {
  position: absolute;
  width: 90%;
  height: 22%;
  background: linear-gradient(180deg, #38383c 0%, #202024 50%, #161619 100%);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.gashapon-crank-core {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 30%, #222226 0%, #151518 70%, #0c0c0e 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

/* 旋鈕轉動順時針生動加速度、卡榫衝過頭與回彈動效 (720度雙圈重機械質感) */
.gashapon-crank-btn.cranking {
  animation: crank-spin-snap 1.35s cubic-bezier(0.18, 0.88, 0.28, 1.05) forwards;
}

@keyframes crank-spin-snap {
  0% {
    transform: rotate(0deg) scale(1);
  }
  8% {
    /* 逆向微蓄力彈跳，卡榫阻力感 */
    transform: rotate(-14deg) scale(0.97);
  }
  24% {
    /* 順時針猛烈轉過第一圈半衝破卡榫 */
    transform: rotate(180deg) scale(1.03);
  }
  50% {
    transform: rotate(450deg) scale(1.04);
  }
  74% {
    /* 順勢衝過終點 (Overshoot) */
    transform: rotate(742deg) scale(1.01);
  }
  86% {
    /* 強力棘輪彈簧回彈 (Bounce back) */
    transform: rotate(714deg) scale(0.99);
  }
  100% {
    /* 牢牢定格在原位刻度 */
    transform: rotate(720deg) scale(1);
  }
}

/* (4) 出蛋口與托盤 (Exit Chute & Tray) */
.gashapon-tray {
  box-shadow: 
    inset 0 6px 16px rgba(0, 0, 0, 0.98),
    0 2px 8px rgba(255, 255, 255, 0.06);
}

.gashapon-chute-hatch {
  position: absolute;
  top: 0;
  width: 52px;
  height: 12px;
  background: linear-gradient(180deg, #050507 0%, rgba(10, 10, 12, 0) 100%);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 0 8px 8px;
  pointer-events: none;
  z-index: 10;
}

/* 金光衝擊波環 (Pop Open 瞬間自托盤球心爆發) */
.gashapon-shockwave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 2px solid #ffd60a;
  box-shadow: 0 0 24px #ffd60a, inset 0 0 12px #ffd60a;
  pointer-events: none;
  z-index: 15;
  animation: shockwave-expand 0.65s cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
}

@keyframes shockwave-expand {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(5.2);
    opacity: 0;
  }
}

/* (5) 托盤天選扭蛋球 (Dropped Capsule - 52px 飽滿大器) */
.gashapon-dropped-ball {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.95));
  animation: ball-drop-roll 0.75s cubic-bezier(0.16, 0.9, 0.3, 1.25) forwards;
  will-change: transform;
}

/* 扭蛋球從出蛋口斜向滑落、觸底彈跳兩下 (Bounce & Roll 物理阻尼) */
@keyframes ball-drop-roll {
  0% {
    transform: translateY(-56px) translateX(-28px) scale(0.62) rotate(-210deg);
    opacity: 0;
  }
  38% {
    /* 首次觸底：受到衝擊輕微扁平擠壓 */
    transform: translateY(6px) translateX(-6px) scale(1.12, 0.88) rotate(20deg);
    opacity: 1;
  }
  58% {
    /* 首次高回彈 (彈高約 16px) */
    transform: translateY(-16px) translateX(4px) scale(0.94, 1.06) rotate(-10deg);
  }
  76% {
    /* 二次觸底微擠壓 */
    transform: translateY(3px) translateX(0) scale(1.04, 0.96) rotate(4deg);
  }
  88% {
    /* 二次微回彈 (彈高約 4px) */
    transform: translateY(-4px) translateX(0) scale(0.98, 1.02) rotate(-2deg);
  }
  100% {
    /* 平穩定格托盤正中央 */
    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* 扭蛋球雙色半球體 (52px 規格) */
.capsule-half {
  width: 52px;
  height: 26px;
  position: relative;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  will-change: transform;
}

.capsule-half.top {
  border-radius: 52px 52px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.2) 70%, rgba(200, 200, 220, 0.35) 100%);
  border: 1.2px solid rgba(255, 255, 255, 0.45);
  border-bottom: none;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.5);
}

.capsule-half.bottom {
  border-radius: 0 0 52px 52px;
  background: var(--ball-color, #ffd60a);
  border: 1.2px solid rgba(255, 255, 255, 0.25);
  border-top: none;
  box-shadow: 
    inset 0 -5px 12px rgba(0, 0, 0, 0.65),
    inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

.capsule-seam {
  width: 56px;
  height: 3px;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.95), 0 0 2px rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 定格瞬間微光粒子裂紋光暈 (Crack Glow & Pulse) */
.capsule-crack-glow {
  position: absolute;
  inset: -4px -8px;
  border-radius: 9999px;
  background: radial-gradient(ellipse at center, rgba(255, 214, 10, 0.95) 0%, rgba(255, 214, 10, 0.4) 50%, transparent 80%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 9;
}

/* 定格接縫迸光裂紋震顫動態 */
.gashapon-dropped-ball.cracking {
  animation: ball-cracking-vibe 0.4s infinite ease-in-out;
}

.gashapon-dropped-ball.cracking .capsule-crack-glow {
  opacity: 1;
  animation: crack-pulse 0.3s infinite alternate ease-in-out;
}

@keyframes ball-cracking-vibe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.025) rotate(-1.5deg); }
  75% { transform: scale(1.025) rotate(1.5deg); }
}

@keyframes crack-pulse {
  from {
    filter: brightness(1.1) drop-shadow(0 0 4px #ffd60a);
  }
  to {
    filter: brightness(1.8) drop-shadow(0 0 16px #ffd60a);
  }
}

.capsule-glare {
  position: absolute;
  top: 5px;
  left: 9px;
  width: 18px;
  height: 9px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.75);
  transform: rotate(-35deg);
  pointer-events: none;
  z-index: 10;
}

/* 扭蛋球雙殼如彈簧般左右/上下彈開 (Pop Open) */
.gashapon-dropped-ball.opened .capsule-half.top {
  transform: translateY(-28px) translateX(-12px) rotate(-38deg) scale(0.85);
  opacity: 0.88;
}

.gashapon-dropped-ball.opened .capsule-half.bottom {
  transform: translateY(20px) translateX(10px) rotate(22deg) scale(0.85);
  opacity: 0.88;
}

.gashapon-dropped-ball.opened .capsule-seam {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 天選盟友金籤 (Gold Lucky Scroll - 儀式感核心) */
.gashapon-winner-tag {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 25;
  min-width: 160px;
  width: max-content;
  max-width: min(230px, 90vw);
  padding: 8px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(28, 24, 12, 0.98) 0%, rgba(18, 18, 22, 0.98) 100%);
  border: 1.5px solid #ffd60a;
  box-shadow: 
    0 0 28px rgba(255, 214, 10, 0.65),
    0 8px 30px rgba(0, 0, 0, 0.95),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
  color: #ffd60a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: winner-scroll-emerge 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.25) forwards;
  overflow: hidden;
}

@keyframes winner-scroll-emerge {
  0% {
    transform: translate(-50%, -50%) translateY(24px) scale(0.15);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) translateY(-14px) scale(1.08);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) translateY(-8px) scale(0.96);
  }
  100% {
    transform: translate(-50%, -50%) translateY(-10px) scale(1);
    opacity: 1;
  }
}

.winner-scroll-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 10, 0.25) 0%, transparent 70%);
  pointer-events: none;
  animation: scroll-glow-pulse 2s infinite ease-in-out;
}

@keyframes scroll-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.winner-scroll-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 2px;
}

.winner-scroll-name-box {
  position: relative;
  z-index: 2;
  padding: 2px 0;
  max-width: 100%;
}

.winner-scroll-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 214, 10, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);
  display: block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


:root {
  --draw-bg:#101916; --draw-panel:#18231f; --draw-line:#ffffff14;
  --draw-muted:#adbbb3; --draw-accent:#d9bd7c;
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC",sans-serif;
  font-size:16px; -webkit-text-size-adjust:100%; font-variant-numeric:tabular-nums;
  color-scheme:dark;
}
.wheel-page { background:var(--draw-bg); color:#f1f5f2; line-height:1.5; }
.wheel-page button,.wheel-page a { min-height:44px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.wheel-page button:disabled { cursor:not-allowed; }
.wheel-page input:not([type=checkbox]),.wheel-page textarea,.wheel-page select { font-size:16px; min-height:46px; min-width:0; }
.wheel-page :is(.text-xs,.text-\[9px\],.text-\[10px\],.text-\[11px\]) { font-size:14px; line-height:1.5; }
.wheel-page :is(button,a,input,textarea,select):focus-visible { outline:2px solid #b7d6c3; outline-offset:3px; }
.wheel-page :is(button,a):focus:not(:focus-visible),.wheel-page [role=dialog]:focus { outline:none; }
.wheel-page .text-\[\#86868b\] { color:var(--draw-muted); }
.wheel-page input,.wheel-page textarea { border-radius:10px; background:#101916; border:1px solid #58675e; padding:10px 12px; }
.wheel-page input::placeholder,.wheel-page textarea::placeholder { color:#91a097; }
.wheel-page input[type=checkbox] { width:26px; height:26px; flex-shrink:0; accent-color:#b7d6c3; margin:9px; }
.apple-card { background:var(--draw-panel); border:1px solid var(--draw-line); border-radius:16px; }
#toast-text { white-space:normal; overflow-wrap:anywhere; }
#apple-toast { top:max(16px,env(safe-area-inset-top)); background:#26382f; font-size:15px; }
#confetti-canvas { z-index:55; }
.draw-header { position:sticky; top:0; z-index:40; background:#101916f2; border-bottom:1px solid var(--draw-line); backdrop-filter:blur(16px); padding:10px 24px; padding-top:max(10px,env(safe-area-inset-top)); }
.draw-header-inner { max-width:1120px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.draw-guild { display:flex; flex-direction:column; min-width:0; }
#guild-name { font-size:18px; font-weight:650; overflow-wrap:anywhere; }
.draw-header-label { font-size:13px; color:var(--draw-muted); }
.draw-tools { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.draw-back { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--draw-muted); padding:8px 10px; }
#btn-toggle-sound,#btn-refresh,.draw-icon-button { width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
#btn-toggle-sound svg,#btn-refresh svg,.draw-icon-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.draw-main { width:min(100%,1120px); margin:auto; padding:24px; }
.draw-overview { margin-bottom:20px; }
.draw-event-heading { min-width:0; }
.draw-overview-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin-top:12px; }
.draw-overview-footer .draw-stats { margin-top:0; flex:1 1 220px; }
.draw-overview-footer #btn-open-admin { margin-left:auto; }
#event-title { font-size:24px; font-weight:650; line-height:1.4; letter-spacing:-.4px; overflow-wrap:anywhere; min-width:0; }
.draw-description { font-size:15px; color:var(--draw-muted); margin-top:6px; overflow-wrap:anywhere; }
.draw-primary,.draw-secondary { display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:10px 16px; font-size:15px; font-weight:600; }
.draw-primary { background:#d5e8dc; color:#163e2c; }
.draw-secondary { background:#ffffff0c; border:1px solid #ffffff22; }
#btn-open-admin { flex-shrink:0; }
.draw-prize { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-top:18px; }
.draw-eyebrow { color:var(--draw-muted); font-size:14px; }
#current-prize-display { color:var(--draw-accent); font-size:22px; font-weight:650; overflow-wrap:anywhere; max-width:100%; }
.draw-progress { color:var(--draw-muted); font-size:14px; }
.draw-stats { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; font-size:14px; color:var(--draw-muted); margin-top:8px; }
.draw-stats strong { font-weight:650; color:#f1f5f2; }
#repeat-mode-tag { color:#b7d6c3; }
.draw-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px; align-items:start; }
.draw-stage { min-width:0; background:radial-gradient(ellipse at 50% 50%,#23362a 0%,#17211d 70%); border:1px solid var(--draw-line); border-radius:24px; padding:16px; overflow:hidden; }
#wheel-stage,#gashapon-stage { padding-top:82px; padding-bottom:0; }
#wheel-stage>div:first-child { width:min(100%,360px); height:auto; aspect-ratio:1; }
.gashapon-machine { max-width:100%; }
#spin-hint,#gashapon-hint { letter-spacing:0; line-height:1.6; min-height:44px; margin-top:12px; }
.spotlight-pill { top:-70px; box-shadow:none; background:#14231dee; border-color:#c1d6c32b; border-radius:16px; }
.spotlight-status { font-size:13px; }
.draw-details { display:flex; flex-direction:column; gap:16px; min-width:0; }
.draw-panel { background:var(--draw-panel); border:1px solid var(--draw-line); border-radius:16px; overflow:hidden; }
.draw-panel-heading { padding:10px 16px; min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--draw-line); }
.draw-panel-heading h2,.draw-panel-heading h3 { font-size:16px; font-weight:600; }
.draw-panel-heading h2 span,.draw-panel-heading h3 span { margin-left:6px; color:var(--draw-muted); font-size:13px; font-weight:400; }
.draw-text-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; color:#c7dfd0; font-size:14px; padding:8px; flex-shrink:0; }
.draw-text-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.draw-roster { padding:12px 16px 16px; }
.draw-roster input,#admin-candidate-search { width:100%; margin-bottom:12px; }
.draw-chips { display:flex; flex-wrap:wrap; gap:8px; max-height:300px; overflow-y:auto; overscroll-behavior:contain; }
.draw-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:10px; background:#ffffff09; border:1px solid var(--draw-line); font-size:15px; max-width:100%; }
.draw-chip>span { min-width:0; overflow-wrap:anywhere; }
.draw-chip i,.draw-candidate-row i { width:6px; height:6px; flex-shrink:0; border-radius:50%; }
.draw-chip small,.draw-candidate-row small { color:var(--draw-accent); font-size:12px; white-space:nowrap; }
.draw-chip.is-winner { color:var(--draw-muted); }
.draw-winners { max-height:480px; overflow-y:auto; overscroll-behavior:contain; }
.draw-winner-row { display:flex; gap:12px; padding:14px 16px; }
.draw-winner-row+.draw-winner-row { border-top:1px solid var(--draw-line); }
.draw-winner-row>div { min-width:0; overflow-wrap:anywhere; }
.draw-winner-row h3 { font-size:16px; font-weight:600; }
.draw-winner-mark { width:34px; height:34px; border-radius:10px; background:#d9bd7c12; color:var(--draw-accent); display:grid; place-items:center; flex-shrink:0; }
.draw-winner-prize { font-size:14px; color:var(--draw-accent); margin-top:2px; }
.draw-winner-meta { font-size:13px; color:var(--draw-muted); margin-top:5px; }
.draw-empty { text-align:center; font-size:14px; color:var(--draw-muted); padding:24px 12px; width:100%; }
.draw-empty>span { display:block; font-size:28px; color:var(--draw-accent); opacity:.6; margin-bottom:8px; }
#admin-drawer { height:100dvh; max-height:100dvh; overflow:hidden; padding:0; background:var(--draw-panel); }
.drawer-heading { flex-shrink:0; padding:14px 20px; padding-top:max(14px,env(safe-area-inset-top)); gap:12px; }
#btn-close-admin { width:44px; height:44px; flex-shrink:0; }
#btn-close-admin svg { width:22px; height:22px; }
#admin-drawer h3 { font-size:20px; }
#admin-drawer label { font-size:15px; }
#admin-drawer p { line-height:1.6; }
.draw-admin-tabs { display:flex; flex-shrink:0; gap:4px; background:#101916; border-radius:12px; margin:0 20px 12px; padding:4px; }
.draw-admin-tabs button { flex:1; font-size:15px; border-radius:9px; color:var(--draw-muted); }
.draw-admin-tabs .active { background:#31453a; color:#f1f5f2; }
.drawer-body { overflow-y:auto; overscroll-behavior:contain; min-height:0; padding:8px 20px 24px; padding-bottom:max(24px,env(safe-area-inset-bottom)); }
#btn-save-event-cfg { font-size:16px; background:#d5e8dc; color:#163e2c; }
#admin-candidates-list { max-height:none; overflow:visible; }
.draw-candidate-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; font-size:15px; }
.draw-candidate-row>div { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; }
.draw-candidate-row span { overflow-wrap:anywhere; min-width:0; }
.draw-candidate-row button { color:#ff9a92; flex-shrink:0; min-width:44px; font-size:14px; }
[data-wheel-dialog] { overscroll-behavior:contain; }
#reset-confirm-card,#clear-confirm-card,#delete-cand-card { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; background:var(--draw-panel); }
#result-card { width:100%; max-width:440px; max-height:calc(100dvh - 32px); overflow:hidden; display:flex; flex-direction:column; background:var(--draw-panel); border:1px solid #ffffff20; border-radius:24px; }
.draw-result-heading { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:12px; padding:12px 16px 12px 24px; border-bottom:1px solid var(--draw-line); }
.draw-result-heading h2 { font-size:18px; font-weight:600; }
.draw-result-body { position:relative; padding:24px; overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.draw-result-body>div,.draw-result-body>p { position:relative; }
.draw-result-winner { text-align:center; padding:8px 0 20px; overflow-wrap:anywhere; }
#result-prize-title { font-size:16px; color:var(--draw-accent); }
#result-winner-name { font-size:clamp(24px,6vw,34px); font-weight:700; margin:12px 0 6px; }
#result-winner-sub,.draw-result-hint { color:var(--draw-muted); font-size:14px; text-align:center; }
.draw-result-list { margin-top:20px; border:1px solid var(--draw-line); border-radius:14px; overflow:hidden; }
.draw-result-list .draw-panel-heading { padding:6px 8px 6px 14px; }
#result-quota-winners-items { padding:8px; }
#result-quota-winners-items>div { padding:8px; gap:12px; font-size:15px; }
#result-quota-winners-items>div>span:first-child { min-width:0; overflow-wrap:anywhere; }
#result-quota-winners-items>div>span:last-child { flex-shrink:0; }
.draw-result-actions { display:flex; flex-direction:column; gap:8px; flex-shrink:0; padding:16px 24px; padding-bottom:max(16px,env(safe-area-inset-bottom)); border-top:1px solid var(--draw-line); }
.draw-result-actions button { width:100%; min-height:48px; font-size:16px; }
#lockdown-screen { background:var(--draw-bg); }
.wheel-login-card { width:100%; max-width:360px; border:1px solid var(--draw-line); background:var(--draw-panel); border-radius:20px; padding:24px; }
.wheel-login-card h1 { font-size:24px; font-weight:650; margin-bottom:12px; }
#lockdown-desc { font-size:16px; color:var(--draw-muted); line-height:1.65; }
#lockdown-action { margin-top:16px; }
#lockdown-spinner:not(.hidden)~.wheel-login-card { display:none; }
.draw-loader>span:first-child { position:relative; display:block; width:72px; height:72px; animation:draw-loader-turn 3s linear infinite; }
.draw-loader i { position:absolute; width:24px; height:24px; border-radius:50%; background:#a9ceba; top:0; left:24px; box-shadow:0 0 22px #a9ceba22; animation:draw-loader-pulse 1.4s ease-in-out infinite alternate; }
.draw-loader i:nth-child(2) { top:42px; left:0; background:#d9bd7c; animation-delay:.3s; }
.draw-loader i:nth-child(3) { top:42px; left:48px; background:#5e9176; animation-delay:.6s; }
@keyframes draw-loader-turn { to { transform:rotate(360deg); } }
@keyframes draw-loader-pulse { to { opacity:.5; scale:.75; } }
@media(max-width:760px) {
  .draw-header { padding-left:16px; padding-right:12px; }
  .draw-tools { gap:4px; }
  .draw-back { padding:8px 6px; }
  #guild-name { font-size:17px; }
  .draw-main { padding:16px; }
  .draw-overview { margin-bottom:16px; }
  #event-title { font-size:22px; }
  .draw-event-heading { gap:10px; }
  #btn-open-admin { padding:8px 12px; font-size:14px; }
  .draw-prize { margin-top:14px; gap:4px 10px; }
  .draw-progress { flex-basis:100%; }
  .draw-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
  .draw-stage { padding:12px; border-radius:20px; }
  #wheel-stage>div:first-child { width:min(100%,320px); }
  #admin-drawer { border:0; max-width:none; }
  .drawer-heading { padding-left:16px; padding-right:12px; }
  .draw-admin-tabs { margin-left:16px; margin-right:16px; }
  .drawer-body { padding-left:16px; padding-right:16px; }
  #result-modal { padding:12px; }
  #result-card { max-height:calc(100dvh - 24px); border-radius:20px; }
  .draw-result-body { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.wheel-page .hidden { display:none; }

.wheel-page { --draw-bg:#10101e; --draw-panel:#1a192c; --draw-line:#ffffff16; --draw-muted:#b5b2cb; --draw-accent:#f6db93; background:radial-gradient(ellipse at 15% 0,#33245555,transparent 50%),var(--draw-bg); }
.draw-header { background:#10101eee; }
.draw-main { padding-top:28px; }
.draw-overview { position:relative; padding:22px; border:1px solid #c4a7ff26; border-radius:24px; background:linear-gradient(115deg,#302443,#1c2033); }
#event-title { font-size:clamp(23px,3vw,30px); font-weight:750; }
.draw-prize { border-top:1px solid #ffffff14; padding-top:14px; }
#current-prize-display { color:#ffe4a2; }
.draw-progress { background:#ffffff0c; border-radius:8px; padding:3px 9px; }
#repeat-mode-tag,.draw-text-button { color:#a6efda; }
.draw-stage { position:relative; isolation:isolate; background:radial-gradient(ellipse at 50% 45%,#5a3a8240,transparent 65%),#171525; border-color:#c6a8ff30; box-shadow:inset 0 1px #ffffff0a; }
#stage-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
.arcade-stage-label { display:flex; justify-content:space-between; gap:8px; padding:4px 6px 12px; color:#d3c2f9; font-size:13px; letter-spacing:.5px; }
.arcade-stage-label span:last-child { color:#a8a0bd; }
.wheel-page .wheel-outer-ring { background:#302747; border:1px solid #d5bbff60; padding:3px; box-shadow:0 16px 40px #0006,0 0 44px #aa7dff15; }
.wheel-outer-ring::before { display:none; }
.wheel-page .wheel-center-btn { background:linear-gradient(145deg,#fff9e6,#ffcf78); border:5px solid #393049; box-shadow:0 5px 0 #161121,0 8px 20px #0005,inset 0 2px #fff; }
.wheel-page #btn-spin-text,.wheel-page #btn-spin-sub { color:#392a43; }
.wheel-page .wheel-center-btn:not(:disabled):hover { filter:brightness(1.1); transform:scale(1.05); }
.wheel-page .wheel-center-btn:active { transform:translateY(3px); }
.spotlight-pill { background:#242037f2; border:1px solid #be99fa40; box-shadow:0 5px 20px #0002; }
.wheel-ambient-glow { background:radial-gradient(circle,#a78bfa25,transparent 70%); }
.wheel-ambient-glow-inner { border-color:#b9a2e832; }
.wheel-page .gashapon-dome { background:radial-gradient(ellipse at 35% 15%,#fff2,transparent 50%),linear-gradient(160deg,#554774bb,#26213f); border:3px solid #bda3f6; box-shadow:inset 0 0 35px #b9a2ff20,0 0 30px #a78bfa15; }
.wheel-page .gashapon-base { background:linear-gradient(135deg,#a88ee9,#7861b3); border:1px solid #d9c3ff; box-shadow:inset 0 2px #eee2ff88,0 12px 0 #3d305a,0 22px 30px #0004; }
.wheel-page .gashapon-crank-btn { background:linear-gradient(135deg,#d9fff1,#72dab9); border:3px solid #d3fff1; box-shadow:0 5px 0 #3e6f68,0 8px 15px #34205066; }
.wheel-page .gashapon-crank-wing { background:linear-gradient(#effff9,#7fdcbf); border-color:#e5fff5; }
.wheel-page .gashapon-crank-core { background:#225448; box-shadow:0 2px 6px #0003; }
.wheel-page .gashapon-tray { background:#292139; border-color:#5b437c; box-shadow:inset 0 4px 12px #0005; }
.wheel-page .gashapon-knob-dial { border-color:#f1e7ff80; }
.draw-panel { background:linear-gradient(145deg,#211e33,#191928); border-radius:20px; }
.draw-winner-mark { background:#b69afd20; color:#d4baff; }
.wheel-page input,.wheel-page textarea,.draw-admin-tabs { background:#131322; }
.draw-admin-tabs .active { background:#4a3965; }
.draw-primary,#btn-save-event-cfg { background:#b1f2dc; color:#183e34; }
#result-card { background:radial-gradient(ellipse at 50% 10%,#593c7155,transparent 60%),#1b182b; border-color:#c9a1ff50; }
.result-emblem { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 16px; font-size:46px; color:#ffe3a3; border:1px solid #e9c68d60; border-radius:24px; background:linear-gradient(145deg,#fbd88820,#c595ff20); box-shadow:0 0 40px #d4a3ff20; transform:rotate(-8deg); }
#result-winner-name { color:#faf1ff; text-shadow:0 2px 24px #c49aff30; }
.draw-loader i { background:#b699f4; }.draw-loader i:nth-child(2) { background:#9cf0d4; }.draw-loader i:nth-child(3) { background:#ffd88b; }
@media(max-width:760px) { .draw-main { padding-top:16px; } .draw-overview { padding:16px; border-radius:20px; } .draw-progress { flex-basis:auto; } .draw-stage { padding:12px; } .arcade-stage-label { font-size:12px; } }