body {
  padding: 0;
  margin: 0;
  font-family: arial;
    background: rgba(200,204,211,1)
}
h1, h2, h3, h4, h5, h6 {
  margin: 0 auto;
    text-align: center;
    line-height: 120%;
}
ul, li {

}

#terms {
    position: fixed;
    bottom: 0;    
    left: 0;
    width: 100%;
    text-align: center;
    font-family: Arial;
    font-size: 11px;
    color: #797979;
    text-transform: uppercase;
    font-family: Roboto;
    padding-bottom: 2.4vw;
    transition: .1s linear all;
}

    #terms.on {
      position: relative;
      margin-top: 16vw;

    }

#terms u {
    cursor: pointer;
} 
#terms a {
    color:#797979;
    display: block;
    margin-top: 1em;
}

#main-wrapper {
  position: relative;
  margin: auto;
}
#main-wrapper * {
  box-sizing: border-box;
}

.contents {
    width: 94.6vw;
    max-width: 480px;
    margin:auto;
    box-sizing: border-box;
    z-index: 99999 /* level 2 */
}
#header {
      margin-top: 2.4vw;
  
}
#header .contents{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 100%), #000000;
    border-radius: 5px;
    height: 28vw;
    font-size: 5.6vw;
    padding:6px 5px;
}


#header .contents h1{
    display: flex;
    flex-direction: column;
    justify-content:center;
    height: 100%;
    font-size:7.36vw;
    border: 2.5px dotted #FFD04C;
    color:  #FFD04C;
    border-radius: 4px;
    
}

#header .contents span {
    align-self: center;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    color: inherit;
    font-size: inherit;
}

#main-body {
    margin: 2.4vw auto;
}
#main-body .contents {
    background: #000000;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    padding: 5px;
}

#main-body .contents:before {
    content:"";
    position: absolute;
    width: 0;
    height: 0;
    border-left:15px solid #000000;
    border-right: 15px solid transparent;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    z-index: 9999999;   
    left: -5px;
    top: 50%;
    margin-top: -15px;
}

#main-body .contents:after {
    content:"";
    position: absolute;
    width: 0;
    height: 0;
    border-right:15px solid #000000;
    border-left: 15px solid transparent;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    z-index: 9999999;   
    right: -5px;
    top: 50%;
    margin-top: -15px;
}

#main-body .contents #slot-machine-wrapper {
    background: #ffffff;
    height:57.33vw;
    position: relative;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}




#main-body .contents #slot-machine-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 50%;
    border-bottom: 2px dotted #000000;
    z-index: 9999;
}
#main-body .contents #slot-machine-wrapper:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 51.04%, rgba(0, 0, 0, 0.4) 100%);
}

#main-body .contents #slot-machine-wrapper .slot-column{
    width: 30vw;
    height: 57.33vw;
    overflow: hidden;
    position: relative;
    box-sizing: content-box;
}

/* #main-body .contents #slot-machine-wrapper .slot-column#col2{
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
} 
*/

#main-body .contents #slot-machine-wrapper .divider{
    position: absolute;
    height: 100%;
    width: 32vw;
    left: 50%;
    margin-left: -16vw;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
} 



#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes {
    width: 100%;
    position: relative;
    transform-origin: 0% 50%;
        animation: spin linear .3s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;    
    animation-direction: alternate;
    filter: blur(0);
    animation-play-state:paused;

}

#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes.spin {
     filter: blur(5px);
    animation-play-state:running;
}

/* #main-body .contents #slot-machine-wrapper .slot-column .slot-boxes.stop {
    animation: palse ease-out 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;    
    animation-direction: alternate;
} */
#main-body .contents #slot-machine-wrapper.win .slot-column .slot-boxes{
    animation: none;
}

#main-body .contents #slot-machine-wrapper .slot-column.shake {
    animation: shake .35s linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state:running;
}
#main-body .contents #slot-machine-wrapper.win .slot-column#col1 .slot-boxes{
    /* top: -38vw; */
    transform: translateY(-38vw);
}

#main-body .contents #slot-machine-wrapper.win .slot-column#col2 .slot-boxes{
   /* top: -112vw; */
    transform: translateY(-112vw);
}
#main-body .contents #slot-machine-wrapper.win .slot-column#col3 .slot-boxes{
   /*  top: -59vw; */
    transform: translateY(-59vw);
}
#main-body .contents #slot-machine-wrapper .slot-column#col1 .slot-boxes.spin {
    animation-delay: .05s;
}

#main-body .contents #slot-machine-wrapper .slot-column#col3 .slot-boxes.spin {
    animation-delay: .1s;
}



