/* ============================================================================
   UNGODLY MOD SERIES — FIELD INSTALLATION MANUAL
   Design language: WW2 field-manual paper-on-gun-oil, fused with the mods'
   own in-game configuration windows (salmon-red AI/Ballistics bar, steel-blue
   GFX bar, boxy tab strips, brass "ON" chips).
   ========================================================================== */

:root{
  --coal:    #17150f;   /* page ground — gun-oil black with an olive cast   */
  --coal-2:  #1d1a13;
  --panel:   #221f17;   /* card ground                                       */
  --panel-2: #2a2619;   /* raised card / code ground                         */
  --paper:   #ece3cb;   /* field-manual paper — primary text                 */
  --khaki:   #a3987a;   /* secondary text                                    */
  --dim:     #7c7358;
  --line:    #3b3524;   /* hairlines                                         */
  --brass:   #d9a441;   /* accents: stencil numerals, chips, links           */
  --brass-2: #b7871f;
  --signal:  #c25b4e;   /* UngodlyAI / UngodlyBallistics window red          */
  --signal-2:#a24237;
  --steel:   #5d8fb0;   /* UngodlyGFX window blue                            */
  --steel-2: #44708e;
  --ok:      #8faf62;   /* verified / success                                */
  --warn:    #d9a441;

  --f-stencil: 'Allerta Stencil', 'Arial Black', Impact, sans-serif;
  --f-head:    'Cinzel', 'Times New Roman', serif;
  --f-body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', 'Consolas', 'Courier New', monospace;

  --wrap: 1100px;
  --r: 3px;             /* the mod GUIs are boxy — keep radii near zero      */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  color:var(--paper);
  background:
    repeating-linear-gradient(-38deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px),
    radial-gradient(1200px 500px at 70% -10%, #24201533, transparent 60%),
    var(--coal);
  font:400 16.5px/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 22px; }

a{ color:var(--brass); text-decoration-color:#d9a44166; text-underline-offset:3px; }
a:hover{ color:#eebd63; text-decoration-color:currentColor; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; border-radius:2px; }

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--brass); color:#171204; padding:8px 14px; font-weight:600;
}
.skip:focus{ left:8px; top:8px; }

/* --- Classification strip -------------------------------------------------- */
.strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px;
  padding:7px 14px;
  background:linear-gradient(#25211566,#25211566), var(--brass);
  background:var(--brass);
  color:#181203;
  font:600 11.5px/1.3 var(--f-mono);
  letter-spacing:.14em;
  border-bottom:1px solid #00000055;
}
.strip-sep{ opacity:.45; }

/* --- Masthead --------------------------------------------------------------- */
.mast{
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg, #1d1a1200, #14110b 92%),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(217,164,65,.05) 118px 119px);
  padding:34px 0 26px;
}
.mast-in{ display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; }
.mast-stencil{
  margin:0;
  font:400 clamp(56px, 9vw, 108px)/0.9 var(--f-stencil);
  letter-spacing:.045em;
  color:var(--paper);
  text-shadow:
    0 0 1px #0008,
    3px 3px 0 #00000059,
    0 0 22px rgba(217,164,65,.13);
  -webkit-text-stroke:.5px #0006;
}
.mast-side{ padding-bottom:8px; }
.mast-series{
  margin:0 0 3px;
  font:600 clamp(15px,2vw,19px)/1.25 var(--f-head);
  letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
}
.mast-sub{ margin:0; color:var(--khaki); font-size:14px; letter-spacing:.02em; }
.mast-author{ margin:4px 0 0; color:var(--dim); font:600 12px/1.4 var(--f-mono); letter-spacing:.08em; }

/* --- Sticky tab navigation (mirrors the mods' GUI tab strips) --------------- */
.tabs{
  position:sticky; top:0; z-index:40;
  background:#14110bf2;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.tabs-in{ display:flex; gap:6px; overflow-x:auto; padding-top:9px; padding-bottom:9px; scrollbar-width:thin; }
.tab{
  flex:0 0 auto;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  color:var(--khaki);
  font:600 12.5px/1 var(--f-mono);
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
}
.tab:hover{ color:var(--paper); border-color:#57503a; }
.tab.is-active{
  background:var(--brass); border-color:var(--brass);
  color:#181203;
}
.tab-short{ display:none; }
@media (max-width:760px){
  .tab-long{ display:none; }
  .tab-short{ display:inline; }
}

/* --- Generic content -------------------------------------------------------- */
main{ padding:40px 22px 70px; }
.lede{
  font-size:19px; color:var(--paper); max-width:62ch;
}
.lede strong{ color:var(--brass); }
p{ max-width:72ch; }
h1,h2,h3{ font-family:var(--f-head); letter-spacing:.06em; line-height:1.2; }
h1{ font-size:clamp(26px,4vw,36px); font-weight:700; margin:.2em 0 .45em; text-transform:uppercase; }
h2{ font-size:clamp(20px,3vw,26px); font-weight:600; margin:2.1em 0 .5em; text-transform:uppercase; color:var(--paper); }
h3{ font-size:17px; font-weight:600; margin:1.6em 0 .4em; color:var(--brass); text-transform:uppercase; letter-spacing:.1em; }
hr{ border:0; border-top:1px solid var(--line); margin:42px 0; }
ul,ol{ padding-left:1.35em; }
li{ margin:.35em 0; max-width:70ch; }
li::marker{ color:var(--brass); }
strong{ color:#f4ecd8; }
em{ color:var(--khaki); }

.eyebrow{
  font:600 12px/1.2 var(--f-mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); margin:0 0 10px;
}
.eyebrow::before{ content:"— "; color:var(--dim); }

/* --- Field-order step plates (the signature) --------------------------------
   A stencil numeral on a stamped brass plate, order title beside it, body
   below. Numbering is real sequence information: these ARE ordered steps.   */
.plate{
  position:relative;
  margin:34px 0;
  border:1px solid var(--line);
  border-left:3px solid var(--brass);
  border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  padding:20px 24px 22px 24px;
}
.plate > :last-child{ margin-bottom:0; }
.plate-head{ display:flex; align-items:center; gap:16px; margin:0 0 12px; }
.plate-num{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:58px; height:58px;
  border:2px solid var(--brass);
  border-radius:var(--r);
  background:
    repeating-linear-gradient(45deg, rgba(217,164,65,.10) 0 3px, transparent 3px 6px),
    #171308;
  font:400 30px/1 var(--f-stencil);
  color:var(--brass);
  text-shadow:1px 1px 0 #000;
}
.plate-title{ margin:0; font:600 clamp(17px,2.4vw,22px)/1.25 var(--f-head); letter-spacing:.08em; text-transform:uppercase; }
.plate-kicker{ display:block; font:600 11px/1.3 var(--f-mono); letter-spacing:.2em; color:var(--khaki); margin-bottom:3px; text-transform:uppercase; }

/* Substeps inside a plate */
.plate ol.sub{ counter-reset:sub; list-style:none; padding-left:0; }
.plate ol.sub > li{
  counter-increment:sub;
  position:relative; padding-left:34px; margin:.7em 0;
}
.plate ol.sub > li::before{
  content:counter(sub, decimal-leading-zero);
  position:absolute; left:0; top:.18em;
  font:600 12px/1.4 var(--f-mono); letter-spacing:.05em;
  color:var(--brass);
  border-bottom:1px solid #d9a44155;
}

/* --- Replica in-game mod window --------------------------------------------- */
.modwin{
  margin:26px 0 34px;
  border:1px solid #000a;
  border-radius:var(--r);
  background:#3a3d40;
  box-shadow:0 14px 34px -18px #000c, inset 0 0 0 1px #ffffff10;
  overflow:hidden;
}
.modwin-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px 12px;
  font:600 13.5px/1.3 var(--f-body); letter-spacing:.02em;
  color:#fdf6ea;
  text-shadow:0 1px 0 #0006;
}
.modwin--signal .modwin-bar{ background:linear-gradient(180deg, var(--signal), var(--signal-2)); }
.modwin--steel  .modwin-bar{ background:linear-gradient(180deg, var(--steel),  var(--steel-2)); }
.modwin-x{
  flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center;
  background:#00000042; border-radius:2px; font:600 11px/1 var(--f-mono); color:#fff;
}
.modwin-tabs{
  display:flex; flex-wrap:wrap; gap:4px;
  padding:8px 10px; background:#33363a; border-bottom:1px solid #0008;
}
.modwin-tab{
  padding:4px 10px; border-radius:2px;
  background:#4a4e53; color:#d8dade;
  font:600 11px/1.3 var(--f-body);
}
.modwin--signal .modwin-tab.is-on{ background:var(--signal); color:#fff; }
.modwin--steel  .modwin-tab.is-on{ background:var(--steel);  color:#fff; }
.modwin-meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:0;
  margin:0; background:#2e3134;
}
.modwin-meta > div{ padding:10px 14px; border-top:1px solid #0006; border-right:1px solid #0004; }
.modwin-meta dt{
  font:600 10.5px/1.3 var(--f-mono); letter-spacing:.18em; text-transform:uppercase;
  color:#9aa0a8; margin:0 0 3px;
}
.modwin-meta dd{ margin:0; color:#e8eaee; font-size:13.5px; overflow-wrap:anywhere; }

/* --- Code / path blocks ------------------------------------------------------ */
.code{
  position:relative;
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#141109;
}
.code[data-label]::before{
  content:attr(data-label);
  position:absolute; top:-9px; left:12px;
  padding:1px 8px;
  background:var(--coal); border:1px solid var(--line); border-radius:2px;
  font:600 10.5px/1.4 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--khaki);
}
.code pre{
  margin:0; padding:14px 92px 14px 16px;
  overflow-x:auto;
  font:400 13.5px/1.62 var(--f-mono);
  color:#e9dfc4;
  tab-size:4;
}
.code--tree pre{ padding-right:16px; color:#d8cfae; }
.code-copy{
  position:absolute; top:8px; right:8px;
  padding:5px 11px;
  border:1px solid var(--brass-2); border-radius:2px;
  background:#1c1608; color:var(--brass);
  font:600 10.5px/1 var(--f-mono); letter-spacing:.14em;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.code-copy:hover{ background:var(--brass); color:#181203; }
.code-copy.is-done{ background:var(--ok); border-color:var(--ok); color:#131a08; }

code.path{
  font:600 .92em/1.4 var(--f-mono);
  color:#f0d79a;
  background:#d9a4411a;
  border:1px solid #d9a44133;
  border-radius:2px;
  padding:.06em .38em;
  overflow-wrap:anywhere;
}
kbd{
  font:600 .85em/1 var(--f-mono);
  color:#181203; background:var(--brass);
  border-radius:2px; padding:.22em .5em .26em;
  box-shadow:0 2px 0 var(--brass-2);
}

/* --- Callouts ----------------------------------------------------------------- */
.callout{
  display:grid; grid-template-columns:auto 1fr; gap:12px;
  margin:20px 0; padding:13px 16px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel);
}
.callout > .ico{
  font:600 11px/1.5 var(--f-mono); letter-spacing:.14em;
  padding-top:.15em;
}
.callout p{ margin:.1em 0; }
.callout--warn{ border-color:#d9a44166; }
.callout--warn > .ico{ color:var(--warn); }
.callout--ok{ border-color:#8faf6266; }
.callout--ok > .ico{ color:var(--ok); }
.callout--mp{ border-color:#5d8fb066; }
.callout--mp > .ico{ color:var(--steel); }

/* --- Screenshots --------------------------------------------------------------- */
.shot{ margin:24px 0; }
.shot-link{
  position:relative; display:block;
  border:1px solid var(--line); border-radius:var(--r);
  background:#000;
  overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.shot-link:hover{ border-color:var(--brass); }
.shot img{ display:block; width:100%; height:auto; }
.shot-zoom{
  position:absolute; right:0; bottom:0;
  padding:4px 10px;
  background:#14110bd9; color:var(--brass);
  font:600 10.5px/1.4 var(--f-mono); letter-spacing:.1em;
  border-top-left-radius:var(--r);
  opacity:0; transition:opacity .15s;
}
.shot-link:hover .shot-zoom, .shot-link:focus-visible .shot-zoom{ opacity:1; }
.shot figcaption, .shot > figcaption{
  margin-top:9px; font-size:13.5px; color:var(--khaki); max-width:78ch;
}
.shots{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  margin:26px 0;
}
.shots .shot{ margin:0; }

/* --- Index cards ------------------------------------------------------------------ */
.cards{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  margin:30px 0;
}
.card{
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--line); border-top:3px solid var(--brass);
  border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  padding:18px 18px 16px;
}
.card--signal{ border-top-color:var(--signal); }
.card--steel{ border-top-color:var(--steel); }
.card h3{ margin:0; letter-spacing:.06em; }
.card--signal h3{ color:var(--signal); }
.card--steel h3{ color:var(--steel); }
.card .ver{ font:600 12px/1 var(--f-mono); color:var(--khaki); letter-spacing:.12em; }
.card p{ margin:0; font-size:14.5px; color:#cfc6ab; }
.card .card-go{ margin-top:auto; font:600 12.5px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; }

/* chips row (hotkey / dll etc.) */
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 0; padding:0; list-style:none; }
.chips li{
  margin:0; padding:4px 9px;
  border:1px solid var(--line); border-radius:2px;
  background:#161309;
  font:600 11px/1.4 var(--f-mono); letter-spacing:.06em; color:var(--khaki);
}
.chips li b{ color:var(--brass); font-weight:600; }

/* on/off toggle chip like the in-game GUIs */
.on{
  display:inline-block; padding:2px 9px 3px; margin-right:6px;
  border-radius:2px; background:var(--signal); color:#fff;
  font:600 11px/1.4 var(--f-body); letter-spacing:.05em;
}
.on--steel{ background:var(--steel); }

/* --- Order-of-battle overview list (index) ------------------------------------------ */
.oob{ counter-reset:oob; list-style:none; margin:26px 0; padding:0; }
.oob > li{
  counter-increment:oob;
  display:grid; grid-template-columns:58px 1fr; gap:16px;
  padding:16px 0; border-top:1px solid var(--line);
}
.oob > li:last-child{ border-bottom:1px solid var(--line); }
.oob > li::before{
  content:counter(oob, decimal-leading-zero);
  font:400 30px/1 var(--f-stencil); color:var(--brass); text-shadow:1px 1px 0 #000;
  padding-top:2px;
}
.oob b{ display:block; font-family:var(--f-head); text-transform:uppercase; letter-spacing:.07em; font-size:16.5px; margin-bottom:2px; }
.oob p{ margin:0; color:var(--khaki); font-size:14.5px; }

/* --- Verify checklist ---------------------------------------------------------------- */
.check{ list-style:none; margin:22px 0; padding:0; }
.check > li{
  display:grid; grid-template-columns:auto 1fr; gap:12px;
  padding:12px 14px; margin:10px 0;
  border:1px solid var(--line); border-left:3px solid var(--ok);
  border-radius:var(--r); background:var(--panel);
}
.check > li::before{
  content:"\2713";
  font:600 15px/1.4 var(--f-mono); color:var(--ok);
}
.check p{ margin:.15em 0; }

/* --- Downloads table ------------------------------------------------------------------- */
.dl-table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:14.5px; }
.dl-table th, .dl-table td{
  padding:11px 12px; border:1px solid var(--line); text-align:left; vertical-align:top;
}
.dl-table th{
  background:var(--panel-2); color:var(--brass);
  font:600 11.5px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
}
.dl-table td{ background:var(--panel); }
.dl-btn{
  display:inline-block; padding:7px 14px;
  border:1px solid var(--brass-2); border-radius:2px;
  background:#1c1608; color:var(--brass);
  font:600 12px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
}
.dl-btn:hover{ background:var(--brass); color:#181203; }
@media (max-width:700px){
  .dl-table{ display:block; overflow-x:auto; }
}

/* --- Footer ------------------------------------------------------------------------------ */
.foot{ border-top:1px solid var(--line); background:#12100a; margin-top:30px; }
.foot-in{ padding:34px 22px 44px; color:var(--khaki); font-size:13.5px; }
.foot-stamp{
  font:400 clamp(18px,3vw,26px)/1.1 var(--f-stencil);
  color:#d9a44140; letter-spacing:.18em; margin:0 0 14px;
}
.foot-fine{ color:var(--dim); }
.foot-nav{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; font:600 12px/1.6 var(--f-mono); letter-spacing:.06em; }
.foot-nav span{ color:var(--dim); }

/* --- Lightbox ------------------------------------------------------------------------------
   Click any resized screenshot -> overlay with the untouched original PNG.
   Zoom toggles between FIT (scaled to viewport) and 1:1 (native 1920x1080,
   scrollable). With JS off, the anchor simply opens the original in a tab.  */
.lb{
  position:fixed; inset:0; z-index:80;
  display:none;
  background:#0c0a06f2;
}
.lb.is-open{ display:block; }
.lb-stage{
  position:absolute; inset:0 0 84px 0;
  overflow:auto;
  display:grid; place-items:center;
  padding:18px;
  scrollbar-width:thin;
}
.lb-stage img{
  display:block;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  border:1px solid var(--line);
  background:#000;
  cursor:zoom-in;
}
.lb.is-actual .lb-stage{ place-items:start; }
.lb.is-actual .lb-stage img{ max-width:none; max-height:none; cursor:zoom-out; }
.lb-bar{
  position:absolute; left:0; right:0; bottom:0; height:84px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 16px;
  background:#14110b; border-top:1px solid var(--line);
}
.lb-cap{ flex:1 1 320px; min-width:200px; font-size:13px; color:var(--khaki); line-height:1.45; }
.lb-count{ font:600 12px/1 var(--f-mono); letter-spacing:.12em; color:var(--brass); }
.lb-btn{
  padding:8px 13px;
  border:1px solid var(--line); border-radius:2px;
  background:var(--panel); color:var(--paper);
  font:600 11.5px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; text-decoration:none;
}
.lb-btn:hover{ border-color:var(--brass); color:var(--brass); }
.lb-close{
  position:absolute; top:12px; right:14px;
  width:42px; height:42px;
  border:1px solid var(--line); border-radius:2px;
  background:#14110bd9; color:var(--paper);
  font:400 20px/1 var(--f-mono);
  cursor:pointer; z-index:2;
}
.lb-close:hover{ border-color:var(--signal); color:var(--signal); }
.lb-prev,.lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:64px;
  border:1px solid var(--line); border-radius:2px;
  background:#14110bcc; color:var(--paper);
  font:400 22px/1 var(--f-mono); cursor:pointer; z-index:2;
}
.lb-prev{ left:12px; } .lb-next{ right:12px; }
.lb-prev:hover,.lb-next:hover{ border-color:var(--brass); color:var(--brass); }
@media (max-width:640px){
  .lb-stage{ inset:0 0 118px 0; }
  .lb-bar{ height:118px; }
  .lb-prev,.lb-next{ top:auto; bottom:132px; transform:none; }
}

/* --- Small screens -------------------------------------------------------------------------- */
@media (max-width:760px){
  .mast{ padding:26px 0 20px; }
  .mast-in{ gap:14px; }
  main{ padding:30px 16px 56px; }
  .plate{ padding:16px 16px 18px; }
  .plate-num{ width:48px; height:48px; font-size:24px; }
  .oob > li{ grid-template-columns:44px 1fr; }
  .code pre{ padding-right:16px; }
  .code-copy{ position:static; display:block; margin:0 0 0 auto; border-radius:0 0 0 2px; }
  .code{ display:flex; flex-direction:column-reverse; }
}

/* print: keep it manual-like */
@media print{
  .tabs,.strip,.foot-nav,.code-copy,.shot-zoom{ display:none !important; }
  body{ background:#fff; color:#111; }
  a{ color:#111; }
}

/* --- brass modwin + card variant (Killstreak Announcer) --------------------- */
.modwin--brass .modwin-bar{ background:linear-gradient(180deg, var(--brass), var(--brass-2)); }
.modwin--brass .modwin-bar .modwin-title{ color:#1d1a13; }
.modwin--brass .modwin-bar .modwin-x{ color:#1d1a13; border-color:#1d1a13; }
.modwin--brass .modwin-tab.is-on{ background:var(--brass); color:#1d1a13; }
.card--brass{ border-top-color:var(--brass); }
.card--brass h3{ color:var(--brass); }

/* --- modwin-body: free content area inside a replica window (comments page) - */
.modwin-body{ background:#2b2d2f; border-top:1px solid #0008; }
.modwin-body a{ color:var(--brass); }