html{

}
body{
  max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(180deg, #000A50 25.37%, #0218B7 56.44%, #000A50 100%);
}
body.modal-open {
    padding-right: 0 !important;
}

h1,h2,h3,h4,h5,h6,a,button,p,span,div{
    font-family: 'YekanBakh-med';
}
#fixed-btn{
    position: fixed;
    top: 28%;
    right: 20%;
    z-index: 100;
    padding: 12px 4px;
    background-color: #C73330;
    border-radius: 50%;
    border: none;
    font-family: 'YekanBakh-med';
    font-size: 16px;
    font-weight: bold;
    width: 70px;
    height: 70px;
    box-shadow: 1px 1px 8.7px 4px rgba(251, 243, 243, 0.25);
}
#top{
    padding-top: 60px;
}
#top, #middle, #footer{
  max-width: 800px;
  /*background: navy;*/
    padding-bottom: 16px;
}
#hero{
    width: 90%;
}
#tage{
    width: 100px;
    position: absolute;
    top: 65%;
}
#tage-img {
    width: 50%;
    margin: 0 auto;
    margin-bottom: 0px;
}
#bg {
    background-image: url("../images/background-overlay.png");
    background-size: cover;
    background-position: top center;
}
#middle{
  /*background-image: url("../images/background-overlay.png");*/
  background-size: cover;
  background-position: center;
  width: 100%;
  padding-top: 4px;
}
#middle .overlay {
  position: absolute;
    display: none;
  top: 0;
  left: 20%;
  bottom: 0;
  width: 60%;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.001);
    border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 34px;
  /* --- لایه بلور اصلی --- */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  opacity: 0.65;
}
.glass-card {
    border-radius: 34px;
    /* --- لایه شیشه‌ای اصلی با blur --- */
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    background: linear-gradient(
            180deg,
            rgba(143, 143, 143, 0.75) 11.5%,
            rgba(245, 245, 245, 0.4) 74.5%,
            rgba(194, 194, 194, 0.59) 88.4%
    );

    background: rgba(255,255,255,0.4);
    /* --- لایه‌های داخلی shadow برای hard-light effect --- */
    /*box-shadow:*/
    /*        inset 0 0 80px rgba(0, 0, 0, 0.08),   !* لایه سیاه شفاف *!*/
    /*        inset 0 0 40px rgba(38, 38, 38, 0.5); !* لایه color-dodge شبیه blend-mode *!*/

    /* --- حاشیه خیلی کم برای مرز شیشه‌ای --- */
    border: 1px solid rgba(255, 255, 255, 0.03);

    opacity: 0.7;
}
#middle .glass-card {
    position: absolute;
    width: 60%;
    margin: 0 auto;
    left: 20%;
    top: 0;
    bottom: 0;
    border-radius: 34px;
}
#middle .contents{
  width: 60%;
  margin: 0 auto;
  position: relative;
    padding: 20px 4px !important;
  /*background: rgba(0, 0, 0, 0.001);*/
  /*border-radius: 34px;*/
  /*!* --- لایه بلور اصلی --- *!*/
  /*backdrop-filter: blur(40px);*/
  /*-webkit-backdrop-filter: blur(40px);*/
  /*opacity: 0.8;*/

  /* --- گرادیان دقیق از SVG (paint0_linear) --- */
  /*background: linear-gradient(*/
  /*        180deg,*/
  /*        rgba(143, 143, 143, 0.75) 11.5%,*/
  /*        rgba(245, 245, 245, 0.40) 74.5%,*/
  /*        rgba(194, 194, 194, 0.59) 88.4%*/
  /*);*/

  /*!* --- ایجاد حالت hard-light از لایه اول SVG --- *!*/
  /*box-shadow:*/
  /*        inset 0 0 80px rgba(0, 0, 0, 0.08),   !* لایه اول blur *!*/
  /*        inset 0 0 40px rgba(38, 38, 38, 0.50); !* لایه color-dodge (fill #262626) *!*/

  /* --- مرز خیلی محو مشابه fill-opacity="0.01" SVG --- */
  border: 1px solid rgba(255, 255, 255, 0.03);

}
#middle > h3{
    font-family: 'YekanBakh-heavy';
}
#middle .contents h3, #middle .contents h4{
    font-family: 'YekanBakh-heavy';
}
#mobile-container{
  /*background-image: url("../images/GlitterCircle.png");*/
  /*height: 200px;*/
  /*background-size: contain;*/
  /*background-repeat: no-repeat;*/
  /*background-position: center;*/
}
#mobile-img{
  margin: 0 auto;
}
.submit-btn{
  background: linear-gradient(180deg, #EF3A25 49%, #D0A299 90%);
  width: 84%;
  margin: 12px 8%;
  border-radius: 10px;
  font-size: 16px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  padding: 8px 0;
}
#scoreboard h3{
    font-family: 'YekanBakh-heavy';
    font-size: 19px;
    width: 70%;
    margin: 0 auto;
}
@media screen and (min-width: 410px){
    #scoreboard h3 {
        font-size: 21px;
    }
}
@media screen and (min-width: 450px){
    #scoreboard h3 {
        font-size: 22px;
    }
}
@media screen and (min-width: 500px){
    #scoreboard h3 {
        font-size: 23px;
    }
}
@media screen and (min-width: 550px){
    #scoreboard h3 {
        font-size: 26px;
    }
}
@media screen and (min-width: 600px){
    #scoreboard h3 {
        font-size: 30px;
    }
}
@media screen and (min-width: 630px){
    #scoreboard h3 {
        font-size: 32px;
    }
}
#medal{
    width: 15%;
}
#score{
    top: 18%;
    font-weight: 900;
    /*font-family: YekanBakh-heavy;*/
}
@media screen and (min-width: 450px){
    #score{
        top: 23% !important;
    }
}
@media screen and (min-width: 600px){
    #score{
        top: 24% !important;
        font-size: 22px;
    }
}
#footer {
  /*background-image: url("../images/background-overlay.png");*/
  background-size: cover;
  /*background-position: center;*/
  width: 100%;
    padding: 40px 0;
    padding-bottom: 80px;
  /*height: 200px;*/
}
#footer .glass-card {
    position: absolute;
    width: 60%;
    margin: 0 auto;
    left: 20%;
    top: 0;
    bottom: 0;
    border-radius: 34px;
}
#footer .contents{
  width: 70%;
  margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 34px;
}
#footer .contents h3{
  font-size: 16px;
  font-weight: 900;
  line-height: 180%;
    font-family: 'YekanBakh-heavy';
}
#footer .shops{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: 75%;
}
@keyframes shops-animation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}
#footer .shops a{
    animation: shops-animation 1500ms ease 0s infinite normal forwards;
}

