@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  --bg: #070605;
  --panel: #12110f;
  --panel-2: #191715;
  --panel-3: #211e1a;
  --red: #d9251c;
  --red-bright: #f04438;
  --text: #f2eee8;
  --muted: #b7afa6;
  --soft: #847d75;
  --line: rgba(242, 238, 232, .16);
  --line-strong: rgba(242, 238, 232, .28);
  --success: #69c07b;
  --warning: #e6aa45;
  --danger: #ef6259;
  --radius: 2px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 Roboto, Arial, sans-serif;
  overflow-x: hidden;
}
body:has(dialog[open]) { overflow: hidden; }
button, a, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { max-width: 100%; }
.shell { width: min(1420px, calc(100% - 40px)); margin-inline: auto; }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  transform: translateY(-160%); padding: 12px 16px;
  background: var(--text); color: var(--bg); text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }
.demo-banner {
  position: sticky; top: 0; z-index: 60; min-height: 38px;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  padding: 7px 16px; border-bottom: 1px solid rgba(240, 68, 56, .45);
  background: rgba(16, 9, 7, .96); backdrop-filter: blur(12px);
}
.demo-banner span { color: var(--red-bright); font: 700 12px Oswald, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.demo-banner p { margin: 0; color: var(--muted); font-size: 13px; }

.hero {
  min-height: min(760px, 86vh); display: flex; flex-direction: column;
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.01)), url('assets/site/hero.webp') center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.nav { min-height: 82px; display: flex; align-items: center; gap: 30px; }
.brand { color: var(--text); font: 700 28px Oswald, sans-serif; letter-spacing: .02em; text-decoration: none; }
.brand span, .eyebrow, .step { color: var(--red-bright); }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { color: var(--text); font-family: Oswald, sans-serif; text-decoration: none; text-transform: uppercase; }
.hero__actions { display: flex; gap: 12px; margin-top: auto; padding-bottom: 58px; }

.cta, .ghost, .text-button, .reset-button, .card-button {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--text); background: rgba(7, 6, 5, .78); padding: 0 22px;
  font: 600 14px Oswald, sans-serif; letter-spacing: .04em; text-decoration: none; text-transform: uppercase;
}
.cta { background: var(--red); border-color: var(--red-bright); box-shadow: 0 10px 35px rgba(217,37,28,.22); }
.text-button { color: var(--red-bright); background: transparent; }
.reset-button { min-width: 150px; }
.card-button { width: 100%; margin-top: auto; background: var(--panel-3); }
.card-button:disabled { cursor: not-allowed; opacity: .65; }

