:root {
    --bg: #070910;
    --panel: rgba(11, 16, 31, .78);
    --panel-solid: #11182c;
    --line: rgba(255, 255, 255, .11);
    --text: #eef2ff;
    --muted: #aeb8d5;
    --gold: #e7be6a;
    --blue: #7aa2ff;
    --green: #66d19e;
    --red: #ff7d7d;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scrollbar-color: #c48b31 rgba(6, 7, 10, .85);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: rgba(6, 7, 10, .85);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f3d28a, #c48b31);
    border: 2px solid rgba(6, 7, 10, .85);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f7dfa8, #d69b3f);
}

::-webkit-scrollbar-corner {
    background: rgba(6, 7, 10, .85);
}

body {
    margin: 0;
    min-height: 100%;
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0;
    background: var(--bg) url("../images/body-bg-top.webp") center top / cover fixed no-repeat;
}

body,
body :where(*):not(input):not(textarea):not(select):not(option):not([contenteditable="true"]) {
    caret-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea,
select,
option,
[contenteditable="true"] {
    caret-color: auto;
    -webkit-user-select: text;
    user-select: text;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .48);
}

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

.shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 28px;
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto;
    padding: 26px 0;
}

.sidebar {
    position: sticky;
    top: 24px;
    align-self: start;
    display: grid;
    gap: 14px;
}

.brand,
.server-card,
.nav,
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    backdrop-filter: blur(8px);
}

.brand {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 18px 14px;
    color: var(--gold);
    font-weight: 800;
    text-transform: uppercase;
}

.brand img {
    max-width: 176px;
    height: auto;
}

.server-card {
    padding: 14px;
}

.server-card strong {
    display: block;
    font-size: 22px;
    line-height: 1.2;
}

.server-card small,
.label,
.eyebrow {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.nav {
    display: grid;
    gap: 4px;
    padding: 10px;
}

.nav a {
    display: block;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 6px;
    color: #dbe3ff;
}

.nav a:hover,
.nav a.active {
    background: rgba(122, 162, 255, .14);
    color: #fff;
}

.main {
    display: grid;
    gap: 18px;
}

.hero {
    min-height: 430px;
    display: flex;
    align-items: flex-end;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(4, 7, 14, .88), rgba(4, 7, 14, .28)),
        url("../images/slider1.webp") center / cover no-repeat;
    overflow: hidden;
}

.hero-copy {
    max-width: 650px;
}

.hero h1,
.page-head h1 {
    margin: 4px 0 10px;
    font-size: clamp(42px, 6vw, 82px);
    line-height: .96;
    letter-spacing: 0;
}

.hero p,
.page-head p,
.panel p {
    margin: 0;
    color: var(--muted);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 700;
}

.button.primary {
    background: var(--gold);
    color: #17110a;
    border-color: transparent;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel {
    padding: 18px;
}

.panel h2 {
    margin: 6px 0 8px;
    font-size: 24px;
    line-height: 1.2;
}

.page-head {
    padding: 24px 0 4px;
}

.status.ok {
    border-color: rgba(102, 209, 158, .5);
}

.status.bad {
    border-color: rgba(255, 125, 125, .45);
}

@media (max-width: 860px) {
    .shell {
        grid-template-columns: 1fr;
        width: min(100% - 20px, 680px);
        padding: 10px 0 24px;
    }

    .sidebar {
        position: static;
    }

    .brand {
        grid-template-columns: auto 1fr;
        justify-items: start;
    }

    .brand img {
        max-width: 128px;
    }

    .nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .nav a {
        text-align: center;
        font-size: 13px;
        padding: 8px 4px;
    }

    .hero {
        min-height: 360px;
        padding: 24px;
    }

    .grid,
    .grid.two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero h1,
    .page-head h1 {
        font-size: 42px;
    }
}

.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.panel-title strong {
    color: var(--gold);
    font-size: 13px;
    text-transform: uppercase;
}

/*
 * Sections open and close on their own summary, so the sidebar stays short
 * enough to scan on a page that has grown to seven groups.
 */
/*
 * A generated page sits among the articles of its section, marked only by its
 * colour - it is one more thing to read, not a different kind of navigation.
 */
.wiki-nav__item--page {
    color: var(--modern-gold);
}

.wiki-nav__section > summary {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

/*
 * The caption carries the section name and a line saying what is inside it, so
 * a reader can tell the sections apart before opening any of them.
 */
.wiki-nav__caption {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.wiki-nav__icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 25%, rgba(240, 198, 116, .16), transparent 48%),
        rgba(8, 16, 25, .72);
    color: rgba(238, 242, 255, .72);
    box-shadow: inset 0 0 12px rgba(68, 160, 255, .08);
}

.wiki-nav__icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wiki-nav__section[open] > summary .wiki-nav__icon,
.wiki-nav__section > summary:hover .wiki-nav__icon {
    border-color: rgba(240, 198, 116, .52);
    color: var(--modern-gold);
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 224, 145, .26), transparent 50%),
        rgba(24, 19, 13, .82);
}

.wiki-nav__caption strong {
    color: #eef2ff;
    font-size: 13px;
}

.wiki-nav__caption small {
    overflow: hidden;
    color: rgba(238, 242, 255, .45);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.wiki-nav__section > summary::-webkit-details-marker {
    display: none;
}

.wiki-nav__section > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    justify-self: end;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}

.wiki-nav__section[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.class-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.class-picker__item {
    flex: 1 1 110px;
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 10px 8px;
    border: 1px solid rgba(93, 151, 217, .18);
    border-radius: 8px;
    background: rgba(7, 34, 57, .55);
    color: #eef2ff;
    text-align: center;
    text-decoration: none;
}

.class-picker__item.active,
.class-picker__item:hover {
    border-color: var(--modern-gold);
    background: rgba(240, 198, 116, .12);
}

.class-picker__item img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.class-picker__item strong {
    color: var(--modern-gold);
    font-size: 12px;
}

.class-picker__item small {
    color: rgba(238, 242, 255, .55);
    font-size: 10px;
}

.class-detail__head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.class-detail__head img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.class-detail__head h1 {
    margin: 2px 0 6px;
}

.class-facts {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 8px 16px;
    margin: 16px 0 0;
}

.class-facts dt {
    color: rgba(238, 242, 255, .52);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.class-facts dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.class-chip {
    padding: 4px 9px;
    border: 1px solid rgba(93, 151, 217, .22);
    border-radius: 999px;
    background: rgba(7, 34, 57, .6);
    font-size: 11px;
    font-weight: 800;
}

.class-note {
    color: rgba(238, 242, 255, .5);
    font-size: 11px;
}

.class-special__name {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-wrap: anywhere;
}

.class-special__icon {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    flex-shrink: 0;
    object-fit: cover;
}

.class-special__icon--empty {
    visibility: hidden;
}

/* Formulas are read character by character, so they get a fixed pitch. */
.class-formula {
    color: var(--modern-gold);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    /* A long sum has to break rather than run off the panel. */
    overflow-wrap: anywhere;
}

.class-reference {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    min-width: 0;
}

.class-reference__calculations {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.class-reference__calculations:only-child {
    grid-column: 1 / -1;
}

.class-reference .content-panel {
    min-width: 0;
    margin: 0;
    padding: 18px;
    border-radius: 6px;
}

@media (max-width: 920px) {
    .class-reference {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .class-reference__skills .ranking-table--plain,
    .class-reference__skills tbody {
        display: block;
    }

    .class-reference__skills tr {
        display: grid;
        gap: 6px;
        padding: 10px 8px;
        border-bottom: 1px solid var(--line);
    }

    .class-reference__skills .ranking-table--plain td,
    .class-reference__skills .ranking-table--plain td:first-child {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
    }
}

.drops-search {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.drops-search input {
    flex: 1 1 260px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(93, 151, 217, .28);
    border-radius: 8px;
    background: rgba(7, 34, 57, .6);
    color: #eef2ff;
}

.drops-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.drops-item img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.drops-panel {
    display: grid;
    gap: 14px;
}

.drops-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.drops-category-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(240, 198, 116, .24);
    border-radius: 999px;
    background: rgba(5, 23, 39, .72);
    color: rgba(238, 242, 255, .78);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.drops-category-nav a:hover {
    border-color: rgba(240, 198, 116, .52);
    color: #fff;
}

.drops-category-nav strong {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(240, 198, 116, .14);
    color: var(--modern-gold);
    font-size: 11px;
}

.drops-category-list {
    display: grid;
    gap: 18px;
}

.drops-category-section {
    display: grid;
    gap: 10px;
    scroll-margin-top: 108px;
}

.drops-category-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(240, 198, 116, .22);
}

.drops-category-head h2 {
    margin: 0;
    color: var(--modern-gold);
    font-size: 16px;
    font-weight: 950;
    text-transform: uppercase;
}

.drops-category-head span {
    color: rgba(238, 242, 255, .52);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.drops-table th:first-child,
.drops-table td:first-child {
    width: 54px;
}

.drops-table th:nth-child(2),
.drops-table td:nth-child(2) {
    width: 28%;
}

.event-bag-nav {
    margin-bottom: 16px;
}

.event-bag-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.event-bag-card {
    overflow: hidden;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(10, 24, 39, .88), rgba(0, 0, 0, .72)),
        rgba(0, 0, 0, .68);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .28);
    color: rgba(238, 242, 255, .88);
    scroll-margin-top: 112px;
}

.event-bag-card__head {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(240, 198, 116, .18);
    background: rgba(240, 198, 116, .07);
    text-align: center;
}

.event-bag-card__head h2 {
    margin: 0;
    color: var(--modern-gold);
    font-size: 15px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.event-bag-card__body {
    display: grid;
    justify-items: center;
    gap: 11px;
    min-height: 210px;
    padding: 24px 26px 26px;
    text-align: center;
}

.event-bag-card__icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
    image-rendering: auto;
}

.event-bag-card__group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 3px 8px;
    max-width: 100%;
}

.event-bag-card__section {
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: 720px;
}

.event-bag-card__section:has(> h3) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 3px 8px;
}

.event-bag-card__section h3 {
    margin: 0;
    color: var(--modern-gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.event-bag-card__group h4 {
    margin: 0;
    color: rgba(255, 222, 137, .92);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.event-bag-card__group p {
    margin: 0;
    color: rgba(238, 242, 255, .84);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 860px) {
    .event-bag-card-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* One line per condition, so a row with five maps stays readable. */
.drops-conditions {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guild-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
}

.guild-cell:hover {
    color: var(--modern-gold);
}

.guild-header {
    display: grid;
    gap: 16px;
}

.guild-header__identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.guild-header__mark {
    display: grid;
    place-items: center;
    padding: 8px;
    border: 1px solid rgba(93, 151, 217, .25);
    border-radius: 10px;
    background: rgba(7, 34, 57, .6);
}

.guild-header__identity h1 {
    margin: 2px 0 4px;
}

.guild-header__master {
    margin: 0;
    color: var(--muted);
}

.guild-header__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.guild-header__stats > span {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid rgba(93, 151, 217, .18);
    border-radius: 8px;
    background: rgba(7, 34, 57, .58);
    text-align: center;
}

.guild-header__stats small {
    color: rgba(238, 242, 255, .52);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.guild-header__stats strong {
    color: var(--modern-gold);
    font-size: 15px;
    font-weight: 950;
}

.guild-header__notice {
    padding: 12px 14px;
    border: 1px solid rgba(93, 151, 217, .18);
    border-radius: 8px;
    background: rgba(7, 34, 57, .45);
}

.guild-header__notice small {
    color: rgba(238, 242, 255, .52);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.guild-header__notice p {
    margin: 6px 0 0;
}

/*
 * The emblem is an 8x8 grid blown up, so it must not be smoothed - the game
 * draws it as square pixels and so does this.
 */
.guild-mark {
    flex: 0 0 auto;
    image-rendering: pixelated;
}

.guild-score {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ranking-detail__open {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(240, 198, 116, .4);
    border-radius: 5px;
    background: rgba(240, 198, 116, .12);
    color: var(--modern-gold);
    cursor: pointer;
}

.ranking-detail__open::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}

.ranking-detail__open:hover {
    background: var(--modern-gold);
    color: #1a1208;
}

.ranking-detail {
    width: min(420px, calc(100vw - 32px));
    padding: 20px;
    border: 1px solid rgba(93, 151, 217, .3);
    border-radius: 12px;
    background: #0a2036;
    color: #eef2ff;
}

.ranking-detail::backdrop {
    background: rgba(4, 10, 20, .72);
}

.ranking-detail__close-form {
    float: right;
    margin: -6px -6px 0 0;
}

.ranking-detail__close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #eef2ff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ranking-detail__close:hover {
    background: var(--modern-gold);
    color: #1a1208;
}

.ranking-detail__heading {
    margin: 0 0 14px;
    color: rgba(238, 242, 255, .62);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ranking-detail__who {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 16px;
}

.ranking-detail__rank {
    min-width: 26px;
    padding: 3px 0;
    border-radius: 6px;
    background: rgba(240, 198, 116, .14);
    color: var(--modern-gold);
    font-weight: 900;
    text-align: center;
}

.ranking-detail__icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.ranking-detail__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(7, 34, 57, .8);
    font-weight: 900;
    text-transform: uppercase;
}

.ranking-detail__total b {
    color: var(--modern-gold);
}

.ranking-detail__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ranking-detail__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(93, 151, 217, .18);
    border-radius: 8px;
    background: rgba(7, 34, 57, .55);
}

.ranking-detail__list b {
    color: var(--modern-gold);
}

.ranking-detail__event {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ranking-detail__event img {
    flex: 0 0 auto;
    object-fit: contain;
}

.ranking-detail__category-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: var(--modern-gold);
    fill: currentColor;
    stroke: none;
}

.ranking-note {
    margin: -6px 0 14px;
    color: var(--muted);
    font-size: 12px;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

th,
td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

tbody tr:hover {
    background: rgba(255, 255, 255, .05);
}

.form {
    display: grid;
    gap: 16px;
}

.form label {
    display: grid;
    gap: 7px;
}

.form label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

input {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, .28);
    color: var(--text);
    font: inherit;
}

input:focus {
    outline: 2px solid rgba(122, 162, 255, .35);
    border-color: rgba(122, 162, 255, .7);
}

.form small,
.notice {
    color: var(--red);
}

.compact {
    gap: 16px;
}

.metric strong {
    display: block;
    margin: 8px 0 2px;
    color: var(--gold);
    font-size: 38px;
    line-height: 1;
}

@media (max-width: 520px) {
    .panel-title {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Modern MuWeb adaptation */
:root {
    --modern-gold: #f0c674;
    --modern-green: #00d46a;
    --modern-red: #ff5b5b;
    --modern-panel: rgba(0, 0, 0, .58);
    --modern-panel-2: rgba(5, 9, 14, .78);
    --modern-line: rgba(255, 255, 255, .12);
}

.modern-body {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.82)),
        url("../images/modern/body-bg-top.webp") center top / cover fixed no-repeat,
        #000;
    font-family: Orbitron, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.modern-body::before {
    display: none;
}

.site-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 28px;
    width: min(1240px, calc(100% - 28px));
    margin: 0 auto;
    padding: 24px 0 42px;
}

.modern-sidebar {
    position: sticky;
    top: 18px;
    align-self: start;
    display: grid;
    gap: 12px;
}

.modern-logo,
srvBadge,
.sideMenu,
.userPanel,
.modern-panel,
.promo-card {
    border: 1px solid var(--modern-line);
    border-radius: 8px;
    background: var(--modern-panel);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    backdrop-filter: blur(6px);
}

.modern-logo {
    display: grid;
    justify-items: center;
    padding: 16px 12px;
}

.modern-logo img {
    width: 176px;
}

.srvBadge {
    padding: 14px 12px;
    text-align: center;
}

.srvBadge__title {
    color: var(--modern-gold);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.srvBadge__meta {
    margin-top: 7px;
    color: rgba(255,255,255,.75);
    font-size: 12px;
}

.srvBadge__row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    margin-top: 9px;
}

.srvBadge__count {
    color: #fff;
    font-size: 28px;
    font-weight: 900;
}

.srvBadge__status {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.srvBadge__status.online,
.state.on {
    color: var(--modern-green);
}

.srvBadge__status.offline,
.state.off {
    color: var(--modern-red);
}

.sideMenu {
    display: grid;
    gap: 5px;
    padding: 10px;
}

.sideMenu a {
    min-height: 38px;
    padding: 10px 11px;
    border-radius: 6px;
    color: #eef2ff;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.sideMenu a:hover,
.sideMenu a.active {
    background: rgba(240, 198, 116, .16);
    color: var(--modern-gold);
}

.userPanel {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.linkOrange {
    color: var(--modern-gold);
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
}

.login-mini {
    display: grid;
    gap: 8px;
    margin: 0;
}

.login-mini input {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 13px;
}

.login-mini button,
.rank-button,
.class-button {
    min-height: 36px;
    border: 1px solid rgba(240,198,116,.42);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(56,35,12,.95), rgba(10,14,22,.95));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(240,198,116,.12);
}

.login-mini button:hover,
.rank-button:hover,
.rank-button.active,
.class-button:hover,
.class-button.active {
    color: #1a1208;
    background: var(--modern-gold);
}

.muted-link {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.modern-main {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.home-stage {
    position: relative;
    display: grid;
    gap: 18px;
    align-content: start;
}

.home-banners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 22px;
    padding: 4px 0 8px;
}

.home-streambox {
    position: fixed;
    z-index: 12;
    top: 86px;
    right: 8px;
    display: grid;
    width: 304px;
    max-width: calc(100vw - 16px);
    background: rgba(0, 0, 0, .86);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .46);
}

.home-streambox__list {
    display: grid;
    gap: 8px;
    padding: 0 0 5px;
}

.home-stream-card {
    position: relative;
    display: grid;
    min-width: 0;
}

.home-stream-card__bar {
    position: absolute;
    z-index: 2;
    top: 2px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    padding: 0 3px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

.home-stream-card__bar span {
    width: 18px;
    height: 12px;
    background:
        linear-gradient(#b22234 0 14%, #fff 14% 28%, #b22234 28% 42%, #fff 42% 56%, #b22234 56% 70%, #fff 70% 84%, #b22234 84%),
        linear-gradient(#3c3b6e, #3c3b6e);
    background-size: 100% 100%, 8px 7px;
    background-repeat: no-repeat;
}

.home-stream-card__bar::after {
    content: '';
    width: 7px;
    height: 14px;
    border-radius: 999px;
    background: #ffb000;
    box-shadow: 0 8px 0 -3px #ffb000;
}

.home-stream-card__video {
    position: relative;
    overflow: hidden;
    width: 304px;
    max-width: 100%;
    height: 171px;
    background: #050505;
    cursor: default;
}

.home-stream-card__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.home-streambox__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px auto;
    align-items: center;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(240, 198, 116, .5);
    background: rgba(59, 30, 5, .72);
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    text-decoration: none;
}

.home-streambox__foot span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-streambox__foot strong {
    justify-self: center;
    width: 12px;
    height: 12px;
    border-right: 1px solid rgba(238, 242, 255, .86);
    border-bottom: 1px solid rgba(238, 242, 255, .86);
    transform: rotate(45deg) translateY(-3px);
}

.home-streambox__foot em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--modern-green);
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.home-streambox__foot em::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--modern-green);
    box-shadow: 0 0 9px rgba(46, 204, 113, .45);
}

.home-banner {
    position: relative;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(240, 198, 116, .26);
    border-radius: 12px;
    background: rgba(6, 7, 10, .5);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .45);
    transition: transform .2s ease, border-color .2s ease;
}

.home-banner:hover {
    transform: translateY(-3px);
    border-color: rgba(240, 198, 116, .5);
}

.home-banner--wide {
    grid-column: 1 / -1;
}

@media (max-width: 760px) {
    .home-banners {
        grid-template-columns: 1fr;
    }
}

.home-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.home-banner__zoom {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(240, 198, 116, .5);
    border-radius: 50%;
    background: rgba(6, 7, 10, .72);
    color: #f0c674;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.home-banner:hover .home-banner__zoom,
.home-banner__zoom:focus-visible {
    opacity: 1;
}

.home-banner__zoom:hover {
    background: rgba(6, 7, 10, .92);
    transform: scale(1.06);
}

.home-banner__zoom svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

@media (hover: none) {
    .home-banner__zoom {
        opacity: 1;
    }
}

.image-lightbox {
    position: fixed;
    inset: 0;
    max-width: 92vw;
    max-height: 92vh;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.image-lightbox::backdrop {
    background: rgba(3, 4, 6, .86);
}

.image-lightbox img {
    display: block;
    max-width: 92vw;
    max-height: 92vh;
    border: 1px solid rgba(240, 198, 116, .4);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.image-lightbox__close {
    position: fixed;
    top: 18px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(240, 198, 116, .5);
    border-radius: 50%;
    background: rgba(6, 7, 10, .78);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.image-lightbox__close:hover {
    background: rgba(6, 7, 10, .95);
}

.logo-stage {
    display: grid;
    justify-items: center;
    min-height: 150px;
    align-items: center;
}

.logo-stage img {
    width: min(360px, 80%);
}

.promoGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.promo-card {
    min-height: 160px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.72)),
        url("../images/modern/banner-wrapper-bg.jpg") center / cover no-repeat;
}

.promo-card h2 {
    margin: 0 0 12px;
    color: var(--modern-gold);
    font-size: 28px;
    line-height: 1.05;
    text-transform: uppercase;
}

.promo-card h2 span {
    color: #fff;
}

.promo-card p {
    color: rgba(238,242,255,.78);
    font-family: Inter, system-ui, sans-serif;
}

.promo-card.wide {
    grid-column: span 2;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.info-grid div {
    min-height: 74px;
    display: grid;
    align-content: center;
    justify-items: center;
    border: 1px solid var(--modern-line);
    border-radius: 6px;
    background: rgba(0,0,0,.36);
    text-align: center;
}

.info-grid strong {
    color: var(--modern-gold);
    font-size: 20px;
}

.info-grid span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}

.home-actions {
    justify-content: center;
}

.modern-head {
    padding-top: 6px;
}

.modern-head h1 {
    color: var(--modern-gold);
    text-align: left;
    text-transform: uppercase;
}

.modern-panel {
    background: var(--modern-panel-2);
}

.ranking-switcher {
    display: grid;
    gap: 10px;
}

.rk-group {
    padding: 9px;
    border-radius: 8px;
    background: rgba(0,0,0,.25);
}

.rk-group-title {
    margin-bottom: 7px;
    color: rgba(255,255,255,.68);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.rk-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 7px;
}

.rank-button,
.class-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    text-align: center;
}

.rk-class-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.class-button {
    width: 42px;
    min-width: 42px;
    padding: 4px;
}

.class-button img,
.class-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
}

.search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 0;
}

.search-results {
    margin-top: 16px;
}

.result-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--modern-line);
}

.result-line span {
    color: var(--muted);
    font-size: 12px;
}

.ranking-table th,
.ranking-table td {
    padding: 10px 9px;
    font-size: 13px;
}

.ranking-table tr:nth-child(odd) {
    background: rgba(0,0,0,.25);
}

.state {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

/* Compact rankings */
.ranking-shell {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
    caret-color: transparent;
    cursor: default;
    user-select: none;
}

.ranking-shell *,
.search-panel,
.search-panel *:not(input),
.table-panel,
.table-panel * {
    caret-color: transparent;
    cursor: default;
    user-select: none;
}

/* The blanket rule above lands on the label inside a link too, and a cursor
   declared straight on an element beats the pointer it would have inherited
   from its parent. The hand therefore turned back into an arrow the moment it
   crossed the text of a tab, which reads as "not clickable" even though the
   click always worked. Giving links and buttons their cursor back covers the
   children as well; disabled controls keep the arrow, since there the arrow is
   the truth. */
.ranking-shell a,
.ranking-shell a *,
.ranking-shell button:not(:disabled),
.ranking-shell button:not(:disabled) *,
.search-panel a,
.search-panel a *,
.table-panel a,
.table-panel a * {
    cursor: pointer;
}

/*
 * Three fixed columns left an empty third of the row once the Events tab was
 * removed. The tabs divide whatever is there between them instead.
 */
.ranking-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
}

.ranking-tab {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 150px;
    overflow: hidden;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 8px;
    background: rgba(0, 0, 0, .58);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
    transition: transform .16s ease, border-color .16s ease, filter .16s ease;
    cursor: pointer;
}

.ranking-tab:hover,
.ranking-tab.active {
    border-color: rgba(240, 198, 116, .72);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.ranking-tab__bg,
.ranking-tab__shade {
    position: absolute;
    inset: 0;
}

.ranking-tab__bg {
    background-position: center;
    background-size: cover;
    opacity: 1;
}

/*
 * No wash over the artwork anymore - the label keeps its contrast from its
 * own text-shadow instead of a dark veil covering part of the image.
 */
.ranking-tab__shade {
    background: none;
}

/*
 * The artwork carries its own title now (baked into the image), so the HTML
 * label is kept for accessibility/SEO but not shown on screen - showing both
 * would just repeat the same word twice in two different places on the tile.
 */
.ranking-tab strong {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ranking-tab.active strong {
    color: #fff;
}

.ranking-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
}

.ranking-toolbar .rk-group,
.class-filter {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.ranking-toolbar .rk-group-title,
.class-filter .rk-group-title {
    margin: 0 0 6px;
    color: rgba(238, 242, 255, .55);
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1;
    text-align: left;
}

/*
 * The track used to be fixed at four columns, so a fifth button dropped to a
 * line of its own and sat there alone. Letting the buttons grow means every
 * line is full whatever the ranking group holds.
 */
.ranking-toolbar .rk-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ranking-toolbar .rk-row > .rank-button {
    flex: 1 1 140px;
}

.ranking-toolbar .rank-button {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 72px;
    overflow: hidden;
    padding: 0;
    border-color: rgba(240, 198, 116, .24);
    border-radius: 8px;
    background: rgba(0, 0, 0, .32);
    box-shadow: none;
    color: rgba(238, 242, 255, .82);
    text-align: left;
    cursor: pointer;
}

.ranking-toolbar .rank-button:hover,
.ranking-toolbar .rank-button.active {
    border-color: rgba(240, 198, 116, .72);
    background: rgba(0, 0, 0, .32);
    color: var(--modern-gold);
}

.rank-button__bg,
.rank-button__shade {
    position: absolute;
    inset: 0;
}

.rank-button__bg {
    background-position: center;
    background-size: cover;
    opacity: .68;
    transition: opacity .16s ease, transform .16s ease;
}

.rank-button__shade {
    background: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .42));
}

.ranking-toolbar .rank-button:hover .rank-button__bg,
.ranking-toolbar .rank-button.active .rank-button__bg {
    opacity: .86;
    transform: scale(1.02);
}

.ranking-toolbar .rank-button strong {
    position: relative;
    z-index: 1;
    padding: 10px 12px;
    color: #fff;
    font-size: 12px;
    line-height: 1.05;
    text-transform: uppercase;
}

.ranking-toolbar .rank-button.active strong {
    color: #fff;
}

.class-filter {
    padding: 10px 12px;
}

.character-filterbar {
    display: flex;
    justify-content: center;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
}

.character-filterbar .class-filter {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
}

.class-filter .rk-class-row {
    justify-content: flex-start;
    gap: 5px;
}

.class-filter .class-button {
    width: 32px;
    min-width: 32px;
    min-height: 30px;
    padding: 3px;
    border: 0;
    border-radius: 5px;
    background: rgba(0, 0, 0, .3);
    box-shadow: none;
    font-size: 10px;
    cursor: pointer;
}

/*
 * The shared active state paints near-black text for a gold background, but
 * these buttons keep a dark one - which left ALL as dark brown on dark. Gold
 * text marks the selection here instead, and the icons beside it are unharmed
 * because only their background changes.
 */
.class-filter .class-button:hover,
.class-filter .class-button.active {
    background: rgba(240, 198, 116, .16);
    color: var(--modern-gold);
}

.class-filter .class-button img {
    width: 19px;
    height: 19px;
}

.rank-range-filter {
    flex: 0 0 auto;
}

.rank-range-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 5px;
}

.rank-range-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    min-width: 74px;
    padding: 5px 9px;
    border: 1px solid rgba(240, 198, 116, .22);
    border-radius: 5px;
    background: rgba(0, 0, 0, .3);
    color: rgba(238, 242, 255, .82);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.rank-range-button:hover,
.rank-range-button.active {
    border-color: rgba(240, 198, 116, .72);
    background: rgba(240, 198, 116, .18);
    color: var(--modern-gold);
}

.search-panel {
    padding: 12px;
    margin-bottom: 10px;
}

.search-panel .search-form {
    grid-template-columns: minmax(180px, 360px) auto;
    gap: 8px;
}

.search-panel input {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
}

.search-panel .button {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 11px;
}

.search-panel .search-results {
    margin-top: 10px;
}

.table-panel {
    padding: 14px;
}

.table-panel .panel-title {
    margin-bottom: 8px;
}

.table-panel .panel-title:has(> strong:only-child) {
    justify-content: flex-end;
}

.ranking-table {
    min-width: 820px;
}

/*
 * Two columns of prose need no minimum width - they wrap. The site-wide
 * minimum above exists for rankings, where a dozen columns cannot be squeezed;
 * applying it to a reference table put a scrollbar under content that fitted.
 */
.ranking-table--plain {
    min-width: 0;
}

/*
 * A fixed layout keeps the label column the same width in every reference
 * table, so the formulas below line up with the ones above instead of each
 * table sizing itself to its own longest row.
 */
.ranking-table--plain {
    table-layout: fixed;
}

.ranking-table--plain td {
    white-space: normal;
}

.ranking-table--plain td:first-child {
    width: 40%;
}


.ranking-table th,
.ranking-table td {
    padding: 7px 8px;
    font-size: 12px;
}

.ranking-table th {
    font-size: 10px;
}

.ranking-table--characters th,
.ranking-table--characters td {
    text-align: center;
}

.ranking-table--characters th:nth-child(2),
.ranking-table--characters td:nth-child(2) {
    text-align: left;
}

.ranking-table .class-icon {
    width: 18px;
    height: 18px;
}

.ranking-status-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

.ranking-status-icon--hidden {
    filter: grayscale(1) brightness(.82);
    opacity: .78;
}

.ranking-character {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
    font-weight: 800;
}

.ranking-character a {
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
}

.ranking-character a:hover {
    color: var(--modern-gold);
}

.ranking-character .ranking-status-icon,
.ranking-character .class-icon {
    flex: 0 0 auto;
}

.character-profile {
    display: grid;
    gap: 12px;
    padding: 18px;
    caret-color: transparent;
    cursor: default;
    user-select: none;
    overflow: visible;
}

.character-profile *,
.item-tooltip,
.item-tooltip * {
    caret-color: transparent;
    user-select: none;
}

.character-profile__hero {
    display: grid;
    grid-template-columns: minmax(250px, 1.35fr) minmax(120px, .9fr) repeat(5, minmax(76px, .55fr)) 18px;
    align-items: center;
    gap: 0;
    width: min(940px, 100%);
    min-height: 76px;
    margin: 0 auto 26px;
    padding: 10px 14px;
    border: 1px solid rgba(93, 151, 217, .34);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(11, 45, 74, .96), rgba(7, 32, 54, .96)),
        rgba(0, 0, 0, .48);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.character-profile__identity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    text-align: left;
}

