/* Hide legacy full-screen preload logo if present */
.preload,
.preload__logo,
.preload__items {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

body:not(.loaded)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: #07090b;
	pointer-events: none;
	opacity: 1;
	transition: opacity .42s cubic-bezier(.22, 1, .36, 1);
}
body:not(.loaded)::after {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 2147483001;
	width: 2.75rem;
	height: 2.75rem;
	margin: -1.375rem 0 0 -1.375rem;
	border-radius: 50%;
	border: 1.5px solid rgba(223, 198, 131, .14);
	border-top-color: rgba(255, 229, 159, .92);
	border-right-color: rgba(189, 155, 75, .45);
	box-shadow: 0 0 18px rgba(189, 155, 75, .12);
	animation: l2BootSpin .85s linear infinite;
	pointer-events: none;
}
body.loaded::before,
body.loaded::after {
	opacity: 0;
	visibility: hidden;
	animation: none;
	transition: opacity .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .42s;
}
@keyframes l2BootSpin {
	to { transform: rotate(360deg); }
}

/* Kill oversized logo FOUC */
img.home-logo__img,
a.home-logo img {
	width: clamp(18rem, 44vw, 32rem) !important;
	max-width: min(90vw, 32rem) !important;
	height: auto !important;
}

/* ─── Countdown + Status Wrapper ───────────────────────────────────────────── */
.countdown-wrap {
    display: none;
    pointer-events: none;
    position: absolute;
    right: 6%;
    width: 25rem;
    top: 11.25rem;
}
.countdown-wrap > * { pointer-events: all; }
.countdown-wrap .countdown-main {
    position: static !important;
    right: auto   !important;
    top:   auto   !important;
    display: block !important;
}
@media (min-width: 1100px) {
    .countdown-wrap { display: block; }
}
@media (max-width: 600px) {
    .header {
        padding-top: 1rem!important;    margin-top: 6rem;}

    .countdown_pos {
        display: none!important;
    }
}

/* ════════════════════════════════════════════════════
   SERVER STATUS — same design as countdown box
   #665945 inner border | #907b5b outer frame
   ════════════════════════════════════════════════════ */

.srv-status {
    position: relative;
    width: 100%;
    margin-top: 6px;
    background-color: rgba(0,0,0,.33);
    border-left:   1px solid #665945;
    border-right:  1px solid #665945;
    border-bottom: 1px solid #665945;
    box-sizing: border-box;
}

/* outer decorative frame — same as .countdown__decor */
.srv-status__frame {
    position: absolute;
    top:    -.5rem;
    right:  -.5rem;
    bottom: -.5rem;
    left:   -.5rem;
    border-left:   2px solid #907b5b;
    border-right:  2px solid #907b5b;
    border-bottom: 2px solid #907b5b;
    pointer-events: none;
    z-index: 1;
}

/* top gradient line — same as .countdown__decor-top */
.srv-status__frame-top {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(
        270deg,
        #907b5b 0%, #907b5b 40%,
        rgba(144,123,91,0) 40%, rgba(144,123,91,0) 60%,
        #907b5b 60%, #907b5b 100%
    );
}

/* ── Head row ────────────────────────────────────── */
.srv-status__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
}

