/* Lin2Web — "Aden Ultra": public inner pages (stats, about, files, donate, news, rules, errors). Loaded after ultra.css. */

/* =========================================================
   0. Shared window recipe for inner pages
   ========================================================= */
.page-body .panel,
.stats-page .panel,
.donate-page .panel,
.err-card.panel {
    background: var(--u-plate-bg);
    border: 0;
    border-radius: var(--u-r);
    box-shadow: var(--u-plate-shadow);
}
.page-body .panel:hover,
.stats-page .panel:hover { transform: none; }

/* window title bar: bronze gradient strip with hairline underline */
.page-body .panel-title,
.donate-page .panel-title,
.stats-panel__head {
    position: relative;
    margin: 0 0 18px;
    padding: 11px 18px 10px;
    font-family: var(--font-accent-bold), serif;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--u-gold-hi);
    text-shadow: 0 1px 0 #000;
    background: var(--u-titlebar);
    box-shadow: inset 0 -1px 0 var(--u-bronze);
}
.page-body .panel-title::before,
.donate-page .panel-title::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin: 0 10px 2px 0;
    background: var(--u-gold);
    transform: rotate(45deg);
    box-shadow: 0 0 8px var(--u-gold-glow);
    vertical-align: middle;
}
.page-body .panel-title::after { display: none; }

.page-body {
    background: none;
    padding: clamp(32px, 3vw, 64px) 0 clamp(64px, 6vw, 120px);
}

/* =========================================================
   1. Page hero — cinematic band
   ========================================================= */
.page-hero {
    display: flex;
    align-items: flex-end;
    min-height: clamp(300px, 26vw, 560px);
    padding: calc(var(--header-h) * .4 + 48px) 0 clamp(40px, 3.6vw, 76px);
    text-align: left;
    background: var(--u-void);
    border-bottom: 0;
    box-shadow: 0 1px 0 #000, 0 2px 0 rgba(138, 111, 69, .45);
}
.page-hero::before {
    z-index: -3;
    background:
        linear-gradient(180deg, rgba(7, 6, 5, .55) 0%, rgba(7, 6, 5, .35) 40%, rgba(11, 10, 8, .92) 92%, var(--u-ink) 100%),
        linear-gradient(90deg, rgba(7, 6, 5, .94) 0%, rgba(7, 6, 5, .7) 38%, rgba(7, 6, 5, .25) 70%, rgba(7, 6, 5, .55) 100%),
        url("../img/ultra/bg-town.webp") 50% 38% / cover no-repeat;
    opacity: 1;
    filter: saturate(.8) sepia(.18) brightness(.9);
}
/* character cutout */
.page-hero::after {
    z-index: -1;
    inset: calc(var(--header-h) * .6) max(var(--u-gutter), calc((100% - var(--u-max)) / 2)) 0 auto;
    width: clamp(340px, 30vw, 760px);
    height: auto;
    background: url("../img/ultra/hero-archer-shot.webp") 50% 0 / contain no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, .8)) drop-shadow(-20px 0 60px rgba(232, 88, 42, .18));
}
/* per-section variety */
body:has(.about-layout) .page-hero::after { background-image: url("../img/ultra/hero-elf.webp"); }
body:has(.dl-steps) .page-hero::after { background-image: url("../img/ultra/hero-dwarf.webp"); }
body:has(.donate-page) .page-hero::after { background-image: url("../img/ultra/hero-mage.webp"); }
body:has(.news-list, .article-layout, .stream-grid) .page-hero::after { background-image: url("../img/ultra/hero-orc.webp"); }
body:has(.legal, .map-shell) .page-hero::after { background-image: url("../img/ultra/hero-archer.webp"); }

/* ember haze along the bottom edge */
.page-hero .wrap::before {
    content: "";
    position: absolute;
    left: -10%; right: -10%; bottom: -80px; height: 160px;
    z-index: -1;
    background: radial-gradient(50% 60% at 30% 100%, rgba(232, 88, 42, .14), transparent 70%);
    pointer-events: none;
}
.page-hero .wrap { width: min(calc(100% - 2 * var(--u-gutter)), var(--u-max)); }
.page-hero__crumbs {
    justify-content: flex-start;
    margin-bottom: 18px;
    color: var(--u-muted);
}
.page-hero__crumbs a { color: var(--u-gold); }
.page-hero__title {
    max-width: min(1100px, 62%);
    margin: 14px 0 0;
    font-size: clamp(32px, 3.6vw, 84px);
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.04;
}
.page-hero .ornament { margin: 22px 0 0; width: min(360px, 60%); }
.page-hero__lead {
    max-width: min(640px, 60%);
    margin: 20px 0 0;
    font-size: clamp(15px, .95vw, 18px);
    line-height: 1.65;
    color: var(--u-text-2);
    text-shadow: 0 1px 2px #000;
}

