/* custom.css - L2Impera visual fix v23 */

.preload {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.header-scl-box[data-gw-anime],
.header__content[data-gw-anime],
.header__btns[data-gw-anime] {
    opacity: 1 !important;
}

:root {
    --body-background-color-rgb: #080403;
    --body-background-color: 8, 4, 3;
    --navigation-bg-rgb: #1a1014;
    --navigation-bg: 26, 16, 20;
    --color-light-rgb: #f0dfba;
    --color-light: 240, 223, 186;
    --color-accent-rgb: #d9b067;
    --color-accent: 217, 176, 103;
    --color-accent-hover-rgb: #f4d79a;
    --color-accent-hover: 244, 215, 154;
    --color-accent-2-rgb: #c64b4d;
    --color-accent-2: 198, 75, 77;
    --color-accent-2-hover-rgb: #e36c6e;
    --color-accent-2-hover: 227, 108, 110;
    --color-url-rgb: #f4d79a;
    --color-url: 244, 215, 154;
    --color-url-hover-rgb: #ffe7b8;
    --color-url-hover: 255, 231, 184;
    --table-heading-bg: #7e2430;
    --table-bg: #5b1720;
    --border-color: rgba(123, 68, 54, 0.55);
}

html,
body {
    min-height: 100%;
    background: #050301;
}

body {
    overflow-x: hidden;
    background-color: #050301;
    background-image: url("/template/site/l2awakening/images/bg/bg-repeat.jpg?v=20");
    background-image: image-set(
        url("/template/site/l2awakening/images/bg/bg-repeat.webp?v=20") type("image/webp"),
        url("/template/site/l2awakening/images/bg/bg-repeat.jpg?v=20") type("image/jpeg")
    );
    background-repeat: repeat-y;
    background-position: top center;
    background-size: max(100%, 96rem) auto;
}

.page {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow-x: clip;
    background: transparent !important;
}

.page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 19rem, rgba(255, 185, 69, 0.13), transparent 34rem),
        linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(5,3,1,0.08) 22rem, rgba(5,3,1,0.68) 72rem, rgba(5,3,1,0.92) 100%);
}

.page-bg {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -3;
    width: min(100vw, 2560px);
    min-width: 96rem;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: hidden;
}

.page-bg__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: top center;
    image-rendering: auto;
    user-select: none;
}

.hero-stage {
    position: absolute;
    top: clamp(6rem, 7vw, 8.25rem);
    left: 50%;
    z-index: -2;
    width: min(96vw, 96rem);
    height: clamp(34rem, 58vw, 56rem);
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}

.hero-stage__character {
    position: absolute;
    display: block;
    width: auto;
    max-width: none;
    image-rendering: auto;
    user-select: none;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 1.1rem 1.5rem rgba(0, 0, 0, 0.52)) drop-shadow(0 0 1.4rem rgba(255, 179, 64, 0.16));
}

.hero-stage__character--warrior {
    top: clamp(10rem, 14vw, 13.2rem);
    left: 16%;
    height: clamp(26rem, 42vw, 49rem);
    max-height: 914px;
    transform: translateX(-50%);
}

.hero-stage__character--ertheia {
    top: clamp(11.2rem, 15.5vw, 14.6rem);
    left: 84%;
    height: clamp(24rem, 39vw, 45rem);
    max-height: 916px;
    transform: translateX(-50%);
}

/* Main hero readability: the background is now decorative; content gets its own readable stage. */
.header {
    padding-top: calc(23.5rem + var(--navigation-height));
    padding-bottom: 7.5rem;
}

.header__box {
    max-width: 44rem;
    margin-inline: auto;
    margin-top: 5.75rem;
    padding: 2rem 1.7rem 1.65rem;
    border: 1px solid rgba(217, 176, 103, 0.22);
    border-radius: 0.55rem;
    background:
        linear-gradient(180deg, rgba(20, 11, 7, 0.58), rgba(7, 4, 2, 0.36)),
        radial-gradient(circle at 50% 0%, rgba(217, 176, 103, 0.18), transparent 75%);
    box-shadow:
        0 1.5rem 4rem rgba(0, 0, 0, 0.42),
        inset 0 0 1.8rem rgba(217, 176, 103, 0.08);
    backdrop-filter: blur(0.18rem);
    position: relative;
}

