*,.container{-webkit-user-select: none; -webkit-touch-callout: none;  -moz-user-select: none;-ms-user-select: none; user-select: none;padding:0px; margin:0px;word-wrap: break-word;text-align: center;box-sizing: border-box;}
body{background: radial-gradient(circle at top, #1a1a2e, #0f0f1a);height: 100vh;}
.swal2-container.swal2-shown{z-index:2500 !important;}
*::-webkit-scrollbar { display: none;}
* { -ms-overflow-style: none; scrollbar-width: none;}
#choices .bonanza_ico{font-size: 1.7em;}
#profile-image .icon-profile{font-size: 4em;}


/*smart phone small and medium devices*/
@media screen and (max-width: 435px){
    #mainScreen{ position:fixed; width:100% !important; height:100%; overflow: auto; z-index:1000;}
    .mainScreen{ position:absolute; width: 100%; padding: 10px;  overflow: hidden; }
    #header{ height: 15%; top:0%; }
    #header .profileBtn{
        border:none; background: transparent; color:aliceblue; display: block;
        width: 15%; position: absolute; right: 0;top: 0; font-size: 1.5em; padding: 12px 20px;
    }
    #header .readyBtn{
        border:none; background: transparent; color:#00ccff; display: block; width: 10%;
        position: absolute; right: 20%;top: 0; font-size: 1.5em; padding: 12px 20px; font-family: normal; display: none;
    }
    #header h1 {
        font-size: 2em;
        letter-spacing: 3px;
        margin-bottom: 20px;
        background: linear-gradient(90deg, #ffd700, #ffb347);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
        font-weight: bolder;
    }
    #board{ line-height: 0px; height: 70% !important; top:15%;left: 0%;margin: 0 !important; }
    #action_div{ height: 15%; bottom:0%; }
    #selections{
        width: 100%;height: 100%;position: absolute; left: 0;top: 0; z-index: 2000; white-space: nowrap;
        overflow: auto; background-color: transparent;display: none;
    }
    #selections ul li{
        background: #000; display: inline-block;height: 80%; list-style: none; border: 1px solid #ff8c00; padding:10px; 
        margin: 0px 5px; cursor: pointer;-webkit-user-select: none; -ms-user-select: none;user-select: none; border-radius: 5px;
    }
    .number_of_choices{color:#00ccff;}
    #tsparticles{width:100%;height:100%;position:fixed;z-index:1000;display: none;}
    #winner_res{
        position:fixed; bottom:0px; height: 30%;z-index: 2000; width: 100%; left:0px; border-radius: 30px 30px 0px 0px;
        padding:20px; background-color: #eee; color: #222; border: 2px solid #222; border-bottom: none; display: none;
    }
    .prize_holder{color: aliceblue;}

    #profile{
        position: fixed; width: 100%;right:0; height: 100vh; color: aliceblue; padding:10px; 
        background-color:#0f0f1a; z-index: 1500; display:none;
    }
    .closeBtn{
        border:none; background: transparent; color:aliceblue; display: block; width: 50%;
        position: absolute; left: 25%;bottom: 5%; font-size: 1.5em; padding: 12px 20px;
    }
    #forgotPass{ color:aliceblue; }
    #profile #profile-image{width: 50%;padding: 20px 10px;margin: 10px auto;}
    #profile table{width: 100%;margin:10px 0;}
    #profile table, #profile th, #profile td {border-collapse: collapse;padding: 10px;}
    #profile th, #profile td {text-align: center;}
    .btns{padding:20px;}
    .swal2-input{color:black;}
}
  
