:root {
  --bg: #0b0d0b;
  --panel: #141814;
  --panel-2: #1a1f1a;
  --line: #394039;
  --text: #f0f1eb;
  --muted: #929a90;
  --orange: #ff6a13;
  --orange-dim: #8d3a0d;
  --green: #99b29c;
  --mono: "Courier New", Consolas, monospace;
  --sans: Impact, "Arial Narrow", "Roboto Condensed", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 85% 10%, #252a21 0, transparent 34rem), var(--bg); font-family: var(--mono); min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,.025) 4px); }
a { color: inherit; }
.shell { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.masthead { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 13px; align-items: center; text-decoration: none; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; background: var(--orange); color: #100b07; font: 900 22px/1 var(--sans); clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); }
.brand small, .brand strong { display: block; }
.brand small { color: var(--muted); font-size: 10px; letter-spacing: .18em; }
.brand strong { font: 26px/.9 var(--sans); letter-spacing: .04em; }
.signal { color: #b7cab8; font-size: 11px; letter-spacing: .13em; }
.signal span, .compact-card header i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #8dcc8c; box-shadow: 0 0 12px #8dcc8c; }
.signal--stale { color: #e5a781; }
.signal--stale span, .compact-card header i.stale { background: var(--orange); box-shadow: 0 0 12px var(--orange); }
main { padding-block: 34px 70px; }
.hud-panel { position: relative; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(29,34,29,.98), rgba(15,18,15,.96)); }
.hud-panel::before, .hud-panel::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.hud-panel::before { top: -1px; left: -1px; border-top: 2px solid var(--orange); border-left: 2px solid var(--orange); }
.hud-panel::after { right: -1px; bottom: -1px; border-right: 2px solid #5c665b; border-bottom: 2px solid #5c665b; }
.hero { min-height: 270px; overflow: hidden; padding: clamp(30px, 6vw, 70px); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(100deg, rgba(11,13,11,.95) 5%, rgba(18,23,18,.88) 58%, rgba(37,43,34,.7)), repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,.025) 19px 20px); }
.eyebrow { color: var(--orange); letter-spacing: .18em; font-size: 11px; margin: 0 0 9px; }
.hero h1 { margin: 0; font: clamp(58px, 10vw, 116px)/.82 var(--sans); letter-spacing: -.025em; text-transform: uppercase; text-shadow: 4px 4px 0 #242a23; }
.mission { color: #bfc5ba; letter-spacing: .1em; font-size: 12px; margin-top: 24px; }
.timestamp { margin-top: 34px; display: flex; gap: 16px; font-size: 10px; color: var(--muted); }
.timestamp span { color: var(--orange); }
.hero-rank { color: #2c322b; font: 130px/.7 var(--sans); transform: skew(-6deg); text-align: right; }
.hero-rank span, .hero-rank b { display: block; }
.hero-rank b { color: #444d42; }
.section-heading { display: flex; align-items: center; gap: 14px; margin: 42px 0 15px; }
.section-heading span { color: var(--orange); font-size: 11px; }
.section-heading h2 { margin: 0; font: 24px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.section-heading i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric-grid--five { grid-template-columns: repeat(5, 1fr); }
.metric { min-height: 128px; padding: 22px; }
.metric p { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.metric strong { display: block; margin-top: 13px; font: 43px/1 var(--sans); }
.metric span { position: absolute; left: 22px; right: 22px; bottom: 16px; height: 2px; background: #343b34; }
.metric span::before { content: ""; display: block; height: 100%; width: 42%; background: #687267; }
.metric--hot strong { color: var(--orange); }
.metric--hot span::before { background: var(--orange); }
.combat-layout { display: grid; grid-template-columns: 1.6fr .72fr; gap: 10px; }
.focus-card { min-height: 266px; padding: 28px; text-align: center; }
.reticle { height: 52px; width: 52px; margin: 6px auto 10px; border: 1px solid var(--orange-dim); border-radius: 50%; display: grid; place-items: center; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--orange); }
.reticle::before { width: 68px; height: 1px; }
.reticle::after { height: 68px; width: 1px; }
.reticle span { width: 9px; height: 9px; border: 2px solid var(--orange); border-radius: 50%; background: var(--panel); z-index: 1; }
.focus-label { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.focus-card > strong { color: var(--orange); font: 45px/1 var(--sans); }
.duo { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.duo span { padding-top: 12px; color: var(--muted); font-size: 9px; }
.duo span + span { border-left: 1px solid var(--line); }
.duo b { display: block; color: var(--text); font-size: 17px; }
.vehicle-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vehicle-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.vehicle-card { padding: 24px; }
.vehicle-card h3 { margin: 0 0 18px; color: var(--orange); font: 20px/1 var(--sans); text-transform: uppercase; }
.vehicle-card div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 9px 0; border-top: 1px solid #2d332d; }
.vehicle-card div span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.vehicle-card div b { font: 19px/1 var(--sans); white-space: nowrap; }
.identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 42px; }
.identity { padding: 30px; min-height: 150px; background: linear-gradient(115deg, #171b17 50%, #252b23); }
.identity p, .identity span { margin: 0; color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.identity strong { display: block; color: var(--orange); margin: 15px 0 9px; font: 38px/1 var(--sans); }
.error-banner { margin-top: 16px; padding: 14px; border-left: 3px solid var(--orange); background: #2a1b13; color: #ffc39f; font-size: 11px; }
body > footer { padding: 20px 0 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
body > footer a { text-decoration: none; color: #bbc2b7; }

.compact-body { display: grid; place-items: center; min-height: 100vh; padding: 12px; background: #0b0d0b; }
.compact-card { width: min(100%, 620px); border: 1px solid var(--line); background: linear-gradient(125deg, #171b17, #0f120f); box-shadow: 0 12px 50px #000; }
.compact-card header { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.compact-card header div { flex: 1; }
.compact-card header small { color: var(--orange); font-size: 8px; letter-spacing: .15em; }
.compact-card h1 { margin: 2px 0 0; font: 30px/1 var(--sans); }
.compact-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.compact-stats div { text-align: center; padding: 23px 8px; border-right: 1px solid var(--line); }
.compact-stats div:last-child { border: 0; }
.compact-stats b { display: block; font: 30px/1 var(--sans); color: var(--orange); }
.compact-stats span { color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.compact-card footer { display: flex; justify-content: space-between; padding: 10px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }

@media (max-width: 850px) {
  .metric-grid--five { grid-template-columns: repeat(2, 1fr); }
  .metric-grid--five .metric:last-child { grid-column: span 2; }
  .combat-layout { grid-template-columns: 1fr; }
  .vehicle-overview { grid-template-columns: repeat(2, 1fr); }
  .vehicle-groups { grid-template-columns: 1fr; }
  .hero-rank { display: none; }
}
@media (max-width: 520px) {
  .shell { width: min(100% - 22px, 1180px); }
  .masthead { height: 76px; }
  .brand strong { font-size: 20px; }
  .signal { font-size: 0; }
  .signal span { margin: 0; }
  main { padding-top: 18px; }
  .hero { min-height: 235px; padding: 28px 22px; }
  .hero h1 { font-size: 52px; }
  .metric-grid, .metric-grid--five { grid-template-columns: repeat(2, 1fr); }
  .metric-grid--five .metric:last-child { grid-column: span 2; }
  .metric { min-height: 112px; padding: 18px; }
  .metric strong { font-size: 32px; }
  .metric span { left: 18px; right: 18px; }
  .identity-grid { grid-template-columns: 1fr; }
  body > footer { gap: 15px; flex-direction: column; }
  .compact-stats { grid-template-columns: repeat(2, 1fr); }
  .compact-stats div:nth-child(2) { border-right: 0; }
  .compact-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}