@font-face {
    font-family: "Peyda";
    src: url("Fonts/PeydaWeb-SemiBold.woff2") format('woff2'),
         url('Fonts/PeydaWeb-SemiBold.woff') format('woff'),
         url("Fonts/Peyda-SemiBold.ttf") format('truetype');
}
* {
            font-family: Peyda, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
}
body {
     background-image: url("Images/back.png");
     background-repeat:no-repeat;
     background-size:cover;
     background-position:center;
     color: white;
     height:100vh;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
 }
#code{
    flex-direction: column;
}
.rules{
    width: 83vw;
    height: 77vh;
    background-color: rgba(255,255,255,0.26);
    display: flex;
    flex-direction: column;
    padding: 2vh 4vw;
    direction: rtl;
    font-size: 4.369vw;
    align-items: center;
    border-radius: 7.039vw;
    text-align: justify;
}
.logo_img_r{
    width: 19.76vw;
}
.rule_title{
    margin-top: 2.427vw;
    font-size: 6.068vw;
    -webkit-text-stroke: 0.049vw white;
    letter-spacing: 0.243vw;
}
.rule_text{
    margin-top: 2.427vw;
    color: #C3C3C3;
    line-height: 2;
    max-width: 26ch;
    overflow-y: auto;
    scrollbar-width: none;
}
.rule_list{
    list-style-position: inside;
    list-style-type: persian;
    text-align: justify;
}
.instagram_id{
    color: #0095f6;
    font-weight: lighter;
}
.accept_rules{
    margin-top: 4.126vw;
    display: flex;
    justify-content: center;
    gap: 1.942vw;
}
#accept{
    margin-bottom: 0;
    width: 3.155vw;
    height: 6.068vw;
}
.accept_button:disabled{
    background-color: gray;
}
.accept_button{
    margin-top: 4.126vw;
    width: 48.544vw;
    border: none;
    border-radius: 2.427vw;
    padding: 1.942vw 0;
    font-size: 4.854vw;
    background-color: #FF9500;
    color: white;
    -webkit-text-stroke: 0.049vw white;
    letter-spacing: 0.243vw;
}
.page_container{
     display: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
#remaining_container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#win_container{
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6.068vw;
}
.winner{
    color: #FF9500;
    -webkit-text-stroke: 0.243vw #FF9500;
    font-size: 18.447vw;
    text-shadow: 0 0 1.699vw #FFA600;
}
.reward{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.427vw;
    font-size: 11.165vw;
    color: #FF9500;
    -webkit-text-stroke: 0.243vw #FF9500;
    text-shadow: 0 0 1.699vw #FFA600;
}
.remaining{
    font-size: 7.282vw;
}
.count{
    display: flex;
    color: #FF9500;
    -webkit-text-stroke: 0.243vw #FF9500;
    text-shadow: 0 0 1.942vw #FFA600;
    font-size: 18.447vw;
    gap: 1.214vw;
}
.main_container{
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5.918vh;
    gap: 5.922vw;
}
 .dice-container {
     display: flex;
     gap: 10.922vw;
     margin: 4.854vw;
 }
 .dice-container.hide{
     opacity: 0;
 }
 .dice {
     display: flex;
     position: relative;
     width: 25.584vw;
     height: 25.584vw;
     transform-style: preserve-3d;
     transform: rotateX(0deg) rotateY(0deg);
     transition: transform 0.35s ease-in-out;
     border-radius: 6.796vw;
 }
 ._face{
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 25.584vw;
     height: 25.584vw;
     border-radius: 6.796vw;
     background: linear-gradient(280deg, rgba(226,226,226,1) 0%, rgba(61,61,61,1) 100%);
     backface-visibility: hidden;
     gap: 0;
 }
 .face {
     position: absolute;
     width: 24.214vw;
     height: 23.971vw;
     background: linear-gradient(225deg, rgba(130,130,130,1) 0%, rgba(214,214,214,1) 100%);
     border-radius: 11.408vw;
     display: flex;
     align-items: center;
     justify-content: center;
     backdrop-filter: blur(0.485vw);
     perspective: 72.816vw;
 }
 ._face:nth-child(1) { transform: rotateY(0deg) translateZ(11.136vw); } /* Front */
 ._face:nth-child(2) { transform: rotateY(180deg) translateZ(11.136vw); } /* Back */
 ._face:nth-child(3) { transform: rotateX(90deg) translateZ(11.136vw); } /* Top */
 ._face:nth-child(4) { transform: rotateX(-90deg) translateZ(11.136vw); } /* Bottom */
 ._face:nth-child(5) { transform: rotateY(90deg) translateZ(11.136vw); } /* Right */
 ._face:nth-child(6) { transform: rotateY(-90deg) translateZ(11.136vw); } /* Left */
 .roll-btn{
     background-color: #FF9500;
     margin-top: 3.279vh;
     width:65.68vw;
     height: 16.99vw;
     border-radius: 6.068vw;
     color: white;
     font-size: 7.282vw;
     border: none;
     box-shadow: 0 0 4.854vw #FFA600;
     -webkit-text-stroke: 0.243vw white;
     letter-spacing: 0.243vw;
     backdrop-filter: blur(8.738vw);
}
 #btn_reroll{
    background-color: #FF9500;
     width: 68.816vw;
    padding: 0 4.854vw;
    height: 16.99vw;
    margin-top: 3.279vh;
    border-radius: 6.068vw;
    color: white;
    font-size: 6.282vw;
    -webkit-text-stroke: 0.243vw white;
    text-align: center;
    border: none;
    box-shadow: 0 0 4.854vw #FFA600;
    letter-spacing: 0.243vw;
 }
 #claim_reward{
     background-color: #FF9500;
    width: 77.184vw;
    height: 16.99vw;
    margin-top: 3.279vh;
    border-radius: 6.068vw;
    color: white;
    font-size: 7.282vw;
    text-align: center;
    border: none;
    box-shadow: 0 0 4.854vw #FFA600;
     -webkit-text-stroke: 0.243vw white;
     letter-spacing: 0.243vw;
 }
 .dots {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 5.125vw;
     height: 5.125vw;
     background: linear-gradient(315deg, rgba(91,91,91,1) 0%, rgba(0,0,0,1) 100%);
     border-radius: 50%;
     box-shadow: -0.243vw -0.243vw 0.485vw rgba(70,70,70,0.54);
 }
  ._dots {
     width: 4.069vw;
     height: 4.069vw;
     background: linear-gradient(315deg, rgba(0,0,0,1) 0%, rgba(91,91,91,1) 100%);
     border-radius: 50%;
 }
 .dot-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.214vw;
     border-radius: 14%;
     width: 80%;
     height: 80%;
     justify-items: center;
     align-items: center;
 }
 .dot-container div {
     visibility: hidden;
 }
 .dot-container ._dots{
     visibility: visible;
 }
 .dot-1 div:nth-child(5){ visibility: visible; }
 .dot-2 div:nth-child(1), .dot-2 div:nth-child(9) { visibility: visible; }
 .dot-3 div:nth-child(1), .dot-3 div:nth-child(5), .dot-3 div:nth-child(9) { visibility: visible; }
 .dot-4 div:nth-child(1), .dot-4 div:nth-child(3), .dot-4 div:nth-child(7), .dot-4 div:nth-child(9) { visibility: visible; }
 .dot-5 div:nth-child(1), .dot-5 div:nth-child(3), .dot-5 div:nth-child(5), .dot-5 div:nth-child(7), .dot-5 div:nth-child(9) { visibility: visible; }
 .dot-6 div:nth-child(1), .dot-6 div:nth-child(3), .dot-6 div:nth-child(4), .dot-6 div:nth-child(6), .dot-6 div:nth-child(7), .dot-6 div:nth-child(9) { visibility: visible; }
 .ph_number{
     display: flex;
    flex-direction: column;
    align-items: center;
    width: 77.67vw;
    height: 81.284vw;
    padding: 4.068vw 6.068vw 4.068vw;
    background-color: rgba(255, 255, 255, 0.26);
    border-radius: 6.068vw;
 }
 .logo_img{
     width: 19.76vw;
     margin-bottom: 4.282vw;
 }
 .input_label{
     font-size: 6.296vw;
     word-spacing: 0.728vw;
     -webkit-text-stroke: 0.024vw white;
     margin-bottom: 3.282vw;
 }
 form{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 input{
     display: block;
     text-align: center;
     margin-bottom: 0.656vh;
     border: none;
     border-radius: 1.214vw;
     padding: 1.942vw;
 }
 .form-button {
     text-align: center;
     padding: 0.485vw;
     border: none;
     border-radius: 2.427vw;
     color: white;
     font-size: 5.825vw;
     background-color: #007BFF;
 }
 .number{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 }
 #phone-number{
    margin-top: 0.639vh;
    width: 65.534vw;
    height: 12.136vw;
    border-radius: 4.369vw;
    padding: 2.942vw 2.732vh 1.942vw 3.279vh;
    border: none;
    font-size: 7.282vw;
    text-align: justify;
}
 ._error{
     display: flex;
     justify-content: center;
     align-items: center;
     list-style: none;
     margin-top: 2.186vh;
     width: 77.67vw;
     min-height: 13.35vw;
     text-align: center;
    color: white;
     -webkit-text-stroke: 0.049vw white;
     font-size: 4.369vw;
     direction: rtl;
    background-color: #FF5242;
     box-shadow: 0 0 1.699vw 0.485vw rgba(255,82,66,0.5);
    padding: 0.546vh 1.942vw;
    border-radius: 3.427vw;
    letter-spacing: 0.243vw;
}
 .send-code{
     display: flex;
     justify-content: center;
     align-items: center;
    padding: 1.942vw;
    margin-top: 2.186vh;
    background-color: #FF9500;
    width: 65.534vw;
    height: 12.136vw;
    border-radius: 4.369vw;
    color: white;
    font-size: 6.282vw;
     -webkit-text-stroke: 0.049vw white;
    border: none;
}
 .user{
     display: flex;
    flex-direction: column;
    align-items: center;
    width: 77.67vw;
    height: 81.284vw;
    padding: 4.068vw 6.068vw 4.068vw;
    background-color: rgba(255, 255, 255, 0.26);
    border-radius: 6.068vw;
 }
 .register{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 }
 #register-code{
     margin-top: 0.639vh;
    width: 65.534vw;
    height: 12.136vw;
    border-radius: 4.369vw;
    padding: 3.162vw 6.068vw 0.874vh 7.282vw;
    border: none;
    font-size: 8.495vw;
    text-align: center;
    letter-spacing: 3.641vw;
 }
 #register-code::placeholder{
     text-align: center;
 }
 .confirm{
     display: flex;
     justify-content: center;
     align-items: center;
    padding: 1.942vw;
    margin-top: 2.186vh;
    background-color: #FF9500;
    width: 65.534vw;
    height: 12.136vw;
    border-radius: 4.369vw;
    color: white;
    font-size: 6.282vw;
     -webkit-text-stroke: 0.049vw white;
    border: none;
 }
 .sms{
     display: flex;
    flex-direction: column;
    align-items: center;
     width: 79.67vw;
    height: 69.883vw;
    padding: 3.02vw 6.068vw 0;
    background-color: rgba(255, 255, 255, 0.26);
    border-radius: 9.709vw;
 }
 .logo_img_s{
     width: 19.76vw;
     margin-bottom: 1.282vw;
 }
 .sms_info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
 .sms_text{
     font-size: 6.068vw;
     direction: rtl;
    text-align: center;
    max-width: 13ch;
     line-height: 9.709vw;
 }
