* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 88% 8%, rgb(136 24 24 / 10%), transparent 26rem),
    radial-gradient(circle at 15% 60%, rgb(70 92 73 / 8%), transparent 30rem),
    linear-gradient(180deg, #0a0f10 0%, #080c0d 70%, #06090a 100%);
  font: 16px/1.6 var(--body);
  min-height: 100dvh;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.012) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.site-backdrop::before,
.site-backdrop::after {
  content: '';
  position: absolute;
  width: 42rem;
  height: 20rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .08;
}
.site-backdrop::before { right: -10rem; top: -4rem; background: #b21f1f; }
.site-backdrop::after { left: -12rem; bottom: 15%; background: #5f784a; }

a { color: inherit; }
a:hover { color: #fff; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
img { max-width: 100%; }
code { color: #e7d896; font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; }

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 14px;
  background: var(--focus);
  color: #111;
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

.wiki-header {
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto auto auto;
  align-items: center;
  gap: 28px;
  padding: 12px clamp(18px, 3vw, 48px);
  border-bottom: 1px solid var(--border);
  background: rgb(8 12 13 / 94%);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  text-decoration: none;
}
.brand img { width: 74px; height: 58px; object-fit: contain; filter: drop-shadow(0 7px 18px rgb(0 0 0 / 50%)); }
.brand__copy { min-width: 0; display: grid; gap: 3px; }
.brand__copy strong {
  font: 400 clamp(15px, 1.45vw, 22px)/1.15 var(--display);
  letter-spacing: .03em;
  white-space: nowrap;
}
.brand__copy strong em { color: var(--red); font-style: normal; }
.brand__copy small { color: var(--text-dim); font-size: 10px; letter-spacing: .28em; }
.header-meta { display: grid; justify-items: end; line-height: 1.2; }
.header-meta span { color: var(--text-dim); font-size: 9px; letter-spacing: .2em; }
.header-meta strong { color: var(--gold); font-size: 12px; }
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.header-action {
  min-width: 72px;
  min-height: 38px;
  padding-inline: 14px;
  font-size: 11px;
}
.top-nav { display: flex; align-items: stretch; gap: 2px; }
.top-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  text-decoration: none;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 700;
}
.top-nav a span:first-child { color: var(--red); }
.top-nav a:hover,
.top-nav a.is-active { color: var(--text); border-bottom-color: var(--red); background: rgb(255 255 255 / 2.5%); }
.mobile-category-wrap { display: none; }

.site-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px clamp(16px, 2.4vw, 36px) 56px;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 24px;
}
.category-rail {
  position: sticky;
  top: 110px;
  align-self: start;
  min-height: calc(100dvh - 158px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(17 24 25 / 96%), rgb(9 14 15 / 94%));
  overflow: hidden;
  box-shadow: var(--shadow);
}
.category-nav { display: grid; }
.category-nav a {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  border-bottom: 1px solid rgb(82 96 100 / 24%);
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 720;
  font-size: 13px;
}
.category-nav a span:first-child { width: 24px; text-align: center; color: var(--text-dim); font-size: 17px; }
.category-nav a:hover { background: rgb(255 255 255 / 2.5%); color: var(--text); }
.category-nav a.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgb(211 34 34 / 45%), rgb(211 34 34 / 10%));
  border-left: 3px solid var(--red);
  padding-left: 12px;
}
.category-nav a.is-active span:first-child { color: #fff; }
.rail-stamp {
  margin-top: 56px;
  padding: 24px 18px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  text-align: center;
  letter-spacing: .12em;
}
.rail-stamp span { display: block; color: var(--red); font: 24px/1 var(--display); margin-bottom: 12px; }
.rail-stamp strong { font-size: 9px; line-height: 1.7; }
main { min-width: 0; }
.wiki-footer {
  max-width: 1600px;
  margin: 0 auto;
  padding: 22px clamp(16px, 2.4vw, 36px) 38px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--text-dim);
  font-size: 12px;
  border-top: 1px solid rgb(82 96 100 / 25%);
}

