/* ============================================================
   WASD-FPS / SMG theme
   Generated markdown-friendly CSS
   Retro arena FPS / amber glow / blue frame
   ============================================================ */

:root {
  --page-width: 860px;

  --font-main: Menlo, Consolas, Monaco, "Courier New", monospace;
  --font-size: 14px;
  --line-height: 1.6;

  --bg: #000;
  --text: #ded6c8;
  --text-soft: rgba(222, 214, 200, 0.78);
  --text-bright: #fff4e6;

  --panel-top: rgba(39, 27, 15, 0.96);
  --panel-mid: rgba(24, 17, 10, 0.98);
  --panel-bottom: rgba(12, 10, 8, 0.98);

  --amber: rgb(255, 172, 96);
  --amber-bright: rgb(255, 206, 150);
  --amber-soft: rgba(255, 172, 96, 0.45);
  --amber-dim: rgba(255, 172, 96, 0.24);

  --blue: rgb(0, 70, 140);
  --blue-bright: rgb(35, 130, 220);
  --blue-soft: rgba(0, 70, 140, 0.55);
  --blue-dim: rgba(0, 70, 140, 0.28);

  --black-glass: rgba(0, 0, 0, 0.35);
  --black-glass-strong: rgba(0, 0, 0, 0.62);

  --space-xs: 2px;
  --space-sm: 6px;
  --space-md: 12px;
  --space-lg: 22px;
  --space-xl: 44px;

  --glow-amber-sm: drop-shadow(0 0 5px rgba(255, 172, 96, 0.8));
  --glow-amber-lg: drop-shadow(0 0 9px rgba(255, 172, 96, 0.9));

  --panel-glow:
    0 0 42px rgba(0, 70, 140, 0.95),
    0 0 22px rgba(0, 70, 140, 0.62) inset,
    0 0 90px rgba(255, 172, 96, 0.08) inset;
}

/* ---------- Reset / SMG compatibility ---------- */

html {
  box-sizing: border-box;
}

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

body,
h1,
h2,
h3,
h4,
p,
table,
ul,
ol,
blockquote,
pre {
  margin-top: 0;
}

header,
footer,
main,
nav {
  display: block;
}

/* ---------- Page ---------- */

body {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-md);

  font-family: var(--font-main);
  font-size: var(--font-size);
  line-height: var(--line-height);
  text-align: justify;

  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255, 172, 96, 0.08), transparent 35%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.82)),
    url(https://images2.imgbox.com/ff/36/3YM5hWWT_o.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* ---------- Links ---------- */

a,
.refresh-link {
  color: var(--text-bright);
  text-decoration: none;
  font-weight: bold;
  filter: var(--glow-amber-lg);
}

a:hover,
.refresh-link:hover {
  color: #000;
  background-color: var(--amber-bright);
  filter: none;
}

.refresh-link {
  cursor: pointer;
}

/* ---------- Header / logo ---------- */

header {
  margin-bottom: var(--space-sm);
}

.header {
  padding: var(--space-sm) var(--space-xs);
  text-align: left;
  color: var(--text-bright);
}

.header a {
  display: inline-block;
}

.header h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--text-bright);
  filter: var(--glow-amber-sm);
}

.header h1:before {
  content: "> ";
  color: var(--amber);
}

.header a:hover {
  color: var(--text-bright);
  background: none;
}

/* ---------- Navbar ---------- */

nav {
  max-width: var(--page-width);
  margin: 0 auto var(--space-md);
  padding: var(--space-sm) var(--space-md);

  text-align: center;
  color: var(--amber-dim);

  background:
    linear-gradient(to right, transparent, rgba(0, 0, 0, 0.55), transparent);
  border-top: 1px solid var(--blue-dim);
  border-bottom: 1px solid var(--blue-dim);
}

nav p {
  margin: 0;
  padding: 0;
}

nav a {
  display: inline-block;
  padding: 3px 10px;
  color: var(--text-bright);
  filter: var(--glow-amber-sm);
}

nav a:hover {
  color: #000;
  background-color: var(--amber-bright);
}

/* ---------- Main panel ---------- */

main {
  position: relative;
  padding: 0;
  overflow: hidden;

  color: var(--text);
  background-image:
    linear-gradient(to bottom, var(--panel-top), var(--panel-mid) 45%, var(--panel-bottom));

  border: 2px solid var(--blue);
  border-bottom: none;

  box-shadow: var(--panel-glow);
}

/* subtle scanline texture */
main:before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;

  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: 0.35;
}

/* keep content above scanline layer */
main > * {
  position: relative;
}

/* Text/content inset.
   Media, h1 section bars, tables and dividers can run full-width. */
main > p,
main > h2,
main > h3,
main > h4,
main > ul,
main > ol,
main > blockquote,
main > pre {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}

main p {
  margin-bottom: 1em;
  color: var(--text-soft);
}

main p:first-child {
  margin-top: 0;
}

/* Markdown often wraps standalone media in paragraphs.
   Only full-bleed paragraphs that start directly with media. */