.character-hero__identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.character-hero__metric {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0 12px;
    border-left: 1px solid rgba(238, 242, 255, .14);
    text-align: center;
}

.character-hero__metric strong {
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-hero__metric small {
    color: rgba(238, 242, 255, .58);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.character-switcher {
    position: relative;
    z-index: 12;
    min-width: 0;
}

.character-switcher--bar {
    width: min(940px, 100%);
    margin: 0 auto 26px;
}

.character-switcher--bar .character-profile__hero {
    width: 100%;
    margin: 0;
}

.character-switcher summary {
    list-style: none;
    cursor: pointer;
}

.character-switcher summary::-webkit-details-marker {
    display: none;
}

.character-profile__name {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.character-profile__name strong {
    color: #fff;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.character-profile__name small {
    color: #f6d36e;
    font-size: 10px;
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
}

.character-profile__name em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(238, 242, 255, .62);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.character-profile__hidden-mark {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 14px;
    margin-left: 6px;
    vertical-align: 1px;
}

.character-profile__hidden-mark::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 10px;
    height: 10px;
    border: 3px solid rgba(255, 255, 255, .92);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.character-profile__hidden-mark::after {
    content: "";
    position: absolute;
    left: 1px;
    bottom: 0;
    width: 16px;
    height: 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .92);
}

.character-switcher__chevron {
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

.character-switcher__chevron::before,
.character-switcher__chevron::after {
    content: "";
    position: absolute;
    top: 7px;
    width: 9px;
    height: 2px;
    border-radius: 999px;
    background: rgba(238, 242, 255, .62);
    transition: transform .18s ease;
}

.character-switcher__chevron::before {
    left: 1px;
    transform: rotate(45deg);
}

.character-switcher__chevron::after {
    right: 1px;
    transform: rotate(-45deg);
}

.character-switcher[open] .character-switcher__chevron::before {
    transform: rotate(-45deg);
}

.character-switcher[open] .character-switcher__chevron::after {
    transform: rotate(45deg);
}

.character-switcher__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 80;
    display: grid;
    gap: 8px;
    width: min(940px, calc(100vw - 32px));
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(-50%);
}

.character-switcher__menu::before {
    display: none;
}

.character-switcher__menu a {
    display: grid;
    grid-template-columns: 12px 42px minmax(150px, 1.35fr) minmax(90px, .9fr) repeat(4, minmax(58px, .55fr));
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 9px 16px 9px 14px;
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(12, 44, 68, .86), rgba(6, 29, 49, .9)),
        rgba(0, 0, 0, .5);
    color: rgba(238, 242, 255, .9);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.character-switcher__menu a:last-child {
    border-bottom: 0;
}

.character-switcher__menu a:hover,
.character-switcher__menu a.active {
    background:
        linear-gradient(180deg, rgba(20, 58, 78, .96), rgba(8, 37, 60, .96)),
        rgba(255, 159, 46, .08);
}

.character-switcher__menu img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(11, 30, 50, .78);
}

.character-switcher__menu span:not(.character-profile__online-dot) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.character-switcher__menu strong {
    color: #fff;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.character-switcher__menu small,
.character-switcher__menu em {
    color: rgba(238, 242, 255, .55);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.character-switcher__menu em {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    padding-left: 8px;
    border-left: 1px solid rgba(238, 242, 255, .09);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-switcher__menu em strong {
    max-width: 100%;
    font-size: 12px;
}

.character-switcher__menu em small {
    max-width: 100%;
    overflow: hidden;
    color: rgba(238, 242, 255, .5);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-switcher__menu a:hover > span strong,
.character-switcher__menu a.active > span strong {
    color: #ff9f2e;
}

.character-profile__class {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(11, 30, 50, .78);
    box-shadow: 0 0 0 1px rgba(240, 198, 116, .2), 0 12px 24px rgba(0, 0, 0, .36);
}

.character-profile h1,
.character-profile h2,
.character-profile p {
    margin: 0;
}

.character-profile h1 {
    color: #fff;
    font-size: 28px;
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.character-profile p {
    margin-top: 4px;
    color: rgba(238, 242, 255, .64);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.character-profile__online-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(148, 163, 184, .8);
    box-shadow: 0 0 14px rgba(148, 163, 184, .5);
}

.character-profile__online-dot--online {
    background: #46ef7f;
    box-shadow: 0 0 16px rgba(70, 239, 127, .72);
}

.character-profile__online-dot--offline,
.character-profile__online-dot--hidden {
    background: #64748b;
}

.character-profile__metric {
    display: grid;
    gap: 2px;
    min-height: 48px;
    padding: 8px 18px;
    border: 1px solid rgba(93, 151, 217, .28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(31, 84, 132, .72), rgba(12, 31, 52, .82)),
        rgba(0, 0, 0, .3);
    color: rgba(238, 242, 255, .92);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.character-profile__metric--left {
    justify-items: start;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
}

.character-profile__metric--right {
    justify-items: end;
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
}

.character-profile__metric strong,
.character-profile__meta strong,
.character-profile__stat strong {
    color: #ff9f2e;
}

.character-profile__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
    text-align: center;
    color: rgba(238, 242, 255, .64);
    font-size: 12px;
    font-weight: 800;
}

.character-profile__meta span {
    min-height: 30px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-profile__loadout {
    display: grid;
    grid-template-columns: minmax(450px, 1.25fr) minmax(330px, .95fr);
    gap: 16px;
    align-items: start;
}

.character-profile h2 {
    margin-bottom: 12px;
    color: var(--modern-gold);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.character-profile__statbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 6px 0;
}

.admin-character-resources {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 17, 28, .76), rgba(0, 0, 0, .34)),
        rgba(0, 0, 0, .24);
}

.admin-character-resources__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(238, 242, 255, .62);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-character-resources__head span {
    color: var(--modern-gold);
}

.admin-character-resources__head strong {
    color: #fff;
}

.admin-character-resources__grid,
.admin-character-resources__jewels {
    display: grid;
    gap: 6px;
}

.admin-character-resources__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.admin-character-resources__jewels {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.admin-character-resources__grid > span {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    padding: 7px 8px;
    border: 1px solid rgba(93, 151, 217, .18);
    border-radius: 8px;
    background: rgba(7, 34, 57, .58);
    text-align: center;
}

.admin-character-resources__jewels > span {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: rgba(7, 34, 57, .58);
    text-align: center;
}

.admin-character-resources__grid > span > small,
.admin-character-resources__jewels > span > small {
    max-width: 100%;
    overflow: hidden;
    color: rgba(238, 242, 255, .52);
    font-size: 9px;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-character-resources__grid > span > strong,
.admin-character-resources__jewels > span > strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--modern-gold);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.admin-character-resources__jewels > span > strong {
    font-size: 12px;
}

.admin-character-resources__form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, .8fr) auto;
    gap: 8px;
    align-items: end;
}

.admin-character-resources__form label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.admin-character-resources__form label span {
    color: rgba(238, 242, 255, .62);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-character-resources__form input,
.admin-character-resources__form select {
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 6px;
    background: rgba(0, 0, 0, .46);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.admin-character-resources__form select {
    appearance: none;
    background:
        linear-gradient(45deg, transparent 50%, rgba(240, 198, 116, .82) 50%) right 13px center / 6px 6px no-repeat,
        linear-gradient(135deg, rgba(240, 198, 116, .82) 50%, transparent 50%) right 8px center / 6px 6px no-repeat,
        rgba(0, 0, 0, .46);
    padding-right: 28px;
}

.admin-character-resources__form input:focus,
.admin-character-resources__form select:focus {
    outline: 2px solid rgba(240, 198, 116, .2);
    border-color: rgba(240, 198, 116, .65);
}

.character-profile__stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(93, 151, 217, .2);
    border-radius: 8px;
    background: rgba(7, 34, 57, .62);
}

.character-profile__stat span {
    color: rgba(238, 242, 255, .58);
    font-size: 10px;
    font-weight: 900;
}

.character-profile__stat strong {
    font-size: 14px;
}

.character-profile__equipment,
.character-inventory {
    padding: 14px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 17, 28, .76), rgba(0, 0, 0, .34)),
        rgba(0, 0, 0, .24);
}

.character-profile__notfound {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 10px;
}

.character-equipment {
    --equipment-slot: 112px;
    --equipment-small-slot: 56px;
    --equipment-gap: 12px;
    display: grid;
    grid-template-columns: var(--equipment-slot) var(--equipment-small-slot) var(--equipment-slot) var(--equipment-small-slot) var(--equipment-slot);
    grid-template-rows: repeat(3, var(--equipment-slot));
    justify-content: center;
    align-items: center;
    gap: var(--equipment-gap);
    min-height: 396px;
    padding: 18px 0 8px;
}

.character-equipment__slot {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--equipment-slot);
    height: var(--equipment-slot);
    overflow: hidden;
    border: 1px solid rgba(93, 151, 217, .24);
    border-radius: 8px;
    background-color: rgba(9, 35, 58, .56);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, .24);
}

.character-equipment__slot[data-has-tooltip],
.character-inventory__item[data-has-tooltip] {
    cursor: help;
    overflow: visible;
}

.character-equipment__slot:hover,
.character-equipment__slot:focus,
.character-equipment__slot:focus-within,
.character-inventory__item:hover,
.character-inventory__item:focus,
.character-inventory__item:focus-within {
    z-index: 1001;
}

.character-equipment__slot:focus,
.character-inventory__item:focus {
    outline: 1px solid rgba(240, 198, 116, .58);
    outline-offset: 2px;
}

.character-equipment__slot--small {
    width: var(--equipment-small-slot);
    height: var(--equipment-small-slot);
    justify-self: center;
    align-self: end;
}

.character-equipment__slot img {
    position: absolute;
    top: 7%;
    left: 7%;
    width: 86%;
    height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .48));
    transform: scale(var(--item-scale, 1));
    clip-path: inset(0);
}

.character-equipment__slot span {
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .54);
    color: rgba(255, 255, 255, .78);
    font-size: 10px;
    font-weight: 900;
}

.character-equipment__slot--locked {
    overflow: hidden;
    opacity: .72;
    background-color: rgba(9, 35, 58, .52);
    filter: saturate(.55);
}

.character-equipment__slot--locked::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .18);
    backdrop-filter: blur(1px);
}

.character-equipment__slot .character-lock {
    position: relative;
    z-index: 2;
    display: block;
    width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 0;
    background: url("../images/epic-shop/locked.png") center / contain no-repeat;
    box-shadow: none;
}

.character-equipment__slot .character-lock::before {
    content: none;
}

.character-equipment__slot--pet { grid-column: 1; grid-row: 1; }
.character-equipment__slot--pendant { grid-column: 2; grid-row: 1; }
.character-equipment__slot--helm { grid-column: 3; grid-row: 1; }
.character-equipment__slot--earringL { grid-column: 4; grid-row: 1; }
.character-equipment__slot--wings { grid-column: 5; grid-row: 1; }
.character-equipment__slot--weapon { grid-column: 1; grid-row: 2; }
.character-equipment__slot--ringL { grid-column: 2; grid-row: 2; }
.character-equipment__slot--armor { grid-column: 3; grid-row: 2; }
.character-equipment__slot--ringR { grid-column: 4; grid-row: 2; }
.character-equipment__slot--shield { grid-column: 5; grid-row: 2; }
.character-equipment__slot--gloves { grid-column: 1; grid-row: 3; }
.character-equipment__slot--pants { grid-column: 3; grid-row: 3; }
.character-equipment__slot--earringR { grid-column: 4; grid-row: 3; }
.character-equipment__slot--boots { grid-column: 5; grid-row: 3; }

.character-inventory {
    align-self: stretch;
}

.character-inventory__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.character-inventory__tab {
    min-height: 38px;
    border: 1px solid rgba(93, 151, 217, .24);
    border-radius: 8px;
    background: rgba(9, 35, 58, .56);
    color: rgba(238, 242, 255, .58);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: default;
    opacity: 1;
}

.character-inventory__tab--active {
    border-color: rgba(255, 159, 46, .78);
    background: linear-gradient(180deg, #ff8d29, #df5c13);
    color: #fff;
    box-shadow: 0 8px 18px rgba(224, 93, 19, .28);
}

.character-inventory__grid {
    position: relative;
    border: 1px solid rgba(93, 151, 217, .22);
    border-radius: 8px;
    aspect-ratio: 1;
    background:
        linear-gradient(rgba(93, 151, 217, .24) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 151, 217, .24) 1px, transparent 1px),
        rgba(6, 24, 40, .74);
    background-size: 12.5% 12.5%;
    background-position: 0 0;
    overflow: visible;
}

.character-privacy-panel {
    display: grid;
    place-items: center;
    min-height: 498px;
    border: 1px solid rgba(93, 151, 217, .22);
    border-radius: 8px;
    background: rgba(6, 35, 58, .78);
    text-align: center;
}

.character-privacy-panel p {
    max-width: 360px;
    color: rgba(238, 242, 255, .72);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.character-inventory__cell {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-height: 38px;
    min-width: 0;
    border: 1px solid rgba(93, 151, 217, .22);
    border-radius: 4px;
    background: rgba(13, 45, 70, .62);
}

.character-inventory__item {
    position: absolute;
    left: var(--item-x);
    top: var(--item-y);
    width: var(--item-w);
    height: var(--item-h);
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    padding: 1px;
    border: 0;
    background: transparent;
}

.character-inventory__item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
    transform: scale(var(--item-scale, 1));
    clip-path: inset(0);
}

.character-inventory__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .24);
    color: rgba(238, 242, 255, .62);
    font-size: 12px;
    font-weight: 900;
}

.character-inventory__footer strong {
    color: var(--modern-gold);
}

.item-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 30;
    display: none;
    gap: 4px;
    width: max-content;
    min-width: 210px;
    /* Wide enough for the longest option line the game prints
       ("Increases acquisition rate of Zen after hunting monsters +38%%")
       so ranked options stay on one line, like the in-game tooltip.
       Never wider than the window, or a narrow screen gets a sideways scroll. */
    max-width: min(420px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid rgba(240, 198, 116, .38);
    border-radius: 6px;
    background: rgba(6, 7, 10, .96);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .58);
    color: rgba(238, 242, 255, .9);
    font-size: 11px;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transform: translate(-50%, 4px);
    transition: opacity .12s ease, transform .12s ease;
}

.item-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(240, 198, 116, .38);
    border-bottom: 1px solid rgba(240, 198, 116, .38);
    background: rgba(6, 7, 10, .96);
    transform: translate(-50%, -4px) rotate(45deg);
}

.item-tooltip.item-tooltip--fixed {
    position: fixed;
    display: grid;
    left: var(--tooltip-left, 0);
    top: var(--tooltip-top, 0);
    bottom: auto;
    z-index: 1000;
    opacity: 1;
    transform: none !important;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #8b713f transparent;
    pointer-events: auto;
}

.item-tooltip.item-tooltip--fixed::after {
    display: none;
}

.character-equipment__slot:hover .item-tooltip,
.character-equipment__slot:focus .item-tooltip,
.character-inventory__item:hover .item-tooltip,
.character-inventory__item:focus .item-tooltip,
.bank-grid__item:hover .item-tooltip,
.bank-grid__item:focus .item-tooltip,
.epic-item-card__icon:hover .item-tooltip,
.epic-item-card__icon:focus .item-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.item-tooltip__image {
    justify-self: center;
    width: 72px;
    height: 72px;
    margin-bottom: 2px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6));
}

.item-tooltip__title {
    color: #f6d78b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

/* The tooltip heading follows the item's own colour, same as the card name. */
.market-card--normal .item-tooltip__title {
    color: #fff;
}

.market-card--excellent .item-tooltip__title {
    color: #00e18b;
}

.market-card--ancient .item-tooltip__title {
    color: #01df77;
}

.market-card--socket .item-tooltip__title {
    color: #9966cc;
}

/* Bold by default, matching the in-game tooltip: what the item simply IS -
   damage, defence, durability, requirements, who can wear it - reads as the
   solid part. The rolled excellent options below stay at normal weight so the
   two groups separate at a glance. */
.item-tooltip__line {
    color: rgba(238, 242, 255, .78);
    font-weight: 700;
}

.item-tooltip__line[class*="--exc-"] {
    font-weight: 400;
}

.item-tooltip__line--muted {
    color: rgba(238, 242, 255, .52);
}

.item-tooltip__line--base {
    color: rgba(238, 242, 255, .86);
}

.item-tooltip__line--blue {
    color: #8ec8ff;
}

.item-tooltip__line--excellent {
    color: #75f7a2;
}

/* Excellent option rank colours, straight from the client's tooltip:
   Normal gray, Uncommon green, Rare blue, Legendary gold, Epic violet
   (NewUIItemTooltip.cpp, ExcOptionRankColor). */
.item-tooltip__line--exc-normal {
    color: #b0c3d9;
}

.item-tooltip__line--exc-uncommon {
    color: #16dc6e;
}

.item-tooltip__line--exc-rare {
    color: #24f2fc;
}

.item-tooltip__line--exc-legendary {
    color: #ffcc19;
}

.item-tooltip__line--exc-epic {
    color: #b266ff;
}

.item-tooltip__line--ancient {
    color: #9cff78;
}

.item-tooltip:has(.item-tooltip__line--ancient-stat) .item-tooltip__title,
.item-tooltip__line--ancient-tier {
    color: #9cff78;
}

.item-tooltip__line--ancient-stat {
    color: #8ec8ff;
}

.item-tooltip__line--ancient-heading {
    margin-top: 8px;
    color: #ffcc19;
}

.item-tooltip__line--ancient-tier {
    margin-top: 3px;
}

.item-tooltip__line--ancient-effect,
.item-tooltip__line--ancient-member {
    color: #c0c3ca;
    font-weight: 400;
}

.item-tooltip:has(.item-tooltip__line--ancient-stat) {
    gap: 2px;
}

.item-tooltip__line--harmony {
    color: #f6d78b;
}

.item-tooltip__line--green {
    color: #16dc6e;
}

/* Scores, coloured as the game prints them: base in gold and not bold, gear in
   violet and bold. */
.item-tooltip__line--base-score {
    color: #ffcc19;
    font-weight: 400;
}

.item-tooltip__line--gear-score {
    color: #b266ff;
    font-weight: 800;
}

/* Stacked items show how many are in the pile instead of wear. */
.item-tooltip__line--count {
    color: #ff8c00;
}

.item-tooltip__line--socket {
    color: #b9a2ff;
}

@media (max-width: 940px) {
    .site-shell {
        grid-template-columns: 1fr;
        width: min(100% - 20px, 760px);
        padding-top: 10px;
    }

    .modern-sidebar {
        position: static;
    }

    .modern-logo img {
        width: 150px;
    }

    .sideMenu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sideMenu a {
        text-align: center;
    }

    .promoGrid {
        grid-template-columns: 1fr;
    }

    .promo-card.wide {
        grid-column: auto;
    }

    .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ranking-toolbar {
        grid-template-columns: 1fr;
    }

    .character-profile__loadout {
        grid-template-columns: 1fr;
    }

    .character-profile__hero {
        grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(92px, .42fr)) 18px;
        row-gap: 12px;
    }

    .character-hero__identity {
        grid-column: 1 / -1;
    }

    .character-hero__metric {
        border-left: 0;
        border-top: 1px solid rgba(238, 242, 255, .12);
        padding-top: 10px;
    }

    .character-switcher__chevron {
        grid-column: -2 / -1;
        grid-row: 1;
        justify-self: end;
    }

    .character-profile__metric,
    .character-profile__metric--left,
    .character-profile__metric--right {
        justify-items: center;
        clip-path: none;
        text-align: center;
    }

    .character-profile__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .character-profile__statbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .site-shell {
        width: min(100% - 12px, 420px);
        padding-top: 6px;
    }

    .modern-main {
        min-width: 0;
    }

    .sideMenu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-form {
        grid-template-columns: 1fr;
    }

    .promo-card h2 {
        font-size: 23px;
    }

    .rk-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ranking-toolbar,
    .character-filterbar,
    .search-panel,
    .table-panel {
        padding: 10px;
    }

    .character-filterbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .rank-range-filter {
        justify-self: stretch;
    }

    .rank-range-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ranking-toolbar .rk-row > .rank-button {
        flex-basis: 40%;
    }

    .ranking-toolbar .rank-button {
        min-height: 62px;
    }

    .search-panel .search-form {
        grid-template-columns: 1fr;
    }

    .ranking-tabs {
        gap: 7px;
    }

    .ranking-tab {
        min-height: 100px;
    }

    .character-profile__meta,
    .character-profile__statbar {
        grid-template-columns: 1fr;
    }

    .character-profile {
        gap: 10px;
        padding: 10px;
    }

    .character-profile__hero {
        gap: 10px;
        padding: 10px;
    }

    .character-switcher--bar,
    .character-profile__hero {
        width: 100%;
    }

    .character-profile__hero {
        grid-template-columns: 1fr 18px;
        border-radius: 14px;
    }

    .character-hero__identity {
        grid-column: 1;
    }

    .character-hero__metric {
        grid-column: span 1;
        justify-items: start;
        padding: 8px 0 0;
        text-align: left;
    }

    .character-switcher__chevron {
        grid-column: 2;
    }

    .character-profile__identity {
        gap: 9px;
    }

    .character-profile__class {
        width: 42px;
        height: 42px;
    }

    .character-profile h1 {
        font-size: 24px;
    }

    .character-profile__name strong {
        font-size: 18px;
    }

    .character-switcher__menu {
        left: 50%;
        width: min(330px, calc(100vw - 24px));
    }

    .character-switcher__menu a {
        grid-template-columns: 10px 36px minmax(0, 1fr);
    }

    .character-switcher__menu em {
        display: none;
    }

    .character-profile__metric {
        min-height: 40px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .character-profile__meta {
        gap: 6px;
    }

    .character-profile__meta span {
        min-height: 28px;
        padding: 6px 8px;
    }

    .character-profile__statbar {
        gap: 6px;
    }

    .character-profile__equipment,
    .character-inventory {
        padding: 10px;
    }

    .character-equipment {
        --equipment-slot: min(18.2vw, 68px);
        --equipment-small-slot: min(9.8vw, 38px);
        --equipment-gap: min(1.5vw, 6px);
        min-height: 0;
        padding: 8px 0 4px;
    }

    .character-equipment__slot {
        border-radius: 6px;
    }

    .character-inventory__head {
        gap: 6px;
        margin-bottom: 8px;
    }

    .character-inventory__tab {
        min-height: 34px;
        font-size: 11px;
    }

    .character-inventory__grid {
        aspect-ratio: 1;
        background-size: 12.5% 12.5%;
    }

    .character-inventory__footer {
        min-height: 32px;
        margin-top: 8px;
        padding: 7px 10px;
    }

    .item-tooltip {
        left: 50%;
        min-width: 168px;
        max-width: min(240px, calc(100vw - 28px));
        padding: 8px 10px;
        font-size: 10px;
    }
}

@media (max-width: 390px) {
    .character-profile {
        padding: 8px;
    }

    .character-profile__equipment,
    .character-inventory {
        padding: 8px;
    }

    .character-equipment {
        --equipment-slot: min(17.4vw, 62px);
        --equipment-small-slot: min(9.2vw, 34px);
    }
}

/* Auth pages redesign */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(340px, 520px) minmax(240px, 360px);
    gap: 16px;
    align-items: stretch;
    max-width: 920px;
}

.auth-shell--single {
    grid-template-columns: minmax(320px, 520px);
}

.auth-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(10, 13, 19, .94), rgba(0, 0, 0, .72)),
        url("../images/modern/banner-wrapper-bg.jpg") center / cover no-repeat;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .34);
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--modern-gold), transparent);
    opacity: .7;
}

.auth-form {
    display: grid;
    gap: 14px;
    padding: 24px;
}

.auth-card-head {
    display: grid;
    gap: 5px;
    margin-bottom: 4px;
}

.auth-kicker {
    color: var(--modern-gold);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-card h1,
.account-card h1 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
}

.auth-field,
.auth-field-grid {
    display: grid;
    gap: 8px;
}

.auth-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.auth-field label {
    color: rgba(238, 242, 255, .72);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-field input,
.auth-field textarea {
    min-height: 46px;
    border-color: rgba(240, 198, 116, .18);
    background: rgba(0, 0, 0, .46);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

.auth-field input:focus,
.auth-field textarea:focus {
    outline: 2px solid rgba(240, 198, 116, .2);
    border-color: rgba(240, 198, 116, .65);
}

.auth-field.has-error input,
.auth-field.has-error textarea,
.auth-alert {
    border-color: rgba(255, 125, 125, .5);
}

.auth-field small {
    color: var(--red);
    font-size: 12px;
    line-height: 1.35;
}

.auth-alert {
    padding: 10px 12px;
    border: 1px solid rgba(255, 125, 125, .45);
    border-radius: 6px;
    background: rgba(80, 0, 0, .22);
    color: #ffd9d9;
    font-size: 13px;
}

.auth-alert--success {
    border-color: rgba(0, 212, 106, .45);
    background: rgba(0, 88, 44, .22);
    color: #d7ffe7;
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 16px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, #f5d58c, #c58c32);
    color: #1a1208;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.auth-submit:hover {
    filter: brightness(1.08);
}

.auth-link {
    justify-self: center;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

.auth-link:hover {
    color: var(--modern-gold);
}

.login-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.login-modal:target,
.login-modal.is-open {
    display: flex;
}

.login-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .74);
    backdrop-filter: blur(5px);
}

.login-modal__card {
    position: relative;
    z-index: 1;
    width: min(430px, 100%);
}

.login-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: rgba(238, 242, 255, .72);
    font-size: 28px;
    line-height: 1;
}

