.onyx-module {
    color: #ede8f3;
}
.onyx-module > .dmn-page-title {
    padding-inline: 1.15rem;
    border-radius: .75rem;
    background: #1b1827;
}
.onyx-module .dmn-page-title h1 {
    color: #fbd181;
}
.onyx-module .dmn-page-title h1 small {
    color: #fbd181;
    font-size: .45em;
    margin-left: .5rem;
    white-space: nowrap;
}
.onyx-module h2 { font-size: 1.35rem; color: #f1eaf6; }
.onyx-module h3 { font-size: 1.1rem; color: #f1eaf6; }
.onyx-intro, .onyx-module-card p { color: #cfc8d7; line-height: 1.5; }
.onyx-form { display: grid; gap: 1rem; max-width: 38rem; margin: 1.5rem 0; }
.onyx-field { display: grid; gap: .35rem; }
.onyx-field small { color: #ded5e5; }
.onyx-form .form-control, .onyx-rank-filters .form-control {
    background: #191622 !important;
    color: #f1edf5 !important;
    border: 1px solid #665b76 !important;
    min-height: 2.8rem;
}
.onyx-form .form-control:focus, .onyx-rank-filters .form-control:focus {
    border-color: #fbd181 !important;
    box-shadow: 0 0 0 2px #fbd18140;
}
.onyx-consent { display: flex; gap: .65rem; align-items: baseline; margin: 0; }
.onyx-consent input { flex: none; accent-color: #fbd181; }
.onyx-consent a, .onyx-links a { color: #fbd181; }
.onyx-form .button { justify-self: start; }
.onyx-notice { padding: .8rem 1rem; background: #15121e; border-left: 3px solid #fbd181; color: #eee7f3; }
.onyx-notice--error { border-left-color: #ff8378; }
.onyx-notice--success { border-left-color: #8fd29c; }
.onyx-links, .onyx-rank-tabs { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: 1rem 0; align-items: center; }
.onyx-rank-tabs a { padding: .55rem .8rem; background: #242430; color: #e6e0ed; border: 1px solid #3d3748; border-radius: 7px; }
.onyx-rank-tabs a[aria-current] { border-color: #fbd181; color: #fbd181; }
.onyx-rank-filters { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; align-items: end; gap: .65rem; margin: 1.3rem 0; }
.onyx-rank-filters label { display: grid; gap: .3rem; min-width: 0; margin: 0; }
.onyx-table-scroll { overflow: auto; }
.onyx-table-scroll .table { color: #e9e2ee; }
.onyx-table-scroll td, .onyx-table-scroll th { white-space: nowrap; }
.onyx-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.onyx-module-card { background: #1b1825; padding: 1.1rem; border: 1px solid #373044; border-radius: .75rem; }
.onyx-module-card .button { margin-top: .25rem; }
.onyx-kicker { display: block; color: #fbd181; font-size: .85rem; margin-bottom: .3rem; }
.onyx-module :is(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid #fbd181; outline-offset: 3px; }
@media (max-width: 680px) {
    .onyx-rank-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .onyx-card-list { grid-template-columns: 1fr; }
}


.header--module {
    height: 170px;
    padding: 0;
}
.header--module .hero, .header--module .headerInfo, .header--module .sparks {
    display: none;
}
.header--module .logo img {
    width: 210px;
    height: 125px;
    aspect-ratio: auto;
}
.onyx-article p {
    color: #ded7e6;
    line-height: 1.6;
    margin: 1rem 0;
}
@media (max-width: 993px) {
    .header--module {
        height: 125px;
        padding: 0;
        justify-content: center;
    }
    .header--module .logo img { width: 185px; height: 105px; }
}


/* Use the Onyx accent on actions, including anchors styled as buttons. */
.button:is(:hover, :focus-visible),
.user-enter:is(:hover, :focus-visible),
.onyx-module .btn:is(:hover, :focus-visible) {
    background: #332836;
    border-color: #bb925a;
    color: #ffe5b2;
    text-decoration: none;
}
.button:is(:active), .user-enter:is(:active), .onyx-module .btn:is(:active) {
    background: #46323b;
    color: #fff0cf;
}
.newsBlock .button-white:is(:hover, :focus-visible) {
    background: #332836;
    border-color: #bb925a;
    color: #ffe5b2;
}
:is(.button, .user-enter, .btn-mobile, .onyx-top-tab, .mobile-menu a):focus-visible {
    outline: 2px solid #fbd181;
    outline-offset: 3px;
}
.user-enter { gap: .6rem; }
.user-enter > i { display: inline-block; color: #fbd181; }
.onyx-rank-tabs a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.onyx-rank-tabs a:is(:hover, :focus-visible) { border-color: #bb925a; background: #332836; color: #ffe5b2; }

.onyx-rank-medal, .tabBlock .table-td.number > .onyx-rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 2.55rem;
    height: 1.65rem;
    gap: .25rem;
    padding: 0 .35rem;
    border: 1px solid var(--medal-border);
    border-radius: .45rem;
    background: var(--medal-bg);
    color: var(--medal-ink);
    font-weight: 700;
    font-size: .88rem;
    line-height: 1;
    white-space: nowrap;
}
.onyx-rank-medal--1 { --medal-ink: #ffe2a3; --medal-bg: #503a22; --medal-border: #b88b4b; }
.onyx-rank-medal--2 { --medal-ink: #e0e6f4; --medal-bg: #373a49; --medal-border: #838ca4; }
.onyx-rank-medal--3 { --medal-ink: #f1c49f; --medal-bg: #4b332c; --medal-border: #9d6a50; }
.onyx-place-1 { --podium-accent: #b88b4b; --podium-fill: #fbd18110; }
.onyx-place-2 { --podium-accent: #838ca4; --podium-fill: #c8d2e010; }
.onyx-place-3 { --podium-accent: #9d6a50; --podium-fill: #e0a27910; }
.onyx-top-table .table-row-top, .onyx-table-scroll tbody tr[class^="onyx-place-"] {
    background: linear-gradient(90deg, var(--podium-fill), transparent 76%);
}
.onyx-top-table .table-row-top .number, .onyx-table-scroll tbody tr[class^="onyx-place-"] > td:first-child {
    box-shadow: inset 2px 0 var(--podium-accent);
}
.tabBlock { height: auto; min-height: 0; }
.tabBlock .onyx-top-table { position: static; height: auto; margin: 0; }
.onyx-top-table .table-td { color: #c4bfd2; min-width: 0; }
.onyx-top-table .table-td.number { flex: 0 0 3.45rem; justify-content: center; }
.onyx-top-table .table-td.name { flex: 1; width: auto; padding: 0 .7rem; overflow: hidden; }
.onyx-top-table .table-td.name a { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onyx-top-table .table-td.name a:hover { color: #ffe5b2; }
.onyx-top-table .table-td.points { flex: 0 0 3.85rem; }
.onyx-top-table .table-td.onyx-guild-mark { flex-basis: 1.65rem; border-left: 0; }
.onyx-top-table .onyx-top-head { height: 2rem; }
.onyx-top-table .onyx-top-head .table-td {
    font: 600 .75rem/1.1 "Open Sans", sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #b4aec2;
}
.onyx-top-table .table-row:not(.onyx-top-head):hover .name { color: #fff2db; }
.tabs-button .onyx-top-tab {
    width: 100%;
    height: 100%;
    justify-content: center;
    gap: .45rem;
    padding: .45rem;
    border: 0;
    border-radius: inherit;
    color: #c5bed1;
    background: transparent;
    font-size: .93rem;
    line-height: 1.15;
}
.tabs-button .onyx-top-tab:hover { background: #322937; color: #ffe5b2; }
.tabs-button .active .onyx-top-tab { color: #fbd181; }

.btn-mobile, .onyx-menu-scrim { display: none; }
@media (max-width: 993px) {
    .topPanel { --onyx-drawer-width: min(20rem, 100vw); }
    .topPanel-left {
        display: block;
        position: fixed;
        z-index: 22;
        inset: 0 auto 0 0;
        width: var(--onyx-drawer-width);
        height: 100dvh;
        overflow: auto;
        overscroll-behavior: contain;
        padding: 0;
        color: #f3edf8;
        background: #211d2b;
        border-right: 1px solid #a6855540;
        box-shadow: 15px 0 45px #100d1970;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform .24s ease, visibility 0s .24s;
    }
    .topPanel-left.active {
        visibility: visible;
        transform: translateX(0);
        transition: transform .24s ease;
    }
    .onyx-menu-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 21;
        background: #100d19b8;
        opacity: 0;
        visibility: hidden;
        transition: opacity .24s ease, visibility 0s .24s;
    }
    .onyx-menu-scrim.active { opacity: 1; visibility: visible; transition: opacity .24s ease; }
    body.onyx-drawer-open { overflow: hidden; }
    .btn-mobile {
        position: fixed;
        display: grid;
        place-items: center;
        left: 10px;
        top: 10px;
        z-index: 23;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid #fbd1815c;
        border-radius: .55rem;
        background: #24202d;
        color: #fbd181;
        font-size: 1.15rem;
        transition: left .24s ease, background-color .2s ease, color .2s ease;
    }
    .btn-mobile.active { left: calc(var(--onyx-drawer-width) - 52px); }
    .btn-mobile:hover { background: #332836; color: #ffe5b2; }
    .btn-mobile .onyx-menu-close-icon, .btn-mobile.active .onyx-menu-open-icon { display: none; }
    .btn-mobile.active .onyx-menu-close-icon { display: inline-block; }
    .mobile-menu { padding: 1rem; }
    .mobile-menu .onyx-mobile-brand {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .55rem 2.6rem .85rem 0;
        border-bottom: 1px solid #fbd18126;
        color: #eae3f0;
        line-height: 1.2;
        text-decoration: none;
    }
    .onyx-mobile-brand img { width: 86px; height: auto; flex: none; }
    .onyx-mobile-brand b { display: block; color: #fbd181; }
    .mobile-menu ul { display: grid; gap: .4rem; margin: .9rem 0 0; padding: 0; list-style: none; }
    .mobile-menu li { padding: 0; }
    .mobile-menu li a {
        display: grid;
        grid-template-columns: 2.1rem minmax(0, 1fr) auto;
        align-items: center;
        gap: .65rem;
        min-height: 3.15rem;
        padding: .4rem .65rem;
        border: 1px solid transparent;
        border-radius: .55rem;
        color: #e9e1f0;
        font-size: .95rem;
        text-decoration: none;
    }
    .mobile-menu li a:is(:hover, :focus-visible, [aria-current]) {
        background: #342b38;
        border-color: #a6855560;
        color: #ffe5b2;
    }
    .onyx-mobile-icon {
        display: grid;
        place-items: center;
        width: 2.1rem;
        height: 2.1rem;
        border-radius: .45rem;
        background: #372d36;
        color: #fbd181;
    }
    .onyx-mobile-arrow { color: #bcb0c4; font-size: .7rem; }
    .mobile-menu li a[aria-current] .onyx-mobile-arrow { color: #fbd181; }
    .topPanel-left .langBlock { position: static; height: auto; margin-left: 1rem; }
}
@media (max-width: 420px) {
    .tabs-button .onyx-top-tab { gap: .25rem; font-size: .8rem; }
    .tabBlock { padding: 14px; }
    .user-enter { gap: .4rem; }
}