/* ===== วงล้อเสี่ยงโชค (ใช้ร่วมทุกธีม v1/v2/v3 — เพิ่ม 2026-10-07) =====
   โครง DOM สร้างโดย scripts/wheel.js (wheelRender): .wheel-stage > .wheel-rim(.wheel-bulbs) + .wheel(superWheel) ; .wheel-gloss อยู่ใน .sWheel-inner
   สีช่องมาจากหลังบ้าน (หมวดหมู่วงล้อ) — ไฟล์นี้แต่งเฉพาะขอบ/แสง/เข็ม/ตัวอักษร ไม่ยุ่งกับสีช่อง
   โหลดหลัง plugins/wheel/css/superwheel.css */
.wheel-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 7%; /* ความหนาขอบทอง (คิดจากความกว้างกล่องแม่ .wrap-wheel) */
  margin: 18px auto 8px;
  --wheel-gold-1: #fff1b8;
  --wheel-gold-2: #e9bf4f;
  --wheel-gold-3: #b07a16;
  --wheel-gold-4: #6e4a08;
}
.wheel-stage .superWheel {
  margin: 0 auto; /* ของปลั๊กอิน 4em บน (เผื่อหมุด) — มีขอบของเราแล้ว */
  display: block;
}
/* ขอบทอง */
.wheel-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, var(--wheel-gold-2), var(--wheel-gold-3) 18%, var(--wheel-gold-1) 36%, var(--wheel-gold-3) 55%, var(--wheel-gold-2) 72%, var(--wheel-gold-1) 88%, var(--wheel-gold-2));
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(255, 240, 190, 0.5),
    inset 0 0 0 2px rgba(90, 60, 5, 0.45),
    inset 0 0 18px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.4s ease;
}
.wheel-stage.is-spinning .wheel-rim {
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(255, 214, 110, 0.55),
    0 0 0 2px rgba(255, 240, 190, 0.7),
    inset 0 0 0 2px rgba(90, 60, 5, 0.45),
    inset 0 0 18px rgba(0, 0, 0, 0.25);
}
/* หลอดไฟรอบขอบ */
.wheel-bulbs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wheel-bulb {
  fill: #fff7d6;
  filter: drop-shadow(0 0 1.4px rgba(255, 226, 138, 0.95));
  transition: opacity 0.2s linear;
}
.wheel-bulb.is-b {
  opacity: 0.45;
  animation: wheel-bulb-idle 2.6s ease-in-out infinite;
}
.wheel-stage.is-spinning .wheel-bulb {
  animation: wheel-bulb-chase 0.5s steps(1, end) infinite;
}
.wheel-stage.is-spinning .wheel-bulb.is-b {
  animation-delay: 0.25s;
}
.wheel-stage.is-done .wheel-bulb {
  animation: wheel-bulb-flash 0.3s ease-in-out 10 alternate;
}
@keyframes wheel-bulb-idle {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.95;
  }
}
@keyframes wheel-bulb-chase {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes wheel-bulb-flash {
  from {
    opacity: 0.15;
  }
  to {
    opacity: 1;
  }
}
/* หน้าปัด: ร่องเข้มรอบวง + เงาใต้วง */
.wheel-stage .wheel {
  position: relative;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px var(--wheel-gold-4),
    0 0 0 5px rgba(255, 240, 190, 0.35),
    0 8px 22px rgba(0, 0, 0, 0.5);
}
/* แสงสะท้อนด้านบน + เงาขอบใน (ชั้นบนสุดใน .sWheel-inner, ไม่ทับเข็ม) */
.wheel-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(60% 40% at 50% 20%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0) 78%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0.3) 100%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}
/* ตัวอักษรในช่อง: หนา + เงา (สีเลือกต่อช่องจาก JS ตามความสว่างพื้น) */
.wheel-stage .sWheel-title {
  font-weight: 700;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.wheel-stage .sWheel-title[data-color="#2b1d05"] {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* ช่องที่ออกรางวัล: วาบสว่างหลังหมุนจบ (ปลั๊กอินใส่ .sw-current ให้ช่องที่เข็มชี้) */
.wheel-stage.is-done svg > g.sw-slicesGroup > path.sw-current {
  animation: wheel-win 0.45s ease-in-out 8 alternate;
}
@keyframes wheel-win {
  from {
    filter: brightness(1) saturate(1);
  }
  to {
    filter: brightness(1.5) saturate(1.25);
  }
}
/* ดุมกลาง: จานเข้มหลังโลโก้ + วงแหวนทอง (รูโลโก้ของปลั๊กอิน = 30% ของเส้นผ่านศูนย์กลาง) */
.wheel-stage .sWheel-center {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wheel-stage .sWheel-center::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 29%;
  height: 29%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2f3035 0%, #141416 70%, #0a0a0b 100%);
  box-shadow:
    0 0 0 2px var(--wheel-gold-4),
    inset 0 2px 6px rgba(255, 255, 255, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.6);
}
.wheel-stage .sWheel-center > img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
/* เข็มชี้ (SVG ใส่โดย wheel.js; ปลั๊กอินสะบัดด้วย transform ตอนผ่านช่อง) */
.wheel-stage .sWheel-marker {
  z-index: 3;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.55));
}