*,
*::before,
*::after {
    box-sizing: border-box;
}


html,
body,
#app {
    width: 100%;
    min-width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;
}


html {
    background: #08090b;
}


body {
    margin: 0;

    background: #08090b;
    color: #e8d9b8;

    font-family:
            Georgia,
            "Times New Roman",
            serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    margin: 0;
}


a {
    color: inherit;
    text-decoration: none;
}


.mt-10 {
    margin-top: 10px;
}


.mt-20 {
    margin-top: 20px;
}


/* =========================================================
   Home page
   ========================================================= */

.home-page {
    position: relative;

    width: 100%;
    min-width: 320px;
    min-height: 100vh;

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

    overflow: hidden;

    color: #e8d9b8;

    background-color: #08090b;

    background-image:
            linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 0) 68%,
                    rgba(0, 0, 0, 0.18) 80%,
                    rgba(0, 0, 0, 0.88) 100%
            ),
            url("/themes/asterion/assets/images/home-background.png");

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


.home-page::before {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;

    background:
            radial-gradient(
                    ellipse at center,
                    rgba(0, 0, 0, 0) 42%,
                    rgba(0, 0, 0, 0.04) 68%,
                    rgba(0, 0, 0, 0.34) 100%
            );
}


/* =========================================================
   City banners
   ========================================================= */

.home-page__banner {
    position: absolute;
    z-index: 5;

    top: 0;

    display: block;

    width: clamp(125px, 9.3vw, 150px);
    height: auto;

    object-fit: contain;

    pointer-events: none;
    user-select: none;

    filter:
            drop-shadow(0 10px 16px rgba(0, 0, 0, 0.58));
}


.home-page__banner--light {
    left: clamp(28px, 4.8vw, 78px);
}


.home-page__banner--dark {
    right: clamp(28px, 4.8vw, 78px);
}


/* =========================================================
   Main
   ========================================================= */

.home-page__main {
    position: relative;
    z-index: 3;

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

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

    margin: 0 auto;

    padding: 0 20px 190px;
}


/* =========================================================
   Logo
   ========================================================= */

.home-page__header {
    position: relative;

    width: 100%;

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

    text-align: center;
}


.home-page__logo {
    display: block;

    width: 100%;
    max-width: 360px;
    height: auto;

    margin: -8px auto -55px;

    object-fit: contain;

    pointer-events: none;
    user-select: none;

    filter:
            drop-shadow(0 8px 12px rgba(0, 0, 0, 0.82));
}


.home-page__tagline {
    position: relative;
    z-index: 2;

    margin-top: 0;

    color: #d9b969;

    font-size: 17px;
    line-height: 1.25;
    font-weight: 400;

    letter-spacing: 0.025em;

    text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.95),
            0 0 9px rgba(0, 0, 0, 0.75);
}


/* =========================================================
   Ornament
   ========================================================= */

.home-page__ornament {
    width: min(360px, 70vw);

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

    gap: 0;

    margin: 15px 0 28px;
}


.home-page__ornament span {
    flex: 1;

    height: 1px;

    background:
            linear-gradient(
                    to right,
                    transparent,
                    rgba(192, 144, 54, 0.9)
            );
}


.home-page__ornament span:last-child {
    background:
            linear-gradient(
                    to left,
                    transparent,
                    rgba(192, 144, 54, 0.9)
            );
}


.home-page__ornament i {
    position: relative;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin: 0 8px;

    transform: rotate(45deg);

    border: 2px solid #c3913b;

    background:
            radial-gradient(
                    circle at 35% 30%,
                    #ff8cff,
                    #ab24a0 35%,
                    #4f0b57 75%
            );

    box-shadow:
            0 0 8px rgba(213, 77, 211, 0.55),
            0 0 14px rgba(221, 171, 69, 0.32);
}


/* =========================================================
   Authentication container
   ========================================================= */

.home-page__auth {
    position: relative;
    width: 520px;
    max-width: calc(-30px + 100vw);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 67px 34px;
}


.home-page__auth-frame {
    position: absolute;
    z-index: 2;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: fill;

    pointer-events: none;
    user-select: none;

    filter:
            drop-shadow(0 13px 28px rgba(0, 0, 0, 0.7));
}