.login-modal__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.login-modal__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.auth-rules {
    align-self: stretch;
    padding: 24px;
}

.auth-rules dl {
    display: grid;
    gap: 12px;
    margin: 14px 0 0;
}

.auth-rules div {
    padding: 12px;
    border: 1px solid var(--modern-line);
    border-radius: 6px;
    background: rgba(0, 0, 0, .28);
}

.auth-rules dt {
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-rules dd {
    margin: 5px 0 0;
    color: var(--muted);
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

.auth-success {
    display: grid;
    gap: 12px;
    padding: 28px;
}

.auth-actions,
.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.account-overview {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(150px, .75fr));
    gap: 14px;
}

.account-password-card {
    max-width: 720px;
}

.account-settings {
    display: grid;
    gap: 16px;
    width: min(640px, 100%);
    margin: 0 auto;
}

.account-password-form {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 17, 28, .82), rgba(0, 0, 0, .38)),
        rgba(0, 0, 0, .34);
}

.account-password-form__head {
    display: grid;
    gap: 3px;
}

.account-password-form__head h1 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.1;
    text-transform: uppercase;
}

.account-password-form__head p {
    margin: 0;
    color: rgba(238, 242, 255, .54);
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.3;
}

.account-password-form .auth-field {
    gap: 5px;
}

.account-password-form .auth-field label {
    font-size: 10px;
}

.account-password-form .auth-field input {
    min-height: 38px;
}

.account-password-form .auth-field textarea {
    min-height: 94px;
    resize: vertical;
}

.account-password-form .auth-field-grid {
    gap: 10px;
}

.account-password-form .auth-alert {
    padding: 8px 10px;
}

.account-password-form__submit {
    min-height: 40px;
}

.account-streamer-status {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.account-streamer-status span {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 8px;
    background: rgba(5, 23, 39, .58);
}

.account-streamer-status small {
    color: rgba(238, 242, 255, .52);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-streamer-status strong {
    overflow: hidden;
    color: var(--modern-gold);
    font-size: 15px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-characters-page {
    display: grid;
    gap: 14px;
    width: min(980px, 100%);
    margin: 0 auto;
    caret-color: transparent;
    cursor: default;
    user-select: none;
}

.account-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 17, 28, .82), rgba(0, 0, 0, .36)),
        rgba(0, 0, 0, .28);
}

.account-section-head h1 {
    margin: 2px 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.1;
    text-transform: uppercase;
}

.account-section-head p {
    margin: 0;
    color: rgba(238, 242, 255, .54);
    font-size: 12px;
    font-weight: 800;
}

.account-section-head > strong {
    color: #f6d78b;
    font-size: 28px;
    line-height: 1;
}

.account-empty {
    padding: 28px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .34);
    text-align: center;
}

.account-empty h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 20px;
}

.account-empty p {
    margin: 0;
    color: rgba(238, 242, 255, .58);
}

.account-character-list {
    display: grid;
    gap: 10px;
}

.account-character-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(360px, 1.25fr) minmax(180px, .8fr);
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(93, 151, 217, .16);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(9, 35, 58, .46), rgba(0, 0, 0, .24)),
        rgba(0, 0, 0, .26);
}

.account-character-card__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.account-character-card__identity h2 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.1;
}

.account-character-card__identity p {
    margin: 3px 0 0;
    color: rgba(238, 242, 255, .56);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-character-card__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.account-character-card__stats span {
    display: grid;
    gap: 3px;
    min-height: 42px;
    padding: 7px 9px;
    border: 1px solid rgba(93, 151, 217, .16);
    border-radius: 8px;
    background: rgba(9, 35, 58, .42);
}

.account-character-card__stats small {
    color: rgba(238, 242, 255, .5);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.account-character-card__stats strong {
    color: #f6d78b;
    font-size: 14px;
    line-height: 1;
}

.account-character-card__meta {
    display: grid;
    gap: 8px;
    justify-items: end;
    text-align: right;
}

.account-character-card__meta span {
    color: rgba(238, 242, 255, .62);
    font-size: 12px;
    font-weight: 800;
}

.account-character-card__meta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff8a20, #ed640b);
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.account-bank-page {
    /* Declared here rather than on .bank-board so the balances strip above can
       compute the same width and line up with the two panels. */
    --bank-cell: clamp(28px, 2.45vw, 34px);
    --bank-side-space: clamp(52px, 5vw, 72px);
    /* Both bank columns, the transfer strip between them, and the two gaps. */
    --bank-content-width: calc((var(--bank-cell) * 20) + (var(--bank-side-space) * 4) + 74px);
    display: grid;
    gap: 14px;
    justify-items: center;
    caret-color: transparent;
    cursor: default;
    user-select: none;
}

.app-toast,
.bank-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(460px, calc(100vw - 36px));
    padding: 16px 20px;
    border: 1px solid rgba(240, 198, 116, .5);
    border-radius: 10px;
    background: rgba(8, 8, 12, .97);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .4);
    color: rgba(238, 242, 255, .92);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    animation: bank-toast-in .25s ease-out;
}

.app-toast--closing,
.bank-toast--closing {
    animation: bank-toast-out .3s ease-in forwards;
    pointer-events: none;
}

.app-toast__text,
.bank-toast__text {
    flex: 1;
    line-height: 1.45;
    text-align: center;
}

.app-toast--success .app-toast__text,
.bank-toast--success .bank-toast__text {
    color: #75f7a2;
}

.app-toast--error .app-toast__text,
.bank-toast--error .bank-toast__text {
    color: #ff8f78;
}

@keyframes bank-toast-in {
    from {
        transform: translate(-50%, -50%) scale(.94);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes bank-toast-out {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -50%) scale(.94);
        opacity: 0;
    }
}

/* Jewel bank strip above the two transfer panels. Read-only, so it is a plain
   row of counts rather than an interactive grid. */
.jewel-bank {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    /* The page centres its children, so without an explicit width this strip
       would shrink to its own content. Matching the banks' content width lines
       it up with the two panels rather than with the wider board element. */
    width: min(100%, var(--bank-content-width));
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(240, 198, 116, .2);
    border-radius: 10px;
    background: rgba(6, 7, 10, .5);
}

/* Pushes the jewels away from the coins so the two groups read apart. */
.jewel-bank__title--jewels {
    margin-left: auto;
}

.jewel-bank__title {
    color: var(--modern-gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.jewel-bank__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.jewel-bank__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(238, 242, 255, .86);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.jewel-bank__item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.jewel-bank__item strong {
    color: var(--modern-gold);
}

/* A jewel the player has none of stays visible but recedes. */
.jewel-bank__item.is-empty {
    opacity: .38;
}

.jewel-bank__item.is-empty strong {
    color: rgba(238, 242, 255, .6);
}

.bank-board {
    display: grid;
    grid-template-columns:
        calc((var(--bank-cell) * 8) + (var(--bank-side-space) * 2))
        54px
        calc((var(--bank-cell) * 12) + (var(--bank-side-space) * 2));
    gap: 10px;
    align-items: stretch;
    justify-content: center;
    width: min(1180px, 100%);
}

.bank-panel {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    height: 100%;
    padding: 20px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 17, 28, .76), rgba(0, 0, 0, .34)),
        rgba(0, 0, 0, .24);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .32);
}

.bank-panel__head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(93, 151, 217, .2);
}

.bank-panel__mark {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid #f6d78b;
    border-radius: 50%;
    color: #f6d78b;
    font-size: 16px;
    font-weight: 950;
    line-height: 1;
}

.bank-panel__head h1 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.1;
}

.bank-panel__head p {
    margin: 4px 0 0;
    color: rgba(238, 242, 255, .5);
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.bank-grid {
    position: relative;
    z-index: 1;
    align-self: center;
    justify-self: center;
    border: 1px solid rgba(93, 151, 217, .24);
    border-radius: 8px;
    background:
        linear-gradient(rgba(93, 151, 217, .22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 151, 217, .22) 1px, transparent 1px),
        rgba(6, 24, 40, .58);
    overflow: visible;
}

.bank-grid--game {
    width: calc(var(--bank-cell) * 8);
    height: calc(var(--bank-cell) * 15);
    background-size: var(--bank-cell) var(--bank-cell);
}

.bank-grid--site {
    width: calc(var(--bank-cell) * 12);
    height: calc(var(--bank-cell) * 15);
    background-size: var(--bank-cell) var(--bank-cell);
}

.bank-grid__item {
    position: absolute;
    left: var(--item-x);
    top: var(--item-y);
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--item-w);
    height: var(--item-h);
    padding: 2px;
    cursor: help;
    outline: 0;
    overflow: visible;
}

.bank-grid__item:hover,
.bank-grid__item:focus,
.bank-grid__item:focus-within {
    z-index: 1001;
}

.bank-grid__item.is-selected {
    z-index: 1001;
    border-radius: 6px;
    background: rgba(240, 198, 116, .12);
    box-shadow: 0 0 0 1px rgba(240, 198, 116, .72), 0 0 18px rgba(240, 198, 116, .2);
}

.bank-grid__item .item-tooltip {
    z-index: 50;
}

.bank-grid__item img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
    transform: scale(var(--item-scale, 1));
    clip-path: inset(0);
    pointer-events: none;
}

.bank-panel__foot {
    display: block;
}

.bank-transfer-hidden {
    display: none;
}

.bank-transfer-form,
.bank-transfer {
    display: grid;
}

.bank-transfer-form {
    grid-template-columns: minmax(0, 1fr) minmax(94px, 118px);
    gap: 10px;
    align-items: end;
    width: min(100%, 360px);
    margin-inline: auto;
}

.bank-transfer {
    gap: 7px;
}

.bank-transfer span {
    color: rgba(238, 242, 255, .7);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.bank-transfer input {
    min-height: 36px;
    border-color: rgba(93, 151, 217, .22);
    border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    color: #ff3030;
    font-size: 13px;
    font-weight: 950;
    text-align: right;
}

.bank-transfer__button {
    min-height: 36px;
    padding: 0 18px;
    border: 1px solid rgba(240, 198, 116, .38);
    border-radius: 999px;
    background: linear-gradient(180deg, #ff8a20, #ed640b);
    box-shadow: 0 10px 22px rgba(237, 100, 11, .22);
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

.bank-transfer__button:disabled {
    border-color: rgba(148, 163, 184, .22);
    background: rgba(148, 163, 184, .24);
    box-shadow: none;
    color: rgba(238, 242, 255, .42);
    cursor: default;
}

/* Admin-only read-only copy of the account bank grids on the character page.
   The cell size lives on .account-bank-page for the real bank, so the admin
   board declares its own; two columns, no transfer strip between them. */
.bank-board--admin {
    --bank-cell: clamp(26px, 2.3vw, 32px);
    --bank-side-space: clamp(20px, 2vw, 32px);
    grid-template-columns:
        calc((var(--bank-cell) * 8) + (var(--bank-side-space) * 2))
        calc((var(--bank-cell) * 12) + (var(--bank-side-space) * 2));
    width: 100%;
    margin-top: 4px;
    caret-color: transparent;
    cursor: default;
    user-select: none;
}

.bank-board--admin .bank-panel {
    padding: 14px;
    box-shadow: none;
}

.bank-board--admin .bank-panel__head h2 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.1;
}

.bank-panel__foot--zen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .24);
    color: rgba(238, 242, 255, .62);
    font-size: 12px;
    font-weight: 900;
}

.bank-panel__foot--zen strong {
    color: var(--modern-gold);
}

/* Admin bank items open a remove dialog, so they read as clickable rather
   than as the help-cursor tooltips of the player's own bank. */
.admin-bank__item {
    border-radius: 6px;
    cursor: pointer;
}

.admin-bank__item:hover,
.admin-bank__item:focus-visible {
    background: rgba(214, 69, 69, .14);
    box-shadow: 0 0 0 1px rgba(236, 96, 96, .78), 0 0 16px rgba(214, 69, 69, .28);
}

.admin-bank-modal__text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-bank-modal__text strong {
    color: #fff;
    font-size: 15px;
    font-weight: 950;
}

.admin-bank-modal__text span {
    color: rgba(238, 242, 255, .58);
    font-size: 12px;
    font-weight: 800;
}

.admin-bank-modal__warning {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(236, 96, 96, .34);
    border-radius: 8px;
    background: rgba(214, 69, 69, .1);
    color: #ffb3b3;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.4;
    text-transform: none;
}

