/* ═══════════════════════════════════════════════════════════════════════════
   TOXIC // MW4 CLAN — tactical HUD theme (original art & CSS, no external assets)
   Vocabulary is documented in WEB_CONTRACT.md — W2/W3 templates use only these classes.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/Oswald.ttf") format("truetype"); font-weight: 200 700; font-display: swap; }

:root {
  --bg: #0e100f;
  --bg-2: #121513;
  --panel: #1c201e;
  --panel-2: #232825;
  --panel-3: #2a302c;
  --olive: #4a5234;
  --olive-2: #5f6943;
  --bone: #ece8da;
  --bone-dim: #b9b5a8;
  --orange: #3ddc6e;
  --orange-2: #7af0a0;
  --orange-glow: rgba(61, 220, 110, .35);
  --hud: #c4d6aa;
  --muted: #8b9184;
  --line: rgba(196, 214, 170, .14);
  --line-2: rgba(196, 214, 170, .26);
  --ok: #8cc63f;
  --warn: #f1c40f;
  --bad: #ff4d3d;
  --info: #5cb8e6;
  --tier-s: #ff3b30;
  --tier-a: #ff8c00;
  --tier-b: #f1c40f;
  --tier-c: #95a5a6;
  --r: 2px;
  --cut: 12px;
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --display: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --body: "Oswald", "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--bone);
  font: 400 16px/1.55 var(--body); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* page backdrop: topo lines + faint camo + vignette */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(61, 220, 110, .07), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(74, 82, 52, .25), transparent 60%),
    url("../img/topo.svg") 0 0 / 600px 600px;
  opacity: .9;
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, .55));
          mask-image: linear-gradient(#000, rgba(0, 0, 0, .55));
}
body::before { filter: opacity(.07); }
/* film grain + scanlines over everything (very subtle) */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

::selection { background: var(--orange); color: var(--bg); }
img { max-width: 100%; display: block; }
a { color: var(--orange); text-decoration: none; transition: color .2s; }
a:hover { color: var(--orange-2); }
hr { border: 0; height: 1px; background: var(--line); margin: 24px 0; }
code, kbd, .mono { font-family: var(--mono); font-size: .9em; }
code { background: var(--panel-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: var(--r); color: var(--hud); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; margin: 0 0 .5em; color: var(--bone); }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
small, .small { font-size: .82rem; }
.muted { color: var(--muted); }
.upper { text-transform: uppercase; letter-spacing: .12em; }
.text-orange { color: var(--orange); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }

/* ═════════════ layout ═════════════ */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
#main { flex: 1; padding-top: var(--nav-h); }
#main > .container:first-child, #main > .flash-spacer + .container { padding-top: 28px; }
.section { padding: 64px 0; position: relative; }
.section.tight { padding: 36px 0; }
.page-body { padding-bottom: 64px; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.split:has(> .subnav:first-child) { grid-template-columns: 230px minmax(0, 1fr); }
.split:has(> .subnav:last-child) { grid-template-columns: minmax(0, 1fr) 230px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack > * { margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row.between, .row.spread { justify-content: space-between; }
.grow { flex: 1; }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split:has(> .subnav:first-child), .split:has(> .subnav:last-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .container { padding: 0 14px; }
  .section { padding: 44px 0; }
}

/* ═════════════ headings / HUD title ═════════════ */
.page-head {
  position: relative; margin: 8px 0 28px; padding: 26px 26px 22px; overflow: hidden;
  border: 1px solid var(--line); background:
    linear-gradient(100deg, rgba(14, 16, 15, .96) 30%, rgba(14, 16, 15, .7)),
    url("../img/camo.svg") 0 0 / 240px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.page-head::before {  /* topo + orange edge */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background: url("../img/topo.svg") 0 0 / 600px;
}
.page-head::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: repeating-linear-gradient(180deg, var(--orange) 0 14px, transparent 14px 20px);
}
.page-head h1 { position: relative; margin: 0; }
.page-head .sub, .sub { position: relative; color: var(--hud); text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; margin-top: 8px; opacity: .85; }
.page-head .row { position: relative; }
.page-head > .btn-row, .page-head > .row { margin-top: 16px; }

.hud-title {
  display: flex; align-items: center; gap: .55em; margin: 0 0 18px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .05em;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.1;
  background: linear-gradient(var(--bone) 0 56%, transparent 56% 61%, var(--bone) 61%) 0 0 / 100% 1.1em repeat-y;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hud-title::before {
  content: ""; flex: none; width: .42em; height: .95em; background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 100%);
}
.hud-title::after {
  content: ""; flex: 1; min-width: 40px; height: 10px; align-self: center; opacity: .8;
  background:
    repeating-linear-gradient(90deg, var(--orange) 0 2px, transparent 2px 12px) left bottom / 100% 5px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) left bottom / 100% 1px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent);
          mask-image: linear-gradient(90deg, #000 30%, transparent);
}
h1.hud-title { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font: 500 .78rem/1 var(--body);
  letter-spacing: .28em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); }
.stencil {
  background: linear-gradient(currentColor 0 54%, transparent 54% 59%, currentColor 59%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ═════════════ cards ═════════════ */
.card {
  --br: rgba(236, 232, 218, .55); --bl: 14px;
  position: relative; padding: 20px; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(42, 48, 44, .55), rgba(20, 23, 21, .92) 60%), var(--panel);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
  transition: border-color .3s, box-shadow .3s, transform .25s var(--ease);
  min-width: 0;
}
.card::before {  /* HUD corner brackets — extend on hover */
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--br), var(--br)) left top / var(--bl) 2px no-repeat,
    linear-gradient(var(--br), var(--br)) left top / 2px var(--bl) no-repeat,
    linear-gradient(var(--br), var(--br)) right top / var(--bl) 2px no-repeat,
    linear-gradient(var(--br), var(--br)) right top / 2px var(--bl) no-repeat,
    linear-gradient(var(--br), var(--br)) left bottom / var(--bl) 2px no-repeat,
    linear-gradient(var(--br), var(--br)) left bottom / 2px var(--bl) no-repeat,
    linear-gradient(var(--br), var(--br)) right bottom / var(--bl) 2px no-repeat,
    linear-gradient(var(--br), var(--br)) right bottom / 2px var(--bl) no-repeat;
  transition: background-size .35s var(--ease);
}
.card:hover { border-color: rgba(61, 220, 110, .35); box-shadow: 0 0 0 1px rgba(61, 220, 110, .12), 0 18px 50px -20px var(--orange-glow); }
.card:hover::before {
  --br: var(--orange);
  background-size: 28px 2px, 2px 28px, 28px 2px, 2px 28px, 28px 2px, 2px 28px, 28px 2px, 2px 28px;
}
.card.tight { padding: 12px 14px; --bl: 10px; }
.card.accent { border-left: 3px solid var(--orange); background: linear-gradient(90deg, rgba(61, 220, 110, .09), transparent 40%), linear-gradient(160deg, rgba(42, 48, 44, .55), rgba(20, 23, 21, .92) 60%), var(--panel); }
.card.flat:hover { transform: none; }
.card > :last-child { margin-bottom: 0; }
.card-title { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.2rem; line-height: 1.15; margin: 0 0 4px; color: var(--bone); }
.card-sub { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin: 0 0 12px; }
.card-title + .card-sub { margin-top: 0; }
.card img.cover { width: calc(100% + 40px); max-width: none; margin: -20px -20px 16px; aspect-ratio: 16 / 9; object-fit: cover; }
a.card { color: inherit; display: block; }

/* ═════════════ data ═════════════ */
.stat { position: relative; padding-left: 14px; min-width: 0; }
.stat::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: linear-gradient(var(--orange), rgba(61, 220, 110, .15)); }
.stat-value { font: 400 clamp(1.8rem, 3.4vw, 2.5rem)/1 var(--display); color: var(--bone); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value small { font-size: .5em; color: var(--muted); margin-left: 4px; }
.stat-label { margin-top: 6px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--hud); opacity: .8; }

