/*#region Fonts*/

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/En/Rubik-Light.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/En/Rubik-LightItalic.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/En/Rubik-Regular.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/En/Rubik-Medium.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/En/Rubik-MediumItalic.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/En/Rubik-SemiBold.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/En/Rubik-SemiBoldItalic.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/En/Rubik-Bold.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/En/Rubik-BoldItalic.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/En/Rubik-ExtraBold.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/En/Rubik-ExtraBoldItalic.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/En/Rubik-Black.ttf) format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/En/Rubik-BlackItalic.ttf) format('woff2');
}

/*#endregion*/

/*#region Typo*/

.typo-display-large {
    font-size: 3.5625rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 4rem !important;
    letter-spacing: 0.015625rem !important;
}

.typo-display-medium {
    font-size: 2.8125rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 3.25rem !important;
}

.typo-display-small {
    font-size: 2.25rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 2.75rem !important;
}

.typo-headline-large {
    font-size: 2rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 2.5rem !important;
}

.typo-headline-medium {
    font-size: 1.75rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 2.25rem !important;
}

.typo-headline-small {
    font-size: 1.5rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.5rem !important;
}

.typo-title-large {
    font-size: 1rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1rem !important;
}

.typo-title-medium {
    font-size: 0.75rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.125rem !important;
    letter-spacing: 0.009375rem !important;
}

.typo-title-small {
    font-size: 0.875rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    letter-spacing: 0.00625rem !important;
}

.typo-label-large {
    font-size: 0.75rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.25rem !important;
    letter-spacing: 0.00625rem !important;
}

.typo-label-medium {
    font-size: 0.75rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1rem !important;
    letter-spacing: 0.03125rem !important;
}

.typo-label-small {
    font-size: 0.6875rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1rem !important;
    letter-spacing: 0.03125rem !important;
}

.typo-body-large {
    font-size: 1rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.5rem !important;
    letter-spacing: 0.03125rem !important;
}

.typo-body-medium {
    font-size: 0.875rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.25rem !important;
    letter-spacing: 0.015625rem !important;
}

.typo-body-small {
    font-size: 0.75rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1rem !important;
    letter-spacing: 0.025rem !important;
}

.typo-body-extra-small {
    font-size: 0.6875rem !important;
    font-family: Rubik, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 0.75rem !important;
}

/*#endregion*/

/*#region dotnet7-loading-progress*/

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    font-family: "Vazir";
    direction: rtl;
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "بارگذاری ...");
    }

/*endregion*/

/*#region MudBlazorCustom*/
.mud-progress-linear.mud-progress-linear-rounded.mud-progress-linear-large.mud-progress-linear-color-primary.horizontal.mud-flip-x-rtl {
    padding: 4px 3px;
    justify-items: center;
    align-items: center;
    display: flex;
    height: 16px !important;
    background-color: #362F2B;
}

.mud-progress-linear.mud-progress-linear-rounded .mud-progress-linear-bars {
    height: 10px;
}

    .mud-progress-linear.mud-progress-linear-rounded .mud-progress-linear-bars .mud-progress-linear-bar {
        height: 10px;
        background-image: linear-gradient(to bottom, #ffb774, #ec923f 23%, #da6f0c 62%);
    }

.mud-button {
    text-transform: none;
}

.mud-list-item .mud-list-item-text p {
    text-align: center;
}

/*#endregion*/

/*#region Custom*/
.border-orange-gradient {
    border-radius: 15px;
    border-style: solid;
    border-width: 2px;
    border-image-source: linear-gradient(to left, #da6f0c, #e6ce7c);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, #5a4b1a, #000), linear-gradient(to left, #da6f0c, #e6ce7c);
    background-origin: border-box;
    background-clip: content-box, border-box;
}


.nav-item.active {
    background: #2B4F1F;
    border-radius: 50px
}

.main-content {
    flex: 1;
    overflow-y: auto;
}


/*.moveUpFadeOut {
    animation: moveUpFadeOut 0.8s ease-out forwards;
    will-change: transform, opacity;
}*/

.shake-active {
    animation: shake 0.1s infinite;
}



@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-2px);
    }

    40%, 80% {
        transform: translateX(2px);
    }
}

@-webkit-keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-2px);
    }

    40%, 80% {
        transform: translateX(2px);
    }
}