.home-page__auth-inner {
    position: relative;
    z-index: 1;

    width: 100%;

    padding: 82px 28px 122px;
    background:
            radial-gradient(
                    ellipse at 50% 12%,
                    rgba(110, 88, 48, 0.12) 0%,
                    rgba(35, 32, 25, 0.1) 36%,
                    rgba(11, 12, 11, 0) 70%
            ),
            linear-gradient(
                    to bottom,
                    rgba(25, 25, 23, 0.98) 0%,
                    rgba(17, 18, 17, 0.99) 52%,
                    rgba(11, 12, 11, 1) 100%
            );

    box-shadow:
            inset 0 0 32px rgba(0, 0, 0, 0.88),
            inset 0 1px rgba(218, 178, 99, 0.06),
            0 12px 32px rgba(0, 0, 0, 0.55);
}


.home-page__auth-content {
    width: 100%;
}


/* =========================================================
   Login forms
   ========================================================= */

.auth-form {
    width: 100%;
}


.auth-form__header {
    position: relative;

    width: 100%;

    margin-bottom: 25px;

    text-align: center;
}


.auth-form__header::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -12px;

    width: 82%;
    height: 1px;

    transform: translateX(-50%);

    background:
            linear-gradient(
                    to right,
                    transparent,
                    rgba(173, 136, 69, 0.42),
                    transparent
            );
}


.auth-form__title {
    margin: 0;

    color: #d8bd80;

    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;

    text-transform: uppercase;
    letter-spacing: 0.025em;

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


.auth-form__error {
    width: 100%;

    margin-bottom: 15px;
    padding: 10px 12px;

    border: 1px solid rgba(154, 52, 46, 0.65);

    background: rgba(84, 17, 15, 0.4);

    color: #d99b91;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 12px;
    line-height: 1.4;
}


.auth-form__success {
    width: 100%;

    margin-bottom: 15px;
    padding: 10px 12px;

    border: 1px solid rgba(102, 145, 78, 0.65);

    background: rgba(39, 72, 29, 0.4);

    color: #b7d8a4;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 12px;
    line-height: 1.4;
}


.auth-form__field {
    width: 100%;
}


.auth-form__label {
    display: block;

    color: #bda46f;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 12px;
    line-height: 1.3;
}


.auth-form__input {
    width: 100%;
    height: 45px;

    padding: 0 15px;

    border: 1px solid rgba(154, 133, 90, 0.52);
    border-radius: 3px;

    outline: 0;

    background:
            linear-gradient(
                    to bottom,
                    rgba(12, 13, 12, 0.96),
                    rgba(17, 17, 15, 0.96)
            );

    color: #d4bd8b;

    box-shadow:
            inset 0 1px 4px rgba(0, 0, 0, 0.95),
            0 1px rgba(192, 157, 87, 0.08);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 13px;

    transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
}


.auth-form__input::placeholder {
    color: rgba(180, 155, 103, 0.65);
    opacity: 1;
}


.auth-form__input:focus {
    border-color: rgba(204, 158, 73, 0.82);

    box-shadow:
            inset 0 1px 4px rgba(0, 0, 0, 0.9),
            0 0 8px rgba(199, 149, 59, 0.16);
}


.auth-form__options {
    width: 100%;

    display: flex;
    justify-content: center;
}


.auth-form__forgot {
    color: #b49b67;

    font-size: 12px;
    line-height: 1.4;

    transition: color 0.2s ease;
}


.auth-form__forgot:hover {
    color: #e0c782;
}


.auth-form__submit {
    width: 100%;
    min-height: 47px;

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

    padding: 10px 20px;

    border: 1px solid #bf923f;
    border-radius: 3px;

    outline: 0;

    background:
            linear-gradient(
                    to bottom,
                    #b88a3c 0%,
                    #8a5d21 47%,
                    #704715 100%
            );

    color: #fff0cb;

    box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.18),
            inset 0 -1px rgba(0, 0, 0, 0.7),
            0 3px 8px rgba(0, 0, 0, 0.5);

    font-size: 17px;
    line-height: 1;
    font-weight: 400;

    letter-spacing: 0.02em;

    cursor: pointer;

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

    transition:
            filter 0.2s ease,
            transform 0.15s ease;
}


.auth-form__submit:hover:not(:disabled) {
    filter: brightness(1.12);
}


