/* The rotating layer contains both the prize face and the lamp ring.
   The center button and the pointer stay fixed, like the reference video. */
.wheelbox{background:transparent!important;padding:9%!important;box-shadow:0 8px #a93a2c!important}
.wheel{overflow:visible!important;border:0!important;z-index:1}
.wheel{transition:transform 6s ease!important}
.wheel:before{display:none}
.wheel:after{display:none!important}
/* Match the reference: only the wheel plate turns. */
.go{z-index:7!important;width:18%!important;height:18%!important;min-width:58px!important;min-height:58px!important;max-width:72px!important;max-height:72px!important;border-width:4px!important;font-size:clamp(13px,3.8vw,15px)!important;box-shadow:0 3px #551879,0 0 0 3px #9d46c6!important}.go:before,.go:after{display:none!important}.pointer{display:none!important}
.wheelbox:before{content:"";position:absolute;z-index:4;inset:0;background:url("turntable-outer-bg2.png") center/100% 100% no-repeat;pointer-events:none;animation:lampspin 5s linear infinite}.wheelbox:after{display:none}@keyframes lampspin{to{transform:rotate(360deg)}}
/* Eight fixed prize slots: each label stays inside its own sector. */
.wheel .seg{position:absolute!important;width:88px!important;height:72px!important;padding:0!important;line-height:1.1!important;transform-origin:center!important;font-size:13px!important;text-align:center!important;color:#704021!important}
.wheel .seg b{display:block!important;font-size:25px!important;line-height:30px!important;margin-bottom:3px!important}
.wheel .s0{left:50%!important;top:7%!important;transform:translateX(-50%) rotate(0deg)!important}.wheel .s1{left:64%!important;top:19%!important;transform:rotate(45deg)!important}.wheel .s2{left:75%!important;top:42%!important;transform:rotate(90deg)!important}.wheel .s3{left:63%!important;top:65%!important;transform:rotate(135deg)!important}.wheel .s4{left:50%!important;top:77%!important;transform:translateX(-50%) rotate(180deg)!important}.wheel .s5{left:15%!important;top:65%!important;transform:rotate(225deg)!important}.wheel .s6{left:2%!important;top:42%!important;transform:rotate(270deg)!important}.wheel .s7{left:16%!important;top:19%!important;transform:rotate(315deg)!important}
/* Use the supplied reference face itself, so sector borders, labels and icons are exact. */
.wheel{background:url("reference-wheel-face.png") center/100% 100% no-repeat!important}
.wheel .seg{display:none!important}
/* Fixed purple pointer above the center button. */
.go:before{content:""!important;display:block!important;position:absolute!important;left:50%!important;top:-40%!important;z-index:1!important;width:0!important;height:0!important;transform:translateX(-50%)!important;border-left:clamp(8px,2.5vw,10px) solid transparent!important;border-right:clamp(8px,2.5vw,10px) solid transparent!important;border-bottom:clamp(24px,7.2vw,29px) solid #a64bd0!important;border-top:0!important;animation:none!important;filter:drop-shadow(0 2px #672083)}
/* Restore the reference behavior: lamps rotate independently of the draw plate. */
.wheelbox:before{display:block!important;content:""!important;position:absolute!important;z-index:4!important;inset:0!important;background:url("turntable-outer-bg2.png") center/100% 100% no-repeat!important;pointer-events:none!important;animation:lampspin 5s linear infinite!important}
.wheel:before{display:none!important}
/* mobile theme layout matched to the reference campaign page */
body{background:#df4a42!important}.app{max-width:430px!important;padding:22px 14px 30px!important;background:radial-gradient(ellipse at 18% 55%,rgba(255,222,65,.8) 0 4px,transparent 5px),radial-gradient(ellipse at 90% 40%,rgba(98,218,152,.8) 0 4px,transparent 5px),linear-gradient(#e55048,#df463f)!important}.app:after{content:"\7531\62bd\5956\4e50\63d0\4f9b\6280\672f\652f\6301";display:block;margin-top:20px;color:#fff;text-shadow:0 2px #b33431;font-size:16px;font-weight:bold}h1{font-size:45px!important;letter-spacing:2px!important;line-height:1.12!important;margin:18px 0 4px!important;text-shadow:0 4px #8d3028,0 7px rgba(95,28,22,.3)!important}.sub{display:none}.wheelbox{width:min(80vw,320px)!important;margin:16px auto 0!important}.count{width:min(50vw,188px)!important;height:42px!important;line-height:42px!important;margin:18px auto 14px!important;border-radius:24px!important;background:#f7a92d!important;color:#fff8d3!important;font-size:16px!important}.count b{font-size:21px!important}.bar{max-width:340px!important;min-height:80px!important;padding:23px 10px!important;border-radius:8px!important;font-size:16px!important;color:#74808d!important;box-shadow:none!important}.rules{display:none!important}.gift{right:12px!important;bottom:35px!important;width:64px!important;height:64px!important;border:4px solid #fff0a1!important;background:linear-gradient(145deg,#ffd44b,#e87935)!important;font-size:12px!important}.gift:before{content:"\1f381";display:block;font-size:24px;line-height:20px}
body{background:#df4a42!important}.app{max-width:430px!important;padding:22px 14px 30px!important;background:radial-gradient(ellipse at 18% 55%,rgba(255,222,65,.8) 0 4px,transparent 5px),radial-gradient(ellipse at 90% 40%,rgba(98,218,152,.8) 0 4px,transparent 5px),linear-gradient(#e55048,#df463f)!important}.app:after{display:none!important}h1{font-size:45px!important;letter-spacing:2px!important;line-height:1.12!important;margin:18px 0 4px!important;text-shadow:0 4px #8d3028,0 7px rgba(95,28,22,.3)!important}.sub{display:none}.wheelbox{width:min(80vw,320px)!important;margin:16px auto 0!important}.count{width:min(50vw,188px)!important;height:42px!important;line-height:42px!important;margin:18px auto 14px!important;border-radius:24px!important;background:#f7a92d!important;color:#fff8d3!important;font-size:16px!important}.count b{font-size:21px!important}.bar{width:92%!important;max-width:380px!important;min-height:80px!important;padding:20px 6px!important;border-radius:8px!important;font-size:clamp(13px,3.5vw,16px)!important;color:#697785!important;box-shadow:none!important;white-space:nowrap!important}.bar span{color:#e55048}.bar b{display:inline-block;background:#df504a;color:#fff;border-radius:5px;padding:3px 5px;margin:0 1px;font-size:clamp(16px,4vw,19px)!important}.rules{display:none!important}.gift{right:12px!important;bottom:35px!important;width:64px!important;height:64px!important;border:4px solid #fff0a1!important;background:linear-gradient(145deg,#ffd44b,#e87935)!important;font-size:12px!important}.gift:before{content:"\1f381";display:block;font-size:24px;line-height:20px}

/* Winner ticker: real records first, then anonymous campaign activity. */
.winner-feed{width:92%;max-width:380px;margin:12px auto 0;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;background:rgba(142,43,34,.26);color:#fff6cc;font-size:13px;overflow:hidden}.winner-title{flex:none;color:#fff0a0;font-weight:bold}.winner-window{min-width:0;flex:1;overflow:hidden;white-space:nowrap}.winner-track{display:inline-flex;gap:28px;min-width:max-content;animation:winner-marquee 22s linear infinite}.winner-track span{display:inline-block}@keyframes winner-marquee{to{transform:translateX(-50%)}}

/* Dynamic prize sectors: names and icons always follow the admin settings. */
.wheel{background:conic-gradient(from -22.5deg,#dfe2e3 0deg 45deg,#fff58a 45deg 90deg,#cf8b94 90deg 135deg,#dfe2e3 135deg 180deg,#fff58a 180deg 225deg,#cf8b94 225deg 270deg,#dfe2e3 270deg 315deg,#fff58a 315deg 360deg)!important;border:3px solid #f1c23b!important;border-radius:50%!important;overflow:hidden!important}.wheel .seg{display:block!important;z-index:2!important;text-shadow:0 1px rgba(255,255,255,.55)}.wheel .seg span{display:block;max-width:82px;margin:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.wheel .s0{top:4%!important}.wheel .s1{left:67%!important;top:16%!important}.wheel .s2{left:79%!important;top:42%!important}.wheel .s3{left:66%!important;top:69%!important}.wheel .s4{top:80%!important}.wheel .s5{left:10%!important;top:69%!important}.wheel .s6{left:-1%!important;top:42%!important}.wheel .s7{left:10%!important;top:16%!important}
.wheel .seg{width:80px!important;height:auto!important;left:auto!important;top:auto!important;transform:translate(-50%,-50%)!important;font-size:12px!important;line-height:1.15!important}.wheel .seg b{font-size:25px!important;line-height:28px!important;margin:0!important}.wheel .seg span{max-width:78px!important;min-height:27px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:clip!important;white-space:normal!important;font-weight:700!important}.wheel .s0{left:50%!important;top:19%!important}.wheel .s1{left:70%!important;top:29%!important}.wheel .s2{left:79%!important;top:50%!important}.wheel .s3{left:70%!important;top:71%!important}.wheel .s4{left:50%!important;top:81%!important}.wheel .s5{left:30%!important;top:71%!important}.wheel .s6{left:21%!important;top:50%!important}.wheel .s7{left:30%!important;top:29%!important}
.wheel .seg{width:72px!important;font-size:11px!important}.wheel .seg span{max-width:72px!important;min-height:0!important;-webkit-line-clamp:1!important;white-space:nowrap!important}.wheel .s0{transform:translate(-50%,-50%) rotate(0deg)!important}.wheel .s1{transform:translate(-50%,-50%) rotate(45deg)!important}.wheel .s2{transform:translate(-50%,-50%) rotate(90deg)!important}.wheel .s3{transform:translate(-50%,-50%) rotate(135deg)!important}.wheel .s4{transform:translate(-50%,-50%) rotate(180deg)!important}.wheel .s5{transform:translate(-50%,-50%) rotate(225deg)!important}.wheel .s6{transform:translate(-50%,-50%) rotate(270deg)!important}.wheel .s7{transform:translate(-50%,-50%) rotate(315deg)!important}
.wheel .seg{width:64px!important;font-size:10px!important;color:#343434!important;font-weight:400!important;text-shadow:none!important}.wheel .seg b{font-size:27px!important;line-height:28px!important;margin-top:3px!important}.wheel .seg span{max-width:64px!important;font-weight:400!important}.wheel .s0{left:50%!important;top:16%!important}.wheel .s1{left:70%!important;top:26%!important}.wheel .s2{left:82%!important;top:49%!important}.wheel .s3{left:70%!important;top:73%!important}.wheel .s4{left:50%!important;top:84%!important}.wheel .s5{left:30%!important;top:73%!important}.wheel .s6{left:18%!important;top:49%!important}.wheel .s7{left:30%!important;top:26%!important}
.wheel .seg span{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;max-height:25px!important;white-space:normal!important;overflow:hidden!important;word-break:break-all!important;overflow-wrap:anywhere!important;line-height:12px!important}

/* Keep the prize entry anchored to the campaign page, not the changing mobile browser viewport. */
.app{position:relative!important}.gift{position:absolute!important;right:8px!important;bottom:18px!important}

/* Avoid showing the legacy countdown for a frame during refresh. */
.bar{visibility:hidden!important}.bar.countdown-ready{visibility:visible!important}

/* Show the admin-configured rules directly below the winner ticker. */
.rules{display:block!important;width:92%!important;max-width:380px!important;margin:12px auto 0!important;padding:14px 16px!important;border-radius:9px!important;background:#fff!important;color:#6b5960!important;text-align:left!important;font-size:13px!important;line-height:1.7!important}.rules h2{display:block!important;margin:0 0 6px!important;color:#d8483f!important;font-size:16px!important}
.commission-intro{background:#fff7e7!important}.commission-intro p{margin:6px 0}.commission-intro b{color:#cf4439}.commission-tip{color:#9a7d67;font-size:12px}

/* Compact and evenly space the campaign information cards. */
.winner-feed{margin-top:8px!important;min-height:40px!important}.rules{margin-top:8px!important;padding:10px 14px!important}.bar{min-height:62px!important;margin-top:8px!important;padding:12px 6px!important;display:flex!important;align-items:center!important;justify-content:center!important}

.share-bonus{display:block;margin:7px auto 0;padding:7px 17px;border:1px solid #ffe18a;border-radius:18px;background:rgba(166,58,42,.34);color:#fff8c9;font:inherit;font-size:13px;cursor:pointer}
.share-bonus{display:inline-block!important;margin:7px 3px 0!important;vertical-align:middle}.checkin-entry{background:rgba(166,58,42,.72)!important;color:#fff!important;font-size:15px!important;font-weight:bold!important;min-width:150px}#dailyCheckin{display:none!important}
.share-icon{width:17px;height:17px;vertical-align:-3px;margin-right:5px;fill:none;stroke:#43b86d;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.register-bonus{margin:8px 0 12px;padding:9px 10px;border-radius:8px;background:#fff5d7;color:#b45134;font-size:13px;line-height:1.55}
.register-entry,.login-entry{display:inline-block!important;margin:8px 3px 0!important;background:#c84d3f!important;color:#fff8db!important;border-color:#ffd284!important;font-weight:bold!important}.login-entry{background:rgba(166,58,42,.72)!important}
.wheel-logo-slot{display:flex;justify-content:center;align-items:center;width:max-content;max-width:calc(100% - 16px);padding:6px 10px;margin:0 auto 10px;background:rgba(255,255,255,.5);border-radius:0 0 13px 13px}.wheel-logo{display:block;width:min(142px,42vw);height:auto;object-fit:contain;mix-blend-mode:multiply}
.rules #rules{display:block!important;white-space:pre-line!important}
.app{padding-bottom:30px!important}.gift{position:fixed!important;right:12px!important;bottom:max(16px,env(safe-area-inset-bottom))!important;z-index:999!important;transform:translate3d(0,0,0)!important;will-change:transform!important;transition:none!important;animation:none!important}

/* Mobile Safari: keep every turntable layer in one square coordinate system.
   This prevents iOS button rendering and percentage padding from distorting the face. */
.wheelbox{
  position:relative!important;
  display:block!important;
  width:min(88vw,360px)!important;
  height:min(88vw,360px)!important;
  aspect-ratio:1 / 1!important;
  box-sizing:border-box!important;
  padding:10%!important;
  overflow:visible!important;
  flex:none!important;
}
.wheelbox .wheel{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
}
.wheelbox .go{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  overflow:visible!important;
  text-align:center!important;
  font-family:Arial,"Microsoft YaHei",sans-serif!important;
}