.auth-modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 25px;
    background: rgba(10, 10, 10, .82);
    backdrop-filter: blur(8px);
    z-index: 9999;
}

.auth-modal-overlay.visible {
    display: flex;
}

.auth-modal {

    --yellow: #f5bf24;
    --yellow-light: #ffd451;
    --bg: #1b1815;
    --bg2: #221f1b;

    position: relative;
    overflow: hidden;

    width: 440px;
    max-width: 100%;

    padding: 42px 38px 36px;

    background:
        radial-gradient(circle at top right, rgba(245, 191, 36, .10), transparent 45%),
        radial-gradient(circle at bottom left, rgba(255, 185, 40, .06), transparent 45%),
        linear-gradient(180deg, #26211d 0%, #191613 100%);

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: 22px;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .55),
        inset 0 1px rgba(255, 255, 255, .05);

    text-align: center;
}

.auth-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(140deg,
            rgba(255, 220, 120, .28),
            rgba(255, 255, 255, .02),
            rgba(255, 190, 40, .18));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.modal-close {
    position: absolute;
    right: 18px;
    top: 16px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    cursor: pointer;

    color: #8f8f8f;
    font-size: 28px;
    transition: .25s;
}

.modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

.modal-logo {
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
}

.logo-circle {

    width: 82px;
    height: 82px;

    margin: auto;

    border-radius: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 36px;

    color: #1b1815;

    background:
        linear-gradient(145deg, #ffd95b, #f5bf24);

    box-shadow:
        0 0 35px rgba(245, 191, 36, .35),
        inset 0 2px rgba(255, 255, 255, .45);
}

.auth-modal h2 {

    margin: 0 0 14px;

    color: #fff;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1px;
}

.auth-modal p {

    margin: 0 auto 30px;
    max-width: 330px;

    color: #b5aea5;

    line-height: 1.7;
    font-size: 15px;
}

.steam-login {

    width: 100%;
    height: 58px;

    border: none;
    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    cursor: pointer;

    background: linear-gradient(180deg,
            #ffd13d,
            #f2b91c);

    color: #1d1710;

    font-weight: 800;
    font-size: 16px;

    transition: .25s;

    box-shadow:
        0 12px 35px rgba(245, 191, 36, .28);
}

.steam-login svg {
    width: 22px;
    height: 22px;
}

.steam-login:hover {

    transform: translateY(-2px);

    box-shadow:
        0 18px 40px rgba(245, 191, 36, .38);
}

.steam-login:active {
    transform: translateY(0);
}

.modal-glow {

    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.glow-1 {

    width: 180px;
    height: 180px;

    background: rgba(245, 191, 36, .18);

    filter: blur(80px);

    top: -60px;
    right: -60px;
}

.glow-2 {

    width: 150px;
    height: 150px;

    background: rgba(255, 170, 40, .12);

    filter: blur(70px);

    bottom: -50px;
    left: -50px;
}