.section-head { max-width: 800px; padding: 72px 0 32px; }
.section-head h1, .shelf h2, .after-store h2, .community h2, .modal h2 {
  margin: 0; font: 700 clamp(34px, 5vw, 72px)/.98 Oswald, sans-serif; text-transform: uppercase;
}
.section-head > p:last-child, .note, .shelf__intro, .shelf__head > span, .after-store p, .community p { color: var(--muted); }
.eyebrow, .step { margin: 0 0 8px; font: 700 12px Oswald, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.shelf { padding: 34px 0 52px; border-top: 1px solid var(--line); }
[data-store-section][hidden] { display: none !important; }

.category-browser { position: sticky; top: 72px; z-index: 60; padding: 10px 0; margin-bottom: 14px; border-block: 1px solid var(--line); background: rgba(10,8,7,.94); box-shadow: 0 12px 24px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.category-browser__head { display: grid; grid-template-columns: minmax(280px,.7fr) minmax(320px,1fr); gap: 28px; align-items: end; margin-bottom: 20px; }
.category-browser__head h2 { margin: 0; font: 700 clamp(28px,3.6vw,52px)/1 Oswald,sans-serif; text-transform: uppercase; }
.category-browser__head > p { max-width: 720px; margin: 0; color: var(--muted); }
.category-tiles { container-type: inline-size; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: clamp(7px,.65vw,11px); }
.category-tile { position: relative; min-width: 0; height: clamp(60px,4.6vw,72px); padding: 0; overflow: hidden; border: 1px solid var(--line); color: var(--text); background: #0b0908; text-align: left; isolation: isolate; }
.category-tile::before { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,#0b0908 0%,rgba(11,9,8,.98) 25%,rgba(11,9,8,.78) 52%,rgba(11,9,8,.12) 82%,transparent 100%); content: ''; pointer-events: none; }
.category-tile__image { position: absolute; top: 50%; right: -3px; width: clamp(68px,5.3vw,84px); height: clamp(68px,5.3vw,84px); display: block; background-image: url('assets/categories/amongrust-category-atlas-v1.png'); background-size: 400% 200%; background-position: var(--atlas-position); transform: translateY(-50%); transform-origin: center; transition: transform .18s ease,filter .18s ease; }
.category-tile__image--standalone { background-repeat: no-repeat; background-size: cover; background-position: center; }
.category-tile__copy { position: absolute; top: 50%; left: 9px; z-index: 2; width: 75%; transform: translateY(-50%); text-shadow: 0 2px 4px #000,0 0 8px #000; }
.category-tile__copy strong { display: block; overflow: hidden; font: 700 clamp(12px,1vw,15px)/1 Oswald,sans-serif; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.category-tile[data-category-group="building"] .category-tile__copy { width: 90%; }
.category-tile[data-category-group="building"] .category-tile__copy strong { font-size: clamp(10.5px,.9vw,13.5px); letter-spacing: -.025em; }
.category-tile[data-category-group="privileges"] .category-tile__copy strong,
.category-tile[data-category-group="ammo"] .category-tile__copy strong,
.category-tile[data-category-group="components"] .category-tile__copy strong { font-size: clamp(11px,.92vw,14px); }
.category-tile[data-category-group="electricity"] .category-tile__copy { width: 90%; }
.category-tile[data-category-group="electricity"] .category-tile__copy strong { font-size: clamp(10.5px,.9vw,13.5px); letter-spacing: -.02em; }
.category-tile[data-category-group="farming"] .category-tile__copy,
.category-tile[data-category-group="tools"] .category-tile__copy { width: 90%; }
.category-tile[data-category-group="farming"] .category-tile__copy strong,
.category-tile[data-category-group="tools"] .category-tile__copy strong { font-size: clamp(10.5px,.9vw,13.5px); letter-spacing: -.02em; }
.category-tile:hover:not(:disabled) .category-tile__image { transform: translateY(-50%) scale(1.055); filter: brightness(1.14); }
.category-tile.active { border-color: var(--red-bright); box-shadow: inset 0 -3px 0 var(--red),0 0 24px rgba(217,37,28,.22); }
.category-tile.active::after { position: absolute; inset: 0; border: 1px solid var(--red-bright); content: ''; pointer-events: none; }
.category-tile:disabled { cursor: default; }
.category-tile:disabled .category-tile__image { filter: saturate(.55) brightness(.66); }
.category-tile__status { position: absolute; top: 8px; right: 8px; padding: 3px 6px; background: rgba(7,6,5,.88); color: var(--warning); font: 700 9px Oswald,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.category-clear { min-height: 40px; margin-top: 12px; padding: 0 15px; border: 1px solid var(--red); color: var(--text); background: #35100d; font: 600 12px Oswald,sans-serif; text-transform: uppercase; }
.shelf__head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.shelf__head h2 { font-size: clamp(28px, 3.6vw, 52px); }
.shelf__intro { max-width: 820px; margin: 0 0 24px; }

.rank-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rank-card, .compact-card, .product-card, .state-card {
  min-width: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(145deg, var(--panel-2), var(--panel));
}
.rank-card { display: flex; flex-direction: column; }
.rank-card[data-tier="T5"] { border-color: var(--red); box-shadow: 0 0 28px rgba(217,37,28,.16); }
.rank-card__media { aspect-ratio: 1 / 1; overflow: hidden; background: #080706; }
.rank-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rank-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px; }
.rank-card h3, .compact-card h3, .product-card h3, .state-card h3 { margin: 0; font: 600 24px/1.06 Oswald, sans-serif; text-transform: uppercase; }
.rank-card p, .compact-card p, .product-card p, .state-card p { margin: 0; color: var(--muted); }
.rank-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 4px 0 8px; }
.rank-card__facts span { padding: 8px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 12px; }
.rank-card__facts strong { display: block; color: var(--text); font: 600 17px Oswald, sans-serif; }
.rank-card__price { margin-top: auto; padding-top: 10px; font: 600 20px Oswald, sans-serif; }
.badge { display: inline-flex; width: max-content; padding: 4px 7px; background: var(--red); font: 700 10px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.status-chip { display: inline-flex; width: max-content; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.status-chip::before { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); content: ''; }

.compact-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.compact-card { min-height: 220px; display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.placeholder { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(217,37,28,.55); color: var(--red-bright); font: 700 15px Oswald, sans-serif; }
.state { margin-top: auto; color: var(--soft); font: 700 11px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; }

.toolbar {
  display: grid; grid-template-columns: auto 1fr minmax(190px,.45fr) minmax(205px,.5fr) auto;
  gap: 10px; align-items: end; margin: 20px 0 14px;
}
.tabs { display: flex; }
.tabs button, input, select {
  min-height: 46px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--text); padding: 0 14px;
}
.tabs button { font: 600 14px Oswald, sans-serif; text-transform: uppercase; }
.tabs button.active { border-color: var(--red); color: #fff; background: #35100d; }
label { min-width: 0; }
.field-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; }
input, select { width: 100%; }
select { color-scheme: dark; }
.active-filters { min-height: 26px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.active-filters strong { color: var(--text); }
.product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.product-card { position: relative; min-height: 330px; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.product-card__media { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: #0a0908; }
.product-card img { width: 88%; height: 88%; object-fit: contain; }
.product-card--privilege { border-color: rgba(217,37,28,.48); background: linear-gradient(160deg,#191511,#0c0a09 72%); }
.product-card--privilege .product-card__media { border-bottom: 1px solid rgba(217,37,28,.35); }
.product-card--privilege .product-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: brightness(1.12) saturate(1.1); }
.product-card--privilege[data-duration="30"] { box-shadow: inset 0 -2px 0 rgba(240,68,56,.72); }
.product-card--privilege[data-duration="30"] .product-card__category { color: #ffb049!important; }
.privilege-variant { min-height: 470px; }
.privilege-variant .product-card__price { margin-top: auto; }
.privilege-variant .product-card__hint { margin: -4px 0 0; color: var(--soft); font-size: 11px; }
.term-toggle { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; border: 1px solid var(--line); }
.term-toggle button { min-height: 38px; border: 0; color: var(--muted); background: transparent; font: 600 12px Oswald,sans-serif; text-transform: uppercase; }
.term-toggle button + button { border-left: 1px solid var(--line); }
.term-toggle button.active { color: #fff; background: #7d1812; }
.term-tariffs { display: grid; gap: 7px; margin-top: auto; }
.term-tariffs label { cursor: pointer; }
.term-tariffs input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.term-tariffs span { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); color: var(--muted); }
.term-tariffs input:checked + span { border-color: var(--red-bright); color: #fff; background: rgba(217,37,28,.13); }
.term-tariffs b,.term-tariffs strong { font: 600 13px Oswald,sans-serif; }
.term-tariffs strong { margin: 0; }
.privilege-details-link { min-height: 38px; margin-top: auto; padding: 0; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); background: transparent; font: 600 12px Oswald,sans-serif; text-align: left; text-transform: uppercase; }
.split-purchase { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.split-purchase button { min-height: 61px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: #fff; background: #1a1714; }
.split-purchase button:last-child { border-color: var(--red); background: #35100d; }
.split-purchase span,.split-purchase strong { display: block; margin: 0; font: 600 12px Oswald,sans-serif; }
.split-purchase strong { margin-top: 3px; font-size: 15px; }
.stack-actions { display: grid; gap: 7px; margin-top: auto; }
.stack-actions button { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--line-strong); color: #fff; background: #171411; font: 600 11px Oswald,sans-serif; text-align: left; text-transform: uppercase; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.stack-actions button:first-child { justify-content: center; }
.stack-actions button:hover,
.stack-actions button:focus-visible { border-color: var(--red-bright); background: #35100d; box-shadow: inset 3px 0 0 var(--red-bright), 0 0 16px rgba(217,37,28,.16); transform: translateY(-1px); }
.stack-actions strong { margin: 0; color: #fff; font-size: 13px; white-space: nowrap; }
.modal-term-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 22px 0; padding: 0; border: 0; }
.modal-term-picker legend { width: 100%; margin-bottom: 8px; color: var(--soft); font: 600 12px Oswald,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.modal-term-picker label { cursor: pointer; }
.modal-term-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.modal-term-picker span { min-height: 72px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 13px 15px; border: 1px solid var(--line); color: var(--muted); font: 600 16px Oswald,sans-serif; text-transform: uppercase; }
.modal-term-picker input:checked + span { border-color: var(--red-bright); color: #fff; background: rgba(217,37,28,.14); box-shadow: inset 0 -2px 0 var(--red); }
.modal-term-picker span strong { color: #fff; }
.modal-term-picker span small { grid-column: 1 / -1; color: #ffb049; }
.product-card--bundle { border-color: rgba(202,92,38,.5); background: linear-gradient(160deg,#17130f,#0b0908 72%); }
.product-card--bundle .product-card__media { border-bottom: 1px solid rgba(202,92,38,.32); }
.product-card--bundle .product-card__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.06) saturate(1.04); transition: transform .25s ease, filter .25s ease; }
.product-card--bundle:hover .product-card__media img { transform: scale(1.025); filter: brightness(1.13) saturate(1.08); }
.product-card--bundle .product-card__category { color: #ff9e56!important; }
.product-card__summary { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-card strong small { display: block; color: var(--soft); font: 500 10px Oswald, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.image-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: var(--soft); font: 700 28px Oswald, sans-serif; background: radial-gradient(circle, #29241f, #0b0a09 70%); }
.product-card__category { color: var(--red-bright)!important; font: 700 10px Oswald, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.product-card h3 { font-size: 19px; text-transform: none; overflow-wrap: anywhere; }
.product-card strong { margin-top: auto; font: 700 18px Oswald, sans-serif; }
.empty-state { padding: 54px 24px; border: 1px dashed var(--line-strong); text-align: center; background: var(--panel); }
.empty-state h3 { margin: 0 0 8px; font: 600 30px Oswald, sans-serif; text-transform: uppercase; }
.empty-state .cta { margin-top: 12px; }
.pagination { display: flex; gap: 8px; justify-content: center; align-items: center; padding: 30px 0 0; }
.pagination button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.pagination button.active { background: var(--red); border-color: var(--red); }
.pagination button:disabled { cursor: not-allowed; opacity: .35; }

.state-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.state-card { min-height: 180px; display: flex; flex-direction: column; gap: 9px; padding: 18px; text-align: left; }
.state-card::before { width: 30px; height: 3px; background: var(--red); content: ''; }
.state-card h3 { font-size: 21px; }
.state-card .state { margin-top: auto; }
.after-store { padding: 100px 0; background: linear-gradient(90deg,rgba(7,6,5,.72),rgba(7,6,5,.92)),url('assets/site/section-why-play-bg.webp') center/cover; }
.after-store .shell, .community { max-width: 900px; }
.community { padding-block: 100px; }
.community .ghost { margin-top: 14px; }

.modal { width: min(1040px, calc(100% - 28px)); max-height: min(90vh, 900px); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--text); background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.7); }
.modal::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(5px); }
.modal__frame { position: relative; max-height: inherit; overflow: auto; overscroll-behavior: contain; }
.modal__close { position: sticky; top: 12px; z-index: 3; float: right; width: 44px; height: 44px; margin: 12px 12px 0 0; border: 1px solid var(--line-strong); color: var(--text); background: rgba(7,6,5,.92); font-size: 28px; }
.modal__content { clear: both; padding: 8px clamp(18px,4vw,48px) 44px; }
.modal h2 { max-width: 850px; padding-right: 36px; font-size: clamp(32px,5vw,62px); }
.modal__lede { max-width: 760px; color: var(--muted); }
.modal__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 28px; }
.modal__meta span { padding: 7px 10px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.modal__section { margin-top: 30px; }
.modal__section h3 { margin: 0 0 12px; font: 600 24px Oswald, sans-serif; text-transform: uppercase; }
.modal__section ul { margin: 0; padding-left: 20px; }
.modal__section li + li { margin-top: 7px; }
.bundle-contents { columns: 2; column-gap: 34px; }
.bundle-contents li { break-inside: avoid; }
.proposal { padding: 14px 16px; border-left: 3px solid var(--warning); background: rgba(230,170,69,.08); color: #e6c895; }
.comparison-wrap { overflow-x: auto; border: 1px solid var(--line); }
.comparison { width: 100%; min-width: 760px; border-collapse: collapse; }
.comparison th, .comparison td { padding: 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.comparison th { position: sticky; top: 0; background: var(--panel-3); font-family: Oswald, sans-serif; }
.kit-list { display: grid; gap: 12px; }
.kit-detail { border: 1px solid var(--line); background: #0d0c0b; }
.kit-detail summary { min-height: 50px; display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 14px; cursor: pointer; font: 600 18px Oswald, sans-serif; }
.kit-detail summary span { color: var(--muted); font: 400 12px Roboto, sans-serif; }
.kit-detail__body { padding: 0 14px 16px; }
.kit-conditions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.kit-conditions div { padding: 10px 12px; border: 1px solid var(--line); background: #0b0a09; }
.kit-conditions dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.kit-conditions dd { margin: 4px 0 0; color: var(--text); font-weight: 800; }
.item-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; list-style: none; }
.item-chips li { margin: 0!important; padding: 7px 9px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.state-view { min-height: 280px; display: grid; align-content: center; justify-items: start; }
.state-view__icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--red); color: var(--red-bright); font: 700 22px Oswald, sans-serif; }
.state-view--active .state-view__icon { border-color: var(--success); color: var(--success); }
.state-view--loading .state-view__icon { border: 3px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: spin .9s linear infinite; color: transparent; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 90; max-width: 360px; padding: 14px 18px; border: 1px solid var(--line-strong); background: var(--panel-3); box-shadow: 0 15px 50px rgba(0,0,0,.5); }
@keyframes spin { to { transform: rotate(360deg); } }

:focus-visible { outline: 3px solid #ff4a40; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; } }

@media (max-width: 1120px) {
  .rank-grid, .compact-grid, .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .tabs { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .shell { width: min(100% - 24px, 1420px); }
  .demo-banner { align-items: flex-start; flex-direction: column; gap: 0; }
  .hero { min-height: 620px; background-image: linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.15)),url('assets/site/hero-mobile.webp'); }
  .nav__links { display: none; }
  .nav .ghost { margin-left: auto; padding-inline: 14px; }
  .hero__actions { padding-bottom: 24px; }
  .section-head { padding-top: 50px; }
  .category-browser__head { grid-template-columns: 1fr; gap: 10px; }
  .category-tiles { display: grid; grid-template-rows: repeat(2,56px); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 148px; overflow-x: auto; margin-inline: -12px; padding: 0 12px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .category-tiles::-webkit-scrollbar { display: none; }
  .category-tile { height: 56px; scroll-snap-align: start; }
  .category-tile__image { width: 68px; height: 68px; }
  .shelf__head { align-items: flex-start; flex-direction: column; }
  .rank-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1px 12px; }
  .rank-card { flex: 0 0 min(82vw, 310px); scroll-snap-align: start; }
  .compact-grid, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { grid-template-columns: 1fr; }
  .tabs { grid-column: auto; }
  .tabs button { flex: 1; }
  .product-card { min-height: 282px; }
  .modal { width: calc(100% - 14px); max-height: 94vh; }
  .modal__close { top: 7px; margin: 7px 7px 0 0; }
  .modal__content { padding-inline: 16px; }
  .modal h2 { font-size: 36px; }
  .kit-detail summary { align-items: flex-start; flex-direction: column; }
  .kit-conditions { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .compact-grid, .product-grid { gap: 8px; }
  .compact-card, .product-card { padding: 11px; }
  .compact-card { min-height: 230px; }
  .compact-card h3 { font-size: 19px; }
  .product-card { min-height: 250px; }
  .product-card h3 { font-size: 16px; }
  .product-card__media { aspect-ratio: 1.05 / 1; }
  .section-head h1 { font-size: 40px; }
  .state-grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
}

/* Local multi-page concept */
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 80; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg,rgba(5,4,3,.94),rgba(5,4,3,.68)); backdrop-filter: blur(14px); }
.site-header .nav { min-height: 72px; }
.site-header .brand { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; line-height: 1; }
.site-header .brand::before { display: block; flex: 0 0 28px; width: 28px; height: 28px; margin-right: 10px; background: url('assets/rust-mark.svg') center/cover no-repeat; content: ''; }
.site-header .nav__links { margin: 0 auto; align-self: stretch; align-items: stretch; }
.site-header .nav__links a { position: relative; display: flex; align-items: center; color: #d7d0c8; font-size: 13px; letter-spacing: .07em; }
.site-header .nav__links a::after { position: absolute; right: 50%; bottom: -1px; left: 50%; height: 2px; background: var(--red-bright); content: ''; transition: left .2s ease,right .2s ease; }
.site-header .nav__links a:hover,.site-header .nav__links a.active { color: #fff; }
.site-header .nav__links a:hover::after,.site-header .nav__links a.active::after { right: 0; left: 0; }
.steam-button { min-height: 42px; padding: 0 16px; border: 1px solid var(--line-strong); color: var(--text); background: rgba(10,9,8,.65); font: 600 12px Oswald,sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line); background: #0c0a09; }
.nav-toggle span { display: block; height: 2px; background: var(--text); }
.nav-toggle span + span { margin-top: 5px; }

.view { min-height: 100vh; padding-top: 72px; }
.view.is-active { animation: view-in .34s ease both; }
.view--home { position: relative; display: grid; overflow: hidden; background: #050403; isolation: isolate; }
.hero-art { position: absolute; z-index: -3; inset: 0; background: url('assets/site/hero-clean.png') center/cover no-repeat; transform: scale(1.008); transform-origin: left center; animation: hero-breathe 20s ease-in-out infinite alternate; }
.hero-art::after { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.12) 0,transparent 25%,transparent 64%,rgba(0,0,0,.66) 100%); content: ''; }
.atmosphere { position: absolute; z-index: -2; inset: 0; opacity: .65; overflow: hidden; pointer-events: none; }
.atmosphere::before,.atmosphere::after { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #ff5b2d; box-shadow: 8vw 70vh #a62213,18vw 82vh #ff4b21,31vw 76vh #7f1a10,45vw 88vh #e23618,61vw 72vh #ff6328,77vw 86vh #8f1d11,92vw 68vh #ee3e1e,55vw 54vh #9e2414; content: ''; animation: ember-rise 8s linear infinite; }
.atmosphere::after { opacity: .5; filter: blur(1px); animation-duration: 13s; animation-delay: -6s; transform: translateX(4vw); }
.home-content { position: relative; z-index: 1; min-height: calc(100vh - 72px); display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-top: 180px; padding-bottom: 64px; }
.home-action-panel { max-width: 540px; padding: 22px; border-left: 3px solid var(--red); background: linear-gradient(90deg,rgba(5,4,3,.86),rgba(5,4,3,.12)); backdrop-filter: blur(3px); }
.home-kicker { margin: 0 0 16px; color: #fff; font: 600 clamp(22px,2.2vw,34px)/1.1 Oswald,sans-serif; text-transform: uppercase; text-shadow: 0 3px 18px #000; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.server-pulse { display: grid; grid-template-columns: repeat(3,auto); border: 1px solid var(--line); background: rgba(8,7,6,.82); box-shadow: 0 18px 60px rgba(0,0,0,.4); backdrop-filter: blur(12px); }
.server-pulse div { min-width: 142px; padding: 16px 20px; }
.server-pulse div + div { border-left: 1px solid var(--line); }
.server-pulse span,.server-pulse strong { display: block; }
.server-pulse span { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.server-pulse strong { margin-top: 3px; font: 600 18px Oswald,sans-serif; }
.role-scene { position: relative; overflow: hidden; background: #070605; isolation: isolate; }
body[data-route="home"] .role-scene { padding-top: 0; }
.role-scene__backdrop { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg,rgba(5,4,3,.48),#070605 92%),url('assets/site/section-why-play-bg.webp') center/cover fixed; }
.role-scene__backdrop::after { position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%,rgba(217,37,28,.14),transparent 38%),repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.018) 120px); content: ''; }
.role-scene__content { padding-top: 54px; padding-bottom: 54px; }
.role-intro { display: grid; grid-template-columns: 1fr minmax(320px,.75fr); align-items: end; gap: 40px; margin-bottom: 30px; }
.role-intro h1,.info-view h1 { margin: 0; font: 700 clamp(46px,6vw,84px)/.92 Oswald,sans-serif; text-transform: uppercase; }
.role-intro > div:last-child { justify-self: end; max-width: 560px; }
.role-intro p { margin: 0 0 14px; color: var(--muted); }
.rank-grid--stage { perspective: 1200px; }
.rank-grid--stage .rank-card { overflow: hidden; background: linear-gradient(180deg,rgba(24,21,18,.92),rgba(10,9,8,.98)); transition: transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.rank-grid--stage .rank-card:hover { z-index: 2; border-color: rgba(240,68,56,.7); box-shadow: 0 24px 65px rgba(0,0,0,.55); transform: translateY(-8px); }
.rank-grid--stage .rank-card__media { aspect-ratio: .82/1; }
.rank-grid--stage .rank-card img { filter: brightness(1.08) saturate(1.08); }
.rank-grid--stage .rank-card[data-tier="T2"] img,.rank-grid--stage .rank-card[data-tier="T4"] img,.rank-grid--stage .rank-card[data-tier="T5"] img { filter: brightness(1.2) saturate(1.14); }
.rank-grid--stage .rank-card__body { padding: 15px; }
.rank-grid--stage .rank-card__facts { display: none; }
.role-scene__footer { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 28px; color: var(--muted); }

.view--store { background: radial-gradient(circle at 50% 0,rgba(132,39,22,.14),transparent 30%),#070605; }
.view--store .store { padding-bottom: 70px; }
.section-head--compact { padding-top: 58px; }
.section-head--compact h1 { font-size: clamp(38px,5vw,68px); }
.shelf--store-ranks { padding-top: 42px; }
.duration-tier { padding: 22px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(25,23,21,.76),rgba(10,9,8,.9)); }
.duration-tier + .duration-tier { margin-top: 20px; }
.duration-tier--monthly { border-color: rgba(217,37,28,.48); box-shadow: inset 0 1px 0 rgba(240,68,56,.12); }
.duration-tier__head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.duration-tier__head span { color: var(--soft); font: 700 10px Oswald,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.duration-tier__head h3 { margin: 2px 0 0; font: 600 30px Oswald,sans-serif; text-transform: uppercase; }
.duration-tier__head p { margin: 0; color: var(--muted); }
.duration-tier__head > strong { padding: 6px 10px; color: #fff; background: var(--red); font: 700 15px Oswald,sans-serif; }
.rank-grid--store .rank-card__media { aspect-ratio: 1/.82; }
.rank-grid--store .rank-card__body { padding: 14px; }
.rank-grid--store .rank-card__body > p { min-height: 48px; font-size: 13px; }
.rank-grid--store .rank-card__facts { display: none; }
.rank-grid--store .status-chip { display: none; }
.rank-card--monthly { border-bottom-color: rgba(240,68,56,.68); }
.rank-card--monthly .rank-card__price { color: #fff; }

.info-view { position: relative; isolation: isolate; overflow: hidden; }
.info-view__backdrop { position: absolute; z-index: -2; inset: 0; background-position: center; background-size: cover; filter: saturate(.86); }
.info-view__backdrop::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,4,3,.96),rgba(5,4,3,.48) 65%,rgba(5,4,3,.75)); content: ''; }
.info-view--servers .info-view__backdrop { background-image: url('assets/site/hero.webp'); }
.info-view--news .info-view__backdrop { background-image: url('assets/site/news-event-bg.webp'); }
.info-view--rules .info-view__backdrop { background-image: url('assets/site/community-cta-bg.webp'); }
.info-view__content { min-height: calc(100vh - 72px); display: grid; align-content: center; padding-block: 70px; }
.info-view .lead { max-width: 660px; margin: 20px 0 38px; color: var(--muted); font-size: 19px; }
.server-card { max-width: 900px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 30px; padding: 24px; border: 1px solid var(--line-strong); background: rgba(11,9,8,.86); backdrop-filter: blur(12px); }
.server-card > div strong,.server-card > div small { display: block; }
.server-card > div strong { margin: 5px 0 2px; font: 600 26px Oswald,sans-serif; text-transform: uppercase; }
.server-card > div small { color: var(--muted); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.server-card dl { display: flex; gap: 28px; margin: 0; }
.server-card dl div { min-width: 110px; }
.server-card dt { color: var(--soft); font-size: 11px; text-transform: uppercase; }
.server-card dd { margin: 3px 0 0; font: 600 17px Oswald,sans-serif; }
.empty-panel { max-width: 640px; padding: 30px; border: 1px solid var(--line); background: rgba(10,9,8,.84); backdrop-filter: blur(10px); }
.empty-panel > span { color: var(--red-bright); font: 700 11px Oswald,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.empty-panel h2 { margin: 6px 0; font: 600 34px Oswald,sans-serif; text-transform: uppercase; }
.empty-panel p { color: var(--muted); }
.rule-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; max-width: 1000px; }
.rule-grid article { min-height: 220px; padding: 24px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(24,21,18,.86),rgba(9,8,7,.9)); }
.rule-grid b { color: var(--red-bright); font: 700 12px Oswald,sans-serif; letter-spacing: .15em; }
.rule-grid h2 { margin: 28px 0 8px; font: 600 27px Oswald,sans-serif; text-transform: uppercase; }
.rule-grid p { margin: 0; color: var(--muted); }

.document-view { min-height: 100vh; background: radial-gradient(circle at 78% 10%,rgba(103,29,21,.16),transparent 32%),var(--bg); }
.document-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(90deg,rgba(5,4,3,.98),rgba(5,4,3,.62)),url('assets/site/community-cta-bg.webp') center 42%/cover; }
.document-hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg,var(--red),transparent 68%); content: ''; }
.document-hero .shell { min-height: 340px; display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-end; padding-block: 72px 54px; }
.document-hero h1 { max-width: 900px; margin: 0; font: 700 clamp(48px,7vw,96px)/.93 Oswald,sans-serif; letter-spacing: -.025em; text-transform: uppercase; }
.document-hero p:not(.eyebrow) { max-width: 720px; margin: 20px 0 0; color: #d2cbc3; font-size: 18px; }
.document-date { display: inline-flex; margin-top: 22px; padding: 7px 10px; border-left: 2px solid var(--red); color: var(--muted); background: rgba(5,4,3,.62); font-size: 13px; }
.document-hero--legal .shell { min-height: 270px; }
.document-hero--legal h1 { font-size: clamp(42px,6vw,76px); }
.document-layout { display: grid; grid-template-columns: 260px minmax(0,820px); justify-content: center; gap: clamp(36px,6vw,86px); padding-block: 54px 100px; }
.document-toc { position: sticky; top: 102px; align-self: start; padding: 20px; border: 1px solid var(--line); background: rgba(18,17,15,.84); }
.document-toc > strong { display: block; padding-bottom: 13px; border-bottom: 1px solid var(--line); font: 600 18px Oswald,sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.document-toc nav { display: grid; margin-top: 10px; }
.document-toc a { padding: 8px 0; color: var(--muted); font-size: 13px; line-height: 1.3; text-decoration: none; }
.document-toc a:hover,.document-toc a:focus-visible { color: #fff; }
.document-content { min-width: 0; }
.document-notice { margin-bottom: 38px; padding: 20px 22px; border: 1px solid rgba(240,68,56,.42); border-left: 4px solid var(--red); color: #e4ded7; background: linear-gradient(90deg,rgba(76,17,13,.42),rgba(19,16,14,.72)); font-size: 16px; }
.rules-document > section,.legal-document > section { scroll-margin-top: 100px; }
.rules-document > section { padding: 0 0 46px; }
.rules-document > section + section { padding-top: 44px; border-top: 1px solid var(--line); }
.rules-document section > span { color: var(--red-bright); font: 700 12px Oswald,sans-serif; letter-spacing: .2em; }
.rules-document h2,.legal-document h2 { margin: 7px 0 24px; font: 600 clamp(30px,4vw,45px)/1.08 Oswald,sans-serif; text-transform: uppercase; }
.rules-document ol { margin: 0; padding: 0; list-style: none; counter-reset: rule-item; }
.rules-document li { position: relative; padding-left: 46px; color: #d1cac2; counter-increment: rule-item; }
.rules-document li + li { margin-top: 15px; }
.rules-document li::before { position: absolute; top: 1px; left: 0; min-width: 30px; color: var(--soft); content: counter(rule-item,decimal-leading-zero); font: 600 13px Oswald,sans-serif; letter-spacing: .08em; }
.document-end { margin-top: 28px; padding: 18px 20px; border-left: 3px solid var(--warning); color: #ded6cc; background: var(--panel); }
.legal-document { width: min(840px,calc(100% - 40px)); padding-block: 54px 100px; }
.legal-document > section { padding: 28px 0; border-top: 1px solid var(--line); }
.legal-document h2 { margin-bottom: 12px; font-size: clamp(26px,3vw,34px); }
.legal-document p { max-width: 76ch; margin: 0; color: #d1cac2; }

.site-footer { border-top: 1px solid var(--line); background: #050403; }
.site-footer__grid { display: grid; grid-template-columns: minmax(220px,1fr) minmax(300px,1.4fr); gap: 60px; padding-block: 46px 34px; }
.site-footer__grid > div p { max-width: 390px; margin: 15px 0 0; color: var(--muted); }
.site-footer nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 28px; }
.site-footer nav a { color: #c9c1b8; font-size: 14px; text-decoration: none; }
.site-footer nav a:hover,.site-footer nav a:focus-visible { color: #fff; }
.site-footer__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-block: 24px 34px; border-top: 1px solid var(--line); }
.site-footer__bottom p { margin: 0; color: var(--soft); font-size: 12px; line-height: 1.55; }
.local-mark { position: fixed; left: 10px; bottom: 10px; z-index: 75; padding: 4px 7px; border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.45); background: rgba(0,0,0,.55); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }

@keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes hero-breathe { from { transform: scale(1.008); } to { transform: scale(1.026); } }
@keyframes ember-rise { from { transform: translateY(18vh); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-55vh); opacity: 0; } }

@media (max-width: 980px) {
  .site-header .nav { gap: 14px; }
  .site-header .nav__links { gap: 16px; }
  .steam-button { padding-inline: 10px; }
  .home-content { align-items: flex-end; flex-direction: column; justify-content: flex-end; }
  .home-action-panel { align-self: flex-start; }
  .server-pulse { align-self: stretch; grid-template-columns: repeat(3,1fr); }
  .server-pulse div { min-width: 0; }
  .role-intro { grid-template-columns: 1fr; gap: 18px; }
  .role-intro > div:last-child { justify-self: start; }
  .server-card { grid-template-columns: 1fr; }
  .document-layout { grid-template-columns: 220px minmax(0,1fr); gap: 34px; }
}

@media (min-width: 761px) and (max-width: 1240px) {
  .hero-art { background-position: left center; }
}

@media (max-width: 760px) {
  .site-header .nav { min-height: 64px; }
  .category-browser { top: 64px; padding-block: 8px; }
  .view { padding-top: 64px; }
  .site-header .brand { font-size: 23px; }
  .site-header .brand::before { flex-basis: 24px; width: 24px; height: 24px; margin-right: 7px; }
  .nav-toggle { display: block; margin-left: auto; }
  .steam-button { display: none; }
  .site-header .nav__links { position: fixed; top: 64px; right: 0; left: 0; display: grid; gap: 0; padding: 10px 20px 18px; border-bottom: 1px solid var(--line); background: rgba(7,6,5,.98); transform: translateY(-130%); transition: transform .24s ease; }
  body.nav-open .site-header .nav__links { transform: translateY(0); }
  .site-header .nav__links a { min-height: 47px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .site-header .nav__links a::after { display: none; }
  .document-hero .shell { min-height: 285px; padding-block: 55px 38px; }
  .document-hero h1 { font-size: clamp(44px,14vw,62px); }
  .document-hero p:not(.eyebrow) { font-size: 16px; }
  .document-layout { display: block; padding-block: 24px 70px; }
  .document-toc { position: relative; top: auto; margin-bottom: 32px; padding: 14px; }
  .document-toc nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; }
  .document-toc a { min-height: 42px; display: flex; align-items: center; }
  .document-notice { margin-bottom: 30px; padding: 16px; }
  .rules-document > section { padding-bottom: 36px; }
  .rules-document > section + section { padding-top: 34px; }
  .rules-document li { padding-left: 39px; }
  .legal-document { padding-block: 30px 70px; }
  .site-footer__grid,.site-footer__bottom { grid-template-columns: 1fr; gap: 28px; }
  .site-footer nav { grid-template-columns: 1fr; }
  .hero-art { background-image: url('assets/site/hero-mobile.webp'); background-position: center top; }
  .hero-art::after { background: linear-gradient(180deg,rgba(0,0,0,.06),transparent 45%,rgba(0,0,0,.82) 88%); }
  .home-content { min-height: calc(100vh - 64px); padding-top: 320px; padding-bottom: 52px; }
  .home-action-panel { width: 100%; padding: 16px; }
  .home-actions > * { flex: 1 1 160px; }
  .server-pulse { grid-template-columns: 1fr 1fr 1fr; }
  .server-pulse div { padding: 12px; }
  .server-pulse strong { font-size: 15px; }
  .role-scene__content { padding-top: 34px; }
  .role-intro h1,.info-view h1 { font-size: 48px; }
  .rank-grid--stage { display: flex; }
  .rank-grid--stage .rank-card { flex-basis: min(76vw,300px); }
  .duration-tier { padding: 14px; }
  .rank-grid--store { display: flex; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
  .rank-grid--store .rank-card { flex: 0 0 min(76vw,290px); scroll-snap-align: start; }
  .role-scene__footer { align-items: stretch; flex-direction: column; }
  .rule-grid { grid-template-columns: 1fr; }
  .bundle-contents { columns: 1; }
  .info-view__content { min-height: calc(100vh - 64px); }
}

@media (max-width: 480px) {
  .shell { width: calc(100% - 24px); }
  .home-kicker { font-size: 21px; }
  .home-actions { flex-direction: column; }
  .home-actions > * { flex-basis: auto; width: 100%; }
  .server-pulse { grid-template-columns: 1fr; }
  .server-pulse div + div { border-top: 1px solid var(--line); border-left: 0; }
  .server-pulse div { display: flex; align-items: center; justify-content: space-between; }
  .role-intro h1,.info-view h1 { font-size: 40px; }
  .server-card dl { flex-direction: column; gap: 12px; }
}