/* NetCreature2 site.
   Colours and type come from the game's own UI (Assets/UI/Capture/Look.cs, Assets/Resources/Fonts) and the logo:
   near-black glass, cream plates with a red edge, the cyan of the bedroom wireframe for small labels, one red
   for the Saturation and the 2, and a fixed colour per element. No inline styles anywhere, so the strict CSP
   in _headers can stay strict. */

@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inconsolata"; src: url("../fonts/Inconsolata-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --glass: #07070c;
  --panel: #0d0f17;
  --line: #1c2233;
  --wire: #56cef2;
  --paper: #f5f2e9;
  --text: #d5d8e4;
  --dim: #a0a2b6;
  --signal: #ee1a3a;
  --signal-text: #ff4d68;

  --fire: #ff6a28;
  --water: #30a8ff;
  --earth: #8cd240;
  --thunder: #ffd620;
  --light: #e2ecff;
  --phantom: #aa64ff;
  --common: #bac4d8;

  --good: #62ec98;
  --warn: #ffc636;
  --bad: #ff5c56;

  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono: "Inconsolata", ui-monospace, "SF Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; -webkit-text-size-adjust: 100%; font-synthesis: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--glass);
  color: var(--text);
  font: 400 1.125rem/1.6 var(--body);
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--wire); text-underline-offset: 0.2em; }
a:hover { color: var(--paper); }

:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--label);
  font-weight: 600;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
h1 { font-size: clamp(2.75rem, 7.5vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: 1.5rem; letter-spacing: 0.04em; }

p { margin: 0 0 1em; max-width: 62ch; }
strong { font-weight: 400; color: var(--paper); }
em { font-style: normal; color: var(--wire); }

.wrap { width: min(100% - 2rem, 70rem); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--paper); color: var(--glass); padding: 0.6rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  margin: 0 0 1rem;
  font: 900 0.85rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wire);
}

/* ---- header and footer ---- */

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.25rem 1.5rem; padding-block: 0.75rem;
}

.wordmark {
  display: flex; align-items: center; gap: 0.7rem;
  font: 600 1.55rem/1 var(--label);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper); text-decoration: none;
}
.wordmark img { width: 2.5rem; height: 2.5rem; }
.wordmark b { font-weight: inherit; color: var(--signal-text); letter-spacing: 0; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: 0.8rem 0;
  font: 600 1.1rem/1 var(--label);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--paper); }
.site-nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--signal); }

.site-nav a { white-space: nowrap; }
@media (max-width: 40rem) {
  .wordmark { font-size: 1.3rem; letter-spacing: 0.14em; }
  .site-nav { width: 100%; }
  .site-nav ul { justify-content: space-between; gap: 0 0.5rem; }
  .site-nav a { font-size: 1rem; letter-spacing: 0.06em; }
}

