/* Стиль для размытого фона */
.modal#start_screen_modal .start-screen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 21, 18, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    pointer-events: all;
}

.modal#start_screen_modal {
    position: fixed;
    z-index: 1000;
    display: none;
    transition: opacity 0.5s ease;
    opacity: 1;
}

/* Логотип Rekrut */
.modal#start_screen_modal .rekrut-logo-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /* display: flex; */
    /* justify-content: center; */
    background: linear-gradient(rgba(1, 14, 11, 1), rgba(0, 0, 0, 0.001));
    width: 100%;
    height: 60%;
    /* align-items: center; */
    padding: 5px 0px;
    text-align: center;
}

.modal#start_screen_modal .rekrut-logo {
    width: 70%;
    height: auto;
    /* max-height: 60%; */
    /* object-fit: contain; */
    max-width: 100%;
    /* transform: translateX; */
    /* margin: auto auto; */
}

/* Модальное окно в нижней части */
.modal#start_screen_modal .info-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.50);
    font-size: 16px;
    margin-bottom: 30px;
    font-weight: 350;
    padding: 0 20px;
    pointer-events: none;
}

.modal#start_screen_modal .login-button-container {
    padding: 0px 20px;
}

.modal#start_screen_modal .login-button {
    border-radius: 8px;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: rgba(20, 203, 180, 1);
    color: rgba(35, 35, 35, 1);
    cursor: pointer;
}

.modal#start_screen_modal .button-text {
    font-weight: 600;
    pointer-events: none;
    margin: 0 20px;
    font-size: clamp(10px, 3.3vw, 16px);
    white-space: nowrap;
    text-decoration: none;
}

.modal#start_screen_modal .vertical-line {
    height: 48px;
}

.modal#start_screen_modal .vertical-line span {
    background-color: rgba(35, 35, 35, 1);
    width: 1px;
    height: 100%;
    display: inline-block;
}

.modal#start_screen_modal .steam-logo {
    width: clamp(35px, 10vw, 50px);
    height: auto;
    margin: 0 20px 0 5px;
    object-fit: contain;
}

.modal#start_screen_modal .button-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 20px;
}

.modal#start_screen_modal .action-button {
    width: 100%;
    height: 46px;
    background: #14CBB4;
    border-radius: 5px;
    border: none;
    color: #232323;
    font-size: 19px;
    font-weight: 500;
    text-align: center;
    line-height: 46px;
    text-decoration: none;
    cursor: pointer;
}

.modal#start_screen_modal .action-button:hover {
    background: #0fa597;
}

.modal#start_screen_modal .start-screen-bottom-container {
    position: absolute;
    bottom: 0;
    padding: 35px 0;
    height: 27%;
    justify-content: end;
    background: linear-gradient(rgba(0, 0, 0, 0.01), rgba(1, 14, 11, 1));
    display: flex;
    flex-direction: column;
    width: 100%;
}
.login-button-container > a:nth-child(1) {
    text-decoration: none;
}