.page-hero__note {
    max-width: min(640px, 60%);
    margin: 28px 0 0;
    font-size: clamp(14px, .9vw, 16px);
    line-height: 1.65;
    color: var(--u-gold);
    text-shadow: 0 1px 2px #000;
}
@media (max-width: 1199px) {
    .page-hero__note { margin-left: auto; margin-right: auto; }
}

@media (max-width: 1199px) {
    .page-hero { text-align: center; align-items: center; }
    .page-hero::after { display: none; }
    .page-hero__crumbs { justify-content: center; }
    .page-hero__title, .page-hero__lead { max-width: 920px; margin-left: auto; margin-right: auto; }
    .page-hero .ornament { margin: 22px auto 0; }
}
@media (max-width: 640px) {
    .page-hero { min-height: 240px; padding: calc(var(--header-h) + 36px) 0 36px; }
    .page-hero__title { font-size: clamp(26px, 8vw, 36px); }
}

/* =========================================================
   2. Prose / callouts / empty states
   ========================================================= */
.prose { color: var(--u-text-2); font-size: 15px; line-height: 1.75; }
.prose h2 {
    color: var(--u-gold-hi);
    letter-spacing: .12em;
    text-shadow: 0 1px 0 #000;
}
.prose h2::after { background: linear-gradient(90deg, var(--u-bronze-hi), transparent); }
.prose h3 { color: var(--u-gold); }
.prose strong, .prose b { color: var(--u-text); }
.prose a { color: var(--u-gold); text-decoration-color: var(--u-hair-2); }
.prose a:hover { color: var(--u-gold-hi); }
.prose li::before { background: var(--u-gold); box-shadow: 0 0 6px var(--u-gold-glow); border-radius: 0; }
.prose blockquote {
    border: 0;
    border-left: 2px solid var(--u-ember);
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
    border-radius: 0;
}
.prose table { border-radius: 0; box-shadow: var(--u-well-shadow); background: var(--u-well-bg); }
.prose th { background: var(--u-titlebar); color: var(--u-gold-hi); box-shadow: inset 0 -1px 0 var(--u-bronze); }
.prose code, .prose kbd { background: var(--u-well-bg); box-shadow: var(--u-well-shadow); border: 0; border-radius: 0; color: var(--u-gold-hi); }

.callout {
    border: 0;
    border-radius: var(--u-r);
    background:
        linear-gradient(90deg, rgba(216, 177, 106, .1), transparent 60%),
        var(--u-well-bg);
    box-shadow: var(--u-well-shadow), inset 3px 0 0 var(--u-gold);
}
.callout--warn {
    background:
        linear-gradient(90deg, rgba(232, 88, 42, .14), transparent 60%),
        var(--u-well-bg);
    box-shadow: var(--u-well-shadow), inset 3px 0 0 var(--u-ember);
}

.empty-state.panel, .stats-empty { text-align: center; }
.empty-state__emblem, .stats-empty__icon { color: var(--u-gold); filter: drop-shadow(0 0 14px var(--u-gold-glow)); }

/* =========================================================
   3. Stats — HUD dashboard
   ========================================================= */
.stats-page { padding: clamp(28px, 2.6vw, 56px) 0 clamp(64px, 6vw, 120px); background: none; }

/* tab strip */
.stats-nav { margin-bottom: clamp(20px, 2vw, 36px); }
.stats-nav__tabs {
    gap: 2px;
    padding: 0 0 0 4px;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--u-bronze);
}
.stats-nav__tab { min-height: 44px; font-size: 12px; letter-spacing: .14em; }
.stats-nav__tab.active { color: var(--u-gold-hi); filter: drop-shadow(0 0 10px rgba(232, 190, 110, .25)); }
.stats-nav__sub {
    gap: 6px;
    padding: 12px 14px;
    background: var(--u-well-bg);
    border: 0;
    border-radius: 0 0 var(--u-r) var(--u-r);
    box-shadow: var(--u-well-shadow);
}

