body {
    --onyx-bar-height: 86px;
    /* Align the navigation with the 120px strip baked into top-bg.jpg. */
    background-position: center calc(var(--onyx-bar-height) - 120px), center bottom;
}

.onyx-site-nav {
    --shell-gold: #fbd181;
    --shell-paper: #e8deec;
    --shell-line: #fbd18130;
}
.onyx-site-nav .topPanel-right { gap: .55rem; }
.onyx-desktop-brand, .onyx-mobile-home { display: none; }

.onyx-site-nav :is(.menu__link, .onyx-quick-trigger, .onyx-desktop-brand, .onyx-mobile-brand, .onyx-mobile-home, .btn-mobile, .mobile-menu a):focus-visible,
.onyx-footer a:focus-visible, .onyx-quick-nav :is(a, button):focus-visible {
    outline: 2px solid #fbd181;
    outline-offset: 3px;
}
.onyx-quick-trigger {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
}
.onyx-quick-trigger[hidden] { display: none; }

.onyx-site-nav :is(.btn-mobile, .onyx-quick-trigger, .user-enter) {
    min-width: 42px;
    min-height: 42px;
    justify-content: center;
    border: 1px solid #fbd18144;
    border-radius: .55rem;
    background: #2a2333;
    color: #f8e9ed;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.onyx-site-nav :is(.btn-mobile, .onyx-quick-trigger, .user-enter) i { color: var(--shell-gold); }
.onyx-site-nav :is(.btn-mobile, .onyx-quick-trigger, .user-enter):is(:hover, :focus-visible) {
    border-color: #e6b97c;
    background: #433341;
    color: #ffe7bc;
    text-decoration: none;
}
.onyx-site-nav :is(.btn-mobile, .onyx-quick-trigger, .user-enter):active { transform: scale(.94); }
.onyx-site-nav .user-enter {
    padding: .45rem .7rem;
    white-space: nowrap;
    font: 700 .9rem/1.2 'DINNextW1G', sans-serif;
    text-transform: none;
}
.onyx-site-nav .user-enter > i { display: inline-block; }
.onyx-site-nav .online-flex {
    width: auto;
    height: auto;
    margin: 0;
    background: none;
}
.onyx-site-nav .online-block {
    display: grid;
    grid-template-columns: .42rem auto auto;
    align-items: center;
    gap: .18rem .38rem;
    width: auto;
    height: auto;
    min-height: 42px;
    padding: .42rem .55rem;
    border: 1px solid #8d807347;
    border-radius: .55rem;
    background: #1d1b28;
    text-align: left;
    font: 700 .82rem/1 'DINNextW1G', sans-serif;
}
.onyx-site-nav .onyx-realm-title { grid-column: 2; font: inherit; }
.onyx-site-nav .onyx-realm-count {
    grid-column: 3;
    grid-row: 1 / span 2;
    padding-inline-start: .35rem;
    border-inline-start: 1px solid #fbd18133;
    color: #e9d9e5;
    font-size: .73rem;
}
.onyx-site-nav .onyx-realm-state {
    grid-column: 2;
    color: #dbc1ab;
    font: 400 .68rem/1 'DINNextW1G', sans-serif;
    white-space: nowrap;
}
.onyx-site-nav .onyx-realm-dot {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: #d9a174;
}
.onyx-site-nav .online-block-active .onyx-realm-dot {
    background: #ace08a;
    box-shadow: 0 0 .48rem #a4db7b73;
}
.onyx-site-nav .online-block-active .onyx-realm-state { color: #b7dfa2; }

@media (min-width: 994px) {
    .onyx-site-nav {
        width: min(100%, 75rem);
        min-height: var(--onyx-bar-height);
        margin-inline: auto;
        flex-wrap: nowrap;
        gap: 1rem;
    }
    .onyx-site-nav .topPanel-left {
        min-width: 0;
        flex: 1;
        gap: clamp(.5rem, 1.2vw, 1.15rem);
    }
    .onyx-site-nav .topPanel-right { flex: none; }
    .onyx-desktop-brand {
        display: grid;
        place-items: center;
        flex: none;
        padding-right: .85rem;
        border-right: 1px solid var(--shell-line);
    }
    .onyx-desktop-brand img { display: block; width: clamp(91px, 8vw, 112px); height: auto; }
    .onyx-site-nav .menu-wrapper {
        width: auto;
        max-width: none;
        min-width: 0;
        height: auto;
    }
    .onyx-site-nav .langBlock { height: auto; }
    .onyx-site-nav .menu-main { margin: 0; padding: 0; gap: .12rem; }
    .onyx-site-nav .menu__link {
        position: relative;
        display: flex;
        align-items: center;
        gap: .35rem;
        min-height: 42px;
        padding: .5rem clamp(.42rem, .7vw, .68rem);
        border: 1px solid transparent;
        border-radius: .55rem;
        color: var(--shell-paper);
        font: 700 .96rem/1.15 'DINNextW1G', sans-serif;
        white-space: nowrap;
        text-transform: none;
        text-decoration: none;
        transition: background-color .16s ease, border-color .16s ease, color .16s ease;
    }
    .onyx-site-nav .menu__link i { color: #d9b586; font-size: .82em; }
    .onyx-site-nav .user-enter[aria-current="page"] {
        border-color: #d3a579;
        background: #453343;
        color: #ffedcd;
    }
    .onyx-site-nav .menu__link:is(:hover, :focus-visible, [aria-current]) {
        border-color: var(--shell-line);
        background: #392b3bb3;
        color: #ffe4b3;
    }
    .onyx-site-nav .menu__link[aria-current]::after {
        position: absolute;
        inset: auto calc(50% - .7rem) -1px;
        height: 2px;
        border-radius: 2px;
        background: var(--shell-gold);
        content: '';
    }
    .onyx-site-nav .user-enter { padding: .5rem .78rem; font-size: .96rem; }
}

@media (min-width: 994px) and (max-width: 1120px) {
    .onyx-site-nav { gap: .65rem; }
    .onyx-site-nav .menu__link { padding-inline: .4rem; font-size: .91rem; }
    .onyx-site-nav .topPanel-right { gap: .38rem; }
}

@media (max-width: 993px) {
    body { --onyx-bar-height: 74px; }
    .onyx-site-nav {
        position: relative;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
        gap: clamp(.35rem, 1.6vw, .75rem);
        min-height: var(--onyx-bar-height);
        padding: .45rem clamp(.35rem, 1.7vw, 1rem);
    }
    .onyx-site-nav .btn-mobile {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        inset: auto;
        margin: 0;
    }
    .onyx-site-nav .btn-mobile.active {
        position: fixed;
        top: 10px;
        left: calc(var(--onyx-drawer-width) - 52px);
    }
    .onyx-site-nav .onyx-mobile-home {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        justify-items: start;
        align-items: center;
        min-width: 0;
        min-height: 42px;
        border-radius: .45rem;
    }
    .onyx-mobile-home img {
        display: block;
        width: min(100%, 91px);
        height: auto;
    }
    .onyx-site-nav .topPanel-right {
        grid-column: 3;
        grid-row: 1;
        width: auto;
        height: auto;
        gap: clamp(.3rem, 1.3vw, .55rem);
    }
    .onyx-site-nav .mobile-menu li a { text-transform: none; }
}

@media (max-width: 380px) {
    .onyx-site-nav .user-enter:has(i) { width: 42px; padding: 0; }
    .onyx-site-nav .user-enter > .onyx-account-label {
        position: absolute;
        width: 1px;
        height: 1px;
        clip-path: inset(50%);
        overflow: hidden;
    }
}

.onyx-quick-nav {
    position: fixed;
    inset: 0;
    width: min(30rem, calc(100% - 1.5rem));
    max-height: calc(100% - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    margin: auto;
    padding: clamp(1rem, 4vw, 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #ae875567;
    border-radius: 1rem;
    background: #201b29;
    color: #f2e9f5;
    box-shadow: 0 20px 65px #100a19a8;
    color-scheme: dark;
}
.onyx-quick-nav[open] { animation: onyx-quick-in .18s ease-out; }
.onyx-quick-nav::backdrop { background: #100c19cc; }
@keyframes onyx-quick-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.onyx-quick-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .65rem;
}
.onyx-quick-heading h2 { margin: 0; color: #f7e7cf; font-size: 1.3rem; }
.onyx-quick-heading p { margin: .35rem 0 .95rem; color: #c5bbcc; font-size: .87rem; line-height: 1.4; }
.onyx-quick-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #fbd1812b;
    border-radius: .5rem;
    background: #2a2232;
    color: #fbd181;
}
.onyx-quick-close:hover { border-color: #fbd18185; color: #ffe5b2; background: #362b37; }
.onyx-quick-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    min-height: 46px;
    margin: 0;
    padding: 0 .8rem;
    border: 1px solid #a9885e70;
    border-radius: .6rem;
    background: #15121e;
    color: #fbd181;
}
.onyx-quick-input:focus-within { border-color: #fbd181; box-shadow: 0 0 0 2px #fbd18130; }
.onyx-quick-input input[type="search"] {
    width: 100%;
    padding: .65rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f4edf6;
    font-size: 1rem;
}
.onyx-quick-input input::placeholder { color: #b8adbf; opacity: 1; }
.onyx-quick-results { display: grid; gap: .22rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.onyx-quick-results li[hidden] { display: none; }
.onyx-quick-results a {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    padding: .55rem .75rem;
    border: 1px solid transparent;
    border-radius: .45rem;
    color: #f2e9f5;
    font-size: .94rem;
    text-decoration: none;
}
.onyx-quick-results a:is(:hover, :focus-visible, [aria-current]) {
    border-color: #fbd18145;
    background: #382c38;
    color: #ffe5b2;
}
.onyx-quick-results i { color: #fbd181; }
.onyx-quick-results i:last-child { font-size: .7rem; }
.onyx-quick-empty { margin: .8rem 0 .2rem; color: #ddd0e1; }
.onyx-quick-empty:empty { margin: 0; }

.onyx-footer.footer {
    position: relative;
    display: grid;
    gap: 1.25rem;
    width: min(100%, 73rem);
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(.65rem, 2.5vw, 1.25rem) .85rem;
    border-top: 1px solid #fbd18140;
    color: #c9bdce;
    font-family: 'DINNextW1G', sans-serif;
}

.onyx-footer::before {
    position: absolute;
    top: -5px;
    left: calc(50% - 4px);
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    border: 1px solid #c69b69;
    background: #281d2c;
    content: '';
}

.onyx-footer-body {
    display: grid;
    grid-template-columns: minmax(12rem, .8fr) 1.2fr;
    align-items: start;
    gap: 1.25rem clamp(1.25rem, 6vw, 5rem);
}

.onyx-footer-identity {
    display: grid;
    justify-items: start;
    gap: .55rem;
}

.onyx-footer-brand { display: block; border-radius: .4rem; }
.onyx-footer-brand img { display: block; width: 152px; height: auto; }

.onyx-footer-realm {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: #edd4b5;
    font-size: .87rem;
}

.onyx-footer-realm i { color: #fbd181; }

.onyx-footer a {
    color: #e8ddeb;
    font-size: .94rem;
    text-decoration: none;
}

.onyx-footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1.4rem;
}

.onyx-footer-nav h2 {
    margin: .55rem 0 .45rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #fbd1812e;
    color: #f8d493;
    font: 700 .79rem/1.25 'DINNextW1G', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.onyx-footer-nav ul { margin: 0; padding: 0; list-style: none; }

.onyx-footer-nav a {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.45rem;
    padding: .4rem .45rem;
    border-radius: .35rem;
    line-height: 1.25;
    transition: background-color .16s ease, color .16s ease;
}

.onyx-footer-nav a i {
    flex: 0 0 1rem;
    color: #d6af7f;
    text-align: center;
    font-size: .84em;
}

.onyx-footer-nav a:is(:hover, :focus-visible),
.onyx-footer-meta nav a:is(:hover, :focus-visible) {
    background: #433140b3;
    color: #ffe1a4;
}

.onyx-footer :is(.onyx-footer-play, .onyx-footer-top) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.6rem;
    padding: .45rem .75rem;
    border: 1px solid #a9815a;
    border-radius: .5rem;
    color: #ffe0a6;
    line-height: 1.2;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.onyx-footer .onyx-footer-play {
    margin-top: .3rem;
    border-color: #dfb279;
    background: #ebc486;
    color: #271b24;
    font-weight: 700;
}

.onyx-footer .onyx-footer-play:is(:hover, :focus-visible) { background: #ffe0a4; }
.onyx-footer .onyx-footer-top:is(:hover, :focus-visible) { border-color: #fbd181; background: #433140; }

.onyx-footer-meta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .55rem 1.25rem;
    padding-top: .85rem;
    border-top: 1px solid #fbd18125;
}

.onyx-footer-meta small { color: #c9bdce; font-size: .84rem; }
.onyx-footer-meta nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .45rem; }

.onyx-footer-meta nav a {
    padding: .45rem .35rem;
    border-radius: .3rem;
    color: #d4c8d8;
    font-size: .83rem;
    line-height: 1.25;
}

.onyx-footer .onyx-footer-top { font-size: .84rem; white-space: nowrap; }

@media (max-width: 680px) {
    .onyx-footer-body { grid-template-columns: 1fr; }
    .onyx-footer-identity {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .25rem .65rem;
    }
    .onyx-footer-brand img { width: clamp(108px, 24vw, 134px); }
    .onyx-footer-realm { grid-column: 1; }
    .onyx-footer .onyx-footer-play {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }
    .onyx-footer-meta { grid-template-columns: minmax(0, 1fr) auto; }
    .onyx-footer-meta nav { grid-row: 1; grid-column: 1 / -1; justify-content: flex-start; }
}