/* citradox.com — shared theme for every page on this site.
 *
 * Dressed to match the game: green felt, a torn near-black paper sheet, gold headings.
 *
 * The colours are LIFTED FROM THE PROJECT, not invented, and should stay that way:
 *   --gold   #FAC752   Color(0.98, 0.78, 0.32), the accent behind every highlight in the game
 *   --paper  #0d0f0d   the torn plate fill from scenes/screens/game.tscn
 *   #AF4F00            the torn button's fill, bleeding into the felt at the corners
 *   #00A546            the menu background shader's green
 *
 * NO EXTERNAL REQUESTS, EVER. No web fonts, no CDN, no analytics, no embeds. That is a hard rule
 * rather than a preference: /privacy tells readers this game contacts nobody, and the page saying so
 * has to be true of itself. Pulling a font from Google would ship every visitor's IP to Google — on
 * a privacy policy, of all things, and a practice a German court has already held unlawful without
 * consent. The display font (Jersey 25) is therefore not used at all; body text is a system stack.
 *
 * Legibility outranks theming wherever the two disagree: high-contrast text, barely-there scanlines,
 * and a print stylesheet that strips it all back to black on white, because legal pages get printed.
 */

:root {
  --gold: #FAC752;
  --ink: #e8e6df;
  --paper: #0d0f0d;
  --rule: rgba(250,199,82,.22);
  --muted: rgba(232,230,223,.62);
}
* { box-sizing: border-box; }
html { background: #06170f; }
body {
  margin: 0; padding: 2.5rem 1rem 4rem; min-height: 100vh; color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65; font-size: 1.02rem;
  /* Felt: a soft green field with the menu shader's warm orange bleeding in at the edges. */
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(0,165,70,.20), transparent 60%),
    radial-gradient(90% 70% at 110% 100%, rgba(175,79,0,.20), transparent 55%),
    radial-gradient(80% 60% at -10% 90%, rgba(0,165,70,.13), transparent 55%),
    #06170f;
  background-attachment: fixed;
}
/* Scanlines, very faint — a nod to the in-game CRT overlay, not a re-creation of it. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
}

/* The torn paper sheet. Both pseudo-elements are spent on the torn edges, so anything else that
   wants decoration needs its own class rather than reusing this one. */
.sheet {
  position: relative; max-width: 46rem; margin: 0 auto; padding: 2.75rem 2rem 3rem;
  background: var(--paper); box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
/* Drawn as separate strips rather than clipping .sheet, so the clip can never eat a line of text. */
.sheet::before, .sheet::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--paper);
}
.sheet::before {
  top: -13px;
  clip-path: polygon(0 100%,2% 42%,5% 88%,9% 30%,13% 76%,17% 24%,22% 70%,27% 36%,32% 82%,37% 28%,
    43% 74%,48% 34%,54% 80%,59% 26%,65% 72%,70% 38%,76% 84%,81% 30%,86% 76%,91% 34%,96% 80%,100% 44%,100% 100%);
}
.sheet::after {
  bottom: -13px;
  clip-path: polygon(0 0,3% 60%,8% 14%,12% 70%,18% 22%,23% 66%,28% 18%,34% 74%,39% 26%,45% 68%,
    50% 20%,56% 72%,61% 28%,67% 64%,72% 16%,78% 70%,83% 24%,89% 66%,94% 18%,100% 58%,100% 0);
}

h1 {
  margin: 0 0 .2rem; font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.15;
  color: var(--gold); letter-spacing: .01em; text-shadow: 3px 3px 0 rgba(0,0,0,.85);
}
h2 {
  margin: 2.4rem 0 .6rem; font-size: 1.22rem; color: var(--gold);
  text-shadow: 2px 2px 0 rgba(0,0,0,.8);
  border-bottom: 1px solid var(--rule); padding-bottom: .3rem;
}
.meta { margin: 0 0 1.8rem; color: rgba(232,230,223,.55); font-size: .92rem; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #fff; }
strong { color: #fff; }
ul { padding-left: 1.15rem; }
li { margin: .45rem 0; }
table { border-collapse: collapse; width: 100%; margin: 1.1rem 0; font-size: .96rem; }
th, td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-bottom: 1px solid var(--rule); }
th { color: var(--gold); font-weight: 600; }
tr:last-child td { border-bottom: 0; }

/* --- landing page ------------------------------------------------------- */

.wordmark {
  margin: 0; text-align: center; color: var(--gold);
  font-size: clamp(2.6rem, 11vw, 5rem); line-height: 1; letter-spacing: .14em;
  font-weight: 800; text-shadow: 4px 4px 0 rgba(0,0,0,.85);
}
.tagline { margin: .9rem 0 0; text-align: center; color: var(--muted); }
.game { margin-top: 3rem; text-align: center; }
.game img { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto 1rem; }
.blurb { margin: 0 auto; max-width: 34rem; }
.platforms {
  margin: 1.1rem 0 1.6rem; color: var(--muted); font-size: .92rem; letter-spacing: .04em;
}
/* Torn-paper button, echoing the in-game buttons without pretending to be one. */
.btn {
  display: inline-block; padding: .8rem 2.1rem; background: #AF4F00; color: #fff;
  font-weight: 700; font-size: 1.05rem; text-decoration: none; letter-spacing: .03em;
  border: 3px solid #000; box-shadow: 0 6px 0 rgba(0,0,0,.7); transform: rotate(-1.2deg);
}
.btn:hover { background: #c95c02; color: #fff; }
.footer {
  margin: 3.2rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  text-align: center; color: var(--muted); font-size: .92rem;
}
.footer p { margin: .35rem 0; }

@media (max-width: 34rem) {
  .sheet { padding: 2rem 1.15rem 2.5rem; }
  table, tbody, tr, td, th { display: block; }
  th { border: 0; padding: .5rem .7rem .1rem; }
  td { border: 0; padding: .1rem .7rem; }
  td:first-of-type { color: #fff; }
  tr { border-bottom: 1px solid var(--rule); padding: .45rem 0; }
  tr:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transform: none; }
}
@media print {
  html, body { background: #fff; color: #000; }
  body::after { display: none; }
  .sheet { box-shadow: none; background: #fff; }
  .sheet::before, .sheet::after { display: none; }
  h1, h2, th, a, .wordmark { color: #000; }
  .btn { border-color: #000; background: none; color: #000; box-shadow: none; transform: none; }
}