/* ASI barracks: a 16-bit strategy game on a black night. Windows are nine-slice pixel frames (border-image of a tiny
   SVG drawn in 3px units), buttons are bevelled HUD keys that sink when pressed, and the only colour that is not
   olive, khaki or sand is the prismatic chrome of the SI emblems and the alert red. */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Press+Start+2P&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --bg: #07080a;
  --bg-2: #0c0d0a;
  --panel: #1c1d12;
  --panel-2: #23251a;
  --panel-3: #2b2e1f;
  --olive: #4f5a2e;
  --olive-2: #6b7a3c;
  --olive-3: #343c1d;
  --khaki: #c9c49a;
  --sand: #e9e6c9;
  --muted: #a9a47f;
  --dim: #6e6b53;
  --line: #000;
  --red: #ff5a3c;
  --gold: #f2c14e;
  --gold-2: #b8862b;
  --prism: linear-gradient(100deg, #ff6f91 0%, #ffb35c 17%, #fff07a 33%, #7dffb2 50%, #62d0ff 67%, #a489ff 83%, #ff6f91 100%);
  --f-head: 'Black Ops One', 'Space Mono', system-ui, sans-serif;
  --f-hud: 'Press Start 2P', 'Space Mono', monospace;
  --f-body: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 0h10v1H1zM1 11h10v1H1zM0 1h1v10H0zM11 1h1v10h-1z'/%3E%3Cpath fill='%23808c4a' d='M1 1h10v1H1zM1 1h1v10H1z'/%3E%3Cpath fill='%23262b13' d='M1 10h10v1H1zM10 1h1v10h-1z'/%3E%3Cpath fill='%234f5a2e' d='M2 2h8v8H2z'/%3E%3Cpath fill='%23070806' d='M3 3h6v6H3z'/%3E%3Cpath fill='%231c1d12' d='M4 4h4v4H4z'/%3E%3Cpath fill='%23c9c49a' d='M2 2h1v1H2zM9 2h1v1H9zM2 9h1v1H2zM9 9h1v1H9z'/%3E%3C/svg%3E");
  --frame-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 0h6v1H1zM1 7h6v1H1zM0 1h1v6H0zM7 1h1v6H7z'/%3E%3Cpath fill='%234f5a2e' d='M1 1h6v6H1z'/%3E%3Cpath fill='%23070806' d='M2 2h4v4H2z'/%3E%3Cpath fill='%23151610' d='M3 3h2v2H3z'/%3E%3C/svg%3E");
  --px: 3px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--sand);
  font: 400 16px/1.6 var(--f-body);
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0;
  overflow-x: hidden;
}
img, video, canvas, svg { display: block; max-width: 100%; }
.pix, .pix img, img.pix { image-rendering: pixelated; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; font-variant-ligatures: none; }
::selection { background: var(--olive-2); color: var(--sand); }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
[hidden] { display: none !important; }

/* the night behind every page: stars and prismatic streaks drawn by ui/sky.js */
#sky { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none; image-rendering: pixelated; }

