:root {--spacing: 6px;}


body.dotbg{
   overflow-x: hidden;
    background-color: #000000;
    opacity: 1;
    background-image:  radial-gradient(#4b4331 1.5px, transparent 1.5px), radial-gradient(#4b4331 1.5px, #000000 1.5px);
    background-size: 60px 60px;
    background-position: 0 0,30px 30px;
    --spacing:6px
}

.counter-wrap {font-size: 2rem;font-weight: 600;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);line-height: 5.0rem;}
.counter-background {position: relative;max-height: 200px;margin: 0 auto;aspect-ratio: 2.3/1;}
.counter-background img {max-height: 100%;object-fit: contain;}
.wheel-section { padding: 3rem 0 5rem;}
.shake {animation: shake 2s ease infinite;}
@media only screen and (max-width:768px){
   .counter-wrap{font-size: 1.5rem;line-height: 4.5rem;}
}

/* Popup Modal */
.modal {--bs-modal-bg:transparent;--bs-modal-border-width:0}
#spin_again_modal .modal-body, #winner_modal .modal-body {position: relative;max-width: 60%;margin: auto;}
.modal-btn{position:absolute;cursor: pointer;left: 50%;transform: translateX(-50%);bottom: 10%;width: 50%;max-width: 230px !important;}
.wheel-wrapper {margin: auto;display: flex;justify-content: center;aspect-ratio: 1/1;position: relative; max-width: 600px; overflow: hidden;}
.spinner, .spinner2 {position: absolute;width: 100%;display: flex;align-items: center;justify-content: center;}
.wheel-arrow{position:absolute;border: 0;padding: 0;top: 50%;transform: translateY(-50%);background: transparent;}
.wheel-arrow img { max-width: 50% !important;}
.spin-btn{border: 0;background: transparent; display: block; margin: auto; max-width:250px}
.timer{text-align:center;color:#fff;font-weight:700;font-size:1.4vw}
@media only screen and (max-width:768px){
   #spin_again_modal .modal-body, #winner_modal .modal-body {max-width: 100%;}
   .spin-btn { max-width: 50% !important;}
}


/*--------------------------------------------------
* Popup Modal
--------------------------------------------------*/
.modal-backdrop {--bs-backdrop-opacity:.8; backdrop-filter: blur(5px);}
.modal{--bs-modal-bg:transparent;--bs-modal-border-width:0}
#spin_again_modal .modal-body,#winner_modal .modal-body{position:relative;margin:auto;z-index: 3;line-height: 1.2;}
.modal-content{padding: 30px;position:relative;border-radius: calc(var(--spacing) * 3);}
.modal-content .title{-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:#fff;filter: drop-shadow(1px 1px rgba(255,255,255,0.85));background-image: linear-gradient(170deg, #d9dd00 5%, #fabf27 30%, #a37402 35%, #f2d172 45%, #a37402 60%, #ae6806 90%);font-style:italic;margin-bottom: 1.5rem;font-weight: 600;}
.modal-content .text-highlight{background: linear-gradient(180deg, #ffe207 10%, #d55c00 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:#fff;font-size: 3rem;font-style:italic;filter: drop-shadow(-1px 0px 0px #fff);font-weight: 900;margin-bottom: 1rem;}
.spinner,.spinner2{position:absolute;width:100%;display:flex;align-items:center;justify-content:center}
.wheel-arrow{position:absolute;border:0;padding:0;top:50%;transform:translateY(-50%);background:0 0}
.wheel-arrow img{max-width:50%!important}
.timer{text-align:center;color:#fff;font-weight:700;font-size:1.4vw}


/*--------------------------------------------------
* Modal Background
--------------------------------------------------*/
.modal.glass .modal-content {background: hsl(0deg 0% 0% / 70%);}
.modal-content.bg-gold {background: rgb(139 104 2);}
.modal .modal-content:before{content:"";background: linear-gradient(160deg, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 0%) 20%, rgb(0 0 0 / 100%) 100%);border-radius: calc(var(--spacing) * 1.5);width: calc(100% - var(--spacing) * 3);height: calc(100% - var(--spacing) * 3);left: calc(var(--spacing) * 1.5);top: calc(var(--spacing) * 1.5);position:absolute;z-index: 1;}
.modal .modal-content:after{content:"";display:block;position:absolute;top:0;left:0;bottom:0;right:0;border-radius: calc(var(--spacing) * 3);background-image: linear-gradient(150deg, rgb(0 0 0 / 35%) 0%, rgb(255 255 255 / 0%) 40%, rgb(255 255 255 / 25%) 100%);box-shadow:0 2px 5px 0 #efd9d9 inset,0 0 5px 2px #e38e0f,0 0 0 2px #fc0;}


/*--------------------------------------------------
* Emboss Button
--------------------------------------------------*/
.emboss{color:#fff;font-weight:800;padding:1.35em 3em;position:relative;text-shadow:0 1px 4px #000;font-style:italic;z-index:0;min-width: 200px;margin:2rem auto 0;border:0;border-radius: 50px;max-width: 250px;display: inline-block; text-decoration: none; text-align: center;}
.emboss:before {content:"";background:linear-gradient(350deg,rgb(0 0 0 / 100%) 0,rgb(255 255 255 / 0%) 60%,rgb(255 255 255 / 60%) 90%);border-radius:50px;width:calc(100% - var(--spacing) * 2);height:calc(100% - var(--spacing) * 2);left:var(--spacing);top:var(--spacing);position:absolute;z-index: -1;}
.emboss:after {content:"";display:block;position:absolute;top:0;left:0;bottom:0;right:0;z-index: -2;border-radius:50px;background-image:linear-gradient(160deg,rgb(0 0 0 / 60%) 10%,rgb(255 255 255 / 0%) 60%,rgb(255 255 255 / 60%) 90%);box-shadow:0 2px 5px 0 #efd9d9 inset,0 0 5px 2px #e38e0f,0 0 0 2px #fc0}
.emboss.red {background-color: #ff0000;}
.emboss.green {background-color: #25D366;}
.emboss.blue{ background-color: #0746a2;}
@media only screen and (max-width:769px){
   #spin_again_modal .modal-body,#winner_modal .modal-body{max-width:100%}
   .spin-btn{max-width:50%!important}
   .modal-content .text-highlight { font-size: 1.6rem;}
}


/*--------------------------------------------------
* Spinning Animation
--------------------------------------------------*/
.image1{animation:spinClockwise 4s ease normal forwards}
.image2{animation:spinCounterClockwise 4s ease normal forwards}
.image3{animation:spinWin 4s ease normal forwards}

@keyframes spinClockwise{
  0%{transform:rotate(0)}
  90%{transform:rotate(2817deg)}
  95%{transform:rotate(2815deg)}
  100%{transform:rotate(2816deg)}
}
@keyframes spinCounterClockwise{
  0%{transform:rotate(0)}
  90%{transform:rotate(-2882deg)}
  95%{transform:rotate(-2880deg)}
  100%{transform:rotate(-2881deg)}
}
@keyframes spinWin{
  0%{transform:rotate(0)}
  90%{transform:rotate(2637deg)}
  95%{transform:rotate(2635deg)}
  100%{transform:rotate(2636deg)}
}
.zoom{animation-name:zoomInOut;animation-duration:1s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes zoomInOut{
  0%{transform:scale(1)}
  50%{transform:scale(1.1)}
  100%{transform:scale(1)}
}

@keyframes shake {
	0%,100% {transform: translateX(0);}
	10%,30%,50%,70%,90% {transform: translateX(-10px);}
	20%,40%,60%,80% {transform: translateX(10px);}
}

/* ranking */
:root{--color-start:#03A9F4;--color-end:#8BC34A}
.leaderboard{max-width:800px;margin:auto}
.leaderboard .title { font-weight: 700;}
.leaderboard .desc { font-size: .875rem;}
.leaderboard ol{counter-reset:leaderboard;list-style:none;padding:0}
.leaderboard ol li{position:relative;counter-increment:leaderboard;margin-bottom:1rem;background:#f6f6f6;border-radius:1rem;display:flex;align-items:center;padding-left:1rem;gap:1rem;box-shadow:0 3px 12px 3px rgba(0,0,0,.2)}
.leaderboard ol li::before{content:counter(leaderboard);width:30px;height:30px;line-height:30px;background:#48bcc9; color:#fff; border-radius:20px;text-align:center}
.leaderboard ol li .name::after,.leaderboard ol li mark::before{content:"";position:absolute;z-index:1;bottom:-11px;left:-9px;border-top:10px solid #c24448;border-left:10px solid transparent;transition:all .1s ease-in-out;opacity:0}
.leaderboard ol li .name::after{left:auto;right:-9px;border-left:none;border-right:10px solid transparent}
.leaderboard ol li .amount{text-align:right;background:#03a9f4;width:200px;padding:1rem;border-radius:0 1rem 1rem 0;margin-left:auto;background-color:color-mix(in srgb,var(--color-start),var(--color-end) calc((var(--index) - 1) * 10%));color:#fff;font-weight:600;font-size:120%}
.leaderboard ol li:nth-child(1){--index:1}
.leaderboard ol li:nth-child(2){--index:2}
.leaderboard ol li:nth-child(3){--index:3}
.leaderboard ol li:nth-child(4){--index:4}
.leaderboard ol li:nth-child(5){--index:5}
.leaderboard ol li:nth-child(6){--index:6}
.leaderboard ol li:nth-child(7){--index:7}
.leaderboard ol li:nth-child(8){--index:8}
.leaderboard ol li:nth-child(9){--index:9}
.leaderboard ol li:nth-child(10){--index:10}
.leaderboard ol li:first-child:before,.leaderboard ol li:nth-child(2):before,.leaderboard ol li:nth-child(3):before { background-color: #99103f; color: #fff;}
.leaderboard ol li:first-child:after,.leaderboard ol li:nth-child(2):after,.leaderboard ol li:nth-child(3):after{content:"\ea8a";font-family:remixicon;position:absolute;font-size:3rem;top:0px;left:6px;color:#E91E63}

/* BS rewrite */
.nav-pills {
   --bs-border-radius: 2rem;
   --bs-nav-link-padding-x:1.5rem;
   --bs-nav-pills-border-radius: var(--bs-border-radius);
   --bs-nav-pills-link-active-color: #fff;
   --bs-nav-pills-link-active-bg: #01a9f4;
   --bs-link-hover-color:#2196F3;
   --bs-link-color :#63c5f2;
   --bs-nav-link-font-size:1rem;
}
.nav-pills .nav-link { border: solid;}

@media (max-width:768px){
   .leaderboard ol li .amount {width: 130px;font-size: 100%;padding: .75rem;}
   .leaderboard ol li { padding-left: .75rem;}
   .leaderboard ol li:first-child:after, .leaderboard ol li:nth-child(2):after, .leaderboard ol li:nth-child(3):after {top:-6px; left: 2px;}
   .nav-pills {--bs-nav-link-padding-x:.875rem;--bs-nav-link-font-size:0.875rem;}
}