.site-footer { border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; color: var(--dim); font-size: 0.95rem; }
.site-footer .wrap { display: grid; gap: 1.25rem; }
.site-footer p { margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: var(--dim); display: inline-block; padding: 0.4rem 0; }
.footer-nav a:hover { color: var(--paper); }
.thanks { color: var(--paper); font: 900 0.85rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---- the byte strip: a nod to the hash bytes on the arena wall ---- */

.bytes { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; padding: 0; list-style: none; font: 900 1rem/1 var(--mono); color: var(--paper); }
.bytes li { padding-bottom: 0.35rem; border-bottom: 3px solid var(--c); }
.b1 { --c: #ff6060; } .b2 { --c: #ff963c; } .b3 { --c: #46dcd2; }
.b4 { --c: #b082ff; } .b5 { --c: #6ee082; } .b6 { --c: #5aaaff; }

/* ---- buttons, chips and the Corps' own stamps ---- */

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.75rem; }
.btn {
  display: inline-block; padding: 0.85rem 1.4rem;
  font: 600 1.15rem/1 var(--label);
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--paper); border: 1px solid var(--dim); border-radius: 3px; background: transparent;
  cursor: pointer;
}
.btn:hover { border-color: var(--paper); background: rgba(245, 242, 233, 0.08); color: var(--paper); }
/* the game's own button: a cream plate with a red edge */
.btn-primary { background: var(--paper); color: var(--glass); border-color: var(--paper); box-shadow: 4px 4px 0 var(--signal); }
.btn-primary:hover { background: #fff; color: var(--glass); border-color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.chip {
  font: 900 0.8rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line); padding: 0.55rem 0.7rem; border-radius: 3px;
}
.chip.on { color: var(--glass); background: var(--paper); border-color: var(--paper); }
.chip.redact { min-width: 4.5rem; background: #000; border-color: #000; box-shadow: inset 0 0 0 1px var(--line); }

.stamp {
  display: inline-block; margin: 1.5rem 0 0; padding: 0.55rem 0.8rem; max-width: none;
  background: var(--signal); color: var(--paper);
  font: 600 1.1rem/1.2 var(--label); letter-spacing: 0.1em; text-transform: uppercase;
  transform: rotate(-1.2deg);
}

.mono { font: 900 0.95rem/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }

/* ---- hero ---- */

.hero { padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero .wrap { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .hero .wrap { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } }
.hero h1 { margin-bottom: 1.25rem; }
.hero h1 .two { color: var(--signal-text); }
.lede { font-size: clamp(1.15rem, 2vw, 1.35rem); color: var(--paper); max-width: 40rem; }

.screen {
  position: relative; overflow: hidden; margin: 0;
  border: 1px solid var(--line); border-radius: 6px; background: #000;
  box-shadow: 0 0 0 1px rgba(86, 206, 242, 0.08), 0 24px 60px -24px rgba(86, 206, 242, 0.3);
}
.screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px);
}
figure { margin: 0; }
figcaption { margin-top: 0.6rem; font-size: 0.95rem; color: var(--dim); }

/* ---- sections ---- */

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { margin-bottom: 2.25rem; max-width: 46rem; }
.section-head p { margin: 1rem 0 0; }
.section-head.spaced { margin-top: 2.25rem; margin-bottom: 0; }

.steps, .trio { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .steps, .trio { grid-template-columns: repeat(3, 1fr); } }
.step, .card {
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c, var(--signal));
  border-radius: 4px; padding: 1.5rem;
}
.step .n { display: block; margin-bottom: 0.75rem; font: 900 0.9rem/1 var(--mono); letter-spacing: 0.12em; color: var(--signal-text); }
.step h3, .card h3 { margin-bottom: 0.6rem; }
.step p, .card p { margin: 0; font-size: 1.05rem; }
.card h3 { color: var(--c, var(--paper)); }

.duo { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .duo { grid-template-columns: 1fr 1fr; } }
.shot img { width: 100%; border-radius: 4px; border: 1px solid var(--line); }
.stack { display: grid; gap: 1.5rem; }
.stack + p { margin-top: 2rem; }

/* ---- elements ---- */

.el-fire { --c: var(--fire); } .el-water { --c: var(--water); } .el-earth { --c: var(--earth); }
.el-thunder { --c: var(--thunder); } .el-light { --c: var(--light); } .el-phantom { --c: var(--phantom); }
.el-common { --c: var(--common); }

.glyph { width: 1.4rem; height: 1.4rem; flex: none; color: var(--c); }

.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.legend li {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem;
  font: 600 1.05rem/1 var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c);
  border: 1px solid var(--line); border-radius: 3px;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .legend li { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
}

.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 36rem) { .mini-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .mini-grid { grid-template-columns: repeat(6, 1fr); } }
.mini { border: 1px solid var(--line); border-bottom: 3px solid var(--c); border-radius: 4px; overflow: hidden; background: var(--panel); }
.mini img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mini span {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.7rem;
  font: 600 1rem/1 var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c);
}
.mini .glyph { width: 1.1rem; height: 1.1rem; }

.mini-grid.seven { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 36rem) { .mini-grid.seven { grid-template-columns: repeat(4, 1fr); } }
.mini-grid.seven .mini span { padding: 0.55rem 0.7rem; }
.gallery-title { margin: 3rem 0 0.4rem; }
.gallery-title:first-of-type { margin-top: 0; }
.gallery-note { margin: 0 0 1.1rem; color: var(--dim); font-size: 1rem; }