/*smart phone landscape and ipad land scape*/
@media only screen and (min-width: 436px) and (max-width: 800px){
    #mainScreen{ position:fixed; width:100% !important; height:100%; overflow: auto; z-index:1000;}
    .mainScreen{ position:absolute; width: 100%; padding: 10px;  overflow: hidden; }
    #header{ height: 15%; top:0%; }
    #header .profileBtn{
        border:none; background: transparent; color:aliceblue; display: block;
        width: 15%; position: absolute; right: 0;top: 0; font-size: 1.5em; padding: 12px 20px;
    }
    #header .readyBtn{
        border:none; background: transparent; color:#00ccff; display: block; width: 10%;
        position: absolute; right: 20%;top: 0; font-size: 1.5em; padding: 12px 20px; font-family: normal; display: none;
    }
    #header h1 {
        font-size: 2em;
        letter-spacing: 3px;
        margin-bottom: 20px;
        background: linear-gradient(90deg, #ffd700, #ffb347);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
        font-weight: bolder;
    }
    #board{ line-height: 0px; height: 70% !important; top:15%;left: 0%;margin: 0 !important; }
    #action_div{ height: 15%; bottom:0%; }
    #selections{
        width: 100%;height: 100%;position: absolute; left: 0;top: 0; z-index: 2000; white-space: nowrap;
        overflow: auto; background-color: transparent; display: none;
    }
    #selections ul li{
        background: #000; display: inline-block;height: 80%; list-style: none; border: 1px solid #ff8c00; padding:10px; 
        margin: 0px 5px; cursor: pointer;-webkit-user-select: none; -ms-user-select: none;user-select: none; border-radius: 5px;
    }
    .number_of_choices{color:#00ccff;}
    #tsparticles{width:100%;height:100%;position:fixed;z-index:1000;display: none;}
    #winner_res{
        position:fixed; bottom:0px; height: 30%;z-index: 2000; width: 100%; left:0px; border-radius: 30px 30px 0px 0px;
        padding:20px; background-color: #eee; color: #222; border: 2px solid #222; border-bottom: none; display: none;
    }
    .prize_holder{color: aliceblue;}

    #profile{
        position: fixed; width: 100%;right:0; height: 100vh; color: aliceblue; padding:10px; 
        background-color: #0f0f1a;z-index: 1500; display:none;
    }
    .closeBtn{
        border:none; background: transparent; color:aliceblue; display: block; width: 50%;
        position: absolute; left: 25%;bottom: 5%; font-size: 1.5em; padding: 12px 20px;
    }
    #forgotPass{ color:aliceblue; }
    #profile #profile-image{width: 50%;padding: 20px 10px;margin: 10px auto;}
    #profile table{width: 100%;margin:10px 0;}
    #profile table, #profile th, #profile td {border-collapse: collapse;padding: 10px;}
    #profile th, #profile td {text-align: center;}
    .btns{padding:20px;}
    .swal2-input{color:black;}
}
  
/*work in a width of 850 px customed */
@media only screen and (min-width: 801px) and (max-width: 1000px){
    #mainScreen{z-index:2000;  position:fixed; width:75% !important; height:100vh; padding:30px; }
    #header{ height: 15%; top:0%; }
    #header .profileBtn{ display:none; }
    #header .readyBtn{
        border:none; background: transparent; color:#00ccff; display: block; width: 10%;
        position: absolute; right: 20%;top: 0; font-size: 1.5em; padding: 12px 20px; font-family: normal; display: none;
    }
    #header h1 {
        font-size: 2em;
        letter-spacing: 3px;
        margin-bottom: 20px;
        background: linear-gradient(90deg, #ffd700, #ffb347);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
        font-weight: bolder;
    }
    #board{ line-height: 0px; height: 70% !important; top:15%;left: 0%;margin: 0 !important;}
    #selections{ 
        width: 100%;height: 10%;position: relative; margin-top: 10px;
        text-align: center;display: block;
    }
    #selections ul li{
        list-style: none; display: inline-block; border: 1px solid #ff8c00;padding:10px; margin: 0px 5px; 
        cursor: pointer;-webkit-user-select: none; -ms-user-select: none;user-select: none;
    }
    .number_of_choices{color: #00ccff;}
    #tsparticles{width:100%;height:100%;position:fixed;z-index:1000;display: none;}
    .prize_holder{color: aliceblue;}
    #winner_res{
        position:fixed; bottom:0px; height: 30%;z-index: 2000; width: 100%; left:0px; border-radius: 30px 30px 0px 0px;
        padding:20px; background-color: #eee; color: #222; border: 2px solid #222; border-bottom: none; display: none;
    }
    #profile{
        position: fixed;  width: 25%;right:0;
        height: 100vh;  color: aliceblue; padding:30px;
    }
    #profile #profile-image{width: 50%;padding: 20px 10px;margin: 10px auto;}
    #profile table{width: 100%;margin:10px 0;}
    #profile table, #profile th, #profile td {border-collapse: collapse;padding: 10px;}
    #profile th, #profile td {text-align: center;}
    .btns{padding:20px;}
    .swal2-input{color:black;}
    .closeBtn{ display:none;  }
    #res{color:#dedede;}
    .profile-btn{ min-width: 50px; margin-left: 50px;}
    .swal2-container.swal2-shown{z-index:2500 !important;}
}
  