main p:has(> img:first-child),
main p:has(> iframe:first-child) {
  margin-left: 0;
  margin-right: 0;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* ---------- Headings ---------- */

main h1,
main h2,
main h3,
main h4 {
  color: var(--amber-bright);
  filter: var(--glow-amber-sm);
  text-align: left;
}

main h1 {
  margin: var(--space-xl) 0 var(--space-lg);
  padding: var(--space-lg) var(--space-lg) var(--space-sm);

  font-size: 22px;
  letter-spacing: 0.5px;

  color: var(--amber-bright);
  filter: var(--glow-amber-sm);

  border-top: 2px solid var(--blue);
  border-bottom: 1px solid var(--amber-dim);

  box-shadow:
    0 -10px 18px -14px var(--blue),
    0 -1px 10px -2px rgba(0, 70, 140, 0.9);
}

main h1:before {
  content: "// ";
  color: var(--blue-bright);
  filter: drop-shadow(0 0 5px var(--blue-bright));
}

main h1:first-of-type {
  margin-top: 0;
}

main h2,
main h3 {
  width: calc(58% - var(--space-lg));
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--amber-dim);
}

main h4 {
  margin-bottom: var(--space-md);
  font-size: 1em;
  color: var(--text-bright);
}

/* ---------- Media ---------- */

main img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--space-lg) 0;

  border-top: 1px solid var(--amber-dim);
  border-bottom: 1px solid var(--amber-dim);

  box-shadow:
    0 0 90px rgba(255, 172, 96, 0.35),
    0 0 40px rgba(0, 70, 140, 0.35);
}

main iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: var(--space-lg) 0;
  border: none;
}

/* Override generated inline iframe margins politely */
main p > iframe {
  margin: 0;
}

/* ---------- Dividers from Markdown --- ---------- */

main hr {
  width: 100%;
  height: 2px;
  margin: var(--space-xl) 0 var(--space-lg);

  border: none;
  background: var(--blue);
  box-shadow:
    0 0 12px var(--blue),
    0 0 24px rgba(0, 70, 140, 0.5);
}

/* ---------- Tables / server list ---------- */

main table {
  width: 100%;
  margin: var(--space-lg) 0;

  font-family: var(--font-main);
  font-size: 13px;

  border-collapse: collapse;
  border-top: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);

  background-color: var(--black-glass);
}

main th,
main td {
  padding: 8px 10px;
  text-align: left;
}

main th {
  color: var(--text-bright);
  font-weight: bold;
  background-color: var(--black-glass-strong);
  border-bottom: 1px solid var(--amber-dim);
}

main th:hover {
  cursor: pointer;
  color: #000;
  background-color: var(--amber-bright);
}

main tr {
  color: var(--text-bright);
  font-weight: bold;
}

main tr:nth-child(odd) {
  background-color: rgba(255, 172, 96, 0.12);
}

main tr:nth-child(even) {
  background-color: rgba(0, 70, 140, 0.12);
}

main tr:hover {
  background-color: rgba(255, 172, 96, 0.22);
}

/* Refresh link gets a button-ish treatment */
.refresh-link {
  display: inline-block;
  padding: 4px 14px;

  color: var(--text-bright);
  background-color: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--amber-dim);
}

/* ---------- Lists / code-ish Markdown ---------- */

main ul,
main ol {
  color: var(--text-soft);

  /* keep list text aligned consistently */
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 1em;

  /* creates a shared marker gutter */
  list-style-position: outside;
}

main ul {
  margin-left: calc(var(--space-lg) + 1.2em);
}

main ol {
  margin-left: calc(var(--space-lg) + 2.1em);
}

main li {
  margin-bottom: 0.4em;
  padding-left: 0.35em;
}

/* make numbered markers align nicer instead of drifting visually */
main ol > li::marker {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

main ul > li::marker,
main ol > li::marker {
  color: var(--amber-bright);
}

main code,
main pre {
  color: var(--text-bright);
  background-color: rgba(0, 0, 0, 0.45);
}

main code {
  padding: 1px 4px;
}

main pre {
  padding: var(--space-md);
  overflow-x: auto;
  border-left: 2px solid var(--blue);
}

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

footer {
  margin-bottom: var(--space-lg);
}

.footer {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-md);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);

  font-family: var(--font-main);
  font-size: 12px;
  text-align: left;

  color: var(--text-soft);
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.18));
  border-top: 2px solid var(--blue);
}

.footer h1 {
  color: var(--amber-bright);
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 800px) {
  :root {
    --space-lg: 14px;
    --space-xl: 32px;
  }

  body {
    padding: var(--space-md);
    text-align: left;
  }

  .header h1 {
    font-size: 28px;
  }

  nav {
    padding: var(--space-sm);
  }

  nav p {
    color: transparent; /* hides generated pipe separators */
  }

  nav a {
    display: block;
    width: 100%;
    margin-bottom: var(--space-xs);
    padding: var(--space-sm) var(--space-md);

    color: var(--text-bright);
    background-color: rgba(0, 0, 0, 0.34);
    border: 1px solid var(--amber-dim);
  }

  main > p,
  main > h2,
  main > h3,
  main > h4,
  main > ul,
  main > ol,
  main > blockquote,
  main > pre {
    margin-left: var(--space-md);
    margin-right: var(--space-md);
  }

  main p:has(> img:first-child),
  main p:has(> iframe:first-child) {
    margin-left: 0;
    margin-right: 0;
  }

  main h1 {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    font-size: 19px;
  }

  main h2,
  main h3 {
    width: auto;
  }

  main table {
    font-size: 11px;
  }

  main th,
  main td {
    padding: 6px;
    min-width: 25ch;
  }

  .footer {
    display: block;
  }

  .footer > * {
    margin-bottom: var(--space-md);
  }

  .footer > *:last-child {
    margin-bottom: 0;
  }
}