.header__hero-logo {
    position: absolute;
    top: -23.5rem;
    left: 50%;
    width: min(100%, 58rem);
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 1.2rem rgba(255, 189, 79, 0.24)) drop-shadow(0 0.75rem 1.25rem rgba(0, 0, 0, 0.42));
    pointer-events: none;
}

.header__content {
    filter: drop-shadow(0 0.35rem 1.2rem rgba(0, 0, 0, 0.72)) !important;
}

.header__title {
    text-wrap: balance;
}

.header__desc {
    color: rgba(240, 223, 186, 0.88) !important;
}

.logo__img {
    width: min(11.75rem, 27vw);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.48));
}

@media (min-width: 2561px) {
    .page-bg {
        width: 2560px;
    }

    .hero-stage {
        width: 96rem;
    }
}

@media (max-width: 1299.98px) {
    .logo__img {
        width: min(10.5rem, 34vw);
    }
}

@media (max-width: 768px) {
    body {
        background-size: max(100%, 46rem) auto;
    }

    .page-bg {
        width: 150vw;
        min-width: 38rem;
    }

    .hero-stage {
        top: 5.35rem;
        width: 42rem;
        height: 35rem;
    }

    .hero-stage__character--warrior {
        top: 10rem;
        left: 31%;
        height: 23rem;
    }

    .hero-stage__character--ertheia {
        top: 11.2rem;
        left: 69%;
        height: 21rem;
    }

    .header {
        padding-top: calc(21rem + var(--navigation-height));
        padding-bottom: 5.5rem;
    }

    .header__box {
        margin-top: 4.6rem;
        padding: 1.75rem 1rem 1.35rem;
        background: linear-gradient(180deg, rgba(20, 11, 7, 0.66), rgba(7, 4, 2, 0.48));
    }

    .header__hero-logo {
        top: -13rem;
        width: min(100%, 36rem);
    }
}

.preload__progress {
    background: linear-gradient(90deg, #a3212c 0%, #d8b16a 100%);
}

.logo__img {
    width: min(11.75rem, 27vw);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.42));
}

.preload__logo {
    width: min(10rem, 36vw);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.42));
}

.header__title,
.heading__title,
.inform__title,
.title {
    text-shadow: 0 0 1.2rem rgba(163, 33, 44, 0.22);
}

.header__desc,
.heading__desc,
.inform__desc,
.community__title,
.footer__copyright {
    color: rgba(240, 223, 186, 0.82);
}

.button,
.btn,
.menu__item,
.point,
.social__title {
    letter-spacing: 0.04em;
}

.point_active,
.point_active:hover .point__name,
.menu__el:hover .menu__item,
.menu__item:hover,
.auth__btn:hover,
.back:hover {
    color: rgba(217, 176, 103, 1);
}

.social.decbox,
.community__forum.decbox,
.downloads__box,
.countdown__box {
    background-color: rgba(35, 18, 24, 0.84);
    border-color: rgba(156, 110, 72, 0.45);
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.24);
}

.navigation,
.menu,
.menu__sub-list {
    backdrop-filter: blur(0.5rem);
}

.body_other .logo__picture {
    display: block;
}

.body_other .logo__img_hover {
    display: none !important;
}

.body_other [data-container="wiki"][data-gw-anime],
.body_other .wiki [data-gw-anime],
.body_other .wiki__heading[data-gw-anime] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.wiki .base-right__item {
    display: block;
    scroll-margin-top: calc(var(--navigation-height) + 2rem);
}

.wiki .base-right__item + .base-right__item {
    margin-top: 3.5rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wiki .bri-list-item__icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wiki .bri-list-item__icon::before {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    background: url("../images/wiki/acli-list-icon.svg") center / contain no-repeat;
}

.wiki .bri-list-item__icon img {
    display: none !important;
}

.wiki-modal-open {
    overflow: hidden;
}

.wiki-modal-host {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: calc(var(--navigation-height) + 1.5rem) 1rem 1rem;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.72);
}

.wiki-modal-host .ww {
    display: block;
    width: min(100%, 72rem);
    margin: 0 auto;
}

.wiki-modal-host[hidden] {
    display: none !important;
}

@keyframes wiki-fade-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Disabled download buttons (A4): rendered when a launch URL is not set yet. */
.btn.is-disabled,
a.btn[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
    cursor: not-allowed;
}