/**
==================================================
GLOBAL
==================================================
**/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -webkit-touch-callout: none;

    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;

    font-family: 'Baloo Paaji 2', sans-serif;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

}

:root {
    --darkBlue: #002036;
    --cursor-default: url('./images/cursor.png'), default;
    --cursor-pointer: url('./images/pointer.png'), pointer;
    --optimize-image: translateZ(0);
}

@font-face {
    font-family: 'Baloo Paaji 2';
    src: url('fonts/BalooPaaji2-Bold.woff2') format('woff2'),
        url('fonts/BalooPaaji2-Bold.woff') format('woff');
    font-weight: "normal";
    font-style: normal;
    font-display: swap;
}

/**
==================================================
BORDER TEXT
==================================================
**/

.shadow-text-size-4 {
    text-shadow: 
    rgb(0, 32, 54) 4.00000px 0.00000px 0px,
    rgb(0, 32, 54) 3.91259px 0.83165px 0px,
    rgb(0, 32, 54) 3.65418px 1.62695px 0px,
    rgb(0, 32, 54) 3.23607px 2.35114px 0px,
    rgb(0, 32, 54) 2.67652px 2.97258px 0px,
    rgb(0, 32, 54) 2.00000px 3.46410px 0px,
    rgb(0, 32, 54) 1.23607px 3.80423px 0px,
    rgb(0, 32, 54) 0.41811px 3.97809px 0px,
    rgb(0, 32, 54) -0.41811px 3.97809px 0px,
    rgb(0, 32, 54) -1.23607px 3.80423px 0px,
    rgb(0, 32, 54) -2.00000px 3.46410px 0px,
    rgb(0, 32, 54) -2.67652px 2.97258px 0px,
    rgb(0, 32, 54) -3.23607px 2.35114px 0px,
    rgb(0, 32, 54) -3.65418px 1.62695px 0px,
    rgb(0, 32, 54) -3.91259px 0.83165px 0px,
    rgb(0, 32, 54) -4.00000px 0.00000px 0px,
    rgb(0, 32, 54) -3.91259px -0.83165px 0px,
    rgb(0, 32, 54) -3.65418px -1.62695px 0px,
    rgb(0, 32, 54) -3.23607px -2.35114px 0px,
    rgb(0, 32, 54) -2.67652px -2.97258px 0px,
    rgb(0, 32, 54) -2.00000px -3.46410px 0px,
    rgb(0, 32, 54) -1.23607px -3.80423px 0px,
    rgb(0, 32, 54) -0.41811px -3.97809px 0px,
    rgb(0, 32, 54) 0.41811px -3.97809px 0px,
    rgb(0, 32, 54) 1.23607px -3.80423px 0px,
    rgb(0, 32, 54) 2.00000px -3.46410px 0px,
    rgb(0, 32, 54) 2.67652px -2.97258px 0px,
    rgb(0, 32, 54) 3.23607px -2.35114px 0px,
    rgb(0, 32, 54) 3.65418px -1.62695px 0px,
    rgb(0, 32, 54) 3.91259px -0.83165px 0px
}

.shadow-text-size-6 {
    text-shadow:
        var(--darkBlue) 6.00000px 0.00000px 0px,
        var(--darkBlue) 5.96713px 0.62717px 0px,
        var(--darkBlue) 5.86889px 1.24747px 0px,
        var(--darkBlue) 5.70634px 1.85410px 0px,
        var(--darkBlue) 5.48127px 2.44042px 0px,
        var(--darkBlue) 5.19615px 3.00000px 0px,
        var(--darkBlue) 4.85410px 3.52671px 0px,
        var(--darkBlue) 4.45887px 4.01478px 0px,
        var(--darkBlue) 4.01478px 4.45887px 0px,
        var(--darkBlue) 3.52671px 4.85410px 0px,
        var(--darkBlue) 3.00000px 5.19615px 0px,
        var(--darkBlue) 2.44042px 5.48127px 0px,
        var(--darkBlue) 1.85410px 5.70634px 0px,
        var(--darkBlue) 1.24747px 5.86889px 0px,
        var(--darkBlue) 0.62717px 5.96713px 0px,
        var(--darkBlue) 0.00000px 6.00000px 0px,
        var(--darkBlue) -0.62717px 5.96713px 0px,
        var(--darkBlue) -1.24747px 5.86889px 0px,
        var(--darkBlue) -1.85410px 5.70634px 0px,
        var(--darkBlue) -2.44042px 5.48127px 0px,
        var(--darkBlue) -3.00000px 5.19615px 0px,
        var(--darkBlue) -3.52671px 4.85410px 0px,
        var(--darkBlue) -4.01478px 4.45887px 0px,
        var(--darkBlue) -4.45887px 4.01478px 0px,
        var(--darkBlue) -4.85410px 3.52671px 0px,
        var(--darkBlue) -5.19615px 3.00000px 0px,
        var(--darkBlue) -5.48127px 2.44042px 0px,
        var(--darkBlue) -5.70634px 1.85410px 0px,
        var(--darkBlue) -5.86889px 1.24747px 0px,
        var(--darkBlue) -5.96713px 0.62717px 0px,
        var(--darkBlue) -6.00000px 0.00000px 0px,
        var(--darkBlue) -5.96713px -0.62717px 0px,
        var(--darkBlue) -5.86889px -1.24747px 0px,
        var(--darkBlue) -5.70634px -1.85410px 0px,
        var(--darkBlue) -5.48127px -2.44042px 0px,
        var(--darkBlue) -5.19615px -3.00000px 0px,
        var(--darkBlue) -4.85410px -3.52671px 0px,
        var(--darkBlue) -4.45887px -4.01478px 0px,
        var(--darkBlue) -4.01478px -4.45887px 0px,
        var(--darkBlue) -3.52671px -4.85410px 0px,
        var(--darkBlue) -3.00000px -5.19615px 0px,
        var(--darkBlue) -2.44042px -5.48127px 0px,
        var(--darkBlue) -1.85410px -5.70634px 0px,
        var(--darkBlue) -1.24747px -5.86889px 0px,
        var(--darkBlue) -0.62717px -5.96713px 0px,
        var(--darkBlue) -0.00000px -6.00000px 0px,
        var(--darkBlue) 0.62717px -5.96713px 0px,
        var(--darkBlue) 1.24747px -5.86889px 0px,
        var(--darkBlue) 1.85410px -5.70634px 0px,
        var(--darkBlue) 2.44042px -5.48127px 0px,
        var(--darkBlue) 3.00000px -5.19615px 0px,
        var(--darkBlue) 3.52671px -4.85410px 0px,
        var(--darkBlue) 4.01478px -4.45887px 0px,
        var(--darkBlue) 4.45887px -4.01478px 0px,
        var(--darkBlue) 4.85410px -3.52671px 0px,
        var(--darkBlue) 5.19615px -3.00000px 0px,
        var(--darkBlue) 5.48127px -2.44042px 0px,
        var(--darkBlue) 5.70634px -1.85410px 0px,
        var(--darkBlue) 5.86889px -1.24747px 0px,
        var(--darkBlue) 5.96713px -0.62717px 0px;
}

