:root{
  --page-max: 614px;
  --green:#acd47f;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--green)}
body{
  font-family:"Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button{font:inherit}
.stage{min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;overflow-x:hidden}
.machine{
  position:relative;
  width:min(100vw,var(--page-max));
  line-height:0;
  overflow:hidden;
  background:var(--green);
  isolation:isolate;
}
.machine-art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}

/* 玻璃高光，静止时也有很轻的流动 */
.glass-shine{
  position:absolute;left:9%;top:11.8%;width:82%;height:45.2%;overflow:hidden;pointer-events:none;border-radius:2%;
}
.glass-shine::after{
  content:"";position:absolute;top:-20%;left:-42%;width:22%;height:145%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  transform:skewX(-15deg);animation:shine 6.5s ease-in-out infinite;
}
@keyframes shine{0%,55%{left:-42%;opacity:0}62%{opacity:1}82%{left:120%;opacity:.7}100%{left:120%;opacity:0}}

/* 可动机械爪：坐标来自 PSB 图层 */
.claw-layer{position:absolute;inset:0;pointer-events:none;z-index:5;transform:translateY(0)}
.claw-part{position:absolute;height:auto;user-select:none;-webkit-user-drag:none}
.claw-head{left:43.73%;top:21.92%;width:14.74%}
.claw-left{left:40.39%;top:29.12%;width:10.18%;transform-origin:78% 6%}
.claw-right{left:52.77%;top:27.88%;width:11.32%;transform-origin:22% 6%}
.cable-extension{
  position:absolute;z-index:4;left:50.03%;top:21.15%;width:.8%;height:12.5%;
  border-left:2px solid #9abf7c;border-right:2px solid #9abf7c;background:#f7fff1;
  transform-origin:top center;transform:scaleY(0);opacity:0;pointer-events:none;
}
.machine.is-drawing .claw-layer{animation:clawTravel 2.05s cubic-bezier(.4,0,.2,1) both}
.machine.is-drawing .cable-extension{animation:cableGrow 2.05s cubic-bezier(.4,0,.2,1) both}
.machine.is-drawing .claw-left{animation:leftGrip 2.05s ease-in-out both}
.machine.is-drawing .claw-right{animation:rightGrip 2.05s ease-in-out both}
@keyframes clawTravel{
  0%,8%{transform:translateY(0)}
  39%,62%{transform:translateY(11.3%)}
  100%{transform:translateY(0)}
}
@keyframes cableGrow{
  0%,8%{transform:scaleY(0);opacity:0}
  10%{opacity:1}
  39%,62%{transform:scaleY(.92);opacity:1}
  100%{transform:scaleY(0);opacity:0}
}
@keyframes leftGrip{
  0%,35%{transform:rotate(0)}
  45%,66%{transform:rotate(13deg)}
  92%,100%{transform:rotate(0)}
}
@keyframes rightGrip{
  0%,35%{transform:rotate(0)}
  45%,66%{transform:rotate(-13deg)}
  92%,100%{transform:rotate(0)}
}

/* 被抓起的一颗扭蛋 */
.picked-capsule{
  --cap:#f7afd5;
  position:absolute;z-index:6;left:50%;top:39.2%;width:12.8%;aspect-ratio:1;border-radius:50%;
  border:clamp(1px,.35vw,2px) solid #54765f;
  background:linear-gradient(170deg,#fff 0 48%,var(--cap) 49% 100%);
  box-shadow:0 4px 8px rgba(58,91,63,.12);
  opacity:0;transform:translate(-50%,0) rotate(-8deg) scale(.92);pointer-events:none;
}
.picked-capsule::after{content:"";position:absolute;left:-2%;right:-2%;top:48%;height:2px;background:#54765f;transform:rotate(-8deg)}
.machine.is-drawing .picked-capsule{animation:capsuleGrab 2.42s ease-in-out both}
@keyframes capsuleGrab{
  0%,32%{opacity:0;transform:translate(-50%,30%) rotate(-8deg) scale(.82)}
  40%{opacity:1;transform:translate(-50%,0) rotate(6deg) scale(1)}
  60%{opacity:1;transform:translate(-50%,-7%) rotate(-4deg) scale(1)}
  78%{opacity:1;transform:translate(-50%,-29%) rotate(7deg) scale(.96)}
  86%{opacity:1;transform:translate(-50%,225%) rotate(155deg) scale(.86)}
  100%{opacity:0;transform:translate(-50%,560%) rotate(320deg) scale(.55)}
}

/* 主按钮点击反馈 */
.hotspot,.award-hotspot{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;outline:none;z-index:12}
.draw-hotspot{left:6.3%;top:59.0%;width:87.5%;height:12.1%;border-radius:4%}
.button-flash{
  position:absolute;z-index:7;left:6.5%;top:59.35%;width:87.2%;height:10.4%;border-radius:3.8%;
  pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.45),transparent 58%);
}
.machine.press .button-flash{animation:buttonPress .36s ease-out}
@keyframes buttonPress{0%{opacity:0;transform:scale(1)}35%{opacity:1;transform:scale(.985)}100%{opacity:0;transform:scale(1)}}

/* 1~5 次选择区域，保留设计稿原按钮，只增加选中光圈 */
.count-hotspot{width:11.4%;height:6.5%;border-radius:50%}
.count-hotspot.c1{left:55.3%;top:71.55%}
.count-hotspot.c2{left:68.6%;top:71.55%}
.count-hotspot.c3{left:81.7%;top:71.55%}
.count-hotspot.c4{left:61.8%;top:78.0%}
.count-hotspot.c5{left:75.1%;top:78.0%}
.selected-ring{
  position:absolute;z-index:9;width:11.7%;height:6.75%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 clamp(2px,.65vw,4px) rgba(255,255,255,.94),0 0 0 clamp(4px,1.1vw,7px) rgba(89,118,77,.62),0 0 18px rgba(255,255,255,.9);
  transition:left .22s cubic-bezier(.2,.8,.2,1),top .22s cubic-bezier(.2,.8,.2,1),transform .22s;
  animation:ringPulse 1.55s ease-in-out infinite;
}
.selected-ring.r1{left:55.15%;top:71.45%}.selected-ring.r2{left:68.45%;top:71.45%}.selected-ring.r3{left:81.55%;top:71.45%}.selected-ring.r4{left:61.65%;top:77.9%}.selected-ring.r5{left:74.95%;top:77.9%}
@keyframes ringPulse{50%{transform:scale(1.07);filter:brightness(1.08)}}

/* 抽取时玻璃仓微震 */
.machine.is-drawing .machine-art{animation:machineMicroShake .45s linear 2}
@keyframes machineMicroShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-.28%)}75%{transform:translateX(.28%)}}
.draw-state{
  position:absolute;z-index:15;left:50%;top:54.6%;transform:translate(-50%,8px) scale(.96);
  padding:.62em 1.25em;border-radius:999px;background:rgba(42,70,44,.78);color:#fff;
  font-size:clamp(13px,3.3vw,18px);line-height:1;letter-spacing:.08em;opacity:0;pointer-events:none;
  transition:.18s ease;
}
.machine.is-drawing .draw-state{opacity:1;transform:translate(-50%,0) scale(1)}