.modal-header{
    border: none !important;
}
.modal-header .btn-close {
    color: white !important;
    background: unset !important;
    font-size: 40px !important;
    opacity: 1 !important;
}
.modal-content{
    background: radial-gradient(50.13% 58.38% at 50.13% 39.48%, #0218B7 0%, #00094F 100%);
}
.login-form .row{
    width: 80%;
}
.login-form .form-control{
    border-radius: 13px !important;
    direction: rtl !important;
    color: white;
    opacity: 1;
}
.form-control:focus {
    background-color: rgba(255, 255, 255, 0.4);
}

.form-control::placeholder {
    color: rgba(205, 205, 205, 0.69);
}
.top-input{
    width: 40px;
}
#submit-button{
    opacity: 1;
}
#otp-button{
    width: 50%;
    margin: 0 25%;
    opacity: 1;
    text-shadow: 1px 1px 4px 0px #FFFFFFCF;
    font-weight: 800;
}
.otp-input{
    width: 40px;
}
#medal-img{
    width: 100%;
    margin: 0 auto;
}
#final-score {
    top: 22%;
    color: #C73330EB;
    font-weight: 700;
    font-size: 24px !important;
}
.score-container, .share-container {
    width: 70%;
    margin: 0 auto;
    direction: rtl;
    opacity: 1;
}
.share-container{
    padding: 20px
}
.share-container button{
    background: linear-gradient(180deg, #C73330 28.75%, #E3E3E3 242.5%) !important;
}
.swal2-title, #swal2-html-container{
    direction: rtl !important;
}