.auth-form__submit:active:not(:disabled) {
    transform: translateY(1px);
}


.auth-form__submit:disabled {
    opacity: 0.65;
    cursor: default;
}


.auth-form__input:-webkit-autofill,
.auth-form__input:-webkit-autofill:hover,
.auth-form__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #d4bd8b;

    -webkit-box-shadow:
            0 0 0 40px #111210 inset !important;

    transition:
            background-color 9999s ease-in-out 0s;
}


/* =========================================================
   OR
   ========================================================= */

.home-page__divider {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 14px;

    margin: 20px 0;
}


.home-page__divider span {
    flex: 1;

    height: 1px;

    background:
            linear-gradient(
                    to right,
                    transparent,
                    rgba(176, 144, 83, 0.45)
            );
}


.home-page__divider span:last-child {
    background:
            linear-gradient(
                    to left,
                    transparent,
                    rgba(176, 144, 83, 0.45)
            );
}


.home-page__divider strong {
    color: #ccb47a;

    font-size: 13px;
    line-height: 1;
    font-weight: 400;
}


/* =========================================================
   Register button
   ========================================================= */

.home-page__register-button {
    width: 100%;
    min-height: 47px;

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

    padding: 10px 20px;

    border: 1px solid #9b7438;
    border-radius: 3px;

    outline: 0;

    background:
            linear-gradient(
                    to bottom,
                    #173b51 0%,
                    #102d40 55%,
                    #0a202e 100%
            );

    color: #f0dca8;

    box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.07),
            0 3px 8px rgba(0, 0, 0, 0.48);

    font-size: 16px;
    line-height: 1;

    letter-spacing: 0.04em;

    cursor: pointer;

    text-shadow:
            0 1px 2px #000;

    transition:
            filter 0.2s ease,
            transform 0.15s ease;
}


.home-page__register-button:hover {
    filter: brightness(1.14);
}


.home-page__register-button:active {
    transform: translateY(1px);
}


/* =========================================================
   Features
   ========================================================= */

.home-page__features {
    position: absolute;
    z-index: 4;

    left: 50%;
    bottom: 50px;

    width: min(1280px, calc(100% - 70px));

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    transform: translateX(-50%);

    background:
            linear-gradient(
                    to bottom,
                    rgba(4, 5, 6, 0),
                    rgba(4, 5, 6, 0.16)
            );
}


.home-page__feature {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 18px;

    border-right:
            1px solid rgba(186, 149, 79, 0.18);
}


.home-page__feature:last-child {
    border-right: 0;
}


.home-page__feature-icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    display: block;

    object-fit: contain;

    pointer-events: none;

    filter:
            drop-shadow(0 4px 5px rgba(0, 0, 0, 0.65));
}


.home-page__feature-content {
    min-width: 0;
}