#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div {
    width: 100%;
    height: 16.8vw;
    background-position: center center;
    background-size:contain;
    background-repeat: no-repeat;
    margin-bottom: 4vw;
}


#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="1"]{
    background-image:url("icon-apple.png");
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="2"]{
    background-image:url("icon-orange.png");
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="3"]{
    background-image:url("icon-grapes.png");
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="4"]{
    background-image:url("icon-star.png");
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="5"]{
    background-image:url("icon-1000.png");
    height: 8vw;
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="6"]{
    background-image:url("icon-horseshoe.png");
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="7"]{
    background-image:url("icon-cherries.png");
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="8"]{
    background-image:url("icon-100.png");
    height: 8vw;
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="9"]{
    background-image:url("icon-ruby.png");
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="10"]{
    background-image:url("icon-lemon.png");
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="11"]{
    background-image:url("icon-bell.png");
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="12"]{
    background-image:url("icon-750.png");
    height: 8vw;
}


/* END SLOT MACHINE */

.emoji {
    font-size:1.2em;
    
}


.sbtn {
    height: 19.2vw;
    line-height: 19.2vw;
    text-align: center;
    font-size:9.6vw;
    color: #ffffff;
    font-weight: bold;
    background: #C1272D;
    border-radius:20vw;
    cursor: pointer;
}

.sbtn.deactive {
    background: #939393;

}

/* LIGHT BOX */
#lb-wrapper {
    position: fixed;
    width: 94.4vw;
    box-sizing: border-box;
    padding: 12vw 8vw;
    top: 4vw;
    left:2.8vw;
    border-radius: 5px;
    z-index: 99999999;
    background: #ffffff;
    box-shadow: 0px 3px 8px 0px rgb(0 0 0 / 15%);
    color: #525252;
    font-size: 4vw;
    text-align: left;
    display:none;
}

#lb-wrapper.on {
    display: block;
    animation: bounceIn .75s linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

#lb-wrapper h3 {
    font-size: 4.8vw;
    line-height: 135%;
    text-align: center;
    font-weight: normal;
}

#lb-wrapper h3 b {
    color: #C1272D;
}
#lb-wrapper ol {
    font-size: inherit;
    padding-left: 1em;
    line-height: 190%;
}

#lb-wrapper > b {
    color: #37B34A;
}

.sbtn#subbtn {
    margin: 6.4vw auto 0;
    font-size: 7.47vw;
}

@keyframes spin {
    0% {
        transform: translateY(0)
    }
    
    100% {
        transform: translateY(-170vw)
    }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
  }

  
  20%, 40%, 60%, 80%  {
    -webkit-transform: translate3d(0, 8px, 0);
    transform: translate3d(0, 8px, 0);
  }
}

@media all and (min-width:800px) {
    
    #header {
           margin-top: 10px;

    }
    
    
#header .contents{
    height: 120px;
    padding:6px 5px;
}


#header .contents h1{
    height: 100%;
    font-size:30px;
    border: 2.5px dotted #FFD04C;
    border-radius: 4px;
    
}

#main-body {
    margin: 10px auto;
}


#main-body .contents:before {
    content:"";
    left: 0px;

}

#main-body .contents:after {
    right:0px;

}

#main-body .contents #slot-machine-wrapper {
    height:300px;
}
    
    #main-body .contents #slot-machine-wrapper .divider {
        width: 160px;
        margin-left: -80px;
    }

#main-body .contents #slot-machine-wrapper .slot-column{
    width: 160px;
    height: 300px;
}

#main-body .contents #slot-machine-wrapper.win .slot-column .slot-boxes{
    animation: none;
}

#main-body .contents #slot-machine-wrapper.win .slot-column#col1 .slot-boxes{
    /* top: -38vw; */
    transform: translateY(-202px);
}

#main-body .contents #slot-machine-wrapper.win .slot-column#col2 .slot-boxes{
   /* top: -112vw; */
    transform: translateY(-608px);
}
#main-body .contents #slot-machine-wrapper.win .slot-column#col3 .slot-boxes{
   /*  top: -59vw; */
    transform: translateY(-312px);
}
    
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes {
        animation: spin2 linear .2s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;    
        animation-direction: alternate;
        filter: blur(0);
        animation-play-state:paused;

}