.return_home{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.942vw;
    margin-top: 0.786vh;
    background-color: #FF9500;
    width: 62.534vw;
    height: 10.136vw;
    border-radius: 4.369vw;
    color: white;
    font-size: 5.282vw;
     -webkit-text-stroke: 0.029vw white;
    border: none;
}
 .icon{
     border: none;
     background: none;
 }
 .secure{
     width: 11.893vw;
     margin-top: 9.417vw;
 }
 .rules_pop {
     position: fixed;
     top: 50%;
     left: 50%;
    width: 83vw;
    height: 77vh;
    background-color: rgba(165,165,165,20%);
    display: flex;
    flex-direction: column;
    padding: 2vh 4vw;
    direction: rtl;
    font-size: 4.369vw;
    align-items: center;
    border-radius: 7.039vw;
    text-align: justify;
    opacity: 0;
    z-index: 100;
    transform: translate(-50%, -50%) scale(0);
    backdrop-filter: blur(8.738vw);
     -webkit-backdrop-filter: blur(8.738vw);
     overflow-y: auto;
     scrollbar-width: none;
 }
 .rules_pop.show{
     transform: translate(-50%, -50%) scale(1);
      opacity: 1;
 }
.overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 9%);
      opacity: 0;
      z-index: 99;
      pointer-events: none;
      transition: opacity 0.3s;
    }