/* counters = game plates with glowing numbers */
.stats-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(calc(50% - 8px), 220px), 1fr));
    gap: clamp(12px, 1vw, 22px);
    margin-bottom: clamp(16px, 1.4vw, 28px);
}
.stats-page .stats-kpi.panel {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, 1.6vw, 34px) 18px;
    background:
        radial-gradient(80% 70% at 50% 0%, rgba(216, 177, 106, .12), transparent 70%),
        var(--u-plate-bg);
}
.stats-kpi::before {
    content: "";
    position: absolute; left: 12%; right: 12%; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--u-gold), transparent);
    box-shadow: 0 0 14px var(--u-gold-glow);
}
.stats-kpi__icon { color: var(--u-gold); filter: drop-shadow(0 0 8px var(--u-gold-glow)); }
.stats-kpi__value {
    font-family: var(--font-accent-bold), serif;
    font-size: clamp(34px, 2.6vw, 60px);
    line-height: 1.05;
    color: var(--u-gold-hi);
    text-shadow: 0 2px 0 #000, 0 0 24px rgba(245, 220, 162, .45), 0 0 60px rgba(232, 190, 110, .25);
}
.stats-kpi__label { color: var(--u-muted); letter-spacing: .24em; }

/* panels = list windows */
.stats-panel { padding: 0; overflow: hidden; }
.stats-panel + .stats-panel { margin-top: clamp(16px, 1.4vw, 28px); }
.stats-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0;
    padding: 12px 20px;
}
.stats-panel__title {
    margin: 0;
    font-size: 13px;
    letter-spacing: .18em;
    color: var(--u-gold-hi);
}
.stats-panel__title::before { background: var(--u-gold); box-shadow: 0 0 8px var(--u-gold-glow); }
.stats-panel__meta { color: var(--u-muted); }
.stats-panel__body, .stats-bars { padding: 18px 20px 20px; }
.stats-panel > .stats-facts, .stats-panel > .stats-cards, .stats-panel > .stats-note { margin: 18px 20px 20px; }

.stats-split {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: clamp(16px, 1.4vw, 28px);
}
.stats-split .stats-panel + .stats-panel { margin-top: 0; }

/* bars = sprite-sheet progress bar */
.stats-bar + .stats-bar { margin-top: 14px; }
.stats-bar__label { color: var(--u-text); }
.stats-bar__value { color: var(--u-gold-hi); }
.stats-bar__value em { color: var(--u-muted); }
.stats-bar__track {
    height: 12px;
    padding: 2px;
    background: var(--u-well-bg);
    border: 0;
    border-radius: 0;
    box-shadow: var(--u-well-shadow);
}
.stats-bar__fill {
    height: 100%;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 45%, rgba(0, 0, 0, .3)),
        linear-gradient(90deg, #6d5430, #b98d4d 55%, #f0cf86);
    box-shadow: 0 0 10px rgba(232, 190, 110, .35);
}
.stats-bar--male .stats-bar__fill {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 45%, rgba(0, 0, 0, .3)),
        linear-gradient(90deg, #1d3e6e, #3f7fc4 60%, #8cc6ff);
    box-shadow: 0 0 10px rgba(111, 181, 255, .35);
}
.stats-bar--female .stats-bar__fill {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 45%, rgba(0, 0, 0, .3)),
        linear-gradient(90deg, #6a1a14, #b3261e 55%, #e8582a);
    box-shadow: 0 0 10px var(--u-ember-glow);
}

