/* Shroud site — the app's monochrome LCD look, on the web. */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=VT323&display=swap');

:root {
  --bg: #909e6a;      /* lit screen */
  --bg2: #7f8d5a;     /* darker */
  --ink: #1b2312;     /* dark pixels */
  --fill: #3a4a26;    /* primary fill */
  --dim: #3e4a28;     /* faded ink */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 1.25rem;
  line-height: 1.5;
  position: relative;
  overflow-x: hidden;
}
/* Scanlines + vignette — the LCD surface */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background:
    repeating-linear-gradient(0deg, rgba(20,26,12,0.12) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 40%, transparent 60%, rgba(20,26,12,0.28) 100%);
  mix-blend-mode: multiply;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 40px 22px 80px; position: relative; z-index: 1; }

h1, h2, h3, .kick, nav a, .btn {
  font-family: 'Silkscreen', monospace;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.wordmark { font-size: clamp(2.6rem, 12vw, 5rem); font-weight: 700; letter-spacing: 0.14em; margin: 0; }
.tagline { font-size: clamp(1.2rem, 4vw, 1.7rem); color: var(--dim); margin: 6px 0 0; }
.kick { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--dim); display: block; margin: 34px 0 6px; }
h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); margin: 0 0 4px; }
h2 { font-size: 1.05rem; letter-spacing: 0.1em; margin: 40px 0 8px; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--fill); }

/* Bishop mark + hero */
header { text-align: center; padding-top: 6vh; }
.bishop { width: 84px; height: 84px; margin: 0 auto 10px; }
.bishop svg { width: 100%; height: 100%; fill: var(--ink); }

/* Pixel-corner frames */
.frame {
  border: 3px solid var(--ink);
  padding: 18px 20px;
  margin: 18px 0;
  background: rgba(27,35,18,0.04);
}
.btn {
  display: inline-block; margin: 22px 8px 0;
  padding: 14px 26px; font-size: 1rem;
  border: 3px solid var(--ink); color: var(--ink);
  text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
}
.btn.primary { background: var(--fill); color: var(--bg); }
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

/* Feature list */
ul.feat { list-style: none; padding: 0; margin: 10px 0; }
ul.feat li { padding: 6px 0 6px 26px; position: relative; }
ul.feat li::before { content: "▸"; position: absolute; left: 4px; color: var(--fill); }

/* Screenshot strip */
/* One hero board instead of phone screenshots: a reveal moment with two
   strange armies, generated from the game's own sprites (scripts/make-hero.js). */
.hero-board { text-align: center; margin: 26px 0 8px; }
.hero-board img {
  width: min(520px, 100%); border: 3px solid var(--ink);
  image-rendering: pixelated; box-shadow: 6px 6px 0 rgba(27,35,18,0.35);
}
.hero-cap { text-align: center; color: var(--dim); font-size: 0.95rem; margin: 10px 0 0; }

nav { text-align: center; margin: 40px 0 0; font-size: 0.8rem; }
nav a { margin: 0 10px; }
footer { text-align: center; color: var(--dim); font-size: 0.95rem; margin-top: 46px; }
.meta { color: var(--dim); font-size: 1rem; margin: 0 0 26px; }
.back { display: inline-block; margin-bottom: 20px; font-size: 0.8rem; }