*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#08010f;color:white;font-family:Arial,Helvetica,sans-serif}body{display:grid;place-items:center}.phone{position:relative;width:min(100vw,56.25vh);height:min(100svh,177.78vw);max-width:720px;max-height:1280px;overflow:hidden;background:#11041d}.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) brightness(.9)}.menuBtn{position:absolute;right:4%;top:2.4%;z-index:20;width:44px;height:44px;border-radius:12px;border:2px solid #f0c45f;background:rgba(19,7,36,.75);color:#ffe79b;font-size:25px;font-weight:900}.logoBox{position:absolute;left:18%;right:18%;top:2.5%;height:10.5%;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid #e7bc57;border-radius:22px;background:linear-gradient(180deg,rgba(61,18,91,.94),rgba(15,5,38,.94));box-shadow:0 0 28px rgba(170,83,255,.55), inset 0 0 18px rgba(255,229,121,.35)}.logoMain{font-size:min(10vw,66px);line-height:.82;font-weight:1000;letter-spacing:1px;color:#ffd66a;text-shadow:0 4px 0 #5c2600,0 0 14px #b56eff}.logoSub{font-size:min(5vw,34px);font-weight:1000;color:#fff0bd;letter-spacing:5px}.jackpots{position:absolute;left:3.5%;right:3.5%;top:14%;height:7%;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6%}.jackpots div{border:2px solid #dcb250;border-radius:10px;background:linear-gradient(#44206b,#160825);text-align:center;font-size:min(2.8vw,18px);font-weight:900;color:#fbd87a;padding-top:4px;text-shadow:0 2px 2px #000}.jackpots b{font-size:min(4.4vw,30px);color:white}.winPanel{position:absolute;left:7%;right:7%;top:22.0%;height:5.6%;z-index:6;border:3px solid #e8c15c;border-radius:18px;background:rgba(18,5,34,.82);box-shadow:0 0 22px rgba(255,204,77,.28), inset 0 0 14px rgba(132,74,255,.45);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:1000;font-size:min(4.7vw,33px);color:#ffec9a;text-shadow:0 3px 0 #4d1e00;white-space:nowrap;overflow:hidden}.reels{position:absolute;left:4.2%;right:4.2%;top:29.2%;height:47.8%;z-index:4;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:0;border:5px solid #e4b84b;border-radius:20px;background:#120316;overflow:hidden;box-shadow:0 0 0 3px #6c3d0e,0 0 28px rgba(255,205,81,.3)}.cell{position:relative;overflow:hidden;background:#1b0a35;border-right:2px solid rgba(255,207,92,.86);border-bottom:2px solid rgba(255,207,92,.86);display:flex;align-items:center;justify-content:center}.cell:nth-child(5n){border-right:none}.cell:nth-child(n+11){border-bottom:none}.cell img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.cell.spin img{filter:blur(6px) brightness(1.15);transform:scale(1.08)}.cell.flash{box-shadow:inset 0 0 0 6px #ffe476,0 0 20px #ffe476;z-index:2}.bottomStats{position:absolute;left:4%;right:4%;top:78.5%;height:7%;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);gap:2%}.bottomStats div{border:2px solid #d8a947;border-radius:12px;background:rgba(18,6,34,.82);text-align:center;font-weight:900;font-size:min(3vw,20px);color:#e7c778;padding-top:5px}.bottomStats b{font-size:min(5vw,34px);color:white}.controls{position:absolute;left:4%;right:4%;bottom:2.2%;height:11.5%;z-index:4;display:grid;grid-template-columns:1fr 1fr 1.6fr 1fr 1fr;gap:2%;align-items:center}.controls button{height:54%;border-radius:14px;border:2px solid #edc25f;background:linear-gradient(#4e1e7c,#1b0835);color:#ffe587;font-size:min(4.7vw,32px);font-weight:1000;box-shadow:0 5px 0 #10051f}.spinBtn{height:86%!important;border-radius:50%!important;background:radial-gradient(circle at 35% 25%,#44d96b,#075620 65%,#032612)!important;color:#fff2a8!important}.drawer{position:absolute;right:-72%;top:0;width:72%;height:100%;z-index:50;background:rgba(12,4,26,.97);border-left:3px solid #e7bc57;box-shadow:-10px 0 25px rgba(0,0,0,.55);transition:.22s;padding:70px 22px}.drawer.open{right:0}.drawer h2{color:#ffe27a;margin:0 0 18px;font-size:30px}.drawer button:not(.close){width:100%;height:54px;margin:8px 0;border-radius:13px;border:2px solid #ddb350;background:#301151;color:#ffe598;font-size:20px;font-weight:900}.close{position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%;border:2px solid #ddb350;background:#220b3e;color:#fff;font-size:28px}
.cell.wildGlow{box-shadow:inset 0 0 0 4px #ffe476, inset 0 0 22px rgba(255,228,118,.85), 0 0 16px rgba(255,228,118,.45);}
.cell.collectGlow{box-shadow:inset 0 0 0 4px #80ffb5, inset 0 0 22px rgba(90,255,160,.7), 0 0 16px rgba(90,255,160,.45);}


/* v1.2: improved winning window + left-to-right path display */
.winPanel{
  gap:10px;
  padding:0 10px;
  justify-content:center;
}
.winPanel .winIcon{
  width:min(8vw,54px);
  height:86%;
  object-fit:cover;
  border:2px solid #ffe476;
  border-radius:10px;
  box-shadow:0 0 12px rgba(255,228,118,.75);
  flex:0 0 auto;
}
.winPanel span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reels{position:absolute;}
.winPathLayer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:8;
}
.winPathLine{
  fill:none;
  stroke:#ffe476;
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 3px #ffd54a);
}
.winPathGlow{
  fill:none;
  stroke:rgba(255,228,118,.35);
  stroke-width:3.0;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cell.pathWin img{
  transform:scale(1.04);
}
.cell.flash{
  box-shadow:inset 0 0 0 7px #ffe476, inset 0 0 30px rgba(255,228,118,.55), 0 0 24px #ffe476;
  z-index:9;
}


/* v1.3: no diagonal path line. Use strong closed gold frames around winning cells */
.winPathLayer{display:none!important;}
.cell.winFrame{
  box-shadow:inset 0 0 0 8px #ffe476, inset 0 0 28px rgba(255,228,118,.72), 0 0 24px rgba(255,228,118,.95)!important;
  z-index:12;
  border-color:#ffe476!important;
}
.cell.winFrame::after{
  content:"";
  position:absolute;
  inset:6px;
  border:3px solid rgba(255,255,210,.92);
  border-radius:10px;
  pointer-events:none;
  box-shadow:0 0 14px rgba(255,228,118,.72);
}
.cell.winFrame img{transform:scale(1.04);filter:brightness(1.18) saturate(1.16);}
.winPanel .winIcon{background:#1a0a2d;}


/* v1.4: Scatter animation example + Auto Spin */
.scatterOverlay{
  position:absolute; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  background:rgba(10,2,20,.62); overflow:hidden;
}
.scatterOverlay.show{display:flex; animation:scatterFade .18s ease-out both;}
@keyframes scatterFade{from{opacity:0}to{opacity:1}}
.scatterCard{
  position:relative; width:82%; min-height:230px; border:4px solid #ffe476; border-radius:26px;
  background:radial-gradient(circle at 50% 20%,rgba(255,212,63,.42),rgba(74,13,105,.94) 48%,rgba(13,4,29,.98));
  box-shadow:0 0 55px #ffd34a, inset 0 0 34px rgba(255,228,118,.58);
  text-align:center; padding:24px 16px; transform:scale(.92); animation:scatterPop .55s cubic-bezier(.2,1.25,.22,1) forwards;
}
@keyframes scatterPop{to{transform:scale(1)}}
.scatterTitle{font-size:min(7vw,46px); color:#fff1a8; font-weight:1000; text-shadow:0 3px 0 #6b2700,0 0 15px #fff;}
.scatterCount{font-size:min(20vw,128px); line-height:.9; color:#ffd750; font-weight:1000; text-shadow:0 5px 0 #6b2700,0 0 22px #fff; margin:14px 0 5px;}
.scatterSub{font-size:min(5vw,32px); color:white; font-weight:900; letter-spacing:1px;}
.scatterCard button{margin-top:18px; width:72%; height:48px; border-radius:16px; border:3px solid #ffe476; background:linear-gradient(#149344,#075520); color:#fff8b9; font-weight:1000; font-size:min(4.8vw,30px);}
.coinRain{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.coinRain i{position:absolute; top:-30px; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff8b9,#f8bf22 45%,#b66e00 80%); border:2px solid #ffdf62; box-shadow:0 0 12px #ffd34a; animation:coinFall var(--dur) linear forwards; left:var(--x); transform:rotate(var(--r));}
@keyframes coinFall{to{top:105%; transform:rotate(calc(var(--r) + 720deg));}}
.cell.scatterHit{box-shadow:inset 0 0 0 8px #ffe476, inset 0 0 35px rgba(255,228,118,.9), 0 0 28px #ffd34a!important; z-index:14; animation:scatterPulse .55s ease-in-out infinite alternate;}
@keyframes scatterPulse{to{filter:brightness(1.35); transform:scale(1.015)}}
.controls button.autoOn{background:linear-gradient(#0d8f42,#064a22)!important;color:#fff7aa!important;box-shadow:0 0 18px rgba(118,255,172,.45),0 5px 0 #10051f!important;}


/* v1.5: Feature + Special Bets modal screens */
.modal{position:absolute;inset:0;z-index:95;display:none;align-items:center;justify-content:center;background:rgba(6,1,14,.68);backdrop-filter:blur(2px)}
.modal.show{display:flex;animation:modalFade .16s ease-out both}@keyframes modalFade{from{opacity:0}to{opacity:1}}
.modalCard{position:relative;width:86%;max-height:78%;overflow:auto;border:4px solid #e7bc57;border-radius:24px;background:radial-gradient(circle at 50% 0%,rgba(134,76,255,.34),rgba(24,7,50,.98) 45%,rgba(10,3,24,.99));box-shadow:0 0 38px rgba(255,219,108,.48),inset 0 0 24px rgba(255,228,118,.18);padding:24px 18px;color:#fff}
.modalClose{position:absolute;right:14px;top:12px;width:38px;height:38px;border-radius:50%;border:2px solid #ffe476;background:#2b0d4b;color:white;font-size:27px;font-weight:1000;line-height:30px}
.modalTitle{text-align:center;color:#ffe476;font-size:min(7vw,44px);font-weight:1000;text-shadow:0 3px 0 #4b1a00,0 0 14px #ba6eff;margin:8px 40px 18px}
.featureCard,.specialCard,.infoCard{border:2px solid rgba(255,228,118,.85);border-radius:18px;background:rgba(20,6,40,.76);padding:14px;margin:12px 0;box-shadow:inset 0 0 18px rgba(255,228,118,.10)}
.featureCard h3,.specialCard h3,.infoCard h3{margin:0 0 8px;color:#fff2aa;font-size:min(5.2vw,32px)}
.featureCard p,.specialCard p,.infoCard p{margin:6px 0;color:#dfd4ff;font-size:min(3.8vw,23px);line-height:1.25}.priceLine{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-weight:1000;color:#fff}.buyBtn,.toggleBtn{height:44px;min-width:112px;border:2px solid #ffe476;border-radius:14px;background:linear-gradient(#119548,#065420);color:#fff7b0;font-weight:1000;font-size:min(4.2vw,24px)}.toggleBtn.on{background:linear-gradient(#ffd34a,#b66e00);color:#2b0b00}.tagRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.tag{border:1.5px solid #ffe476;border-radius:999px;padding:5px 10px;color:#ffe476;background:rgba(255,228,118,.08);font-weight:900;font-size:min(3.2vw,18px)}
.betPreview{margin:16px 0 2px;text-align:center;border:2px solid #7dffad;border-radius:14px;background:rgba(6,84,32,.32);padding:10px;color:#d5ffdf;font-weight:1000;font-size:min(4.5vw,28px)}

/* v1.6: sound speaker button */
.soundBtn{
  position:absolute;
  left:4%;
  top:2.4%;
  z-index:20;
  width:44px;
  height:44px;
  border-radius:12px;
  border:2px solid #f0c45f;
  background:rgba(19,7,36,.75);
  color:#ffe79b;
  font-size:23px;
  font-weight:900;
  box-shadow:0 0 12px rgba(255,220,110,.25);
}
.soundBtn:active{transform:scale(.96)}

.moneyValue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;font-weight:1000;font-size:min(5.8vw,38px);color:#fff7b4;text-shadow:0 3px 0 #7a3000,0 0 8px #000,0 0 10px #ffd34a;pointer-events:none;}