.shadow-text-size-9 {
    text-shadow:
        var(--darkBlue) 9.00000px 0.00000px 0px,
        var(--darkBlue) 8.95070px 0.94076px 0px,
        var(--darkBlue) 8.80333px 1.87121px 0px,
        var(--darkBlue) 8.55951px 2.78115px 0px,
        var(--darkBlue) 8.22191px 3.66063px 0px,
        var(--darkBlue) 7.79423px 4.50000px 0px,
        var(--darkBlue) 7.28115px 5.29007px 0px,
        var(--darkBlue) 6.68830px 6.02218px 0px,
        var(--darkBlue) 6.02218px 6.68830px 0px,
        var(--darkBlue) 5.29007px 7.28115px 0px,
        var(--darkBlue) 4.50000px 7.79423px 0px,
        var(--darkBlue) 3.66063px 8.22191px 0px,
        var(--darkBlue) 2.78115px 8.55951px 0px,
        var(--darkBlue) 1.87121px 8.80333px 0px,
        var(--darkBlue) 0.94076px 8.95070px 0px,
        var(--darkBlue) 0.00000px 9.00000px 0px,
        var(--darkBlue) -0.94076px 8.95070px 0px,
        var(--darkBlue) -1.87121px 8.80333px 0px,
        var(--darkBlue) -2.78115px 8.55951px 0px,
        var(--darkBlue) -3.66063px 8.22191px 0px,
        var(--darkBlue) -4.50000px 7.79423px 0px,
        var(--darkBlue) -5.29007px 7.28115px 0px,
        var(--darkBlue) -6.02218px 6.68830px 0px,
        var(--darkBlue) -6.68830px 6.02218px 0px,
        var(--darkBlue) -7.28115px 5.29007px 0px,
        var(--darkBlue) -7.79423px 4.50000px 0px,
        var(--darkBlue) -8.22191px 3.66063px 0px,
        var(--darkBlue) -8.55951px 2.78115px 0px,
        var(--darkBlue) -8.80333px 1.87121px 0px,
        var(--darkBlue) -8.95070px 0.94076px 0px,
        var(--darkBlue) -9.00000px 0.00000px 0px,
        var(--darkBlue) -8.95070px -0.94076px 0px,
        var(--darkBlue) -8.80333px -1.87121px 0px,
        var(--darkBlue) -8.55951px -2.78115px 0px,
        var(--darkBlue) -8.22191px -3.66063px 0px,
        var(--darkBlue) -7.79423px -4.50000px 0px,
        var(--darkBlue) -7.28115px -5.29007px 0px,
        var(--darkBlue) -6.68830px -6.02218px 0px,
        var(--darkBlue) -6.02218px -6.68830px 0px,
        var(--darkBlue) -5.29007px -7.28115px 0px,
        var(--darkBlue) -4.50000px -7.79423px 0px,
        var(--darkBlue) -3.66063px -8.22191px 0px,
        var(--darkBlue) -2.78115px -8.55951px 0px,
        var(--darkBlue) -1.87121px -8.80333px 0px,
        var(--darkBlue) -0.94076px -8.95070px 0px,
        var(--darkBlue) -0.00000px -9.00000px 0px,
        var(--darkBlue) 0.94076px -8.95070px 0px,
        var(--darkBlue) 1.87121px -8.80333px 0px,
        var(--darkBlue) 2.78115px -8.55951px 0px,
        var(--darkBlue) 3.66063px -8.22191px 0px,
        var(--darkBlue) 4.50000px -7.79423px 0px,
        var(--darkBlue) 5.29007px -7.28115px 0px,
        var(--darkBlue) 6.02218px -6.68830px 0px,
        var(--darkBlue) 6.68830px -6.02218px 0px,
        var(--darkBlue) 7.28115px -5.29007px 0px,
        var(--darkBlue) 7.79423px -4.50000px 0px,
        var(--darkBlue) 8.22191px -3.66063px 0px,
        var(--darkBlue) 8.55951px -2.78115px 0px,
        var(--darkBlue) 8.80333px -1.87121px 0px,
        var(--darkBlue) 8.95070px -0.94076px 0px;
}


/**
==================================================
HTML / BODY / CANVAS / BACKGROUND
==================================================
**/

html,
body,
.main {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    cursor: url('./images/cursor.png'), default;
    position: relative;
    background-color: #486d2fff;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 0;
    width: 1920;
    height: 1080;
}

.background {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute
}

/**
==================================================
TOP WRAPPER
==================================================
**/

.top-wrapper {
    display: flex;
    width: 100%;
    height: 105px;
    position: absolute;
}

.top-wrapper-background-img {
    height: 180px;
    width: 2200px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.top-wrapper-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.top-wrapper-logo-img {
    width: auto;
    height: 190px;
}

/**
==================================================
**/

.wallet {
    display: flex;
    align-items: center;
    position: absolute;
    right: 20px;
}

.wallet-homepage {
    display: flex;
    align-items: center;
}

.wallet-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #FDC80F, #DD8432);    
    border-radius: 45px;
    height: 90px;
    width: 90px;
    border: 6px solid var(--darkBlue);
    transform: var(--optimize-image);
    
}