.content {
    border-radius: 25px;
    box-shadow: 1px -19px 22px -9px rgba(147, 123, 42, 0.7);
    border-style: solid;
    border-width: 2px;
    border-image-source: linear-gradient(179deg, #fdc93a 1%, #534d39 17%, #000 43%);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, #000, #000), linear-gradient(179deg, #fdc93a 1%, #534d39 17%, #000 43%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.Frame-51 {
    width: 110px;
    height: 116px;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to top, #42da0d 0%, #000 100%);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, #362f2b, #362f2b), linear-gradient(to top, #42da0d 0%, #000 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.reward-text {
    color: white;
    font-size: 40px !important;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
.active-transform {
    transform: scale(1.02) translateZ(-5px) rotateX(10deg) rotateY(1deg);
    transition: transform 0.1s;
}

.reward-text.moveUpFadeOut {
    animation: moveUpFadeOut 0.8s ease-out forwards;
}
@keyframes moveUpFadeOut {
    0% {
        transform: translateY(-50%);
        opacity: 1;
    }

    100% {
        transform: translateY(-400%);
        opacity: 0;
    }
}

@-webkit-keyframes moveUpFadeOut {
    0% {
        transform: translateY(-50%);
        opacity: 1;
    }

    100% {
        transform: translateY(-400%);
        opacity: 0;
    }
}

.token-balance-bg {
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
}

.divider {
    width: 32px;
    height: 4px;
    background-color: #9F8D83;
    border-radius: 100px;
    opacity: 40%;
}

.bottom-sheet {
    animation: mud-open-dialog-bottom 225ms cubic-bezier(0.39, 0.575, 0.565, 1) both;
    background-color: #221A15;
    border-radius: 28px 28px 0 0;
    box-shadow: 1px -19px 22px -9px #937B2AB2;
}

    .bottom-sheet.mud-dialog-width-full {
        width: 100%;
        border-radius: 1rem 1rem 0 0;
    }

@-webkit-keyframes mud-open-dialog-bottom {
    from {
        transform: translateY(50%);
    }

    to {
        transform: translateY(0%);
    }
}

@keyframes mud-open-dialog-bottom {
    from {
        transform: translateY(50%);
    }

    to {
        transform: translateY(0%);
    }
}

.bottom-sheet .mud-button {
    border-radius: 100px;
    background-color: #FFB787;
    color: #502400
}

.question-title-bg {
    border-radius: 18px;
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to left, #535353 47%, #ffb787);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, #221a15, #221a15), linear-gradient(to left, #535353 47%, #ffb787);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.friend-item {
    padding: 6px 10px;
    border-radius: 15px;
    background-image: linear-gradient(to right, #484649 40%, #fb9b5c);
}

.task-item {
    border-radius: 18px;
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to bottom, #fdc93a, #666);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, #3b383e, #3b383e), linear-gradient(to bottom, #fdc93a, #666);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.tab {
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to bottom, #42DA0D, #000);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, #19120D, #19120D), linear-gradient(to bottom, #42DA0D, #000);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.profit-card-item {
    border-radius: 18px;
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to bottom, #2262E0, #666);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, #3B383E, #3B383E), linear-gradient(to bottom, #2262E0, #666);
    background-origin: border-box;
    background-clip: content-box, border-box;
    flex: 1 1 0;
}

    .profit-card-item:nth-last-child(-n+1) {
        width: 47.5% !important;
        flex: 0 0 auto !important;
    }

.question-card-item {
    border-radius: 18px;
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to bottom, #FFDA56, #666);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, #3B383E, #3B383E), linear-gradient(to bottom, #FFDA56, #666);
    background-origin: border-box;
    background-clip: content-box, border-box;
    flex: 1 1 0;
}

    .question-card-item:nth-last-child(-n+1) {
        width: 47.5% !important;
        flex: 0 0 auto !important;
    }

.boosts-card-item {
    border-radius: 18px;
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to bottom, #FF3A3A, #666);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, #3B383E, #3B383E), linear-gradient(to bottom, #FF3A3A, #666);
    background-origin: border-box;
    background-clip: content-box, border-box;
    flex: 1 1 0;
}

    .boosts-card-item:nth-last-child(-n+1) {
        width: 47.5% !important;
        flex: 0 0 auto !important;
    }

#splash-screen {
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    background-image: url(../img/splash.jpg);
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: white;
    font-size: 24px;
}

.splash-loading > svg > .mud-progress-circular-circle {
    stroke: white !important;
}

#app {
    max-width: 480px;
    margin: 0 auto;
}


#coins-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* جلوگیری از تداخل با سایر عناصر صفحه */
    overflow: hidden;
    z-index: 9999;
}

.coin {
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 30px;
    background-image: url(../img/coin.png); /* مسیر تصویر سکه */
    background-size: cover;
    animation: coinMoveUp 0.5s linear;
    opacity: 0;
}

@keyframes coinMoveUp {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    50% {
        opacity: .6;
    }

    100% {
        transform: translateY(-100vh);
        opacity: 0;
    }
}

@-webkit-keyframes coinMoveUp {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    50% {
        opacity: .6;
    }

    100% {
        transform: translateY(-100vh);
        opacity: 0;
    }
}

.unselectable {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -webkit-touch-callout: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Likely future */
}

.mud-switch {
    margin-left: 0;
    margin-right: 0;
}
/*#endregion*/