.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.kv dt, .kv dd { margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.kv dt { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; padding-right: 18px; align-self: center; }
.kv dd { text-align: right; overflow-wrap: anywhere; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); background: rgba(14, 16, 15, .6); }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.table td.wrap, .table th.wrap { white-space: normal; min-width: 200px; }
.table th { font: 500 .72rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .18em; color: var(--hud); background: rgba(74, 82, 52, .22); position: sticky; top: 0; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: rgba(61, 220, 110, .06); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; }
.table .rank-no { font-family: var(--display); color: var(--orange); width: 1%; }
.table-wrap > .table { min-width: 520px; }

.progress { position: relative; height: 10px; background: rgba(196, 214, 170, .08); border: 1px solid var(--line); overflow: hidden; }
.progress > span {
  display: block; height: 100%; width: 0; max-width: 100%;
  background: repeating-linear-gradient(-45deg, var(--orange) 0 8px, var(--orange-2) 8px 16px);
  background-size: 22.6px 22.6px; animation: stripes 1s linear infinite; transition: width 1s var(--ease);
  box-shadow: 0 0 12px var(--orange-glow);
}
.progress::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(14, 16, 15, .7) calc(10% - 1px) 10%); pointer-events: none; }
@keyframes stripes { to { background-position: 22.6px 0; } }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid var(--line-2); color: var(--hud); background: rgba(196, 214, 170, .05); white-space: nowrap;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
a.chip:hover { color: var(--orange); border-color: var(--orange); }
.chip.active { background: var(--orange); color: var(--bg); border-color: var(--orange); }

.avatar {
  width: 36px; height: 36px; flex: none; object-fit: cover; background: var(--panel-3);
  border: 1px solid var(--line-2); display: inline-block; vertical-align: middle;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.avatar.sm { width: 26px; height: 26px; }
.avatar.lg { width: 96px; height: 96px; border: 2px solid var(--orange); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }

.empty {
  position: relative; padding: 36px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(-45deg, rgba(196, 214, 170, .025) 0 10px, transparent 10px 20px);
  text-transform: uppercase; letter-spacing: .14em; font-size: .85rem;
}
.empty::before { content: "// NO INTEL"; display: block; color: var(--orange); font-size: .7rem; letter-spacing: .3em; margin-bottom: 8px; opacity: .8; }
.empty .btn { margin-top: 14px; }

/* badges */
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 24px; padding: 2px 8px;
  font: 500 .72rem/1.35 var(--body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--bone); background: var(--panel-3); border: 1px solid var(--line-2);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  padding-left: 10px; padding-right: 10px; vertical-align: middle;
}
.badge-s { background: var(--tier-s); border-color: var(--tier-s); color: #fff; font-family: var(--display); letter-spacing: .08em; }
.badge-a { background: var(--tier-a); border-color: var(--tier-a); color: var(--bg); font-family: var(--display); letter-spacing: .08em; }
.badge-b { background: var(--tier-b); border-color: var(--tier-b); color: var(--bg); font-family: var(--display); letter-spacing: .08em; }
.badge-c { background: var(--tier-c); border-color: var(--tier-c); color: var(--bg); font-family: var(--display); letter-spacing: .08em; }
.badge-ok { color: var(--ok); background: rgba(140, 198, 63, .12); border-color: rgba(140, 198, 63, .45); }
.badge-warn { color: var(--warn); background: rgba(241, 196, 15, .1); border-color: rgba(241, 196, 15, .45); }
.badge-bad { color: var(--bad); background: rgba(255, 77, 61, .1); border-color: rgba(255, 77, 61, .45); }
.badge-info { color: var(--info); background: rgba(92, 184, 230, .1); border-color: rgba(92, 184, 230, .45); }
.badge-rank { color: var(--bg); background: var(--hud); border-color: var(--hud); }

/* ═════════════ buttons ═════════════ */
.btn {
  --b-bg: var(--panel-3); --b-border: var(--line-2); --b-fg: var(--bone); --c: 10px;
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; min-height: 44px; font: 500 .9rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--b-fg); background: transparent; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: color .2s, filter .25s, transform .15s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn::before, .btn::after { content: ""; position: absolute; z-index: -2; clip-path: inherit; transition: background .2s; }
.btn::before { inset: 0; background: var(--b-border); }
.btn::after { inset: 1px; z-index: -1; background: var(--b-bg); clip-path: polygon(calc(var(--c) - .5px) 0, 100% 0, 100% calc(100% - var(--c) + .5px), calc(100% - var(--c) + .5px) 100%, 0 100%, 0 calc(var(--c) - .5px)); }
.btn:hover { color: var(--b-fg); --b-border: var(--orange); filter: drop-shadow(0 0 10px var(--orange-glow)); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; filter: grayscale(.6); }
.btn-primary { --b-bg: var(--orange); --b-border: var(--orange); --b-fg: #120a03; font-weight: 600; }
.btn-primary:hover { --b-bg: var(--orange-2); --b-border: var(--orange-2); color: #120a03; filter: drop-shadow(0 0 14px rgba(61, 220, 110, .6)); }
.btn-ghost { --b-bg: rgba(14, 16, 15, .55); --b-border: var(--line-2); }
.btn-ghost:hover { --b-bg: rgba(61, 220, 110, .08); color: var(--orange-2); }
.btn-danger { --b-bg: rgba(255, 77, 61, .14); --b-border: rgba(255, 77, 61, .7); --b-fg: #ffb3ab; }
.btn-danger:hover { --b-bg: var(--bad); --b-border: var(--bad); color: #fff; filter: drop-shadow(0 0 12px rgba(255, 77, 61, .5)); }
.btn-sm { padding: 7px 14px; min-height: 34px; font-size: .76rem; --c: 7px; }
.btn-lg { padding: 16px 30px; min-height: 54px; font-size: 1rem; --c: 14px; }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn .ripple { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .35); transform: scale(0); animation: ripple .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-discord { --b-bg: #5865f2; --b-border: #5865f2; --b-fg: #fff; }
.btn-discord:hover { --b-bg: #6d78ff; --b-border: #8a93ff; color: #fff; filter: drop-shadow(0 0 14px rgba(88, 101, 242, .55)); }

/* ═════════════ forms ═════════════ */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .form label:not(.check), .label {
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hud);
}
.field > label .req, .req { color: var(--orange); }
.help { font-size: .82rem; color: var(--muted); margin: 0; }
.error-text { font-size: .82rem; color: var(--bad); }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=password], input[type=search],
input[type=date], input[type=datetime-local], input[type=time], input[type=tel], input:not([type]), select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: 400 1rem/1.4 var(--body); color: var(--bone);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 0; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none;
}
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #5f665a; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(61, 220, 110, .16), inset 0 0 18px rgba(61, 220, 110, .05); background: #141714; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }
select {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff7a1a' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
select option { background: var(--panel); color: var(--bone); }
input[type=checkbox], input[type=radio] { accent-color: var(--orange); width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; }
input[type=file] { width: 100%; padding: 10px; color: var(--muted); background: var(--bg-2); border: 1px dashed var(--line-2); font: inherit; cursor: pointer; }
input[type=file]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 0; font: 500 .78rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--bg); background: var(--hud); cursor: pointer;
}
input[type=range] { width: 100%; accent-color: var(--orange); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--bone); }
.check input { margin-top: 3px; }
fieldset { border: 1px solid var(--line); padding: 16px; margin: 0; }
legend { padding: 0 8px; font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0; }
.inline-form .field { flex: 1 1 160px; }
.inline-form input, .inline-form select { width: auto; flex: 1 1 140px; }
.inline-form .btn { flex: none; }
.form .row > .field { flex: 1 1 220px; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ═════════════ tabs + subnav ═════════════ */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 22px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > a, .tabs > button {
  position: relative; padding: 12px 18px; white-space: nowrap; font: 500 .84rem/1 var(--body); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); background: none; border: 0; cursor: pointer;
}
.tabs > a::after, .tabs > button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--orange); transform: scaleX(0); transition: transform .25s var(--ease); }
.tabs > a:hover, .tabs > button:hover { color: var(--bone); }
.tabs > a.active, .tabs > button.active { color: var(--bone); }
.tabs > a.active::after, .tabs > button.active::after { transform: scaleX(1); }