/* 中奖层 */
.award-mask{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vw,24px);background:rgba(37,43,34,.56);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;overflow:auto;
}
.award-mask.show{opacity:1;visibility:visible}
.award-shell{position:relative;width:min(79vw,407px);line-height:0;transform:translateY(24px) scale(.82);opacity:0;filter:drop-shadow(0 15px 34px rgba(63,32,47,.25))}
.award-mask.show .award-shell{animation:awardPop .62s cubic-bezier(.2,1.35,.36,1) .05s both}
@keyframes awardPop{0%{transform:translateY(30px) scale(.72) rotate(-1.5deg);opacity:0}70%{transform:translateY(-5px) scale(1.03) rotate(.5deg);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
.award-art{display:block;width:100%;height:auto;max-height:92dvh;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
.take-hotspot{left:29%;top:77.2%;width:42%;height:8.7%;border-radius:999px}
.close-hotspot{left:42%;top:92.1%;width:16%;height:7.2%;border-radius:50%}
.take-hotspot:active{background:rgba(255,255,255,.16)}
.close-hotspot:active{background:rgba(255,255,255,.16)}

/* 彩纸 */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-12vh;width:7px;height:14px;border-radius:2px;opacity:.95;animation:fall var(--d) linear var(--delay) forwards;transform:rotate(var(--r))}
@keyframes fall{to{transform:translate3d(var(--x),115vh,0) rotate(calc(var(--r) + 720deg));opacity:.78}}

.toast{
  position:fixed;z-index:130;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translate(-50%,12px);
  padding:9px 16px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font-size:14px;line-height:1.3;
  opacity:0;visibility:hidden;transition:.2s ease;white-space:nowrap;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

@media (min-width:615px){body{background:#737373}.machine{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 18px 42px rgba(0,0,0,.12)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}