.wallet-ruby-img {
    height: 60px;
    width: auto;
    position: relative;
    left: 2px;
    top: 1px;
    animation: walletRuby 3s infinite;
    transform: scale(0.9);
}

.wallet-shine0 {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 25px;
    animation: shine 6s infinite;
    opacity: 0;
}

.wallet-shine1 {
    position: absolute;
    top: 55px;
    left: 20px;
    height: 17px;
    animation: shine 6s 1s infinite;
    opacity: 0;

}

@keyframes walletRuby {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.9);
    }
}

@keyframes shine {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  20% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

.wallet-money-amount {
    width: 160px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;    
    color: white;
    font-size: 25px;
    box-shadow: inset 0 10px 0 #b6a388;
    background-color: #e9d1b0;
    border-top: 6px solid var(--darkBlue);
    border-bottom: 6px solid var(--darkBlue);
    margin-right: -5px;
    margin-left: -5px;

}

.wallet-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(to bottom, #FDC80F, #DD8432);
    box-shadow: inset 0 -6px 0 #945D2A;
    border-radius: 12px;
    border: 6px solid var(--darkBlue);
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
}

.wallet-buy:hover {
    transform: scale(1.05);
}

.wallet-buy:active {
    transform: scale(0.95);
}

.wallet-buy-img {
    height: 40px;
    width: auto;
}

/**
==================================================
MIDDLE WRAPPER
==================================================
**/


.middle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    position: relative;
    width: 1300px;
    height: 640px;
}

/**
==================================================
**/

.left-wrap {
    background-color: rgba(0, 0, 0, 0.35);
    width: 240px;
    height: 400px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/**
==================================================
**/

.middle-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 400px;
    gap: 100px;
}

.middle-wrap-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 550px;
    height: 540px;
    text-align: center;
    font-size: 1rem;
    gap: 30px;
}

.input-username {
    width: 95%;
    background-color: #e9d1b0;
    border: 6px solid var(--darkBlue);
    box-shadow: inset 0 8px 0 #b6a388;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 12px;
    color: white;
    outline: none;
    transition: transform 150ms;
}

.input-username:hover {
    transform: scale(1.05);
}

.input-username::placeholder {
    color: white;
}

.btn-servers-list {
    width: 90%;
    background-color: #383232;
    cursor: var(--cursor-pointer);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    border: 6px solid var(--darkBlue);
    box-shadow: inset 0 -8px 0 #21211f;
    transition: transform 150ms;

}

.btn-servers-list:hover {
    transform: scale(1.05);
}

.btn-servers-list:active {
    transform: scale(0.95);
}

.btn-servers-list-text {
    color: white;
    font-size: 1.4rem;
}

.btn-play-game {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    background: linear-gradient(to bottom, #FDC80F, #DD8432);
    box-shadow: inset 0 -8px 0 #945D2A;
    border-radius: 12px;
    border: 6px solid var(--darkBlue);
    cursor: var(--cursor-pointer);
    overflow: hidden;
    transition: transform 150ms;
}

.btn-play-game:hover {
    background-color: #c8ad30;
    transform: scale(1.05);
}

.btn-play-game:active {
    background-color: #bda32d;
    transform: scale(0.95);
}

.btn-play-text {
    font-size: 2.5rem;
    color: white;
}

/**
==================================================
**/

.right-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 235px;
}

.profile-button-container,
.shop-button-container {
    position: relative;
    display: flex;
}


.profile-button,
.shop-button {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 100px;
    background: linear-gradient(to bottom, white, rgb(139, 253, 253));
    color: white;
    font-size: 2rem;
    border-radius: 12px;
    border: 6px solid var(--darkBlue);
    transition: transform 150ms;
    cursor: var(--cursor-pointer);
    box-sizing: border-box;
}


.profile-button:hover,
.shop-button:hover {
    transform: scale(1.05);
}

.profile-button:active,
.shop-button:active {
    transform: scale(0.95);
}

.profile-button-icon,
.shop-button-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: var(--optimize-image);
}

.profile-button-text,
.shop-button-text {
    position: relative;
    font-size: 2.5rem;
}


/**
==================================================
**/

.bottom-wrap {
    display: flex;
    width: 650px;
    height: 250px;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 12px;
}

/**
==================================================
ACCOUNT WRAPPER
==================================================
**/

.account-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 550px;
    height: 280px;
    display: flex;
    align-items: flex-start;
}

.logged-out {
    display: flex;
    flex-direction: column;
    position: absolute;
    text-align: center;
    gap: 20px;
    left: 20px;
    top: 20px;
}

.logged-out-btn-login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 70px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, #FDC80F, #DD8432);
    border: 6px solid var(--darkBlue);
    border-radius: 12px;
    box-shadow: inset 0 -8px 0 #945D2A;
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
}

.logged-out-btn-login:hover { 
    transform: scale(1.05);
}

.logged-out-btn-login:active {
    transform: scale(0.95);
}

.logged-out-login-text {
    font-size: 1.5rem;
    color: white;
}

/**
==================================================
**/

.logged-out-btn-register {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 75px;
    background: linear-gradient(to bottom, white, rgb(139, 253, 253));
    overflow: hidden;
    position: relative;
    border: 6px solid var(--darkBlue);
    border-radius: 12px;
    box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.35);
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
    color: white;
}

.logged-out-btn-register:hover {
    transform: scale(1.05);

}

.logged-out-btn-register:active {
    transform: scale(0.95);
}

.logged-out-register-text {
    font-size: 1.5rem;
    position: absolute;
    top: 0px;
    left: 15px;

}

.logged-out-free-ruby-text {
    font-size: 1rem;
    position: absolute;
    bottom: 0;  
    left: 0;           
    right: 0;        
}

.logged-out-register-ruby-img {
    height: 95%;
    position: absolute;
    right: 20px;
    top: 0;
    transform: var(--optimize-image);
}

/**
==================================================
**/