.subnav {
  position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 2px; padding: 10px;
  border: 1px solid var(--line); background: rgba(20, 23, 21, .85); list-style: none; margin: 0;
}
.subnav li { list-style: none; }
.subnav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--bone-dim); font-size: .86rem;
  letter-spacing: .12em; text-transform: uppercase; border-left: 2px solid transparent; transition: all .2s;
}
.subnav a:hover { color: var(--bone); background: rgba(196, 214, 170, .05); border-left-color: var(--line-2); }
.subnav a.active { color: var(--bone); background: linear-gradient(90deg, rgba(61, 220, 110, .16), transparent); border-left-color: var(--orange); }
.subnav .subnav-title, .subnav h4 { font: 500 .7rem/1 var(--body); letter-spacing: .26em; color: var(--orange); padding: 12px 12px 6px; margin: 0; }
@media (max-width: 900px) {
  .subnav { position: relative; top: 0; flex-direction: row; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .subnav a.active { border-bottom-color: var(--orange); background: rgba(61, 220, 110, .1); }
  .subnav .subnav-title, .subnav h4 { display: none; }
}

/* ═════════════ effects ═════════════ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: inherit; -webkit-background-clip: inherit; background-clip: inherit;
}
.glitch::before { color: var(--orange); -webkit-text-fill-color: var(--orange); animation: glitch-a 5s infinite steps(1); }
.glitch::after { color: var(--hud); -webkit-text-fill-color: var(--hud); animation: glitch-b 5s infinite steps(1); }
@keyframes glitch-a {
  0%, 89%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  90% { opacity: .9; transform: translate(-4px, 1px); clip-path: inset(12% 0 62% 0); }
  92% { opacity: .9; transform: translate(5px, -2px); clip-path: inset(58% 0 18% 0); }
  94% { opacity: .9; transform: translate(-2px, 0); clip-path: inset(30% 0 45% 0); }
  96% { opacity: .9; transform: translate(3px, 2px); clip-path: inset(80% 0 4% 0); }
}
@keyframes glitch-b {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  91% { opacity: .8; transform: translate(4px, -1px); clip-path: inset(40% 0 35% 0); }
  93% { opacity: .8; transform: translate(-5px, 2px); clip-path: inset(5% 0 75% 0); }
  95% { opacity: .8; transform: translate(2px, 1px); clip-path: inset(66% 0 10% 0); }
}

.scan { position: relative; }
.scan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
.scan.moving::after, .hero .scan-beam { animation: none; }

.pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); position: relative; flex: none; vertical-align: middle; box-shadow: 0 0 8px var(--ok); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ok); animation: ping 1.6s ease-out infinite; }
.pulse.orange, .pulse.live { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.pulse.orange::after, .pulse.live::after { border-color: var(--orange); }
.pulse.red { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.pulse.red::after { border-color: var(--bad); }
.pulse.off { background: var(--muted); box-shadow: none; }
.pulse.off::after { display: none; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }

.radar {
  --size: 220px; position: relative; width: var(--size); height: var(--size); border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 24.5%, rgba(196, 214, 170, .25) 25% 25.5%, transparent 26% 49.5%, rgba(196, 214, 170, .25) 50% 50.5%, transparent 51% 74.5%, rgba(196, 214, 170, .25) 75% 75.5%, transparent 76% 99%, rgba(196, 214, 170, .5) 99.5%),
    linear-gradient(rgba(196, 214, 170, .2), rgba(196, 214, 170, .2)) center / 1px 100% no-repeat,
    linear-gradient(rgba(196, 214, 170, .2), rgba(196, 214, 170, .2)) center / 100% 1px no-repeat,
    radial-gradient(circle, rgba(74, 82, 52, .35), rgba(14, 16, 15, .2));
}
.radar::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(61, 220, 110, 0) 0deg, rgba(61, 220, 110, 0) 290deg, rgba(61, 220, 110, .45) 358deg, rgba(255, 180, 120, .9) 360deg);
  animation: sweep 4s linear infinite;
}
.radar i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: blip 4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 100% { opacity: .15; } 8% { opacity: 1; } 40% { opacity: .3; } }

.warning-band { height: 10px; background: repeating-linear-gradient(-45deg, var(--hazard, #ff8a1f) 0 14px, var(--bg) 14px 28px); opacity: .9; }

/* ═════════════ top nav ═════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h);
  background: linear-gradient(rgba(14, 16, 15, .94), rgba(14, 16, 15, .82)); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  transition: background .3s, box-shadow .3s;
}
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--orange) 20%, transparent 50%); opacity: .6; }
.nav.scrolled { background: rgba(14, 16, 15, .97); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 22px; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--bone); flex: none; }
.brand img { width: 38px; height: 38px; }
.brand-name { font: 400 1.55rem/1 var(--display); letter-spacing: .1em; }
.brand-tag { font-size: .62rem; letter-spacing: .28em; color: var(--orange); text-transform: uppercase; display: block; margin-top: 3px; }
.brand:hover { color: var(--bone); }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav-links a {
  position: relative; padding: 10px 12px; font: 500 .84rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-dim); white-space: nowrap;
}
.nav-links a::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-links a:hover { color: var(--bone); }
.nav-links a:hover::before, .nav-links a.active::before { transform: scaleX(1); }
.nav-links a.active { color: var(--bone); }
.nav-right { display: flex; align-items: center; gap: 12px; flex: none; }
.hud-clock { font: 400 .76rem/1 var(--mono); color: var(--hud); letter-spacing: .1em; opacity: .7; white-space: nowrap; }
.hud-clock b { color: var(--orange); font-weight: 400; }
.btn-staff { --b-bg: rgba(61, 220, 110, .12); --b-border: var(--orange); --b-fg: var(--orange); font-weight: 600; }
.btn-staff:hover { --b-bg: var(--orange); color: var(--bg); }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; background: none; border: 1px solid var(--line); color: var(--bone); cursor: pointer; font: 500 .85rem/1 var(--body); letter-spacing: .06em; }
.user-btn:hover, .user-menu.open .user-btn { border-color: var(--orange); }
.user-btn .avatar { width: 30px; height: 30px; }
.user-btn .caret { width: 10px; height: 10px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(45deg) translateY(-3px); margin: 0 4px; }
.user-drop {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; padding: 8px; display: none; z-index: 5;
  background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .9);
}
.user-menu.open .user-drop { display: block; animation: drop .2s var(--ease); }
.user-drop .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-drop .who b { display: block; font-family: var(--display); font-weight: 400; letter-spacing: .05em; font-size: 1.05rem; }
.user-drop a, .user-drop button { display: block; width: 100%; text-align: left; padding: 9px 10px; color: var(--bone-dim); background: none; border: 0; font: 500 .82rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.user-drop a:hover, .user-drop button:hover { color: var(--orange); background: rgba(61, 220, 110, .08); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.burger { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line-2); cursor: pointer; position: relative; flex: none; }
.burger span, .burger::before, .burger::after { content: ""; position: absolute; left: 11px; right: 11px; height: 2px; background: var(--bone); transition: transform .3s var(--ease), opacity .2s; }
.burger::before { top: 14px; } .burger span { top: 21px; } .burger::after { top: 28px; }
.drawer-open .burger::before { transform: translateY(7px) rotate(45deg); background: var(--orange); }
.drawer-open .burger span { opacity: 0; }
.drawer-open .burger::after { transform: translateY(-7px) rotate(-45deg); background: var(--orange); }

.drawer {
  position: fixed; top: var(--nav-h); right: 0; bottom: 0; width: min(340px, 88vw); z-index: 999; padding: 18px 18px 30px;
  background: linear-gradient(rgba(18, 21, 19, .98), rgba(14, 16, 15, .99)), url("../img/camo.svg"); border-left: 1px solid var(--line-2);
  transform: translateX(105%); transition: transform .35s var(--ease); overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.drawer::before { content: "// NAVIGATION"; font-size: .68rem; letter-spacing: .3em; color: var(--orange); padding: 4px 10px 10px; }
.drawer a.dl { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; font: 400 1.35rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); border-bottom: 1px solid var(--line); }
.drawer a.dl::after { content: "›"; color: var(--orange); font-family: var(--body); }
.drawer a.dl.active { color: var(--orange); }
.drawer .btn { margin-top: 12px; }
.drawer-open .drawer { transform: none; }
.scrim-bg { position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .3s; }
.drawer-open .scrim-bg { opacity: 1; pointer-events: auto; }

@media (max-width: 1100px) { .hud-clock { display: none; } }
@media (max-width: 960px) {
  .nav-links, .nav-right .btn-login-full, .nav-right .user-menu, .nav-right .btn-staff { display: none; }
  .burger { display: block; }
  .nav-inner { justify-content: space-between; }
}
@media (min-width: 961px) { .drawer, .scrim-bg { display: none; } }

/* ═════════════ flash toasts ═════════════ */
.flashes { position: fixed; top: calc(var(--nav-h) + 14px); right: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 32px)); }
.flash {
  --fc: var(--ok); position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 40px 14px 16px;
  background: rgba(28, 32, 30, .97); border: 1px solid var(--line-2); border-left: 4px solid var(--fc);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .9); animation: toast-in .45s var(--ease) both; font-size: .95rem;
}
.flash::before { content: "▲"; color: var(--fc); font-size: .7rem; margin-top: 4px; }
.flash.ok::before { content: "✔"; } .flash.info::before { content: "i"; font-family: var(--mono); font-weight: 700; }
.flash.error { --fc: var(--bad); } .flash.info { --fc: var(--info); }
.flash .x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1rem; }
.flash .x:hover { color: var(--bone); }
.flash .bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--fc); animation: toast-timer 7s linear forwards; }
.flash.out { animation: toast-out .35s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }
@keyframes toast-timer { from { width: 100%; } to { width: 0; } }

