/* RP Minigames: shared tokens, base styles, header and footer.
   Game pages add their own stylesheet on top of this one. */

:root {
  color-scheme: light;
  --hdr: 56px;
  --page: 1100px;

  --desk: #d8dde5;
  --desk-dot: #c2c9d5;
  --win: #f6f7f9;
  --win-line: #182031;
  --win-shadow: 0 30px 70px -28px rgba(24, 32, 49, 0.55), 0 2px 0 rgba(24, 32, 49, 0.06);
  --bar: #182031;
  --bar-ink: #eef1f6;
  --bar-muted: #8e99af;
  --field: #1f2b42;
  --field-line: rgba(255, 255, 255, 0.05);
  --scrim: rgba(12, 17, 27, 0.5);
  --tile: #f1e8d6;
  --tile-rim: #cbbd9d;
  --tile-ink: #182031;
  --tile-shadow: rgba(4, 8, 16, 0.45);
  --ink: #182031;
  --muted: #4b5467;
  --line: #bfc7d4;
  --accent: #e39a2d;
  --accent-ink: #7a4f0c;   /* accent as text on light backgrounds */
  --ok: #1f7a45;
  --ok-rim: #14532f;
  --bad: #b8342c;
  --bad-rim: #82211b;
  --on-state: #ffffff;
  --btn: #182031;
  --btn-ink: #f6f7f9;
  --focus: #2f6fd6;
  --focus-field: #6ea4ff;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --desk: #0d1119;
    --desk-dot: #1b2231;
    --win: #151b26;
    --win-line: #2b3446;
    --win-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8);
    --bar: #0a0e15;
    --bar-ink: #e5e9f0;
    --bar-muted: #7c879b;
    --field: #111b2c;
    --field-line: rgba(255, 255, 255, 0.04);
    --scrim: rgba(3, 6, 12, 0.6);
    --tile: #ebe2cf;
    --tile-rim: #b6a887;
    --tile-ink: #182031;
    --tile-shadow: rgba(0, 0, 0, 0.6);
    --ink: #e5e9f0;
    --muted: #97a1b4;
    --line: #273043;
    --accent: #f0b04d;
    --accent-ink: #f0b04d;
    --ok: #36a866;
    --ok-rim: #217a47;
    --bad: #e0524a;
    --bad-rim: #a8322b;
    --on-state: #0d1119;
    --btn: #e5e9f0;
    --btn-ink: #0d1119;
    --focus: #6ea4ff;
    --focus-field: #6ea4ff;
  }
}

@media (max-height: 540px) {
  :root { --hdr: 44px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--desk);
  scroll-padding-top: var(--hdr);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--desk);
  color: var(--ink);
  font: 15px/1.5 "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 32px);
  margin-inline: auto;
  padding-inline: 16px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #182031;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: none;
  height: var(--hdr);
  background: var(--bar);
  color: var(--bar-ink);
}
.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: var(--bar-ink);
}
.site-brand-mark { display: grid; grid-template-columns: repeat(2, 8px); gap: 2px; flex: none; }
.site-brand-mark i { width: 8px; height: 8px; border-radius: 2px; background: var(--tile); }
.site-brand-mark i:nth-child(2) { background: var(--ok); }
.site-brand-name {
  font: 400 15px/1 "Bungee", "Arial Black", Impact, sans-serif;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--bar-muted);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--bar-ink); background: rgba(255, 255, 255, 0.07); }

/* ---------- Buttons ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border: 1.5px solid var(--btn);
  border-radius: 10px;
  background: var(--btn);
  color: var(--btn-ink);
  font: 600 15px/1 "Figtree", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: translateY(1px); }
.cta-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.cta-quiet:hover { border-color: var(--ink); }

/* ---------- Game page notes (how to play, tips) ---------- */
.notes { border-top: 1px solid var(--line); }
.notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 48px;
  padding-block: 40px 48px;
}
.notes h2 {
  margin: 0 0 12px;
  font: 400 18px/1.15 "Bungee", "Arial Black", Impact, sans-serif;
  letter-spacing: 0.02em;
}
.notes ol,
.notes ul { display: grid; gap: 8px; margin: 0; padding-left: 1.3em; max-width: 60ch; color: var(--muted); }
.notes li::marker { color: var(--ink); font-weight: 700; }
@media (max-width: 760px) {
  .notes-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Simple pages (404) ---------- */
.plain {
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  padding-block: 64px;
  background-image: radial-gradient(circle, var(--desk-dot) 1px, transparent 1.5px);
  background-size: 20px 20px;
}
.plain-card { max-width: 460px; text-align: center; }
.plain-code {
  margin: 0 0 10px;
  font: 600 12px/1 "Martian Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}
.plain h1 { margin: 0 0 12px; font: 400 clamp(26px, 5vw, 36px)/1.1 "Bungee", "Arial Black", Impact, sans-serif; }
.plain p { margin: 0 0 24px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer {
  flex: none;
  margin-top: auto;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px 26px;
}
.site-footer p { margin: 0; max-width: 62ch; }
.site-footer strong { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}