.admin-bank-modal__submit {
    background: linear-gradient(180deg, #e25c5c, #a82a2a);
    border-color: rgba(255, 140, 140, .4);
    color: #fff;
}

.admin-bank-modal__submit:hover {
    background: linear-gradient(180deg, #f07070, #bf3535);
}

/* Character page: Collection Bonus / Inventory tabs. Both panels share the
   inventory's square footprint so the card does not jump when switching. */
.character-inventory__tab:not(:disabled) {
    cursor: pointer;
}

/* The Zen footer is display:flex, which would beat the UA rule for [hidden]. */
[data-character-panel][hidden] {
    display: none !important;
}

.character-inventory__tab:not(:disabled):not(.character-inventory__tab--active):hover {
    border-color: rgba(93, 151, 217, .5);
    color: #fff;
}

.collection-bonus__list {
    display: grid;
    align-content: start;
    gap: 6px;
    aspect-ratio: 1;
    padding: 12px;
    border: 1px solid rgba(93, 151, 217, .22);
    border-radius: 8px;
    background: rgba(6, 35, 58, .78);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.collection-bonus__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .24);
    color: rgba(238, 242, 255, .78);
    font-size: 12px;
    font-weight: 850;
}

.collection-bonus__row strong {
    color: var(--modern-gold);
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

.collection-bonus__empty {
    margin: 0;
    padding: 18px 12px;
    color: rgba(238, 242, 255, .58);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.bank-actions {
    align-self: center;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.bank-action {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(148, 163, 184, .38);
    color: rgba(238, 242, 255, .7);
    font-size: 18px;
    font-weight: 950;
    cursor: pointer;
}

.bank-action--active {
    background: linear-gradient(180deg, #3aa5ff, #176bd6);
    color: #fff;
    box-shadow: 0 10px 20px rgba(23, 107, 214, .32);
}

.bank-action:disabled {
    background: rgba(148, 163, 184, .28);
    color: rgba(238, 242, 255, .38);
    box-shadow: none;
    cursor: default;
}

.bank-action:not(:disabled):not(.bank-action--active) {
    background: linear-gradient(180deg, #ff8a20, #ed640b);
    color: #fff;
    box-shadow: 0 10px 20px rgba(237, 100, 11, .24);
}

.account-card {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 126px;
    padding: 18px;
    border: 1px solid var(--modern-line);
    border-radius: 8px;
    background: var(--modern-panel-2);
}

.account-card span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-card strong {
    color: var(--modern-gold);
    font-size: 34px;
    line-height: 1;
}

.account-card p {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 940px) {
    .auth-shell,
    .auth-shell--single,
    .account-overview {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .bank-board {
        --bank-cell: clamp(24px, 6vw, 32px);
        grid-template-columns: 1fr;
        width: min(430px, 100%);
    }

    .bank-actions {
        grid-row: 2;
        grid-template-columns: repeat(3, 44px);
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .auth-form,
    .auth-rules,
    .auth-success {
        padding: 18px;
    }

    .auth-field-grid {
        grid-template-columns: 1fr;
    }

    .auth-card h1,
    .account-card h1 {
        font-size: 25px;
    }
}

/* Server badge unframed */
.srvBadge {
    padding: 4px 2px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: center;
}

.srvBadge__title {
    font-size: 13px;
}

.srvBadge__meta {
    margin-top: 3px;
    font-size: 11px;
}

.srvBadge__row {
    margin-top: 5px;
    gap: 7px;
}

.srvBadge__count {
    font-size: 20px;
}

/* Top navigation rebuild */
.modern-body {
    background:
        radial-gradient(circle at 52% 4%, rgba(240, 198, 116, .08), transparent 26%),
        url("../images/main-bg.png") center 80px / cover fixed no-repeat,
        #000;
}

.modern-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .24), transparent 14%, transparent 86%, rgba(0, 0, 0, .24)),
        linear-gradient(180deg, transparent 68%, rgba(0, 0, 0, .42));
}

.top-shell {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(170px, 260px) minmax(0, 1fr) minmax(190px, 320px);
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 2px clamp(10px, 2vw, 36px);
    background: rgba(0, 0, 0, .96);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.header-brand {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.header-logo {
    display: block;
    flex: 0 0 auto;
}

.header-logo img {
    display: block;
    width: min(230px, 18vw);
    min-width: 150px;
    height: auto;
}

.header-online {
    min-width: 70px;
    color: rgba(238, 242, 255, .68);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

.header-online > a {
    display: grid;
    grid-template-columns: 22px auto;
    gap: 1px;
    column-gap: 5px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 5px;
}

.header-online > a span,
.header-online > a strong {
    grid-column: 2;
}

.header-online > a:hover,
.header-online > a.active {
    background: rgba(255, 255, 255, .06);
}

.header-online strong {
    font-size: 12px;
}

.header-online strong.is-online {
    color: var(--modern-green);
}

.header-online strong.is-offline {
    color: var(--modern-red);
}

.server-state-icon {
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.server-dropdown__menu {
    left: 0;
    min-width: 150px;
    transform: none;
}

.server-dropdown__menu a {
    display: grid;
    grid-template-columns: 20px auto;
    gap: 2px;
    column-gap: 6px;
    align-items: center;
    text-align: left;
}

.server-dropdown__menu span,
.server-dropdown__menu small {
    grid-column: 2;
}

.server-dropdown__menu small {
    font-size: 10px;
}

.server-dropdown__menu small.is-online {
    color: var(--modern-green);
}

.server-dropdown__menu small.is-offline {
    color: var(--modern-red);
}

.content-panel {
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(4, 6, 10, .88), rgba(0, 0, 0, .64));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
}

.top-status,
.top-nav,
.utility-nav {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.top-status {
    display: none;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 5px 12px;
    white-space: nowrap;
}

.top-status span,
.top-status em {
    color: rgba(238, 242, 255, .68);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.top-status strong {
    color: var(--modern-gold);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.top-status em.online {
    color: var(--modern-green);
}

.top-status em.offline {
    color: var(--modern-red);
}

.top-nav,
.utility-nav {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 2px 7px;
    gap: 5px;
}

.top-nav {
    justify-content: center;
    grid-column: 2;
    justify-self: center;
}

.utility-nav {
    justify-content: flex-end;
    grid-column: 3;
    justify-self: end;
    overflow: visible;
}

.top-nav a,
.utility-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 6px;
    color: rgba(238, 242, 255, .82);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-alert-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #ff4d4d;
    box-shadow: 0 0 0 2px rgba(6, 7, 10, .9);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
}

.top-nav a:hover,
.top-nav a.active,
.utility-nav a:hover,
.utility-nav a.active {
    color: #1a1208;
    background: linear-gradient(180deg, #f3d28a, #c48b31);
}


.top-nav.nav-icons {
    min-height: 72px;
    padding: 0 4px;
    gap: clamp(7px, .7vw, 15px);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
}

.top-nav.nav-icons a {
    flex: 0 0 82px;
    width: 82px;
    min-width: 0;
    max-width: none;
    min-height: 0;
    height: 72px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    filter: saturate(.94) brightness(.94);
    transition: transform .16s ease, filter .16s ease;
    flex-direction: column;
    gap: 3px;
}

.top-nav.nav-icons .nav-dropdown {
    flex: 0 0 82px;
    width: 82px;
}

.top-nav.nav-icons .nav-dropdown > a {
    min-height: 0;
    height: 72px;
}

.top-nav.nav-icons a:hover,
.top-nav.nav-icons a.active,
.utility-nav.utility-icons a:hover,
.utility-nav.utility-icons a.active {
    background: transparent;
    filter: saturate(1.12) brightness(1.14);
    transform: translateY(-1px);
}

.top-nav.nav-icons img,
.utility-nav.utility-icons img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

.top-nav.nav-icons img {
    max-height: 56px;
}

.utility-nav.utility-icons img {
    max-height: 46px;
}

.top-nav.nav-icons span,
.utility-nav.utility-icons span {
    display: block;
    max-width: 100%;
    color: rgba(238, 242, 255, .86);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.05;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.utility-nav.utility-icons {
    min-height: 72px;
    padding: 0 4px;
    gap: clamp(5px, .5vw, 10px);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
}

.utility-nav.utility-icons a {
    flex: 0 0 62px;
    width: 62px;
    min-height: 70px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    filter: saturate(.92) brightness(.92);
    transition: transform .16s ease, filter .16s ease;
    flex-direction: column;
    gap: 3px;
}

.utility-nav.utility-icons.guest-utility a,
.utility-nav.utility-icons.guest-utility .nav-dropdown {
    flex: 0 0 82px;
    width: 82px;
}

.utility-nav.utility-icons.guest-utility a {
    min-height: 72px;
}

.utility-nav.utility-icons.guest-utility span {
    min-height: 20px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.nav-dropdown {
    position: relative;
    display: inline-flex;
}

.nav-dropdown::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 100%;
    height: 10px;
}

.nav-dropdown > a {
    width: 100%;
}

.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    z-index: 40;
    display: none;
    min-width: 74px;
    padding: 6px;
    border: 1px solid rgba(240, 198, 116, .22);
    border-radius: 6px;
    background: rgba(0, 0, 0, .95);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .5);
    transform: translateX(-50%);
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown__menu:target {
    display: grid;
    gap: 4px;
}

.nav-dropdown__menu a {
    min-height: 28px;
    width: 100%;
    padding: 5px 9px;
    border-radius: 4px;
    color: rgba(238, 242, 255, .82);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a.active {
    color: #1a1208;
    background: linear-gradient(180deg, #f3d28a, #c48b31);
}

.account-dropdown__menu {
    min-width: 292px;
    padding: 8px 0;
    overflow: hidden;
    border-color: rgba(93, 151, 217, .22);
    border-radius: 0 0 8px 8px;
    background:
        linear-gradient(180deg, rgba(8, 39, 63, .98), rgba(5, 25, 43, .98)),
        rgba(0, 0, 0, .96);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .58);
}

.donate-dropdown__menu {
    min-width: 390px;
    padding: 8px 0;
    overflow: hidden;
    border-color: rgba(93, 151, 217, .22);
    border-radius: 0 0 8px 8px;
    background:
        linear-gradient(180deg, rgba(8, 39, 63, .98), rgba(5, 25, 43, .98)),
        rgba(0, 0, 0, .96);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .58);
}

.account-dropdown__menu::before,
.donate-dropdown__menu::before,
.language-dropdown__menu::before {
    content: "";
    position: absolute;
    inset: 0 112px auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff9f2e, transparent);
    box-shadow: 0 0 16px rgba(255, 159, 46, .58);
}

.donate-dropdown__menu::before {
    inset: 0 86px auto;
    background: linear-gradient(90deg, transparent, #ff9f2e, transparent);
    box-shadow: 0 0 16px rgba(255, 159, 46, .58);
}

.account-dropdown__menu a {
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: 12px;
    min-height: 64px;
    width: 100%;
    height: auto;
    padding: 10px 14px;
    border-radius: 0;
    border-bottom: 1px solid rgba(93, 151, 217, .18);
    text-align: left;
    flex-direction: row;
    filter: none;
    transform: none;
}

.donate-dropdown__menu a {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    width: 100%;
    height: auto;
    padding: 9px 14px;
    border-radius: 0;
    border-bottom: 1px solid rgba(93, 151, 217, .18);
    color: rgba(238, 242, 255, .9);
    text-align: left;
    filter: none;
    transform: none;
}

.donate-dropdown__menu a:nth-child(2) {
    grid-template-columns: 48px minmax(0, 1fr) max-content max-content;
}

.donate-dropdown__menu a:last-child {
    border-bottom: 0;
}

.account-dropdown__menu a:last-child {
    border-bottom: 0;
}

.account-dropdown__menu img {
    flex: 0 0 auto;
    width: 44px;
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .4));
}

.donate-dropdown__menu img {
    width: 46px;
    max-width: 46px;
    max-height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .44));
}

.account-dropdown__menu span {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: inherit;
    line-height: 1.1;
    overflow: hidden;
}

.donate-dropdown__menu span {
    display: grid;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    line-height: 1.1;
}

.top-nav.nav-icons .account-dropdown__menu a {
    flex: 0 1 auto;
    width: 100%;
    height: auto;
    min-height: 64px;
    padding: 10px 14px;
    flex-direction: row;
}

.top-nav.nav-icons .donate-dropdown__menu a {
    width: 100%;
    height: auto;
    min-height: 66px;
    padding: 9px 14px;
    flex-direction: row;
}

.top-nav.nav-icons .account-dropdown__menu a:hover,
.top-nav.nav-icons .account-dropdown__menu a.active,
.top-nav.nav-icons .donate-dropdown__menu a:hover,
.top-nav.nav-icons .donate-dropdown__menu a.active {
    color: #1a1208;
    background: linear-gradient(180deg, #f3d28a, #c48b31);
    filter: none;
    transform: none;
}

.top-nav.nav-icons .account-dropdown__menu span {
    display: grid;
    gap: 3px;
    color: inherit;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-align: left;
    text-transform: uppercase;
    white-space: normal;
}

.top-nav.nav-icons .donate-dropdown__menu span {
    display: grid;
    gap: 3px;
    max-width: none;
    overflow: hidden;
    text-align: left;
    text-transform: uppercase;
    white-space: normal;
}

.account-dropdown__menu strong,
.top-nav.nav-icons .account-dropdown__menu strong,
.donate-dropdown__menu strong,
.top-nav.nav-icons .donate-dropdown__menu strong {
    display: block;
    color: rgba(255, 255, 255, .94);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.account-dropdown__menu small,
.top-nav.nav-icons .account-dropdown__menu small,
.donate-dropdown__menu small,
.top-nav.nav-icons .donate-dropdown__menu small {
    display: block;
    color: rgba(238, 242, 255, .52);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.donate-dropdown__menu em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(240, 198, 116, .28);
    background: rgba(240, 198, 116, .12);
    color: var(--modern-gold);
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.donate-dropdown__menu .donate-dropdown__badge--bonus {
    border-color: rgba(93, 151, 217, .32);
    background: rgba(93, 151, 217, .16);
    color: rgba(238, 242, 255, .9);
}

.donate-dropdown__menu .donate-dropdown__badge--sale {
    min-width: 38px;
    border-color: rgba(255, 128, 26, .36);
    background: rgba(255, 128, 26, .14);
    color: #ffb45c;
}

.account-dropdown__item:hover strong,
.account-dropdown__item:focus strong,
.top-nav.nav-icons .account-dropdown__item:hover strong,
.top-nav.nav-icons .account-dropdown__item:focus strong,
.account-dropdown__item[href$="account-bank"] strong,
.top-nav.nav-icons .account-dropdown__item[href$="account-bank"] strong,
.donate-dropdown__item:hover strong,
.donate-dropdown__item:focus strong {
    color: #ff9f2e;
}

.language-dropdown__menu {
    min-width: 112px;
    padding: 8px;
    overflow: hidden;
    border-color: rgba(93, 151, 217, .22);
    border-radius: 0 0 8px 8px;
    background:
        linear-gradient(180deg, rgba(8, 39, 63, .98), rgba(5, 25, 43, .98)),
        rgba(0, 0, 0, .96);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .58);
}

.language-dropdown__menu::before {
    inset: 0 30px auto;
}

.language-dropdown__menu a {
    min-height: 34px;
    border-radius: 6px;
    color: rgba(238, 242, 255, .88);
    background: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .42);
}

.language-dropdown__menu a.active {
    color: #ff9f2e;
    background: rgba(255, 159, 46, .08);
}

.language-dropdown__menu a:hover,
.language-dropdown__menu a:focus {
    color: #1a1208;
    background: linear-gradient(180deg, #f3d28a, #c48b31);
    text-shadow: none;
}
.page-shell {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
    padding: 22px 0 48px;
}

.site-shell,
.modern-sidebar,
.modern-main {
    display: contents;
}

.home-stage,
.auth-shell,
.account-overview,
.ranking-switcher,
.search-panel,
.table-panel,
.panel,
.content-panel {
    max-width: 100%;
}

.home-stage--blank {
    min-height: calc(100vh - 120px);
}

.news-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 16px;
    min-height: calc(100vh - 150px);
    caret-color: transparent;
}

.news-list,
.news-article {
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .52);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
    backdrop-filter: blur(6px);
    cursor: default;
    user-select: none;
}

.news-list {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 10px;
    max-height: calc(100vh - 150px);
    overflow: auto;
}

.news-list__item {
    position: relative;
    display: block;
    min-height: 104px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    background: rgba(5, 9, 14, .74);
}

.news-list__item.active {
    border-color: rgba(240, 198, 116, .72);
}

.news-list__bg,
.news-list__shade {
    position: absolute;
    inset: 0;
}

.news-list__bg {
    background-position: center;
    background-size: cover;
    opacity: .72;
}

.news-list__shade {
    background: linear-gradient(90deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .38));
}

.news-list__content {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: end;
    min-height: 104px;
    padding: 12px;
}

.news-list__content strong {
    color: #fff;
    font-size: 14px;
    line-height: 1.18;
    text-transform: uppercase;
}

.news-list__content small {
    color: var(--modern-gold);
    font-size: 11px;
    font-weight: 900;
}

.news-article {
    overflow: hidden;
}

.news-article__hero {
    min-height: 260px;
    background-position: center;
    background-size: cover;
}

.news-article__body {
    padding: 24px;
}

.news-article h1 {
    margin: 6px 0 12px;
    color: #fff;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1;
    text-transform: uppercase;
}

.news-lead {
    max-width: 760px;
    margin: 0 0 18px;
    color: #d8def2;
    font-size: 17px;
}

.news-copy {
    max-width: 820px;
    color: rgba(238, 242, 255, .84);
    font-size: 15px;
    caret-color: transparent;
}

.news-empty {
    display: grid;
    gap: 4px;
    padding: 18px;
    color: var(--muted);
}

.news-empty strong {
    color: #fff;
    text-transform: uppercase;
}

.news-empty--article {
    min-height: 360px;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.content-panel {
    padding: 22px;
}

.content-panel h1 {
    margin: 6px 0 8px;
    color: #fff;
    font-size: 28px;
    text-transform: uppercase;
}

.placeholder-panel {
    min-height: 180px;
    align-content: center;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px;
    border: 1px solid rgba(240, 198, 116, .24);
    border-radius: 10px;
    background: rgba(6, 7, 10, .5);
}

.admin-nav__tab {
    position: relative;
    padding: 9px 16px;
    border-radius: 6px;
    color: rgba(238, 242, 255, .78);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-nav__tab .nav-alert-badge {
    top: -6px;
    right: -6px;
}

.admin-nav__tab:hover {
    color: rgba(238, 242, 255, .95);
    background: rgba(255, 255, 255, .06);
}

.admin-nav__tab.active {
    color: #1a1208;
    background: linear-gradient(180deg, #f3d28a, #c48b31);
}

.admin-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(240, 198, 116, .24);
    border-radius: 10px;
    background: rgba(6, 7, 10, .5);
}

.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-toolbar h1 {
    margin: 0;
    font-size: 18px;
}

.admin-status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.server-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(240, 198, 116, .26);
    border-radius: 999px;
    background: rgba(6, 7, 10, .5);
    font-size: 13px;
    color: rgba(238, 242, 255, .85);
}

.server-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8a8f9c;
}

.server-status-badge.is-online .server-status-dot {
    background: #4fd67a;
    box-shadow: 0 0 8px rgba(79, 214, 122, .7);
}

.server-status-badge.is-offline .server-status-dot {
    background: #e2554a;
    box-shadow: 0 0 8px rgba(226, 85, 74, .5);
}

.server-status-count {
    color: var(--modern-gold);
    font-weight: 600;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.stat-card {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 16px 8px;
    border: 1px solid rgba(240, 198, 116, .26);
    border-radius: 12px;
    background: rgba(6, 7, 10, .5);
    text-align: center;
}

.stat-card strong {
    color: var(--modern-gold);
    font-size: 24px;
    line-height: 1;
}

.stat-card span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.highlight-card {
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid rgba(240, 198, 116, .26);
    border-radius: 12px;
    background: rgba(6, 7, 10, .5);
}

.highlight-card h2 {
    margin: 0 0 12px;
    color: var(--modern-gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-peak-card {
    display: grid;
    grid-template-columns: minmax(116px, .45fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 74px;
}

.admin-peak-card h2 {
    margin: 0;
}

.admin-metric-note {
    grid-column: 1 / -1;
    margin: -6px 0 0;
    color: rgba(238, 242, 255, .52);
    font-size: 12px;
    font-weight: 800;
}

.admin-peak-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(93, 151, 217, .18);
    border-radius: 10px;
    background: rgba(9, 35, 58, .34);
}

.admin-zen-card {
    grid-template-columns: auto minmax(420px, 1fr);
}

.admin-zen-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-peak-grid span {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    border-left: 1px solid rgba(238, 242, 255, .1);
    text-align: center;
}

.admin-peak-grid span:first-child {
    border-left: 0;
}

.admin-peak-grid strong {
    color: var(--modern-gold);
    font-size: 18px;
    line-height: 1;
}

.admin-peak-grid small {
    color: rgba(238, 242, 255, .52);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-mini-list {
    display: grid;
    gap: 8px;
}

.admin-mini-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(80px, .75fr) minmax(116px, auto);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(9, 35, 58, .46);
    color: rgba(238, 242, 255, .74);
    font-size: 12px;
    font-weight: 850;
}

.admin-mini-row strong,
.admin-mini-row span,
.admin-mini-row time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-mini-row strong {
    color: #fff;
    text-transform: uppercase;
}

.admin-mini-row span {
    color: rgba(238, 242, 255, .52);
}

.admin-mini-row time {
    justify-self: end;
    color: var(--modern-gold);
    font-size: 11px;
}

.highlight-card--top5 .table-wrap {
    margin: 0;
}

.highlight-card--top5 .ranking-table {
    min-width: 0;
    width: 100%;
}

.highlight-card--top5 .ranking-character {
    min-width: 0;
}

.admin-logs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-log-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid rgba(240, 198, 116, .2);
    border-radius: 12px;
    background: rgba(6, 7, 10, .38);
}

.admin-log-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(93, 151, 217, .18);
    border-radius: 999px;
    background: rgba(9, 35, 58, .5);
    color: rgba(238, 242, 255, .72);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.admin-log-nav a:hover,
.admin-log-nav a.active {
    border-color: rgba(255, 128, 26, .52);
    background: rgba(255, 128, 26, .16);
    color: #fff;
}

.admin-settings-page,
.admin-settings-section {
    margin-bottom: 14px;
}

.admin-settings-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-settings-jump a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(240, 198, 116, .24);
    border-radius: 999px;
    background: rgba(5, 23, 39, .72);
    color: rgba(238, 242, 255, .78);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-settings-jump a:hover,
.admin-settings-jump a.active {
    border-color: rgba(240, 198, 116, .58);
    background: rgba(240, 198, 116, .12);
    color: #fff;
}

.admin-donate-jump {
    margin-left: auto;
}

/* One row for all sections. auto-fit rather than a fixed count so adding a
   seventh section does not silently start a second row on a narrow screen -
   the cards shrink first, and only wrap when they genuinely cannot fit. */
.admin-settings-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.admin-settings-menu-card {
    display: grid;
    grid-template-rows: 40px auto;
    align-content: center;
    justify-items: center;
    min-height: 104px;
    gap: 8px;
    padding: 16px 14px 14px;
    color: inherit;
    text-decoration: none;
    text-align: center;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.admin-settings-menu-card:hover {
    border-color: rgba(240, 198, 116, .5);
    background: rgba(9, 35, 58, .58);
    transform: translateY(-1px);
}

.admin-settings-menu-card > span:last-child {
    margin: 0;
    color: var(--modern-gold);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
}

.admin-donate-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-donate-stat-card {
    display: grid;
    gap: 10px;
}

.admin-settings-menu-icon {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 1px solid rgba(240, 198, 116, .34);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(12, 52, 83, .82), rgba(4, 18, 31, .88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .22);
}

.admin-settings-menu-icon::before,
.admin-settings-menu-icon::after {
    content: '';
    position: absolute;
    display: block;
}

.admin-settings-menu-icon--svg {
    display: grid;
    place-items: center;
}

.admin-settings-menu-icon--svg::before,
.admin-settings-menu-icon--svg::after {
    display: none;
}

.admin-settings-menu-icon--svg svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: rgba(240, 198, 116, .94);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-settings-menu-icon--streams svg {
    stroke: #58c7ff;
}

.admin-settings-menu-icon--market svg,
.admin-settings-menu-icon--donate svg {
    stroke: var(--modern-gold);
}

.admin-settings-menu-icon--news::before {
    left: 10px;
    top: 8px;
    width: 18px;
    height: 22px;
    border: 2px solid rgba(240, 198, 116, .92);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(240, 198, 116, .18), rgba(240, 198, 116, .04));
}

.admin-settings-menu-icon--news::after {
    left: 15px;
    top: 14px;
    width: 9px;
    height: 2px;
    background: rgba(238, 242, 255, .86);
    box-shadow: 0 6px 0 rgba(238, 242, 255, .72), 0 12px 0 rgba(238, 242, 255, .58);
}

.admin-settings-menu-icon--downloads::before {
    left: 18px;
    top: 8px;
    width: 4px;
    height: 17px;
    border-radius: 2px;
    background: rgba(240, 198, 116, .92);
}

.admin-settings-menu-icon--downloads::after {
    left: 10px;
    top: 22px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(240, 198, 116, .92);
}

/* A coin. The previous version drew a circle with a 45-degree bar across it,
   which reads as a "no entry" sign rather than money. */
.admin-settings-menu-icon--donate::before {
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(240, 198, 116, .92);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 198, 116, .28), rgba(240, 198, 116, .06));
}

.admin-settings-menu-icon--donate::after {
    left: 19px;
    top: 14px;
    width: 2px;
    height: 12px;
    border-radius: 999px;
    background: rgba(238, 242, 255, .9);
    box-shadow: -4px 0 0 -1px rgba(238, 242, 255, .55), 4px 0 0 -1px rgba(238, 242, 255, .55);
}

/* An open book, for the wiki. */
.admin-settings-menu-icon--wiki::before {
    left: 8px;
    top: 11px;
    width: 24px;
    height: 18px;
    border: 2px solid rgba(240, 198, 116, .92);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(240, 198, 116, .18), rgba(240, 198, 116, .04));
}

.admin-settings-menu-icon--wiki::after {
    left: 19px;
    top: 11px;
    width: 2px;
    height: 18px;
    background: rgba(238, 242, 255, .82);
    box-shadow: -7px 4px 0 -1px rgba(238, 242, 255, .5), 7px 4px 0 -1px rgba(238, 242, 255, .5);
}

/* A shopping bag: body plus handle. */
.admin-settings-menu-icon--market::before {
    left: 10px;
    top: 15px;
    width: 20px;
    height: 16px;
    border: 2px solid rgba(240, 198, 116, .92);
    border-radius: 3px 3px 5px 5px;
    background: linear-gradient(180deg, rgba(240, 198, 116, .2), rgba(240, 198, 116, .04));
}

.admin-settings-menu-icon--market::after {
    left: 15px;
    top: 9px;
    width: 10px;
    height: 8px;
    border: 2px solid rgba(238, 242, 255, .82);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}

/* A payment card with a magnetic stripe. */
.admin-settings-menu-icon--payments::before {
    left: 7px;
    top: 12px;
    width: 26px;
    height: 17px;
    border: 2px solid rgba(240, 198, 116, .92);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(240, 198, 116, .18), rgba(240, 198, 116, .04));
}

.admin-settings-menu-icon--payments::after {
    left: 7px;
    top: 17px;
    width: 26px;
    height: 4px;
    background: rgba(238, 242, 255, .82);
    box-shadow: 0 7px 0 -2px rgba(238, 242, 255, .6);
}

.admin-settings-menu-icon--servers::before {
    left: 9px;
    top: 8px;
    width: 20px;
    height: 6px;
    border: 2px solid rgba(240, 198, 116, .88);
    border-radius: 4px;
    background: rgba(240, 198, 116, .08);
    box-shadow: 0 10px 0 -2px rgba(4, 18, 31, .88), 0 10px 0 0 rgba(240, 198, 116, .88), 0 20px 0 -2px rgba(4, 18, 31, .88), 0 20px 0 0 rgba(240, 198, 116, .88);
}

.admin-settings-menu-icon--servers::after {
    right: 10px;
    top: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #58c7ff;
    box-shadow: 0 10px 0 #58c7ff, 0 20px 0 #58c7ff;
}

.admin-settings-table-wrap {
    width: 100%;
    overflow-x: auto;
    max-width: 100%;
}

.admin-settings-table-wrap .admin-table input[type="text"],
.admin-settings-table-wrap .admin-table input[type="url"],
.admin-settings-table-wrap .admin-table input[type="number"] {
    width: 100%;
    min-width: 100px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 6px;
    background: rgba(0, 0, 0, .46);
    color: #fff;
    font-size: 12px;
}

.admin-settings-table-wrap .admin-table input[type="url"] {
    min-width: 220px;
}

.admin-game-data-wrap {
    overflow-x: visible;
}

.admin-game-data-table {
    width: 100%;
    table-layout: fixed;
}

.admin-game-data-table th:nth-child(1),
.admin-game-data-table td:nth-child(1) {
    width: 27%;
}

.admin-game-data-table th:nth-child(2),
.admin-game-data-table td:nth-child(2) {
    width: 30%;
}

.admin-game-data-table th:nth-child(3),
.admin-game-data-table td:nth-child(3) {
    width: 11%;
}

.admin-game-data-table th:nth-child(4),
.admin-game-data-table td:nth-child(4) {
    width: 12%;
}

.admin-game-data-table th:nth-child(5),
.admin-game-data-table td:nth-child(5) {
    width: 20%;
}

.admin-game-data-table td,
.admin-game-data-table small {
    overflow-wrap: anywhere;
}

.admin-game-data-table .admin-row-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: stretch;
    min-width: 0;
}

.admin-game-data-table input[type="file"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 11px;
}

.admin-game-data-table .admin-button {
    min-width: 0;
    padding-inline: 13px;
    white-space: nowrap;
    width: 100%;
}

.admin-item-level-aliases {
    display: grid;
    gap: 14px;
}

.admin-item-level-alias-groups {
    display: grid;
    gap: 14px;
}

.admin-item-level-alias-group {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 8px;
    background: rgba(0, 0, 0, .18);
}

.admin-item-level-alias-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(240, 198, 116, .16);
}

.admin-item-level-alias-group__head h3 {
    margin: 0;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.admin-item-level-alias-group__head span {
    color: rgba(238, 242, 255, .7);
    font-family: var(--font-title);
    font-size: 10px;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-item-level-alias-table th:nth-child(1),
.admin-item-level-alias-table td:nth-child(1),
.admin-item-level-alias-table th:nth-child(2),
.admin-item-level-alias-table td:nth-child(2),
.admin-item-level-alias-table th:nth-child(3),
.admin-item-level-alias-table td:nth-child(3) {
    width: 70px;
}

.admin-item-level-alias-table th:nth-child(5),
.admin-item-level-alias-table td:nth-child(5) {
    width: 110px;
}

.admin-item-level-alias-table th:nth-child(6),
.admin-item-level-alias-table td:nth-child(6) {
    width: 86px;
}

.admin-icon-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-icon-actions form {
    margin: 0;
}

.admin-icon-button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(240, 198, 116, .28);
    border-radius: 6px;
    background: rgba(0, 0, 0, .28);
    color: rgba(238, 242, 255, .86);
    cursor: pointer;
    text-decoration: none;
}

.admin-icon-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-icon-button--edit:hover {
    border-color: rgba(240, 198, 116, .62);
    color: var(--modern-gold);
}

.admin-icon-button--delete {
    border-color: rgba(255, 125, 125, .34);
    color: #ff9d9d;
}

.admin-icon-button--delete:hover {
    border-color: rgba(255, 125, 125, .72);
    color: #ffd1d1;
}

.admin-settings-server-list {
    display: grid;
    gap: 12px;
}

.admin-settings-server {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 8px;
    background: rgba(5, 23, 39, .5);
}

.admin-settings-server__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-settings-server__head strong {
    color: rgba(238, 242, 255, .96);
    font-size: 15px;
}

.admin-form-grid--server {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-settings-visible {
    align-self: end;
    min-height: 42px;
}

.admin-log-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: -4px 0 14px;
}

.admin-log-pages a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 30px;
    padding: 7px 10px;
    border: 1px solid rgba(93, 151, 217, .18);
    border-radius: 999px;
    background: rgba(9, 35, 58, .42);
    color: rgba(238, 242, 255, .68);
    font-size: 11px;
    font-weight: 950;
}

.admin-log-pages a:hover,
.admin-log-pages a.active {
    border-color: rgba(240, 198, 116, .48);
    background: rgba(240, 198, 116, .14);
    color: var(--modern-gold);
}

.admin-log-card {
    min-height: 0;
}

.admin-log-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.admin-log-card--link:hover {
    border-color: rgba(255, 128, 26, .42);
    background: rgba(9, 35, 58, .48);
    transform: translateY(-1px);
}

.admin-log-card--wide {
    grid-column: 1 / -1;
}

.admin-stat-card {
    color: inherit;
    text-decoration: none;
}

.admin-stat-card--zen {
    grid-column: 1 / -1;
    order: -1;
    grid-template-columns: minmax(116px, .18fr) minmax(0, 1fr);
}

.admin-stat-card:hover {
    border-color: rgba(255, 128, 26, .42);
}

.admin-stat-jewels,
.admin-stat-detail-card {
    margin-top: 12px;
}

.admin-stat-jewel-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.admin-stat-jewel-grid > span {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding: 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(9, 35, 58, .36);
    text-align: center;
}

.admin-stat-jewel-grid strong {
    display: block;
    color: var(--modern-gold);
    font-size: 18px;
    font-weight: 950;
}

.admin-stat-jewel-grid small {
    color: rgba(238, 242, 255, .58);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-jewel-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    line-height: 1;
    overflow: visible;
    vertical-align: middle;
}

.admin-jewel-icon img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: auto;
}

/*
 * The icon box is the size the icon is actually drawn at. It used to be 32x30
 * with transform: scale(1.7) on the image, which enlarges what you see but
 * leaves the layout box at 30px - so every jewel spilled over its own tile and
 * onto its neighbours, and the two odd-sized sources (Chaos is 8x15, the rest
 * are 32x32) spilled by different amounts. Sizing the box instead keeps the
 * row even and lets object-fit handle the odd aspect ratio.
 */
.admin-stat-jewel-grid .admin-jewel-icon,
.admin-character-resources__jewels .admin-jewel-icon {
    width: 34px;
    height: 34px;
}

/*
 * aspect-ratio rather than height: 100% - the image is a grid item, and a
 * percentage height against a grid area is treated as auto, so the odd-sized
 * Chaos source (8x15) kept its own proportions and grew to 64px tall while the
 * square ones happened to land on 34. A square box plus object-fit: contain
 * letterboxes it instead, so every jewel occupies the same cell.
 */
.admin-stat-jewel-grid .admin-jewel-icon img,
.admin-character-resources__jewels .admin-jewel-icon img {
    width: 100%;
    aspect-ratio: 1;
}

.admin-jewel-icon em {
    color: var(--modern-gold);
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
}

.admin-stat-table__jewel-head {
    display: inline-flex;
    justify-content: center;
}

.admin-stat-table__jewel-value {
    text-align: center;
}

.admin-stat-table {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.admin-stat-table__head,
.admin-stat-table__row {
    display: grid;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.admin-stat-table__head {
    padding: 0 12px 2px;
    color: rgba(238, 242, 255, .52);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-stat-table__row {
    padding: 10px 12px;
    border: 1px solid rgba(93, 151, 217, .14);
    border-radius: 999px;
    background: rgba(9, 35, 58, .42);
    color: rgba(238, 242, 255, .72);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.admin-stat-table__row:hover {
    border-color: rgba(255, 128, 26, .36);
    color: #fff;
}

.admin-stat-table__row strong,
.admin-stat-table__row b {
    color: #fff;
}

.admin-stat-table__row b {
    color: var(--modern-gold);
}

.admin-stat-table__head span,
.admin-stat-table__row span,
.admin-stat-table__row strong,
.admin-stat-table__row b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-stat-table--coins .admin-stat-table__head,
.admin-stat-table--coins .admin-stat-table__row {
    grid-template-columns: minmax(100px, .8fr) minmax(120px, 1fr) minmax(120px, auto);
}

.admin-stat-table--zen .admin-stat-table__head,
.admin-stat-table--zen .admin-stat-table__row {
    grid-template-columns: minmax(100px, .8fr) minmax(120px, 1fr) repeat(4, minmax(120px, auto));
}

.admin-stat-table--daily .admin-stat-table__head,
.admin-stat-table--daily .admin-stat-table__row {
    grid-template-columns: minmax(120px, 1fr) minmax(100px, .8fr) minmax(120px, 1fr) minmax(90px, auto);
}

.admin-stat-table--jewels {
    overflow-x: auto;
}

/* Bot roster. Ten columns do not fit a narrow admin panel, so the table keeps
   its own scroller and the rows a minimum width rather than crushing names. */
.admin-stat-table--bots {
    overflow-x: auto;
}

.admin-stat-table--bots .admin-stat-table__head,
.admin-stat-table--bots .admin-stat-table__row {
    grid-template-columns:
        minmax(120px, 1.1fr) minmax(100px, .9fr) minmax(96px, .9fr)
        minmax(74px, auto) minmax(64px, auto) minmax(96px, .8fr)
        minmax(84px, auto) minmax(56px, auto) minmax(120px, auto) minmax(76px, auto);
    min-width: 1040px;
}

.admin-bots-spread-card {
    display: grid;
    gap: 10px;
}

.admin-bots-spread__title {
    color: rgba(238, 242, 255, .52);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-bots-spread {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 6px;
}

.admin-bots-spread > span {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid rgba(93, 151, 217, .18);
    border-radius: 8px;
    background: rgba(7, 34, 57, .58);
    text-align: center;
}

.admin-bots-spread small {
    overflow: hidden;
    color: rgba(238, 242, 255, .52);
    font-size: 9px;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-bots-spread strong {
    color: var(--modern-gold);
    font-size: 14px;
    font-weight: 950;
}

.admin-peak-grid .is-online-value {
    color: #7ee29a;
}

/*
 * Thirteen columns needed 1040px, which is wider than the panel they sit in -
 * the table fitted nowhere and always carried a scrollbar. The jewel columns
 * hold at most four digits, so they do not need 68px each; the row now fits a
 * normal screen and only scrolls on a genuinely narrow one.
 */
.admin-stat-table--jewels .admin-stat-table__head,
.admin-stat-table--jewels .admin-stat-table__row {
    gap: 6px;
    grid-template-columns: minmax(72px, .8fr) minmax(88px, 1fr) minmax(56px, auto) repeat(10, minmax(44px, auto));
    min-width: 760px;
}

.admin-stat-table--jewels .admin-stat-table__head {
    padding-right: 6px;
    padding-left: 6px;
}

.admin-stat-table--jewels .admin-stat-table__row {
    padding-right: 6px;
    padding-left: 6px;
}

.admin-log-list {
    display: grid;
    gap: 7px;
}

.admin-log-row {
    display: grid;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid rgba(93, 151, 217, .12);
    border-radius: 8px;
    background: rgba(9, 35, 58, .4);
    color: rgba(238, 242, 255, .72);
    font-size: 12px;
    font-weight: 850;
}

.admin-log-row--three {
    grid-template-columns: minmax(90px, 1fr) minmax(80px, .75fr) minmax(116px, auto);
}

.admin-log-row--four {
    grid-template-columns: minmax(90px, 1fr) minmax(70px, .7fr) minmax(80px, .8fr) minmax(116px, auto);
}

.admin-log-row--bank {
    grid-template-columns: minmax(90px, 1fr) minmax(70px, .7fr) minmax(112px, auto) minmax(112px, auto);
}

.admin-log-row--bank-detail {
    grid-template-columns: minmax(90px, 1fr) minmax(70px, .7fr) minmax(112px, auto) minmax(112px, auto) minmax(120px, 1fr) minmax(116px, auto);
}

.admin-log-row--coin {
    grid-template-columns: minmax(90px, 1fr) minmax(70px, .65fr) minmax(70px, auto) minmax(96px, auto) minmax(78px, auto) minmax(100px, auto) minmax(120px, 1fr) minmax(116px, auto);
}

.admin-log-row--coin-compact {
    grid-template-columns: minmax(90px, 1fr) minmax(70px, .65fr) minmax(92px, auto) minmax(70px, auto) minmax(116px, auto);
}

.admin-log-row--admin {
    grid-template-columns: minmax(70px, .7fr) minmax(120px, auto) minmax(96px, .8fr) minmax(120px, 1fr) minmax(116px, auto);
}

.admin-log-row--admin-compact {
    grid-template-columns: minmax(70px, .7fr) minmax(120px, auto) minmax(96px, .8fr) minmax(52px, auto);
}

.admin-log-row--player {
    grid-template-columns: minmax(90px, 1fr) minmax(70px, .7fr) minmax(120px, auto) minmax(96px, .8fr) minmax(120px, 1fr) minmax(116px, auto);
}

.admin-log-row--player-compact {
    grid-template-columns: minmax(90px, 1fr) minmax(70px, .7fr) minmax(110px, auto) minmax(52px, auto);
}

.admin-log-row--market {
    grid-template-columns: minmax(72px, auto) minmax(120px, 1.2fr) minmax(70px, .7fr) minmax(70px, .7fr) minmax(120px, 1fr) minmax(116px, auto);
}

.admin-log-row--market-compact {
    grid-template-columns: minmax(64px, auto) minmax(110px, 1fr) minmax(70px, .7fr) minmax(52px, auto);
}

.admin-log-row--payments {
    grid-template-columns: minmax(90px, 1fr) minmax(70px, .7fr) minmax(64px, auto) minmax(110px, 1fr) minmax(88px, auto) minmax(80px, auto) minmax(96px, auto) minmax(116px, auto);
}

.admin-log-row--payments-compact {
    grid-template-columns: minmax(70px, .8fr) minmax(64px, auto) minmax(88px, auto) minmax(52px, auto);
}

.admin-log-row--warehouse {
    grid-template-columns: minmax(90px, 1fr) minmax(70px, .7fr) minmax(110px, auto) minmax(96px, auto) minmax(116px, auto);
}

.admin-log-row--castle-siege {
    grid-template-columns: minmax(72px, auto) minmax(90px, 1fr) minmax(70px, .7fr) minmax(64px, auto) minmax(110px, auto) minmax(120px, 1fr) minmax(116px, auto);
}

.admin-log-row--castle-siege-compact {
    grid-template-columns: minmax(72px, auto) minmax(90px, 1fr) minmax(110px, 1fr) minmax(52px, auto);
}

.admin-log-row strong,
.admin-log-row span,
.admin-log-row time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-log-row strong {
    color: #fff;
    text-transform: uppercase;
}

.admin-log-row time {
    justify-self: end;
    color: var(--modern-gold);
    font-size: 11px;
}

.admin-log-pill {
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 128, 26, .16);
    color: var(--modern-orange);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-log-pill.is-ok {
    background: rgba(46, 204, 113, .14);
    color: #69f7a4;
}

.admin-log-pill.is-danger {
    background: rgba(255, 107, 107, .16);
    color: #ff9a9a;
}

/* Hint under a settings form: how to finish the setup outside the panel. */
.admin-settings-hint {
    margin-top: 12px;
    color: rgba(238, 242, 255, .62);
    font-size: 12px;
    line-height: 1.5;
}

.admin-settings-hint code {
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(238, 242, 255, .1);
    color: var(--modern-gold);
    font-size: 12px;
}

.admin-alert {
    padding: 10px 12px;
    border: 1px solid rgba(255, 125, 125, .45);
    border-radius: 6px;
    background: rgba(80, 0, 0, .22);
    color: #ffd9d9;
    font-size: 13px;
}

.admin-alert--success {
    border-color: rgba(0, 212, 106, .45);
    background: rgba(0, 88, 44, .22);
    color: #d7ffe7;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table th,
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(240, 198, 116, .14);
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    color: rgba(238, 242, 255, .6);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-table td.is-muted {
    color: rgba(238, 242, 255, .5);
}

.admin-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-badge--on {
    background: rgba(0, 212, 106, .18);
    color: #7dffbc;
}

.admin-badge--off {
    background: rgba(255, 125, 125, .16);
    color: #ff9d9d;
}

.admin-badge--danger {
    background: rgba(255, 128, 26, .18);
    color: var(--modern-orange);
}

.admin-accounts-page {
    display: grid;
    gap: 14px;
}

.admin-account-search {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid rgba(240, 198, 116, .2);
    border-radius: 12px;
    background: rgba(6, 7, 10, .42);
}

.admin-account-search .admin-field {
    margin: 0;
}

.admin-account-section {
    display: grid;
    gap: 12px;
}

.admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-section-head h2 {
    margin: 0;
    color: var(--modern-gold);
    font-size: 14px;
    text-transform: uppercase;
}

.admin-section-head span {
    color: rgba(238, 242, 255, .5);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-account-list {
    display: grid;
    gap: 8px;
}

.admin-account-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.25fr) minmax(120px, 1fr) minmax(92px, auto) minmax(116px, auto);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(93, 151, 217, .12);
    border-radius: 8px;
    background: rgba(9, 35, 58, .42);
    color: rgba(238, 242, 255, .72);
    font-size: 12px;
    font-weight: 850;
}

.admin-account-row > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.admin-account-row strong,
.admin-account-row span,
.admin-account-row time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-account-row strong {
    color: #fff;
    text-transform: uppercase;
}

.admin-account-row span {
    color: rgba(238, 242, 255, .54);
}

.admin-account-row time {
    justify-self: end;
    color: var(--modern-gold);
    font-size: 11px;
    font-weight: 900;
}

.admin-account-link {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-weight: 950;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-account-link:hover,
.admin-account-character-links a:hover {
    color: var(--modern-orange);
}

/* Log rows: a character name opens its page, an account id the account view.
   Inherit the cell's colour so a link reads like the text it replaced. */
.admin-log-link {
    color: inherit;
    text-decoration: none;
}

.admin-log-link:hover,
.admin-log-link:focus-visible {
    color: var(--modern-orange);
    text-decoration: underline;
}

.admin-account-character-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.admin-account-character-links a {
    color: rgba(238, 242, 255, .54);
}

.admin-account-view {
    display: grid;
    gap: 14px;
}

.admin-account-character-switcher {
    margin-bottom: 0;
}

.admin-account-view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-account-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-account-section--bank .admin-account-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-account-facts span {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(9, 35, 58, .42);
}

.admin-account-facts small {
    color: rgba(238, 242, 255, .5);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-account-facts strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-account-character-list {
    display: grid;
    gap: 8px;
}

.admin-account-character-list a,
.admin-account-character-entry {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(93, 151, 217, .12);
    border-radius: 999px;
    background: rgba(9, 35, 58, .42);
    color: rgba(238, 242, 255, .72);
}

.admin-account-character-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0;
}

.admin-account-character-entry > a {
    border: 0;
    background: transparent;
}

.admin-account-character-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.admin-account-character-name strong {
    flex: 0 1 auto;
}

.admin-account-character-name .admin-badge {
    flex: 0 0 auto;
}

.admin-account-character-entry .admin-button {
    margin-right: 10px;
}

.admin-account-character-list a:hover {
    border-color: rgba(255, 128, 26, .36);
    color: #fff;
}

.admin-account-character-list strong,
.admin-account-character-list span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-streamers-page {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.admin-streamer-list {
    display: grid;
    gap: 10px;
}

.admin-streamer-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(92px, .55fr) minmax(92px, .55fr) minmax(120px, .75fr) minmax(420px, 1.65fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(68, 160, 255, .2);
    border-radius: 8px;
    background: rgba(4, 22, 36, .74);
}

.admin-streamer-row__main,
.admin-streamer-row > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.admin-streamer-row strong,
.admin-streamer-row span,
.admin-streamer-row time,
.admin-streamer-row a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-streamer-row span,
.admin-streamer-row time {
    color: rgba(238, 242, 255, .58);
    font-size: 12px;
}

.admin-streamer-row > p {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(238, 242, 255, .62);
    font-size: 12px;
}

.admin-streamer-actions {
    display: grid;
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
    justify-self: end;
    width: min(100%, 520px);
}

.admin-streamer-actions__fields {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
}

.admin-streamer-actions label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-streamer-actions label span {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-streamer-actions input {
    width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
}

.admin-streamer-actions__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(76px, 1fr));
    gap: 7px;
    align-items: center;
}

.admin-streamer-actions__buttons input[type="text"] {
    grid-column: 1 / -1;
    min-height: 30px;
}

.admin-streamer-actions__buttons .admin-button--wide {
    grid-column: 1 / -1;
}

.admin-streamer-actions .admin-button {
    min-height: 32px;
    padding: 0 12px;
    font-size: 11px;
}

.admin-account-character-list strong {
    color: #fff;
    text-transform: uppercase;
}

.admin-ban-modal[hidden] {
    display: none;
}

.admin-ban-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.admin-ban-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .68);
}

.admin-ban-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    width: min(430px, 100%);
    padding: 18px;
    border: 1px solid rgba(240, 198, 116, .34);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(7, 17, 28, .98), rgba(0, 0, 0, .94)),
        rgba(0, 0, 0, .9);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .72);
}

.admin-ban-modal__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
}

.admin-ban-modal__head span {
    grid-column: 1;
    color: var(--modern-gold);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-ban-modal__head strong {
    grid-column: 1;
    color: #fff;
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.admin-ban-modal__head button {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: rgba(238, 242, 255, .74);
    font-size: 20px;
}

.admin-ban-modal__head button:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.admin-ban-modal__card p {
    margin: 0;
    color: rgba(238, 242, 255, .62);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

@media (max-width: 1180px) {
    .admin-streamer-row {
        grid-template-columns: minmax(140px, 1fr) minmax(90px, .6fr) minmax(90px, .6fr) minmax(120px, .8fr);
    }

    .admin-streamer-actions {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
    }
}

.admin-ban-modal__durations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-ban-modal__durations label {
    position: relative;
    min-width: 0;
}

.admin-ban-modal__durations input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-ban-modal__durations span {
    display: grid;
    place-items: center;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(93, 151, 217, .2);
    border-radius: 8px;
    background: rgba(7, 34, 57, .62);
    color: rgba(238, 242, 255, .78);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

.admin-ban-modal__durations input:checked + span {
    border-color: rgba(255, 159, 46, .78);
    background: linear-gradient(180deg, #ff8d29, #df5c13);
    color: #fff;
}

.admin-row-actions {
    display: flex;
    gap: 8px;
}

.admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(240, 198, 116, .3);
    border-radius: 6px;
    background: rgba(0, 0, 0, .3);
    color: rgba(238, 242, 255, .85);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.admin-button:hover {
    border-color: rgba(240, 198, 116, .6);
    color: #fff;
}

.admin-button--pill {
    min-height: 28px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.admin-button--primary {
    border: none;
    background: linear-gradient(180deg, #f3d28a, #c48b31);
    color: #1a1208;
}

.admin-button--danger {
    border-color: rgba(255, 125, 125, .4);
    color: #ff9d9d;
}

.admin-form {
    display: grid;
    gap: 14px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-field {
    display: grid;
    gap: 6px;
}

.admin-field label,
.admin-field > span {
    color: rgba(238, 242, 255, .72);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-field input[type="text"],
.admin-field input[type="url"],
.admin-field input[type="number"],
.admin-field select,
.admin-field textarea {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 6px;
    background: rgba(0, 0, 0, .46);
    color: #fff;
    font-size: 13px;
}

.admin-field textarea {
    min-height: 120px;
    padding: 10px 12px;
    resize: vertical;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    outline: 2px solid rgba(240, 198, 116, .2);
    border-color: rgba(240, 198, 116, .65);
}

.admin-field small {
    color: var(--red);
    font-size: 12px;
}

/* Wiki article text: sections, requirement lists and picked-out labels. */
.wiki-copy__heading {
    margin: 20px 0 10px;
    padding-bottom: 0;
    border-bottom: 0;
    color: #f0c674;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: uppercase;
}

.wiki-copy__heading:first-child {
    margin-top: 0;
}

.wiki-copy__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.wiki-copy__list li {
    position: relative;
    padding: 7px 12px 7px 27px;
    border-left: 2px solid rgba(240, 198, 116, .4);
    border-radius: 0 6px 6px 0;
    background: rgba(0, 0, 0, .24);
}

.wiki-copy__list li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(240, 198, 116, .7);
}

.wiki-copy__label {
    color: #fff;
}

.wiki-copy__table-scroll {
    max-width: 100%;
    margin: 12px 0 18px;
    overflow-x: auto;
}

.wiki-copy__table-scroll:focus-visible {
    outline: 1px solid #f0c674;
    outline-offset: 3px;
}

.wiki-copy__table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
}

.wiki-copy__table th,
.wiki-copy__table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(240, 198, 116, .15);
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wiki-copy__table thead th {
    color: #f0c674;
    font-weight: 700;
    background: rgba(240, 198, 116, .06);
}

.wiki-copy__table tbody th {
    color: #eef2ff;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    text-transform: none;
}

.wiki-copy__table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, .14);
}

.wiki-copy__figure {
    display: grid;
    justify-items: center;
    width: fit-content;
    max-width: min(100%, 520px);
    margin: 14px auto 18px;
    padding: 9px;
    border: 1px solid rgba(240, 198, 116, .2);
    border-radius: 8px;
    background: rgba(0, 0, 0, .34);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .24);
    text-align: center;
}

.wiki-copy__gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    margin: 14px auto 18px;
}

.wiki-copy__gallery .wiki-copy__figure {
    margin: 0;
}

.wiki-copy__figure--portrait {
    max-width: min(100%, 310px);
}

.wiki-copy__figure--wide {
    max-width: min(100%, 640px);
}

.wiki-copy__gallery .wiki-copy__figure--portrait {
    max-width: min(100%, 280px);
}

.wiki-copy__gallery .wiki-copy__figure--wide {
    max-width: min(100%, 390px);
}

.wiki-copy__figure img {
    display: block;
    max-width: 100%;
    max-height: min(68vh, 520px);
    object-fit: contain;
    /* Client art is drawn small; scaling it up keeps the pixel edges sharp
       instead of turning it into a blur. */
    image-rendering: pixelated;
}

.wiki-copy__figure figcaption {
    margin-top: 8px;
    color: rgba(238, 242, 255, .5);
    font-size: 12px;
}

/* Match the Chaos Castle reward pair without resizing other wiki artwork. */
.wiki-copy__gallery:has(img[src$="/item_images/14/209.webp"]):has(img[src$="/item_images/14/96.webp"]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    max-width: 354px;
}

.wiki-copy__gallery:has(img[src$="/item_images/14/209.webp"]):has(img[src$="/item_images/14/96.webp"]) .wiki-copy__figure {
    width: auto;
    max-width: none;
    grid-template-rows: 32px auto;
    align-content: start;
}

.wiki-copy__gallery:has(img[src$="/item_images/14/209.webp"]):has(img[src$="/item_images/14/96.webp"]) img {
    width: auto;
    height: 32px;
    max-height: 32px;
    image-rendering: auto;
}

/* Ticket recipes: three ingredients and the resulting invitation. */
.wiki-copy--ticket-recipe .wiki-copy__gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 32px;
    max-width: 720px;
    margin-block: 18px 22px;
}

.wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure {
    position: relative;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 132px;
    grid-template-rows: 64px auto;
    align-content: start;
    box-shadow: none;
}

.wiki-copy--ticket-recipe .wiki-copy__gallery img {
    width: 64px;
    height: 64px;
    max-height: 64px;
    object-fit: contain;
}

.wiki-copy--ticket-recipe .wiki-copy__gallery img[src$="/item_images/12/15.webp"] {
    width: 16px;
    height: 30px;
    align-self: center;
    image-rendering: auto;
}

.wiki-copy--ticket-recipe .wiki-copy__gallery figcaption {
    color: rgba(238, 242, 255, .8);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure:not(:last-child)::after,
.wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure:last-child::before {
    position: absolute;
    top: 25px;
    right: -29px;
    width: 24px;
    color: #f0c674;
    font-family: Arial, sans-serif;
    font-size: 28px;
    line-height: 32px;
    font-weight: 400;
    text-align: center;
}

.wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure:nth-child(-n+2)::after {
    content: '+';
}

.wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure:nth-child(3)::after {
    content: '=';
}

.wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure:last-child {
    border-color: rgba(240, 198, 116, .55);
    background: rgba(240, 198, 116, .06);
}

@media (max-width: 640px) {
    .wiki-copy--ticket-recipe .wiki-copy__gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px 24px;
    }

    .wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure {
        min-height: 148px;
    }

    .wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure:nth-child(-n+2)::after {
        right: -25px;
    }

    .wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure:nth-child(3)::after {
        content: none;
    }

    .wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: 156px;
        margin-top: 24px;
    }

    .wiki-copy--ticket-recipe .wiki-copy__gallery .wiki-copy__figure:last-child::before {
        content: '=';
        top: -36px;
        right: calc(50% - 12px);
    }
}

/* The full reset table under the reset article. */
.reset-table {
    margin-top: 22px;
}

.reset-table__scroll {
    overflow-x: auto;
    border: 1px solid rgba(240, 198, 116, .2);
    border-radius: 10px;
    background: rgba(0, 0, 0, .3);
}

.reset-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.reset-table th {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(240, 198, 116, .22);
    color: #f0c674;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.reset-table td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: rgba(238, 242, 255, .82);
    text-align: center;
    white-space: nowrap;
}

.reset-table tbody tr:last-child td {
    border-bottom: 0;
}

.reset-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .02);
}

.reset-table tbody tr:hover {
    background: rgba(240, 198, 116, .07);
}

.reset-table__index {
    color: #fff;
    font-weight: 900;
}

.reset-table__rate,
.reset-table__total {
    color: #f0c674;
    font-weight: 700;
}

.reset-table__price {
    color: #e8a87c;
}

.reset-table__note {
    margin: 12px 0 0;
    color: rgba(238, 242, 255, .5);
    font-size: 12px;
}

.reset-table--master {
    margin-top: 30px;
}

.reset-table--master .reset-table__note:first-of-type {
    margin: 0 0 12px;
}

/* Server information block under the wiki article of the same name. */
.server-info {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.server-info__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.server-info__card {
    padding: 16px 18px;
    border: 1px solid rgba(240, 198, 116, .2);
    border-radius: 10px;
    background: rgba(0, 0, 0, .3);
}

.server-info__card h2 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(240, 198, 116, .16);
    color: #f0c674;
    font-size: 15px;
    text-align: center;
    text-transform: uppercase;
}

.server-info__card dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.server-info__card dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.server-info__card dt {
    color: rgba(238, 242, 255, .68);
    font-size: 13px;
}

.server-info__card dd {
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.server-info__card dd small {
    display: block;
    color: rgba(238, 242, 255, .45);
    font-size: 11px;
    font-weight: 400;
}

/* A value too long to sit beside its label drops under it instead of
   squeezing the label into a two-line column. */
.server-info__card dl > div.server-info__row--stacked {
    display: block;
}

.server-info__card dl > div.server-info__row--stacked dd {
    text-align: left;
}

.server-info__accent {
    color: #f0c674;
}

.server-info__warn {
    color: #e8a87c;
}

.server-info__label {
    margin: 14px 0 8px;
    color: rgba(238, 242, 255, .68);
    font-size: 13px;
}

.server-info__classes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.server-info__classes img {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(240, 198, 116, .22);
    border-radius: 6px;
    background: rgba(0, 0, 0, .35);
}

.server-info__classes a:hover img {
    border-color: rgba(240, 198, 116, .7);
}

.server-info__note {
    margin: 12px 0 0;
    color: rgba(238, 242, 255, .5);
    font-size: 12px;
}

.server-info__card--wide {
    grid-column: 1 / -1;
}

.server-info__curve {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.server-info__curve li {
    display: grid;
    gap: 2px;
    padding: 8px 4px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 6px;
    background: rgba(0, 0, 0, .26);
    text-align: center;
}

.server-info__curve-range {
    color: rgba(238, 242, 255, .55);
    font-size: 11px;
}

.server-info__curve-rate {
    color: #f0c674;
    font-size: 15px;
    font-weight: 900;
}

.wiki-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.wiki-standalone {
    display: grid;
    /*
     * One column that cannot outgrow the viewport. A bare `display: grid`
     * sizes its column to max-content, so a page holding a wide table - the
     * quest chain and the daily quests both do - stretched the whole shell
     * and pushed the nav off a phone screen. With minmax(0, 1fr) the table
     * scrolls inside its own `.table-wrap` instead, which is what that
     * wrapper is for.
     */
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.wiki-article.wiki-article--ancient:not(.wiki-article--server-info) > .news-article__body {
    width: 100%;
}

.wiki-article.wiki-article--ancient:not(.wiki-article--server-info) > .news-article__body > h1 {
    font-size: 32px;
}

.ancient-catalog__note {
    margin: 0 0 20px;
    color: rgba(238, 242, 255, .6);
    font-size: 13px;
    line-height: 1.5;
}

.ancient-catalog__filters {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 210px 130px;
    align-items: end;
    gap: 16px;
    margin-bottom: 20px;
}

.ancient-catalog__filters label {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: #c8cbd0;
    font-size: 12px;
}

.ancient-catalog__filters input,
.ancient-catalog__filters select {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(240, 198, 116, .27);
    border-radius: 4px;
    background: #0c1014;
    color: #f0f1f3;
    font: inherit;
    font-size: 14px;
}

.ancient-catalog__filters :is(input, select):focus-visible {
    outline: 2px solid #bc9550;
    outline-offset: 2px;
}

.ancient-catalog__filters output {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 40px;
    color: #aaaeb5;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ancient-catalog__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.ancient-set {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(240, 198, 116, .22);
    border-radius: 6px;
    background: rgba(5, 8, 10, .82);
    scroll-margin-top: 110px;
}

.ancient-set[hidden],
.ancient-catalog__empty[hidden] {
    display: none;
}

.ancient-set__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ancient-set__header h2 {
    margin: 0;
    color: #9ed99b;
    font-size: 18px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ancient-set__header > span {
    padding-top: 3px;
    color: #a6abb1;
    font-size: 11px;
    white-space: nowrap;
}

.ancient-set__classes {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.ancient-set__classes a {
    color: #b0bdcb;
    font-size: 11px;
    line-height: 1.4;
    text-decoration: none;
}

.ancient-set__classes a:hover,
.ancient-set__classes a:focus-visible {
    color: #f0c674;
    text-decoration: underline;
}

.ancient-set__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 18px;
    align-items: start;
}

.ancient-set__columns > div {
    min-width: 0;
}

.ancient-set__columns h3 {
    margin: 0 0 12px;
    color: #e2bc76;
    font-size: 12px;
    line-height: 1.4;
}

.ancient-set__items,
.ancient-set__tier ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ancient-set__items > li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 78px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ancient-set__items > li:last-child {
    border-bottom: 0;
}

.ancient-set__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 64px;
}

.ancient-set__icon img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ancient-set__items strong {
    display: block;
    color: #e5e5e7;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.ancient-set__stats {
    display: grid;
    gap: 2px;
    margin: 5px 0 0;
    font-size: 11px;
    line-height: 1.4;
}

.ancient-set__stats > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
}

.ancient-set__stats dt {
    color: #949ca7;
}

.ancient-set__stats dd {
    margin: 0;
    color: #9dc9db;
}

.ancient-set__tier {
    margin-top: 12px;
}

.ancient-set__tier h4 {
    margin: 0 0 4px;
    color: #9ed99b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.ancient-set__tier li {
    margin: 3px 0;
    color: #c9ccd1;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ancient-set__tier--full {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(240, 198, 116, .2);
}

.ancient-set__tier--full h4 {
    color: #e2bc76;
}

.ancient-catalog__empty {
    padding: 32px 0;
    color: #a6abb1;
    text-align: center;
}

@media (max-width: 1020px) {
    .ancient-catalog__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .ancient-catalog__filters {
        grid-template-columns: minmax(0, 1fr) 120px;
        gap: 12px;
    }

    .ancient-catalog__filters label:first-child {
        grid-column: 1 / -1;
    }

    .ancient-set {
        padding: 12px;
    }

    .ancient-set__columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ancient-set__items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px;
    }

    .ancient-set__items > li {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 6px;
    }

    .ancient-set__icon {
        width: 38px;
        height: 56px;
    }
}

.wiki-article:not(.wiki-article--server-info) > .news-article__body {
    width: min(100%, 1000px);
    margin-inline: auto;
    padding: 20px 24px 22px;
}

.wiki-article:not(.wiki-article--server-info) > .news-article__body > h1 {
    max-width: 100%;
    margin: 6px 0 10px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.08;
    letter-spacing: 0;
}

.wiki-article:not(.wiki-article--server-info) .news-lead {
    max-width: 920px;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.45;
}

.wiki-article:not(.wiki-article--server-info) .wiki-copy {
    max-width: none;
    line-height: 1.6;
}

.wiki-article:not(.wiki-article--server-info) .wiki-copy p {
    margin: 0 0 12px;
}

.wiki-article:not(.wiki-article--server-info) .wiki-copy > :last-child {
    margin-bottom: 0;
}

.wiki-article .class-chip {
    border-color: rgba(240, 198, 116, .16);
    background: rgba(0, 0, 0, .38);
}

.wiki-article .panel-title .label {
    color: #f0c674;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.wiki-article--class {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    padding: 12px;
}

.wiki-article--class > .news-article__body,
.wiki-article--class > .class-detail {
    grid-column: 1 / -1;
}

.wiki-article--class > .content-panel {
    margin: 0;
    padding: 18px;
    border-radius: 6px;
}

.wiki-article--class .class-facts {
    grid-template-columns: minmax(90px, auto) minmax(0, 1fr) minmax(90px, auto) minmax(0, 1fr);
    gap: 8px 14px;
}

.wiki-article--server-info {
    border-color: rgba(229, 169, 78, .36);
    background:
        linear-gradient(180deg, rgba(4, 9, 16, .2), rgba(0, 0, 0, .68)),
        rgba(0, 0, 0, .55);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .45),
        inset 0 0 34px rgba(38, 118, 190, .09);
}

.wiki-article--server-info .news-article__body {
    padding: 12px;
}

.wiki-topnav {
    min-width: 0;
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 8px;
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
    backdrop-filter: blur(6px);
    overflow: hidden;
}

.wiki-topnav__summary {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 14px;
    color: #fff;
    cursor: pointer;
    list-style: none;
}

.wiki-topnav__summary::-webkit-details-marker {
    display: none;
}

.wiki-topnav__icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(242, 199, 107, .42);
    border-radius: 50%;
    background:
        radial-gradient(circle at 45% 32%, rgba(255, 230, 160, .2), transparent 42%),
        rgba(2, 15, 28, .9);
    color: #f2c76b;
}

