/* Restrained R2-inspired typography; game rarity colors and API hooks stay unchanged. */
@font-face {
    font-family: "Turbo Roman";
    src: url('../fonts/cinzel-variable.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
:root {
    --bg: #111314;
    --bg-deep: #0b0d0e;
    --surface: #191c1e;
    --surface-raised: #202427;
    --surface-sunken: #121517;
    --surface-glow: #282e30;
    --surface-2: #202427;
    --ink: #f2f3f0;
    --ink-2: #c5cbcb;
    --ink-muted: #9aa4a5;
    --ink-subtle: #778182;
    --text-muted: #9aa4a5;
    --bone: #f2f3f0;
    --bone-dim: #b5bdbd;
    --crimson: #c73143;
    --crimson-hot: #f2737d;
    --crimson-dark: #941e2e;
    --gold: #d5b873;
    --gold-bright: #e8ca87;
    --gold-dark: #a99160;
    --gold-soft: #d5b87312;
    --rule: #32393c;
    --rule-strong: #50595d;
    --rule-gold: #d5b87360;
    --teal: #7dc7b7;
    --chrome: #b8bcc0;
    --chrome-bright: #e3e4e5;
    --chrome-edge: #767c82;
    --font-brand: "Turbo Roman", "Times New Roman", serif;
    --font-display: "Inter", "Segoe UI", sans-serif;
    --font-serif: "Inter", "Segoe UI", sans-serif;
    --font-ui: var(--font-sans);
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.125rem;
    --fs-display: 4.5rem;
    --lh-tight: 1.15;
    --radius-sm: 2px;
    --radius: 2px;
    --radius-lg: 4px;
    --radius-pill: 3px;
    --topbar-h: 64px;
    --container: 1440px;
    --shadow-glow-gold: none;
    --shadow-glow-red: none;
    --ease-ui: cubic-bezier(.2, .75, .25, 1);
    --shadow-surface: inset 0 1px 0 #ffffff0b, 0 2px 3px #0003, 0 12px 28px -16px #000b;
    --shadow-control: inset 0 1px 0 #ffffff18, inset 0 -1px 0 #0005, 0 2px 0 #090b0c, 0 5px 10px #0003;
}

*, *::before, *::after { letter-spacing: 0 !important; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 160px; }
body { background: var(--bg); font-size: 15px; }
body::before { display: none; }
h1, h2, h3, h4 { text-transform: none; text-shadow: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
input, select, textarea { min-width: 0; max-width: 100%; }
input::placeholder, textarea::placeholder { color: #8a9699; opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--chrome-bright); outline-offset: 2px; }
.page-shell, .content, .container { min-width: 0; max-width: 100%; }
.container { max-width: var(--container); }
.content { padding-top: 28px; }
.content :is(section, article, aside, form, fieldset), .content [class$="-grid"] > *, .content [class$="-layout"] > * { min-width: 0; }
.content :is(h1, h2, h3, h4, p, dd, label), .site-footer { overflow-wrap: anywhere; }
.ui-icon { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; vertical-align: middle; }
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule); border-radius: 2px; background: var(--surface); color: var(--ink-2); }
.icon-button:hover { color: var(--bone); border-color: var(--gold); }
.skip-link { position: fixed; z-index: 100; left: 16px; top: 10px; padding: 12px 18px; background: var(--surface); color: var(--bone); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

/* Two measured header rows keep account controls out of navigation's width. */
.page-shell > .topbar { position: sticky; top: 0; z-index: 40; background: #111416f5; border-bottom: 1px solid #424b4e; box-shadow: inset 0 1px 0 #ffffff08, 0 4px 16px #0004; backdrop-filter: blur(14px); }
.topbar-inner { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, auto); gap: 0 24px; width: 100%; min-width: 0; }
.topbar-inner > .brand { grid-column: 1; grid-row: 1; min-width: 0; height: 76px; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 72px; height: 62px; flex: 0 0 72px; font: 500 53px/1 var(--font-brand); color: #dedfe0; background: none; border: 0; box-shadow: none; clip-path: none; text-shadow: 0 1px 0 #fff, 0 3px 2px #000; }
.brand-emblem { width: 48px; height: 42px; object-fit: contain; filter: none; }
.brand-emblem--footer { width: 48px; height: 48px; margin: 0; }
.brand--footer { display: inline-flex; align-items: center; gap: 12px; }
.brand:hover .brand-emblem { filter: none; transform: none; }
.brand-copy strong { font: 500 25px/1 var(--font-brand); color: var(--chrome-bright); }
.brand-copy small { margin-top: 4px; font: 11px/1.3 var(--font-sans); color: var(--ink-muted); text-transform: none; }
.topbar-side { grid-column: 2; grid-row: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.topbar-side .user-chip { max-width: 210px; min-width: 0; }
.user-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-side :is(.secondary-button, .ghost-button) { min-height: 36px; padding: 7px 12px; font-size: 12px; }
.language-switcher { border: 0; border-radius: 2px; padding: 0; background: transparent; }
.language-option { padding: 5px 8px; border-radius: 2px; min-width: 30px; font: 600 11px/1.4 var(--font-sans); }
.language-option.is-active { background: var(--surface-raised); color: var(--bone); box-shadow: inset 0 -2px var(--chrome); }
.social-button { border-radius: 2px; background: transparent; width: 36px; height: 36px; }
.nav { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0; width: 100%; min-width: 0; border-top: 1px solid #ffffff12; }
.nav a { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; min-height: 54px; padding: 12px 14px; font: 500 14px/1.35 var(--font-sans); text-transform: none; white-space: normal; border-inline-end: 1px solid #ffffff09; color: #cbd0d0; }
.nav a::after { left: 14px; right: 14px; bottom: 0; width: auto !important; height: 2px; background: var(--chrome); transform: none; opacity: 0; }
body[data-page] .nav a[aria-current="page"] { color: #fff; background: #ffffff09; }
.nav a[aria-current="page"] span { color: var(--chrome-bright); }
.nav a[aria-current="page"]::after, .nav a:hover::after { opacity: 1; }
.nav-toggle { display: none; }

.primary-button, .secondary-button, .ghost-button, .tab-button, .auction-action, .auction-chip { border-radius: 2px; font-family: var(--font-sans); text-transform: none; font-weight: 600; white-space: normal; line-height: 1.35; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; }
.primary-button { background: #a72b31; border-color: #c3575a #8c282e #632024; color: #fff; box-shadow: inset 0 1px 0 #ffffff12, 0 2px 0 #541b20, 0 6px 14px #0003; text-shadow: none; }
.primary-button:hover { background: #bc343b; color: #fff; border-top-color: #d57b7e; box-shadow: inset 0 1px 0 #ffffff18, 0 2px 0 #541b20, 0 8px 18px #0004; }
.primary-button::after { display: none; }
.secondary-button { background: linear-gradient(180deg, #2c3336, #1b2022); border-color: #566065 #3d474b #2b3336; color: var(--bone); box-shadow: var(--shadow-control); }
.secondary-button:hover { background: linear-gradient(180deg, #354044, #242b2e); border-color: var(--gold-dark); box-shadow: inset 0 1px 0 #ffffff24, 0 3px 0 #090b0c, 0 10px 20px #0005; }
.tab-button { background: var(--surface-sunken); border-color: var(--rule); }
.tab-button.is-active, .rating-nav-button.is-active { background: var(--surface-raised); border-color: var(--gold); color: var(--gold-bright); box-shadow: inset 0 -2px var(--gold); }
.tab-strip, .item-filter-bar, .auction-filter-bar, .pagination-strip { flex-wrap: wrap; }
.tab-strip { gap: 6px; }
.tab-button:hover { background: var(--surface-raised); }
.content :is(.feature-card, .info-panel, .table-panel, .explorer-panel) { border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; background: transparent; }
.auth-panel, .balance-panel { background: linear-gradient(155deg, #252b2d, var(--surface) 60%); box-shadow: var(--shadow-surface); border-radius: 3px; }
.auth-panel::after, .balance-panel::after { opacity: 0.7; }
.info-panel::after, .server-offer::after { display: none; }
.feature-card::before, .table-panel::before, .explorer-panel::before { display: none; }
.page-header { text-align: left; margin: 0 0 24px; padding-top: 0; }
.page-header :is(h1, p) { margin-left: 0; margin-right: 0; max-width: 76ch; }
.page-header p { font-family: var(--font-sans); font-size: 14px; color: var(--ink-muted); }
.eyebrow { font: 600 11px/1.5 var(--font-sans); color: var(--gold); margin-bottom: 10px; }
.eyebrow::before, .eyebrow::after { display: none; }
.compact-copy { color: var(--ink-muted); line-height: 1.6; font-size: 13px; font-style: normal; }
.section-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.item-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.item-catalog-grid > .placeholder-card { grid-column: 1 / -1; }
.item-catalog-grid { scroll-margin-top: 150px; }
.item-catalog-grid .drop-select-card { min-height: 78px; }
.drop-select-copy strong { overflow-wrap: anywhere; }
.item-icon-fallback { display: inline-grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; background: var(--surface-sunken); border: 1px solid var(--rule); color: var(--ink-subtle); }
.item-icon-fallback .ui-icon { width: 23px; height: 23px; }
.monster-spotlight-meta h2 { font-size: 20px; }
.item-icon-shell { background: var(--surface); box-shadow: none; }
.item-meta-value { font-size: 20px; }

/* The hero sits outside .container: negative horizontal gutters caused overflow. */
.hero-cinematic { margin: -28px 0 0; width: 100%; height: min(550px, calc(100svh - 240px)); min-height: 430px; justify-content: flex-start; border-bottom: 0; background: #d9dad7; }
.hero-cinematic::before, .hero-cinematic::after, .hero-stage::before, .hero-stage::after { display: none; }
.hero-stage { background: #d9dad7 url('../images/hero-steel.png') center 18% / cover no-repeat; }
.hero-content { width: 100%; max-width: var(--container); padding: 30px var(--gutter); margin: auto; text-align: left; color: #1a2023; }
.hero-eyebrow { display: flex; justify-content: flex-start; gap: 12px; margin-bottom: 14px; color: #383e40; font: 700 11px/1.5 var(--font-sans); }
.hero-eyebrow::before { width: 22px; height: 2px; background: var(--crimson-hot); }
.hero-eyebrow::after { display: none; }
.hero-title { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 20px; font: 500 98px/1.05 var(--font-brand); background: none; color: #2d3336; -webkit-text-fill-color: initial; filter: none; text-shadow: 0 1px 0 #fff9; margin: 0 0 24px; padding: 0; width: fit-content; max-width: 100%; overflow-wrap: normal; }
.hero-title .hero-title-prefix { font-size: 1.4em; color: #252c30; }
.hero-title .hero-title-name { color: #343b3f; }
.hero-title-name::after { display: none; }
.hero-subtitle { font: 700 24px/1.3 var(--font-sans); color: #1a2023; margin: 0 0 10px; }
.hero-tag { font: 500 14px/1.65 var(--font-sans); color: #414849; text-shadow: none; margin: 0; max-width: 420px; }
.hero-actions { justify-content: flex-start; margin-top: 24px; }
.hero-actions :is(.primary-button, .secondary-button) { min-height: 48px; font-size: 13px; padding: 12px 24px; }
.hero-actions .secondary-button { background: #e8e9e5d9; color: #22282a; border-color: #697273; box-shadow: 0 3px 0 #6a727240; }
.hero-actions .secondary-button:hover { background: #fff; border-color: #252c2e; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; color: #353d40; font-size: 11px; font-weight: 600; }
.hero-facts span + span { border-left: 1px solid #252c2e40; padding-left: 20px; }
.home-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 36px; }
.shortcut-panel { position: relative; isolation: isolate; display: flex; align-items: flex-end; width: 100%; max-width: 100%; min-width: 0; min-height: 160px; aspect-ratio: 2 / 1; overflow: hidden; border: 1px solid #4b4e50; border-radius: 2px; background: #121416; box-shadow: inset 0 0 0 3px #111314, 0 5px 12px #0003; }
.shortcut-art { position: absolute; z-index: -2; inset: 0 0 auto; width: 100%; aspect-ratio: 2 / 1; background: url('../images/section-panels-v1.png') 0 0 / 200% 200% no-repeat; transition: filter 240ms, transform 360ms var(--ease-ui); }
[data-shortcut="drop"] .shortcut-art { background-position: 100% 0; }
[data-shortcut="enhancement"] .shortcut-art { background-position: 0 100%; }
[data-shortcut="rating"] .shortcut-art { background-position: 100% 100%; }
.shortcut-panel::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #0b0d0f 0%, #0b0d0fc9 12%, #0b0d0f00 55%); pointer-events: none; }
.shortcut-panel::after { content: ''; position: absolute; inset: 4px; border: 1px solid #ffffff16; pointer-events: none; }
.shortcut-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; padding: 20px; }
.shortcut-caption strong { color: #f0eeea; font-size: 20px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; text-shadow: 0 2px 3px #000; }
.shortcut-caption .ui-icon { width: 18px; height: 18px; flex-basis: 18px; color: #c9c6be; }
.shortcut-panel:is(:hover, :focus-visible) { border-color: #bbb8b0; box-shadow: inset 0 0 0 3px #111314, 0 8px 16px #0004; }
.shortcut-panel:is(:hover, :focus-visible) .shortcut-art { filter: brightness(1.15); }
.section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { font-size: 28px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--chrome); font-size: 12px; font-weight: 600; }
.text-link:hover { color: var(--bone); }
.atlas-search { display: flex; align-items: center; gap: 14px; border: 1px solid var(--rule-strong); background: var(--surface-sunken); padding: 6px 6px 6px 18px; min-width: 0; }
.atlas-search > .ui-icon { color: var(--ink-muted); }
.atlas-search:focus-within { border-color: var(--chrome-bright); box-shadow: 0 0 0 1px var(--chrome-bright); }
.atlas-search input { width: 100%; min-width: 0; flex: 1; min-height: 40px; border: 0; outline: 0; background: transparent; padding: 0; font-size: 14px; }
.atlas-search .primary-button { font-size: 12px; padding: 10px 20px; flex-shrink: 0; }
.discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.discovery-card, .atlas-card { position: relative; min-width: 0; border: 1px solid var(--rule); border-radius: 2px; background: #191c1e; padding: 24px; box-shadow: inset 0 1px 0 #ffffff08; transition: transform 240ms var(--ease-ui), box-shadow 240ms var(--ease-ui), border-color 200ms, background-color 200ms; }
.discovery-card::after, .atlas-card::after { content: ''; position: absolute; pointer-events: none; top: -1px; right: -1px; width: 12px; height: 12px; border-top: 1px solid var(--chrome-edge); border-right: 1px solid var(--chrome-edge); }
.discovery-card::before, .atlas-card::before { content: ''; position: absolute; pointer-events: none; bottom: -1px; left: -1px; width: 12px; height: 12px; border-bottom: 1px solid var(--chrome-edge); border-left: 1px solid var(--chrome-edge); }
.discovery-card:hover, .atlas-card:hover { border-color: var(--chrome-edge); background: #202427; box-shadow: inset 0 1px 0 #ffffff10, 0 8px 20px -12px #000b; }
.discovery-card > .ui-icon, .discovery-items { display: flex; width: 100%; height: 64px; margin: 24px 0; color: var(--chrome); justify-content: flex-start; }
.discovery-card > .ui-icon { width: 58px; stroke-width: 1.2; }
.discovery-items { gap: 12px; }
.discovery-items img { object-fit: contain; width: 64px; height: 64px; image-rendering: pixelated; }
.discovery-card h3 { font-size: 24px; margin-bottom: 10px; }
.discovery-card p { font-size: 13px; color: var(--ink-muted); margin-bottom: 24px; }
.server-guide { margin-top: 36px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.server-guide > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none; }
.server-guide > summary::-webkit-details-marker { display: none; }
.server-guide > summary strong { font-size: 19px; color: var(--bone); }
.server-guide > summary > svg { color: var(--chrome); transition: transform 160ms; }
.server-guide[open] > summary > svg { transform: rotate(90deg); }
.server-offer { border: 0; background: transparent; box-shadow: none; padding: 0 0 28px; margin-bottom: 0; }
.server-offer-head { text-align: left; max-width: none; margin-bottom: 26px; }
.server-offer-head :is(h2, p) { margin-left: 0; max-width: 80ch; }
.server-offer-head h2 { font-size: 21px; }
.server-offer-head p { font-size: 14px; font-family: var(--font-sans); }
.server-offer-actions { justify-content: flex-start; }
.server-offer-panel { background: var(--surface); box-shadow: none; }
.server-offer-panel h3 { font-size: 17px; }
.server-offer-panel li, .server-offer-panel p { font-size: 13px; }
.server-offer-panel--wide { grid-template-columns: minmax(0, 1fr); }
.server-offer-panel--autosell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.community-band { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding: 40px 0 8px; }
.community-band h2 { font-size: 22px; }
.community-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.community-actions a { font-size: 12px; }

/* Catalogs retain the same API hooks and use a shared navigation rail. */
.atlas-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; gap: 8px; font-size: 12px; color: var(--ink-muted); }
.breadcrumbs [aria-current] { color: var(--ink-2); overflow-wrap: anywhere; }
.bookmark-button { flex-shrink: 0; font-size: 12px; }
.bookmark-button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.atlas-nav { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); }
.atlas-section-select { display: none; }
.atlas-nav a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; padding: 9px 12px; border: 1px solid transparent; color: var(--ink-muted); }
.atlas-nav a:hover { background: var(--surface); color: var(--bone); }
.atlas-nav a[aria-current] { border-color: var(--chrome-edge); color: var(--chrome-bright); background: var(--surface); box-shadow: inset 0 -2px var(--chrome); }
.atlas-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 0 30px; }
.atlas-intro .atlas-search { flex: 0 1 580px; }
.atlas-intro h1 { font-size: 34px; }
.atlas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: none; margin-inline: 0; }
.atlas-card-top { display: flex; align-items: center; gap: 12px; color: var(--chrome); margin-bottom: 24px; }
.atlas-card-top > .ui-icon:first-child { width: 28px; height: 28px; flex-basis: 28px; }
.atlas-card-top > .ui-icon:last-child { margin-left: auto; color: var(--ink-subtle); }
.atlas-card h2 { font-size: 22px; margin-bottom: 10px; }
.atlas-card p { font-size: 13px; color: var(--ink-muted); }
.atlas-library { padding: 22px 0; margin-bottom: 24px; border-block: 1px solid var(--rule); }
.atlas-library h2 { font-size: 18px; }
.library-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.library-tabs button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: transparent; border: 1px solid var(--rule); color: var(--ink-muted); font-size: 12px; }
.library-tabs button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-dark); }
.library-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.library-entry { display: flex; align-items: center; gap: 6px; min-width: 0; background: var(--surface); border: 1px solid var(--rule); padding: 10px 12px; }
.library-entry a { display: block; flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.library-entry small { display: block; color: var(--ink-muted); font-size: 10px; }
.library-entry .icon-button { width: 32px; height: 32px; flex-shrink: 0; }
.library-empty { grid-column: 1 / -1; color: var(--ink-muted); font-size: 13px; padding: 10px 0; }
.drop-toolbar { gap: 20px; flex-wrap: wrap; }
.drop-search { min-width: 0; max-width: 100%; }
.drop-search input, .auction-field, .auth-form input { border-radius: 2px; background: var(--surface-sunken); }
.image-card, .drop-select-card, .monster-mini-card, .transformation-grade, .transformation-card { border-radius: 3px; }
.image-card-grid--locations { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.image-card::before { display: none; }
.download-card { background: var(--surface); padding: 24px; border-radius: 2px; }
.download-card::before { width: 24px; height: 2px; background: var(--gold); opacity: 1; }
.drop-finder-results, .drop-finder-sources, .rating-content, .rating-panel, .table-panel { min-width: 0; max-width: 100%; }
.table-wrap, .table-scroll, .table-responsive { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }
.rating-sidebar { align-self: start; background: transparent; border: 0; padding: 0; }
.rating-layout { grid-template-columns: 210px minmax(0, 1fr); }
.rating-nav-button { border-radius: 2px; text-transform: none; font-family: var(--font-sans); }
.rating-nav-button.is-active::before { display: none; }
.rating-entry-main span { font-style: normal; font-size: 12px; }
.rating-entry { background: var(--surface); border-color: var(--rule); }
.rating-entry:hover { background: var(--surface-raised); }
.referral-layout { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.site-footer { background: #0d1011; border-top: 1px solid var(--rule); }
.site-footer-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 36px; }
.site-footer-columns { min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-footer-meta { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 20px; border-top: 1px solid var(--rule); }
.site-footer-meta > .social-button { display: none; }
.site-footer-owner { margin-left: auto; }
.site-footer h4 { font: 600 12px/1.4 var(--font-sans); color: var(--bone); }
.site-footer-tagline, .site-footer a { font-size: 12px; }
.site-footer-copy, .site-footer-owner { font-size: 11px; }
.back-to-top { border-radius: 2px; width: 40px; height: 40px; background: var(--surface); box-shadow: 0 4px 16px #0004; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #69777a; }

/* Feedback never changes control dimensions or intercepts native scrolling. */
:is(.primary-button, .secondary-button, .ghost-button, .icon-button, .tab-button, .auction-action, .auction-chip, .rating-nav-button, .pagination-strip button, .pagination-strip a) {
    transition: transform 180ms var(--ease-ui), box-shadow 220ms var(--ease-ui), background-color 180ms, border-color 180ms, color 180ms, opacity 180ms;
}
.icon-button { background: linear-gradient(180deg, #2a3134, #1a1e20); box-shadow: var(--shadow-control); }
.auction-action:not(:disabled):not(.is-own) { background: linear-gradient(180deg, #e8ca87, #baa063); border-color: #f4dba4 #bca16a #806a3c; box-shadow: inset 0 1px 0 #ffffff50, 0 2px 0 #68552f, 0 5px 12px #0004; }
.auction-action.is-own:not(:disabled) { box-shadow: var(--shadow-control); }
:is(.tab-button, .rating-nav-button, .library-tabs button) { box-shadow: inset 0 1px 0 #ffffff08; }
:is(.tab-button, .rating-nav-button).is-active { background: linear-gradient(180deg, #343b3e, #22282a); box-shadow: inset 0 1px 0 #ffffff12, inset 0 -2px var(--gold), 0 3px 8px #0003; }
:is(a, button, summary):focus-visible { outline: 2px solid var(--chrome-bright); outline-offset: 4px; }
:is(.nav a, .atlas-nav a, .home-shortcuts a, .text-link, .site-footer a) { transition: color 180ms, background-color 180ms, border-color 220ms, box-shadow 220ms; }
:is(.primary-button, .secondary-button, .text-link, .home-shortcuts a, .atlas-card) .ui-icon { transition: transform 220ms var(--ease-ui); }
:is(.image-card, .drop-select-card, .monster-mini-card, .transformation-card, .download-card) { box-shadow: var(--shadow-surface); }
:is(.auth-form, .drop-search, .auction-field) input:focus { box-shadow: inset 0 2px 5px #0004; }
.atlas-search { box-shadow: inset 0 2px 7px #0005, 0 1px 0 #ffffff0a; }
.site-footer { box-shadow: inset 0 1px 0 #ffffff06; }

@media (hover: hover) and (pointer: fine) {
    :is(.primary-button, .secondary-button, .icon-button, .auction-action):not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-2px); }
    :is(.discovery-card, .atlas-card):hover { transform: translateY(-2px); }
    :is(.primary-button, .text-link):hover .ui-icon:last-child { transform: translateX(3px); }
    .shortcut-panel:hover .shortcut-art { transform: scale(1.035); }
    .shortcut-panel:hover .shortcut-caption .ui-icon,
    .atlas-card:hover > .ui-icon:last-child,
    .atlas-card:hover .atlas-card-top > .ui-icon:last-child { transform: translate(2px, -2px); }
    .primary-button:not(:disabled):not([aria-disabled="true"])::after {
        display: block; inset: 0; width: 100%; background: linear-gradient(110deg, transparent 25%, #ffffff1c 50%, transparent 75%);
        transform: translateX(-110%); transition: transform 550ms var(--ease-ui);
    }
    .primary-button:not(:disabled):not([aria-disabled="true"]):hover::after { transform: translateX(110%); }
}
:is(.primary-button, .secondary-button, .icon-button, .auction-action):not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(1px); box-shadow: inset 0 2px 5px #0005, 0 1px 0 #090b0c; transition-duration: 70ms;
}
:is(.primary-button, .secondary-button, .ghost-button, .icon-button, .tab-button, .auction-action, .auction-chip):is(:disabled, [aria-disabled="true"]) {
    transform: none; box-shadow: none; opacity: .5; cursor: not-allowed; text-shadow: none;
}
@media (hover: none) {
    :is(.primary-button, .secondary-button, .ghost-button, .tab-button, .auction-action, .auction-chip, .rating-nav-button):hover { transform: none; }
}

@media (max-width: 1100px) {
    .nav { gap: 0; }
    .nav a { padding-inline: 10px; font-size: 12px; min-height: 48px; }
    .hero-title { font-size: 84px; }
    .shortcut-caption { padding: 16px; }
    .shortcut-caption strong { font-size: 18px; }
    .site-footer-inner { grid-template-columns: 1fr; }
    .atlas-intro .atlas-search { flex-basis: 50%; }
    .server-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    :root { --gutter: 18px; }
    .topbar-inner { gap: 0 12px; }
    .topbar-inner > .brand { height: 60px; }
    .topbar-side { gap: 6px; }
    .topbar-side .social-button { display: none; }
    .topbar-side .user-chip { max-width: 120px; }
    .nav a { flex: 1 0 auto; padding-inline: 8px; }
    .hero-cinematic { min-height: 430px; height: auto; }
    .hero-title { font-size: 66px; gap: 14px; }
    .hero-subtitle { font-size: 21px; }
    .hero-stage { background-position: 50% 18%; }
    .hero-tag { max-width: 340px; }
    .home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 30px; }
    .discovery-grid, .atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .discovery-card:last-child { grid-column: 1 / -1; }
    .library-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atlas-intro { flex-direction: column; align-items: stretch; }
    .atlas-intro .atlas-search { flex-basis: auto; }
    .atlas-intro h1 { font-size: 28px; }
    .atlas-nav { gap: 4px; }
    .atlas-nav a { padding: 8px 10px; font-size: 11px; }
    .atlas-header { align-items: flex-start; flex-wrap: wrap; }
    .site-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rating-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .rating-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .rating-nav-button { padding: 10px 6px; text-align: center; font-size: 12px; }
    .rating-entry { gap: 10px; padding: 12px; }
    .rating-entry-value { grid-column: 1 / -1; justify-content: space-between; }
    .rating-entry-stat { min-width: 0; justify-items: start; }
    .rating-entry-stat span { font-size: 9px; }
}
@media (max-width: 600px) {
    html { scroll-padding-top: 16px; }
    .topbar-inner { grid-template-columns: 1fr; position: relative; }
    .topbar-inner > .brand { grid-row: 1; padding-right: 48px; }
    .topbar-side { grid-column: 1; grid-row: 2; justify-content: flex-start; padding-bottom: 10px; }
    .topbar-side [data-action="logout"] { padding: 7px; min-width: 32px; }
    .logout-label { display: none; }
    .topbar-side .nav-toggle { position: absolute; top: 10px; right: var(--gutter); }
    .nav { grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 8px; }
    .nav a { justify-content: flex-start; padding: 12px; }
    .navigation-ready .nav:not(.is-open) { display: none; }
    .navigation-ready .nav-toggle { display: inline-grid; }
    .navigation-ready .atlas-nav { display: none; }
    .navigation-ready .atlas-section-select { display: grid; gap: 6px; font-size: 11px; color: var(--ink-muted); margin-bottom: 24px; }
    .atlas-section-select select { width: 100%; padding: 10px 12px; font-size: 13px; min-height: 42px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--bone); }
    .page-shell > .topbar { position: relative; }
    .hero-cinematic { min-height: 430px; height: auto; }
    .hero-stage { background-image: url('../images/hero-steel-mobile.png'); background-size: cover; background-position: center bottom; }
    .item-catalog-grid { scroll-margin-top: 16px; }
    .hero-content { padding-block: 28px; }
    .hero-title { font-size: 46px; gap: 12px; margin-bottom: 22px; }
    .hero-subtitle { font-size: 19px; }
    .hero-tag { max-width: 210px; font-size: 12px; }
    .hero-facts { gap: 8px 12px; width: fit-content; background: #e0e2dfed; padding: 8px; font-size: 10px; }
    .hero-facts span + span { padding-left: 12px; }
    .hero-actions { gap: 8px; }
    .hero-actions :is(.primary-button, .secondary-button) { padding: 11px 14px; font-size: 12px; }
    .home-shortcuts { gap: 10px; margin-top: 14px; }
    .shortcut-panel { min-height: 124px; }
    .shortcut-caption { gap: 6px; padding: 12px; }
    .shortcut-caption strong { font-size: 16px; }
    .shortcut-caption .ui-icon { width: 14px; height: 14px; flex-basis: 14px; }
    .section-heading h2, .community-band h2 { font-size: 20px; }
    .discovery-grid, .atlas-grid, .library-list { grid-template-columns: minmax(0, 1fr); }
    .discovery-card, .atlas-card { padding: 22px; }
    .atlas-search { gap: 8px; padding-left: 12px; }
    .atlas-search .primary-button { padding: 10px 12px; }
    .atlas-search .primary-button svg { display: none; }
    .atlas-search input { font-size: 13px; }
    .community-actions { width: 100%; }
    .community-actions a { width: 100%; }
    .server-offer-grid, .server-offer-panel--autosell, .ammo-system-grid { grid-template-columns: minmax(0, 1fr); }
    .content :is(.feature-card, .table-panel, .explorer-panel, .info-panel) { padding-inline: 0; }
    .transformation-grade > summary { grid-template-columns: minmax(0, 1fr) 36px; }
    .transformation-grade > summary > p { grid-column: 1; }
    .site-footer-owner { margin-left: 0; }
}
@media (max-width: 360px) {
    .topbar-side { gap: 4px; }
    .language-switcher { gap: 0; }
    .language-option { min-width: 26px; padding-inline: 4px; }
    .topbar-side .user-chip { max-width: 76px; }
    .hero-cinematic { min-height: 400px; }
    .hero-content { padding-block: 22px; }
    .hero-title { font-size: 40px; gap: 10px; }
    .hero-subtitle { font-size: 17px; }
    .hero-tag { max-width: 180px; }
    .hero-facts { gap: 6px 8px; }
    .hero-facts span + span { padding-left: 8px; }
    .hero-actions :is(.primary-button, .secondary-button) { padding-inline: 10px; font-size: 11px; gap: 6px; }
    .hero-actions .ui-icon { width: 16px; height: 16px; flex-basis: 16px; }
    .shortcut-caption strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    :is(.primary-button, .secondary-button, .ghost-button, .icon-button, .tab-button, .auction-action, .auction-chip, .rating-nav-button, .discovery-card, .atlas-card):is(:hover, :active),
    :is(.primary-button, .text-link, .home-shortcuts a, .atlas-card):hover .ui-icon { transform: none !important; }
    .shortcut-panel:is(:hover, :focus-visible) .shortcut-art { transform: none; }
    .primary-button::after { display: none !important; }
}