#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div {
    width: 100%;
    height: 80px;
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 30px;
}
    
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="5"],#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="8"],#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div[data-icon="12"]{
    height: 45px;
    }


    .sbtn {
    height: 80px;
    line-height: 80px;
    font-size:36px;
    padding:0 35px ;
    border-radius:60px;
    margin-bottom: 10px;
        cursor: pointer;
    }
    
    #terms {
        position: fixed;
        bottom: 20px;
        padding-bottom: 0;
        font-size: 16px;
    }
    
    /* LIGHT BOX */
#lb-wrapper {
    width: 440px;
    padding: 45px 30px;
    top: 10px;
    left:50%;
    margin-left:-220px;
    border-radius: 5px;
    font-size: 18px;
}

#lb-wrapper h3 {
    font-size: 22px;
}


.sbtn#subbtn {
    margin: 24px auto 0;
    font-size: 30px;
}

    
}

@keyframes spin2 {
    0% {
        transform: translateY(0)
    }
    
    100% {
        transform: translateY(-680px)
    }
}

/* ===== 2026 Premium Mobile Optimization Override ===== */
:root{
  --bg1:#070912;
  --bg2:#121827;
  --gold:#ffd36b;
  --gold2:#ffb423;
  --red:#f02d3a;
  --red2:#b90e1c;
  --green:#39d98a;
  --text:#ffffff;
  --muted:#aeb7c7;
}
html, body { min-height:100%; }
body {
  padding: 0;
  margin: 0;
  font-family: Poppins, Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,211,107,.22), transparent 34%),
    radial-gradient(circle at 15% 22%, rgba(240,45,58,.14), transparent 28%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%) !important;
  color: var(--text);
}
html {
  overflow-x: hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.45;
}
#main-wrapper {
  min-height: calc(100vh - 44px);
  padding: max(10px, env(safe-area-inset-top)) 0 12px;
}
.contents {
  width: min(94vw, 480px);
}
.top-badge,
.live-strip{
  width:min(94vw,480px);
  margin:0 auto 8px;
  box-sizing:border-box;
  border-radius:999px;
  text-align:center;
  font-family:Poppins,Arial,sans-serif;
}
.top-badge{
  padding:8px 12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  color:#f6f8ff;
  font-size:clamp(12px,3.2vw,14px);
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 10px 30px rgba(0,0,0,.24);
}
.live-strip{
  padding:8px 12px;
  background:rgba(57,217,138,.11);
  border:1px solid rgba(57,217,138,.26);
  color:#dfffee;
  font-size:clamp(11px,3vw,13px);
}
.pulse-dot{
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 rgba(57,217,138,.65);
  animation:pulseLive 1.4s infinite;
}
#header {
  margin-top: 8px;
}
#header .contents{
  height:auto;
  min-height:112px;
  padding:6px;
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(255,211,107,.18), rgba(255,255,255,.03) 38%, rgba(240,45,58,.14)),
    #07080d;
  border:1px solid rgba(255,211,107,.38);
  box-shadow:0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
}
#header .contents h1{
  min-height:96px;
  height:100%;
  border:2px dashed rgba(255,211,107,.9);
  border-radius:14px;
  color:var(--gold);
  font-size:clamp(28px,7.4vw,38px);
  line-height:1.05;
  text-shadow:0 3px 0 rgba(0,0,0,.5), 0 0 22px rgba(255,179,35,.25);
  letter-spacing:-.8px;
}
#header .contents h1 small{
  display:block;
  color:#ffffff;
  font-size:clamp(11px,3.2vw,14px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:1.7px;
  margin-bottom:8px;
  opacity:.9;
}
#main-body {
  margin: 10px auto 12px;
}
#main-body .contents {
  border-radius:22px;
  padding:8px;
  background:
    linear-gradient(145deg, rgba(255,211,107,.95), rgba(132,82,11,.95) 52%, rgba(255,211,107,.7));
  box-shadow:0 20px 55px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08) inset;
}
#main-body .contents:before,
#main-body .contents:after{
  border-left-color:#ffd36b;
  border-right-color:#ffd36b;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