.wiki-topnav__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wiki-topnav__caption {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.wiki-topnav__caption strong {
    color: #f5f7ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.wiki-topnav__caption small {
    overflow: hidden;
    color: rgba(238, 242, 255, .5);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.wiki-topnav__chevron {
    width: 9px;
    height: 9px;
    justify-self: end;
    border-right: 2px solid #f2c76b;
    border-bottom: 2px solid #f2c76b;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}

.wiki-topnav__chooser[open] .wiki-topnav__chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.wiki-topnav__categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(240, 198, 116, .12);
    background: rgba(0, 0, 0, .2);
}

.wiki-topnav__category {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 9px 11px;
    border: 1px solid rgba(240, 198, 116, .12);
    border-radius: 6px;
    background: rgba(0, 0, 0, .3);
}

.wiki-topnav__category:hover,
.wiki-topnav__category.active {
    border-color: rgba(242, 199, 107, .42);
    background: linear-gradient(90deg, rgba(171, 110, 31, .22), rgba(0, 0, 0, .45));
}

.wiki-topnav__pages {
    display: flex;
    gap: 6px;
    min-width: 0;
    padding: 10px;
    border-top: 1px solid rgba(240, 198, 116, .12);
    overflow-x: auto;
    overflow-y: hidden;
}

.wiki-topnav__page {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 6px;
    background: rgba(0, 0, 0, .32);
    color: rgba(238, 242, 255, .82);
    font-size: 12px;
    white-space: nowrap;
}

.wiki-topnav__page:hover,
.wiki-topnav__page.active {
    border-color: rgba(242, 199, 107, .42);
    background: linear-gradient(90deg, rgba(171, 110, 31, .28), rgba(0, 0, 0, .58));
    color: #fff;
}

.wiki-topnav__page.active {
    font-weight: 900;
}

@media (max-width: 920px) {
    .wiki-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .wiki-topnav__categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wiki-topnav__pages {
        scroll-snap-type: x proximity;
    }

    .wiki-topnav__page {
        scroll-snap-align: start;
    }

    .wiki-copy__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {
    .wiki-article:not(.wiki-article--server-info) > .news-article__body {
        padding: 18px;
    }

    .wiki-copy__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .wiki-article--class .class-facts {
        grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    .wiki-topnav__summary {
        min-height: 58px;
        padding: 8px 10px;
    }

    .wiki-topnav__categories {
        grid-template-columns: 1fr;
        padding: 8px;
    }

    .wiki-topnav__category {
        min-height: 56px;
        padding: 7px 9px;
    }

    .wiki-topnav__pages {
        padding: 8px;
    }

    .server-info__cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Wiki editor: one pane of text fields per language, behind a row of tabs. */
.wiki-langs {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 8px;
    background: rgba(0, 0, 0, .22);
}

.wiki-langs__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wiki-langs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wiki-langs__tab.is-active {
    border-color: rgba(240, 198, 116, .65);
    background: linear-gradient(180deg, rgba(243, 210, 138, .22), rgba(196, 139, 49, .18));
    color: #f5d999;
}

.wiki-langs__tab small {
    font-size: 10px;
    text-transform: uppercase;
    opacity: .6;
}

.wiki-langs__flag {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(238, 242, 255, .12);
    color: rgba(238, 242, 255, .7);
    font-size: 10px;
    text-transform: uppercase;
}

.wiki-langs__flag--error {
    background: rgba(214, 74, 74, .3);
    color: #ffd7d7;
}

.wiki-langs__pane {
    display: none;
    gap: 14px;
}

.wiki-langs__pane.is-active {
    display: grid;
}

.wiki-langs__hint {
    margin: 0;
    color: rgba(238, 242, 255, .55);
    font-size: 12px;
}

.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(238, 242, 255, .78);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-checkbox input[type="checkbox"] {
    position: relative;
    flex: none;
    width: 18px;
    min-width: 0;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(240, 198, 116, .4);
    border-radius: 4px;
    background: rgba(0, 0, 0, .4);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.admin-checkbox input[type="checkbox"]:hover {
    border-color: rgba(240, 198, 116, .7);
}

.admin-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(240, 198, 116, .35);
    outline-offset: 2px;
}

.admin-checkbox input[type="checkbox"]:checked {
    border-color: rgba(240, 198, 116, .8);
    background: linear-gradient(180deg, #f3d28a, #c48b31);
}

.admin-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #1a1208;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.admin-subhead {
    margin: 4px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(240, 198, 116, .16);
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(240, 198, 116, .85);
}

@media (max-width: 720px) {
    .admin-account-search {
        grid-template-columns: 1fr;
    }

    .admin-account-search .admin-button {
        width: 100%;
    }

    .admin-account-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .admin-streamer-row {
        grid-template-columns: 1fr;
    }

    .admin-streamer-actions {
        grid-template-columns: 1fr;
    }

    .admin-account-row time {
        justify-self: start;
    }

    .admin-account-view-grid,
    .admin-account-facts,
    .account-streamer-status,
    .admin-account-character-list a {
        grid-template-columns: 1fr;
    }

    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-settings-jump,
    .admin-settings-server__head {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-settings-menu {
        /* Still one row where it fits; on a phone it becomes two or three per
           row rather than a six-card column. */
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
        max-width: 420px;
    }

    .admin-donate-stats {
        grid-template-columns: 1fr;
    }

    .admin-form-grid--server {
        grid-template-columns: 1fr;
    }

    .admin-table {
        display: block;
        overflow-x: auto;
    }
}

.support-chat-page {
    display: grid;
    gap: 16px;
}

.support-chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 480px;
    padding: 16px;
    overflow-y: auto;
    border: 1px solid rgba(240, 198, 116, .24);
    border-radius: 10px;
    background: rgba(6, 7, 10, .5);
}

.support-chat__empty {
    margin: auto;
    color: rgba(238, 242, 255, .5);
    font-size: 13px;
}

.support-bubble {
    display: grid;
    gap: 4px;
    max-width: min(520px, 80%);
    padding: 10px 12px;
    border-radius: 10px;
}

.support-bubble__author {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    opacity: .6;
}

.support-bubble p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.support-bubble time {
    font-size: 10px;
    color: rgba(238, 242, 255, .45);
}

/* Player page: own (player) messages on the right, support on the left. */
.support-bubble--player {
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(243, 210, 138, .22), rgba(196, 139, 49, .22));
    border: 1px solid rgba(240, 198, 116, .35);
}

.support-bubble--admin {
    align-self: flex-start;
    background: rgba(9, 35, 58, .56);
    border: 1px solid rgba(93, 151, 217, .3);
}

/* Admin page: mirror it - own (admin) messages on the right. */
.support-chat--admin .support-bubble--admin {
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(243, 210, 138, .22), rgba(196, 139, 49, .22));
    border: 1px solid rgba(240, 198, 116, .35);
}

.support-chat--admin .support-bubble--player {
    align-self: flex-start;
    background: rgba(9, 35, 58, .56);
    border: 1px solid rgba(93, 151, 217, .3);
}

.support-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: end;
}

.support-form textarea {
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 6px;
    background: rgba(0, 0, 0, .46);
    color: #fff;
    font: inherit;
    font-size: 13px;
    resize: vertical;
}

.support-form textarea:focus {
    outline: 2px solid rgba(240, 198, 116, .2);
    border-color: rgba(240, 198, 116, .65);
}

@media (max-width: 560px) {
    .support-form {
        grid-template-columns: 1fr;
    }

    .support-bubble {
        max-width: 92%;
    }
}

.downloads-page {
    display: grid;
    gap: 16px;
    caret-color: transparent;
    cursor: default;
    user-select: none;
}

.downloads-hero {
    min-height: 190px;
    display: grid;
    align-content: center;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .42)),
        url("../images/main-bg.png") center 36% / cover no-repeat;
}