/*work for ipad min and kindle fire*/
@media only screen and (min-width: 1001px) and (max-width: 1150px){
    #mainScreen{ position:fixed; width:100% !important; height:100%; overflow: auto; z-index:1000;}
    .mainScreen{ position:absolute; width: 100%; padding: 10px;  overflow: hidden; }
    #header{ height: 15%; top:0%; }
    #header .profileBtn{
        border:none; background: transparent; color:aliceblue; display: block;
        width: 15%; position: absolute; right: 0;top: 0; font-size: 1.5em; padding: 12px 20px;
    }
    #header .readyBtn{
        border:none; background: transparent; color:#00ccff; display: block; width: 10%;
        position: absolute; right: 20%;top: 0; font-size: 1.5em; padding: 12px 20px; font-family: normal; display: none;
    }
    #header h1 {
        font-size: 2em;
        letter-spacing: 3px;
        margin-bottom: 20px;
        background: linear-gradient(90deg, #ffd700, #ffb347);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
        font-weight: bolder;
    }
    #board{ line-height: 0px; height: 70% !important; top:15%;left: 0%;margin: 0 !important; }
    #action_div{ height: 15%; bottom:0%; }
    #selections{
        width: 100%;height: 100%;position: absolute; left: 0;top: 0; z-index: 2000; white-space: nowrap;
        overflow: auto; background-color: transparent; display: none;
    }
    #selections ul li{
        background: #000; display: inline-block;height: 80%; list-style: none; border: 1px solid #ff8c00; padding:10px; 
        margin: 0px 5px; cursor: pointer;-webkit-user-select: none; -ms-user-select: none;user-select: none; border-radius: 5px;
    }
    .number_of_choices{color:#00ccff;}
    #tsparticles{width:100%;height:100%;position:fixed;z-index:1000;display: none;}
    #winner_res{
        position:fixed; bottom:0px; height: 30%;z-index: 2000; width: 100%; left:0px; border-radius: 30px 30px 0px 0px;
        padding:20px; background-color: #eee; color: #222; border: 2px solid #222; border-bottom: none; display: none;
    }
    .prize_holder{color: aliceblue;}

    #profile{
        position: fixed; width: 100%;right:0; height: 100vh; color: aliceblue; padding:10px; 
        background-color: #0f0f1a; z-index: 1500; display:none;
    }
    .closeBtn{
        border:none; background: transparent; color:aliceblue; display: block; width: 50%;
        position: absolute; left: 25%;bottom: 5%; font-size: 1.5em; padding: 12px 20px;
    }
    #forgotPass{ color:aliceblue; }
    #profile #profile-image{width: 50%;padding: 20px 10px;margin: 10px auto;}
    #profile table{width: 100%;margin:10px 0;}
    #profile table, #profile th, #profile td {border-collapse: collapse;padding: 10px;}
    #profile th, #profile td {text-align: center;}
    .btns{padding:20px;}
    .swal2-input{color:black;}
}
  
/*large screen style sheet*/
@media screen and (min-width: 1151px){
    #mainScreen{ z-index:2000;  position:fixed; width:85% !important; height:100vh; padding:30px; }
    #header{ height: 15%; top:0%; }
    #header .profileBtn{ display:none; }
    #header .readyBtn{
        border:none; background: transparent; color:#00ccff; display: block; width: 10%;
        position: absolute; right: 20%;top: 0; font-size: 1.5em; padding: 12px 20px; font-family: normal; display: none;
    }
    #header h1 {
        font-size: 2em;
        letter-spacing: 3px;
        margin-bottom: 20px;
        background: linear-gradient(90deg, #ffd700, #ffb347);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
        font-weight: bolder;
    }
    #board{ line-height: 0px; height: 70% !important; top:15%;left: 0%;margin: 0 !important;}
    #selections{ 
        width: 100%;height: 10%;position: relative; margin-top: 10px;
        text-align: center;display: block;
    }
    #selections ul li{
        list-style: none; display: inline-block; border: 1px solid #ff8c00;padding:10px; margin: 0px 5px; 
        cursor: pointer;-webkit-user-select: none; -ms-user-select: none;user-select: none;
    }
    .number_of_choices{color: #00ccff;}
    #tsparticles{width:100%;height:100%;position:fixed;z-index:1000;display: none;}
    .prize_holder{color: aliceblue;}
    #winner_res{
        position:fixed; bottom:0px; height: 30%;z-index: 2000; width: 100%; left:0px; border-radius: 30px 30px 0px 0px;
        padding:20px; background-color: #eee; color: #222; border: 2px solid #222; border-bottom: none; display: none;
    }
    #profile{
        position: fixed;  width: 15%;right:0;
        height: 100vh;  color: aliceblue; padding:30px;
    }
    #profile #profile-image{width: 50%;padding: 20px 10px;margin: 10px auto;}
    #profile table{width: 100%;margin:10px 0;}
    #profile table, #profile th, #profile td {border-collapse: collapse;padding: 10px;}
    #profile th, #profile td {text-align: center;}
    .btns{padding:20px;}
    .swal2-input{color:black;}
    .closeBtn{ display:none;  }
    #res{color:#dedede;}
    .profile-btn{ min-width: 50px; margin-left: 50px;}
    .swal2-container.swal2-shown{z-index:2500 !important;}
}
  