/* tables = in-game list windows */
.stats-table-wrap { margin: 0; border: 0; border-radius: 0; background: none; }
.stats-table { border-collapse: collapse; width: 100%; }
.stats-table th {
    padding: 11px 16px;
    font-family: var(--font-accent-bold), serif;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--u-gold);
    background: linear-gradient(180deg, #1f1a13, #15120e);
    border: 0;
    box-shadow: inset 0 -1px 0 var(--u-bronze), inset 0 1px 0 rgba(0, 0, 0, .9);
}
.stats-table td {
    padding: 11px 16px;
    color: var(--u-text-2);
    border-bottom: 1px solid rgba(216, 177, 106, .07);
}
.stats-table tbody tr { background: transparent; transition: background .15s; }
.stats-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .22); }
.stats-table tbody tr:hover { background: linear-gradient(90deg, rgba(216, 177, 106, .12), rgba(216, 177, 106, .03)); }
.stats-table tbody tr.is-top td:first-child { box-shadow: inset 2px 0 0 var(--u-gold); }
.stats-table .num.is-key { color: var(--u-gold-hi); text-shadow: 0 0 10px var(--u-gold-glow); }
.stats-table .num.is-bad { color: #ff8a6a; }
.stats-rank {
    border-radius: 0;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
    color: var(--u-text-2);
}
.stats-rank--1, .stats-rank--2, .stats-rank--3 {
    width: 34px; height: 34px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.stats-rank--1 { background: linear-gradient(135deg, #fff1c4, #d8b16a 50%, #8a6f45); color: #1a1208; box-shadow: 0 0 0 1px #000, 0 0 14px var(--u-gold-glow); }
.stats-rank--2 { background: linear-gradient(135deg, #f1f1f1, #a9adb3 50%, #5b5f66); color: #111; box-shadow: 0 0 0 1px #000; }
.stats-rank--3 { background: linear-gradient(135deg, #f0c09a, #b06a3b 50%, #5e3418); color: #160b04; box-shadow: 0 0 0 1px #000; }

.stats-chip, .stats-status {
    border-radius: 0;
    border: 0;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
}
.stats-status--good { color: var(--u-life); box-shadow: var(--u-well-shadow), inset 0 0 0 1px rgba(127, 220, 143, .35); }
.stats-status--bad { color: #ff8a6a; box-shadow: var(--u-well-shadow), inset 0 0 0 1px rgba(232, 88, 42, .45); }

.stats-toolbar.panel { padding: 14px 18px; }
.stats-select { border-radius: 0; }

/* castle / boss cards */
.stats-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(14px, 1.2vw, 24px);
}
.stats-card.panel { overflow: hidden; padding: 0; }
.stats-card.panel:hover { box-shadow: var(--u-plate-shadow-hover); }
.stats-card__media { border-radius: 0; box-shadow: inset 0 -1px 0 var(--u-bronze); }
.stats-card__media.is-dead img { filter: grayscale(1) brightness(.55); }
.stats-card__title { color: var(--u-gold-hi); letter-spacing: .1em; }

/* explore tiles */
.stats-explore { margin-top: clamp(40px, 4vw, 80px); }
.stats-explore__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(14px, 1.2vw, 24px);
}
.stats-explore__card.panel {
    position: relative;
    overflow: hidden;
    transition: box-shadow .25s var(--u-ease), transform .25s var(--u-ease);
}
.stats-explore__card.panel:hover { box-shadow: var(--u-plate-shadow-hover); transform: translateY(-3px); }
.stats-explore__card::after {
    content: "";
    position: absolute; inset: auto 0 0 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--u-ember), transparent);
    opacity: 0; transition: opacity .25s;
}
.stats-explore__card:hover::after { opacity: 1; }
.stats-explore__icon {
    color: var(--u-gold);
    border-radius: 0;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
}
.stats-generated { color: var(--u-muted); }

@media (min-width: 1800px) {
    .stats-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 2200px) {
    .stats-explore__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* =========================================================
   4. About — side menu + item slots
   ========================================================= */
.about-highlights {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(12px, 1vw, 20px);
}
.about-highlight.panel {
    background:
        radial-gradient(70% 90% at 0% 50%, rgba(216, 177, 106, .1), transparent 70%),
        var(--u-plate-bg);
}
.about-highlight img {
    padding: 4px;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
}
.about-highlight b, .about-highlight strong { color: var(--u-gold-hi); text-shadow: 0 0 14px var(--u-gold-glow); }

.about-layout { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(18px, 1.6vw, 32px); }
@media (min-width: 2200px) { .about-layout { grid-template-columns: 340px minmax(0, 1fr); } }
.about-nav.panel { padding: 0 0 12px; overflow: hidden; }
.about-nav .panel-title { margin-bottom: 8px; }
.about-nav__list { gap: 2px; padding: 0 10px; }
.about-nav .about-link {
    min-height: 40px;
    padding: 9px 12px 9px 14px;
    border: 0;
    border-image: none;
    border-radius: 0;
    color: var(--u-text-2);
    filter: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, .02), transparent);
    box-shadow: inset 0 -1px 0 rgba(216, 177, 106, .07);
}
.about-nav .about-link:hover { filter: none; }
.about-nav .about-link.active { filter: none; }
.about-nav .about-link:hover {
    color: var(--u-gold-hi);
    background: linear-gradient(90deg, rgba(216, 177, 106, .12), transparent);
}
.about-nav .about-link.active {
    color: var(--u-gold-hi);
    background: linear-gradient(90deg, rgba(216, 177, 106, .22), rgba(216, 177, 106, .04));
    box-shadow: inset 2px 0 0 var(--u-gold), inset 0 0 0 1px rgba(216, 177, 106, .25);
}
.about-content.panel { padding: 0 clamp(20px, 2vw, 44px) clamp(24px, 2vw, 40px); }
.about-content.panel > .content-about > :first-child { margin-top: 0; }
.about-content .content-about > :not(h2:first-child) { max-width: 1200px; }
.about-content .content-about > h2:first-child {
    margin: 0 calc(-1 * clamp(20px, 2vw, 44px)) 24px;
    padding: 13px clamp(20px, 2vw, 44px) 12px;
    background: var(--u-titlebar);
    box-shadow: inset 0 -1px 0 var(--u-bronze);
}
.about-content .content-about > h2:first-child::after { display: none; }

/* rate tiles = item slots */
.rate-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.rate {
    position: relative;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(60% 60% at 50% 35%, rgba(216, 177, 106, .1), transparent 70%),
        var(--u-well-bg);
    box-shadow: var(--u-well-shadow), inset 0 0 0 3px rgba(0, 0, 0, .6), inset 0 0 0 4px rgba(216, 177, 106, .12);
    transition: box-shadow .2s;
}
.rate:hover { box-shadow: var(--u-well-shadow), inset 0 0 0 1px var(--u-gold), 0 0 16px rgba(232, 190, 110, .2); }
.rate img { filter: drop-shadow(0 2px 4px #000); }
.item-card {
    border: 0; border-radius: 0;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
}
.prize, .schedule {
    border: 0; border-radius: 0;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
}
.prize__value { color: var(--u-gold-hi); text-shadow: 0 0 12px var(--u-gold-glow); }
.tag-list li, .tag-list span {
    border-radius: 0;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
    border: 0;
}

/* =========================================================
   5. Download — quest windows
   ========================================================= */
.dl-steps {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: clamp(16px, 1.4vw, 28px);
}
.dl-step.panel { position: relative; padding: 0 0 22px; overflow: hidden; }
.dl-step__head {
    margin: 0 0 18px;
    padding: 14px 22px;
    background: var(--u-titlebar);
    box-shadow: inset 0 -1px 0 var(--u-bronze);
}
.dl-step__num {
    border: 0;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background: linear-gradient(135deg, #fff1c4, #d8b16a 50%, #8a6f45);
    color: #1a1208;
    box-shadow: 0 0 0 1px #000, 0 0 16px var(--u-gold-glow);
}
.dl-step__label { color: var(--u-ember); letter-spacing: .26em; }
.dl-step__title { color: var(--u-gold-hi); }
.dl-step > :not(.dl-step__head) { margin-left: 22px; margin-right: 22px; }
.dl-step > p { color: var(--u-text-2); }
.dl-file {
    border: 0; border-radius: 0;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
    transition: box-shadow .2s;
}
.dl-file:hover { box-shadow: var(--u-well-shadow), inset 0 0 0 1px var(--u-gold); }
.dl-file__icon {
    border-radius: 0;
    color: var(--u-gold);
    background: var(--u-plate-hi);
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--u-bronze);
}

/* =========================================================
   6. Donate — two windows + item-slot methods
   ========================================================= */
.other-bg:has(+ .page-hero + .donate-page)::before { background: none; }
#other.donate-page { padding-top: clamp(24px, 2vw, 44px); }
.donate-page .price_donate {
    border: 0;
    border-radius: 0;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
}
.donate-page #payment-form {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 24vw, 520px);
    gap: clamp(18px, 1.6vw, 32px);
}
.donate-page .payment-pay.panel { padding: 0 clamp(20px, 1.6vw, 34px) 28px; }
.donate-page .payment-pay.panel::before { display: none; }
.donate-step { padding-top: 22px; }
.donate-step + .donate-step { border-top: 0; box-shadow: inset 0 1px 0 var(--u-hair); }
.donate-step__head::after { background: linear-gradient(90deg, var(--u-bronze-hi), transparent); }
.donate-step__num { color: #1a1208; }
.donate-step__num::before {
    border: 0;
    background: linear-gradient(135deg, #fff1c4, #d8b16a 50%, #8a6f45);
    box-shadow: 0 0 0 1px #000, 0 0 12px var(--u-gold-glow);
}
.donate-step__title { color: var(--u-gold-hi); }
.donate-label { color: var(--u-muted); }
.donate-page .form-control {
    border: 0;
    border-radius: 0;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
}
.donate-page .form-control:focus { box-shadow: var(--u-well-shadow), inset 0 0 0 1px var(--u-gold), 0 0 12px rgba(232, 190, 110, .2); }

/* payment methods = item slots */
.donate-page .payment_select {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
}
.donate-page .pay_method {
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(70% 70% at 50% 40%, rgba(216, 177, 106, .06), transparent 70%),
        var(--u-well-bg);
    box-shadow: var(--u-well-shadow), inset 0 0 0 3px rgba(0, 0, 0, .55), inset 0 0 0 4px rgba(216, 177, 106, .1);
    transform: none;
}
.donate-page .pay_method:hover {
    box-shadow: var(--u-well-shadow), inset 0 0 0 1px var(--u-bronze-hi), 0 0 12px rgba(232, 190, 110, .15);
    transform: none;
}
.donate-page .pay_method.active {
    background:
        radial-gradient(70% 70% at 50% 40%, rgba(245, 220, 162, .16), transparent 70%),
        var(--u-well-bg);
    box-shadow:
        0 0 0 1px #000,
        inset 0 0 0 2px var(--u-gold),
        inset 0 0 0 3px rgba(0, 0, 0, .7),
        inset 0 0 18px rgba(232, 190, 110, .25),
        0 0 18px var(--u-gold-glow);
}

/* summary window */
.donate-aside { gap: clamp(16px, 1.4vw, 28px); }
.donate-page .donate-summary.panel { padding: 0 22px 24px; overflow: hidden; }
.donate-page .donate-summary .panel-title {
    margin: 0 -22px 18px;
    padding-top: 14px;
    background:
        radial-gradient(70% 100% at 50% 0%, rgba(232, 190, 110, .18), transparent 70%),
        var(--u-titlebar);
}
.donate-page #payment-total {
    filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 18px rgba(245, 220, 162, .45));
}
.donate-page .btn-full .ui-btn--lg:not(.ui-btn--ghost) { border: 0; border-image: none; }
.donate-summary__split { background: var(--u-well-bg); box-shadow: var(--u-well-shadow); padding: 10px 14px; }
.donate-summary__bonus { color: var(--u-life); }

/* bonus table = list window */
.donate-page .donate-bonuses.panel { padding: 0 0 12px; overflow: hidden; }
.donate-bonuses .donate-title-block { margin-bottom: 8px; }
.donate-bonuses .donate-title-block .panel-title { margin-bottom: 10px; }
.donate-bonuses .donate-title-block p { padding: 0 18px; }
.bonus-item {
    margin: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 -1px 0 rgba(216, 177, 106, .08);
}
.bonus-item:nth-child(even) { background: rgba(0, 0, 0, .22); }
.bonus-item.is-active, .bonus-item.is-current {
    background: linear-gradient(90deg, rgba(216, 177, 106, .18), rgba(216, 177, 106, .03));
    box-shadow: inset 2px 0 0 var(--u-gold);
}
.bonus-item__value { color: var(--u-gold-hi); text-shadow: 0 0 10px var(--u-gold-glow); }
.bonus-item__bar { border-radius: 0; }

.donate-popup .popup-content.panel { box-shadow: var(--u-plate-shadow), 0 0 80px rgba(0, 0, 0, .9); }

@media (max-width: 1100px) {
    .donate-page #payment-form { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .donate-aside { grid-template-columns: 1fr !important; }
}

/* =========================================================
   7. News, article, legal — reading windows
   ========================================================= */
.news-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: clamp(16px, 1.4vw, 28px);
}
.news-card.panel { overflow: hidden; padding: 0; }
.news-card__media { border-radius: 0; box-shadow: inset 0 -1px 0 var(--u-bronze); }
.news-card.panel:hover { box-shadow: var(--u-plate-shadow-hover); }

.article-layout {
    grid-template-columns: minmax(0, 960px) minmax(300px, 380px);
    justify-content: center;
    gap: clamp(20px, 2vw, 40px);
}
.article.panel { padding: 0 0 32px; overflow: hidden; }
.article__cover { border-radius: 0; box-shadow: inset 0 -1px 0 var(--u-bronze); }
.article > :not(.article__cover) { margin-left: clamp(20px, 3vw, 56px); margin-right: clamp(20px, 3vw, 56px); }
.article__meta { color: var(--u-muted); }
.article__body { max-width: 860px; font-size: 16px; }
.article-aside.panel { padding: 0 0 14px; overflow: hidden; }
.recent-list { padding: 0 10px; }
.recent-list li a, .recent-list a { border-radius: 0; }
.recent-list .is-current a, .recent-list li.is-current {
    background: linear-gradient(90deg, rgba(216, 177, 106, .18), transparent);
    box-shadow: inset 2px 0 0 var(--u-gold);
}
.recent-list__title { color: var(--u-text); }

.legal {
    grid-template-columns: 300px minmax(0, 960px);
    justify-content: center;
    max-width: none;
    gap: clamp(20px, 2vw, 40px);
}
.legal-toc.panel { padding: 0 0 14px; overflow: hidden; }
.legal-toc ol, .legal-toc ul { padding: 0 16px; }
.legal-toc a:hover { color: var(--u-gold-hi); }
.legal-doc.panel { padding: clamp(28px, 3vw, 56px) clamp(22px, 4vw, 72px); }
.legal-num {
    border-radius: 0;
    background: var(--u-well-bg);
    box-shadow: var(--u-well-shadow);
    color: var(--u-gold);
}
.legal-meta { color: var(--u-muted); }

.pg-pagination a, .pg-pagination span, .news-pagination a, .news-pagination span { border-radius: 0; }

/* streams */
.stream-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: clamp(16px, 1.4vw, 28px);
}
.stream-card.panel { overflow: hidden; padding: 0; }
.stream-card.is-live { box-shadow: var(--u-plate-shadow), 0 0 0 1px rgba(232, 88, 42, .6), 0 0 30px var(--u-ember-glow); }
.stream-badge { border-radius: 0; background: var(--u-blood); box-shadow: 0 0 12px var(--u-ember-glow); }

/* map */
.map-shell { grid-template-columns: minmax(0, 1fr) clamp(300px, 20vw, 420px); }
.map-stage.panel { overflow: hidden; }
.map-info.panel { padding: 0 0 14px; overflow: hidden; }
.map-info__body { padding: 0 18px; }
.map-toolbar { background: var(--u-titlebar); box-shadow: inset 0 -1px 0 var(--u-bronze); }

@media (max-width: 960px) {
    .legal, .about-layout, .article-layout, .map-shell { grid-template-columns: minmax(0, 1fr); }
    .about-nav.panel { padding-bottom: 6px; }
}

/* =========================================================
   8. Error pages (404/500) — full-screen art
   ========================================================= */
.err-body {
    min-height: 100vh;
    background:
        radial-gradient(60% 70% at 30% 50%, rgba(232, 88, 42, .12), transparent 70%),
        linear-gradient(90deg, rgba(7, 6, 5, .96) 0%, rgba(7, 6, 5, .78) 45%, rgba(7, 6, 5, .45) 100%),
        linear-gradient(180deg, rgba(7, 6, 5, .3), rgba(7, 6, 5, .95)),
        url("../img/ultra/bg-town.webp") 50% 40% / cover no-repeat fixed,
        var(--u-void);
}
.err-body::after {
    content: "";
    position: fixed;
    right: max(2vw, calc((100vw - var(--u-max)) / 2));
    bottom: 0;
    width: min(46vw, 900px);
    height: 96vh;
    background: url("../img/ultra/hero-archer-shot.webp") 50% 100% / contain no-repeat;
    filter: drop-shadow(0 0 50px rgba(0, 0, 0, .9)) drop-shadow(-30px 0 80px rgba(232, 88, 42, .25));
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
    mask-image: linear-gradient(180deg, #000 80%, transparent);
    pointer-events: none;
    z-index: 0;
}
.err-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: min(calc(100% - 2 * var(--u-gutter)), var(--u-max));
    margin: 0 auto;
    padding: 48px 0;
    background: none;
}
.err-page::before, .err-page::after { display: none; }
.err-logo { margin: 0 0 32px; }
.err-card.panel {
    position: relative;
    max-width: 640px;
    padding: 0;
    text-align: left;
    background: none;
    box-shadow: none;
}
.err-char { display: none; }
.err-num {
    margin: 6px 0 0;
    font-family: var(--font-accent-bold), serif;
    font-size: clamp(120px, 15vw, 320px);
    line-height: .9;
    letter-spacing: .02em;
    background: linear-gradient(180deg, #fffaf0 0%, #f5dca2 40%, #c8964f 75%, #6d4e25 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 50px rgba(232, 190, 110, .3));
    opacity: 1;
}
.err-card h1 {
    margin: 10px 0 0;
    font-family: var(--font-accent-bold), serif;
    font-size: clamp(26px, 2.4vw, 48px);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--u-gold-hi);
    text-shadow: 0 2px 0 #000;
}
.err-card .ornament { margin: 20px 0 0; width: min(320px, 70%); }
.err-card p { margin: 20px 0 32px; max-width: 480px; font-size: 16px; color: var(--u-text-2); text-shadow: 0 1px 2px #000; }
.err-btns { justify-content: flex-start; }
@media (max-width: 900px) {
    .err-body::after { width: 100vw; right: 0; opacity: .28; }
    .err-page { align-items: center; }
    .err-card.panel { text-align: center; }
    .err-card .ornament { margin: 20px auto 0; }
    .err-card p { margin-left: auto; margin-right: auto; }
    .err-btns { justify-content: center; }
}

/* Action Interface section on the about page */
.action-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}
.action-icons .action-icon,
.action-shortcuts .action-icon {
    width: 34px;
    height: 34px;
    image-rendering: auto;
    filter: none;
}
.action-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 8px 0 22px;
}
.action-shots figure { margin: 0; }
.action-shots .action-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(194, 162, 106, .35);
    background: #0c0b09;
    filter: none;
}
.action-shots figcaption {
    margin-top: 6px;
    color: var(--u-muted, #bdb4a2);
    font-size: 12px;
    letter-spacing: .04em;
}
.action-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.action-shortcuts li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(194, 162, 106, .06);
}
.action-shortcuts li span { flex: 1; min-width: 0; }
.action-shortcuts code { color: var(--u-gold, #e6cf9c); font-size: 12px; }

.about-nav .about-link.active img.about-link__icon--natural {
    filter: none;
    opacity: 1;
}

/* Classes submenu under Classes / Subclass / Noblesse */
.about-class-list {
    display: none;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 8px 14px;
    padding: 2px 0 4px 8px;
    list-style: none;
    border-left: 1px solid rgba(216, 177, 106, .28);
}
.about-class-list.is-open { display: flex; }
.about-class-list[hidden] { display: none !important; }
.about-class-list li { margin: 0; padding: 0; }
.about-class-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    margin: 0;
    padding: 4px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--u-text-2);
    font-family: var(--font-accent-bold), serif;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .03em;
    text-align: left;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.about-class-link img {
    width: 22px;
    height: 22px;
    object-fit: cover;
    object-position: center top;
    border-radius: 2px;
    background: #0c0b09;
    flex: none;
    filter: none;
}
.about-class-link:hover {
    color: var(--u-gold-hi);
    background: linear-gradient(90deg, rgba(216, 177, 106, .12), transparent);
}
.about-class-link.is-active {
    color: var(--u-gold-hi);
    background: linear-gradient(90deg, rgba(216, 177, 106, .2), transparent);
    box-shadow: inset 2px 0 0 var(--u-gold);
}

.class-skills { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.class-skill {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 4px 14px;
    align-items: start;
    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(216, 177, 106, .08), rgba(255, 255, 255, .02));
    box-shadow: inset 0 0 0 1px rgba(216, 177, 106, .16);
}
.class-skill > img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(0, 0, 0, .45);
}
.about-content .class-skill h3 {
    margin: 0 0 4px;
    font-size: 15px;
    letter-spacing: .03em;
    text-transform: none;
    color: #f1e2bf;
}
.class-skill p { margin: 0 0 6px; }
.class-skill__level {
    color: var(--u-gold);
    font-size: 12px;
    letter-spacing: .04em;
}
.class-skill__combo {
    margin-top: 8px;
    color: var(--u-gold-hi);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.class-skill__note { font-size: 13px; }
.class-pill {
    display: inline-block;
    margin: 0 0 6px;
    padding: 1px 7px;
    border: 1px solid rgba(216, 177, 106, .45);
    color: #e6d3a4;
    font-family: var(--font-accent-bold), serif;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.class-pill--new {
    color: #1a140c;
    background: var(--u-gold);
    border-color: transparent;
}
.class-skill__origins {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 4px 0 8px;
    padding: 0;
    list-style: none;
}
.class-skill__origins li {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.class-skill__origins li::before { content: none; }
.class-skill__origins img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 3px;
    background: rgba(0, 0, 0, .4);
}
.class-ranks { margin-top: 6px; }
.class-ranks summary {
    cursor: pointer;
    color: var(--u-gold);
    font-size: 13px;
}
.class-ranks table { margin-top: 8px; font-size: 13px; }
.class-ranks td:nth-child(1),
.class-ranks td:nth-child(2),
.class-ranks th:nth-child(1),
.class-ranks th:nth-child(2) { white-space: nowrap; width: 1%; }

@media (max-width: 960px) {
    .about-nav__list:has(.about-class-list.is-open) {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: visible;
    }
    .about-nav__list:has(.about-class-list.is-open) > li {
        flex: none;
        width: 100%;
        scroll-snap-align: none;
    }
    .about-nav__list:has(.about-class-list.is-open) .about-link {
        width: 100%;
        white-space: normal;
    }
}

.boss-week { overflow-x: auto; margin: 0 0 8px; }
.boss-week table { min-width: 820px; margin: 0; }
.boss-week th,
.boss-week td {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 13px;
}
.boss-week tbody th {
    text-align: left;
    text-transform: none;
    letter-spacing: .03em;
    white-space: normal;
    min-width: 148px;
    color: #f1e2bf;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
}
.boss-week td:empty::before {
    content: "—";
    color: rgba(216, 177, 106, .28);
}
.boss-week .is-spawn b {
    display: block;
    color: var(--u-gold-hi);
    font-family: var(--font-accent-bold), serif;
    font-weight: normal;
    letter-spacing: .04em;
}
.boss-week .is-spawn small {
    display: block;
    margin-top: 2px;
    color: var(--u-muted, #bdb4a2);
    font-size: 11px;
    letter-spacing: .04em;
}
.boss-drops {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.boss-drops > li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 12px 14px;
    background: rgba(216, 177, 106, .06);
    box-shadow: inset 0 0 0 1px rgba(216, 177, 106, .16);
}
.boss-drops > li::before { content: none; }
.boss-drops strong { display: block; margin-bottom: 4px; }
.boss-drops span { color: #cfc4b2; font-size: 14px; line-height: 1.45; }