:root{--spacing: 6px;}
::-webkit-scrollbar { display: none; }
body,html {height: 100%;}
.btn-primary {--bs-btn-bg:rgb(150 9 98);--bs-btn-hover-bg:rgb(199 10 129)}
.background-overflow {background-repeat: no-repeat;background-size: cover;background-attachment: fixed;background-position: center;overflow: hidden;}

/*--------------------------------------------------
* Wheel
--------------------------------------------------*/
.wheel-wrapper {margin: auto;display: flex;justify-content: center;aspect-ratio: 1/1;position: relative;max-width: 800px;align-items: center; z-index: 0;}
.spinner, .spinner2 {position: absolute;width: 100%; height: 100%; display: flex;align-items: center;justify-content: center;}
.spinner img{max-width: 75%;}
.spinner2 img { max-width: 150%;}
.wheel-arrow{position: absolute;}
.wheel-arrow img {max-width: 40% !important; margin: auto;}
.wheel-inner {position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;transform: translate(-50%, -50%);z-index: 1;}
.wheel-segment {position: absolute;width: 100%;height: 100%;left: 0;top: 0;display: flex;align-items: center;justify-content: center;}
.segment-text {position: absolute;width: 20%;top: 20%;line-height: 1.2;font-size: 1.2em;font-weight: 600;font-style: italic;}
@media only screen and (max-width:768px){
  .segment-text { font-size: 74%;}
}

/* Rotate each segment */
.segment-1 { transform: rotate(0deg); }
.segment-2 { transform: rotate(60deg); }
.segment-3 { transform: rotate(120deg); }
.segment-4 { transform: rotate(180deg); }
.segment-5 { transform: rotate(240deg); }
.segment-6 { transform: rotate(300deg); }


/*--------------------------------------------------
* Popup Modal
--------------------------------------------------*/
#spin_again_modal .modal-body,#winner_modal .modal-body{z-index: 3; position: relative;}
.modal-content{border-radius: calc(var(--spacing) * 3);}
.modal-content .text-highlight{background: linear-gradient(0deg, #ff7900 10%, #ffe500 90%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:#fff;font-weight: 800;filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.75));margin: 0.3em 0;}

/*--------------------------------------------------
* Modal Background
--------------------------------------------------*/
.modal.glass .modal-content {background: hsl(0deg 0% 0% / 70%);}
.modal.gold .modal-content {background: #D3AF37;}
.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: 1em 2em;position:relative;text-shadow:0 1px 4px #000;font-style:italic;z-index:1;min-width: 160px;border:0;border-radius: 100px;display: inline-block;text-decoration: none;}
.emboss:before {content:"";background: linear-gradient(340deg,rgb(0 0 0 / 100%) 0,rgb(255 255 255 / 0%) 50%,rgb(255 255 255 / 90%) 100%);border-radius:100px;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:100px;box-shadow:0 2px 5px 0 #efd9d9 inset,0 0 5px 2px #e38e0f,0 0 0 2px #fc0;}

/*--------------------------------------------------
* Spinning Animation
--------------------------------------------------*/
.spin2try{animation:spinClockwise 4s ease normal forwards}
.spin-counterclock{animation:spinCounterClockwise 4s ease normal forwards}
.spin2win{animation:spinWin 4s ease normal forwards}
.animate-pin {animation: pin-hit .2s ease-out infinite;}
.zoom{animation-name:zoomInOut;animation-duration:1s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}

@keyframes spinClockwise{
  0%{transform:rotate(0);}
  90%{transform:rotate(2817deg); filter: saturate(1.5) drop-shadow(0px 0px 42px rgb(0, 0, 0));}
  95%{transform:rotate(2815deg); filter: saturate(1.0) drop-shadow(0px 0px 0px rgb(0, 0, 0));}
  100%{transform:rotate(2816deg); }
}

@keyframes spinCounterClockwise{
  0%{transform:rotate(0)}
  90%{transform:rotate(-2882deg); filter: brightness(0.5) blur(1px);}
  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); }
}

@keyframes zoomInOut{
  0%{transform:scale(1)}
  50%{transform:scale(1.1)}
  100%{transform:scale(1)}
}

@keyframes pin-hit {
  0%     { transform: rotate(0deg); }
  50%  { transform: rotate(10deg); }
  100%   { transform: rotate(0deg); }
}