/* VYRON — site styling.
   Titles and section headings use the chrome bitmap font (glyphs in font/,
   rendered by chrome.js). Body copy is Courier New.

   Contrast rule: no grey body text anywhere. The dimmest text on the site
   is --text-2 (#c8dced) and nothing is smaller than 15px. */

:root{
  --bg:#000814;
  --panel:rgba(11,24,42,.78);
  --line:rgba(70,150,200,.38);
  --line-hi:rgba(76,217,255,.55);

  --cyan:#5fdfff;
  --amber:#ffd94d;
  --green:#6bfc95;
  --magenta:#ff7ad9;

  --text:#eaf3fc;      /* body */
  --text-2:#c8dced;    /* secondary — still bright enough to read */

  --mono:"Courier New",ui-monospace,Menlo,Monaco,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:
    radial-gradient(ellipse 75% 55% at 50% -5%, rgba(35,105,170,.34), transparent 72%),
    radial-gradient(ellipse 62% 48% at 88% 102%, rgba(105,45,150,.26), transparent 72%),
    radial-gradient(ellipse 50% 40% at 8% 60%, rgba(20,80,130,.18), transparent 72%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--mono);
  font-size:18px;
  line-height:1.75;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Starfield canvas sits behind everything */
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:2;max-width:960px;margin:0 auto;padding:0 22px 80px}

/* ---------- Chrome bitmap font ---------- */

.chrome{display:block;text-align:center;line-height:0;white-space:nowrap}
.chrome-glyph{
  height:1em;width:auto;vertical-align:middle;
  image-rendering:auto;
  filter:drop-shadow(0 0 14px rgba(90,180,255,.42));
}
.chrome-word{white-space:nowrap;display:inline-block}   /* keep words intact when wrapping */
.chrome-space{display:inline-block;width:.34em}
.chrome-lit{
  font-family:var(--mono);color:#cfe9fb;font-size:.68em;
  vertical-align:middle;line-height:1;
}

/* Wordmark */
.brand{padding:52px 0 6px}
.brand .chrome{font-size:clamp(56px,12vw,116px)}   /* font-size drives glyph height */

/* Section headings rendered in chrome, smaller */
h2.chrome{
  font-size:clamp(18px,3.4vw,27px);text-align:left;margin-bottom:14px;
  white-space:normal;line-height:1.35;      /* wrap instead of overflowing */
}
h2.chrome .chrome-glyph{filter:drop-shadow(0 0 10px rgba(90,180,255,.34))}

