*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%;overflow:hidden;background:#190132}
body{height:100%;overflow:hidden;font-family:'Poppins',sans-serif;color:#fff;-webkit-tap-highlight-color:transparent;user-select:none}

.loader{position:fixed;inset:0;z-index:999;display:flex;justify-content:center;align-items:center;flex-direction:column;background:linear-gradient(180deg,#190132,#710078,#190132)}
.loader.is--loaded{display:none}
.loader__logo{width:min(70%,500px);margin-bottom:5vh}
.loader__logo img{width:100%;height:auto}
.loader__bar{width:min(80%,400px);height:34px;background:rgba(255,255,255,0.15);border-radius:100px;padding:5px;position:relative}
.loader__bar::before{content:'';position:absolute;left:5px;top:5px;border-radius:100px;width:calc(100% - 10px);height:calc(100% - 10px);background:#fff}
.loader__bar-track{position:relative;z-index:2;width:0%;height:100%;border-radius:100px;background:linear-gradient(90deg,#FF0000,#FFB800);transition:width 0.3s}
.loader__text{font-size:16px;margin-top:22px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.5);font-weight:400}

.game{width:100vw;height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden auto;background:center top/cover no-repeat;background-image:url('../images/page-bg-mobile.webp')}
@media(min-width:768px){.game{background-image:url('../images/page-bg.webp')}}

.game__center{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;width:100%;max-width:860px;padding:0 16px;flex-shrink:0}

.logo-block{position:relative;z-index:6;width:clamp(90px,20vw,260px);margin:0 auto}
.logo-block>img{width:100%;height:auto;display:block}
.flare{position:absolute;width:clamp(16px,3.5vw,48px);aspect-ratio:1;opacity:0;animation:showFlare 3s ease-in-out infinite}
.flare.is--1{top:-18px;left:-22px}
.flare.is--2{top:-32px;right:-14px;animation-delay:1s}
.flare.is--3{bottom:-10px;right:-32px;animation-delay:3s}
.flare.is--4{top:0;right:-38px;animation-delay:2s}

#slot{position:relative;z-index:5;width:100%;display:flex;justify-content:center;align-items:center;margin:6px 0}
.slot-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:105%;height:107%;z-index:3;pointer-events:none;background:url('../images/frame.webp')center/contain no-repeat}

#reels{position:relative;z-index:1;width:79vw;height:47.4vw;max-width:870px;max-height:520px;display:flex;gap:6px;padding:12px 10px}
#reels::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:radial-gradient(50% 50% at 50% 50%,#a90191 0%,#1e0033 100%);backdrop-filter:blur(21px);-webkit-backdrop-filter:blur(21px);z-index:-1;border-radius:10px}
#reels.has--5 .reel{width:20%}

.reel{display:flex;flex-direction:column;gap:6px;padding:4px;border-radius:8px;transition:box-shadow 0.3s;background:rgba(0,0,0,0.35);width:33.333%}
.reel.win{box-shadow:0 0 35px rgba(255,215,0,0.5),inset 0 0 18px rgba(255,215,0,0.2);border:2px solid #FFD700;border-radius:8px}

.sym{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0a0014,#150026);border-radius:5px;border:1px solid rgba(255,215,0,0.12);padding:6px;overflow:hidden}
.sym.is--center{border-color:rgba(255,215,0,0.25);box-shadow:0 0 8px rgba(255,215,0,0.08)}
.sym img{width:100%;height:100%;object-fit:contain;display:block}
.sym.spin{animation:flashSlot 0.08s linear infinite}
.sym.stop{transition:transform 0.15s}

.play-wrap{position:relative;z-index:8;display:flex;justify-content:center;margin-top:8px}
.mobile-icons{display:none}
.btn-play{font-family:'Poppins',sans-serif;font-size:clamp(14px,2.2vw,26px);font-weight:800;color:#fff;background:linear-gradient(180deg,#FF4500,#CC0000);border:3px solid #FFD700;border-radius:60px;cursor:pointer;letter-spacing:3px;text-transform:uppercase;padding:clamp(8px,0.8vh,14px)clamp(24px,4vw,55px);min-width:clamp(140px,22vw,300px);box-shadow:0 5px 30px rgba(255,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15);text-shadow:0 2px 4px rgba(0,0,0,0.5);transition:transform 0.2s;position:relative}
.btn-play::before{content:'';position:absolute;inset:4px;border-radius:54px;background:linear-gradient(180deg,rgba(255,255,255,0.12)0%,transparent 60%);pointer-events:none}
.btn-play span{position:relative;z-index:2}
.btn-play:active{transform:translateY(1px)}
.btn-play:disabled{opacity:0.5;cursor:not-allowed;filter:grayscale(0.5);transform:none}
.btn-play.pulse{animation:btnPulse 2s ease-in-out infinite}

.modal{position:fixed;inset:0;z-index:200;display:none;justify-content:center;align-items:center;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px)}
.modal.is--active{display:flex}
.modal__wrap{position:relative;width:92%;max-width:680px;display:flex;flex-direction:column;align-items:center;padding:40px 36px 48px;border-radius:32px;border:3px solid rgba(255,215,0,0.4);background:linear-gradient(180deg,#1a0033,#0d001a);animation:modalPop 0.5s cubic-bezier(0.17,0.67,0.35,1.25)}
.modal__top{position:relative;z-index:2;width:clamp(160px,32vw,280px);margin-bottom:12px}
.modal__top>img{width:100%;height:auto;display:block}
.modal__top .flare{width:clamp(20px,4vw,50px)}
.modal__top .flare.is--1{top:-20px;left:-22px}
.modal__top .flare.is--2{top:-36px;right:-18px}
.modal__top .flare.is--3{bottom:-10px;right:-36px}
.modal__top .flare.is--4{top:2px;right:-42px}
.modal__mid{position:relative;z-index:2;width:100%;padding:24px 0;text-align:center}
.modal__bg{position:absolute;top:50%;left:50%;width:180%;height:180%;transform:translate(-50%,-50%);background:url('../images/modal-bg.webp')center/contain no-repeat;opacity:0.12;mix-blend-mode:screen;animation:rotateModalBg 6s ease-in-out infinite;pointer-events:none}
.modal__title{font-size:clamp(42px,7vw,64px);font-weight:900;text-transform:uppercase;color:#ea7cf9;margin-bottom:12px;text-shadow:0 0 30px rgba(196,77,255,0.4)}
.modal__txt{font-size:clamp(20px,3.2vw,32px);font-weight:700;text-transform:uppercase;color:#d0f;text-shadow:0 0 20px rgba(255,255,255,0.2);line-height:1.4}
.btn-claim{font-family:'Poppins',sans-serif;font-size:clamp(20px,3.2vw,32px);font-weight:800;color:#1a0033;background:linear-gradient(180deg,#FFD700,#FF8C00);border:4px solid #FFF;border-radius:60px;cursor:pointer;letter-spacing:3px;text-transform:uppercase;padding:clamp(14px,2vh,22px)clamp(40px,6vw,70px);min-width:clamp(200px,32vw,360px);box-shadow:0 8px 40px rgba(255,215,0,0.5),inset 0 2px 0 rgba(255,255,255,0.3);transition:transform 0.2s;position:relative;z-index:6;margin-top:14px}
.btn-claim::before{content:'';position:absolute;inset:4px;border-radius:46px;background:linear-gradient(180deg,rgba(255,255,255,0.2)0%,transparent 60%);pointer-events:none}
.btn-claim span{position:relative;z-index:2}
.btn-claim.pulse{animation:btnPulse 2s ease-in-out infinite}

@keyframes showFlare{0%,70%,100%{opacity:0;transform:scale(0)}35%{opacity:1;transform:scale(1)}}
@keyframes btnPulse{0%,100%{transform:scale(0.97)}50%{transform:scale(1.03)}}
@keyframes modalPop{0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes flashSlot{0%{opacity:0.65}50%{opacity:1}100%{opacity:0.65}}
@keyframes movePerson{0%,100%{transform:rotate(-10deg)scale(1.05)}50%{transform:rotate(10deg)scale(0.9)}}
@keyframes scaleUp{0%,100%{transform:scale(0.9)rotate(0deg)}50%{transform:scale(1.05)rotate(5deg)}}
@keyframes scaleDown{0%,100%{transform:scale(1.05)rotate(5deg)}50%{transform:scale(0.9)rotate(0deg)}}
@keyframes rotateModalBg{0%,100%{transform:translate(-50%,-50%)rotate(0deg)}50%{transform:translate(-50%,-50%)rotate(-30deg)}}
@keyframes flipWin{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
.sym.win360{animation:flipWin 0.8s ease-in-out 1!important;border-color:#FFD700!important;box-shadow:0 0 20px rgba(255,215,0,0.6)!important}

@media(max-width:1023px){
  .icons-left,.icons-right{display:none}
  .game{align-items:flex-start!important;justify-content:flex-start!important}

  #reels{width:98vw;height:65vw;max-height:380px;max-width:none;gap:6px;padding:12px 8px}
  .reel{gap:8px;padding:5px}
  .sym{padding:clamp(10px,2vw,18px);border-radius:6px}
  .slot-frame{background-image:url('../images/frame-mobile.webp');background-size:100%;width:100%;height:102%}
  .side-l{display:none}
  .side-r{display:none!important}

  .game__center{padding-top:5vh!important;justify-content:flex-start!important}
  .logo-block{width:clamp(140px,35vw,260px)!important;margin:0 auto 0!important;display:block!important}

  .play-wrap{margin-top:clamp(8px,1.5vh,16px)!important}
  .btn-play{font-size:clamp(22px,5.5vw,40px)!important;padding:clamp(16px,2.5vh,24px)clamp(45px,9vw,80px)!important;min-width:clamp(260px,55vw,420px)!important;border-width:4px!important}

  .mobile-icons{display:block!important;position:relative;width:100%;height:clamp(120px,25vh,200px);margin-top:0;overflow:visible!important}
  .mobile-icons img{position:absolute;width:clamp(100px,25vw,250px);height:auto;filter:drop-shadow(0 0 6px rgba(255,215,0,0.3))}
  .mobile-icons img:nth-child(1){top:0;left:2%;--base-transform:rotate(-12deg);animation:mobFloat 3s ease-in-out infinite 0s}
  .mobile-icons img:nth-child(2){top:10%;left:28%;--base-transform:rotate(8deg) scaleX(-1);animation:mobFloat 3s ease-in-out infinite .3s}
  .mobile-icons img:nth-child(3){top:20%;left:55%;--base-transform:rotate(20deg);animation:mobFloat 3s ease-in-out infinite .6s}
  .mobile-icons img:nth-child(4){top:5%;left:65%;--base-transform:rotate(-25deg) scaleX(-1);animation:mobFloat 3s ease-in-out infinite .9s}
  .mobile-icons img:nth-child(5){top:30%;left:10%;--base-transform:rotate(15deg);animation:mobFloat 3s ease-in-out infinite 1.2s;width:clamp(125px,30vw,300px)}
  .mobile-icons img:nth-child(6){top:35%;left:42%;--base-transform:rotate(-8deg) scaleX(-1);animation:mobFloat 3s ease-in-out infinite 1.5s}
  .mobile-icons img:nth-child(7){top:45%;left:0;--base-transform:rotate(30deg);animation:mobFloat 3s ease-in-out infinite .2s}
  .mobile-icons img:nth-child(8){top:8%;left:46%;--base-transform:rotate(-35deg) scaleX(-1);animation:mobFloat 3s ease-in-out infinite .4s;width:clamp(88px,20vw,200px)}
}
@media(max-width:820px){
  .mobile-icons{height:clamp(300px,70vw,450px)!important}
  .mobile-icons img{width:clamp(110px,22vw,220px)!important}
  .mobile-icons img:nth-child(5){width:clamp(140px,28vw,280px)!important}
  .mobile-icons img:nth-child(8){width:clamp(100px,20vw,200px)!important}
}
@media(max-width:480px){
  #reels{width:92vw;height:92vw;padding:4px 3px;gap:2px}
  .side-r{height:clamp(35px,10vh,100px);bottom:clamp(15px,5vh,40px)}
}
@media(max-width:767px){
  .game__center{padding-top:3vh!important}
  .logo-block{margin-top:0!important}
  .mobile-icons{height:clamp(120px,25vh,200px)!important}
  .mobile-icons img{width:clamp(100px,25vw,250px)!important}
  .mobile-icons img:nth-child(5){width:clamp(125px,30vw,300px)!important}
  .mobile-icons img:nth-child(8){width:clamp(88px,20vw,200px)!important}
}
@media(max-height:650px){
  .game__center{justify-content:flex-start!important;padding-top:2vh!important}
  .logo-block{width:clamp(160px,40vw,300px)!important;display:block!important}
  .btn-play{font-size:clamp(16px,3.5vw,28px);padding:clamp(12px,2vh,18px)clamp(30px,6vw,55px);min-width:clamp(160px,35vw,300px)}
}

@keyframes mobFloat{0%,100%{transform:var(--base-transform) scale(0.95)}50%{transform:var(--base-transform) scale(1.05) translateY(-4px)}}

/* ===== OUTER ICONS — CLEAN NO-OVERLAP LAYOUT WITH ANIMATION ===== */

@media (min-width:1024px) {
  .icons-left,
  .icons-right {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  .icons-left .ia,
  .icons-right .ia {
    position: fixed !important;
    width: clamp(100px, 20vw, 320px) !important;
    height: auto !important;
    display: block !important;
    pointer-events: none !important;
    transform-origin: 50% 50% !important;
    animation: outerIconFloat 4.5s ease-in-out infinite !important;
    filter:
      drop-shadow(0 0 12px rgba(255, 215, 0, .55))
      drop-shadow(0 0 20px rgba(255, 80, 0, .32)) !important;
  }

  .icons-left .ia img,
  .icons-right .ia img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* i5 and i7 hidden */
  .icons-left .i5,
  .icons-left .i7,
  .icons-right .i5,
  .icons-right .i7 {
    display: none !important;
  }

  /* LEFT SIDE */

  .icons-left .i1 {
    top: -3vh !important;
    left: calc(50% - 920px) !important;
    right: auto !important;
    --base-transform: rotate(-9deg);
    z-index: 4 !important;
    animation-delay: 0s !important;
  }

  .icons-left .i2 {
    top: 31vh !important;
    left: calc(50% - 620px) !important;
    right: auto !important;
    --base-transform: rotate(-7deg);
    z-index: 1 !important;
    opacity: .88 !important;
    animation-delay: .6s !important;
  }

  .icons-left .i3 {
    top: 50vh !important;
    left: calc(50% - 710px) !important;
    right: auto !important;
    --base-transform: rotate(13deg);
    z-index: 4 !important;
    animation-delay: 1.1s !important;
  }

  .icons-left .i4 {
    top: -4vh !important;
    left: calc(50% - 660px) !important;
    right: auto !important;
    --base-transform: rotate(-23deg);
    z-index: 4 !important;
    animation-delay: .35s !important;
  }

  .icons-left .i6 {
    top: 50vh !important;
    left: calc(50% - 1040px) !important;
    right: auto !important;
    --base-transform: rotate(-15deg);
    z-index: 4 !important;
    animation-delay: 1.45s !important;
  }

  .icons-left .i8 {
    top: 24vh !important;
    left: calc(50% - 930px) !important;
    right: auto !important;
    --base-transform: rotate(-13deg);
    z-index: 4 !important;
    animation-delay: .9s !important;
  }

  .icons-left .i9 {
    top: 24vh !important;
    left: calc(50% - 725px) !important;
    right: auto !important;
    --base-transform: rotate(-12deg);
    z-index: 4 !important;
    animation-delay: 1.25s !important;
  }

  /* RIGHT SIDE — MIRRORED */

  .icons-right .i1 {
    top: -3vh !important;
    right: calc(50% - 920px) !important;
    left: auto !important;
    --base-transform: scaleX(-1) rotate(-9deg);
    z-index: 4 !important;
    animation-delay: .15s !important;
  }

  .icons-right .i2 {
    top: 31vh !important;
    right: calc(50% - 620px) !important;
    left: auto !important;
    --base-transform: scaleX(-1) rotate(-7deg);
    z-index: 1 !important;
    opacity: .88 !important;
    animation-delay: .75s !important;
  }

  .icons-right .i3 {
    top: 50vh !important;
    right: calc(50% - 710px) !important;
    left: auto !important;
    --base-transform: scaleX(-1) rotate(13deg);
    z-index: 4 !important;
    animation-delay: 1.25s !important;
  }

  .icons-right .i4 {
    top: -4vh !important;
    right: calc(50% - 660px) !important;
    left: auto !important;
    --base-transform: scaleX(-1) rotate(-23deg);
    z-index: 4 !important;
    animation-delay: .5s !important;
  }

  .icons-right .i6 {
    top: 50vh !important;
    right: calc(50% - 1040px) !important;
    left: auto !important;
    --base-transform: scaleX(-1) rotate(-15deg);
    z-index: 4 !important;
    animation-delay: 1.6s !important;
  }

  .icons-right .i8 {
    top: 24vh !important;
    right: calc(50% - 930px) !important;
    left: auto !important;
    --base-transform: scaleX(-1) rotate(-13deg);
    z-index: 4 !important;
    animation-delay: 1.05s !important;
  }

  .icons-right .i9 {
    top: 24vh !important;
    right: calc(50% - 725px) !important;
    left: auto !important;
    --base-transform: scaleX(-1) rotate(-12deg);
    z-index: 4 !important;
    animation-delay: 1.4s !important;
  }

  /* Joker heads */
  .side-l,
  .side-r {
    position: fixed !important;
    height: clamp(80px, 28vh, 300px) !important;
    bottom: 1.5vh !important;
    z-index: 4 !important;
    pointer-events: none !important;
  }

  .side-l {
    left: calc(50% - 900px) !important;
    transform: none !important;
  }

  .side-r {
    right: calc(50% - 900px) !important;
    left: auto !important;
    transform: scaleX(-1) !important;
  }

  .side-p {
    height: 100% !important;
    width: auto !important;
    animation: jokerFloat 5.5s ease-in-out infinite !important;
    filter:
      drop-shadow(0 0 13px rgba(255, 215, 0, .68))
      drop-shadow(0 0 23px rgba(255, 60, 0, .45)) !important;
  }

  .side-r .side-p {
    animation-delay: 2.7s !important;
  }
}

/* Medium desktop correction */
@media (min-width:1024px) and (max-width:1450px) {
  .icons-left .i1 { left: calc(50% - 680px) !important; }
  .icons-left .i2 { left: calc(50% - 470px) !important; }
  .icons-left .i3 { left: calc(50% - 515px) !important; }
  .icons-left .i4 { left: calc(50% - 510px) !important; }
  .icons-left .i6 { left: calc(50% - 760px) !important; }
  .icons-left .i8 { left: calc(50% - 690px) !important; }
  .icons-left .i9 { left: calc(50% - 535px) !important; }
  .side-l { left: calc(50% - 690px) !important; }

  .icons-right .i1 { right: calc(50% - 680px) !important; }
  .icons-right .i2 { right: calc(50% - 470px) !important; }
  .icons-right .i3 { right: calc(50% - 515px) !important; }
  .icons-right .i4 { right: calc(50% - 510px) !important; }
  .icons-right .i6 { right: calc(50% - 760px) !important; }
  .icons-right .i8 { right: calc(50% - 690px) !important; }
  .icons-right .i9 { right: calc(50% - 535px) !important; }
  .side-r { right: calc(50% - 690px) !important; }
}

/* Animation that preserves each icon's own rotate / mirror transform */
@keyframes outerIconFloat {
  0%, 100% {
    transform: var(--base-transform) scale(.96);
  }
  50% {
    transform: var(--base-transform) scale(1.04) translateY(-8px);
  }
}

@keyframes jokerFloat {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}