/* ═════════════ footer ═════════════ */
.footer { position: relative; margin-top: 40px; border-top: 1px solid var(--line); background: linear-gradient(rgba(14, 16, 15, .9), #0b0c0b), url("../img/camo.svg"); }
.footer .warning-band { opacity: .5; height: 6px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; padding: 40px 20px 26px; }
.footer h4 { font-size: .95rem; color: var(--hud); letter-spacing: .14em; margin-bottom: 12px; }
.footer .brand { display: inline-flex; color: var(--bone); }
.footer a:not(.brand) { color: var(--bone-dim); display: block; padding: 3px 0; font-size: .92rem; }
.footer a:hover { color: var(--orange); }
.footer .legal { border-top: 1px solid var(--line); padding: 16px 20px 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-inner > :first-child { grid-column: 1 / -1; } }

/* ═════════════ boot overlay ═════════════ */
.boot {
  position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(ellipse at center, #161a17, #070807 70%);
}
.booting .boot { display: flex; }
.boot.done { animation: boot-out .45s ease forwards; }
@keyframes boot-out { to { opacity: 0; visibility: hidden; transform: scale(1.03); } }
.boot::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); pointer-events: none; }
.boot-box { position: relative; width: min(520px, 86vw); font: 400 .95rem/1.7 var(--mono); color: var(--hud); }
.boot-box .radar { --size: 90px; position: absolute; right: 0; top: -110px; }
.boot-lines { min-height: 7.2em; white-space: pre-wrap; }
.boot-lines .ok { color: var(--orange); }
.boot-lines .cursor { display: inline-block; width: .6em; height: 1.1em; background: var(--orange); vertical-align: text-bottom; animation: blink .7s steps(1) infinite; }
.boot-bar { height: 4px; background: rgba(196, 214, 170, .15); margin-top: 18px; overflow: hidden; }
.boot-bar span { display: block; height: 100%; width: 0; background: var(--orange); box-shadow: 0 0 14px var(--orange); transition: width .15s linear; }
.boot-meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: .7rem; letter-spacing: .25em; opacity: .55; }
@keyframes blink { 50% { opacity: 0; } }

/* ═════════════ page transitions ═════════════ */
#main { animation: page-in .5s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }
body.leaving #main { animation: page-out .2s ease forwards; }
@keyframes page-out { to { opacity: 0; transform: translateY(-8px); } }
.route-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 2000; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
body.leaving .route-bar { animation: route 1.2s var(--ease) forwards; }
@keyframes route { to { width: 85%; } }