#main-body .contents #slot-machine-wrapper {
  height:min(57.33vw,292px);
  border-radius:17px;
  background:
    linear-gradient(180deg, #fbfbff 0%, #dbdee6 50%, #f7f8fb 100%);
  overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.68), inset 0 20px 50px rgba(0,0,0,.16);
}
#main-body .contents #slot-machine-wrapper:before {
  border-bottom:2px dashed rgba(0,0,0,.62);
}
#main-body .contents #slot-machine-wrapper:after{
  background:
    linear-gradient(180deg, rgba(0,0,0,.32) 0%, transparent 32%, transparent 66%, rgba(0,0,0,.32) 100%),
    radial-gradient(circle at 50% 50%, transparent 44%, rgba(255,255,255,.18) 45%, transparent 48%);
}
#main-body .contents #slot-machine-wrapper .divider{
  border-left:3px solid rgba(0,0,0,.75);
  border-right:3px solid rgba(0,0,0,.75);
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes.spin {
  filter: blur(6px) saturate(1.25);
}
#main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div {
  filter: drop-shadow(0 8px 7px rgba(0,0,0,.22)) saturate(1.12) contrast(1.05);
  transform:scale(.92);
}
.helper-text{
  color:#d8deea;
  font-size:clamp(12px,3.4vw,14px);
  text-align:center;
  margin:0 auto 7px;
  font-weight:600;
}
.sbtn {
  height:clamp(64px,17vw,78px);
  line-height:clamp(64px,17vw,78px);
  font-family:Poppins,Arial,sans-serif;
  font-size:clamp(30px,8.7vw,38px);
  letter-spacing:.5px;
  border-radius:999px;
  background:
    linear-gradient(180deg, #ff4a55 0%, var(--red) 48%, var(--red2) 100%) !important;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 16px 35px rgba(240,45,58,.34), inset 0 2px 0 rgba(255,255,255,.28);
  text-shadow:0 2px 0 rgba(0,0,0,.26);
  position:relative;
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  animation:buttonPulse 1.85s infinite;
}
.sbtn:before{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:55%;
  height:100%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation:shine 2.4s infinite;
}
.sbtn.deactive{
  background:linear-gradient(180deg,#8b93a5,#5d6370) !important;
  box-shadow:none;
  animation:none;
}
#lb-wrapper {
  position: fixed;
  width: min(92vw, 430px);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: max(18px, env(safe-area-inset-top));
  padding: 30px 22px 24px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,211,107,.22), transparent 38%),
    linear-gradient(180deg,#121827,#080b13);
  border: 1px solid rgba(255,211,107,.36);
  color: #eef3ff;
  box-shadow: 0 25px 80px rgba(0,0,0,.62);
  font-family: Poppins, Arial, sans-serif;
  box-sizing: border-box;
  max-height: calc(100vh - max(18px, env(safe-area-inset-top)) - 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#lb-wrapper h3 {
  font-size:clamp(21px,5.3vw,27px);
  font-weight:800;
}
#lb-wrapper h3 b { color:var(--gold); }
#lb-wrapper ol{
  padding-left:22px;
  color:#cfd7e8;
  line-height:1.6;
}
#lb-wrapper > b { color:var(--green); }
.sbtn#subbtn {
  height:62px;
  line-height:62px;
  font-size:clamp(21px,6vw,28px);
  margin-top:20px;
}
#terms {
  position:relative;
  margin:16px auto 8px;
  padding:0 12px max(8px, env(safe-area-inset-bottom));
  color:rgba(224,229,240,.62);
  font-size:10px;
  line-height:1.45;
}
#terms a { color:rgba(224,229,240,.62); }
#blk_mask{
  background:rgba(2,4,9,.78);
  backdrop-filter:blur(4px);
}
@keyframes pulseLive{
  0%{box-shadow:0 0 0 0 rgba(57,217,138,.65)}
  70%{box-shadow:0 0 0 8px rgba(57,217,138,0)}
  100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}
}
@keyframes buttonPulse{
  0%,100%{transform:translateY(0); box-shadow:0 16px 35px rgba(240,45,58,.34), inset 0 2px 0 rgba(255,255,255,.28);}
  50%{transform:translateY(-1px); box-shadow:0 21px 45px rgba(240,45,58,.48), inset 0 2px 0 rgba(255,255,255,.32);}
}
@keyframes shine{
  0%{left:-75%}
  55%,100%{left:130%}
}
@media all and (min-width:800px) {
  #main-wrapper{ padding-top:14px; }
  #header .contents{ min-height:120px; }
  #header .contents h1{ min-height:104px; font-size:36px; }
  #main-body .contents #slot-machine-wrapper{ height:292px; }
  #main-body .contents #slot-machine-wrapper .slot-column{ height:292px; }
  #main-body .contents #slot-machine-wrapper .slot-column .slot-boxes div{ height:78px; margin-bottom:27px; }
  .sbtn{ height:76px; line-height:76px; font-size:38px; }
}
@media (max-width:360px){
  .top-badge,.live-strip{font-size:11px}
  #header .contents h1{font-size:26px}
  .sbtn{font-size:28px}
}
@media (prefers-reduced-motion: reduce){
  .sbtn, .sbtn:before, .pulse-dot{animation:none}
}