/* Shared chrome for every Pixel Eyes module.
   ------------------------------------------------------------------
   The palette is taken from spades.neighborhoodgames.app, not invented, so
   this reads as part of the same family (PIXEL_EYES.md §3). It used to be
   duplicated inline in the converter; it lives here now because a second
   module means a second chance for the two to drift.

   This file is versioned in every <link> the same way core.js and zip.js are
   versioned in every import — see PIXEL_EYES.md §7. Cloudflare's zone serves
   .css with max-age=14400 and .html with max-age=0, so an unversioned
   stylesheet hands a returning visitor a new page with four-hour-old styling.
   Bump the token here and in all three pages together. */

:root {
  color-scheme: dark;
  --bg: #090a08;
  --surface: #0b0c0a;
  --raised: #151612;
  --line: rgba(255, 255, 255, .14);
  --text: #f2eee5;
  --muted: #aaaaaa;
  --accent: #ff4b2b;
}

* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 Arial, sans-serif; background: var(--bg); color: var(--text); }

/* ---------- module header (converter, npc) ---------- */

header { padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
         display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
header img { height: 30px; width: auto; display: block; image-rendering: pixelated; }
header h1 { font-size: 15px; margin: 0; letter-spacing: .02em; }
header span { color: var(--muted); font-size: 12px; }
/* the module tag distinguishes this tool from the rest of the all-in-one
   asset suite — a hairline pill, same idiom as a fieldset legend, not a
   filled badge */
header .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
              color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
              padding: 3px 9px; white-space: nowrap; }
/* pushed to the far end so it never sits between the wordmark and the tag,
   where it would read as part of the title rather than as navigation */
header .home { margin-left: auto; color: var(--muted); font-size: 12px; text-decoration: none;
               border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; }
header .home:hover { color: var(--text); border-color: var(--text); }

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

.landing { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
           justify-content: center; gap: 34px; padding: 48px 20px 64px; text-align: center; }
.landing .mark { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.landing .mark img { width: min(340px, 74vw); height: auto; display: block;
                     image-rendering: pixelated; }
.landing .mark h1 { margin: 0; font-size: 30px; letter-spacing: .22em; text-transform: uppercase; }
.landing .mark p { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .04em; }

/* Two-up on desktop, stacked on a phone. auto-fit rather than a fixed count
   so a third module drops in without touching this rule. */
.modules { display: grid; gap: 18px; width: 100%; max-width: 620px;
           grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* The tile idiom is neighborhoodgames.app's — a large rounded raised square
   with a hairline — in Pixel Eyes' own colours rather than the hub's gold. */
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
        background: var(--raised); border: 1px solid var(--line); border-radius: 18px;
        padding: 22px 22px 24px; text-align: left; text-decoration: none; color: var(--text);
        transition: border-color .12s ease, transform .12s ease, background .12s ease; }
.tile:hover { border-color: rgba(255, 255, 255, .32); background: #191a15; transform: translateY(-2px); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tile strong { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.tile span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }