/* Styles for the pages AROUND the game — the landing page, the about page and
   the privacy policy.
   Deliberately a separate sheet from style.css. That one is a full-screen game
   HUD: it sets `overflow: hidden` on the document, pins panels to viewport
   corners and assumes nothing ever scrolls. These are ordinary documents that
   scroll, reflow and get read, and sharing a stylesheet between the two would
   mean every rule in either one having to say which world it belongs to.
   The palette is the game's, so the site reads as the same thing. */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  background: #0a0a12;
  color: #d8d5cb;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  line-height: 1.65;
}

a { color: #9adfff; }
a:hover { color: #cfefff; }

.wrapPage {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 72px;
}

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

header.siteHead {
  border-bottom: 1px solid #23232f;
  background: linear-gradient(180deg, rgba(18, 20, 32, 0.9), rgba(10, 10, 18, 0.9));
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(4px);
}

.headInner {
  max-width: 860px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #f4d35e;
  text-decoration: none;
  white-space: nowrap;
}

nav.siteNav {
  display: flex;
  gap: 18px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

nav.siteNav a { text-decoration: none; color: #8d93a8; }
nav.siteNav a:hover, nav.siteNav a[aria-current='page'] { color: #9adfff; }

/* --- Hero ------------------------------------------------------------------ */

.hero {
  padding: 54px 0 34px;
  text-align: center;
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 7vw, 60px);
  letter-spacing: 8px;
  text-indent: 8px;
  color: #f4d35e;
}

.hero p.tagline {
  margin: 0 auto 26px;
  max-width: 44ch;
  font-size: 17px;
  color: #b9b5aa;
}

.playBtn {
  display: inline-block;
  padding: 15px 46px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  color: #0a0a12;
  background: linear-gradient(180deg, #a8ee86, #6fc44f);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(110, 200, 90, 0.28);
}

.playBtn:hover { color: #0a0a12; filter: brightness(1.1); }

.heroNote {
  margin-top: 14px;
  font-size: 13px;
  color: #7c8192;
}

/* --- Body copy ------------------------------------------------------------- */

main h2 {
  margin: 42px 0 12px;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9adfff;
  border-bottom: 1px solid #23232f;
  padding-bottom: 8px;
}

main h3 {
  margin: 26px 0 6px;
  font-size: 16px;
  color: #f4d35e;
}

main p, main li { color: #c6c2b8; }
main ul { padding-left: 22px; }
main li { margin-bottom: 7px; }

.lead { font-size: 17px; color: #d8d5cb; }

.featureGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.feature {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #23232f;
  border-radius: 7px;
}

.feature h3 { margin-top: 0; }
.feature p { margin-bottom: 0; font-size: 14.5px; }

/* --- Ad slots -------------------------------------------------------------- */
/* Content pages only. Given real prose above and below them, with no game
   controls anywhere near, which is the whole reason the ads live here rather
   than on the playfield. Labelled and given a minimum height so the page does
   not jump when a unit fills. */
.adSlot {
  margin: 40px 0;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.adSlot::before {
  content: 'Advertisement';
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5d6272;
}

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

footer.siteFoot {
  border-top: 1px solid #23232f;
  padding: 26px 20px 40px;
  text-align: center;
  font-size: 13px;
  color: #7c8192;
}

footer.siteFoot nav {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

footer.siteFoot a { color: #8d93a8; text-decoration: none; }
footer.siteFoot a:hover { color: #9adfff; }

/* The two links that leave the site, on their own row under the page nav
   rather than in it: they are a different kind of destination, and mixing an
   invite and a tip jar in among Home/Play/Privacy reads as five more pages. */
footer.siteFoot nav.footOut {
  margin: 0 0 14px;
  font-weight: bold;
}

footer.siteFoot nav.footOut a { color: #a08bd8; }
footer.siteFoot nav.footOut a:hover { color: #c9a7ff; }
footer.siteFoot nav.footOut a + a { color: #d8a860; }
footer.siteFoot nav.footOut a + a:hover { color: #f4d35e; }

/* --- Outbound buttons ------------------------------------------------------
   Deliberately NOT .playBtn. There is one green button on this site and it
   starts the game; anything else wearing that shape is competing with it for
   the one click the page is asking for. These are outlined and carry their
   service's own colour instead. */
.linkRow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.outBtn {
  display: inline-block;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.02);
}

.outBtn.discord { color: #a08bd8; }
.outBtn.discord:hover { color: #c9a7ff; background: rgba(160, 139, 216, 0.12); }
.outBtn.coffee { color: #d8a860; }
.outBtn.coffee:hover { color: #f4d35e; background: rgba(216, 168, 96, 0.12); }