*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#12060e;font-family:"PingFang SC","Microsoft YaHei",sans-serif;user-select:none}
.hidden{display:none!important}
body{display:grid;place-items:center;background:radial-gradient(ellipse 92% 78% at 50% 42%,#6e1842 0%,#3a1028 36%,#1a0a14 62%,#12060e 100%)}
.festive{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.festive span{
  position:absolute;
  display:block;
  pointer-events:none;
}
.festive .spark{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ffe9a8;
  box-shadow:0 0 10px 2px #ffd76acc;
  animation:twinkle var(--d,2.2s) ease-in-out infinite;
  animation-delay:var(--delay);
}
.festive .spark.star{
  width:10px;
  height:10px;
  border-radius:0;
  background:#fff6cc;
  box-shadow:0 0 12px 3px #ff9ac4aa;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
@keyframes twinkle{
  0%,100%{opacity:.15;transform:scale(.55) rotate(0)}
  50%{opacity:1;transform:scale(1.4) rotate(18deg)}
}
.festive .bit{
  top:-10%;
  left:var(--x);
  width:9px;
  height:16px;
  border-radius:2px;
  background:var(--c);
  opacity:.95;
  animation:festive-fall var(--d) linear infinite;
  animation-delay:var(--delay);
}
.festive .bit.round{width:9px;height:9px;border-radius:50%}
.festive .bit.ribbon{width:5px;height:20px;border-radius:4px}
.festive .bit.star-bit{
  width:13px;
  height:13px;
  border-radius:0;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.festive .bit.petal{
  width:10px;
  height:14px;
  border-radius:50% 50% 50% 0;
  transform:rotate(45deg);
}
@keyframes festive-fall{to{transform:translate(var(--drift),120vh) rotate(640deg)}}
.festive .boom{
  width:8px;
  height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;
  background:#ffe58a;
  opacity:0;
  animation:boom 5.2s ease-out infinite;
  animation-delay:var(--delay);
}
.festive .boom.alt{animation-name:boom-alt;animation-duration:5.8s}
@keyframes boom{
  0%{transform:scale(.2);opacity:0;box-shadow:0 0 #ffd34d}
  8%{opacity:1}
  26%{opacity:1;transform:scale(1);box-shadow:36px 0 0 2px #ffd34d,-36px 0 0 2px #ff2c83,0 36px 0 2px #fff,0 -36px 0 2px #ffd34d,26px 26px 0 1px #ff8ad4,-26px 26px 0 1px #ffd34d,26px -26px 0 1px #fff,-26px -26px 0 1px #ff2c83,54px 14px 0 1px #ffd34d,-54px 14px 0 1px #ff8ad4,14px 54px 0 1px #fff,-14px -54px 0 1px #ff2c83,44px 44px 0 1px #ffd34d,-44px 44px 0 1px #ff2c83,44px -44px 0 1px #fff,-44px -44px 0 1px #ffd34d}
  100%{transform:scale(1.35);opacity:0;box-shadow:58px 0 0 0 #ffd34d,-58px 0 0 0 #ff2c83,0 58px 0 0 #fff,0 -58px 0 0 #ffd34d,42px 42px 0 0 #ff8ad4,-42px 42px 0 0 #ffd34d,42px -42px 0 0 #fff,-42px -42px 0 0 #ff2c83,76px 20px 0 0 #ffd34d,-76px 20px 0 0 #ff8ad4,20px 76px 0 0 #fff,-20px -76px 0 0 #ff2c83,56px 56px 0 0 #ffd34d,-56px 56px 0 0 #ff2c83,56px -56px 0 0 #fff,-56px -56px 0 0 #ffd34d}
}
@keyframes boom-alt{
  0%{transform:scale(.2);opacity:0;box-shadow:0 0 #ff8ad4}
  10%{opacity:1}
  30%{opacity:1;transform:scale(1);box-shadow:28px 8px 0 2px #ff8ad4,-28px 8px 0 2px #ffd34d,8px 32px 0 2px #fff,-8px -32px 0 2px #ff2c83,22px -22px 0 1px #ffd34d,-22px 22px 0 1px #ff8ad4,46px 0 0 1px #fff,-46px 0 0 1px #ffd34d,0 48px 0 1px #ff2c83,0 -48px 0 1px #ff8ad4,34px 34px 0 1px #ffd34d,-34px -34px 0 1px #fff}
  100%{transform:scale(1.45);opacity:0;box-shadow:48px 12px 0 0 #ff8ad4,-48px 12px 0 0 #ffd34d,12px 52px 0 0 #fff,-12px -52px 0 0 #ff2c83,38px -38px 0 0 #ffd34d,-38px 38px 0 0 #ff8ad4,72px 0 0 0 #fff,-72px 0 0 0 #ffd34d,0 74px 0 0 #ff2c83,0 -74px 0 0 #ff8ad4,56px 56px 0 0 #ffd34d,-56px -56px 0 0 #fff}
}
@media (prefers-reduced-motion:reduce){
  .festive{display:none}
}
.slot-stage{
  aspect-ratio:942/1669;
  height:min(100vh,calc(100vw * 1669 / 942));
  width:min(100vw,calc(100vh * 942 / 1669));
  position:relative;
  z-index:1;
  overflow:visible;
  /* box-shadow:0 0 80px #000b; */
  background:url("/assets/slot-machine-frame.png") center / 100% 100% no-repeat;
}
.reels{position:absolute;inset:0;pointer-events:none}
.reel{
  position:absolute;
  overflow:hidden;
  background:linear-gradient(90deg,#8d8380 0%,#d4cdc9 12%,#f7f3f0 28%,#fff 50%,#f3eeea 72%,#c9c1bc 88%,#8d8380 100%);
  box-shadow:inset 0 6px 8px #3a2a3522,inset 0 -8px 10px #3a2a3526;
}
.reel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  background:linear-gradient(90deg,#2a182866 0%,transparent 14%,transparent 86%,#2a182866 100%);
}
.reel.r0{left:14.02%;top:46.2%;width:21.34%;height:19.59%}
.reel.r1{left:38.96%;top:46.14%;width:20.91%;height:19.53%}
.reel.r2{left:63.48%;top:46.2%;width:21.34%;height:19.53%}
.strip{position:absolute;inset:0 0 auto;will-change:transform}
.symbol{
  height:var(--cell-height,160px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4% 6% 7%;
}
.symbol img{
  width:94%;
  height:70%;
  object-fit:contain;
  filter:drop-shadow(0 5px 4px #4a203844);
}
.symbol .emoji{font-size:calc(var(--cell-height,160px) * .5);line-height:1}
.symbol b{
  margin-top:1%;
  font-size:clamp(9px,1.7vw,15px);
  color:#7a1f4c;
  text-align:center;
  line-height:1.1;
  text-shadow:0 1px 0 #fff8;
  max-width:96%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lever{
  position:absolute;
  left:85.2%;
  top:28.8%;
  width:19.6%;
  height:27.2%;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  appearance:none;
  overflow:visible;
  filter:drop-shadow(0 8px 8px #0007);
}
.lever img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  display:block;
}
.lever-arm{transform-origin:60.28% 65.27%}
.lever:not(.pulled):not(:disabled) .lever-arm{animation:idle-sway 2.6s ease-in-out infinite}
@keyframes idle-sway{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(5deg)}
}
.lever.pulled .lever-arm{animation:yank .82s cubic-bezier(.18,.82,.28,1)}
@keyframes yank{
  0%{transform:rotate(0)}
  32%{transform:rotate(42deg)}
  50%{transform:rotate(36deg)}
  100%{transform:rotate(0)}
}
.lever:hover .lever-arm{filter:brightness(1.08)}
.lever:focus-visible{outline:2px solid #ffe68e;outline-offset:-2px}
.lever:disabled{cursor:not-allowed;opacity:.72}
.tip{
  position:absolute;
  left:16%;
  right:16%;
  top:71.2%;
  text-align:center;
  color:#6d1238;
  font-weight:800;
  letter-spacing:.08em;
  font-size:clamp(11px,2.6vw,22px);
  text-shadow:0 1px 0 #fff9,0 0 12px #fff6;
  animation:pulse 1.8s ease-in-out infinite;
  pointer-events:none;
}
.stock{
  position:fixed;
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  z-index:2;
  display:flex;
  align-items:baseline;
  gap:6px;
  pointer-events:none;
  white-space:nowrap;
  background:#1a0812cc;
  color:#f3cfe0;
  border:1px solid #ffe68e44;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.04em;
  backdrop-filter:blur(10px);
  box-shadow:0 6px 18px #0004;
}
.stock b{color:#ffe474;margin:0;font-variant-numeric:tabular-nums}
@keyframes pulse{50%{filter:drop-shadow(0 0 9px #ff3f91);transform:scale(1.025)}}
.win{
  position:fixed;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  background:#2f071fce;
  backdrop-filter:blur(8px);
  overflow:hidden;
}
.rays{
  position:absolute;
  width:min(110vw,800px);
  aspect-ratio:1;
  border-radius:50%;
  background:repeating-conic-gradient(#ffd76588 0 8deg,transparent 8deg 18deg);
  animation:rotate 10s linear infinite;
}
@keyframes rotate{to{transform:rotate(360deg)}}
.win-card{
  position:relative;
  z-index:2;
  text-align:center;
  width:min(84vw,410px);
  padding:28px;
  background:linear-gradient(160deg,#fffdf4,#ffe7f0);
  border:4px solid #f6cb52;
  border-radius:28px;
  box-shadow:0 0 35px #ffd85f,0 26px 70px #17000e;
  animation:pop .55s cubic-bezier(.15,1.25,.3,1);
}
@keyframes pop{from{transform:scale(.35) rotate(-5deg);opacity:0}}
.winner-label{color:#bd7b1e;font-weight:900;letter-spacing:.2em}
.win-card img{display:block;width:170px;height:150px;object-fit:contain;margin:12px auto 0;filter:drop-shadow(0 12px 10px #9a557044)}
.win-card img[src=""]{display:none}
.win-icon{font-size:80px;margin:18px}
.win-card p{margin:7px;color:#a16a82}
.win-card h1{color:#e91e70;margin:4px 0 10px;font-size:32px}
.win-card small{color:#735365}
.win-card button{
  display:block;
  width:100%;
  border:0;
  border-radius:30px;
  padding:13px;
  margin-top:22px;
  background:linear-gradient(#ffd968,#e4a829);
  color:#681235;
  font-weight:900;
  font-size:17px;
  box-shadow:0 5px 0 #9d6715;
}
.confetti i{
  position:absolute;
  top:-10%;
  width:9px;
  height:17px;
  background:var(--c);
  left:var(--x);
  animation:fall var(--d) linear infinite;
  animation-delay:var(--delay);
}
@keyframes fall{to{transform:translate(var(--drift),115vh) rotate(680deg)}}
.toast{
  position:fixed;
  z-index:30;
  bottom:6%;
  left:50%;
  transform:translateX(-50%);
  background:#351020e8;
  color:white;
  padding:13px 20px;
  border:1px solid #ffd564;
  border-radius:30px;
  white-space:nowrap;
}