.breadcrumbs { margin: 0 0 14px; color: var(--text-dim); font-size: 12px; }
.breadcrumbs ol { margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; }
.breadcrumbs li:not(:last-child)::after { content: '›'; margin-left: 8px; color: var(--border-strong); }
.breadcrumbs a { color: #b7c5c2; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; }

.eyebrow,
.panel__eyebrow,
.catalog-card__eyebrow {
  color: var(--red);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.page-heading,
.article-heading {
  position: relative;
  padding: 20px 22px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  background: linear-gradient(110deg, rgb(21 30 32 / 96%), rgb(12 18 19 / 88%));
  box-shadow: var(--shadow);
}
.page-heading::after,
.article-heading::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 12px;
  width: 76px;
  height: 22px;
  border-top: 1px solid rgb(211 34 34 / 45%);
  border-right: 1px solid rgb(211 34 34 / 45%);
  pointer-events: none;
}
.page-heading h1,
.article-heading h1 {
  margin: 4px 0 6px;
  font: 400 clamp(28px, 4vw, 48px)/1.05 var(--display);
  letter-spacing: -.02em;
}
.page-heading p,
.article-heading p { max-width: 850px; margin: 0; color: var(--text-muted); }
.article-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.article-heading .article-id { color: var(--text-dim); font: 11px var(--display); letter-spacing: .15em; text-transform: uppercase; }

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(17 24 25 / 96%), rgb(10 15 16 / 96%));
  box-shadow: 0 14px 40px rgb(0 0 0 / 20%);
  overflow: hidden;
}
.panel--accent { border-top-color: var(--red); }
.panel__eyebrow { padding: 12px 14px 0; }
.panel__title {
  margin: 0;
  padding: 4px 14px 10px;
  border-bottom: 1px solid var(--border);
  font: 400 13px/1.3 var(--display);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.panel__body { padding: 14px; }

.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: #d7dddb;
  background: #12191a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.badge--red { border-color: rgb(211 34 34 / 65%); color: #ff9a9a; background: rgb(211 34 34 / 12%); }
.badge--green { border-color: rgb(111 134 67 / 75%); color: #bad584; background: rgb(111 134 67 / 14%); }
.badge--gold { border-color: rgb(212 160 23 / 75%); color: #f0c94f; background: rgb(212 160 23 / 10%); }
.rarity--standard { border-color: var(--rarity-standard); color: var(--rarity-standard); }
.rarity--rare { border-color: var(--rarity-rare); color: var(--rarity-rare); }
.rarity--epic { border-color: var(--rarity-epic); color: var(--rarity-epic); }
.rarity--legendary { border-color: var(--rarity-legendary); color: var(--rarity-legendary); }
.rarity--mythic { border-color: var(--rarity-mythic); color: var(--rarity-mythic); }

.anchor-index,
.section-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 6px;
  border: 1px solid var(--border);
  background: rgb(10 15 16 / 90%);
}
.anchor-index a,
.section-tabs a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  text-decoration: none;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 750;
}
.anchor-index a:hover,
.section-tabs a:hover { color: #fff; border-bottom-color: var(--red); background: rgb(255 255 255 / 3%); }

.index-section { scroll-margin-top: 108px; margin: 0 0 30px; }
.section-heading {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px 9px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-strong);
}
.section-heading > span { font: 400 17px var(--display); text-transform: uppercase; }
.section-heading small { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.catalog-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-grid--maps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-grid--skins { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.catalog-grid--operators { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.catalog-grid--zombies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-card {
  min-width: 0;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #111819, #0c1213);
  overflow: hidden;
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}
.catalog-card:hover { border-color: #607075; transform: translateY(-2px); background: #131b1d; }
.catalog-card__media {
  height: 180px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 35%, rgb(97 118 93 / 18%), transparent 50%),
    #0a0f10;
}
.catalog-grid--maps .catalog-card__media { height: 230px; }
.catalog-grid--operators .catalog-card__media { height: 190px; }
.catalog-card__media img { width: 92%; height: 90%; object-fit: contain; transition: transform 180ms ease; }
.catalog-grid--maps .catalog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.catalog-card:hover .catalog-card__media img { transform: scale(1.025); }
.catalog-card__body { padding: 13px; }
.catalog-card__body h2 { margin: 3px 0 9px; font-size: 17px; line-height: 1.25; }
.catalog-card__body h2 a { text-decoration: none; }
.catalog-card__facts { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; color: var(--text-muted); font-size: 11px; }
.catalog-card__facts span { white-space: nowrap; }

.data-list { margin: 0; }
.data-list > div {
  display: grid;
  grid-template-columns: minmax(90px, .9fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgb(82 96 100 / 23%);
}
.data-list > div:last-child { border-bottom: 0; }
.data-list dt { color: var(--text-muted); font-size: 12px; }
.data-list dd { margin: 0; text-align: right; color: #e8eceb; font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.data-list a { color: #e8eceb; }

.stat-bar { margin: 0 0 11px; }
.stat-bar:last-child { margin-bottom: 0; }
.stat-bar__row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 5px; font-size: 11px; color: var(--text-muted); }
.stat-bar__row strong { color: #fff; font-variant-numeric: tabular-nums; }
.stat-bar__track { height: 7px; background: #222b2d; border: 1px solid #293335; overflow: hidden; }
.stat-bar__track span { display: block; height: 100%; background: linear-gradient(90deg, var(--red-dark), var(--red)); }

.media-frame {
  margin: 0 0 12px;
  border: 1px solid var(--border-strong);
  background: #070b0c;
  overflow: hidden;
}
.media-frame img { display: block; width: 100%; height: min(58vw, 560px); object-fit: cover; }
.media-frame--weapon img { height: clamp(300px, 36vw, 500px); object-fit: contain; padding: 24px; background: radial-gradient(circle at 50% 45%, #1b2722, #090d0e 62%); }
.media-frame--contain img { object-fit: contain; }
.media-frame figcaption { padding: 8px 11px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.thumbnail-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 16px; }
.thumbnail-strip__item { display: grid; grid-template-rows: 70px auto; border: 1px solid var(--border); background: var(--surface-deep); text-decoration: none; min-width: 0; }
.thumbnail-strip__item:hover { border-color: var(--red); }
.thumbnail-strip__item img { width: 100%; height: 70px; object-fit: contain; padding: 8px; }
.thumbnail-strip__item span { padding: 5px 7px 7px; color: var(--text-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.article-grid,
.map-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.article-main { min-width: 0; }
.article-sidebar { display: grid; gap: 12px; position: sticky; top: 108px; }
.article-section {
  scroll-margin-top: 108px;
  padding: 20px 4px 24px;
  border-bottom: 1px solid var(--border);
}
.article-section h2 { margin: 0 0 12px; font: 400 19px var(--display); text-transform: uppercase; }
.article-section p { color: #c1c9c7; max-width: 850px; }
.source-note { padding-left: 12px; border-left: 2px solid var(--gold); color: var(--text-muted) !important; font-size: 13px; }
.stats-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-bottom: 20px; }
.sidebar-emphasis { color: #fff; font-weight: 750; }

.skin-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.skin-preview { min-height: 112px; display: grid; grid-template-columns: 130px 1fr; border: 1px solid var(--border); background: #0b1112; text-decoration: none; overflow: hidden; }
.skin-preview:hover { border-color: var(--red); }
.skin-preview img { width: 100%; height: 100%; min-height: 110px; object-fit: contain; padding: 10px; background: #090d0e; }
.skin-preview span { align-self: center; padding: 10px; min-width: 0; }
.skin-preview strong, .skin-preview small { display: block; }
.skin-preview small { margin-top: 5px; color: var(--text-muted); font-size: 10px; text-transform: capitalize; }
.empty-state { padding: 18px; border: 1px dashed var(--border-strong); color: var(--text-muted); background: rgb(255 255 255 / 2%); }

.sprite-preview,
.operator-tile {
  width: 100%;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-color: #080d0e;
}
.sprite-preview { background-position: left top; }
.catalog-card__media .sprite-preview { width: min(85%, 180px); border: 0; }
.sprite-preview--sidebar { width: 100%; max-width: 230px; margin: 0 auto; }
.operator-tile { background-repeat: no-repeat; }
.catalog-card__media .operator-tile { height: 100%; width: 100%; }
.operator-tile--hero { width: min(100%, 520px); margin: 0 auto; }

.zombie-hero {
  min-height: 340px;
  display: grid;
  grid-template-columns: minmax(240px, 42%) 1fr;
  border: 1px solid var(--border-strong);
  background: linear-gradient(120deg, #090e0f, #121b1d);
}
.zombie-hero__sprite { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle, rgb(123 142 91 / 16%), transparent 65%); }
.zombie-hero__sprite .sprite-preview { width: min(100%, 320px); }
.zombie-hero__copy { align-self: center; padding: 30px; }
.zombie-hero__copy h2 { margin: 4px 0 10px; font: 400 clamp(24px, 3vw, 38px) var(--display); text-transform: uppercase; }
.zombie-hero__copy p { color: var(--text-muted); }
.callout { margin-top: 18px; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgb(212 160 23 / 7%); color: #d8c47f; font-size: 12px; font-weight: 750; }

.dual-media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dual-media .media-frame--weapon img { height: 280px; }
.operator-hero { min-height: 570px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: radial-gradient(circle at 50% 40%, rgb(112 135 83 / 13%), #080d0e 62%); padding: 30px; }


.walker-variant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.walker-variant-card {
  min-width: 0;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #111819, #0a1011);
  overflow: hidden;
}
.walker-variant-card__media {
  min-height: 190px;
  display: grid;
  place-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(circle at 50% 42%, rgb(111 134 67 / 15%), transparent 58%), #080d0e;
}
.walker-variant-card__media .sprite-preview {
  width: min(100%, 180px);
}
.walker-variant-card__body {
  padding: 12px;
}
.walker-variant-card__body h3 {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.35;
}
.walker-variant-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.walker-variant-card__stats div {
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid rgb(82 96 100 / 28%);
  background: #0a0f10;
  text-align: center;
}
.walker-variant-card__stats strong,
.walker-variant-card__stats span {
  display: block;
}
.walker-variant-card__stats strong {
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.walker-variant-card__stats span {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.campaign-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.campaign-operation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.campaign-operation {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-width: 0;
  border: 1px solid var(--border);
  background: linear-gradient(150deg, #11191a, #0a0f10);
  overflow: hidden;
}
.campaign-operation__level {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 12px 8px;
  border-right: 1px solid var(--border);
  color: var(--red);
  background: rgb(211 34 34 / 7%);
  font: 400 22px/1 var(--display);
}
.campaign-operation__level span {
  color: var(--text-dim);
  font: 800 8px/1.2 var(--body);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.campaign-operation__body {
  min-width: 0;
  padding: 13px;
}
.campaign-operation__body h3 {
  margin: 0 0 5px;
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.campaign-operation__body p {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 12px;
}
.campaign-operation__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--text-dim);
  font-size: 10px;
}
.campaign-operation__facts a {
  color: #dce4e2;
  text-decoration-color: var(--border-strong);
}

.home-page { display: grid; gap: 20px; }
.home-hero {
  min-height: 370px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(90deg, rgb(7 11 12 / 96%) 0 48%, rgb(7 11 12 / 46%) 100%),
    radial-gradient(circle at 78% 35%, rgb(126 28 26 / 40%), transparent 28%),
    #101617;
  box-shadow: var(--shadow);
}
.home-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, rgb(211 34 34 / 9%)); pointer-events: none; }
.home-hero__copy { padding: clamp(28px, 4vw, 58px); z-index: 1; }
.home-hero h1 { margin: 7px 0 12px; font: 400 clamp(34px, 5.6vw, 72px)/1.02 var(--display); letter-spacing: -.035em; }
.home-hero h1 span { color: var(--red); }
.home-hero p { max-width: 720px; color: #bdc7c5; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.home-hero__mark { align-self: stretch; display: grid; place-items: center; position: relative; padding: 30px; }
.home-hero__mark::before { content: ''; position: absolute; inset: 15% 0; background: radial-gradient(circle, rgb(211 34 34 / 16%), transparent 65%); }
.home-hero__mark img { position: relative; width: min(100%, 330px); filter: drop-shadow(0 25px 35px rgb(0 0 0 / 60%)); }
.category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.category-card { min-height: 210px; padding: 20px; border: 1px solid var(--border); background: linear-gradient(155deg, #121a1b, #0a0f10); text-decoration: none; position: relative; overflow: hidden; }
.category-card::after { content: ''; position: absolute; width: 86px; height: 86px; right: -30px; bottom: -35px; border: 1px solid rgb(211 34 34 / 22%); transform: rotate(45deg); }
.category-card:hover { border-color: var(--red); background: linear-gradient(155deg, #172022, #0b1011); }
.category-card__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border: 1px solid rgb(211 34 34 / 55%); color: var(--red); font-size: 20px; }
.category-card strong, .category-card small { display: block; }
.category-card strong { font: 400 15px var(--display); }
.category-card small { margin-top: 3px; color: var(--gold); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.category-card p { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.category-card__link { position: absolute; left: 20px; bottom: 16px; color: #d8dedd; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.home-metrics { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--border); background: #0b1112; }
.home-metrics div { padding: 16px; text-align: center; border-right: 1px solid var(--border); }
.home-metrics div:last-child { border-right: 0; }
.home-metrics strong { display: block; color: #fff; font: 400 26px var(--display); }
.home-metrics span { color: var(--text-dim); font-size: 9px; letter-spacing: .12em; }
.home-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.map-mini-grid { display: grid; gap: 8px; }
.map-mini { display: grid; grid-template-columns: 105px 1fr; gap: 12px; align-items: center; min-height: 78px; border: 1px solid var(--border); background: #090f10; text-decoration: none; overflow: hidden; }
.map-mini:hover { border-color: var(--red); }
.map-mini img { width: 105px; height: 78px; object-fit: cover; }
.map-mini strong, .map-mini small { display: block; }
.map-mini small { color: var(--text-muted); }

@media (max-width: 1280px) {
  .top-nav { display: none; }
  .wiki-header { grid-template-columns: minmax(0, 1fr) auto auto; }
  .catalog-grid--skins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-grid--operators { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1050px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .walker-variant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-operation-grid { grid-template-columns: 1fr; }
  .catalog-grid--operators { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-grid, .map-detail-grid { grid-template-columns: minmax(0, 1fr) 270px; }
  .home-split { grid-template-columns: 1fr; }
}

@media (max-width: 959px) {
  .wiki-header { position: relative; min-height: 76px; padding-inline: 16px; }
  .brand img { width: 58px; height: 48px; }
  .brand__copy strong { font-size: 15px; }
  .brand__copy small { display: none; }
  .mobile-category-wrap { display: block; position: sticky; top: 0; z-index: 29; border-bottom: 1px solid var(--border); background: rgb(8 12 13 / 96%); }
  .mobile-category-nav { display: flex; overflow-x: auto; scrollbar-width: none; padding: 5px 8px; }
  .mobile-category-nav::-webkit-scrollbar { display: none; }
  .mobile-category-nav a { min-width: 94px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--text-muted); text-decoration: none; font-size: 11px; border-bottom: 2px solid transparent; }
  .mobile-category-nav a.is-active { color: #fff; border-bottom-color: var(--red); }
  .site-grid { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  .category-rail { display: none; }
  .article-sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
  .article-grid, .map-detail-grid { grid-template-columns: 1fr; }
  .home-hero { grid-template-columns: 1fr; min-height: 0; }
  .home-hero__mark { display: none; }
  .catalog-grid--operators { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .header-meta { display: none; }
  .wiki-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .brand { justify-self: start; }
  .brand__copy { display: none; }
  .header-actions { gap: 6px; }
  .header-action { min-width: 58px; min-height: 36px; padding-inline: 10px; font-size: 10px; }
  .page-heading, .article-heading { padding: 18px 16px; }
  .article-heading { align-items: flex-start; flex-direction: column; }
  .page-heading h1, .article-heading h1 { font-size: 30px; }
  .catalog-grid,
  .catalog-grid--maps,
  .catalog-grid--skins,
  .catalog-grid--operators,
  .catalog-grid--zombies,
  .catalog-grid--compact { grid-template-columns: 1fr 1fr; }
  .catalog-card__media { height: 160px; }
  .catalog-grid--maps .catalog-card__media { height: 190px; }
  .home-metrics { grid-template-columns: repeat(2, 1fr); }
  .home-metrics div { border-bottom: 1px solid var(--border); }
  .home-metrics div:nth-child(2n) { border-right: 0; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .stats-two-col, .dual-media, .skin-preview-grid, .campaign-overview-grid { grid-template-columns: 1fr; }
  .skin-preview { grid-template-columns: 110px 1fr; }
  .zombie-hero { grid-template-columns: 1fr; }
  .zombie-hero__sprite { min-height: 260px; }
  .article-sidebar { grid-template-columns: 1fr; }
  .operator-hero { min-height: 420px; }
  .wiki-footer { flex-direction: column; }
}

@media (max-width: 480px) {
  .site-grid { padding-inline: 10px; }
  .brand__copy strong { font-size: 13px; }
  .catalog-grid,
  .catalog-grid--maps,
  .catalog-grid--skins,
  .catalog-grid--operators,
  .catalog-grid--zombies,
  .catalog-grid--compact,
  .category-grid { grid-template-columns: 1fr; }
  .catalog-card__media { height: 190px; }
  .home-hero__copy { padding: 28px 18px; }
  .home-hero h1 { font-size: 38px; }
  .home-hero p { font-size: 15px; }
  .home-metrics strong { font-size: 21px; }
  .thumbnail-strip { grid-template-columns: repeat(2, 1fr); }
  .media-frame--weapon img { height: 280px; padding: 14px; }
  .data-list > div { grid-template-columns: 1fr; gap: 2px; }
  .walker-variant-grid { grid-template-columns: 1fr; }
  .campaign-operation { grid-template-columns: 58px minmax(0, 1fr); }
  .data-list dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Encyclopedia article layout: deliberately follows the compact article/infobox/section shape of classic SAS wiki pages. */
.wiki-article {
  max-width: 1120px;
  padding: clamp(18px, 2.5vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(8 12 13 / 82%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.wiki-article > h1 {
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-strong);
  font: 400 clamp(28px, 4vw, 43px)/1.08 var(--display);
  letter-spacing: .01em;
}
.wiki-article > p { max-width: 760px; margin: 0 0 18px; color: #d5dcda; }
.wiki-article section { margin-top: 28px; clear: left; }
.wiki-article section > h2 {
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-strong);
  font: 400 20px/1.25 var(--display);
  letter-spacing: .015em;
}
.wiki-article section > h3 { margin: 20px 0 8px; color: #e8eceb; }
.wiki-article--with-infobox::after { content: ''; display: block; clear: both; }
.wiki-infobox {
  float: right;
  width: min(340px, 42%);
  margin: 0 0 22px 26px;
  border: 1px solid #8b7540;
  background: #101617;
  box-shadow: 0 12px 28px rgb(0 0 0 / 28%);
}
.wiki-infobox__title {
  padding: 9px 12px 7px;
  background: linear-gradient(180deg, #851b1b, #581212);
  color: #fff;
  text-align: center;
  font: 400 18px/1.2 var(--display);
}
.wiki-infobox__subtitle {
  padding: 5px 10px;
  border-bottom: 1px solid #8b7540;
  color: #d7c88f;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.wiki-infobox__badges { justify-content: center; padding: 8px 10px 0; }
.wiki-infobox__media { padding: 10px; border-bottom: 1px solid #5e583e; background: #080b0c; }
.wiki-infobox__media img { width: 100%; max-height: 280px; object-fit: contain; display: block; }
.wiki-infobox__media .sprite-preview { width: 100%; max-width: 250px; margin: 0 auto; }
.wiki-infobox__media .operator-tile { width: min(230px, 100%); margin: 0 auto; }
.wiki-infobox .data-list { margin: 0; }
.wiki-infobox .data-list > div { padding: 7px 10px; border-top: 1px solid rgb(139 117 64 / 28%); grid-template-columns: minmax(100px, 42%) minmax(0, 1fr); }
.wiki-infobox .data-list dt { color: #d3bf70; font-size: 11px; font-weight: 800; }
.wiki-infobox .data-list dd { color: #e3e7e6; font-size: 12px; text-align: left; }
.toc-box {
  width: fit-content;
  min-width: 210px;
  margin: 18px 0 24px;
  border: 1px solid #615b42;
  background: #0c1112;
  padding: 10px 14px;
}
.toc-box > strong { display: block; margin-bottom: 6px; color: #eee2b2; }
.toc-box ol { margin: 0; padding-left: 22px; }
.toc-box li { padding: 2px 0; }
.toc-box a { color: #c5d365; text-decoration: none; }
.toc-box a:hover { color: #fff; text-decoration: underline; }
.wiki-list { margin: 8px 0 0; padding-left: 22px; max-width: 820px; }
.wiki-list li { margin: 7px 0; }
.wiki-link-columns {
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 34px;
  max-width: 760px;
}
.wiki-link-columns li { break-inside: avoid; padding: 4px 0; }
.wiki-link-columns li::before { content: '•'; margin-right: 8px; color: #b6cb44; }
.wiki-link-columns a { color: #c5d365; text-decoration: none; }
.wiki-link-columns a:hover { color: #fff; text-decoration: underline; }
.wiki-table-wrap { overflow-x: auto; border: 1px solid var(--border); }
.wiki-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wiki-table th,
.wiki-table td { padding: 8px 10px; border: 1px solid rgb(82 96 100 / 34%); text-align: left; vertical-align: top; }
.wiki-table th { color: #d3bf70; background: #151616; font-weight: 800; }
.wiki-table thead th { color: #f0e3ad; background: #671414; }
.wiki-table td { background: #0f1314; }
.wiki-table a { color: #c5d365; text-decoration: none; }
.wiki-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.wiki-gallery__item {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  background: #0e1415;
  text-decoration: none;
  display: grid;
  gap: 5px;
}
.wiki-gallery__item:hover { border-color: #9a823e; background: #131a1b; }
.wiki-gallery__item img,
.wiki-gallery__item > .operator-tile { width: 100%; height: 96px; object-fit: contain; background-color: #090d0e; }
.wiki-gallery--operators .wiki-gallery__item > .operator-tile { height: auto; aspect-ratio: 1; }
.wiki-gallery__item span { color: #e4e8e7; font-weight: 750; font-size: 12px; }
.wiki-gallery__item small { color: var(--text-dim); text-transform: capitalize; }
.map-wiki-list { display: grid; gap: 18px; margin-top: 18px; }
.map-wiki-list article {
  display: grid;
  grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.map-wiki-list article > a { display: block; border: 1px solid var(--border); background: #090d0e; }
.map-wiki-list img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; }
.map-wiki-list h2 { margin: 0 0 8px; font: 400 20px/1.2 var(--display); }
.map-wiki-list h2 a { color: #c5d365; text-decoration: none; }
.map-wiki-list p { margin: 0; color: #bec8c6; }
.zombie-wiki-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zombie-wiki-list > a {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 84px;
  padding: 8px;
  border: 1px solid var(--border);
  background: #0e1415;
  text-decoration: none;
}
.zombie-wiki-list__media .sprite-preview { width: 74px; }
.zombie-wiki-list strong { display: block; color: #d9e47d; }
.zombie-wiki-list small { display: block; color: var(--text-dim); }

@media (max-width: 760px) {
  .wiki-infobox { float: none; width: 100%; margin: 0 0 20px; }
  .wiki-link-columns { columns: 1; }
  .map-wiki-list article { grid-template-columns: 1fr; }
  .zombie-wiki-list { grid-template-columns: 1fr; }
  .wiki-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}