.downloads-hero h1 {
    margin: 6px 0 10px;
    color: #fff;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
    text-transform: uppercase;
}

.downloads-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(238, 242, 255, .78);
    font-size: 16px;
}

.download-mirrors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.download-mirror {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(10, 13, 19, .94), rgba(0, 0, 0, .72));
    box-shadow: 0 18px 36px rgba(0, 0, 0, .3);
    transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}

.download-mirror:hover {
    border-color: rgba(240, 198, 116, .72);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.download-mirror__mark {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: linear-gradient(180deg, #f5d58c, #c58c32);
    color: #1a1208;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
}

.download-mirror strong,
.download-mirror small {
    display: block;
}

.download-mirror strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.1;
    text-transform: uppercase;
}

.download-mirror small {
    margin-top: 5px;
    color: rgba(238, 242, 255, .68);
    font-size: 12px;
    line-height: 1.35;
}

.requirements-panel {
    display: grid;
    gap: 16px;
}

.requirements-head h2 {
    margin: 5px 0 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.1;
    text-transform: uppercase;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.requirement-row {
    display: grid;
    grid-template-columns: minmax(110px, .42fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(0, 0, 0, .32);
}

.requirement-row span {
    color: var(--modern-gold);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.requirement-row strong {
    color: rgba(238, 242, 255, .9);
    font-size: 13px;
    line-height: 1.35;
}

.donate-page {
    display: grid;
    gap: 16px;
    caret-color: transparent;
    cursor: default;
    user-select: none;
}

.donate-hero {
    position: relative;
    min-height: 210px;
    display: grid;
    align-content: center;
    gap: 8px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .84), rgba(0, 0, 0, .45)),
        url("../images/main-bg.png") center 40% / cover no-repeat;
}

.donate-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
    text-transform: uppercase;
}

.donate-hero p {
    max-width: 660px;
    margin: 0;
    color: rgba(238, 242, 255, .78);
    font-size: 16px;
}

.donate-faq-link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-top: 8px;
    padding: 0 14px;
    border: 1px solid rgba(240, 198, 116, .28);
    border-radius: 999px;
    background: rgba(5, 23, 39, .68);
    color: var(--modern-gold);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.donate-packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.donate-pack {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 214px;
    padding: 22px 14px 18px;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(10, 32, 52, .88), rgba(0, 0, 0, .68));
    box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
    text-align: center;
    transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}

.donate-pack:hover {
    border-color: rgba(240, 198, 116, .65);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Buy button sits at the bottom of every package, so a row of packages lines
   up regardless of how much text each one carries. */
.donate-pack form {
    display: grid;
    gap: 8px;
    margin: 0;
    width: 100%;
}

.donate-pack__author {
    display: grid;
    gap: 6px;
    width: 100%;
    text-align: left;
}

.donate-pack__author-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
    color: rgba(238, 242, 255, .74);
    cursor: pointer;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.donate-pack__author-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.donate-pack__author-toggle i {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(240, 198, 116, .55);
    border-radius: 3px;
    background: rgba(0, 0, 0, .34);
    box-sizing: border-box;
}

.donate-pack__author-toggle i::before {
    content: "";
    width: 8px;
    height: 5px;
    border-left: 2px solid #1b2330;
    border-bottom: 2px solid #1b2330;
    opacity: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}

.donate-pack__author-toggle input:checked + i {
    border-color: rgba(240, 198, 116, .95);
    background: var(--modern-gold);
}

.donate-pack__author-toggle input:checked + i::before {
    opacity: 1;
}

.donate-pack__author-toggle input:focus-visible + i {
    box-shadow: 0 0 0 2px rgba(240, 198, 116, .18);
}

.donate-pack__author-field {
    display: none;
    gap: 4px;
    width: 100%;
}

.donate-pack__author:has(.donate-pack__author-toggle input:checked) .donate-pack__author-field {
    display: grid;
}

.donate-pack__author-field > span {
    color: rgba(238, 242, 255, .48);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.donate-pack__author-field input {
    width: 100%;
    min-height: 34px;
    border-radius: 999px;
    text-align: center;
    text-transform: uppercase;
}

.donate-pack__providers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
    gap: 8px;
}

.donate-pack__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffc439, #f0a800);
    color: #1b2330;
    cursor: pointer;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

/* Stripe covers cards, Google Pay and Apple Pay, so it gets the neutral
   treatment and PayPal keeps its own colour. */
.donate-pack__buy--card {
    background: linear-gradient(180deg, #7a8dff, #4d5fe0);
    color: #fff;
}

.donate-pack__price {
    color: var(--modern-gold);
    font-size: 13px;
    font-weight: 950;
}

.donate-pack__buy:disabled {
    background: rgba(238, 242, 255, .16);
    color: rgba(238, 242, 255, .6);
    cursor: default;
}

.streamers-page {
    display: grid;
    gap: 16px;
    width: min(1100px, 100%);
    margin: 0 auto;
    caret-color: transparent;
    cursor: default;
    user-select: none;
}

.streamer-card__video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(240, 198, 116, .18);
    border-radius: 8px;
    background: rgba(0, 0, 0, .55);
}

.streamer-card__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.streamers-hero {
    display: grid;
    justify-items: start;
    gap: 12px;
    min-height: 220px;
    align-content: center;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .88), rgba(3, 18, 32, .64)),
        url("../images/main-bg.png") center 42% / cover no-repeat;
}

.streamers-hero > img {
    display: none;
}

.streamers-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
    text-transform: uppercase;
}

.streamers-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(238, 242, 255, .76);
    font-size: 15px;
    line-height: 1.55;
}

.streamers-hero__actions,
.streamer-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.streamers-cta,
.streamers-link,
.streamer-card__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.streamers-cta {
    border: 0;
    background: linear-gradient(180deg, #f8d37a, #d6942c);
    color: #120d05;
}

.streamers-link,
.streamer-card__actions a {
    border: 1px solid rgba(240, 198, 116, .28);
    background: rgba(5, 23, 39, .68);
    color: var(--modern-gold);
}

.streamers-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.streamers-stats article,
.streamers-rule-grid article,
.streamer-card {
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(10, 32, 52, .76), rgba(0, 0, 0, .48));
}

.streamer-card__video {
    margin: -4px -4px 0;
}

.streamers-stats article {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 16px;
}

.streamers-stats strong {
    color: var(--modern-gold);
    font-size: 24px;
    font-weight: 950;
}

.streamers-stats span {
    color: rgba(238, 242, 255, .58);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.streamers-rules,
.streamers-own,
.streamers-list {
    display: grid;
    gap: 14px;
}

.streamers-section-head {
    display: grid;
    gap: 4px;
}

.streamers-section-head h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.1;
    text-transform: uppercase;
}

.streamers-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.streamers-rule-grid article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
}

.streamers-rule-grid strong {
    color: var(--modern-gold);
    font-size: 24px;
    font-weight: 950;
}

.streamers-rule-grid span {
    color: rgba(238, 242, 255, .72);
    font-size: 13px;
    line-height: 1.45;
}

.streamers-own__status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.streamers-own__status span,
.streamers-own__status strong,
.streamers-own__status em {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(5, 23, 39, .72);
    color: rgba(238, 242, 255, .78);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.streamers-own__status .is-approved {
    background: rgba(26, 142, 93, .42);
    color: #9ff5c7;
}

.streamers-own__status .is-pending {
    background: rgba(240, 198, 116, .16);
    color: var(--modern-gold);
}

.streamers-own__status .is-rejected,
.streamers-own__status .is-blocked {
    background: rgba(149, 45, 45, .42);
    color: #ffaaa0;
}

.streamers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.streamer-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
}

.streamer-card__head {
    display: grid;
    gap: 4px;
}

.streamer-card__head strong {
    overflow: hidden;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.streamer-card__head span {
    justify-self: start;
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(240, 198, 116, .14);
    color: var(--modern-gold);
    font-size: 12px;
    font-weight: 950;
}

.streamer-card__title {
    display: -webkit-box;
    overflow: hidden;
    margin: -4px 0 0;
    color: rgba(238, 242, 255, .78);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.streamer-card__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.streamer-card__meta em {
    display: grid;
    gap: 3px;
    min-width: 0;
    font-style: normal;
}

.streamer-card__meta strong {
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.streamer-card__meta small {
    overflow: hidden;
    color: rgba(238, 242, 255, .46);
    font-size: 9px;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.streamers-empty {
    padding: 18px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .28);
}

.streamers-empty h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 16px;
}

.streamers-empty p {
    margin: 0;
    color: rgba(238, 242, 255, .62);
    font-size: 13px;
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 1180px;
    margin: 40px auto 24px;
    padding: 16px 18px 0;
    border-top: 1px solid rgba(238, 242, 255, .1);
    color: rgba(238, 242, 255, .5);
    font-size: 12px;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.site-footer__links a {
    color: rgba(238, 242, 255, .68);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--modern-gold);
}

/* Wiki sidebar: sections with their articles, instead of the news list's
   image tiles. */
.wiki-nav {
    display: block;
    padding: 14px 12px;
    overflow-y: auto;
}

.wiki-nav__section + .wiki-nav__section {
    margin-top: 16px;
}

.wiki-nav__heading {
    display: block;
    margin-bottom: 6px;
    color: var(--modern-gold);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wiki-nav__item {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: rgba(238, 242, 255, .74);
    font-size: 13px;
    text-decoration: none;
}

.wiki-nav__item:hover {
    background: rgba(238, 242, 255, .06);
    color: #fff;
}

.wiki-nav__item.active {
    background: rgba(240, 198, 116, .14);
    color: var(--modern-gold);
    font-weight: 900;
}

.wiki-updated {
    margin-top: 22px;
    color: rgba(238, 242, 255, .45);
    font-size: 12px;
}

.legal-page {
    display: grid;
    gap: 18px;
    max-width: 860px;
    margin: 0 auto;
}

.legal-updated {
    margin: 6px 0 0;
    color: rgba(238, 242, 255, .5);
    font-size: 12px;
}

.legal-body h2 {
    margin: 22px 0 8px;
    color: var(--modern-gold);
    font-size: 15px;
}

.legal-body h2:first-child {
    margin-top: 0;
}

.legal-body p,
.legal-body li {
    color: rgba(238, 242, 255, .78);
    font-size: 13px;
    line-height: 1.65;
}

.legal-body ul {
    margin: 8px 0;
    padding-left: 20px;
}

.donate-note {
    margin-top: 6px;
    color: rgba(238, 242, 255, .6);
    font-size: 12px;
}

/* Same note without the panel that used to wrap it. */
.donate-note--standalone {
    margin: 0 auto;
    text-align: center;
}

.donate-orders__table {
    width: 100%;
    border-collapse: collapse;
    color: rgba(238, 242, 255, .82);
    font-size: 13px;
}

.donate-orders__table td {
    padding: 8px 10px;
    border-top: 1px solid rgba(238, 242, 255, .1);
}

.donate-orders__table tr.is-paid td:nth-child(4) {
    color: #16dc6e;
    font-weight: 900;
}

.donate-orders__table tr.is-failed td:nth-child(4),
.donate-orders__table tr.is-cancelled td:nth-child(4) {
    color: #eb4b4b;
    font-weight: 900;
}

.donate-pack.is-popular {
    border-color: rgba(255, 128, 26, .48);
    background: linear-gradient(180deg, rgba(13, 48, 73, .94), rgba(27, 15, 5, .72));
}

.donate-pack__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 128, 26, .18);
    color: #ffb45c;
    font-size: 10px;
    font-weight: 950;
    line-height: 22px;
    text-transform: uppercase;
}

.donate-pack__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
}

.donate-pack__icon img {
    max-width: 72px;
    max-height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .42));
}

.donate-pack strong {
    color: var(--modern-gold);
    font-size: 30px;
    font-weight: 950;
    line-height: 1;
}

.donate-pack em {
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255, 128, 26, .16);
    color: #ffb45c;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
    line-height: 22px;
}