/*desktop style sheet*/
@media only screen and (min-width: 1900px) and (max-width: 999999999999px){
    #mainScreen{ z-index:2000;  position:fixed; width:85% !important; height:100vh; padding:30px; }
    #header{ height: 15%; top:0%; }
    #header .profileBtn{ display:none; }
    #header .readyBtn{
        border:none; background: transparent; color:#00ccff; display: block; width: 10%;
        position: absolute; right: 20%;top: 0; font-size: 1.5em; padding: 12px 20px; font-family: normal; display: none;
    }
    #header h1 {
        font-size: 2em;
        letter-spacing: 3px;
        margin-bottom: 20px;
        background: linear-gradient(90deg, #ffd700, #ffb347);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
        font-weight: bolder;
    }
    #board{ line-height: 0px; height: 70% !important; top:15%;left: 0%;margin: 0 !important;}
    #selections{ 
        width: 100%;height: 10%;position: relative; margin-top: 10px;
        text-align: center;display: block;
    }
    #selections ul li{
        list-style: none; display: inline-block; border: 1px solid #ff8c00;padding:10px; margin: 0px 5px; 
        cursor: pointer;-webkit-user-select: none; -ms-user-select: none;user-select: none;
    }
    .number_of_choices{color: #00ccff;}
    #tsparticles{width:100%;height:100%;position:fixed;z-index:1000;display: none;}
    .prize_holder{color: aliceblue;}
    #winner_res{
        position:fixed; bottom:0px; height: 30%;z-index: 2000; width: 100%; left:0px; border-radius: 30px 30px 0px 0px;
        padding:20px; background-color: #eee; color: #222; border: 2px solid #222; border-bottom: none; display: none;
    }
    #profile{
        position: fixed;  width: 15%;right:0;
        height: 100vh;  color: aliceblue; padding:30px;
    }
    #profile #profile-image{width: 50%;padding: 20px 10px;margin: 10px auto;}
    #profile table{width: 100%;margin:10px 0;}
    #profile table, #profile th, #profile td {border-collapse: collapse;padding: 10px;}
    #profile th, #profile td {text-align: center;}
    .btns{padding:20px;}
    .swal2-input{color:black;}
    .closeBtn{ display:none;  }
    #res{color:#dedede;}
    .profile-btn{ min-width: 50px; margin-left: 50px;}
    .swal2-container.swal2-shown{z-index:2500 !important;}
}


#winner_res{
  background: linear-gradient(90deg, #857206, #ff8c00);
}
#winner_res > a.superBtn{
  background: linear-gradient(90deg,#1a1a1a, #ff8c00);
  border:1px solid #1a1a1a;
}
#prize_amount{
    color:rgb(112, 25, 5);
}

.res_text {
  display: inline-block;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 2px;
  background: linear-gradient(
    90deg,
    #fff8dc 0%,
    #ffffff 25%,
    #fffacd 40%,
    #ffffff 55%,
    #ffe566 70%,
    #fff8dc 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  will-change: transform, background-position;
  /* 3s × 2 = 6s  |  0.75s × 8 = 6s  → both end together */
   animation:
    text-shine 3.5s linear 4 forwards,
    celebrate-bounce 1s cubic-bezier(0.34, 1.45, 0.64, 1) 14 forwards;
}

@keyframes text-shine {
  to {
    background-position: 200% center;
  }
}

@keyframes celebrate-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(-0.22em) scale(1.07);
  }
  40% {
    transform: translateY(0) scale(1.02);
  }
  55% {
    transform: translateY(-0.14em) scale(1.05);
  }
  70% {
    transform: translateY(0) scale(1.03);
  }
  85% {
    transform: translateY(-0.06em) scale(1.04);
  }
}

.tw-cursor {
    font-weight: 3;
    margin-left: 1px;
    color: inherit;
}


#choices li.active{border:none !important;}