* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background: #111;

    font-family:
        "Trebuchet MS",
        "Arial Narrow",
        Arial,
        sans-serif;
}


/* ================================
   ЭКРАН
================================ */

.screen {
    position: relative;

    width: 100%;
    height: 100dvh;
    min-height: 100vh;

    overflow: hidden;

    color: white;
    isolation: isolate;
}


/* ================================
   ФОН
================================ */

.background {
    position: absolute;
    inset: 0;

    background-image: url("landscape1.png");
    background-size: cover;

    /*
        Картинка немного шире типичного телефона.
        Это позиционирование сохраняет Яна в кадре.
    */
    background-position: center center;

    z-index: -3;
}


/*
   Затемняем верх и низ, чтобы UI не терялся,
   но не превращаем картинку в тёмную кашу.
*/

.shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 15, 25, 0.32) 0%,
            rgba(5, 15, 25, 0.05) 25%,
            rgba(5, 15, 25, 0.00) 50%,
            rgba(5, 15, 25, 0.10) 65%,
            rgba(5, 15, 25, 0.72) 100%
        );

    z-index: -2;

    pointer-events: none;
}


/* ================================
   ЛОГОТИП
================================ */

.brand {
    position: absolute;

    top: max(4.5vh, env(safe-area-inset-top));
    left: 50%;

    transform: translateX(-50%);

    width: 82%;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #0a0a0a;

    filter:
        drop-shadow(0 2px 0 rgba(255, 255, 255, 0.15));
}


.logo-wrap {
    position: relative;
}


.logo {
    font-family:
        "Segoe Print",
        "Comic Sans MS",
        "Trebuchet MS",
        sans-serif;

    font-size: clamp(48px, 15vw, 82px);

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -0.08em;

    transform: rotate(-1deg);

    text-shadow:
        1px 1px 0 #000,
        -1px 0 0 #000;
}


.crown {
    position: absolute;

    right: 4%;
    top: -28%;

    font-size: clamp(20px, 7vw, 36px);

    transform: rotate(8deg);

    color: #080808;
}


.logo-line {
    width: 56%;
    height: 4px;

    margin-top: 11px;
    margin-bottom: 5px;

    background: #111;

    border-radius: 50%;

    transform: rotate(-1deg);
}


.subtitle {
    font-family:
        "Segoe Print",
        "Comic Sans MS",
        sans-serif;

    font-size: clamp(13px, 3.8vw, 19px);

    font-weight: 900;

    letter-spacing: 0.12em;

    transform: rotate(-1deg);
}


/* ================================
   НИЖНЯЯ ОБЛАСТЬ
================================ */

.login {
    position: absolute;

    left: 50%;
    bottom:
        calc(
            3.2vh + env(safe-area-inset-bottom)
        );

    transform: translateX(-50%);

    width: min(88%, 430px);

    display: flex;
    flex-direction: column;

    gap: 13px;
}


/* ================================
   КНОПКИ
================================ */

.auth-button {
    position: relative;

    width: 100%;
    min-height: 68px;

    border: 3px solid #181818;

    border-radius: 17px;

    padding:
        10px
        17px
        10px
        72px;

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

    cursor: pointer;

    font-family:
        "Arial Narrow",
        "Trebuchet MS",
        sans-serif;

    font-size: clamp(15px, 4.2vw, 20px);

    font-weight: 900;

    letter-spacing: 0.015em;

    text-transform: uppercase;

    color: #151515;

    box-shadow:
        0 5px 0 rgba(0, 0, 0, 0.62),
        0 9px 20px rgba(0, 0, 0, 0.28);

    transition:
        transform 80ms ease,
        box-shadow 80ms ease,
        filter 100ms ease;

    /*
       Немного "кривизны", чтобы UI
       не выглядел стерильно-векторным.
    */
    transform: rotate(-0.25deg);
}


.auth-button:nth-child(2) {
    transform: rotate(0.18deg);
}


.auth-button:hover {
    filter: brightness(1.06);
}


.auth-button:active {
    transform:
        translateY(4px)
        rotate(-0.1deg);

    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.7),
        0 4px 10px rgba(0, 0, 0, 0.3);
}


.button-text {
    line-height: 1.08;
}


/* Telegram */

.telegram {
    background:
        linear-gradient(
            to bottom,
            #ffd966 0%,
            #ffc94f 100%
        );
}


/* Twitch */

.twitch {
    background:
        linear-gradient(
            to bottom,
            #c6a9ff 0%,
            #a986f2 100%
        );
}


/* ================================
   ИКОНКИ
================================ */

.auth-icon {
    position: absolute;

    left: 12px;
    top: 50%;

    transform: translateY(-50%);

    width: 47px;
    height: 47px;

    border-radius: 50%;

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

    border: 2px solid rgba(0, 0, 0, 0.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25);
}


.auth-icon svg {
    width: 26px;
    height: 26px;

    fill: white;
}


.telegram-icon {
    background: #269ed8;
}


.twitch-icon {
    background: #6441a5;
}


/* ================================
   ALPHA FOREVER
================================ */

.version {
    margin-top: 3px;

    text-align: center;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.12em;

    color: rgba(255, 255, 255, 0.72);

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9);
}


.version span {
    margin-left: 5px;

    color: rgba(255, 255, 255, 0.42);
}


/* ================================
   МАЛЕНЬКИЕ ЭКРАНЫ
================================ */

@media (max-height: 700px) {

    .brand {
        top: 3vh;
    }

    .logo {
        font-size: clamp(38px, 13vw, 60px);
    }

    .login {
        bottom:
            calc(
                2vh + env(safe-area-inset-bottom)
            );

        gap: 9px;
    }

    .auth-button {
        min-height: 58px;

        border-radius: 14px;
    }

    .auth-icon {
        width: 40px;
        height: 40px;
    }

}


/* ================================
   ДЕСКТОПНЫЙ ПРОСМОТР

   Если открыть сайт на ПК,
   он будет выглядеть как экран телефона,
   а не растянется на весь монитор.
================================ */

@media (min-width: 700px) {

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

        min-height: 100vh;

        background:
            radial-gradient(
                circle,
                #333 0%,
                #161616 65%
            );
    }

    .screen {
        width: min(
            430px,
            calc(100vh * 0.462)
        );

        height: min(
            100vh,
            calc(100vw / 0.462)
        );

        max-height: 932px;

        border-radius: 26px;

        box-shadow:
            0 0 0 4px #080808,
            0 18px 70px rgba(0, 0, 0, 0.7);
    }

}