.logged-in {
    position: relative;
    left: 20px;
}

.account-profile {
    display: flex;
    justify-content: center;
    align-items: center;
}

.account-profile-circle-background {
    position: relative;
    z-index: 2;
}

.account-profile-circle-fill {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #DD8432 0deg, #464a4e 0deg);
    position: relative;
    border: 6px solid var(--darkBlue);
}

.account-profile-circle-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    background: #221c1c;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.account-profile-circle-text {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #FDC80F, #DD8432);   
    display: flex;
    justify-content: center;
    align-items: center;
    border: 6px solid var(--darkBlue);
} 

/**
==================================================
**/

.experience-level-bar-container {
    width: 400px;
    height: 65px;
    border-radius: 26px;
    border: 6px solid var(--darkBlue);
    margin-left: -30px;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #464a4e;
}

.experience-level-bar {
    position: absolute;
    width: 97%;
    height: 35px;
    border-radius: 12px;
    background-color: #221c1c; 
    border: 6px solid var(--darkBlue);
}

.experience-level-bar-fill {
    width: 200px;
    height: 23px;
    background: linear-gradient(to bottom, #FDC80F, #DD8432);
}

.experience-level-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
}

/**
==================================================
**/

.logged-out-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 190px;
    height: 60px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, #FF4D4D, #B20000);
    border: 6px solid var(--darkBlue);
    border-radius: 12px;
    box-shadow: inset 0 -8px 0 #800000;
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
    margin-top: 15px;
}

.logged-out-btn:hover {
    transform: scale(1.05);
}

.logged-out-btn:active {
    transform: scale(0.95);
}

.logged-out-btn-text {
    font-size: 1.5rem;
    color: white;
}


/**
==================================================
LOGIN WRAPPER
==================================================
**/


.login-wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 550px;
    height: 550px;
    background-color: #FAFAFA;
    border: var(--darkBlue) 10px solid;
    border-radius: 15px;
    
    background-image: url('./images/menu/background-stars.png');
    background-position: 0 0;
    background-size: auto;
    background-repeat: repeat;
    animation: moveBackground 30s linear infinite;
}


@keyframes moveBackground {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -400px -413px;
    }
}


.login-wrapper-form-title {
    position: absolute;
    top: -45px;
    left: 10px;
    font-size: 3rem;
    color: white;
}

.login-wrapper-close-tab {
    position: absolute;
    top: -35px;
    right: -30px;
    font-size: 2.5rem;
    color: var(--darkBlue);
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
}

.login-wrapper-close-tab:hover {
    transform: scale(1.05);
}
.login-wrapper-close-tab:active {
    transform: scale(0.95);
}

/**
==================================================
**/

.login-form {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    position: relative;
}

.login-form label {
    width: 100%;
    text-align: left;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: var(--cursor-pointer);
    color: var(--darkBlue);
}

.login-form-email-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1rem;
}

.login-form-username-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1rem;
}

.login-form-password-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1rem;
}

.login-form-input-container {
    position: relative;
    width: 100%;
}
 
.login-form-input-container input {
    width: 100%;
    height: 45px;
    border: none;
    border-radius: 6px;
    font-size: 1.3rem;
    background-color: #9A9A9E;
    text-align: center;
}

.login-form-input-container input:focus {
    outline: none;
    box-shadow: none;
}