/* ═════════════ HERO (landing) ═════════════ */
.hero { position: relative; min-height: min(92vh, 900px); display: flex; align-items: center; overflow: hidden; margin-top: calc(-1 * var(--nav-h)); padding: calc(var(--nav-h) + 40px) 0 120px; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -3; background: var(--bg); }
.hero-bg .slide { position: absolute; inset: -4%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.8s ease; will-change: transform, opacity; }
.hero-bg .slide.on { opacity: 1; }
.hero-bg .slide.kb-1 { animation: kb1 16s ease-out both; }
.hero-bg .slide.kb-2 { animation: kb2 16s ease-out both; }
.hero-bg .slide.kb-3 { animation: kb3 16s ease-out both; }
@keyframes kb1 { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
@keyframes kb2 { from { transform: scale(1.14) translate(2%, 1%); } to { transform: scale(1.03) translate(0, 0); } }
@keyframes kb3 { from { transform: scale(1.05) translate(1.5%, -1%); } to { transform: scale(1.15) translate(-1%, 2%); } }
.hero-overlay { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 16, 15, .94) 0%, rgba(14, 16, 15, .7) 38%, rgba(14, 16, 15, .2) 70%, rgba(14, 16, 15, .45)),
    linear-gradient(0deg, var(--bg) 0%, rgba(14, 16, 15, 0) 30%),
    linear-gradient(180deg, rgba(14, 16, 15, .7) 0%, rgba(14, 16, 15, 0) 22%);
}
.hero-camo { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .13; mix-blend-mode: overlay; background: url("../img/camo.svg") 0 0 / 240px; }
.hero-topo { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .12; background: url("../img/topo.svg") 0 0 / 600px; -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 60%); mask-image: linear-gradient(100deg, #000 10%, transparent 60%); }
.hero-scan { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 4px); }
.hero-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 140px; top: -140px; background: linear-gradient(180deg, transparent, rgba(196, 214, 170, .06), transparent); animation: beam 7s linear infinite; }
@keyframes beam { to { top: 110%; } }
.hero-hud { position: absolute; inset: calc(var(--nav-h) + 18px) 20px 104px; z-index: -1; pointer-events: none; font: 400 .74rem/1.4 var(--mono); color: var(--hud); letter-spacing: .12em; text-transform: uppercase; }
.hero-hud .c { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(236, 232, 218, .55); }
.hero-hud .c.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.hero-hud .c.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.hero-hud .c.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.hero-hud .c.br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.hero-hud .t { position: absolute; opacity: .75; }
.hero-hud .t.tl { left: 48px; top: 8px; } .hero-hud .t.tr { right: 48px; top: 8px; text-align: right; }
.hero-hud .t.bl { left: 48px; bottom: 6px; color: var(--orange); } .hero-hud .t.br { right: 48px; bottom: 6px; text-align: right; }
.hero-hud .rec::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-right: 8px; animation: blink 1.2s steps(1) infinite; }
.hero-hud .reticle { position: absolute; right: 22%; top: 38%; width: 70px; height: 70px; opacity: .35; }
.hero-radar { position: absolute; right: 5%; bottom: 120px; z-index: -1; --size: 230px; opacity: .85; }
.hero-content { position: relative; max-width: 760px; }
.hero h1 { font-size: clamp(4.4rem, 15vw, 10.5rem); line-height: .86; margin: 0 0 6px; letter-spacing: .04em; text-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.hero h1 .glitch { background: linear-gradient(var(--bone) 0 57%, transparent 57% 61%, var(--bone) 61%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero .tagline { font: 400 clamp(1.1rem, 2.6vw, 1.6rem)/1.2 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--hud); margin-bottom: 18px; }
.hero .tagline span { color: var(--orange); margin: 0 .35em; }
.hero .lead { font-size: clamp(1rem, 1.7vw, 1.2rem); color: var(--bone-dim); max-width: 560px; margin-bottom: 28px; font-weight: 300; }
.hero .btn-row { gap: 14px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.hero-dots { position: absolute; left: 20px; bottom: 96px; display: flex; gap: 6px; z-index: 2; }
.hero-dots button { width: 26px; height: 4px; padding: 0; border: 0; background: rgba(236, 232, 218, .3); cursor: pointer; transition: background .3s, width .3s; }
.hero-dots button.on { background: var(--orange); width: 44px; }

.live-strip { position: relative; z-index: 3; margin-top: -78px; }
.live-strip .grid-4 { gap: 0; border: 1px solid var(--line-2); background: rgba(20, 23, 21, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.live-strip .cell { padding: 20px 24px; border-right: 1px solid var(--line); position: relative; }
.live-strip .cell:last-child { border-right: 0; }
.live-strip .cell .stat-label { display: flex; align-items: center; gap: 8px; }
.live-strip .stat::before { display: none; }
.live-strip .stat { padding-left: 0; }
.live-strip .top-ticks { position: absolute; left: 0; right: 0; top: -1px; height: 4px; background: repeating-linear-gradient(90deg, var(--orange) 0 2px, transparent 2px 14px); opacity: .5; }
@media (max-width: 1024px) {
  .live-strip .cell:nth-child(2) { border-right: 0; }
  .live-strip .cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .hero { min-height: 88vh; padding-bottom: 110px; align-items: flex-end; }
  .hero-overlay { background: linear-gradient(0deg, var(--bg) 3%, rgba(14, 16, 15, .82) 38%, rgba(14, 16, 15, .25) 72%, rgba(14, 16, 15, .55)); }
  .hero h1 { font-size: clamp(4.4rem, 27vw, 7rem); }
  .hero .eyebrow { letter-spacing: .16em; font-size: .7rem; }
  .hero-hud { bottom: 92px; }
  .shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .shot .meta { font-size: .78rem; left: 8px; right: 8px; bottom: 6px; }
  .hero-radar { --size: 130px; right: -20px; top: calc(var(--nav-h) + 40px); bottom: auto; opacity: .55; }
  .hero-hud .t.tr, .hero-hud .reticle, .hero-hud .t.br, .hero-hud .t.bl, .hero-hud .c.bl, .hero-hud .c.br { display: none; }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .live-strip { margin-top: -60px; }
  .live-strip .cell { padding: 14px 16px; }
  .hero-dots { bottom: 76px; left: 14px; }
}

/* pitch / feature cards */
.feature { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.feature .ico { width: 52px; height: 52px; display: grid; place-items: center; color: var(--orange); border: 1px solid rgba(61, 220, 110, .4); background: rgba(61, 220, 110, .07); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.feature .ico svg { width: 28px; height: 28px; }
.feature p { color: var(--bone-dim); margin: 0; font-weight: 300; }
.feature .num { position: absolute; top: 14px; right: 18px; font: 400 2.4rem/1 var(--display); color: rgba(196, 214, 170, .08); }

/* meta pick card */
.pick { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.pick .weapon { font: 400 1.5rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.pick .attach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pick .code { font-family: var(--mono); font-size: .8rem; color: var(--hud); background: var(--bg-2); border: 1px dashed var(--line-2); padding: 6px 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.pick .code:hover { border-color: var(--orange); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; padding: 56px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(14, 16, 15, .95), rgba(14, 16, 15, .6)), url("../img/fallback-4.jpg") center / cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: url("../img/topo.svg") 0 0 / 600px; opacity: .08; }
.cta-band .container { position: relative; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.cta-band h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); }

/* ═════════════ gallery ═════════════ */
.shots { columns: 3 300px; column-gap: 16px; }
.shot { position: relative; break-inside: avoid; margin-bottom: 16px; display: block; overflow: hidden; border: 1px solid var(--line); background: var(--panel); color: var(--bone); }
.shot img { width: 100%; height: auto; transition: transform .6s var(--ease), filter .4s; filter: saturate(.92) contrast(1.04); }
.shot:hover img { transform: scale(1.05); filter: saturate(1.1) contrast(1.08); }
.shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(14, 16, 15, .92), transparent 45%); opacity: .85; transition: opacity .3s; }
.shot .meta { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.shot .meta .cap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot .corner { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 6px; }
.shot:hover { border-color: rgba(61, 220, 110, .5); color: var(--bone); }
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.shot-grid .shot { margin: 0; aspect-ratio: 16 / 10; }
.shot-grid .shot img { height: 100%; object-fit: cover; }
.dropzone { position: relative; border: 1px dashed var(--line-2); padding: 18px; background: rgba(14, 16, 15, .6); text-align: center; transition: border-color .2s, background .2s; }
.dropzone.over { border-color: var(--orange); background: rgba(61, 220, 110, .06); }
.dropzone img.preview { max-height: 200px; margin: 12px auto 0; border: 1px solid var(--line-2); }

.lightbox { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; padding: 60px 20px; background: rgba(5, 6, 5, .94); }
.lightbox.open { display: flex; animation: fade-in .25s ease; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox img { max-height: calc(100vh - 160px); max-width: 100%; object-fit: contain; border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .8); }
.lightbox figcaption { color: var(--bone-dim); text-align: center; font-size: .95rem; }
.lightbox .lb-btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; color: var(--bone); background: rgba(28, 32, 30, .8); border: 1px solid var(--line-2); cursor: pointer; font-size: 1.4rem; }
.lightbox .lb-btn:hover { border-color: var(--orange); color: var(--orange); }
.lightbox .lb-close { top: 14px; right: 14px; } .lightbox .lb-prev { left: 14px; top: 50%; } .lightbox .lb-next { right: 14px; top: 50%; }
@keyframes fade-in { from { opacity: 0; } }

/* roster */
.rank-block { margin-bottom: 34px; }
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.op { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(28, 32, 30, .7); transition: border-color .2s, transform .2s; min-width: 0; }
.op:hover { border-color: rgba(61, 220, 110, .45); transform: translateX(3px); }
.op .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op .avatar { width: 40px; height: 40px; }

/* application steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 10px 0 24px; counter-reset: step; }
.step { position: relative; padding: 14px 10px 0; text-align: center; color: var(--muted); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 10px; border: 2px solid var(--line-2); background: var(--bg); font: 400 1rem/1 var(--display); color: var(--muted); position: relative; z-index: 1; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.step::after { content: ""; position: absolute; top: 33px; left: -50%; width: 100%; height: 2px; background: var(--line-2); }
.step:first-child::after { display: none; }
.step.done, .step.now { color: var(--bone); }
.step.done::before { background: var(--olive); border-color: var(--hud); color: var(--bone); content: "✔"; }
.step.done::after, .step.now::after { background: var(--orange); }
.step.now::before { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 16px var(--orange-glow); }
.step.bad::before { border-color: var(--bad); color: var(--bad); content: "✖"; }
@media (max-width: 520px) { .step { font-size: .62rem; letter-spacing: .06em; } }

.rules-list { counter-reset: r; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rules-list li { position: relative; padding: 10px 12px 10px 46px; background: rgba(14, 16, 15, .5); border: 1px solid var(--line); font-size: .95rem; color: var(--bone-dim); }
.rules-list li::before { counter-increment: r; content: counter(r, decimal-leading-zero); position: absolute; left: 12px; top: 10px; font-family: var(--display); color: var(--orange); }
.rules-list strong { color: var(--bone); font-weight: 500; }

/* error page */
.error-wrap { min-height: calc(100vh - var(--nav-h) - 200px); display: grid; place-items: center; text-align: center; padding: 60px 0; }
.error-code { font: 400 clamp(6rem, 22vw, 13rem)/.9 var(--display); color: transparent; -webkit-text-stroke: 2px rgba(236, 232, 218, .35); letter-spacing: .06em; position: relative; }
.error-code .glitch { -webkit-text-stroke: 2px var(--orange); }
.error-wrap .radar { --size: 140px; margin: 0 auto 18px; }

/* misc helpers */
.divider-ticks { height: 12px; margin: 30px 0; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 10px) bottom / 100% 6px no-repeat, linear-gradient(var(--line), var(--line)) bottom / 100% 1px no-repeat; }
.kicker { font-size: .72rem; letter-spacing: .26em; color: var(--orange); text-transform: uppercase; }
.list-clean { list-style: none; padding: 0; margin: 0; }
.list-clean li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.list-clean li:last-child { border-bottom: 0; }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .mt { margin-top: 20px; } .mb { margin-bottom: 20px; }

/* ═════════════ reduced motion ═════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body::after, .radar::before, .hero-scan::after, .glitch::before, .glitch::after { animation: none !important; }
  .glitch::before, .glitch::after { opacity: 0 !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-bg .slide { animation: none !important; }
  .booting .boot { display: none; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }

@media print {
  .nav, .footer, .boot, .flashes, .drawer, body::before, body::after { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Staff button: solid orange with dark text (always readable) */
.btn.btn-staff, .nav-right .btn.btn-staff { --b-bg: var(--orange); --b-border: var(--orange); --b-fg: #120a03; color: #120a03; font-weight: 700; }
.btn.btn-staff:hover, .nav-right .btn.btn-staff:hover { --b-bg: var(--orange-2, #7af0a0); --b-border: var(--orange-2, #7af0a0); color: #120a03; filter: drop-shadow(0 0 14px rgba(61, 220, 110, .6)); }

/* ═══════════════════════════════════════════════════════════════════════════
   ARMORY — weapon grid · weapon/build pages · live builder · compare (web/armory.py)
   ═══════════════════════════════════════════════════════════════════════════ */
.arm-week-mode[hidden], [data-only][hidden], .wcat-item[hidden], .wpn-panel[hidden] { display: none !important; }
.arm-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }
.arm-crumbs a { color: var(--bone-dim); } .arm-crumbs a:hover { color: var(--orange); } .arm-crumbs b { color: var(--bone); font-weight: 500; }
.arm-crumbs span { color: var(--orange); opacity: .7; }
.arm-head h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.arm-head .eyebrow { position: relative; }
.arm-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 22px; max-width: 760px; }
.arm-stats .stat-value { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.arm-fresh { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fresh-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; font: 500 .7rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--hud); border: 1px solid var(--line-2); background: rgba(14, 16, 15, .6); }
.fresh-pill .pulse { width: 7px; height: 7px; }
.fresh-pill.warn { color: var(--warn); border-color: rgba(241, 196, 15, .45); background: rgba(241, 196, 15, .07); }
@media (max-width: 600px) { .arm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* toolbar: mode segmented control · search · class chips */
.arm-toolbar { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20; display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: 12px 16px; align-items: center;
  padding: 12px 14px; margin: 6px 0 10px; border: 1px solid var(--line-2); background: rgba(18, 21, 19, .93);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 30px -20px #000; }
.arm-toolbar::before { content: ""; position: absolute; left: 0; top: -1px; width: 80px; height: 2px; background: var(--orange); }
.arm-chips { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.arm-chips::-webkit-scrollbar { display: none; }
.arm-chips .chip { padding: 6px 12px; cursor: pointer; }
.arm-search input { min-height: 40px; }
.arm-seg { display: inline-flex; border: 1px solid var(--line-2); background: var(--bg-2); padding: 3px; gap: 3px; flex: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.arm-seg > a, .arm-seg > label > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font: 500 .8rem/1 var(--body); letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone-dim); cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.arm-seg > a:hover, .arm-seg > label:hover > span { color: var(--bone); background: rgba(196, 214, 170, .06); }
.arm-seg > a.active, .arm-seg > label > input:checked + span { background: var(--orange); color: #120a03; font-weight: 600; }
.arm-seg > label > input { position: absolute; opacity: 0; pointer-events: none; }
.arm-seg > label > input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.arm-seg.sm > a, .arm-seg.sm > label > span { padding: 6px 12px; font-size: .72rem; }
.arm-count { margin: 0 2px 12px; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
@media (max-width: 600px) {
  .arm-toolbar { grid-template-columns: minmax(0, 1fr); top: calc(var(--nav-h) + 4px); padding: 10px; }
  .arm-seg { width: 100%; } .arm-seg > a, .arm-seg > label { flex: 1; } .arm-seg > a, .arm-seg > label > span { justify-content: center; width: 100%; }
}

/* weapon cards */
.arm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
a.card.wpn-card { display: flex; }
.wpn-card.hidden { display: none !important; }
.wpn-card { --tier-c-col: transparent; flex-direction: column; gap: 8px; min-height: 178px; padding: 16px 16px 14px; overflow: hidden; isolation: isolate; color: var(--bone); }
.wpn-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tier-c-col); opacity: .95; }
.arm-grid[data-mode=mp] .wpn-card[data-tier-mp=S], .arm-grid[data-mode=dmz] .wpn-card[data-tier-dmz=S] { --tier-c-col: var(--tier-s); }
.arm-grid[data-mode=mp] .wpn-card[data-tier-mp=A], .arm-grid[data-mode=dmz] .wpn-card[data-tier-dmz=A] { --tier-c-col: var(--tier-a); }
.arm-grid[data-mode=mp] .wpn-card[data-tier-mp=B], .arm-grid[data-mode=dmz] .wpn-card[data-tier-dmz=B] { --tier-c-col: var(--tier-b); }
.arm-grid[data-mode=mp] .wpn-card[data-tier-mp=C], .arm-grid[data-mode=dmz] .wpn-card[data-tier-dmz=C] { --tier-c-col: var(--tier-c); }
.wpn-card:hover { color: var(--bone); }
.wpn-glyph { position: absolute; right: -8px; bottom: -14px; z-index: -1; font-size: 6.2rem; line-height: 1; opacity: .07; filter: grayscale(1) contrast(1.4);
  transform: rotate(-12deg); transition: opacity .35s, transform .5s var(--ease); pointer-events: none; }
.wpn-card:hover .wpn-glyph { opacity: .16; transform: rotate(-4deg) scale(1.08); }
.wpn-patched { position: absolute; top: 12px; right: 12px; font: 500 .62rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--warn);
  border: 1px solid rgba(241, 196, 15, .45); padding: 3px 6px; background: rgba(14, 16, 15, .7); }
.wpn-class { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--hud); opacity: .85; }
.wpn-name { font: 400 1.55rem/1.02 var(--display); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.wpn-card:hover .wpn-name { color: #fff; text-shadow: 0 0 18px rgba(61, 220, 110, .35); }
.wpn-tiers, .wpn-comm { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.wpn-tier, .wpn-comm > span { display: inline-flex; align-items: center; gap: 6px; transition: opacity .25s; }
.wpn-tier-l { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.arm-grid[data-mode=mp] .wpn-tier[data-m=dmz], .arm-grid[data-mode=dmz] .wpn-tier[data-m=mp] { opacity: .45; }
.wpn-tier.off { opacity: .22 !important; }
.wpn-untiered { color: var(--muted); background: transparent; border-style: dashed; font-family: var(--body); }
.trend { font: 500 .72rem/1 var(--body); letter-spacing: .06em; white-space: nowrap; }
.trend.up { color: var(--ok); } .trend.down { color: var(--bad); }
.wpn-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--line); font-size: .78rem; color: var(--muted); }
.wpn-count b { color: var(--bone); font-weight: 600; font-family: var(--display); font-size: 1rem; margin-right: 2px; }
.wpn-go { color: var(--orange); letter-spacing: .16em; text-transform: uppercase; font-size: .7rem; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s var(--ease); }
.wpn-card:hover .wpn-go, .wpn-card:focus-visible .wpn-go { opacity: 1; transform: none; }
@media (max-width: 600px) { .arm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wpn-card { min-height: 160px; padding: 12px; } .wpn-name { font-size: 1.2rem; }
  .wpn-go { display: none; } .wpn-tiers, .wpn-comm { gap: 4px 10px; } .wpn-glyph { font-size: 4.6rem; } }
@media (max-width: 360px) { .arm-grid { grid-template-columns: minmax(0, 1fr); } }

/* this week strip */
.arm-week { margin: 0 0 18px; }
.arm-week-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.arm-week-grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.movers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.movers li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.movers li:last-child { border-bottom: 0; } .movers a { color: var(--bone); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movers a:hover { color: var(--orange); }
.arm-trending { min-width: 0; }
.trend-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--olive) transparent; }
a.card.trend-card { display: flex; }
.trend-card { scroll-snap-align: start; flex-direction: column; gap: 8px; color: var(--bone); }
.trend-card:hover { color: var(--bone); }
.tc-title { font: 400 1.1rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 760px) { .arm-week-grid { grid-template-columns: minmax(0, 1fr); } }

/* community build rows */
.cb-list { display: flex; flex-direction: column; gap: 8px; }
.cb-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; color: var(--bone); border: 1px solid var(--line); background: rgba(28, 32, 30, .72);
  transition: border-color .2s, transform .2s var(--ease), background .2s; }
.cb-row:hover { color: var(--bone); border-color: rgba(61, 220, 110, .5); background: rgba(34, 39, 36, .9); transform: translateX(3px); }
.cb-row.featured { border-left: 3px solid var(--tier-b); background: linear-gradient(90deg, rgba(241, 196, 15, .08), transparent 45%), rgba(28, 32, 30, .72); }
.cb-score { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-right: 12px; border-right: 1px solid var(--line); }
.cb-votes { font-size: .62rem; letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
.cb-main { flex: 1; min-width: 0; }
.cb-title { font: 400 1.08rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; margin-bottom: 6px; }
.cb-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cb-go { color: var(--orange); font-size: 1.4rem; flex: none; opacity: .5; transition: opacity .2s, transform .2s; }
.cb-row:hover .cb-go { opacity: 1; transform: translateX(3px); }
.cb-reason { margin: -2px 0 4px 72px; color: var(--bone-dim); }
.arm-author { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--bone-dim); min-width: 0; }
.arm-author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.arm-score { font: 400 1.5rem/1 var(--display); color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.arm-score.pos { color: var(--ok); } .arm-score.neg { color: var(--bad); }
@media (max-width: 600px) { .cb-row { gap: 10px; padding: 10px; } .cb-score { width: 44px; padding-right: 8px; } .arm-score { font-size: 1.25rem; } .cb-go { display: none; } .cb-reason { margin-left: 4px; } }

/* code copy pill */
.code-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 7px 8px 7px 12px; cursor: pointer; font: 500 .82rem/1.2 var(--mono); color: var(--hud);
  background: var(--bg-2); border: 1px dashed var(--line-2); transition: border-color .2s, background .2s, box-shadow .2s; text-align: left; }
.code-pill:hover { border-color: var(--orange); border-style: solid; background: rgba(61, 220, 110, .06); box-shadow: 0 0 16px -6px var(--orange-glow); }
.code-pill .cp-code { flex: 1; min-width: 0; overflow-wrap: anywhere; letter-spacing: .06em; }
.code-pill .copy-label { flex: none; padding: 4px 8px; font: 600 .66rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #120a03; background: var(--orange);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.code-pill.block { display: flex; width: 100%; }

/* attachment slot table */
.slot-table { list-style: none; margin: 12px 0; padding: 0; border: 1px solid var(--line); background: rgba(14, 16, 15, .55); }
.slot-table li { display: grid; grid-template-columns: 28px 26px minmax(86px, 120px) minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); transition: background .15s; }
.slot-table li:last-child { border-bottom: 0; }
.slot-table li:hover { background: rgba(61, 220, 110, .05); }
.slot-table .st-no { font: 400 .8rem/1 var(--display); color: var(--orange); opacity: .8; }
.slot-table .st-slot { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.slot-table .st-name { font-weight: 500; color: var(--bone); overflow-wrap: anywhere; }
.slot-table li.apex { background: linear-gradient(90deg, rgba(241, 196, 15, .1), transparent 60%); }
.slot-table li.apex .st-slot { color: var(--warn); }
.slot-table.compact li { padding: 6px 10px; grid-template-columns: 22px 22px minmax(76px, 104px) minmax(0, 1fr); font-size: .92rem; }
.slot-table .bp-empty { display: block; padding: 14px; text-align: center; }

/* weapon page */
.wpn-head { overflow: hidden; }
.wpn-head-glyph { position: absolute; right: 3%; top: 50%; transform: translateY(-50%) rotate(-10deg); font-size: clamp(6rem, 16vw, 12rem); opacity: .06; filter: grayscale(1); pointer-events: none; }
.wpn-head-tiers { position: relative; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; align-items: stretch; }
.wht { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border: 1px solid var(--line-2); background: rgba(14, 16, 15, .6); min-width: 168px; }
.wht.off { opacity: .45; }
.wht-mode { font: 400 1rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.wht-row { display: flex; align-items: center; gap: 8px; } .wht-row .wpn-tier-l { min-width: 76px; }
.wpn-notes { position: relative; max-width: 640px; margin: 14px 0 0; color: var(--bone-dim); }
.tab-n { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: .68rem; color: var(--bg); background: var(--hud); vertical-align: 1px; }
.wpn-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.meta-card .card-title { font-size: 1.35rem; }
.meta-foot { gap: 10px; }
.arm-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.arm-cta .btn { margin-left: auto; }
@media (max-width: 900px) { .wpn-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .wht { min-width: 0; flex: 1 1 140px; } .wht-row .wpn-tier-l { min-width: 64px; } }

/* build detail */
.build-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.build-title { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 6px 0 10px; overflow-wrap: anywhere; }
.build-h { margin: 22px 0 8px; font-size: 1.05rem; color: var(--hud); display: flex; gap: 10px; align-items: baseline; }
.build-notes { padding: 12px 14px; border-left: 3px solid var(--olive-2); background: rgba(14, 16, 15, .5); color: var(--bone-dim); white-space: normal; }
.arm-status-note { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.vote-box { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border: 1px solid var(--line-2); background: rgba(14, 16, 15, .6); min-width: 76px; }
.vote-box form { margin: 0; }
.vote-btn { display: grid; place-items: center; width: 44px; height: 36px; font-size: 1rem; color: var(--bone-dim); background: var(--panel-3); border: 1px solid var(--line-2); cursor: pointer;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: background .2s, color .2s, transform .15s; }
.vote-btn:hover { color: var(--bone); transform: translateY(-1px); }
.vote-btn.up:hover, .vote-btn.up.on { background: rgba(140, 198, 63, .2); color: var(--ok); border-color: var(--ok); }
.vote-btn.down:hover, .vote-btn.down.on { background: rgba(255, 77, 61, .18); color: var(--bad); border-color: var(--bad); }
.vote-btn.up.on, .vote-btn.down.on { box-shadow: inset 0 0 12px rgba(0, 0, 0, .4); }
.vote-btn.ghost { opacity: .3; cursor: default; } .vote-btn.ghost:hover { transform: none; background: var(--panel-3); color: var(--bone-dim); border-color: var(--line-2); }
.vote-score .arm-score { font-size: 1.9rem; }
.vote-split { font-size: .62rem; letter-spacing: .08em; white-space: nowrap; }
.arm-staff { display: flex; flex-direction: column; gap: 8px; }
.arm-staff .inline-form { flex-wrap: nowrap; }
.arm-staff .inline-form .btn { flex: none; }
.arm-reject input { min-height: 34px; padding: 6px 10px; font-size: .9rem; }
@media (max-width: 900px) { .build-layout { grid-template-columns: minmax(0, 1fr); } }

/* live builder */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.builder-side { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 14px; }
.att-fieldset legend { display: flex; gap: 12px; align-items: center; }
.att-count { font: 500 .72rem/1 var(--body); letter-spacing: .14em; padding: 4px 8px; color: var(--bg); background: var(--hud); }
.att-count.over { background: var(--bad); color: #fff; }
.att-rows { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.att-row { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) 40px; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--line); background: rgba(14, 16, 15, .45);
  animation: page-in .3s var(--ease) both; }
.att-row.dup { border-color: var(--bad); }
.att-row select option:disabled { color: #555; }
.att-input { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.att-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.att-sugg:empty { display: none; }
.att-sugg button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font: 400 .8rem/1.2 var(--body); color: var(--bone-dim); background: rgba(196, 214, 170, .06);
  border: 1px solid var(--line-2); cursor: pointer; transition: all .15s; }
.att-sugg button:hover { color: var(--bone); border-color: var(--orange); background: rgba(61, 220, 110, .1); }
.att-sugg button i { font-style: normal; font-size: .64rem; color: var(--bg); background: var(--hud); padding: 1px 5px; }
.att-warn { font-size: .78rem; color: var(--warn); }
.att-warn::before { content: "⚠ "; }
.att-x { width: 40px; height: 44px; color: var(--muted); background: transparent; border: 1px solid var(--line-2); cursor: pointer; font-size: .9rem; transition: all .15s; }
.att-x:hover:not(:disabled) { color: #fff; background: var(--bad); border-color: var(--bad); }
.att-x:disabled { opacity: .3; cursor: default; }
.bp-card { display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--orange); }
.bp-card::after { z-index: 0; }
.bp-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bp-weapon { font: 400 2rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.bp-title { font-size: 1rem; color: var(--bone-dim); overflow-wrap: anywhere; }
.bp-card .slot-table { margin: 6px 0 4px; }
.bp-analysis { transition: opacity .2s; }
.bp-analysis.busy { opacity: .65; }
.an-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.an-list li { position: relative; padding: 6px 8px 6px 26px; font-size: .86rem; border: 1px solid var(--line); background: rgba(14, 16, 15, .45); }
.an-list li::before { position: absolute; left: 8px; top: 6px; font-size: .8rem; }
.an-list li.bad { border-color: rgba(255, 77, 61, .5); color: #ffb3ab; } .an-list li.bad::before { content: "✖"; color: var(--bad); }
.an-list li.warn { border-color: rgba(241, 196, 15, .4); color: #f5dd7a; } .an-list li.warn::before { content: "⚠"; color: var(--warn); }
.an-list li.todo { color: var(--bone-dim); } .an-list li.todo::before { content: "○"; color: var(--muted); }
.an-dup { margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--bad); background: rgba(255, 77, 61, .12); font-size: .9rem; }
.an-sim { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: .86rem; }
.an-ok { margin-bottom: 8px; padding: 8px 12px; color: var(--ok); border: 1px solid rgba(140, 198, 63, .45); background: rgba(140, 198, 63, .1); font-size: .9rem; letter-spacing: .04em; }
@media (max-width: 1000px) { .builder { grid-template-columns: minmax(0, 1fr); } .builder-side { position: relative; top: 0; } }
@media (max-width: 600px) { .att-row { grid-template-columns: minmax(0, 1fr) 44px; } .att-row > select { grid-column: 1; grid-row: 1; } .att-row .att-x { grid-column: 2; grid-row: 1; width: 44px; }
  .att-row .att-input { grid-column: 1 / -1; grid-row: 2; } .att-sugg button { font-size: .76rem; padding: 4px 7px; }
  .bp-weapon { font-size: 1.6rem; } }

/* compare */
.cmp-pick { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cmp-pick-row { display: flex; gap: 12px; align-items: center; flex: 1 1 420px; }
.cmp-pick-row select { flex: 1; min-width: 0; }
.cmp-vs { font: 400 1.4rem/1 var(--display); color: var(--orange); letter-spacing: .1em; }
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cmp-name { margin: 4px 0 10px; font-size: clamp(1.6rem, 3.6vw, 2.4rem); } .cmp-name a { color: var(--bone); } .cmp-name a:hover { color: var(--orange); }
.cmp-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 10px; } .cmp-top .card-sub { margin: 0; width: 100%; }
.cmp-table tr.same td { background: rgba(140, 198, 63, .06); }
@media (max-width: 600px) { .cmp-grid { grid-template-columns: minmax(0, 1fr); } .cmp-pick-row { flex-wrap: wrap; } .cmp-pick-row select { flex: 1 1 100%; } .cmp-vs { width: 100%; text-align: center; } }

/* staff armory */
.arm-review-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin: 8px 0 12px; }
.arm-review .arm-staff { flex-direction: row; flex-wrap: wrap; } .arm-review .arm-reject { flex: 1 1 320px; } .arm-review .arm-reject input { flex: 1; }
.arm-wform .field { flex: 1 1 150px; } .arm-wform .arm-modes { flex: 0 0 auto; }
.wcat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 8px; }
.wcat-item summary { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; cursor: pointer; list-style: none; }
.wcat-item summary::-webkit-details-marker { display: none; }
.wcat-item summary::before { content: "›"; color: var(--orange); transition: transform .2s; }
.wcat-item[open] summary::before { transform: rotate(90deg); }
.wcat-name { font: 400 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 760px) { .arm-review-body { grid-template-columns: minmax(0, 1fr); } }
.arm-radar { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); --size: 190px; opacity: .55; }
.arm-head .eyebrow { display: flex; }
@media (max-width: 900px) { .arm-radar { --size: 110px; top: 22px; transform: none; right: 14px; opacity: .35; } }
@media (max-width: 600px) { .wpn-patched { position: static; align-self: flex-start; font-size: .56rem; padding: 2px 5px; } }
.wpn-head-tiers > .fresh-pill { align-self: center; }
.arm-staff-grid { align-items: start; }
select[multiple] { background-image: none; padding-right: 12px; min-height: 140px; }
select[multiple] option { padding: 4px 6px; }
select[multiple] option:checked { background: var(--orange) linear-gradient(var(--orange), var(--orange)); color: #120a03; }
.form > .btn { align-self: flex-start; }
.table-wrap > .table.cmp-table { min-width: 0; table-layout: fixed; }
.cmp-table th:first-child, .cmp-table td:first-child { width: 30%; }
.cmp-table td.wrap { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .cmp-table th, .cmp-table td { padding: 8px; font-size: .88rem; white-space: normal; } .cmp-table th:first-child, .cmp-table td:first-child { width: 28%; } }

/* ═════ weapon illustrations (weapon_art.py) ═════ */
.wpn-glyph { display: none; }
.wpn-pic { position: relative; margin: 2px 0 0; aspect-ratio: 3 / 1; pointer-events: none; }
.wpn-pic::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 26%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61, 220, 110, .22), transparent); filter: blur(6px); opacity: .55; transition: opacity .35s; }
.wpn-pic img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain;
  transition: transform .45s var(--ease), filter .45s; filter: saturate(.95) drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.wpn-card:hover .wpn-pic img, .wpn-card:focus-visible .wpn-pic img { transform: translate3d(4px, -2px, 0); filter: brightness(1.1) drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
.wpn-card:hover .wpn-pic::before { opacity: 1; }
.wpn-card { min-height: 0; }
.wpn-head-pic { position: absolute; right: -2%; top: 50%; width: min(58%, 760px); height: auto; transform: translateY(-50%); pointer-events: none;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); animation: wpnIn .9s var(--ease) both; }
.wpn-head > :not(.wpn-head-pic) { position: relative; z-index: 1; }
@keyframes wpnIn { from { opacity: 0; transform: translate(40px, -50%) scale(.96); } to { opacity: 1; transform: translateY(-50%); } }
@media (max-width: 900px) { .wpn-head-pic { position: relative; right: auto; top: auto; display: block; width: 100%; max-width: 560px; margin: 0 auto 6px; transform: none; animation: none; } }
.build-pic { display: block; max-width: 460px; margin: -4px 0 10px; } .build-pic img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.cmp-pic { margin: 0 0 6px; }
.bp-pic { margin: 6px -6px 2px; aspect-ratio: 3 / 1; opacity: 0; transform: translateX(-14px); transition: opacity .35s, transform .45s var(--ease); }
.bp-pic.in { opacity: 1; transform: none; }
.bp-pic img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.cb-pic { flex: none; width: 132px; height: auto; margin-left: auto; opacity: .85; transition: opacity .2s, transform .3s var(--ease); }
.cb-row:hover .cb-pic { opacity: 1; transform: translateX(-4px) scale(1.05); }
.wcat-img { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; padding: 10px; border: 1px dashed var(--line); }
.wcat-img img { width: 240px; height: auto; background: rgba(0, 0, 0, .25); }
.wcat-img form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .wpn-pic img, .wpn-head-pic, .bp-pic, .cb-pic { transition: none; animation: none; } }
@media (max-width: 600px) { .wpn-pic { margin: 0 -6px; } .cb-pic { display: none; } }