/* ----------------------------------- */
/*         ___  _        _             */
/*        / _ \| | ___  (_)_ __        */
/*       | | | | |/ _ \ | | '__|       */
/*       | |_| | | (_) || | |          */
/*        \___/|_|\___(_)_|_|          */
/*                                     */
/*        Mail: animation@Olo.ir       */
/*   Designed by Olo Ads (Oloads.ir)   */
/*                                     */
/* ----------------------------------- */
@import "font.css";
html,
body,
#gameLoad{
    width: 100%;
    height: 100%;
    min-width: 23rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: "YekanBakh", sans-serif;
}
video::-webkit-media-controls {
    display: none !important;
}
video::-webkit-media-controls-enclosure {
    display: none !important;
}
video::-webkit-media-controls-panel {
    display: none !important;
}
* {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-touch-callout: none;
}
.rtl{
    direction: rtl;
    text-align: right;
}
.ltr{
    direction: ltr;
    text-align: left;
}
.noise {
    position: fixed;
    z-index: 1000;
    width: 100%;
    min-width: 23rem;
    height: 100%;
    background-image: url(../img/noise.png);
    pointer-events: none;
}
.pageLoading{
    background: #ffa260;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    cursor: wait;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.pageLoading.active{
    cursor: pointer;
}
.pageLoading svg{
    width: 10rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
@keyframes loadingSnakeAnimation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
#loadingSnake {
    transform-origin: center;
    animation: loadingSnakeAnimation 2s linear infinite;
}
@keyframes loadingPlayAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
#loadingPlay {
    transform-origin: center;
    animation: loadingPlayAnimation 1.5s ease-in-out infinite;
}
.header{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
}
.header svg,
.footer svg{
    width: 100%;
    min-width: 23rem;
    display: block;
}
#headerMusicIcon,
#headerLogoIcon,
.gamePoint.active{
    cursor: pointer;
}
#headerMusicIcon #headerMusicIconBackground{
    fill: #23bfb7;
}
#headerMusicIcon:hover #headerMusicIconBackground{
    fill: #3cd7cf;
}
#headerMusicIcon #headerMusicIconMute{
    display: none;
}
#headerMusicIcon.mute #headerMusicIconMute{
    display: block;
}
#headerLogoIcon #headerLogoIconColor{
    fill: #008181;
}
#headerLogoIcon:hover #headerLogoIconColor{
    fill: #089f9f;
}
.screen{
    max-width: 28rem;
    margin: auto;
}
.home{
    background: #75ac75;
    width: 100%;
    height: 100%;
    display: inline-table;
}
.cover{
    width: 18rem;
    margin: 4rem auto 0 auto;
}
.gameMenu{
    padding: 0 1rem 1rem 1rem;
    margin: 0;
    list-style: none;
    text-align: center;
}
.gameMenu li{
    padding: .3rem 0;
}
.gameMenu .gameButton{
    display: inline-block;
    border: .2rem solid #282d40;
    padding: .5rem;
    box-sizing: border-box;
    font-size: 1.15rem;
    font-weight: 800;
    width: 15rem;
    text-align: center;
    color: #282d40;
    box-shadow: .35rem .35rem 0 #282d40;
    overflow: hidden;
    user-select: none;
    position: relative;
    cursor: pointer;
    transform: perspective(10rem) rotateY(0);
    transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1), box-shadow 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.gameMenu .gameButton::before{
    content: '';
    position: absolute;
    background: #ffffff36;
    width: 3rem;
    height: 100%;
    top: 0;
    bottom: 0;
    left: -3rem;
    transition: left .3s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.gameMenu .gameButton:hover{
    box-shadow: -.15rem .35rem 0 #282d40;
    transform: perspective(10rem) rotateY(3deg);
}
.gameMenu .gameButton:hover::before{
    left: 100%;
}
.gameMenu .gameButton.menu1{
    background: #2da7ee;
}
.gameMenu .gameButton.menu1:active{
    background: #0c84c9;
}
.gameMenu .gameButton.menu2{
    background: #ef6753;
}
.gameMenu .gameButton.menu2:active{
    background: #c74734;
}
.gameMenu .gameButton.menu3{
    background: #f2c45f;
}
.gameMenu .gameButton.menu3:active{
    background: #c59731;
}
.formBorder{
    border: .2rem solid #282d40;
    margin: 0 1.5rem 1.5rem 1.5rem;
    background: #a2b4d7;
    box-shadow: .2rem .2rem 0 #282d40;
    position: relative;
}
.formBorder .exitButton,
.formBorder .backButton,
.modal .exitButton,
.modalRecord .exitButton,
.helpSection .exitButton{
    border: .2rem solid #282d40;
    background-color: #e56f61;
    width: 3rem;
    height: 3rem;
    position: absolute;
    border-radius: 100%;
    margin: auto;
    left: 0;
    right: 0;
    top: -1.7rem;
    cursor: pointer;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}
.formBorder .exitButton,
.modal .exitButton,
.modalRecord .exitButton,
.helpSection .exitButton{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.682758 18.682758"><path style="fill:%23e9e4de;stroke:%23282d40;stroke-width:1.32292;" d="m 5.1382765,0.93548615 -4.20283221,4.20284095 4.20283221,4.20336 -4.20283221,4.2028399 4.20283221,4.20285 4.2033621,-4.20284 4.2028324,4.20284 4.202842,-4.20284 -4.202842,-4.2028499 4.202842,-4.20284 L 13.544471,0.93547615 9.3416386,5.1383271 Z" /></svg>');
}
.formBorder .backButton{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.682758 18.682758"><path style="fill:%23e9e4de;stroke:%23282d40;stroke-width:1.32292;" d="M 9.4066602,1.5158573 0.97219944,9.342446 9.4066602,17.170856 v -4.599053 h 8.6150038 l -1e-6,-6.456892 -8.6150028,9e-7 z" /></svg>');
}
.formBorder .exitButton:hover,
.formBorder .backButton:hover,
.modal .exitButton:hover,
.modalRecord .exitButton:hover,
.helpSection .exitButton:hover{
    background-color: #f77767;
}
.formBorder .exitButton:active,
.formBorder .backButton:active,
.modal .exitButton:active,
.modalRecord .exitButton:active,
.helpSection .exitButton:active{
    background-color: #c75446;
}
.form{
    padding: .5rem 1rem 0 1rem;
    box-sizing: border-box;
}
.form-field{
    position: relative;
    margin: 1.5rem 0;
}
.form-field.record{
    margin: 1.5rem 0 0 0;
}
.form-field .title{
    color: #282d40;
    font-size: .8rem;
    font-weight: 500;
    user-select: none;
}
.form-field .title a{
    background: #e8e5e0;
    border: .2rem solid #282d40;
    padding: .1rem .5rem;
    box-sizing: border-box;
    white-space: nowrap;
    margin: 0 .5rem 0 0;
    box-shadow: .2rem .2rem 0 #282d40;
    font-size: .7rem;
    transition: .2s all;
    cursor: pointer;
    vertical-align: middle;
}
.form-field .title a:hover{
    background: #d5d5d5;
}
.form-field .title a:active{
    box-shadow: 0 0 0 #282d40;
    background: #b7b7b7;
}
.form-field input{
    width: 100%;
    box-sizing: border-box;
    border: .2rem solid #282d40;
    font-family: "YekanBakh", sans-serif;
    font-weight: 600;
    font-size: .8rem;
    padding: 1.1rem .5rem .4rem .5rem;
    outline: none;
    transition: .2s all;
    background: #e8e5e0;
    box-shadow: .2rem .2rem 0 #282d40;
}
.form-field input:read-only{
    background: #c5c5c5;
}
.form-field input.loading{
    pointer-events: none;
}
.form-field label{
    position: absolute;
    font-size: .75rem;
    font-weight: 300;
    color: #282d40;
    right: .75rem;
    top: .9rem;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 3rem);
    transition: .15s all;
    user-select: none;
    box-shadow: 0 0 0 #282d40;
}
.form-field input:focus ~ label,
.form-field input.notEmpty ~ label{
    right: .7rem;
    top: -.65rem;
    background: #e8e5e0;
    padding: .2rem .5rem;
    font-weight: 300;
    font-size: .65rem;
    box-shadow: .2rem .2rem 0 #282d40;
    pointer-events: none;
}
.form-field button{
    background: #f09353;
    border: .2rem solid #282d40;
    font-size: .8rem;
    font-family: "YekanBakh", sans-serif;
    color: #282d40;
    padding: 0.75rem 1rem;
    box-sizing: border-box;
    cursor: pointer;
    width: 100%;
    display: inline-block;
    text-align: center;
    box-shadow: .2rem .2rem 0 #282d40;
    height: 3rem;
    user-select: none;
    transition: .15s all;
}
.form-field button:hover{
    background: #ffb887;
}
.form-field button:active{
    background: #db7d3d;
    box-shadow: 0 0 0 #282d40;
}
.form-field button span {
    display: none;
    width: .7rem;
    height: .7rem;
    border: .2rem solid #282d40;
    border-top: .2rem solid transparent;
    border-radius: 50%;
    margin: auto;
    animation: loaderSpin 0.6s linear infinite;
}
@keyframes loaderSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.form-field button.loading{
    pointer-events: none;
    background: #db7d3d;
    box-shadow: 0 0 0 #282d40;
}
.form-field button.loading span{
    display: block;
}
.form-field button.loading b{
    display: none;
}
.modalCover{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #2a2b013b;
    z-index: 200;
    backdrop-filter: blur(10px);
    cursor: pointer;
    opacity: 0;
    user-select: none;
    pointer-events: none;
    transition: .15s all;
}
.modalCover.lock{
    cursor: default;
}
.modalCover.active{
    opacity: 1;
    user-select: all;
    pointer-events: all;
}
.modal,
.modalRecord{
    display: none;
    width: 20rem;
    max-height: 10rem;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border: .2rem solid #282d40;
    background: #e8e5e0;
    box-shadow: .2rem .2rem 0 #282d40;
    z-index: 300;
    user-select: none;
}
.modal .main,
.modalRecord .main{
    box-sizing: border-box;
    padding: 2rem 1rem 1rem 1rem;
    color: #282d40;
    font-size: .85rem;
    font-weight: 600;
}
.modalRecord .main{
    padding: 1rem;
}
.modalRecord.byExit .main{
    padding: 2rem 1rem 1rem 1rem;
}
.modalRecord .main .text span{
    font-weight: 900;
    font-size: .9rem;
    color: #e13d2b;
}
.modalRecord .main svg{
    display: block;
    width: 15rem;
    margin: 1rem auto 1rem auto;
}
.modal a,
.modalReload,
.modalCopy{
    background: #49bec5;
    border: .2rem solid #282d40;
    padding: .2rem 1rem;
    box-sizing: border-box;
    white-space: nowrap;
    margin: 1rem 0 0 0;
    box-shadow: .2rem .2rem 0 #282d40;
    font-size: 1rem;
    transition: .2s all;
    cursor: pointer;
    text-align: center;
    display: block;
}
.modalCopy{
    background: #eb754f;
    overflow: hidden;
    height: 2.3rem;
    position: relative;
}
.modalCopy b{
    line-height: 1.6rem;
    position: absolute;
    left: 0;
    right: 0;
    top: .2rem;
    transition: top 0.5s cubic-bezier(0, -0.51, 0.52, 1.52);
}
.modalCopy b.active{
    top:-1.4rem;
}
.modalCopy b span{
    display: block;
}
.modal a:hover,
.modalReload:hover{
    background: #6bd5db;
}
.modalCopy:hover{
    background: #fd9270;
}
.modal a:active,
.modalReload:active{
    background: #1f9fa7;
    box-shadow: 0 0 0 #282d40;
}
.modalCopy:active{
    background: #d94f22;
    box-shadow: 0 0 0 #282d40;
}
.video{
    background: #000000;
    width: 100%;
    height: 100%;
    display: inline-table;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
#videoSection video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.helpSection{
    width: 20rem;
    position: absolute;
    top: 2rem;
    bottom: 1rem;
    right: 0;
    left: 0;
    margin: auto;
    border: .2rem solid #282d40;
    background: #e8e5e0;
    box-shadow: .2rem .2rem 0 #282d40;
    user-select: none;
    box-sizing: border-box;
    font-size: .85rem;
    z-index: 300;
}
.helpSection .main {
    padding: 2rem .5rem .5rem .5rem;
    box-sizing: border-box;
    overflow-y: auto;
    height: 100%;
}
.helpSection h1{
    font-size: 1rem;
    font-weight: 900;
    color: #b50a0a;
    margin: .5rem 0;
}
.helpSection b{
    background: #e3dd7f;
    color: #282d40;
    box-sizing: border-box;
    padding: 0 .25rem;
}
.slide{
    bottom: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 60;
}
.slide svg{
    display: block;
}
.game{
    background: #24bfb6;
    width: 100%;
    height: 100%;
    display: inline-table;
}
.game svg{
    display: block;
    height: calc(100svh - 13rem);
    margin: 4rem auto 9rem auto;
    max-width: 100%;
    object-fit: cover;
    box-sizing: border-box;
    padding: .5rem;
}
#gamePiece,
.gameNotSelect{
    pointer-events: none;
}
.gamePoint{
    fill: transparent;
    pointer-events: none;
}
.gamePoint.active{
    pointer-events: auto;
}
.gamePoint.active:hover{
    fill: #2639ad33;
}
.questionPoint.hide{
    display: none;
}
.footer{
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 50;
}
#gameDice,
#gameModalRecord{
    cursor: pointer;
}
#diceCircleColor{
    fill: #de4048;
}
#diceCoinsColor{
    fill:#ff921e;
}
#gameDice:hover #diceCircleColor{
    fill: #ef565e;
}
#gameDice:hover #diceCoinsColor{
    fill: #ffb76a;
}
#gameDice.disabled{
    pointer-events: none;
}
#gameReloading,
#gameExitToMain{
    cursor: pointer;
}
#gameReloading #gameReloadingCircle{
    fill: #63b9d0;
}
#gameReloading:hover #gameReloadingCircle{
    fill: #87d6eb;
}
#gameReloading:active #gameReloadingCircle{
    fill: #60a3b5;
}
#gameExitToMain #gameExitToMainCircle{
    fill: #e56f61;
}
#gameExitToMain:hover #gameExitToMainCircle{
    fill: #f19186;
}
#gameExitToMain:active #gameExitToMainCircle{
    fill: #bb4c3f;
}
#gameModalRecord{
    scale: 1;
    transform-origin: 40% 50%;
    transition: .25s scale;
}
#gameModalRecord:hover{
    scale: 1.08;
}
#gameModalRecordCircle{
    fill: #f0b039;
}
#gameModalRecord:hover #gameModalRecordCircle{
    fill: #ffc559;
}
#gameModalRecord:active #gameModalRecordCircle{
    fill: #eb9a04;
}
@media (hover: none), (pointer: coarse) {
    #headerLogoIcon:hover #headerLogoIconColor{
        fill: #008181;
    }
    #headerMusicIcon:hover #headerMusicIconBackground{
        fill: #23bfb7;
    }
    .gameMenu .gameButton:hover{
        box-shadow: .35rem .35rem 0 #282d40;
        transform: perspective(10rem) rotateY(0);
    }
    .gameMenu .gameButton:hover::before{
        left: -3rem;
    }
    .formBorder .exitButton:hover,
    .formBorder .backButton:hover,
    .modal .exitButton:hover,
    .helpSection .exitButton:hover,
    .modalRecord .exitButton:hover{
        background-color: #e56f61;
    }
    .form-field button:hover{
        background: #f09353;
    }
    .form-field .title a:hover{
        background: #e8e5e0;
    }
    .gamePoint.active:hover{
        fill: transparent;
    }
    #gameDice:hover #diceCircleColor{
        fill: #de4048;
    }
    #gameDice:hover #diceCoinsColor{
        fill: #ff921e;
    }
    #gameReloading:hover #gameReloadingCircle{
        fill: #63b9d0;
    }
    #gameExitToMain:hover #gameExitToMainCircle{
        fill: #e56f61;
    }
    #gameModalRecord:hover{
        scale: 1;
    }
    #gameModalRecord:hover #gameModalRecordCircle{
        fill: #f0b039;
    }
    .modalCopy:hover{
        background: #eb754f;
    }
    .modalReload:hover{
        background: #49bec5;
    }
}