.overlay.show {
      opacity: 1;
      pointer-events: auto;
}
/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 1024px) and (min-width: 768px) {
    .remaining{
        font-size: 5.282vw;
    }
    .count{
        font-size: 16.447vw;
    }
    .main_container{
        margin-top: 4.918vh;
        gap: 5.922vw;
    }
    .dice-container{
        gap: 8.922vw;
        margin:0.854vw;
    }
    .dice{
        width: 23.584vw;
        height: 23.584vw;
    }
    ._face{
        width: 23.584vw;
        height: 23.584vw;
    }
    .face{
        width: 23.214vw;
        height: 22.971vw;
    }
    .dots{
        width: 4.525vw;
        height: 4.525vw;
    }
    ._dots{
        width: 3.569vw;
        height: 3.569vw;
    }
    .roll-btn{
        margin-top: 3.279vh;
        width: 57.68vw;
        height: 12.99vw;
        font-size: 5.282vw;
        box-shadow: 0 0 2.854vw #FFA600;
        -webkit-text-stroke: 0.153vw white;
    }
    #btn_reroll{
        margin-top: 3.279vh;
        width: 60.68vw;
        height: 12.99vw;
        font-size: 5.282vw;
        box-shadow: 0 0 2.854vw #FFA600;
        -webkit-text-stroke: 0.143vw white;
    }
    #claim_reward{
        margin-top: 3.279vh;
        width: 59.184vw;
        height: 12.99vw;
        font-size: 5.582vw;
        box-shadow: 0 0 2.854vw #FFA600;
        -webkit-text-stroke: 0.153vw white;
    }
    .secure{
        width: 9.893vw;
        margin-top: 7.417vw;
    }
}