.el-grid { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 36rem) { .el-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .el-grid { grid-template-columns: repeat(3, 1fr); } }
.el-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 4px; overflow: hidden; }
.el-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.el-card .art { display: grid; place-items: center; aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 50%, #161a28, var(--panel) 70%); }
.el-card .art .glyph { width: 28%; height: auto; }
.el-body { padding: 1.1rem 1.25rem 1.4rem; }
@media (min-width: 36rem) {
  .el-card.el-common { grid-column: 1 / -1; flex-direction: row; }
  .el-card.el-common .art { flex: 0 0 34%; }
  .el-card.el-common .el-body { align-self: center; padding: 1.5rem 2rem; }
  .el-card.el-common .el-body p { max-width: 36rem; }
}
.el-body h3 { display: flex; align-items: center; gap: 0.6rem; color: var(--c); }
.el-body p { margin: 0.5rem 0 0; font-size: 1rem; }

/* ---- the completion report ---- */

.report { margin: 0; padding: 0; max-width: 40rem; font: 900 1.05rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.report div { display: flex; align-items: baseline; gap: 0.75rem; padding-block: 0.55rem; }
.report dt { display: flex; flex: 1 1 auto; align-items: baseline; gap: 0.75rem; color: var(--paper); }
.report dt::after { content: ""; flex: 1 1 auto; border-bottom: 2px dotted var(--line); transform: translateY(-0.2rem); }
.report dd { margin: 0; text-align: right; color: var(--dim); }
.report .done dd { color: var(--good); }
.report .none dd { color: var(--warn); }
.report small { display: block; margin-top: 0.3rem; font: inherit; font-size: 0.8rem; color: var(--dim); letter-spacing: 0.04em; }

/* ---- the Saturation band ---- */

.saturation { position: relative; overflow: hidden; background: #050509; text-align: center; }
.saturation::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px);
}
.saturation .wrap { position: relative; }
.saturation .eyebrow { margin-inline: auto; }
.sat-line { max-width: 40ch; margin: 0 auto 2.25rem; font: 900 clamp(1.15rem, 2.6vw, 1.6rem)/1.5 var(--mono); color: var(--paper); }
.sat-word { color: var(--signal-text); display: inline-block; }
.saturation .note { margin: 2rem auto 0; max-width: 46ch; color: var(--dim); font-size: 1rem; }

.terminal {
  position: relative; display: inline-block; max-width: 100%; margin: 0; padding: 1.25rem 1.5rem; text-align: left;
  background: #a6f2ff; color: #04141a; border-radius: 4px;
  box-shadow: 0 0 40px rgba(86, 206, 242, 0.35);
  font: 900 clamp(1rem, 2.2vw, 1.25rem)/1.7 var(--mono);
}
.terminal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 3px);
}
.terminal p { margin: 0; max-width: none; }
.terminal .sat-word { color: #b3001f; }
.cursor { display: inline-block; width: 0.6em; height: 1.1em; margin-left: 0.1em; vertical-align: -0.15em; background: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .cursor { animation: blink 1.1s steps(1) infinite; }
  .saturation .sat-word { animation: glitch 7s infinite; }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes glitch {
  0%, 93%, 100% { text-shadow: none; transform: none; }
  94% { text-shadow: -3px 0 var(--wire), 3px 0 var(--signal); transform: translateX(2px); }
  96% { text-shadow: 3px 0 var(--wire), -3px 0 var(--signal); transform: translateX(-2px); }
  98% { text-shadow: -2px 0 var(--wire), 2px 0 var(--signal); transform: translateX(1px); }
}

/* ---- the footage: a video that loads from YouTube only when asked ---- */

.videos { display: grid; gap: 2.25rem; }
@media (min-width: 56rem) { .videos { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.videos + .note { margin: 1.5rem 0 0; font-size: 0.95rem; color: var(--dim); }
.video { max-width: 52rem; }
.video h3 { margin: 0 0 0.5rem; font-size: 1.35rem; }
.video > p:not(.note) { margin: 0 0 1rem; font-size: 1rem; color: var(--dim); }
.video-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(238, 26, 58, 0.12), 0 24px 60px -24px rgba(238, 26, 58, 0.35);
}
.video-frame img, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-play {
  position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(7, 7, 12, 0.72), rgba(7, 7, 12, 0.1) 60%);
  color: var(--paper);
}
.video-play span {
  display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.4rem;
  background: var(--paper); color: var(--glass); box-shadow: 4px 4px 0 var(--signal);
  font: 600 1.25rem/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase;
}
.video-play span::before {
  content: ""; border-left: 0.9rem solid var(--signal); border-top: 0.55rem solid transparent; border-bottom: 0.55rem solid transparent;
}
.video-play:hover span { background: #fff; }
.video .note { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--dim); }

/* ---- inner pages ---- */

.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) 1rem; }
.page-head h1 { margin-bottom: 1.25rem; }