.login-form-input-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #595960;
}
.login-form-btn-register {
    width: 50%;
    border-radius: 10px;
    border: none;
    background: linear-gradient(to bottom, #FDC80F, #DD8432);
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 8px 0 #945D2A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
}

.login-form-btn-register:hover {
    transform: scale(1.05);
}

.login-form-btn-register:active {
    transform: scale(0.95);
}

.login-form-btn-register {
    width: 50%;
    height: 45px;
    margin-top: 2rem;
}

.login-form-btn-login {
    width: 50%;
    border-radius: 10px;
    border: none;
    background: linear-gradient(to bottom, #FDC80F, #DD8432);
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 8px 0 #945D2A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
}

.login-form-btn-login:hover {
    transform: scale(1.05);
}

.login-form-btn-login:active {
    transform: scale(0.95);
}

.login-form-btn-login {
    width: 50%;
    height: 45px;
    margin-top: 2rem;
}

.error-email {
    color: red;
    font-size: 0.9rem;
    position: absolute;
}

.error-username {
    color: red;
    font-size: 0.9rem;
    position: absolute;
}

.error-password{
    color: red;
    font-size: 0.9rem;
    position: absolute;
}


/**
==================================================
USER HUB WRAPPER
==================================================
**/

.user-hub-wrapper {
    position: absolute;
    display: flex;
    flex-direction: row;
    width: 1100px;
    height: 605px;
}

.user-hub-wrapper-title {
    position: absolute;
    left: 120px;
    top: -40px;
    color: white;
    font-size: 3rem;
    z-index: 1;
}

.user-hub-wrapper-close-tab {
    position: absolute;
    top: -35px;
    right: -30px;
    font-size: 2.5rem;
    color: var(--darkBlue);
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
    z-index: 2;
}

.user-hub-wrapper-close-tab:hover {
    transform: scale(1.05);
}

.user-hub-wrapper-close-tab:active {
    transform: scale(0.95);
}


.user-hub-tabs {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-hub-tab {
    background-color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 100px;
    border: 6px solid var(--darkBlue);
}

.user-hub-tab-icon {
    height: 45px;
    width: 45px;
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
}

.user-hub-tab-icon:hover {
    transform: scale(1.05);
}

.user-hub-tab-icon:active {
    transform: scale(0.95);
}


/**
==================================================
USER HUB PROFILE CONTAINER
==================================================
**/

.user-hub-profile-container {
    width: 1000px;
    height: 605px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 6px solid var(--darkBlue);
    border-radius: 18px;
    background-image: url('./images/menu/background-stars.png');
    background-position: 0 0;
    background-size: auto;
    background-repeat: repeat;
    animation: moveBackground 30s linear infinite;
}

/**
==================================================
USER HUB INVENTORY CONTAINER
==================================================
**/

.inventory-container {
    width: 1000px;
    height: 605px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 6px solid var(--darkBlue);
    border-radius: 18px;
    background-image: url('./images/menu/background-stars.png');
    background-position: 0 0;
    background-size: auto;
    background-repeat: repeat;
    animation: moveBackground 30s linear infinite;
}

.inventory-boxes-container {
    width: 90%;
    height: 80%;
    border-top: 80px solid #1acd61;  
    border-right: 10px solid #1acd61;
    border-bottom: 10px solid #1acd61;
    border-left: 10px solid #1acd61;
    background: transparent;
    border-radius: 18px;
    position: relative;
}

.inventory-boxes-container-title {
    position: absolute;
    color: white;
    font-size: 3rem;
    left: 10px;
    top: -80px;
}

.inventory-slots-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 18px;
}

.inventory-slot {
    display: flex;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform 150ms;
    cursor: var(--cursor-pointer);
}

.inventory-slot:hover {
    transform: scale(1.05);
}

.inventory-slot:active {
    transform: scale(0.95);
}

.inventory-background-slot {
    width: auto;
    height: 120px;
}

.inventory-box-image {
    width: auto;
    height: 100px;
    position: absolute;
}

.inventory-box-amount {
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 1.5rem;
    color: white;
}

/**
==================================================
INVENTORY POP-UP WRAPPER
==================================================
**/

.inventory-pop-up-wrapper {
    background-color: white;
    position: absolute;
    width: 250px;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    border: 6px solid var(--darkBlue);
    border-radius: 18px;
}

.inventory-pop-up-head {
    color: var(--darkBlue);
    font-size: 2rem;
    line-height: 25px;
    margin-top: 15px;
}

.inventory-pop-up-rare {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: linear-gradient(45deg, #ffffff, #8e2de2, #4a00e0, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-bottom: 3px solid var(--darkBlue);
    width: 150px;
    border-radius: 5%;
}

.inventory-pop-up-description {
    width: 100%;        
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    white-space: normal;   
    text-align: center;  
    padding: 8px;        
}

.inventory-pop-up-text {
    font-size: 1.5rem;
    color: var(--darkBlue);
}

/**
==================================================
LEADERBOARD WRAPPER
==================================================
**/

.leaderboard-wrapper {
    display: flex;
    position: absolute;
    flex-direction: row;
    width: 700px;
    height: 600px;
}


.leaderboard-wrapper-close-tab {
    position: absolute;
    top: -35px;
    right: -5px;
    font-size: 2.5rem;
    color: var(--darkBlue);
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
    z-index: 2;
}

.leaderboard-wrapper-close-tab:hover {
    transform: scale(1.05);
}

.leaderboard-wrapper-close-tab:active {
    transform: scale(0.95);
}

.leaderboard-wrapper-title {
    position: absolute;
    left: 10px;
    top: -45px;
    color: white;
    font-size: 3rem;
    z-index: 1;
}

.leaderboard-wrapper-container {
    width: 700px;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 6px solid var(--darkBlue);
    border-radius: 18px;
    position: relative;
    background-color: white;
    padding-bottom: 25px;
    padding-top: 30px;
    background-image: url('./images/menu/background-stars.png');
    background-position: 0 0;
    background-size: auto;
    background-repeat: repeat;
    animation: moveBackground 30s linear infinite;
}

/**
==================================================
**/

.leaderboard-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 550px;
    padding: 10px;
    border-radius: 6px;
    gap: 20px
}

.top1 .leaderboard-user {
    background: linear-gradient(to bottom, #FFD700, #FFC700);
    border: 6px solid #DAA520;
}

.top2 .leaderboard-user {
    background: linear-gradient(to bottom, #C0C0C0, #B0B0B0);
    border: 6px solid #A9A9A9;
}

.top3 .leaderboard-user {
    background: linear-gradient(to bottom, #CD7F32, #B87333);
    border: 6px solid #A0522D;
}

.leaderboard-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, #67ec6b, rgb(21, 168, 26));
    border: 6px solid #1e7f32; /* green border */
    border-radius: 10px;
    color: white;
    font-size: 25px;
    width: 500px;
    padding: 0 20px;
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
}

.leaderboard-user:hover {
    transform: scale(1.05);
}

.leaderboard-user:active {
    transform: scale(0.95);
}

.leaderboard-score {
    font-weight: bold;
    font-size: 23px;
}

.leaderboard-rank {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 24px;
    color: #fff;
}

.top1 .leaderboard-rank {
    color: #FFD700;
}

.top2 .leaderboard-rank {
    color: #C0C0C0;
}

.top3 .leaderboard-rank {
    color: #CD7F32;
}


/**
==================================================
**/

.leaderboard-wrapper-scrollbar {
    height: 100%;
    width: 25px;
    right: 15px;
    top: 5px;
    position: relative;
}

.leaderboard-wrapper-thumb {
    width: 100%;
    cursor: var(--cursor-pointer);
    background-color: var(--darkBlue);
    border-radius: 75px;
    position: relative;
}

.leaderboard-wrapper-container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/**
==================================================
SERVER LIST WRAPPER
==================================================
**/


.server-list-wrapper {
    display: flex;
    position: absolute;
    flex-direction: row;
    width: 600px;
    height: 600px;
} 

.server-list-wrapper-container {
    width: 600px;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 6px solid var(--darkBlue);
    border-radius: 18px;
    position: relative;
    background-color: white;
    padding-bottom: 25px;
    padding-top: 30px;
    background-image: url('./images/menu/background-stars.png');
    background-position: 0 0;
    background-size: auto;
    background-repeat: repeat;
    animation: moveBackground 30s linear infinite;
}   
 
/* 
@keyframes moveBackground {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -400px -413px;
    }
} */

.server-list-wrapper-close-tab {
    position: absolute;
    top: -35px;
    right: -25px;
    font-size: 2.5rem;
    color: var(--darkBlue);
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
    z-index: 2;
}

.server-list-wrapper-close-tab:hover {
    transform: scale(1.05);
}

.server-list-wrapper-close-tab:active {
    transform: scale(0.95);
}

.server-list-wrapper-title {
    position: absolute;
    left: 10px;
    top: -45px;
    color: white;
    font-size: 3rem;
    z-index: 1;
}

/**
==================================================
**/

.server {
    display: flex;
    width: 550px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-bottom: 6px;
    border-radius: 6px;
}

.select-server {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #67ec6b, rgb(21, 168, 26));
    border: 6px solid var(--darkBlue);
    border-radius: 10px;
    color: white;
    font-size: 25px;
    width: 500px;
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
}

.select-server:hover {
    transform: scale(1.05);
}

.select-server:active {
    transform: scale(0.95);
}

/**
==================================================
**/

.server-list-wrapper-scrollbar {
    height: 100%;
    width: 25px;
    right: 15px;
    top: 5px;
    position: relative;
}

.server-list-wrapper-thumb {
    width: 100%;
    cursor: var(--cursor-pointer);
    background-color: var(--darkBlue);
    border-radius: 75px;
    position: relative;
}

.server-list-wrapper-container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}


/**
==================================================
SHOP WRAPPER
==================================================
**/


.shop-wrapper {
    display: flex;
    position: absolute;
    flex-direction: row;
    width: 1125px;
    height: 606px;
}

.shop-wrapper-close-tab {
    position: absolute;
    top: -30px;
    right: 5px;
    font-size: 2.5rem;
    color: var(--darkBlue);
    cursor: var(--cursor-pointer);
    transition: transform 150ms;
    z-index: 2;
}

.shop-wrapper-close-tab:hover {
    transform: scale(1.05);
}

.shop-wrapper-close-tab:active {
    transform: scale(0.95);
}

.shop-wrapper-tabs {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop-wrapper-tab {
    background-color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 100px;
    border: 6px solid var(--darkBlue);
}
.shop-wrapper-tab img {
    height: 45px;
    width: 45px;
    cursor: var(--cursor-pointer);
    transition: transform 50ms;
}

.shop-wrapper-tab img:hover {
    transform: scale(1.05);
}

.shop-wrapper-tab img:active {
    transform: scale(0.95);
}

/**
==================================================
**/

.shop-wrapper-container {
    width: 1000px;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    border: 6px solid var(--darkBlue);
    border-radius: 18px;
    position: relative;
}

.shop-wrapper-title {
    position: absolute;
    left: 120px;
    top: -40px;
    color: white;
    font-size: 3rem;
    z-index: 1;
}

/**
==================================================
**/

.shop-wrapper-scrollbar {
    height: 100%;
    width: 25px;
    right: 15px;
    top: 5px;
    position: relative;
}

.shop-wrapper-thumb {
    width: 100%;
    cursor: var(--cursor-pointer);
    background-color: var(--darkBlue);
    border-radius: 75px;
    position: relative;
}

.shop-wrapper-container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/**
==================================================
**/

.shop-wrapper-container section {
    flex: 0 0 600px;
    width: 100%;
    background-color: white;    

    
    
}

/**
==================================================
**/

.discount-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.discount-slide-container {
    background: url('./images/menu/discount-spotlight.png'),linear-gradient(to bottom,
    #FFDD64 20%,
    #FF9EBF 40%,
    #EA83FE 60%,
    #C2C8EF 80%,
    #76EEF6 100%
    );
    width: 900px;
    height: 500px;
    display: flex;
    align-items: center;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    border: 6px solid var(--darkBlue);
}

.discount-new {
    position: absolute;
    left: 20px;
    top: 0;
    font-size: 2rem;
    color: white;
}

.discount-limited {
    position: absolute;
    right: 20px;
    top: 0;
    font-size: 2rem;
    color: white;
}

.discount-head {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: white;
}

.discount-image {
    width: auto;
    height: 250px;
    position: relative;
    left: 40px;
}

.discount-stall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    left: -30px;
}

.discount-drop-list {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.discount-drop-item {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    border-radius: 18px;
    border: 6px solid white;
    background: wheat
}

.discount-drop-item.water { 
    background: linear-gradient(to bottom right, #00E5FF 50%, #008CBA); 
    border: 6px solid #088FA8;
}
.discount-drop-item.fire {
    background: linear-gradient(to bottom right, #FFB300 50%, #FF4500);
    border: 6px solid #C85012;
}
.discount-drop-item.earth {
    background: linear-gradient(to bottom right, #C0A060 50%, #483E2A);
    border: 6px solid #584C32;
}
.discount-drop-item.wind {
    background: linear-gradient(to bottom right, #B0FFFF 50%, #46DFFD);
    border: 6px solid #07808F;
}
.discount-drop-item.secret {
    background: linear-gradient(to bottom right, #E0C3FC 50%, #6A0DAD);
    border: 6px solid #867FEB;
}

.discount-magic-drop-item {
    width: auto;
    height: 45px;
    margin-top: 10px;
}

.discount-name-drop-item {
    font-size: 1.2rem;
    color: wheat;
}

.discount-name-drop-item.secret {
    font-size: 3.5rem;
}

.discount-chance-drop-item {
    position: absolute;
    top: 5px;
    right: -5px;
    color: white;
    font-size: 1.5rem;
    transform: translate(0, -50%);

}

.discount-purchase-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    top: 50px;
    flex-wrap: nowrap;
}

.discount-purchase-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.discount-purchase-button {
    width: 200px;
    height: 60px;
    border-radius: 12px;
    border: 6px solid var(--darkBlue);
    background: linear-gradient(to bottom, #5dff51, #0d9c12);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: transform 150ms;
    cursor: var(--cursor-pointer);
}
.discount-purchase-button.best {
    background: linear-gradient(to bottom, #FDC80F, #DD8432);
}

.discount-purchase-button:hover {
    transform: scale(1.05);
}

.discount-purchase-button:active {
    transform: scale(0.95);
}

.discount-price {
    color: white;
    font-size: 1.4rem;
    pointer-events: none;
}

.discount-ruby-icon {
    transform: var(--optimize-image);
    width: auto;
    height: 50px;
    pointer-events: none;
}

.discount-purchase-text {
    color: white;
    font-size: 1.2rem;
    pointer-events: none;
}

/**
==================================================
**/

.box-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-slide-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 900px;
    height: 550px;
    gap: 15px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.buy-box-box {
    width: 800px;
    height: 170px;
    background: url('./images/menu/discount-spotlight.png'),linear-gradient(320deg,
    #61F3F4 0%,
    #84F9E6 20%,
    #A5FEA7 40%,
    #FFE15F 60%,
    #4196FF 90%
    );  

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 6px solid var(--darkBlue);
    border-radius: 18px;
    overflow: hidden;
}

.box-head {
    position: absolute;
    top: 25%;
    right: 30%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: white;
}

.box-image {
    width: auto;
    height: 220px;
    right: 35px;
    position: relative;
}

.box-image.size-1 {
    height: 190px;
}
.box-image.size-2 {
    height: 180px;
}

.box-stall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.box-purchase-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    flex-wrap: nowrap;
    top: 30px;
}

.box-purchase-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box-purchase-button {
    width: 130px;
    height: 50px;
    border-radius: 12px;
    border: 6px solid var(--darkBlue);
    background: linear-gradient(to bottom, #5dff51, #0d9c12);    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: transform 150ms;
    cursor: var(--cursor-pointer);
}

.box-purchase-button.best {
    background: linear-gradient(to bottom, #FDC80F, #DD8432);
}

.box-purchase-button:hover {
    transform: scale(1.05);
}

.box-purchase-button:active {
    transform: scale(0.95);
}

.box-price {
    color: white;
    font-size: 1rem;
    pointer-events: none;
}

.box-ruby-icon {
    width: auto;
    height: 30px;
    pointer-events: none;
}

.box-purchase-text {
    color: white;
    font-size: 1rem;
    pointer-events: none;
}

/**
==================================================
**/

.ruby-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruby-slide-container {
    display: flex;
    flex-direction: row; 
    justify-content: center; 
    align-items: center;
    gap: 10px; 
    flex-wrap: wrap;    

}

.buy-ruby-box {
    width: 400px;
    display: flex;
    height: 180px;
    align-items: center;
    position: relative;
    border-radius: 12px;
    border: 6px solid var(--darkBlue);
    background-image: url('./images/menu/buy-ruby-bg.png');

    background-repeat: no-repeat;  
    background-size: cover;       
    background-position: center; 
}


.buy-ruby-get {

    margin-left: 20px;
    margin-top: 10px;
}

.buy-ruby-icon {
    width: auto;
    height: 70px;
    position: relative;
}

.buy-ruby-icon.size-1 { height: 80px; left: 15px;}
.buy-ruby-icon.size-2 { height: 95px; left: 0; top: 5px;}
.buy-ruby-icon.size-3 { height: 120px; left: 5px;}
.buy-ruby-icon.size-4 { height: 120px; left: 10px; bottom: 5px;}
.buy-ruby-icon.size-5 { height: 90px; left: 0;}
.buy-ruby-icon.size-6 { height: 90px; left: 0;}

.buy-ruby-amount {
    position: absolute;
    bottom: 10px;
    left: 90px;
    color: white;
    font-size: 1.8rem;
}

.buy-ruby-info {
    margin-left: 15px;
    position: relative;
}

.buy-ruby-head {
    color: white;
    font-size: 1.7rem;
    position: absolute;
    top: 0;
    left: 65%;
    transform: translateX(-50%);
    white-space: nowrap;
    
}

.buy-ruby-description {
    width: 190px;
    position: absolute;
    top: 45%;
    left: 75%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    line-height: 18px;
    word-wrap: break-word; 
}

.buy-ruby-payment {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    background: linear-gradient(to bottom, #FDC80F, #DD8432);
    border: 4px solid var(--darkBlue);
    border-radius: 12px;
    font-size: 1.5rem;
    color: white;
    position: absolute;
    right: 5px;
    bottom: 5px;
    transition: transform 150ms;
    cursor: var(--cursor-pointer);
}

.buy-ruby-payment:hover {
    transform: scale(1.05);
}

.buy-ruby-payment:active {
    transform: scale(0.95);
}

/**
==================================================
**/

.vip-slide {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vip-slide-container {
    background: linear-gradient(to bottom, #FDC80F, #DD8432); 
    border: 6px solid var(--darkBlue);
    border-radius: 12px;
}

.top-vip-slide-container {
    width: 800px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: end;
    position: relative;
}

.top-vip-background-logo {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 45px;
    position: relative;
}

.top-vip-crown-background {
    width: auto;
    height: 100px;
    position: absolute;
    bottom: 20%;
    transform: translateY(-50%);
}

.top-vip-background-logo-text {
    color: white;
    font-size: 3rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.top-vip-background-logo-image {
    width: auto;
    height: 100px;
}

.top-vip-text {
    color: white;
    font-size: 2.2rem;
    position: absolute;
    top: 90%;
    transform: translateY(-50%);
}

.bottom-vip-slide-container {
    display: flex;
}

.vip-description {
    width: 400px;
    height: 330px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.vip-badge {
    width: 350px;
    height: 120px;
    background: linear-gradient(to bottom, #c59e3a, #97751C); 
    display: flex;
    border-radius: 12px;
    align-items: center;
    margin-top: 10px;
    position: relative;
}

.vip-badge-crown {
    width: auto;
    height: 70px;
    margin-left: 10px;
    margin-right: 10px;
}

.vip-text-description {
    display: flex;
    flex-direction: column;
}

.vip-badge-text-head {
    color: white;
    font-size: 2rem;
    line-height: 40px;
    color: #f6dd8f;
}

.vip-badge-text-additional {
    color: white;
    font-size: 1.1rem;
    line-height: 20px;
    color: #ffd455;
}

.no-video-ads {
    width: 350px;
    height: 80px;
    background: linear-gradient(to bottom, #c59e3a, #97751C);
    display: flex;
    align-items: center;
    border-radius: 12px;
}

.vip-text-head-no-video-ads {
    font-size: 1.3rem;
    color: #f6dd8f;
}

.vip-text-additional-no-video-ads {
    color: #ffd455;
    line-height: 20px;
}

.buy-vip {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    gap: 10px;
    width: 400px;
    height: 330px;
}

.buy-vip>div:hover {
    transform: scale(1.05);
}
.buy-vip>div:active {
    transform: scale(0.95);
}

.buy-vip-one-month {
    border: 6px solid var(--darkBlue);
    border-radius: 18px;
    background: linear-gradient(to bottom, #FDC80F, #DD8432); 
    margin-top: 10px;
    display: flex;
    align-items: center;
    width: 340px;
    height: 100px;
    transition: transform 150ms;
    cursor: var(--cursor-pointer);
    position: relative;
}

.buy-vip-three-month {
    border: 6px solid var(--darkBlue);
    border-radius: 18px;
    background: linear-gradient(to bottom, #FDC80F, #DD8432); 
    display: flex;
    align-items: center;
    width: 340px;
    height: 100px;
    transition: transform 150ms;
    cursor: var(--cursor-pointer);
    position: relative;
}

.buy-vip-six-month {
    border: 6px solid var(--darkBlue);
    border-radius: 18px;
    background: linear-gradient(to bottom, #FDC80F, #DD8432); 
    display: flex;
    align-items: center;
    width: 340px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 150ms;
    cursor: var(--cursor-pointer);
    position: relative;
}

.vip-crown {
    transform: var(--optimize-image);
    height: 60px;
    width: auto;
    margin-left: 10px;
}

.vip-get-amount {
    font-size: 2rem;
    margin-left: 5px;
    margin-right: 5px;
    color: white;
}

.vip-ruby {
    transform: var(--optimize-image);
    height: 50px;
    width: auto;
    position: absolute;
    transform: translateX(-50%);
    left: 55%;

}

.vip-payment {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: absolute; 
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%);
}

.vip-payment-duration {
    color: white;
    font-size: 1.6rem;
}

.vip-payment-amount {
    color: #f6dd8f;
    font-size: 1.6rem;
    width: 90px;
    background-color: #97751C;
    border-radius: 8px;
    position: relative;
    top: -8px;
}

.vip-shine0 {
    position: absolute;
    top: 15px;
    height: 30px;
    left: 15px;
    animation: shine_crown 3s infinite;
    opacity: 0; 
    animation-delay: 1s;
}

.vip-shine1 {
    position: absolute;
    top: 15px;
    height: 30px;
    left: 15px;
    animation: shine_crown 3s infinite;
    opacity: 0;
    animation-delay: 2s;

}

.vip-shine2 {
    position: absolute;
    top: 15px;
    height: 30px;
    left: 15px;
    animation: shine_crown 3s infinite;
    opacity: 0;
    animation-delay: 3s;

} 

.vip-shine3 {
    position: absolute;
    top: 30px;
    height: 30px;
    left: 18px;
    animation: shine_crown 3s infinite;
    opacity: 0;
    animation-delay: 4s;

}

.vip-shine4 {
    position: absolute;
    height: 30px;
    left: 160px;
    animation: shine_crown 3s infinite;
    opacity: 0;
    top: -50%;
    transform: translateY(-50%);
    animation-delay: 5s;
}

@keyframes shine_crown {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  20% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

/**
==================================================
BOTTOM RIGHT WRAPPER
==================================================
**/

.bottom-right-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
}

.bottom-right-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    right: 10px;
    bottom: 10px;
    gap: 10px;
}

.bottom-right-tabs-container {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 10px;
}

.bottom-right-tab-icon {
    width: 75px;
    height: 75px;
    border: 6px solid var(--darkBlue);
    background-color: var(--darkBlue);
    ;
    border-radius: 25px;
}

.bottom-right-tab-icon-img {
    width: auto;
    height: 100%;
    cursor: var(--cursor-pointer);
}

.bottom-right-tab-icon-img:hover {
    transform: scale(1.05);
}

.bottom-right-tab-icon-img:active {
    transform: scale(0.95);
}



.video-container {
    display: flex;
    border: 6px solid var(--darkBlue);
    border-radius: 12px;
    width: 100%;
    height: 150px;
    background-color: rgba(0, 0, 0, 0.35);
}

.policy-container {
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: end;
    gap: 5px;
}

.version {
    display: flex;
    width: 110px;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.2rem;    
    background-color: #a49874ff;
    border-radius: 12px;
    border: 6px solid var(--darkBlue);
}

.policy {
    display: flex;
    width: 110px;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.2rem;    
    cursor: var(--cursor-pointer);
    background-color: #a49874ff;
    border-radius: 12px;
    border: 6px solid var(--darkBlue);
}

/**
==================================================
BOTTOM LEFT WRAPPER
==================================================
**/

.bottom-left-wrapper {
    position: absolute;
}

.bottom-left-container {
    display: flex;
    position: relative;
    left: 10px;
    bottom: 10px;
}

.bottom-left-tabs-container {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 10px;
}

.bottom-left-tab-icon {
    width: 75px;
    height: 75px;
    border: 6px solid var(--darkBlue);
    background-color: var(--darkBlue);;
    border-radius: 25px;
}

.bottom-left-tab-icon-img {
    width: auto;
    height: 100%;
    cursor: var(--cursor-pointer);
}
.bottom-left-tab-icon-img:hover {
    transform: scale(1.05);
}
.bottom-left-tab-icon-img:active {
    transform: scale(0.95);
}




/**
==================================================
LOADER WRAPPER
==================================================
**/

.loader-wrapper {
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100px;
    height: 100px;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #FDC80F;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/**
==================================================
LOADING SCREEN WRAPPER
==================================================
**/

.loading-screen-wrapper {
    position: absolute;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    top: 0;
    left: 0;
}


/**
==================================================
GAME
==================================================
**/


/**
==================================================
USER CHAT
==================================================
**/

.chat-block {
    display: flex;
    position: absolute;
    width: 300px;
}

.chat_input {
    height: 30px;
    font-size: 20px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    border-radius: 10px;
    border: none;
    outline: none;
    opacity: 0.8;
    background-color: #dedede;
    color: #4A4A4A;
}