.donate-pack span {
    color: rgba(238, 242, 255, .76);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.donate-pack small {
    color: #fff;
    font-size: 16px;
    font-weight: 950;
}

.donate-payment {
    display: grid;
    grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.donate-payment h2,
.donate-faq h2 {
    margin: 5px 0 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.1;
    text-transform: uppercase;
}

.donate-payment p {
    margin: 10px 0 0;
    color: rgba(238, 242, 255, .74);
}

.donate-payment p a {
    color: var(--modern-gold);
    font-weight: 900;
}

.donate-payment__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.donate-payment__methods span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(93, 151, 217, .24);
    border-radius: 999px;
    background: rgba(9, 35, 58, .58);
    color: rgba(238, 242, 255, .86);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.donate-faq {
    display: grid;
    gap: 14px;
}

.donate-faq__list {
    display: grid;
    gap: 8px;
}

.donate-faq details {
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 8px;
    background: rgba(5, 23, 39, .58);
}

.donate-faq summary {
    padding: 14px 16px;
    color: rgba(238, 242, 255, .92);
    font-size: 14px;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

.donate-faq p {
    margin: 0;
    padding: 0 16px 16px;
    color: rgba(238, 242, 255, .7);
    font-size: 13px;
    line-height: 1.55;
}

.epic-shop-page {
    display: grid;
    gap: 18px;
    caret-color: transparent;
    cursor: default;
    user-select: none;
}

.epic-shop-head {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(8, 39, 63, .78), rgba(0, 0, 0, .52)),
        url("../images/main-bg.png") center 42% / cover no-repeat;
}

.epic-shop-head h1 {
    margin: 0;
    color: var(--modern-gold);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
    text-transform: uppercase;
}

.epic-shop-head p {
    max-width: 720px;
    margin: 0;
    color: rgba(238, 242, 255, .72);
    font-size: 18px;
    font-weight: 800;
}

.epic-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
    max-width: 920px;
    margin: 0 auto;
}

.epic-service {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
        "icon price"
        "title title"
        "desc desc"
        "controls controls";
    gap: 8px 14px;
    min-height: 182px;
    padding: 20px;
    border: 1px solid rgba(93, 151, 217, .28);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(7, 42, 68, .92), rgba(4, 24, 42, .92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 36px rgba(0, 0, 0, .28);
}

.epic-service__icon {
    grid-area: icon;
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(93, 151, 217, .36);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(47, 82, 148, .9), rgba(28, 50, 94, .9));
}

.epic-service__icon::before,
.epic-service__icon::after {
    content: '';
    position: absolute;
    display: block;
}

.epic-service__icon--hood::before {
    left: 18px;
    top: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50% 50% 42% 42%;
    border-top: 12px solid rgba(238, 242, 255, .58);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.epic-service__icon--hood::after {
    left: 29px;
    top: 42px;
    width: 22px;
    height: 8px;
    border-radius: 999px;
    background: rgba(238, 242, 255, .7);
    box-shadow: -14px -5px 0 -2px rgba(238, 242, 255, .7), 14px -5px 0 -2px rgba(238, 242, 255, .7);
}

.epic-service__icon--reset::before {
    inset: 17px;
    border: 7px solid rgba(238, 242, 255, .58);
    border-right-color: transparent;
    border-radius: 50%;
    transform: rotate(-26deg);
}

.epic-service__icon--reset::after {
    right: 18px;
    top: 13px;
    width: 0;
    height: 0;
    border-left: 13px solid rgba(238, 242, 255, .58);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    transform: rotate(28deg);
}

.epic-service__icon--class::before {
    left: 18px;
    top: 14px;
    width: 14px;
    height: 46px;
    border: 4px solid rgba(238, 242, 255, .58);
    border-radius: 999px 999px 5px 5px;
}

.epic-service__icon--class::after {
    right: 18px;
    top: 14px;
    width: 14px;
    height: 46px;
    border: 4px solid rgba(238, 242, 255, .58);
    border-radius: 999px 999px 5px 5px;
}

.epic-service__icon--name::before {
    left: 17px;
    top: 43px;
    width: 45px;
    height: 6px;
    border-radius: 999px;
    background: rgba(238, 242, 255, .62);
    transform: rotate(-24deg);
}

.epic-service__icon--name::after {
    right: 16px;
    top: 25px;
    width: 0;
    height: 0;
    border-left: 14px solid rgba(238, 242, 255, .62);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    transform: rotate(-24deg);
}

.epic-service__icon--change-name {
    background:
        linear-gradient(180deg, rgba(47, 82, 148, .55), rgba(28, 50, 94, .55)),
        url("../images/epic-shop/change-name.png") center / 72px 72px no-repeat;
}

.epic-service__icon--invisible {
    background:
        linear-gradient(180deg, rgba(47, 82, 148, .55), rgba(28, 50, 94, .55)),
        url("../images/epic-shop/invisible.png") center / 72px 72px no-repeat;
}

.epic-service__icon--reset-stats {
    background:
        linear-gradient(180deg, rgba(47, 82, 148, .55), rgba(28, 50, 94, .55)),
        url("../images/epic-shop/reset-stats.png") center / 72px 72px no-repeat;
}

.epic-service__icon--change-class {
    background:
        linear-gradient(180deg, rgba(47, 82, 148, .55), rgba(28, 50, 94, .55)),
        url("../images/epic-shop/change-class.png") center / 72px 72px no-repeat;
}

.epic-service__icon--invisible::before,
.epic-service__icon--invisible::after,
.epic-service__icon--reset-stats::before,
.epic-service__icon--reset-stats::after,
.epic-service__icon--change-class::before,
.epic-service__icon--change-class::after,
.epic-service__icon--change-name::before,
.epic-service__icon--change-name::after {
    display: none;
}

.epic-service__price {
    grid-area: price;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    color: #b7ffdf;
    font-size: 16px;
    font-weight: 950;
}

.epic-service__price span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.epic-service__price em {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(240, 198, 116, .12);
    color: var(--modern-gold);
    font-size: 11px;
    font-style: normal;
    text-transform: uppercase;
}

.epic-service h2 {
    grid-area: title;
    margin: 0;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    text-transform: uppercase;
}

.epic-service p {
    grid-area: desc;
    margin: 0;
    color: rgba(238, 242, 255, .68);
    font-size: 14px;
    font-weight: 800;
}

.epic-service__controls {
    grid-area: controls;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 48px;
}

.epic-service__controls select {
    min-height: 40px;
    padding: 0 34px 0 12px;
    border: 1px solid rgba(93, 151, 217, .32);
    border-radius: 8px;
    background: rgba(38, 66, 127, .84);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.epic-service__controls input[type="text"] {
    min-height: 40px;
    width: 130px;
    padding: 0 12px;
    border: 1px solid rgba(93, 151, 217, .32);
    border-radius: 8px;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.epic-service__controls input[type="text"]::placeholder {
    color: rgba(238, 242, 255, .48);
}

.epic-service__controls input[type="text"]:focus,
.epic-service__controls select:focus {
    outline: 2px solid rgba(240, 198, 116, .2);
    border-color: rgba(240, 198, 116, .58);
}

.epic-service__notice {
    max-width: 190px;
    color: rgba(238, 242, 255, .62);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.epic-service__add {
    position: relative;
    display: inline-flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.epic-service__add:disabled {
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: .45;
}

.epic-service__add {
    background: linear-gradient(180deg, #47dc67, #1dae44);
    box-shadow: 0 0 18px rgba(29, 174, 68, .38);
}

.epic-service__add::before,
.epic-service__add::after {
    content: '';
    position: absolute;
    left: 14px;
    top: 22px;
    width: 20px;
    height: 5px;
    border-radius: 999px;
    background: #fff;
}

.epic-service__add::after {
    transform: rotate(90deg);
}

.epic-item-shop {
    margin-top: 22px;
}

.epic-item-shop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--modern-gold);
    font-weight: 950;
    text-transform: uppercase;
}

.epic-item-shop__currency {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid rgba(93, 151, 217, .22);
    border-radius: 999px;
    background: rgba(4, 18, 30, .82);
}

.epic-item-shop__currency button {
    min-width: 112px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(238, 242, 255, .64);
    cursor: pointer;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.epic-item-shop__currency button.is-active {
    background: linear-gradient(180deg, #ff8b24, #f06a10);
    color: #fff;
    box-shadow: 0 0 14px rgba(240, 106, 16, .34);
}

.epic-item-shop__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.epic-item-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    min-height: 220px;
    padding: 18px 14px 16px;
    border: 1px solid rgba(93, 151, 217, .18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(20, 45, 74, .76), rgba(7, 18, 32, .88)),
        rgba(6, 27, 45, .72);
}

.epic-item-card__icon {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border: 3px solid rgba(230, 205, 171, .9);
    border-radius: 50%;
    background: #9a4d18;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .55);
}

.epic-item-card__icon img {
    max-width: 58px;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}

.epic-item-card h2 {
    min-height: 34px;
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.25;
    text-align: center;
}

.epic-item-card__prices {
    display: grid;
    gap: 6px;
    justify-items: center;
}

.epic-item-card__prices span {
    color: #b8ffd6;
    font-size: 13px;
    font-weight: 950;
}

.epic-item-card__prices em {
    display: inline-grid;
    place-items: center;
    margin-left: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(184, 255, 214, .18);
    color: #b8ffd6;
    font-size: 9px;
    font-style: normal;
}

.epic-item-card__unavailable {
    color: rgba(238, 242, 255, .46);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.epic-item-card.is-currency-unavailable {
    opacity: .58;
}

.epic-item-card__buy {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) 46px;
    gap: 8px;
    width: 100%;
    margin-top: auto;
}

.epic-item-qty {
    display: grid;
    grid-template-columns: 36px minmax(36px, 1fr) 36px;
    align-items: center;
    min-width: 0;
    height: 36px;
    border: 1px solid rgba(93, 151, 217, .24);
    border-radius: 8px;
    background: rgba(4, 18, 30, .72);
    overflow: hidden;
}

.epic-item-qty button {
    width: 36px;
    height: 36px;
    border: 0;
    background: linear-gradient(180deg, rgba(40, 123, 217, .94), rgba(20, 85, 170, .94));
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
}

.epic-item-qty button:hover,
.epic-item-qty button:focus-visible {
    background: linear-gradient(180deg, rgba(64, 151, 255, .96), rgba(25, 101, 201, .96));
}

.epic-item-qty span {
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    text-align: center;
}

.epic-shop-modal__card {
    width: min(470px, 100%);
}

.epic-shop-modal .auth-field select {
    min-height: 48px;
    width: 100%;
    padding: 0 14px;
    border: 1px solid rgba(93, 151, 217, .34);
    border-radius: 8px;
    background: rgba(0, 19, 35, .72);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.epic-shop-modal .auth-field select:focus {
    outline: 2px solid rgba(240, 198, 116, .2);
    border-color: rgba(240, 198, 116, .62);
}

.epic-shop-modal__price {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 28px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid rgba(240, 198, 116, .24);
    border-radius: 999px;
    background: rgba(240, 198, 116, .1);
    color: var(--modern-gold);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.epic-shop-modal__prices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.epic-shop-modal__prices span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(240, 198, 116, .24);
    border-radius: 999px;
    background: rgba(240, 198, 116, .1);
    color: var(--modern-gold);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.epic-shop-modal__notice {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(240, 198, 116, .22);
    border-radius: 8px;
    background: rgba(240, 198, 116, .08);
    color: rgba(238, 242, 255, .72);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.market-page {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

.market-svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.market-icon {
    display: inline-block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.market-icon--sprite {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: none;
    stroke-width: 0;
}

.market-icon-strip .market-icon--sprite {
    width: 21px;
    height: 21px;
}

.market-chip-row .market-icon--sprite {
    width: 18px;
    height: 18px;
}

.market-tabs {
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
}

.market-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 16px;
    border-radius: 999px;
    color: rgba(238, 242, 255, .62);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.market-tab.is-active,
.market-tab:hover {
    background: linear-gradient(180deg, #b826ff, #8200d8);
    color: #fff;
    box-shadow: 0 0 16px rgba(178, 38, 255, .5);
}

.market-filters {
    display: grid;
    gap: 9px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(12, 13, 20, .78);
}

.market-filter-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.2fr) auto auto;
    gap: 10px;
    align-items: center;
}

.market-search {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(238, 242, 255, .16);
    border-radius: 999px;
    background: rgba(4, 8, 14, .48);
}

.market-search span {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(238, 242, 255, .52);
    border-radius: 50%;
    box-shadow: 6px 6px 0 -4px rgba(238, 242, 255, .52);
}

.market-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-weight: 800;
}

.market-class-filter,
.market-icon-strip,
.market-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Every filter group lives in this one wrapping row, so the panel stays
   dense instead of leaving each row half empty. Groups marked --grow soak
   up the slack, the way the reference market does it. */
.market-extended {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    align-items: center;
    max-width: 100%;
}

/* One control height across the whole panel, the way the reference market
   uses a single --btn-sm-height for every group. */
.market-extended > .market-icon-strip,
.market-extended > .market-chip-row,
.market-extended > .market-rarity-row,
.market-extended > .market-level {
    height: 36px;
    min-height: 36px;
}

.market-chip-row--grow {
    flex: 1 1 auto;
}

.market-chip-row--grow > button {
    flex: 1 1 auto;
}

.market-icon-strip,
.market-chip-row,
.market-rarity-row {
    min-height: 36px;
    padding: 3px 8px;
    border: 1px solid rgba(238, 242, 255, .14);
    border-radius: 999px;
    background: rgba(4, 8, 14, .42);
}

.market-icon-strip {
    min-height: 34px;
    padding: 2px 8px;
    background: rgba(2, 6, 12, .66);
}

.market-icon-strip {
    gap: 0;
    width: fit-content;
    max-width: 100%;
}

.market-icon-strip button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 28px;
    border: 0;
    border-left: 1px solid rgba(238, 242, 255, .09);
    background: transparent;
    color: rgba(238, 242, 255, .52);
    cursor: pointer;
}

.market-icon-strip button:first-child {
    border-left: 0;
}

.market-icon-strip button.is-active,
.market-icon-strip button:hover {
    color: #fff;
}

.market-class-filter {
    justify-content: center;
    min-height: 36px;
    padding: 3px 8px;
    border: 1px solid rgba(238, 242, 255, .14);
    border-radius: 999px;
    background: rgba(4, 8, 14, .42);
}

.market-class-filter button,
.market-chip-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    border: 1px solid rgba(238, 242, 255, .12);
    border-radius: 999px;
    background: rgba(8, 31, 52, .48);
    color: rgba(238, 242, 255, .65);
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
}

.market-chip-row button {
    border-color: transparent;
    background: transparent;
}

.market-class-filter button {
    width: 46px;
    padding: 0;
}

.market-class-filter img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.market-chip-row button {
    padding: 0 14px;
}

.market-class-filter button.is-active,
.market-chip-row button.is-active,
.market-chip-row button:hover {
    border-color: rgba(178, 38, 255, .7);
    background: linear-gradient(180deg, #b826ff, #8200d8);
    color: #fff;
    box-shadow: 0 0 12px rgba(178, 38, 255, .32);
}

.market-chip-row--compact button {
    min-height: 28px;
    padding: 0 10px;
}

.market-option-set.is-hidden {
    display: none;
}

.market-chip-row--compact button .market-icon--sprite[viewBox="0 0 38 20"],
.market-chip-row--compact button .market-icon--sprite[viewBox="0 0 30 20"] {
    width: 30px;
    height: 16px;
}

.market-rarity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.market-rarity {
    min-height: 28px;
    padding: 0 12px;
    border: 0;
    border-left: 1px solid rgba(238, 242, 255, .1);
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
}

.market-rarity:first-child {
    border-left: 0;
}

/* Rank colours, shared with the tooltip's .item-tooltip__line--exc-* rules:
   Normal white, Uncommon green, Rare blue, Legendary gold, Epic purple.
   These are the ranks of the Excellent Rank System, not a separate palette. */
.market-rarity--normal {
    color: #dfe7f5;
}

.market-rarity--excellent {
    color: #35f685;
}

.market-rarity--uncommon {
    color: #16dc6e;
}

.market-rarity--rare {
    color: #24f2fc;
}

.market-rarity--legendary {
    color: #ffcc19;
}

.market-rarity--epic {
    color: #b266ff;
}

.market-level {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(238, 242, 255, .14);
    border-radius: 999px;
    background: rgba(238, 242, 255, .1);
    color: rgba(238, 242, 255, .7);
    font-size: 12px;
    font-weight: 950;
}

.market-level select {
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: inherit;
}

.market-level option {
    color: #111827;
}

.market-action,
.market-sell,
.market-view button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-weight: 950;
    text-transform: uppercase;
}

.market-action {
    padding: 0 18px;
}

.market-action--clear {
    background: linear-gradient(180deg, rgba(131, 67, 36, .95), rgba(87, 35, 16, .95));
}

.market-action--filter,
.market-sell {
    background: linear-gradient(180deg, #b826ff, #8200d8);
    box-shadow: 0 0 18px rgba(178, 38, 255, .42);
}

.market-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 52px;
}

.market-found,
.market-view {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.market-found > button:first-child,
.market-view button:not(.market-sort) {
    width: 38px;
    padding: 0;
    border-radius: 50%;
}

.market-found > button:first-child {
    background: linear-gradient(180deg, #b826ff, #8200d8);
}

.market-found span {
    color: #fff;
    font-size: 15px;
    font-weight: 950;
}

.market-found strong {
    color: var(--modern-gold);
}

.market-sell,
.market-sort {
    padding: 0 22px;
}

.market-view button {
    background: rgba(238, 242, 255, .1);
}

.market-view button.is-active {
    background: rgba(238, 242, 255, .18);
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 66px 22px;
    padding-top: 0;
    /* The resting (invisible) tooltip inside an edge card would otherwise
       stretch the page sideways. Clipping only the horizontal axis keeps the
       orb, which sits above its card, visible. On hover the script moves the
       tooltip to <body>, so it is not affected by this. */
    overflow-x: clip;
}

.market-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 220px;
    padding: 78px 12px 14px;
    border-radius: 8px;
    background: rgba(13, 20, 34, .86) var(--market-card-bg, url("../images/market/main.webp")) center / 100% 100% no-repeat;
    overflow: visible;
}

.market-card--normal {
    --market-card-bg: url("../images/market/gray.webp");
}

.market-card--excellent {
    --market-card-bg: url("../images/market/exe.webp");
}

.market-card--ancient {
    --market-card-bg: url("../images/market/yellow.webp");
}

.market-card--socket {
    --market-card-bg: url("../images/market/main.webp");
}


.market-card.is-filtered-out {
    display: none;
}

.market-extended.is-hidden {
    display: none;
}


.market-grid--list {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-top: 14px;
}

.market-grid--list .market-card {
    grid-template-columns: 74px minmax(0, 1fr) auto auto;
    align-items: center;
    justify-items: start;
    gap: 20px;
    min-height: 0;
    padding: 14px 20px;
    background-size: cover;
}

.market-grid--list .market-card__orb {
    position: static;
    width: 66px;
    height: 66px;
    transform: none;
}

.market-grid--list .market-card__orb img {
    max-width: 42px;
    max-height: 42px;
}

.market-grid--list .market-card h2 {
    min-height: 0;
    text-align: left;
}

.market-grid--list .market-card__divider {
    display: none;
}

.market-grid--list .market-card__actions {
    margin-top: 0;
}

.market-card__orb {
    position: absolute;
    top: -44px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    transform: translateX(-50%);
    border: 4px solid #050608;
    border-radius: 50%;
    background: linear-gradient(180deg, #d9d9d9, #9e9e9e);
    box-shadow: 0 0 0 3px rgba(238, 242, 255, .72);
}

.market-card__orb img {
    max-width: 58px;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .54));
}

/* Clamped to two lines: a long name would otherwise make its card taller than
   the rest of the row and knock the prices out of line. */
.market-card h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 36px;
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.25;
    text-align: center;
}

/* Item names keep their in-game colour. The values come from the client's own
   palette (SRCMainGS/.../CBInterface.h: eExcellent, eAncient, eSocket), not
   from the rarity ladder - rarity only drives the filter. */
.market-card h2,
.market-card--normal h2 {
    color: #fff;
    text-shadow: 0 0 2px currentColor;
}

.market-card--excellent h2 {
    color: #00e18b;
}

.market-card--ancient h2 {
    color: #01df77;
}

.market-card--socket h2 {
    color: #9966cc;
}

.market-card--ancient .market-card__orb {
    background: linear-gradient(180deg, #f5ec99, #9a6f1e);
}

.market-card--excellent .market-card__orb {
    background: linear-gradient(180deg, #b8e0a4, #63874d);
}

.market-card--socket .market-card__orb {
    background: linear-gradient(180deg, #c28ce6, #6d3d8f);
}

.market-card__divider {
    width: 100%;
    height: 1px;
    background: rgba(238, 242, 255, .13);
}

/* Option badges on the card. Each option keeps the colour it is recognised by
   in game, so a card can be read at a glance without opening the tooltip. */
/* Reserved even when an item has no options, so every card keeps the same
   rows and the price and buy button stay on one line across the grid. */
.market-card__opts {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 5px;
    justify-content: center;
    height: 45px;
    overflow: hidden;
}

.market-opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    padding: 0 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: rgba(4, 8, 14, .55);
    color: #b0c3d9;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .02em;
}

.market-opt .market-icon--sprite {
    width: 11px;
    height: 11px;
}

.market-opt--luck {
    color: #80b2ff;
}

.market-opt--skill {
    color: #24f2fc;
}

.market-opt--anc {
    color: #01df77;
}

.market-opt--hrm,
.market-opt--zen,
.market-opt--dmgl {
    color: #ffcc19;
}

.market-opt--exe,
.market-opt--aspd,
.market-opt--ag {
    color: #00e18b;
}

.market-opt--mh,
.market-opt--hp,
.market-opt--rhp {
    color: #ff6b6b;
}

.market-opt--mana,
.market-opt--rmp {
    color: #4aa3ff;
}

.market-opt--ref,
.market-opt--ignor {
    color: #b266ff;
}

.market-opt--dsr,
.market-opt--dmg,
.market-opt--arr {
    color: #ff8c00;
}

/* Room for two lines, fixed: a five-jewel basket wraps instead of spilling out
   of the card, and a plain Zen price still leaves every card the same height. */
.market-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 4px 7px;
    height: 50px;
    overflow: hidden;
}

.market-card__price span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(184, 255, 214, .14);
    color: rgba(238, 242, 255, .82);
    font-size: 10px;
    font-weight: 950;
}

.market-card__price strong {
    color: var(--modern-gold);
}

.market-card__foot {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
}

.market-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* A jewel price is several counts at once: each is its own icon plus number,
   sitting on one line the way the game shows a jewel stack. */
.market-price-jewel {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: rgba(238, 242, 255, .82);
    font-size: 10px;
    font-weight: 950;
    white-space: nowrap;
}

.market-price-jewel img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.market-price-jewel strong {
    color: var(--modern-gold);
}

.market-sell-jewels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 6px;
    width: 100%;
}

.market-sell-jewels.is-hidden,
.market-sell-form [data-market-price-field].is-hidden {
    display: none;
}

.market-sell-jewel {
    display: grid;
    gap: 3px;
    color: rgba(238, 242, 255, .7);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.market-card__actions form {
    margin: 0;
}

.market-card__actions button,
.market-card__actions a {
    display: inline-grid;
    place-items: center;
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.market-card__actions form button,
.market-card__actions > button:first-child,
.market-card__actions a {
    padding: 0 16px;
    background: #fff;
    color: #1b2330;
}

.market-card__actions button:disabled {
    cursor: default;
    opacity: .55;
}

.market-card__orb:hover .item-tooltip,
.market-card__orb:focus .item-tooltip,
.market-sell-card__icon:hover .item-tooltip,
.market-sell-card__icon:focus .item-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.market-empty {
    display: grid;
    min-height: 120px;
    place-items: center;
    color: rgba(238, 242, 255, .68);
    font-size: 15px;
    font-weight: 900;
    text-align: center;
}

.market-empty--filtered {
    margin-top: 18px;
}

/* An explicit display beats the hidden attribute's UA rule, so the JS toggling
   [hidden] on this panel needs this to actually hide it. */
.market-empty[hidden] {
    display: none;
}

.market-panel {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.market-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.market-panel__head h2 {
    margin: 0;
    color: var(--modern-gold);
    font-size: 18px;
    font-weight: 950;
    text-transform: uppercase;
}

.market-panel__head span {
    color: rgba(238, 242, 255, .56);
    font-size: 12px;
    font-weight: 900;
}

.market-sell-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.market-sell-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(73, 164, 225, .28);
    border-radius: 8px;
    background: rgba(5, 24, 38, .74);
}

.market-sell-card.is-selected {
    border-color: rgba(246, 213, 129, .72);
    box-shadow: 0 0 0 1px rgba(246, 213, 129, .16), 0 0 28px rgba(246, 166, 40, .18);
}

.market-sell-card__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 8px;
    background: rgba(6, 25, 39, .95);
}

.market-sell-card__icon img {
    max-width: 62px;
    max-height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
}

.market-sell-card h3 {
    min-height: 34px;
    margin: 0;
    color: rgba(238, 242, 255, .94);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.25;
    text-align: center;
}

.market-sell-form {
    display: grid;
    width: 100%;
    gap: 8px;
}

.market-sell-form input,
.market-sell-form select {
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(240, 198, 116, .28);
    border-radius: 6px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-weight: 850;
}

.market-sell-form button,
.market-table__row button {
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #f6d581, #c99027);
    color: #120d05;
    cursor: pointer;
    font-weight: 950;
    text-transform: uppercase;
}

.market-table {
    display: grid;
    gap: 8px;
}

.market-table__row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 160px 110px 130px 100px;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid rgba(73, 164, 225, .18);
    border-radius: 8px;
    background: rgba(5, 24, 38, .62);
}

.market-table__row--history {
    grid-template-columns: minmax(180px, 1fr) 120px 160px 180px 130px;
}

.market-table__row strong {
    color: #fff;
    font-size: 13px;
}

.market-table__row span {
    color: rgba(238, 242, 255, .72);
    font-size: 12px;
    font-weight: 850;
}

.market-table__row form {
    margin: 0;
}

@media (max-width: 1120px) {
    .modern-body {
        background-position: center top, center 76px, center top;
        background-size: auto, auto 100vh, auto;
    }

    .top-shell {
        grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(150px, 240px);
        position: static;
    }

    .header-logo img {
        width: 168px;
        min-width: 0;
    }

    .header-brand {
        gap: 6px;
    }

    .header-online {
        font-size: 9px;
    }

    .header-online strong {
        font-size: 11px;
    }

    .top-nav.nav-icons {
        gap: 5px;
    }

    .top-nav.nav-icons a,
    .top-nav.nav-icons .nav-dropdown {
        flex-basis: 68px;
        width: 68px;
    }

    .top-nav.nav-icons a,
    .top-nav.nav-icons .nav-dropdown > a {
        height: 66px;
    }

    .top-nav.nav-icons img {
        max-height: 46px;
    }

    .utility-nav.utility-icons a {
        flex-basis: 54px;
        width: 54px;
        min-height: 64px;
    }

    .utility-nav.utility-icons.guest-utility a,
    .utility-nav.utility-icons.guest-utility .nav-dropdown {
        flex-basis: 68px;
        width: 68px;
    }

    .top-status {
        grid-template-columns: auto 1fr auto;
    }

    .top-nav {
        justify-content: center;
        overflow: visible;
    }

    .utility-nav {
        justify-content: flex-end;
        overflow: visible;
    }

    .epic-item-shop__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .market-filter-row {
        grid-template-columns: 1fr;
    }

    .market-class-filter {
        justify-content: flex-start;
    }

    .market-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .modern-body {
        background-position: center top, center 112px, center top;
        background-size: auto, auto 100vh, auto;
    }

    .top-shell {
        grid-template-columns: minmax(150px, 1fr) auto;
        row-gap: 0;
    }

    .header-brand {
        grid-column: 1;
        grid-row: 1;
    }

    .utility-nav {
        grid-column: 2;
        grid-row: 1;
    }

    .top-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        width: 100%;
    }

    .top-nav.nav-icons {
        min-height: 64px;
        justify-content: center;
        padding-bottom: 2px;
    }

    .news-layout {
        grid-template-columns: 1fr;
    }

    .news-list {
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 280px);
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .news-article__hero {
        min-height: 220px;
    }

    .download-mirrors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .donate-packages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .streamers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-streambox {
        max-width: calc(100vw - 16px);
    }

    .streamers-rule-grid {
        grid-template-columns: 1fr;
    }

    .epic-shop-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .donate-payment {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .modern-body {
        background-position: center top, 42% 92px, center top;
        background-size: auto, auto 100vh, auto;
    }

    .modern-body::after {
        background:
            linear-gradient(90deg, rgba(0, 0, 0, .38), transparent 22%, transparent 78%, rgba(0, 0, 0, .38)),
            linear-gradient(180deg, rgba(0, 0, 0, .04), transparent 40%, rgba(0, 0, 0, .56));
    }

    .header-logo img {
        width: 140px;
    }

    .header-online {
        display: none;
    }

    .top-nav.nav-icons {
        gap: 3px;
    }

    .top-nav.nav-icons a,
    .top-nav.nav-icons .nav-dropdown {
        flex-basis: 58px;
        width: 58px;
    }

    .epic-item-shop__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-tabs,
    .market-toolbar {
        justify-content: flex-start;
    }

    .market-toolbar {
        align-items: stretch;
        flex-direction: column;
        margin-bottom: 52px;
    }

    .market-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-nav.nav-icons a,
    .top-nav.nav-icons .nav-dropdown > a {
        height: 58px;
    }

    .top-nav.nav-icons img {
        max-height: 38px;
    }

    .top-nav.nav-icons span,
    .utility-nav.utility-icons span {
        font-size: 8px;
    }
}

@media (max-width: 620px) {
    .page-shell {
        width: min(100% - 16px, 620px);
    }

    .top-shell {
        align-items: center;
        padding-inline: 8px;
    }

    .modern-body.is-user .top-shell {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0;
        padding: 6px 8px 4px;
        overflow: hidden;
    }

    .modern-body.is-user .header-brand {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        justify-content: center;
        width: 100%;
    }

    .modern-body.is-user .header-logo img {
        width: 150px;
        min-width: 0;
    }

    .modern-body.is-user .utility-nav {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        justify-content: center;
        width: 100%;
        min-height: 50px;
        padding: 0;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .modern-body.is-user .top-nav {
        grid-column: 1;
        grid-row: 3;
        justify-self: stretch;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        padding: 0 2px 2px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .modern-body.is-user .utility-nav::-webkit-scrollbar,
    .modern-body.is-user .top-nav::-webkit-scrollbar {
        display: none;
    }

    .modern-body.is-user .top-nav.nav-icons {
        min-height: 58px;
        gap: 4px;
    }

    .modern-body.is-user .top-nav.nav-icons a[href="/downloads"] {
        display: none;
    }

    .modern-body.is-user .top-nav.nav-icons::before,
    .modern-body.is-user .top-nav.nav-icons::after {
        content: "";
        flex: 0 0 2px;
    }

    .modern-body.is-user .top-nav.nav-icons a,
    .modern-body.is-user .top-nav.nav-icons .nav-dropdown {
        flex: 0 0 54px;
        width: 54px;
    }

    .modern-body.is-user .top-nav.nav-icons a,
    .modern-body.is-user .top-nav.nav-icons .nav-dropdown > a {
        height: 54px;
    }

    .modern-body.is-user .top-nav.nav-icons img {
        max-height: 34px;
    }

    .modern-body.is-user .utility-nav.utility-icons {
        min-height: 50px;
        gap: 8px;
    }

    .modern-body.is-user .utility-nav.utility-icons a,
    .modern-body.is-user .utility-nav.utility-icons .nav-dropdown {
        flex: 0 0 48px;
        width: 48px;
    }

    .modern-body.is-user .utility-nav.utility-icons a,
    .modern-body.is-user .utility-nav.utility-icons .nav-dropdown > a {
        min-height: 48px;
    }

    .modern-body.is-user .utility-nav.utility-icons img {
        max-height: 30px;
    }

    .modern-body.is-user .top-nav.nav-icons span,
    .modern-body.is-user .utility-nav.utility-icons span {
        font-size: 8px;
        line-height: 1;
    }

    .is-guest .top-shell {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
    }

    .is-guest .header-brand {
        display: flex;
        gap: 6px;
    }

    .is-guest .header-logo img {
        width: 112px;
        min-width: 0;
    }

    .is-guest .header-online {
        display: none;
    }

    .is-guest .top-status,
    .is-guest .top-nav {
        display: none;
    }

    .is-guest .utility-nav {
        grid-column: 2;
        justify-content: flex-end;
        min-height: 58px;
        padding: 0;
    }

    .modern-body.is-guest {
        background-position: center top, 46% 64px, center top;
        background-size: auto, auto 100vh, auto;
    }

    .top-status {
        grid-template-columns: 1fr auto;
    }

    .top-status span {
        grid-column: 1 / -1;
    }

    .top-nav:not(.nav-icons) a,
    .utility-nav a {
        font-size: 11px;
        padding-inline: 8px;
    }

    .top-nav.nav-icons {
        min-height: 68px;
    }

    .top-nav.nav-icons a,
    .top-nav.nav-icons .nav-dropdown {
        flex-basis: 70px;
        width: 70px;
    }

    .top-nav.nav-icons a,
    .top-nav.nav-icons .nav-dropdown > a {
        height: 64px;
    }

    .top-nav.nav-icons img {
        max-height: 44px;
    }

    .utility-nav.utility-icons a {
        flex-basis: 56px;
        width: 56px;
        min-height: 62px;
    }

    .utility-nav.utility-icons.guest-utility a,
    .utility-nav.utility-icons.guest-utility .nav-dropdown {
        flex-basis: 58px;
        width: 58px;
    }

    .utility-nav.utility-icons.guest-utility a {
        min-height: 58px;
    }

    .utility-nav.utility-icons.guest-utility span {
        min-height: 18px;
    }

    .utility-nav.utility-icons img {
        max-height: 34px;
    }

    .top-nav.nav-icons span,
    .utility-nav.utility-icons span {
        font-size: 9px;
    }

    .news-layout {
        gap: 10px;
    }

    .news-list {
        grid-auto-columns: minmax(190px, 230px);
        padding: 8px;
    }

    .news-list__item,
    .news-list__content {
        min-height: 92px;
    }

    .news-article__hero {
        min-height: 170px;
    }

    .news-article__body {
        padding: 16px;
    }

    .news-lead {
        font-size: 15px;
    }

    .download-mirrors,
    .donate-packages,
    .streamers-stats,
    .streamers-grid,
    .requirements-grid {
        grid-template-columns: 1fr;
    }

    .home-streambox {
        position: relative;
        width: 100%;
        max-width: 304px;
        justify-self: end;
    }

    .epic-item-shop__grid {
        grid-template-columns: 1fr;
    }

    .market-filters {
        padding: 12px;
    }

    .market-chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .market-chip-row::-webkit-scrollbar {
        display: none;
    }

    .market-grid {
        grid-template-columns: 1fr;
    }

    .epic-service {
        grid-template-columns: 74px minmax(0, 1fr);
        padding: 16px;
    }

    .epic-service__icon {
        width: 64px;
        height: 64px;
    }

    .epic-service h2 {
        font-size: 22px;
    }

    .epic-service__controls {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .download-mirror {
        min-height: 82px;
    }

    .requirement-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-metrics {
        grid-template-columns: 1fr;
    }

    .admin-logs-grid {
        grid-template-columns: 1fr;
    }

    .admin-peak-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .admin-peak-grid {
        border-radius: 12px;
    }

    .admin-zen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-zen-grid span:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(238, 242, 255, .1);
    }

    .admin-zen-grid span:nth-child(4) {
        border-top: 1px solid rgba(238, 242, 255, .1);
    }

    .admin-mini-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .admin-mini-row time {
        justify-self: start;
    }

    .admin-log-row,
    .admin-log-row--three,
    .admin-log-row--four,
    .admin-log-row--bank,
    .admin-log-row--bank-detail,
    .admin-log-row--coin,
    .admin-log-row--coin-compact,
    .admin-log-row--admin,
    .admin-log-row--admin-compact,
    .admin-log-row--player,
    .admin-log-row--player-compact,
    .admin-log-row--warehouse,
    .admin-log-row--castle-siege,
    .admin-log-row--castle-siege-compact {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .admin-log-row time {
        justify-self: start;
    }

    .admin-stat-jewel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-stat-table__head {
        display: none;
    }

    .admin-stat-table--coins .admin-stat-table__row,
    .admin-stat-table--zen .admin-stat-table__row,
    .admin-stat-table--daily .admin-stat-table__row {
        grid-template-columns: 1fr;
        gap: 4px;
        border-radius: 12px;
    }

    .modern-body.is-user .top-nav.nav-icons {
        min-height: 58px;
        gap: 4px;
    }

    .modern-body.is-user .top-nav.nav-icons a[href="/downloads"] {
        display: none;
    }

    .modern-body.is-user .top-nav.nav-icons a,
    .modern-body.is-user .top-nav.nav-icons .nav-dropdown {
        flex: 0 0 54px;
        width: 54px;
    }

    .modern-body.is-user .top-nav.nav-icons a,
    .modern-body.is-user .top-nav.nav-icons .nav-dropdown > a {
        height: 54px;
    }

    .modern-body.is-user .top-nav.nav-icons img {
        max-height: 34px;
    }

    .modern-body.is-user .utility-nav.utility-icons a,
    .modern-body.is-user .utility-nav.utility-icons .nav-dropdown {
        flex: 0 0 48px;
        width: 48px;
    }

    .modern-body.is-user .utility-nav.utility-icons a,
    .modern-body.is-user .utility-nav.utility-icons .nav-dropdown > a {
        min-height: 48px;
    }

    .modern-body.is-user .utility-nav.utility-icons img {
        max-height: 30px;
    }

    .modern-body.is-user .top-nav.nav-icons span,
    .modern-body.is-user .utility-nav.utility-icons span {
        font-size: 8px;
        line-height: 1;
    }

    .admin-character-resources__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-character-resources__jewels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-character-resources__form {
        grid-template-columns: 1fr;
    }

    .admin-character-resources__form .admin-button {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .modern-body {
        background-position: center top, 49% 62px, center top;
        background-size: auto, auto 100vh, auto;
    }

    .modern-body::after {
        background:
            linear-gradient(90deg, rgba(0, 0, 0, .46), transparent 26%, transparent 74%, rgba(0, 0, 0, .46)),
            linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 34%, rgba(0, 0, 0, .62));
    }
}

/* Castle Siege */

.siege-page {
    display: grid;
    gap: 22px;
}

.siege-hero {
    position: relative;
    display: grid;
    justify-items: start;
    gap: 12px;
    min-height: 220px;
    align-content: center;
    padding: 0 34px;
    border: 1px solid rgba(240, 198, 116, .26);
    border-radius: 12px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(20, 6, 6, .58)),
        url("../images/main-bg.png") center 42% / cover no-repeat;
}

.siege-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .55));
    pointer-events: none;
}

.siege-hero__kicker {
    position: relative;
    color: var(--modern-gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.siege-hero h1 {
    position: relative;
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
    text-transform: uppercase;
}

.siege-hero p {
    position: relative;
    max-width: 760px;
    margin: 0;
    color: rgba(238, 242, 255, .76);
    font-size: 15px;
    line-height: 1.55;
}

.siege-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 18px;
}

@media (max-width: 860px) {
    .siege-grid {
        grid-template-columns: 1fr;
    }
}

.siege-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px;
    border: 1px solid rgba(240, 198, 116, .22);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(10, 32, 52, .76), rgba(0, 0, 0, .5));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .4);
}

.siege-card__crown {
    width: 34px;
    height: 34px;
    fill: var(--modern-gold);
    opacity: .9;
}

.siege-card__label {
    color: rgba(238, 242, 255, .58);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.siege-card__value {
    color: #fff;
    font-size: 26px;
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
}

.siege-card__hint {
    color: rgba(238, 242, 255, .58);
    font-size: 12px;
}

.siege-taxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.siege-taxes div {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 6px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .28);
}

.siege-taxes strong {
    color: var(--modern-gold);
    font-size: 17px;
    font-weight: 950;
}

.siege-taxes span {
    color: rgba(238, 242, 255, .55);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.siege-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.siege-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.siege-badge--open {
    background: rgba(0, 212, 106, .18);
    color: var(--modern-green);
}

.siege-badge--closed {
    background: rgba(255, 91, 91, .16);
    color: var(--modern-red);
}

.siege-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    overflow: hidden;
}

.siege-progress__bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f8d37a, #d6942c);
}

.siege-register {
    display: grid;
    gap: 10px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(240, 198, 116, .16);
}

.siege-your-guild {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(238, 242, 255, .7);
    font-size: 12px;
    text-transform: uppercase;
}

.siege-your-guild strong {
    color: var(--modern-gold);
    font-size: 14px;
}

.siege-note {
    margin: 0;
    color: rgba(238, 242, 255, .68);
    font-size: 13px;
}

.siege-note--success {
    color: var(--modern-green);
}

.siege-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8d37a, #d6942c);
    color: #120d05;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.siege-cta:disabled {
    background: rgba(238, 242, 255, .12);
    color: rgba(238, 242, 255, .38);
    cursor: not-allowed;
}

.siege-card--treasury {
    gap: 14px;
}

.siege-treasury {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 860px) {
    .siege-treasury {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .siege-treasury {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.siege-treasury__item {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 12px 6px;
    border: 1px solid rgba(240, 198, 116, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .28);
}

.siege-treasury__item img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.siege-treasury__item strong {
    color: var(--modern-gold);
    font-size: 14px;
    font-weight: 950;
}

.siege-treasury__item span {
    color: rgba(238, 242, 255, .55);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}

.siege-leaderboard {
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid rgba(240, 198, 116, .2);
    border-radius: 12px;
    background: rgba(6, 7, 10, .5);
}

.siege-section-head {
    display: grid;
    gap: 4px;
}

.siege-section-head h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
}

.siege-empty {
    margin: 0;
    color: rgba(238, 242, 255, .58);
    font-size: 13px;
}

.siege-leaderboard__head,
.siege-leaderboard__row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1fr) 90px 90px;
    align-items: center;
    gap: 10px;
}

.siege-leaderboard__head--history,
.siege-leaderboard__row--history {
    grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
}