/* Fallback before JS runs / if it fails */
h2:not(.chrome-ready){color:var(--amber)}
.brand h1:not(.chrome-ready){
  font-size:clamp(44px,10vw,84px);letter-spacing:.16em;text-indent:.16em;font-weight:700;
  background:linear-gradient(180deg,#fff 0%,#cfe9fb 38%,#5aa9d8 52%,#e8f6ff 66%,#8fc4e4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.tagline{
  text-align:center;color:#eaf8ff;font-size:17px;letter-spacing:.16em;
  text-transform:uppercase;margin-top:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.tagline::before,.tagline::after{
  content:"";height:1px;width:clamp(20px,7vw,64px);
  background:linear-gradient(90deg,transparent,rgba(95,223,255,.75));
}
.tagline::after{background:linear-gradient(90deg,rgba(95,223,255,.75),transparent)}
.updated{text-align:center;color:var(--text-2);font-size:16px;margin-top:10px}

/* ---------- Sticky nav ---------- */

.nav{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px;
  margin:30px auto 34px;padding:7px;
  border:1px solid var(--line);border-radius:14px;
  background:rgba(6,16,30,.86);backdrop-filter:blur(10px);
  width:max-content;max-width:100%;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.nav.stuck{box-shadow:0 10px 34px rgba(0,0,0,.6);border-color:var(--line-hi)}

/* Small wordmark inside the nav — appears only once the nav sticks, so the
   VYRON title is still present after the big one scrolls away.
   .chrome sets display:block, so these rules need the extra specificity. */
.nav .nav-brand.chrome{
  display:none;
  font-size:21px;                 /* drives glyph height (glyphs are 1em) */
  line-height:0;padding:0 14px 0 6px;border:0;background:none;
  align-self:center;opacity:0;transition:opacity .2s ease;
}
.nav.stuck .nav-brand.chrome{display:inline-flex;align-items:center;opacity:.95}
.nav.stuck .nav-brand.chrome:hover{opacity:1}
.nav .nav-brand .chrome-glyph{filter:drop-shadow(0 0 8px rgba(90,180,255,.5))}
@media (max-width:560px){
  .nav .nav-brand.chrome{font-size:16px;padding:0 6px 0 2px}
}
/* When stuck, lay a full-width blurred bar behind the pill so content
   scrolling underneath is covered cleanly instead of half-hidden. */
.nav::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  top:-14px;bottom:-14px;width:100vw;z-index:-1;
  background:rgba(2,9,20,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.nav.stuck::before{opacity:1}
.nav a{
  color:var(--text-2);text-decoration:none;border:0;
  font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 22px;border-radius:9px;
  transition:color .16s ease,background .16s ease;
}
.nav a:hover{color:#fff;background:rgba(95,223,255,.14)}
.nav a.on{
  color:#04141f;background:linear-gradient(180deg,#8aeaff,#38bfe8);
  box-shadow:0 0 20px rgba(95,223,255,.38);font-weight:700;
}

/* ---------- Floating store badge (bottom-right, fixed, every page) ---------- */

.store-badge{
  position:fixed;right:18px;bottom:18px;z-index:90;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 16px;border-radius:14px;
  border:1px solid var(--line-hi);background:rgba(6,16,30,.92);
  backdrop-filter:blur(10px);
  animation:badge-pulse 2.8s ease-in-out infinite;
}
@keyframes badge-pulse{
  0%,100%{
    box-shadow:0 0 22px rgba(60,170,230,.26), 0 10px 28px rgba(0,0,0,.5),
      0 0 0 1px rgba(76,217,255,.14) inset;
    border-color:var(--line-hi);
  }
  50%{
    box-shadow:0 0 46px rgba(70,200,255,.62), 0 10px 28px rgba(0,0,0,.5),
      0 0 0 1px rgba(150,230,255,.32) inset;
    border-color:#a4ecff;
  }
}
@media (prefers-reduced-motion: reduce){
  .store-badge{animation:none;box-shadow:0 0 26px rgba(60,170,230,.3), 0 10px 28px rgba(0,0,0,.5)}
}
.store-badge-label.chrome{
  font-size:15px;                     /* drives glyph height (glyphs are 1em) */
  line-height:0;
}
.store-badge-label .chrome-glyph{filter:drop-shadow(0 0 10px rgba(90,190,255,.65))}
.store-badge-links{display:flex;gap:4px;border-top:1px solid var(--line);padding-top:7px;width:100%}
.store-badge-link{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--text);border:0;text-decoration:none;
  font-size:14px;font-weight:600;padding:6px 10px;border-radius:8px;
  transition:color .16s ease,background .16s ease;
}
.store-badge-link svg{flex:none;color:var(--cyan);filter:drop-shadow(0 0 4px rgba(95,223,255,.5))}
.store-badge-link:hover{color:#fff;background:rgba(95,223,255,.18)}
@media (max-width:560px){
  .store-badge{right:10px;bottom:10px;padding:9px 11px;gap:5px}
  .store-badge-label.chrome{font-size:12px}
  .store-badge-links{padding-top:5px}
  .store-badge-link{padding:5px 7px;font-size:13px}
}

/* ---------- Panels ---------- */

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px 30px;margin:18px 0;backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 10px 34px rgba(0,0,0,.46);
  transition:opacity .5s ease,transform .5s ease,border-color .2s ease;
}
.js .panel{opacity:0;transform:translateY(16px)}
.js .panel.in{opacity:1;transform:none}
.panel.focus{border-color:var(--line-hi);box-shadow:0 0 30px rgba(60,170,230,.22), 0 0 0 1px rgba(76,217,255,.2) inset}
.panel.amber{border-color:rgba(255,217,77,.5);box-shadow:0 0 30px rgba(255,200,60,.16), 0 0 0 1px rgba(255,217,77,.16) inset}

p{margin:11px 0}
h3{color:var(--cyan);font-size:18px;margin:20px 0 3px;font-weight:700}

a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(95,223,255,.4)}
a:hover{border-bottom-color:var(--cyan);color:#9beeff}

.sub{color:var(--text-2);font-size:17px}
.terminal{
  color:var(--green);font-size:17px;margin-top:16px;padding-top:13px;
  border-top:1px solid rgba(107,252,149,.22);
}
kbd{
  font-family:var(--mono);background:rgba(255,255,255,.09);
  border:1px solid var(--line);border-radius:5px;padding:2px 7px;font-size:16px;color:#eaf6ff;
}

ul{list-style:none;margin:10px 0}
ul li{padding-left:22px;position:relative;margin:7px 0;color:var(--text);font-size:17px}
ul li::before{content:"▸";position:absolute;left:0;color:var(--cyan)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:16px}

/* ---------- Spec rows: a label and what it does ---------- */

.spec{display:grid;gap:8px;margin:16px 0 4px}
.spec>div{
  display:grid;grid-template-columns:minmax(120px,168px) 1fr;gap:18px;align-items:baseline;
  padding:11px 15px;background:rgba(6,16,30,.5);
  border:1px solid rgba(70,150,200,.24);border-radius:10px;
  transition:border-color .18s ease,background .18s ease;
}
.spec>div:hover{border-color:var(--line-hi);background:rgba(8,22,40,.7)}
.spec dt{
  margin:0;color:var(--amber);font-family:var(--mono);font-size:16px;
  letter-spacing:.05em;line-height:1.5;
}
.spec dt kbd{margin-right:3px}
.spec dd{margin:0;color:var(--text-2);font-size:16px;line-height:1.65}
.spec dd b{color:#fff;font-weight:700}
@media (max-width:540px){
  .spec>div{grid-template-columns:1fr;gap:5px}
}

/* ---------- Hero + stats ---------- */

.hero{
  text-align:center;font-size:clamp(23px,4vw,31px);line-height:1.35;
  color:#fff;font-weight:700;margin:4px 0 10px;
}
.hero-sub{text-align:center;color:var(--text);font-size:18px;max-width:680px;margin:0 auto}

/* Six across on a laptop, three rows of two on a phone. Explicit column
   counts rather than auto-fit, so the count never drifts with the viewport. */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:24px 0 4px}
.stat{
  border:1px solid var(--line);border-radius:13px;padding:18px 4px;text-align:center;
  background:rgba(8,20,36,.6);
  transition:opacity .45s ease,transform .45s ease;
}
.js .stat{opacity:0;transform:translateY(12px)}
.js .stat.in{opacity:1;transform:none}
.stat b{display:block;font-size:clamp(26px,2.6vw,34px);color:var(--cyan);font-weight:700;
  line-height:1.1;text-shadow:0 0 18px rgba(95,223,255,.4)}
/* "ACHIEVEMENTS" is one word, so it cannot wrap — if it doesn't fit a sixth
   of the panel it overflows the box. At 15px Courier it needs ~108px, so the
   box must keep well clear of that: hence gap 9 / padding 4 above, giving
   ~127px. No letter-spacing here — it bought nothing but risk. */
.stat span{display:block;font-size:15px;letter-spacing:0;text-transform:uppercase;
  color:var(--text-2);margin-top:6px;line-height:1.25}

/* Six across only once the panel is genuinely wide enough for the longest
   label. Below ~1000px the wrap is still growing, each box drops under
   120px inside, and ACHIEVEMENTS starts to touch the edges. */
@media (max-width:999px){
  .stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .stats{grid-template-columns:repeat(2,1fr);gap:7px}
  .stat{padding:12px 3px;border-radius:11px}
  .stat b{font-size:27px}
  .stat span{font-size:15px;margin-top:3px;letter-spacing:0}
}

/* ---------- Screenshot gallery ---------- */

.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px;margin-top:6px}
.shot{
  position:relative;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  cursor:zoom-in;background:#04101d;line-height:0;
  transition:opacity .5s ease,transform .5s ease,border-color .2s ease,box-shadow .2s ease;
}
.js .shot{opacity:0;transform:translateY(14px)}
.js .shot.in{opacity:1;transform:none}
.shot img{width:100%;height:auto;display:block;transition:transform .35s ease}
.shot:hover,.shot:focus-visible{border-color:var(--line-hi);box-shadow:0 0 26px rgba(76,217,255,.26);outline:none}
.shot:hover img{transform:scale(1.035)}

.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(0,4,10,.93);backdrop-filter:blur(6px);padding:28px;
}
.lightbox.on{display:flex}
.lightbox img{max-width:94vw;max-height:88vh;border-radius:10px;border:1px solid var(--line-hi);
  box-shadow:0 0 60px rgba(0,0,0,.8)}
.lightbox button{
  position:absolute;background:rgba(10,24,42,.9);color:var(--cyan);
  border:1px solid var(--line);border-radius:10px;
  font-family:var(--mono);font-size:26px;line-height:1;cursor:pointer;
  width:52px;height:52px;transition:background .15s ease,color .15s ease;
}
.lightbox button:hover{background:rgba(95,223,255,.2);color:#fff}
.lb-close{top:22px;right:22px}
.lb-prev{left:22px;top:50%;transform:translateY(-50%)}
.lb-next{right:22px;top:50%;transform:translateY(-50%)}

/* ---------- Why I built it ---------- */

.why .lead{font-size:clamp(20px,3.2vw,26px);line-height:1.4;font-weight:700;color:#fff;margin:6px 0 4px}
.why p{font-size:18px;margin:15px 0;color:var(--text)}
.pullquote{
  margin:24px 0 8px;padding:4px 0 4px 20px;border-left:3px solid var(--amber);
  font-size:clamp(17px,2.6vw,21px);line-height:1.5;color:#ffe9a8;font-weight:700;
}
.signoff{text-align:center;margin-top:30px}
/* clamp() floors at 26px, which is wider than a 320px screen can take for
   "game" — .chrome is nowrap so it pushed the page out to 388px. Allow the
   phrase to wrap at spaces (words stay intact via .chrome-word) and let the
   floor drop on very narrow screens. */
.signoff-chrome{font-size:clamp(20px,4.6vw,40px);display:block;white-space:normal;line-height:1.3}
.signoff-by{
  display:block;color:var(--text-2);font-size:15px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;margin-top:18px;
}

/* ---------- CTA ---------- */

.cta{
  display:inline-block;margin-top:6px;padding:14px 30px;border-radius:12px;
  font-size:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#04141f;background:linear-gradient(180deg,#8aeaff,#38bfe8);border:0;
  box-shadow:0 0 26px rgba(95,223,255,.4);
  transition:transform .16s ease,box-shadow .16s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(95,223,255,.6);color:#04141f}
.center{text-align:center}

/* ---------- Footer ---------- */

footer{
  text-align:center;margin-top:40px;padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--text-2);font-size:16px;
}
footer a{border:0;color:var(--text-2)}
footer a:hover{color:var(--cyan)}

@media (max-width:560px){
  body{font-size:17px}
  .wrap{padding:0 15px 60px}
  .panel{padding:20px 18px}
  /* Tighter tracking, padding and gap (never a smaller font) so the sticky
     wordmark and all six links still fit two rows on a phone, not three. */
  .nav{gap:5px}
  .nav a{padding:8px 8px;letter-spacing:.03em;font-size:15px}
  .lightbox button{width:44px;height:44px;font-size:22px}
  .lb-prev{left:8px}.lb-next{right:8px}

  /* --- Get to the content sooner. On a 390px screen the title, tagline and
         nav were eating 345px — 41% of the first screen — before a word of
         copy appeared. --- */
  .brand{padding:20px 0 2px}
  .brand .chrome{font-size:clamp(46px,11.5vw,116px)}
  .tagline{margin-top:10px;letter-spacing:.07em;gap:9px}
  .tagline::before,.tagline::after{width:clamp(12px,4vw,64px)}
  .nav{margin:16px auto 18px}

  /* Hero: left-align the body copy. Centred monospace over a narrow column
     gives ragged, hard-to-scan lines. */
  .hero{font-size:clamp(25px,7vw,31px);line-height:1.28}
  .hero-sub{text-align:left}
  .stats{margin:18px 0 4px;gap:10px}

  /* Wrapped creed needs room for two lines */
  .creed{min-height:104px}
  .creed-line{font-size:clamp(21px,5.6vw,38px)}
}

/* ================= Ship fly-by rail ================= */

/* ================= Ship showcase ================= */

.stage-panel{padding-bottom:20px}
.ship-stage-wrap{
  position:relative;margin-top:16px;
  border:1px solid var(--line);border-radius:14px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 40%, rgba(40,110,175,.20), transparent 72%),
    rgba(3,10,20,.72);
  overflow:hidden;
}
canvas.ship-stage{
  display:block;width:100%;height:clamp(300px,42vw,420px);
}

/* Hero stage — the first thing on the page, so it sits above the headline
   and runs edge to edge inside the panel. Shorter than the standalone stage
   so the headline and stats still make the first screen on a phone. */
.hero-panel{padding-top:18px}
.hero-stage{margin:0 0 20px}
.hero-stage canvas.ship-stage{height:clamp(210px,34vw,340px)}
@media (max-width:560px){
  .hero-panel{padding:14px 14px 20px}
  .hero-stage{margin:0 0 16px;border-radius:12px}
  .hero-stage canvas.ship-stage{height:215px}
}
.ship-name{
  position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(15px,2.4vw,19px);letter-spacing:.22em;
  opacity:0;transition:opacity .15s linear;
  margin:0;pointer-events:none;
}

/* ================= Codex ================= */

.codex-lead{
  text-align:center;font-size:clamp(19px,3.2vw,25px);line-height:1.45;
  color:#fff;font-weight:700;max-width:680px;margin:6px auto 2px;
}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.pillar{position:relative;overflow:hidden}
.pillar p{font-size:16.5px}
/* One phrase visible at a time; lines are stacked so the panel never
   jumps as they swap. */
.creed{
  position:relative;text-align:center;
  min-height:clamp(52px,9vw,84px);
  display:flex;align-items:center;justify-content:center;
}
.creed-line{
  position:absolute;left:0;right:0;
  font-size:clamp(22px,4.4vw,38px);
  opacity:0;
  transition:opacity 1.2s cubic-bezier(.4,0,.2,1);
  will-change:opacity;              /* keep the fade on the compositor */
  /* .chrome is nowrap, which pushed "You live by the Vyra" off the side of a
     phone (448px wide on a 390px screen). Wrap at spaces; .chrome-word still
     keeps each word intact so it never breaks mid-word. */
  white-space:normal;
  line-height:1.25;
}
.creed-line.on{opacity:1}
/* Without JS every line would stack invisibly — show them as a list instead */
html:not(.js) .creed{display:block;min-height:0}
html:not(.js) .creed-line{position:static;opacity:1;display:block;margin:10px 0}

/* ================= Database ================= */

.db-controls{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 6px;
}
.db-controls input[type=search]{
  flex:1 1 220px;min-width:180px;
  background:rgba(6,16,30,.9);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:var(--mono);font-size:17px;padding:11px 14px;
}
.db-controls input[type=search]:focus{outline:none;border-color:var(--line-hi);
  box-shadow:0 0 18px rgba(76,217,255,.22)}
.chip{
  background:rgba(6,16,30,.9);border:1px solid var(--line);border-radius:99px;
  color:var(--text-2);font-family:var(--mono);font-size:16px;padding:9px 16px;cursor:pointer;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.chip:hover{color:#fff;border-color:var(--line-hi)}
.chip.on{background:linear-gradient(180deg,#8aeaff,#38bfe8);color:#04141f;font-weight:700;border-color:transparent}
.db-count{color:var(--text-2);font-size:16px;margin:2px 0 14px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:12px}
.card{
  background:rgba(9,21,38,.8);border:1px solid var(--line);border-radius:13px;
  padding:0;cursor:pointer;text-align:left;font-family:var(--mono);
  color:var(--text);overflow:hidden;
  transition:opacity .4s ease,transform .4s ease,border-color .15s ease,box-shadow .15s ease;
}
.card-body{padding:13px 16px 15px}

/* ---- Gun-camera stills ---- */
.portrait{
  position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,rgba(30,70,110,.32),rgba(5,12,24,.9) 70%);
}
.portrait img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  transition:transform .35s ease;
}
/* Scan lines + vignette so a raw capture reads as a sensor record */
.portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.15) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(2,7,16,.7) 100%);
}
.p-card{aspect-ratio:4/3;border-bottom:1px solid var(--line)}
.card:hover .portrait img{transform:scale(1.06)}

.portrait.none{display:flex;align-items:center;justify-content:center}
.portrait.none span{
  color:var(--amber);font-family:var(--mono);font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
  line-height:1.55;opacity:.8;
}

.p-detail{
  aspect-ratio:16/9;border:1px solid var(--line);
  border-radius:12px;margin-bottom:18px;
}
.p-detail img{object-fit:contain;object-position:center}
.js .card{opacity:0;transform:translateY(12px)}
.js .card.in{opacity:1;transform:none}
.card:hover,.card:focus-visible{border-color:var(--line-hi);box-shadow:0 0 22px rgba(76,217,255,.22);outline:none}
.card h3{margin:0 0 6px;color:#fff;font-size:18px}
.card .meta{color:var(--text-2);font-size:15px;display:flex;gap:10px;flex-wrap:wrap}
.threat{letter-spacing:.12em;color:var(--amber)}
.threat.t4,.threat.t5{color:#ff8a6b}

.detail{
  position:fixed;inset:0;z-index:210;display:none;
  align-items:center;justify-content:center;padding:26px;
  background:rgba(0,4,10,.9);backdrop-filter:blur(7px);
}
.detail.on{display:flex}
.detail-inner{
  background:rgba(9,21,38,.97);border:1px solid var(--line-hi);border-radius:16px;
  max-width:720px;width:100%;max-height:86vh;overflow-y:auto;padding:28px 30px;
  box-shadow:0 0 60px rgba(0,0,0,.75);
}
.detail-inner h2{margin-bottom:6px}
.detail-close{
  position:absolute;top:22px;right:22px;width:52px;height:52px;
  background:rgba(10,24,42,.9);color:var(--cyan);border:1px solid var(--line);
  border-radius:10px;font-family:var(--mono);font-size:26px;cursor:pointer;
}
.detail-close:hover{background:rgba(95,223,255,.2);color:#fff}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px;margin-top:16px}
.dl h4{color:var(--amber);font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.badge{
  border:1px solid var(--line);border-radius:99px;padding:5px 13px;
  font-size:15px;color:var(--text-2);background:rgba(6,16,30,.7);
}


/* Chrome headings wrap; keep the wordmark on one line */
@media (max-width:560px){
  h2.chrome{font-size:clamp(17px,5.2vw,22px)}
  .brand .chrome{font-size:clamp(46px,13vw,72px)}

  /* Two enemies per row — halves the portrait size and roughly halves the
     length of the page. Must live *after* the base .cards rule above:
     media queries add no specificity, so a later rule would win. */
  .cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .card-body{padding:10px 11px 12px}
  .card h3{font-size:16px}
  .card .meta{font-size:15px;gap:6px}
  .p-card{aspect-ratio:1/1}
}
.db-empty{color:var(--text-2);font-size:17px;padding:14px 2px}

/* ================= Feature grid (Overview) ================= */

.feat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:14px;margin-top:18px;
}
.feat{
  background:rgba(8,19,34,.6);
  border:1px solid var(--line);border-radius:13px;
  padding:16px 18px 18px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.feat:hover{
  border-color:var(--line-hi);
  box-shadow:0 0 24px rgba(76,217,255,.18);
  transform:translateY(-2px);
}
.feat h3.chrome{
  font-size:clamp(15px,2vw,18px);text-align:left;
  margin:0 0 8px;white-space:normal;line-height:1.3;
}
.feat p{margin:0;font-size:16px;color:var(--text-2);line-height:1.65}
.feat a{color:var(--cyan)}

/* Distant patrol — far-off traffic in the page margins */
#patrol{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:3;                       /* above everything — confined to the margins */
  pointer-events:none;
  mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}