.flow { display: grid; gap: 2rem; list-style: none; margin: 0; padding: 0; counter-reset: flow; }
@media (min-width: 56rem) { .flow { grid-template-columns: repeat(4, 1fr); gap: 2.25rem; } }
.flow li { position: relative; padding: 1.1rem 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.flow li::after {
  content: ""; position: absolute; width: 0.7rem; height: 0.7rem;
  border-right: 2px solid var(--signal); border-bottom: 2px solid var(--signal);
  left: calc(50% - 0.35rem); bottom: -1.45rem; transform: rotate(45deg);
}
.flow li:last-child::after { display: none; }
@media (min-width: 56rem) {
  .flow li::after { left: auto; right: -1.6rem; top: calc(50% - 0.35rem); bottom: auto; transform: rotate(-45deg); }
}
.flow .k { display: block; margin-bottom: 0.5rem; font: 900 0.8rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wire); }
.flow code { font: 900 1.05rem/1.4 var(--mono); color: var(--paper); overflow-wrap: anywhere; }
.flow p { margin: 0.4rem 0 0; font-size: 0.98rem; color: var(--dim); }
.flow .bytes { margin-top: 0.25rem; }

.tones { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.tones li {
  padding: 0.6rem 0.9rem; border: 1px solid var(--c); border-radius: 3px;
  font: 600 1.15rem/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c);
}
.t1 { --c: #8fd3f0; } .t2 { --c: #7fe0c4; } .t3 { --c: #b5e87a; }
.t4 { --c: #ffd620; } .t5 { --c: #ff963c; } .t6 { --c: #ff5c56; }

.good { --c: var(--good); } .warn { --c: var(--warn); } .bad { --c: var(--bad); }

.log { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; gap: 0.5rem 2.5rem; padding-block: 2.25rem; border-top: 1px solid var(--line); }
@media (min-width: 48rem) { .entry { grid-template-columns: 11rem 1fr; } }
.entry time { font: 900 0.9rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wire); padding-top: 0.5rem; }
.entry h2 { margin-bottom: 0.9rem; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.entry p:last-child { margin-bottom: 0; }
.entry .video { margin-top: 1.25rem; }

details { border-top: 1px solid var(--line); padding-block: 0.4rem; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary {
  position: relative; display: block; padding: 0.9rem 2.5rem 0.9rem 0; cursor: pointer; list-style: none;
  font: 600 1.4rem/1.2 var(--label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.75rem; font: 900 1.4rem/1 var(--mono); color: var(--signal-text); }
details[open] summary::after { content: "\2212"; }
details p { margin-bottom: 1rem; }

.mail { display: inline-block; margin: 0.5rem 0 1.5rem; font: 600 clamp(1.7rem, 6vw, 3rem)/1.1 var(--label); letter-spacing: 0.03em; word-break: break-word; }

.facts { display: grid; gap: 0; margin: 0 0 2rem; max-width: 40rem; }
.facts div { display: grid; gap: 0.25rem 1.5rem; padding-block: 0.7rem; border-top: 1px solid var(--line); }
@media (min-width: 40rem) { .facts div { grid-template-columns: 10rem 1fr; } }
.facts dt { font: 900 0.85rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wire); }
.facts dd { margin: 0; color: var(--paper); }

.downloads { display: grid; gap: 0.75rem; list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.downloads a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 3px; text-decoration: none; background: var(--panel); }
.downloads a:hover { border-color: var(--paper); }
.downloads span { color: var(--dim); font: 900 0.85rem/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.lockup { width: min(100%, 36rem); border-radius: 4px; border: 1px solid var(--line); }

.lost { min-height: 55vh; display: grid; align-content: center; padding-block: 4rem; }
.lost h1 { color: var(--signal-text); margin-bottom: 1rem; }