.siege-leaderboard__head {
    padding: 0 14px;
    color: rgba(238, 242, 255, .48);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.siege-leaderboard__list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.siege-leaderboard__row {
    padding: 12px 14px;
    border: 1px solid rgba(240, 198, 116, .12);
    border-radius: 8px;
    background: rgba(0, 0, 0, .28);
    color: rgba(238, 242, 255, .82);
    font-size: 13px;
}

.siege-leaderboard__row--top {
    border-color: rgba(240, 198, 116, .38);
    background: linear-gradient(90deg, rgba(240, 198, 116, .1), rgba(0, 0, 0, .28));
}

.siege-rank {
    color: rgba(238, 242, 255, .5);
    font-weight: 950;
}

.siege-rank--1 { color: #ffd76a; }
.siege-rank--2 { color: #d9dde6; }
.siege-rank--3 { color: #d99a5a; }

.siege-guild {
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
}

.siege-score {
    color: var(--modern-gold);
    font-weight: 950;
}

@media (max-width: 640px) {
    .siege-leaderboard__head {
        display: none;
    }

    .siege-leaderboard__row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas:
            "rank guild score"
            "rank master members";
        row-gap: 4px;
    }

    .siege-leaderboard__head--history {
        display: none;
    }

    .siege-leaderboard__row--history {
        grid-template-columns: 1fr;
        grid-template-areas: none;
        row-gap: 4px;
    }
}

.admin-wave-event-grant {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-wave-event-grant input[type="number"] {
    width: 120px;
}

/* Chaos Machine ---------------------------------------------------------- */

.chaos-page {
    display: grid;
    gap: 18px;
}

.chaos-head {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px 30px;
    /* The artwork carries its own dark left side, and the gradient on top of it
       keeps the copy readable wherever the image happens to be bright. */
    background:
        linear-gradient(90deg, rgba(3, 12, 22, .94) 0%, rgba(3, 12, 22, .82) 46%, rgba(3, 12, 22, .38) 100%),
        url("../images/chaos-machine/head-bg.webp") center 62% / cover no-repeat,
        #05131f;
}

.chaos-head h1 {
    margin: 0;
    color: var(--modern-gold);
    font-size: 26px;
    font-weight: 950;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

.chaos-head__text {
    max-width: 760px;
}

.chaos-head__lead {
    margin: 6px 0 0;
    color: rgba(238, 242, 255, .92);
    font-size: 15px;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

.chaos-head__body {
    margin: 10px 0 0;
    color: rgba(238, 242, 255, .68);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

.chaos-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.chaos-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(73, 164, 225, .24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(10, 32, 51, .9), rgba(5, 20, 34, .92));
}

.chaos-feature__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5));
}

.chaos-feature h2 {
    margin: 0;
    color: var(--modern-gold);
    font-size: 14px;
    font-weight: 950;
    text-transform: uppercase;
}

.chaos-feature p {
    margin: 5px 0 0;
    color: rgba(238, 242, 255, .68);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}
.chaos-balances {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chaos-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(73, 164, 225, .28);
    border-radius: 8px;
    background: rgba(5, 24, 38, .74);
    color: rgba(238, 242, 255, .94);
    font-size: 13px;
    font-weight: 900;
}

.chaos-balance img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.chaos-balance.is-empty {
    opacity: .45;
}

.chaos-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.chaos-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.chaos-panel__head h2 {
    margin: 0;
    color: var(--modern-gold);
    font-size: 18px;
    font-weight: 950;
    text-transform: uppercase;
}


.chaos-empty {
    padding: 26px;
    border: 1px dashed rgba(73, 164, 225, .28);
    border-radius: 8px;
    color: rgba(238, 242, 255, .6);
    font-weight: 850;
    text-align: center;
}

.chaos-bank {
    /* Same cell size the account bank page uses, so the two grids read as the
       same object rather than as two different inventories. */
    --bank-cell: clamp(28px, 2.45vw, 34px);
    display: grid;
    justify-items: center;
    gap: 14px;
}

.chaos-bank__grid {
    align-self: start;
}

.chaos-bank__item {
    border-radius: 6px;
    text-decoration: none;
}

/* Items the machine can work on are the only ones that look clickable. */
.chaos-bank__item.is-upgradable {
    cursor: pointer;
    background: rgba(240, 198, 116, .1);
    box-shadow: 0 0 0 1px rgba(240, 198, 116, .55), 0 0 16px rgba(246, 166, 40, .16);
}

.chaos-bank__item.is-upgradable:hover,
.chaos-bank__item.is-upgradable:focus {
    background: rgba(240, 198, 116, .2);
    box-shadow: 0 0 0 1px rgba(246, 213, 129, .95), 0 0 22px rgba(246, 166, 40, .34);
}

.chaos-bank__item.is-locked {
    cursor: help;
}

.chaos-bank__item.is-locked img {
    opacity: .38;
    filter: grayscale(.55) drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
}

/* The level a mix would produce, tucked into the item's own corner. */
.chaos-bank__step {
    position: absolute;
    right: 1px;
    bottom: 1px;
    z-index: 3;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(6, 25, 39, .92);
    color: var(--modern-gold);
    font-size: 10px;
    font-weight: 950;
    line-height: 15px;
    pointer-events: none;
}


.chaos-tooltip__note.is-good {
    color: var(--modern-gold);
}

.chaos-tooltip__note {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #ffb45c;
}


/* Confirm dialog ---------------------------------------------------------- */

.chaos-modal__card {
    /* The dialog can be taller than a short window, so it is capped at the
       viewport and scrolls inside instead of spilling off both ends. */
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(470px, 100%);
    max-height: calc(100vh - 36px);
    gap: 16px;
}

.chaos-modal__body {
    display: grid;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chaos-modal__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(73, 164, 225, .28);
    border-radius: 8px;
    background: rgba(5, 24, 38, .74);
}

.chaos-modal__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: rgba(6, 25, 39, .95);
}

.chaos-modal__icon img {
    max-width: 58px;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
}

.chaos-modal__step {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.chaos-modal__level {
    color: rgba(238, 242, 255, .78);
    font-size: 18px;
    font-weight: 950;
}

.chaos-modal__level--next {
    color: var(--modern-gold);
}

.chaos-modal__arrow {
    color: rgba(238, 242, 255, .4);
}


.chaos-modal__step .chaos-modal__level {
    font-size: 18px;
}

.chaos-modal__chance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    color: rgba(238, 242, 255, .6);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.chaos-modal__chance strong {
    color: var(--modern-gold);
    font-size: 14px;
    font-weight: 950;
}

.chaos-modal__prices {
    display: grid;
    gap: 8px;
}

.chaos-modal__prices-title {
    color: rgba(238, 242, 255, .56);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.chaos-modal__price-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 10px;
    border: 1px solid rgba(73, 164, 225, .22);
    border-radius: 8px;
    background: rgba(5, 24, 38, .6);
}

.chaos-modal__price-row img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.chaos-modal__price-label {
    color: rgba(238, 242, 255, .88);
    font-size: 13px;
    font-weight: 900;
}

.chaos-modal__price-amount {
    color: var(--modern-gold);
    font-size: 15px;
    font-weight: 950;
}

.chaos-modal__price-have {
    grid-column: 2 / -1;
    color: rgba(238, 242, 255, .48);
    font-size: 11px;
    font-weight: 850;
}

.chaos-modal__price-row.is-short {
    border-color: rgba(255, 107, 107, .46);
    background: rgba(255, 107, 107, .1);
}

.chaos-modal__price-row.is-short .chaos-modal__price-amount,
.chaos-modal__price-row.is-short .chaos-modal__price-have {
    color: #ff9b9b;
}

.chaos-modal .auth-submit[disabled] {
    background: rgba(255, 255, 255, .12);
    color: rgba(238, 242, 255, .5);
    cursor: not-allowed;
}
.chaos-rates-wrap {
    overflow-x: auto;
}

.chaos-rates {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.chaos-rates th,
.chaos-rates td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(73, 164, 225, .16);
    color: rgba(238, 242, 255, .82);
    font-weight: 850;
    text-align: left;
    white-space: nowrap;
}

.chaos-rates th {
    color: var(--modern-gold);
    font-size: 12px;
    text-transform: uppercase;
}

.chaos-rates tr:last-child td {
    border-bottom: 0;
}


.admin-chaos-table input {
    width: 110px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(240, 198, 116, .28);
    border-radius: 6px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-weight: 850;
}




@media (max-width: 560px) {
    .chaos-features {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Dropdown rows must not inherit the nav-icon tile sizing.
   `.top-nav.nav-icons a` / `.utility-nav.utility-icons a` (and the copies of
   those rules inside every breakpoint) also match the anchors *inside* the
   dropdown panels, so the language rows came out 54-82px wide and 58-72px tall
   and sat left-aligned in a 112px panel. Same story for the panel icons: the
   `.top-nav.nav-icons img` sizing outranks the per-menu `img` rules, so each
   icon kept its own aspect ratio instead of a shared box. This block sits at
   the end of the file so it also wins over the media queries above. */
.top-nav.nav-icons .nav-dropdown__menu a,
.utility-nav.utility-icons .nav-dropdown__menu a {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 28px;
    height: auto;
    filter: none;
    transform: none;
}

.utility-nav.utility-icons .language-dropdown__menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0;
    min-height: 34px;
    padding: 5px 9px;
    text-align: center;
}

.utility-nav.utility-icons .language-dropdown__menu a:hover,
.utility-nav.utility-icons .language-dropdown__menu a:focus {
    color: #1a1208;
    background: linear-gradient(180deg, #f3d28a, #c48b31);
    filter: none;
    transform: none;
}

.utility-nav.utility-icons .language-dropdown__menu a.active {
    color: #ff9f2e;
    background: rgba(255, 159, 46, .08);
}

.top-nav.nav-icons .account-dropdown__menu a {
    justify-content: flex-start;
    flex-direction: row;
    gap: 12px;
    min-height: 64px;
    padding: 10px 14px;
    text-align: left;
}

.top-nav.nav-icons .donate-dropdown__menu a {
    min-height: 66px;
    padding: 9px 14px;
    text-align: left;
}

.top-nav.nav-icons .account-dropdown__menu img {
    align-self: center;
    width: 44px;
    max-width: 44px;
    height: 44px;
    max-height: 44px;
    object-fit: contain;
}

.top-nav.nav-icons .donate-dropdown__menu img {
    justify-self: center;
    align-self: center;
    width: 48px;
    max-width: 48px;
    height: 48px;
    max-height: 48px;
    object-fit: contain;
}

/* Fruit block under the fruit article: the five icons, then the facts. */
.fruit-block {
    margin-top: 22px;
}

.fruit-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
}

.fruit-card {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 16px 12px;
    border: 1px solid rgba(240, 198, 116, .2);
    border-radius: 10px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
}

.fruit-card strong {
    color: #fff;
    font-size: 13px;
}

.fruit-card small {
    color: rgba(238, 242, 255, .55);
    font-size: 11px;
}

/* The icons are the client's own 32px art. Scaling them smoothly turns them
   to mush, so they are doubled and left crisp. */
.fruit-card__icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

.fruit-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.fruit-facts li {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 10px;
    background: rgba(0, 0, 0, .22);
}

.fruit-facts span {
    color: rgba(238, 242, 255, .5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fruit-facts strong {
    color: #f0c674;
    font-size: 13px;
}

.reset-table--fruit {
    margin-top: 22px;
}

/* Two short columns only. The global `table { min-width: 620px }` is meant for
   the wide tables and would push half of this one off a phone screen, so it is
   lifted here and the long heading is allowed to wrap instead. */
.reset-table--fruit table {
    min-width: 0;
}

.reset-table--fruit th {
    white-space: normal;
}

/* Quest chain page. */
.quests-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.quests-totals li {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 10px;
    background: rgba(0, 0, 0, .22);
}

.quests-totals span {
    color: rgba(238, 242, 255, .5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.quests-totals strong {
    color: #f0c674;
    font-size: 14px;
}

.quests-table__index {
    color: #fff;
    font-weight: 900;
    white-space: nowrap;
}

.quests-table__points,
.quests-table__zen {
    white-space: nowrap;
}

.quests-table__zen {
    color: #e8a87c;
}

/* A milestone pays several times its neighbours; the row says so without a
   legend, and the diamond carries the word for anyone who hovers it. */
.quests-table__milestone {
    background: rgba(240, 198, 116, .07);
}

.quests-table__milestone .quests-table__points {
    color: #f0c674;
    font-weight: 900;
}

.quests-table__badge {
    margin-left: 4px;
    color: #f0c674;
    font-size: 10px;
    vertical-align: middle;
}

.quests-rewards {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quests-rewards li {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.quests-rewards img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
    flex: 0 0 auto;
}

/*
 * Six buttons in the character ranking row.
 *
 * Scoped with :has() to rows that actually hold six or more, so the guild row
 * of five keeps its single line where it has one. A browser without :has()
 * falls back to the old wrapping rather than to something broken.
 *
 * The row is flex-wrap with a 140px basis, which fills every line - but with
 * six buttons there is a band around 1120-1300px where five fit and the sixth
 * sits alone on a line of its own. Pinning the basis to a third of the row in
 * that band turns it into 3+3, and to a half further down so the captions keep
 * their width. Measured, not guessed: see WEB_WORK_LOG for the table.
 */
@media (max-width: 1300px) {
    .ranking-toolbar .rk-row:has(> .rank-button:nth-child(6)) > .rank-button {
        flex-basis: calc(33.333% - 6px);
    }
}

@media (max-width: 700px) {
    .ranking-toolbar .rk-row:has(> .rank-button:nth-child(6)) > .rank-button {
        flex-basis: calc(50% - 4px);
    }
}

/*
 * Numbers in the quest tables line up on their last digit.
 *
 * Left aligned, a column reading 6 000 / 12 000 / 736 000 puts its thousands
 * in three different places and the eye cannot compare rows without reading
 * every one. Columns three and four are the numeric pair in both quest tables
 * - points and zen on the chain, zen and experience on the dailies - so they
 * are right aligned, header included, and the whole table uses tabular figures
 * so every digit takes the same width.
 */
.quests-table {
    font-variant-numeric: tabular-nums;
}

.quests-table th:nth-child(3),
.quests-table td:nth-child(3),
.quests-table th:nth-child(4),
.quests-table td:nth-child(4) {
    text-align: right;
}

/* The reward column is prose and an icon, so it stays where it was. */
.quests-table th:nth-child(5),
.quests-table td:nth-child(5) {
    text-align: left;
}

/*
 * The three rotation days of one reset range are three separate tables, and a
 * table sizes its columns to its own rows - so "Kill 250 x Death Centurion" in
 * one day and "Kill 180 x Chief Skeleton Warrior" in the next pushed their zen
 * and experience columns to different places, and the three tables read as
 * three different layouts stacked on top of each other.
 *
 * A fixed layout with declared widths makes every day's table identical, which
 * is the point: the reader is comparing rung 3 of one day with rung 3 of the
 * next, and that only works if they are in the same place.
 */
.quests-table--daily {
    table-layout: fixed;
}

.quests-table--daily th:nth-child(1) { width: 7%; }
.quests-table--daily th:nth-child(2) { width: 53%; }
.quests-table--daily th:nth-child(3) { width: 20%; }
.quests-table--daily th:nth-child(4) { width: 20%; }

/* Jewel of Harmony option tables: a name column and a long ladder of numbers. */
.reset-table--harmony {
    margin-top: 26px;
}

.reset-table__name {
    color: #fff;
    text-align: left;
    white-space: nowrap;
}

/* A level the option cannot reach is dimmed rather than left blank, so the
   row still reads as one ladder with a starting point. */
.reset-table__muted {
    color: rgba(238, 242, 255, .28);
}

/*
 * The harmony ladder is fourteen numeric columns beside three text ones, and
 * at the site's default cell padding it wanted 1121px in a 950px column - a
 * sideways scrollbar under a table whose whole point is being read across.
 * Tighter padding on the numbers and a name column that wraps buy back the
 * difference; the text columns keep their air.
 */
.reset-table--harmony td,
.reset-table--harmony th {
    padding: 7px 5px;
}

.reset-table--harmony .reset-table__name {
    max-width: 190px;
    padding-left: 12px;
    white-space: normal;
}

/*
 * Excellent rank tables. The five colours are the client's own tooltip
 * colours, so a rank on this page is the same colour a player already knows
 * from the item in their inventory.
 */
.reset-table--excellent {
    margin-top: 26px;
}

.reset-table--excellent th small {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    opacity: .75;
}

/* Scoped past `.reset-table th/td`, which set their own colour at the same
   specificity and would otherwise paint every rank the site gold. */
.reset-table--excellent th.excellent-rank--normal,
.reset-table--excellent td.excellent-rank--normal { color: #b9bfd0; }
.reset-table--excellent th.excellent-rank--uncommon,
.reset-table--excellent td.excellent-rank--uncommon { color: #57d16a; }
.reset-table--excellent th.excellent-rank--rare,
.reset-table--excellent td.excellent-rank--rare { color: #5aa8ff; }
.reset-table--excellent th.excellent-rank--legendary,
.reset-table--excellent td.excellent-rank--legendary { color: #ffcc19; }
.reset-table--excellent th.excellent-rank--epic,
.reset-table--excellent td.excellent-rank--epic { color: #b266ff; }


/* Six columns and long option names: a little less air keeps the rank tables
   inside the article column instead of under a scrollbar. */
.reset-table--excellent td,
.reset-table--excellent th {
    padding: 8px 6px;
}

.reset-table--excellent .reset-table__name {
    max-width: 260px;
    padding-left: 12px;
    white-space: normal;
}

/*
 * A one-row table has no row labels.
 *
 * The wiki formatter renders the first cell of every body row as a row header,
 * which is right for a table of "BC1 | Invisibility Cloak +1" pairs and wrong
 * for a single row of five equal values - the first percentage came out
 * brighter and semi-bold, reading as though it meant more than the other four.
 * `:only-child` scopes this to the one-row shape and cannot touch the rest.
 */
.wiki-copy__table tbody tr:only-child th[scope="row"] {
    color: rgba(238, 242, 255, .84);
    font-weight: 400;
}

/*
 * Random quest tiers.
 *
 * A tier is one answer in two halves - what it sends you after, and what the
 * hand-in pays - so the pool and the reward list stand side by side while
 * there is room for both, and stack when there is not. Reading them as two
 * tables far apart is what the layout is avoiding.
 */
.random-tier {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 900px) {
    .random-tier {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Two tables in one row cannot both keep the global 620px floor. */
.quests-table--random {
    min-width: 0;
}

/* Chance is a number and belongs under its own heading, on the right. */
.random-tier .table-wrap + .table-wrap .quests-table--random th:nth-child(2),
.random-tier .table-wrap + .table-wrap .quests-table--random td:nth-child(2) {
    text-align: right;
    width: 1%;
}

/* An item name is prose in a narrow column, so it wraps rather than scrolls. */
.random-tier .quests-rewards li,
.random-tier .quests-rewards span,
.random-tier .table-wrap + .table-wrap .quests-table--random td:nth-child(1) {
    white-space: normal;
}

.quests-table__map {
    color: rgba(238, 242, 255, .62);
}

/*
 * Wing crafting.
 *
 * The ingredient table carries two things a quest table does not: a condition
 * under the item name, and - on the two mixes whose odds are bought rather than
 * fixed - what a row is worth in percent. Both are secondary to the name, so
 * both are set smaller and dimmer rather than given columns of their own.
 */
.wings-note,
.wings-worth {
    display: block;
    color: rgba(238, 242, 255, .55);
    font-size: 11px;
    white-space: normal;
}

.wings-note {
    margin-top: 3px;
    padding-left: 32px;
}

.wings-worth {
    color: #e8a87c;
}

/* Stack size beside a stacked result: "Small SD Potion x50". */
.wings-stack {
    margin-left: 6px;
    color: #f0c674;
    font-weight: 600;
    white-space: nowrap;
}

/* An optional row is part of the recipe but not required by it. */
.wings-optional td {
    color: rgba(238, 242, 255, .62);
}

.wings-classes {
    white-space: normal;
}

.wings-class {
    display: inline-block;
    margin: 0 3px 3px 0;
    padding: 2px 6px;
    border: 1px solid rgba(240, 198, 116, .28);
    border-radius: 5px;
    color: #f0c674;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

/*
 * The upgrade ladder is one label column and six columns of numbers, and the
 * generic quest-table rule only right-aligns the third and fourth. Left as it
 * was, jewel counts, zen and both chances would each sit differently.
 */
.quests-table--upgrade th:not(:first-child),
.quests-table--upgrade td:not(:first-child) {
    text-align: right;
}

/*
 * Invasion tables. The times column is a list of clock readings, so it wraps
 * rather than pushing the table into a sideways scroll, and the whole table
 * uses tabular figures so the columns of digits line up.
 */
/* Two or three columns do not need the global 620px floor: on a phone the
   loot tables were scrolling sideways to show a name and a percentage. */
.quests-table--invasion {
    min-width: 0;
}

.quests-table--invasion th:not(:first-child),
.quests-table--invasion td:not(:first-child) {
    text-align: right;
}

.quests-table--invasion .invasion-times {
    text-align: left;
    white-space: normal;
    color: rgba(238, 242, 255, .78);
}

.quests-table--invasion td:first-child {
    white-space: normal;
}

/*
 * A monster's picture beside its loot. The picture is optional - most monsters
 * have none yet - so the block is a plain column until one exists and only
 * then becomes two, the picture never stretching the table beside it.
 */
.monster-block.has-image {
    display: grid;
    grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.monster-block__loot {
    min-width: 0;
}

.monster-figure {
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 10px;
    background: radial-gradient(circle at 50% 40%, rgba(240, 198, 116, .10), rgba(0, 0, 0, .35) 70%);
}

.monster-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
}

@media (max-width: 700px) {
    .monster-block.has-image {
        grid-template-columns: minmax(0, 1fr);
    }

    .monster-figure img {
        max-height: 220px;
    }
}

/* Cron settings: the newest log lines, one pass per line, never wrapped -
   the table wrap around it scrolls sideways instead. */
.admin-cron-log {
    margin: 0;
    padding: 12px 14px;
    font: 12px/1.6 Consolas, "Courier New", monospace;
    color: rgba(238, 242, 255, .78);
    white-space: pre;
}

/* An ancient pick in a loot table: one line per set, the set's name in the
   ancient green and its pieces wrapping beside it; stacked on a phone. */
.bag-ancient__head {
    margin: 0 0 4px;
    font-weight: 700;
}

.bag-sets {
    display: grid;
    gap: 8px;
    margin: 10px 0 8px;
}

.bag-set {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding-top: 8px;
    border-top: 1px solid rgba(240, 198, 116, .1);
}

.bag-set:first-child {
    padding-top: 0;
    border-top: 0;
}

.bag-set__name {
    padding-top: 3px;
    color: #9cff78;
}

.bag-set__items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bag-set__items li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bag-set__items img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .bag-set {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

/* Earrings: the left ear's options blue, the right's orange, as the client
   draws them; the title goes green like an ancient piece. */
.item-tooltip__line--earring-left {
    color: #8ec8ff;
}

.item-tooltip__line--earring-right {
    color: #ffa94d;
}

.item-tooltip:has(.item-tooltip__line--earring-left, .item-tooltip__line--earring-right) .item-tooltip__title {
    color: #9cff78;
}

/* An earring's picture is a wide 207x136 render; in the 24px icon box it is a
   sliver, so the table heads on /earrings give it room. */
.quests-rewards.earring-item li {
    gap: 12px;
}

.quests-rewards.earring-item img {
    width: 84px;
    height: 56px;
    image-rendering: auto;
}

/* /earrings: one tab per tier, and a card laid out like the tooltips it
   describes - goblin, the story, the box; then left ear, set bonus, right ear. */
.tier-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 18px;
}

.tier-tabs__button {
    padding: 8px 18px;
    border: 1px solid rgba(240, 198, 116, .22);
    border-radius: 8px;
    background: rgba(11, 16, 31, .78);
    color: rgba(238, 242, 255, .72);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}

.tier-tabs__button:hover {
    color: var(--text);
    border-color: rgba(240, 198, 116, .45);
}

.tier-tabs__button--active {
    color: var(--modern-gold);
    border-color: rgba(240, 198, 116, .6);
    background: rgba(240, 198, 116, .08);
    box-shadow: inset 0 -2px 0 var(--modern-gold);
}

.earring-set__title {
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(240, 198, 116, .22);
    color: var(--modern-gold);
    font-size: 16px;
    font-weight: 950;
    text-align: center;
    text-transform: uppercase;
}

.earring-set__title small {
    margin-left: 8px;
    color: rgba(238, 242, 255, .45);
    font-size: 11px;
    font-weight: 900;
}

.earring-set__grid {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1.4fr) minmax(240px, 1fr);
    gap: 22px;
    align-items: start;
}

.earring-set__grid--first {
    grid-template-columns: minmax(0, 1fr);
}

.earring-npc {
    padding: 14px;
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 10px;
    background: radial-gradient(circle at 50% 35%, rgba(240, 198, 116, .10), rgba(0, 0, 0, .35) 70%);
    text-align: center;
}

.earring-npc img {
    display: block;
    width: 100%;
    max-height: 260px;
    margin-bottom: 10px;
    object-fit: contain;
}

.earring-npc strong {
    display: block;
    color: #ffcc19;
    font-size: 14px;
}

.earring-npc ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    color: #c9a8ff;
    font-size: 12px;
    line-height: 1.6;
}

.earring-prose,
.earring-prose p {
    color: rgba(238, 242, 255, .82);
    font-size: 13px;
    line-height: 1.65;
}

.earring-prose p {
    margin: 0 0 12px;
}

.earring-prose p:last-child {
    margin-bottom: 0;
}

.hl {
    font-style: normal;
    font-weight: 700;
}

.hl--gold { color: #ffcc19; }
.hl--orange { color: #ffa94d; }
.hl--blue { color: #8ec8ff; }
.hl--green { color: #66d19e; }
.hl--red { color: #ff7d7d; }
.hl--muted { color: rgba(238, 242, 255, .55); font-weight: 500; }

.hl--link {
    color: #8ec8ff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.earring-recipe {
    padding: 14px 16px;
    border: 1px solid rgba(240, 198, 116, .16);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
}

.earring-recipe__list {
    gap: 8px;
}

.earring-recipe__list li {
    justify-content: center;
    text-align: center;
}

.earring-recipe__list span {
    font-size: 13px;
}

.earring-recipe__list b {
    margin-right: 4px;
    color: #8ec8ff;
    font-weight: 800;
}

.earring-recipe__rate,
.earring-recipe__result {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}

.earring-recipe__rate {
    color: rgba(238, 242, 255, .78);
    font-weight: 700;
}

.earring-set__pair {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(240, 198, 116, .16);
    text-align: center;
}

.earring-ear,
.earring-bonus {
    padding: 6px 8px;
}

.earring-ear__image {
    display: block;
    width: 120px;
    height: 80px;
    margin: 0 auto 8px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
}

.earring-ear strong,
.earring-bonus strong {
    display: block;
    font-size: 14px;
}

.earring-ear small,
.earring-bonus small {
    display: block;
    margin-top: 2px;
    color: rgba(238, 242, 255, .5);
    font-size: 11px;
}

.earring-bonus {
    padding-top: 48px;
}

.earring-ear ul,
.earring-bonus ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(238, 242, 255, .85);
    font-size: 13px;
    line-height: 1.75;
}

.earring-set__growth {
    margin-top: 16px;
    text-align: center;
}

@media (max-width: 960px) {
    .earring-set__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .earring-set__pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .earring-bonus {
        padding-top: 6px;
    }
}

.tier-tabs__button--material {
    border-style: dashed;
}

/* Battle Grounds: the prose beside the NPC card, the rule list, the monster tables. */
.bg-lead {
    display: grid;
    gap: 18px;
    margin-top: 14px;
}

.bg-lead.has-npc {
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: start;
}

.bg-rules {
    margin: 16px 0 0;
    padding: 0 0 0 18px;
    color: rgba(238, 242, 255, .78);
    font-size: 13px;
    line-height: 1.6;
}

.bg-rules li {
    margin: 0 0 6px;
}

.bg-rules li::marker {
    color: #f0c674;
}

.bg-subhead {
    margin: 18px 0 6px;
    color: #ffcc19;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bg-table td,
.bg-table th {
    white-space: nowrap;
}

.bg-points {
    color: #8ee38e;
    font-weight: 700;
}

.tier-tabs__button small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    opacity: .75;
}

@media (max-width: 720px) {
    .bg-lead.has-npc {
        grid-template-columns: minmax(0, 1fr);
    }
}