.home-page__feature h2 {
    margin: 0 0 5px;

    color: #d5b772;

    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;

    white-space: nowrap;

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


.home-page__feature p {
    margin: 0;

    color: rgba(225, 216, 196, 0.72);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 12px;
    line-height: 1.3;

    white-space: nowrap;

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


/* =========================================================
   Footer
   ========================================================= */

.home-page__footer {
    position: absolute;
    z-index: 5;

    left: 0;
    bottom: 17px;

    width: 100%;

    text-align: center;

    color: rgba(223, 215, 198, 0.65);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 11px;
    line-height: 1.4;
}


/* =========================================================
   Character page
   ========================================================= */

.character-page {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;

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

    padding: 30px;

    background:
            radial-gradient(
                    circle at center,
                    rgba(65, 52, 30, 0.22),
                    rgba(8, 9, 11, 0.96) 65%
            ),
            #08090b;

    color: #e8d9b8;
}


.character-page__panel {
    width: min(720px, 100%);

    padding: 50px;

    border: 1px solid rgba(190, 146, 63, 0.45);

    background:
            linear-gradient(
                    to bottom,
                    rgba(24, 24, 21, 0.98),
                    rgba(12, 13, 12, 0.99)
            );

    box-shadow:
            inset 0 0 30px rgba(0, 0, 0, 0.8),
            0 20px 50px rgba(0, 0, 0, 0.55);

    text-align: center;
}


.character-page__title {
    margin: 0;

    color: #d8bd80;

    font-size: 34px;
    line-height: 1.2;
    font-weight: 400;

    letter-spacing: 0.03em;

    text-transform: uppercase;
}


.character-page__text {
    margin: 20px 0 0;

    color: rgba(232, 217, 184, 0.72);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   1280
   ========================================================= */

@media (max-width: 1280px) {
    .home-page__banner {
        width: 125px;
    }


    .home-page__banner--light {
        left: 25px;
    }


    .home-page__banner--dark {
        right: 25px;
    }


    .home-page__logo {
        max-width: 460px;
    }


    .home-page__features {
        width: calc(100% - 30px);
    }


    .home-page__feature {
        gap: 9px;

        padding: 10px 13px;
    }


    .home-page__feature-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }


    .home-page__feature h2 {
        font-size: 12px;
    }


    .home-page__feature p {
        font-size: 10px;
    }
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {
    .home-page {
        min-height: 100vh;

        overflow-y: auto;

        background-position: center top;
    }


    .home-page__banner {
        width: 95px;
    }


    .home-page__banner--light {
        left: 10px;
    }


    .home-page__banner--dark {
        right: 10px;
    }


    .home-page__main {
        max-width: 560px;

        padding: 10px 15px 50px;
    }


    .home-page__logo {
        max-width: 390px;

        margin-bottom: -44px;
    }


    .home-page__tagline {
        font-size: 14px;
    }


    .home-page__ornament {
        margin-bottom: 20px;
    }


    .home-page__auth {
        width: 400px;
    }


    .home-page__features {
        position: relative;

        left: auto;
        bottom: auto;

        width: calc(100% - 30px);

        grid-template-columns:
            repeat(2, 1fr);

        margin: auto 15px 0;

        transform: none;

        background:
                rgba(5, 6, 7, 0.48);
    }


    .home-page__feature {
        padding: 17px 20px;
    }


    .home-page__feature:nth-child(2) {
        border-right: 0;
    }


    .home-page__feature:nth-child(-n + 2) {
        border-bottom:
                1px solid rgba(186, 149, 79, 0.16);
    }


    .home-page__footer {
        position: relative;

        left: auto;
        bottom: auto;

        padding: 20px 10px;
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {
    .home-page {
        display: block;

        min-height: 100vh;

        background-size: auto 100vh;
        background-position: center top;
    }


    .home-page__banner {
        width: 70px;
    }


    .home-page__banner--light {
        left: 4px;
    }


    .home-page__banner--dark {
        right: 4px;
    }


    .home-page__main {
        width: 100%;
        max-width: 100%;

        padding: 8px 10px 40px;
    }


    .home-page__logo {
        max-width: 315px;

        margin-bottom: -36px;
    }


    .home-page__tagline {
        max-width: 280px;

        font-size: 11px;
        line-height: 1.5;
    }


    .home-page__ornament {
        width: 230px;

        margin: 11px 0 17px;
    }


    .home-page__ornament i {
        width: 15px;
        height: 15px;

        flex-basis: 15px;
    }


    .home-page__auth {
        width: min(400px, calc(100vw - 18px));
    }


    .home-page__auth-inner {
        padding: 30px 26px 32px;
    }


    .home-page__features {
        width: 100%;

        grid-template-columns: 1fr;

        margin: 0;

        padding: 0 12px;

        background:
                rgba(4, 5, 6, 0.7);
    }


    .home-page__feature {
        border-right: 0;

        border-bottom:
                1px solid rgba(186, 149, 79, 0.15);

        padding: 15px 8px;
    }


    .home-page__feature:last-child {
        border-bottom: 0;
    }


    .home-page__feature-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }


    .home-page__feature h2 {
        font-size: 13px;
    }


    .home-page__feature p {
        font-size: 11px;
    }


    .home-page__footer {
        background:
                rgba(4, 5, 6, 0.72);

        font-size: 9px;
    }


    .character-page {
        padding: 15px;
    }


    .character-page__panel {
        padding: 35px 20px;
    }


    .character-page__title {
        font-size: 25px;
    }
}


/* =========================================================
   Very small screens
   ========================================================= */

@media (max-width: 380px) {
    .home-page__banner {
        display: none;
    }


    .home-page__auth {
        width: calc(100vw - 10px);
    }


    .home-page__auth-inner {
        padding: 28px 22px 30px;
    }
}