/* ---------------------------------------------------------------------------
   SITE SHELL — the one implementation of "this is alienarachnid.com".
   Shared by play / board / create / guide. Everything that has to match the
   main site lives HERE and nowhere else.

   Why a shared file at all, in a project whose whole convention is
   self-contained single-file pages: the nav and the ground texture are one
   RULE that four pages have to agree on, and this codebase's signature bug
   is one rule with several implementations and only one of them updated
   (town radius in 17 places, fog radius in 5). A page's own game styles stay
   in the page; only the shell lives here.

   LOAD ORDER MATTERS. The <link> to this file must come AFTER the page's own
   <style> block. Equal specificity resolves by document order, and the body
   background below is deliberately overriding whatever the page declared.

   The texture and the spider are byte-identical copies of the main site's
   (images/bg-texture.jpg, images/logo-spider.png). If either is re-cut over
   there, re-copy — a near-match reads worse than no match, because the seam
   between the two sites is exactly what a visitor is looking at.
   --------------------------------------------------------------------------- */

body {
  /* Ink base, brand glows, then painted stone underneath. Layer order is the
     main site's: gradients on TOP or the violet/acid wash is lost under the
     texture. Tiled at 640px rather than native so the cracks read as grain —
     at native size one crack spans a whole panel and competes with the text. */
  background-color: #0b0710;
  background-image:
    radial-gradient(120% 60% at 12% -8%, rgba(196, 43, 245, .22), transparent 62%),
    radial-gradient(90% 50% at 92% -4%, rgba(164, 230, 25, .06), transparent 58%),
    url("art/bg-texture.jpg");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 640px 640px;
  background-attachment: fixed;
}

/* --- the universal nav ---------------------------------------------------
   Mirrors alienarachnid.com's Header.astro: sticky translucent bar on
   pointer devices, static on phones (a two-row sticky bar eats too much of a
   small screen, and on /board that screen IS the product). */
.sitenav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 7, 16, .85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(196, 43, 245, .25);
}

.sitenav .snin {
  max-width: 1120px;
  margin: 0 auto;
  padding: .9rem 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sitenav .snlogo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: #e26bff;
  text-shadow: 0 0 16px rgba(196, 43, 245, .45);
  white-space: nowrap;
}

.sitenav .snlogo:hover { text-shadow: 0 0 26px rgba(196, 43, 245, .45); }

/* Painted emblem on black — screen blend drops the black square into the bar.
   Same treatment as the main site header. */
.sitenav .snlogo img {
  width: 30px;
  height: 30px;
  mix-blend-mode: screen;
}

.sitenav nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: .92rem;
}

.sitenav nav a {
  color: #eae3f4;
  text-decoration: none;
  white-space: nowrap;
}

.sitenav nav a:hover { color: #c5ff2e; }

/* You are here. Acid rather than magenta so it cannot be mistaken for the
   logo, and so the current page reads at a glance on a bar of six links. */
.sitenav nav a.snhere {
  color: #a4e619;
  text-shadow: 0 0 12px rgba(164, 230, 25, .35);
}

.sitenav nav a.sntwitch {
  color: #a4e619;
  border: 1px solid rgba(164, 230, 25, .4);
  border-radius: 6px;
  padding: .3rem .8rem;
}

.sitenav nav a.sntwitch:hover {
  color: #c5ff2e;
  box-shadow: 0 0 16px rgba(164, 230, 25, .2);
}

@media (max-width: 760px) {
  .sitenav { position: static; }
  .sitenav .snin {
    justify-content: center;
    padding: .6rem 14px .45rem;
  }
  .sitenav .snlogo { font-size: .95rem; }
  .sitenav .snlogo img { width: 24px; height: 24px; }
  .sitenav nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: .1rem 1rem;
    font-size: .85rem;
  }
  .sitenav nav a { padding-block: .4rem; }
  .sitenav nav a.sntwitch { padding: .25rem .7rem; }
}

/* The page's own container gets a little air under the bar. .wrap is the
   shared name across play / board / create / guide. */
.sitenav + .wrap { padding-top: 20px; }