/* ------------------------------------------------------------------ type */
.h1 { font: 400 clamp(52px, 6.1vw, 104px)/.92 var(--f-head); letter-spacing: .005em; margin: 0; color: var(--sand);
  text-shadow: 0 5px 0 #000, 0 0 30px #000, 0 0 60px rgba(0, 0, 0, .9); }
.h2 { font: 400 clamp(36px, 4.6vw, 64px)/.98 var(--f-head); margin: 0; color: var(--sand); text-shadow: 0 4px 0 #000; }
.h3 { font: 400 26px/1.05 var(--f-head); margin: 0; color: var(--sand); }
.hud { font: 400 10px/1.5 var(--f-hud); letter-spacing: .04em; text-transform: uppercase; color: var(--khaki); }
.hud.s { font-size: 8px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.num { font-variant-numeric: tabular-nums; }
.lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); max-width: 560px; margin: 0; }
.prism-text { background: var(--prism); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: prism 6s steps(24) infinite; }
@keyframes prism { to { background-position: 200% 0; } }
.red { color: var(--red); }
.gold { color: var(--gold); }

/* ------------------------------------------------------------------ windows */
.win {
  position: relative;
  border: 15px solid transparent; border-image: var(--frame) 15 fill / 15px stretch;
  image-rendering: pixelated;
}
.win.thin { border-width: 6px; border-image: var(--frame-thin) 6 fill / 6px stretch; }
.win > .bar { margin: -4px -4px 16px; padding: 9px 12px; background: var(--olive-3); display: flex; align-items: center; gap: 12px; justify-content: space-between;
  box-shadow: inset 0 -3px 0 #000, inset 0 3px 0 rgba(255, 255, 230, .08); }
.win > .bar .hud { color: var(--sand); }

/* ------------------------------------------------------------------ buttons: bevelled HUD keys */
.btn {
  --face: #d8d1a0; --hi: #f6f2d3; --lo: #8b8454; --ink: #0d0e08;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px; border: 3px solid #000; cursor: pointer; text-decoration: none; user-select: none;
  background: var(--face); color: var(--ink); font: 400 12px/1 var(--f-hud); letter-spacing: .02em; text-transform: uppercase;
  box-shadow: inset 3px 3px 0 var(--hi), inset -3px -3px 0 var(--lo), 0 4px 0 #000;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 3px 3px);
  transition: filter .12s;
  white-space: nowrap;
}
.btn { clip-path: none; }
.btn:hover { filter: brightness(1.07); }
.btn:active, .btn.down { transform: translateY(3px); box-shadow: inset 3px 3px 0 var(--lo), inset -3px -3px 0 var(--hi), 0 1px 0 #000; }
.btn.olive { --face: var(--olive); --hi: #7f8e4b; --lo: #2c3318; --ink: var(--sand); }
.btn.dark { --face: #23251a; --hi: #3b3f2a; --lo: #0c0d08; --ink: var(--sand); }
.btn.red { --face: var(--red); --hi: #ff9b80; --lo: #a3301b; --ink: #1a0703; }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 10px; }
.btn.big { min-height: 62px; padding: 0 32px; font-size: 14px; }
.btn[disabled] { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; shape-rendering: crispEdges; flex: none; }

/* ------------------------------------------------------------------ contract strip */
.ca-bar { position: fixed; inset: 0 0 auto; z-index: 61; height: 34px; background: #000; border-bottom: 3px solid var(--olive-3); display: flex; align-items: center; }
.ca-bar .wrap { container-type: inline-size; display: flex; justify-content: center; }
.ca { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.ca .tk { font: 400 10px/1 var(--f-hud); color: var(--sand); flex: none; }
.ca .nm { font: 400 12px/1 var(--f-body); color: var(--muted); flex: none; }
.ca .net { font: 400 9px/1 var(--f-hud); color: var(--dim); flex: none; }
.ca code { font: 700 13px/1 var(--f-body); color: var(--khaki); white-space: nowrap; letter-spacing: 0; }
.ca .soon { font: 400 11px/1 var(--f-hud); color: var(--khaki); }
.ca button { flex: none; border: 2px solid #000; background: var(--khaki); color: #000; cursor: pointer; font: 400 8px/1 var(--f-hud); padding: 5px 7px; text-transform: uppercase; box-shadow: inset -2px -2px 0 #8b8454, inset 2px 2px 0 #f6f2d3; }
.ca button:active { box-shadow: inset 2px 2px 0 #8b8454; }
@media (max-width: 760px) {
  .ca .nm, .ca .net { display: none; }
  .ca { gap: 8px; }
  .ca code { font-size: min(13px, calc((100cqi - 96px) / 26.6)); }
}

/* ------------------------------------------------------------------ header */
.top { position: fixed; inset: 34px 0 auto; z-index: 60; height: 68px; display: flex; align-items: center; transition: background .25s; }
.top.solid { background: rgba(7, 8, 10, .92); box-shadow: 0 3px 0 #000, 0 6px 0 rgba(79, 90, 46, .35); backdrop-filter: blur(6px); }
.top .wrap { display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; }
.brand img { width: 42px; height: 42px; flex: none; image-rendering: pixelated; box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--olive); }
.brand b { font: 400 30px/1 var(--f-head); color: var(--sand); text-shadow: 0 3px 0 #000; }
.brand small { display: block; font: 400 7px/1.3 var(--f-hud); color: var(--khaki); letter-spacing: .06em; margin-top: 4px; }
.nav { display: flex; gap: 2px; }
.nav a { padding: 10px 12px; text-decoration: none; font: 400 10px/1 var(--f-hud); text-transform: uppercase; color: var(--khaki); text-shadow: 0 2px 0 #000; }
.nav a:hover { color: var(--sand); }
.nav a.on { color: var(--sand); box-shadow: inset 0 -3px 0 var(--olive-2); }
.menu-btn { display: none; width: 44px; height: 44px; border: 3px solid #000; background: var(--olive); color: var(--sand); cursor: pointer; place-items: center; box-shadow: inset 3px 3px 0 #7f8e4b, inset -3px -3px 0 #2c3318; }
.menu-btn svg { width: 18px; height: 18px; shape-rendering: crispEdges; }
.wallet-btn .short { display: none; }
@media (max-width: 980px) {
  .nav { display: none; position: fixed; inset: 102px 0 auto; flex-direction: column; padding: 10px 16px 20px; background: rgba(7, 8, 10, .97); box-shadow: 0 3px 0 #000, 0 6px 0 var(--olive-3); }
  .nav.open { display: flex; }
  .nav a { padding: 16px 4px; font-size: 12px; }
  .nav a.on { box-shadow: none; color: var(--sand); }
  .menu-btn { display: grid; }
  .wallet-btn .full { display: none; }
  .wallet-btn .short { display: inline; }
  .top .wrap { gap: 10px; }
}
@media (max-width: 520px) { .hero .ctas .btn { flex: 1 1 100%; } }
@media (max-width: 460px) { .brand small { display: none; } .brand b { font-size: 26px; } .brand img { width: 36px; height: 36px; } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; min-height: max(680px, 100svh); overflow: hidden; isolation: isolate; background: #000; display: flex; flex-direction: column; }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; image-rendering: pixelated; }
.hero .poster { z-index: -2; }
.hero video { z-index: -1; opacity: 0; transition: opacity .6s steps(4); }
.hero video.on { opacity: 1; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .86) 30%, rgba(0, 0, 0, .55) 44%, rgba(0, 0, 0, .12) 56%, rgba(0, 0, 0, 0) 64%), linear-gradient(180deg, rgba(0, 0, 0, .55) 0, transparent 22%, transparent 70%, rgba(7, 8, 10, .95) 100%); }
.hero-copy { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 150px 0 40px; }
.hero-copy .h1 { max-width: min(520px, 38vw); font-size: clamp(52px, 6.8vw, 124px); }
.hero-copy .lead { max-width: min(430px, 36vw); }
.hero-copy .lead { color: var(--sand); font-size: clamp(17px, 1.55vw, 21px); text-shadow: 0 2px 0 #000; max-width: 460px; }
.hero .ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero .console { position: relative; z-index: 1; margin-bottom: 28px; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .hero { min-height: 0; }
  .hero video, .hero .poster { object-position: 50% 100%; }
  .hero::before { background: linear-gradient(180deg, rgba(0, 0, 0, .92) 0, rgba(0, 0, 0, .85) 38%, rgba(0, 0, 0, .4) 50%, transparent 60%, transparent 80%, rgba(7, 8, 10, .9) 100%); }
  .hero-copy { justify-content: flex-start; padding: clamp(132px, 15vh, 200px) 0 0; min-height: calc(100svh - 10px); gap: 20px; }
  .hero-copy .h1, .hero-copy .lead { max-width: none; }
  .hero-copy .h1 { font-size: clamp(48px, 14vw, 72px); }
  .hero .ctas .btn { flex: 1 1 auto; }
  .hero .console { margin: 0 0 16px; }
}

/* resource console: SOL enlisted, coins in the chest, $ASI burnt, recruits */
.console { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.console .res { display: flex; align-items: center; gap: 16px; padding: 12px 20px; min-width: 0; }
.console .res + .res { box-shadow: inset 3px 0 0 #000, inset 6px 0 0 var(--olive-3); }
.console .ico { width: 40px; height: 40px; flex: none; shape-rendering: crispEdges; }
.console .v { font: 400 clamp(22px, 2.3vw, 32px)/1 var(--f-head); color: var(--sand); white-space: nowrap; }
.console .k { font: 400 8px/1.4 var(--f-hud); color: var(--khaki); text-transform: uppercase; margin-top: 7px; }
.console .demo-tag { position: absolute; top: -26px; left: -4px; }
@media (max-width: 900px) {
  .console { grid-template-columns: repeat(2, 1fr); }
  .console .res:nth-of-type(3) { box-shadow: inset 0 3px 0 #000, inset 0 6px 0 var(--olive-3); }
  .console .res:nth-of-type(4) { box-shadow: inset 3px 0 0 #000, inset 6px 0 0 var(--olive-3), inset 0 3px 0 #000, inset 0 6px 0 var(--olive-3); }
  .console .res { padding: 12px 10px; gap: 10px; }
  .console .ico { width: 30px; height: 30px; }
}
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; background: #000; color: var(--khaki); font: 400 8px/1 var(--f-hud); text-transform: uppercase; box-shadow: 0 0 0 2px var(--olive); }
.chip.red { color: var(--red); box-shadow: 0 0 0 2px #5a2015; }
.chip i { width: 6px; height: 6px; background: currentColor; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------------ sections */
section { position: relative; }
.sec { padding: clamp(84px, 11vw, 150px) 0 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap; margin-bottom: 36px; }
.sec-head > div { display: grid; gap: 16px; }
.sec-head .lead { max-width: 500px; }
.sec-head .hud { color: var(--olive-2); }

/* the parade ground */
.parade { position: relative; padding: 0; overflow: hidden; }
.parade canvas { width: 100%; height: clamp(420px, 44vw, 600px); cursor: crosshair; image-rendering: pixelated; background: #050605; }
.parade .legend { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; pointer-events: none; }
.parade .legend .chip { pointer-events: auto; }
@media (max-width: 760px) { .parade .legend { position: static; padding: 10px 10px 8px; } .parade canvas { height: 400px; } }
.ranks-key { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 22px; }
.ranks-key span { display: inline-flex; align-items: center; gap: 9px; font: 400 8px/1 var(--f-hud); color: var(--khaki); text-transform: uppercase; }
.ranks-key svg { width: 24px; height: 24px; }
.ranks-key em { font-style: normal; color: var(--dim); }

.tip { position: absolute; z-index: 5; pointer-events: none; width: 270px; transform: translate(-50%, calc(-100% - 16px)); display: none; }
.tip.show { display: block; }
.tip .row { display: flex; gap: 12px; align-items: center; }
.tip .face { width: 52px; height: 52px; flex: none; background: #000; box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--olive); overflow: hidden; }
.tip .face img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.tip b { display: block; font: 400 20px/1.05 var(--f-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip .rk { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.tip .rk svg { width: 18px; height: 18px; }
.tip dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; }
.tip dt { font: 400 7px/1.3 var(--f-hud); color: var(--khaki); text-transform: uppercase; }
.tip dd { margin: 4px 0 0; font: 700 15px/1.1 var(--f-body); color: var(--sand); }

/* how it works: unit cards */
.units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.unit { display: flex; flex-direction: column; }
.unit .art { aspect-ratio: 16 / 10; overflow: hidden; margin: -3px -3px 0; box-shadow: 0 0 0 3px #000; background: #000; }
.unit .art img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .6s steps(6); }
.unit:hover .art img { transform: scale(1.06); }
.unit .no { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.unit .no .hud { color: var(--olive-2); }
.unit h3 { margin: 0 0 12px; }
.unit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.unit li { display: flex; gap: 10px; }
.unit li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px; background: var(--khaki); box-shadow: 2px 2px 0 #000; }
@media (max-width: 1080px) { .units { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .units { grid-template-columns: minmax(0, 1fr); } }

.split { display: flex; height: 46px; margin: 16px 0 12px; box-shadow: 0 0 0 3px #000; }
.split > div { display: flex; align-items: center; justify-content: center; gap: 10px; font: 400 9px/1 var(--f-hud); text-transform: uppercase; min-width: 0; white-space: nowrap; }
.split .c { background: repeating-linear-gradient(90deg, #8a6a1c 0 6px, #a88226 6px 12px); color: #fff7d6; text-shadow: 0 2px 0 #000; }
.split .b { background: repeating-linear-gradient(90deg, #b83a22 0 6px, #d9472b 6px 12px); color: #fff0e8; text-shadow: 0 2px 0 #000; }
.split svg { width: 18px; height: 18px; }

/* the war chest inventory */
.chest-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 26px; align-items: stretch; }
@media (max-width: 960px) { .chest-grid { grid-template-columns: minmax(0, 1fr); } }
.chest-art { position: relative; overflow: hidden; padding: 0; min-height: 320px; }
.chest-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.chest-art .total { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.chest-art .total .win { padding: 2px 8px; }
.chest-art .total .v { font: 400 clamp(30px, 3.4vw, 46px)/1 var(--f-head); color: var(--gold); text-shadow: 0 3px 0 #000; white-space: nowrap; }
.inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.slot { position: relative; display: grid; gap: 8px; padding: 12px 10px 10px; text-decoration: none; background: #0e0f09; box-shadow: inset 0 0 0 3px #000, inset 3px 3px 0 3px #0a0b07, inset -3px -3px 0 3px #2c3020; min-width: 0; transition: background .1s; }
.slot:hover { background: #1a1c11; }
.slot .coin { width: 48px; height: 48px; margin: 0 auto; background: #000; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold-2), 0 0 0 6px #000; overflow: hidden; border-radius: 0; }
.slot .coin img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.slot .sym { font: 400 8px/1.3 var(--f-hud); color: var(--sand); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .val { font: 700 13px/1.2 var(--f-body); color: var(--gold); text-align: center; white-space: nowrap; }
.slot .qty { position: absolute; top: 5px; right: 7px; font: 400 7px/1 var(--f-hud); color: var(--khaki); }
.slot.empty { opacity: .45; }
.slot.empty .coin { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--olive-3), 0 0 0 6px #000; background: #0a0b07; }
@media (max-width: 600px) { .inv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .slot { padding: 10px 4px 8px; } .slot .coin { width: 40px; height: 40px; } .slot .val { font-size: 11px; } }
.inv-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* leaderboard */
.board { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.board th { text-align: left; font: 400 8px/1 var(--f-hud); color: var(--khaki); text-transform: uppercase; padding: 4px 14px 8px; white-space: nowrap; }
.board td { padding: 10px 14px; background: #101109; vertical-align: middle; box-shadow: inset 0 3px 0 #000, inset 0 -3px 0 #000; white-space: nowrap; }
.board tr td:first-child { box-shadow: inset 3px 3px 0 #000, inset 0 -3px 0 #000; }
.board tr td:last-child { box-shadow: inset -3px 3px 0 #000, inset 0 -3px 0 #000; }
.board tbody tr { cursor: pointer; }
.board tbody tr:hover td { background: #1b1d12; }
.board .pos { font: 400 12px/1 var(--f-hud); color: var(--dim); width: 40px; }
.board tr.top1 .pos { color: var(--gold); } .board tr.top2 .pos { color: #d8d8d8; } .board tr.top3 .pos { color: #d08a4a; }
.board .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.board .who img { width: 38px; height: 38px; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--olive); flex: none; }
.board .who b { font: 400 18px/1 var(--f-head); display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.board .who small { font: 400 8px/1 var(--f-hud); color: var(--khaki); }
.board .rk { display: inline-flex; align-items: center; gap: 8px; font: 400 8px/1 var(--f-hud); color: var(--khaki); text-transform: uppercase; }
.board .rk svg { width: 22px; height: 22px; }
.board .n { font: 700 15px/1 var(--f-body); text-align: right; }
.board th.n { text-align: right; }
.board-wrap { overflow: hidden; }
@media (max-width: 860px) {
  .board thead { display: none; }
  .board, .board tbody, .board tr, .board td { display: block; }
  .board tr { position: relative; margin-bottom: 10px; background: #101109; box-shadow: inset 0 0 0 3px #000; padding: 12px 12px 12px 54px; }
  .board td, .board tr td:first-child, .board tr td:last-child { background: none; box-shadow: none; padding: 0; }
  .board .pos { position: absolute; left: 14px; top: 20px; }
  .board td.n { display: inline-block; text-align: left; margin: 10px 18px 0 0; font-size: 13px; }
  .board td.n::before { content: attr(data-k); display: block; font: 400 7px/1 var(--f-hud); color: var(--khaki); margin-bottom: 5px; text-transform: uppercase; }
  .board td.rkc { margin-top: 10px; }
  .board .who b { max-width: 200px; }
}

/* film */
.film { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #000; padding: 0; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; inset: 0; margin: auto; width: 104px; height: 104px; border: 3px solid #000; cursor: pointer; display: grid; place-items: center; background: var(--khaki); color: #000;
  box-shadow: inset 4px 4px 0 #f6f2d3, inset -4px -4px 0 #8b8454, 0 6px 0 #000, 0 0 0 9px rgba(0, 0, 0, .5); }
.film-play svg { width: 42px; height: 42px; shape-rendering: crispEdges; margin-left: 6px; }
.film-play:hover { filter: brightness(1.08); }
.film-play:active { transform: translateY(3px); }

/* the closing call */
.callout { position: relative; overflow: hidden; padding: 0; min-height: clamp(380px, 42vw, 560px); display: flex; align-items: flex-end; }
.callout img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; image-rendering: pixelated; }
.callout::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .45) 38%, transparent 62%); }
.callout .in { position: relative; z-index: 1; padding: clamp(22px, 4vw, 48px); display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; width: 100%; }

/* forms */
.field { display: grid; gap: 9px; }
.field > span { font: 400 8px/1.2 var(--f-hud); text-transform: uppercase; color: var(--khaki); display: flex; justify-content: space-between; gap: 10px; }
.input {
  width: 100%; min-height: 54px; padding: 12px 16px; border: 0; background: #070806; color: var(--sand); font: 700 16px/1.3 var(--f-body);
  box-shadow: inset 0 0 0 3px #000, inset 3px 3px 0 3px #000, inset -3px -3px 0 3px #3a4122; outline: none;
}
.input::placeholder { color: var(--dim); font-weight: 400; }
.input:focus { box-shadow: inset 0 0 0 3px var(--khaki), inset 3px 3px 0 3px #000; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button { border: 3px solid #000; padding: 9px 12px; cursor: pointer; background: #1a1b12; color: var(--khaki); font: 400 9px/1 var(--f-hud); box-shadow: inset 2px 2px 0 #34382a, inset -2px -2px 0 #0a0b07; }
.seg button.on { background: var(--khaki); color: #000; box-shadow: inset 2px 2px 0 #8b8454, inset -2px -2px 0 #f6f2d3; }
.note { padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--muted); background: #0b0c08; box-shadow: inset 0 0 0 3px #000; }
.note.err { color: #ffb4a3; box-shadow: inset 0 0 0 3px #000, inset 3px 0 0 3px var(--red); }
.note.ok { color: #d7f0a6; box-shadow: inset 0 0 0 3px #000, inset 3px 0 0 3px var(--olive-2); }

/* enlist form */
.office { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 26px; align-items: stretch; }
@media (max-width: 960px) { .office { grid-template-columns: minmax(0, 1fr); } .office .poster { min-height: 240px; } }
.enlist .btn.big { white-space: normal; text-align: center; line-height: 1.5; padding: 12px 18px; }
@media (max-width: 460px) { .enlist .btn.big { font-size: 11px; } }
.office .poster { position: relative; overflow: hidden; padding: 0; min-height: 360px; }
.office .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; image-rendering: pixelated; }
.enlist { display: grid; gap: 20px; padding: 10px 8px 8px; }
.recruit-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; background: #0b0c08; box-shadow: inset 0 0 0 3px #000; min-width: 0; }
.recruit-card .face { width: 64px; height: 64px; flex: none; background: #000; box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--olive); overflow: hidden; }
.recruit-card .face img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.recruit-card b { display: block; font: 400 22px/1.05 var(--f-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recruit-card .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.amounts button { min-height: 46px; border: 3px solid #000; cursor: pointer; background: #1a1b12; color: var(--sand); font: 700 15px/1 var(--f-body); box-shadow: inset 3px 3px 0 #34382a, inset -3px -3px 0 #0a0b07; }
.amounts button.on { background: var(--khaki); color: #000; box-shadow: inset 3px 3px 0 #8b8454, inset -3px -3px 0 #f6f2d3; }
.sol-in { position: relative; }
.sol-in .input { padding-right: 70px; font-size: 22px; }
.sol-in em { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 400 10px/1 var(--f-hud); font-style: normal; color: var(--khaki); }
.orders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order { padding: 14px; background: #0b0c08; box-shadow: inset 0 0 0 3px #000; display: grid; gap: 8px; min-width: 0; }
.order .hd { display: flex; align-items: center; gap: 8px; }
.order .hd svg { width: 20px; height: 20px; flex: none; }
.order .v { font: 700 18px/1.15 var(--f-body); color: var(--sand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order small { color: var(--dim); font-size: 12px; line-height: 1.35; }
.order.c { box-shadow: inset 0 0 0 3px #000, inset 0 3px 0 3px #8a6a1c; }
.order.b { box-shadow: inset 0 0 0 3px #000, inset 0 3px 0 3px #b83a22; }
@media (max-width: 460px) { .orders { grid-template-columns: 1fr; } .amounts { grid-template-columns: repeat(2, 1fr); } }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* inner pages */
.page { padding-top: 146px; min-height: 80vh; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 26px; align-items: start; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; margin: 0; }
.kv dt { font: 400 8px/1.9 var(--f-hud); text-transform: uppercase; color: var(--khaki); white-space: nowrap; }
.kv dd { margin: 0; font: 700 15px/1.4 var(--f-body); overflow-wrap: anywhere; min-width: 0; }
.kv dd a { text-decoration-color: var(--olive-2); text-underline-offset: 3px; }
.service { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.service .portrait { width: clamp(120px, 16vw, 180px); aspect-ratio: 1; background: #000; box-shadow: 0 0 0 4px #000, 0 0 0 10px var(--olive), 0 0 0 13px #000; overflow: hidden; }
.service .portrait img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.service h1 { font: 400 clamp(40px, 5.6vw, 76px)/.95 var(--f-head); margin: 0; overflow-wrap: anywhere; text-shadow: 0 4px 0 #000; }
@media (max-width: 620px) { .service { gap: 20px; } .service .portrait { width: 88px; } .service h1 { font-size: clamp(30px, 9vw, 44px); } }
@media (max-width: 620px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 4px; } .kv dd { margin-bottom: 12px; } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { padding: 4px 6px; }
.stat .v { font: 400 clamp(24px, 2.6vw, 34px)/1.05 var(--f-head); margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.log { display: grid; gap: 6px; }
.log a, .log div.e { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 14px; background: #0b0c08; box-shadow: inset 0 0 0 3px #000; text-decoration: none; font-size: 14px; }
.log .t { font: 400 8px/1 var(--f-hud); color: var(--dim); white-space: nowrap; }
.log .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log b { color: var(--sand); }
.log .s { font-weight: 700; color: var(--khaki); white-space: nowrap; }

/* docs */
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.doc nav { position: sticky; top: 130px; display: grid; gap: 4px; }
.doc nav a { padding: 9px 12px; text-decoration: none; font: 400 9px/1.4 var(--f-hud); color: var(--khaki); text-transform: uppercase; }
.doc nav a:hover { color: var(--sand); background: #12130c; }
.doc article { display: grid; gap: 26px; }
.doc h2 { font: 400 clamp(28px, 3vw, 40px)/1 var(--f-head); margin: 0 0 16px; text-shadow: 0 3px 0 #000; }
.doc p, .doc li { color: var(--muted); max-width: 760px; }
.doc p { margin: 0 0 12px; }
.doc ul, .doc ol { margin: 0 0 12px; padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc code { font: 700 14px/1.4 var(--f-body); color: var(--khaki); background: #0b0c08; padding: 1px 5px; overflow-wrap: anywhere; }
.doc strong { color: var(--sand); }
.doc article > .win { padding: 16px 18px 12px; scroll-margin-top: 130px; }
.doc nav.win { padding: 6px; }
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; } .doc nav { position: static; grid-template-columns: repeat(2, 1fr); } }

/* reveal: panels drop in on a few hard frames */
.rise { opacity: 0; transform: translateY(24px); transition: opacity .45s steps(4), transform .45s steps(4); }
.rise.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* footer */
.foot { margin-top: clamp(90px, 11vw, 150px); padding: 54px 0 46px; background: #050605; box-shadow: 0 -3px 0 #000, 0 -6px 0 var(--olive-3); }
.foot .wrap { display: flex; gap: 26px 40px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.foot .brand { margin: 0; }
.foot nav { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.foot nav a { font: 400 9px/1 var(--f-hud); text-transform: uppercase; text-decoration: none; color: var(--khaki); padding: 6px 0; }
.foot nav a:hover { color: var(--sand); }
.foot .ca-foot { flex-basis: 100%; container-type: inline-size; padding-top: 22px; box-shadow: inset 0 3px 0 #12140c; }
.foot .ca-foot .ca { justify-content: flex-start; }
@media (max-width: 760px) { .foot .ca-foot .ca code { font-size: min(13px, calc((100cqi - 96px) / 26.6)); } }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translateX(-50%); padding: 4px 8px; display: none; max-width: calc(100vw - 32px); font-size: 14px; }
.toast.show { display: block; }

/* pixel icons inline */
.ico-i { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; shape-rendering: crispEdges; }

/* the drill sergeant's shout on the parade ground */
.bubble { position: absolute; z-index: 4; right: 3%; bottom: 190px; max-width: 220px; padding: 10px 12px; background: var(--sand); color: #000; font: 400 9px/1.5 var(--f-hud); text-transform: uppercase;
  box-shadow: 0 0 0 3px #000, 6px 6px 0 rgba(0, 0, 0, .5); opacity: 0; transform: translateY(6px); transition: opacity .2s steps(2), transform .2s steps(2); pointer-events: none; }
.bubble::after { content: ''; position: absolute; right: 34px; bottom: -12px; width: 12px; height: 9px; background: var(--sand); box-shadow: 3px 0 0 #000, 0 3px 0 #000, -3px 0 0 #000; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bubble.show { opacity: 1; transform: none; }
.parade.narrow .bubble { right: 50% !important; transform: translate(50%, 6px); bottom: auto !important; top: 14px; white-space: nowrap; } .parade.narrow .bubble.show { transform: translate(50%, 0); } .parade.narrow .bubble::after { display: none; }

/* inner page banner: key art with the page title over it */
.banner { position: relative; overflow: hidden; padding: 0; min-height: clamp(260px, 30vw, 380px); display: flex; align-items: flex-end; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; image-rendering: pixelated; }
.banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .1) 75%), linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 50%); }
.banner .in { position: relative; z-index: 1; padding: clamp(22px, 4vw, 44px); display: grid; gap: 14px; max-width: 720px; }
.parade.mini canvas { height: clamp(360px, 32vw, 440px); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; font-size: 14px; color: var(--muted); }
.steps li::before { content: counter(s); grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; background: var(--olive); color: var(--sand); font: 400 10px/1 var(--f-hud); box-shadow: 0 0 0 3px #000, inset 2px 2px 0 #7f8e4b; }
.steps b { color: var(--sand); font-weight: 700; }

/* a recruit's service record */
.record { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 26px; align-items: stretch; }
.record .parade.solo canvas { height: 100%; min-height: 420px; }
.record .parade.solo { display: flex; }
@media (max-width: 960px) { .record { grid-template-columns: minmax(0, 1fr); } .record .parade.solo canvas { min-height: 360px; } }
.mint-line { container-type: inline-size; display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 12px; background: #0b0c08; box-shadow: inset 0 0 0 3px #000; }
.mint-line code { font: 700 13px/1 var(--f-body); color: var(--khaki); white-space: nowrap; min-width: 0; flex: 1; }
.mint-line .btn { flex: none; }
@media (max-width: 760px) { .mint-line .hud { display: none; } .mint-line code { font-size: min(13px, calc((100cqi - 100px) / 26.6)); } }
@media (max-width: 600px) { .ranks-key { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; } .ranks-key span { flex-wrap: wrap; } }