.srv-status__name {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #fff4e1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srv-status__rate {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #f4d398;
    border: 1px solid #665945;
    padding: 2px 7px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.srv-status__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid;
    flex-shrink: 0;
}
.srv-status--on  .srv-status__badge { color: #6ee868; border-color: rgba(80,200,70,.40); background: rgba(50,160,45,.10); }
.srv-status--off .srv-status__badge { color: #e86868; border-color: rgba(200,70,70,.40); background: rgba(160,45,45,.10); }
.srv-status--wait .srv-status__badge { color: #e6c98a; border-color: rgba(189,155,75,.40); background: rgba(189,155,75,.08); }

.srv-status__badge-dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.srv-status--on  .srv-status__badge-dot { background: #6ee868; box-shadow: 0 0 5px rgba(110,232,104,.9); animation: srvBlink 2s ease-in-out infinite; }
.srv-status--off .srv-status__badge-dot { background: #e86868; }
.srv-status--wait .srv-status__badge-dot { background: #e6c98a; animation: srvBlink 1s ease-in-out infinite; }

@keyframes srvBlink {
    0%,100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* ── Separator ───────────────────────────────────── */
.srv-status__sep {
    height: 1px;
    margin: 0 14px;
    background: linear-gradient(90deg, transparent, #665945 30%, #665945 70%, transparent);
}

/* ── Stats grid ──────────────────────────────────── */
.srv-status__grid {
    display: flex;
    align-items: center;
    padding: 10px 0 12px;
}

.srv-status__cell {
    flex: 1;
    text-align: center;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.srv-status__vline {
    width: 1px;
    height: 38px;
    background: linear-gradient(180deg, transparent, #665945 25%, #665945 75%, transparent);
    flex-shrink: 0;
}

.srv-status__num {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    color: #fff4e1;
    text-shadow: 0 0 20px rgba(255,244,225,.20);
    font-variant-numeric: tabular-nums;
    display: block;
}
.srv-status__num--sm {
    font-size: 14px;
    font-weight: 700;
    color: #f4d398;
    text-shadow: none;
    letter-spacing: .04em;
}

.srv-status__caption {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #f4d398;
    opacity: .55;
    line-height: 1;
}

/* ════════════════════════════════════════════════════
   SITE FOOTER
   ════════════════════════════════════════════════════ */
.site-footer {
    position: relative;
    z-index: 0;
    width: 100%;
    padding: 26px 24px 20px;
    text-align: center;
    box-sizing: border-box;
}
.site-footer::after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    top: 0;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,.2);
    width: 100vw;
    z-index: -2;
    pointer-events: none;
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

/* copyright */
.site-footer__copy {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #dfc683;
    text-shadow: 0 0 18px rgba(223,198,131,0.30);
    margin: 0;
    line-height: 1.3;
}

/* subtitle */
.site-footer__sub {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(196,170,110,0.50);
    margin: 0 0 4px;
    line-height: 1.3;
}

/* links row */
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.site-footer__link {
    font-family: "BeaufortforLOL", "Times New Roman", serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(196,160,70,0.60);
    text-decoration: none;
    padding: 0 1rem;
    position: relative;
    transition: color 0.2s;
    line-height: 1.5;
}
.site-footer__link:hover { color: #dfc683; }

/* | separator between links */
.site-footer__link + .site-footer__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: rgba(144,123,91,0.35);
}

@media (max-width: 640px) {
    .site-footer__copy { font-size: 12px; letter-spacing: 2px; }
    .site-footer__link { padding: 3px 10px; font-size: 9px; }
}

/* ════════════════════════════════════════════════════
   FULL SCENE BG — native PNG 1672×941, lossless
   Castle left / sorceress right — no CSS filters
════════════════════════════════════════════════════ */
.bg {
    overflow: hidden;
    background: #07090b;
}

.bg__img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    left: 0 !important;
    transform: none !important;
    object-fit: cover;
    object-position: 18% 42%;
    z-index: 1;
    filter: none !important;
    image-rendering: auto;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
}

.body_home .bg {
    height: 100dvh;
    min-height: 46rem;
}

.body_home .bg,
.body_home .bg__img {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.55) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.55) 88%, transparent 100%);
}

.body_home .bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 80% at 50% 40%, transparent 0%, rgba(6,8,10,.04) 82%, rgba(6,8,10,.18) 100%),
        linear-gradient(180deg, rgba(8,10,12,.02) 0%, transparent 28%, rgba(8,10,12,.12) 100%);
}

.body_home [data-section="header"] {
    isolation: isolate;
}

.body_home .header__title {
    text-shadow: 0 2px 18px rgba(0,0,0,.75);
}

@media (max-width: 1100px) {
    .bg__img {
        object-position: 18% 42%;
    }
}

@media (max-width: 900px) {
    .body_home .bg {
        min-height: 36rem;
    }
    .bg__img {
        object-position: 18% 42%;
    }
}

@media (max-width: 600px) {
    .body_home .bg {
        min-height: 28rem;
        height: 78dvh;
    }
    .bg__img {
        object-position: 18% 42%;
    }
}

/* Nav / inner-page logos: no glow, scale, or hover animation */
a.logo:not(.home-logo),
a.logo:not(.home-logo) .logo__img,
img.logo__img,
img.site-brand-logo__img,
.k-guest-logo-img {
    filter: none !important;
    mix-blend-mode: normal !important;
    animation: none !important;
    transform: none !important;
}

a.logo:not(.home-logo):hover .logo__img {
    filter: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
}
a.logo:not(.home-logo):hover .logo__img_hover {
    filter: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 0 !important;
}

/* Home: only the centered hero logo — hide the small header mark */
.body_home:has(.home-logo) .navigation__box_side_left .logo {
    visibility: hidden;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════
   HOME HERO LOGO — centered on the sky / in front of clouds
════════════════════════════════════════════════════ */
.body_home .home-logo {
    position: absolute;
    left: 50%;
    top: calc(var(--navigation-height) + clamp(2.1rem, 6.5vh, 4.25rem));
    z-index: 12;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-50%);
    transform-origin: center center;
    isolation: isolate;
    mix-blend-mode: normal;
    filter:
        drop-shadow(0 10px 22px rgba(0, 0, 0, .62))
        drop-shadow(0 0 18px rgba(0, 0, 0, .35));
    transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .7s ease;
    will-change: transform, filter;
}

.body_home .home-logo:hover,
.body_home .home-logo:focus-visible {
    transform: translateX(-50%) translateY(-0.16rem) scale(1.028);
    filter:
        drop-shadow(0 0 14px rgba(223, 198, 131, .32))
        drop-shadow(0 12px 24px rgba(0, 0, 0, .55));
}

.body_home .home-logo__img {
    display: block;
    width: clamp(18rem, 44vw, 32rem);
    max-width: min(90vw, 32rem);
    height: auto;
    max-height: none;
    object-fit: contain;
    pointer-events: none;
    transition: filter .7s ease;
}

.body_home .home-logo:hover .home-logo__img,
.body_home .home-logo:focus-visible .home-logo__img {
    filter: brightness(1.06) saturate(1.03);
}

.body_home .countdown-wrap {
    z-index: 14;
}

@media (max-width: 900px) {
    .body_home .home-logo {
        top: calc(var(--navigation-height) + clamp(1.5rem, 5vh, 2.75rem));
    }

    .body_home .home-logo__img {
        width: clamp(16rem, 78vw, 28rem);
        max-width: 90vw;
        max-height: none;
    }
}

@media (max-width: 600px) {
    .body_home .home-logo {
        top: calc(var(--navigation-height) + 1.15rem);
    }

    .body_home .home-logo__img {
        width: min(88vw, 24rem);
        max-width: 88vw;
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .body_home .home-logo,
    .body_home .home-logo__img {
        transition: none;
    }

    .body_home .home-logo:hover,
    .body_home .home-logo:focus-visible {
        transform: translateX(-50%);
    }
}

/* Home: collapse hidden logo slot so menu sits left */
@media (min-width: 1100px) {
    .navigation__menu .menu__dot {
        display: block;
        width: .75rem;
        height: .75rem;
        flex-shrink: 0;
        background-color: transparent;
        background-image: url(../images/menu/dot.png);
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
    }

    .body_home:has(.home-logo) .navigation__box_side_left {
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .navigation__menu.menu,
    .navigation__menu .menu__content,
    .navigation__menu .menu__list {
        justify-content: flex-start !important;
    }

    .navigation__menu .menu__list {
        padding-left: 2rem !important;
    }

    .body_home:has(.home-logo) .navigation__menu .menu__list {
        padding-left: 5.5rem !important;
    }
}

@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
    .body_home .home-logo,
    .body_home .home-logo__img {
        transition: none;
    }
}

.body_home .header__title.is-l2-schedule {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    font-size: clamp(2.15rem, 4.8vw, 3.4rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.12;
}

.body_home .l2-launch-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.body_home .l2-launch-kicker {
    font-size: 0.48em;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.82;
}

.body_home .l2-launch-date {
    font-weight: 500;
}

.body_home .header__title.is-l2-open {
    display: none !important;
}

.body_home .header__title.is-l2-live {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 auto;
    padding: 0.72rem 1.35rem 0.72rem 0.95rem;
    color: #f4e6c2;
    font-size: 1rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
    border-radius: 999px;
    border: 1px solid rgba(223, 198, 131, 0.38);
    background: linear-gradient(180deg, rgba(36, 30, 22, 0.72) 0%, rgba(12, 10, 8, 0.55) 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 12px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 232, 180, 0.14);
    text-shadow: none;
}

.body_home .l2-live-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    text-align: left;
}

.body_home .l2-live-kicker {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #7dffa8;
}

.body_home .l2-live-name {
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f6ecd0;
}

.body_home .l2-live-pulse {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #3ee08c;
    box-shadow: 0 0 0 4px rgba(62, 224, 140, 0.16), 0 0 16px rgba(62, 224, 140, 0.85);
    animation: l2LivePulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes l2LivePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.86); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .body_home .l2-live-pulse {
        animation: none;
    }
}