/* ── shared site styles ─────────────────────────────────────────────── */

:root {
  --bg:#f7ece1; --surface:#fdf5ea; --fg:#1d1712;
  --dim:#8c7f70; --dimmer:#c1b3a3;
  --accent:#ccf73f; --accent-ink:#5e7d0f;
  --line:rgba(29,23,18,.14); --line-strong:rgba(29,23,18,.30);
  --disp:"Bricolage Grotesque",sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
::selection { background:var(--accent); color:var(--fg); }
a { color:inherit; text-decoration:none; }

/* noise overlay (light pages) */
body.noise::after {
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ── status bar ─────────────────────────────────────────────────────── */
.status {
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:12px clamp(18px,3.5vw,56px);
  font-family:var(--mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--line);
  background:rgba(247,236,225,.88); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:40;
}
.status .sig { font-weight:600; color:var(--fg); }
.status .sig:hover { color:var(--accent-ink); }
.status a { color:inherit; transition:color .2s; }
/* Absolutely centre the nav in the bar so the left label and the right
   (dark toggle + clock) group can't bias the links off-centre. */
.status nav { display:flex; gap:18px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.status nav a { color:var(--dim); }
.status nav a:hover, .status nav a.active { color:var(--accent-ink); }
#clock { color:var(--dimmer); }
@media(max-width:640px) { .status nav { display:none; } }

/* dark status variant — add class="status dark" on game pages */
.status.dark {
  position:static; flex-shrink:0;
  color:rgba(255,255,255,.28);
  border-bottom-color:rgba(255,255,255,.07);
  background:rgba(8,8,7,.92);
}
.status.dark .sig { color:rgba(255,255,255,.6); }
.status.dark .sig:hover, .status.dark nav a:hover, .status.dark nav a.active { color:var(--accent); }
.status.dark #clock { color:rgba(255,255,255,.18); }

/* minigolf/rts use fixed positioning — add class="status fixed-bar" */
.status.fixed-bar { position:fixed; top:0; left:0; right:0; z-index:100; }

/* ── dark mode ──────────────────────────────────────────────────────── */
html.dark {
  --bg:#141210; --surface:#1c1916; --fg:#ede3d8;
  --dim:#8c7f70; --dimmer:#4a4540;
  --accent:#ccf73f; --accent-ink:#b0d428;
  --line:rgba(237,227,216,.1); --line-strong:rgba(237,227,216,.22);
}
html.dark body.noise::after { opacity:.12; }
html.dark .status {
  background:rgba(20,18,16,.9);
  border-bottom-color:rgba(237,227,216,.08);
  color:rgba(237,227,216,.35);
}
html.dark .status .sig { color:rgba(237,227,216,.7); }
html.dark .status .sig:hover,
html.dark .status nav a:hover,
html.dark .status nav a.active { color:var(--accent); }
html.dark .status nav a { color:rgba(237,227,216,.35); }
html.dark #clock { color:rgba(237,227,216,.22); }

#dark-toggle {
  margin-left:auto;   /* nav is absolute, so this pushes the toggle + clock together on the right */
  background:none; border:1px solid var(--line-strong); color:var(--dim);
  font-family:var(--mono); font-size:.75rem; cursor:pointer;
  padding:2px 8px; border-radius:3px; transition:color .15s,border-color .15s;
  letter-spacing:0; text-transform:none;
}
#dark-toggle:hover { color:var(--fg); border-color:var(--line-strong); }
html.dark #dark-toggle,
.status.dark #dark-toggle { color:rgba(237,227,216,.4); border-color:rgba(237,227,216,.18); }
html.dark #dark-toggle:hover,
.status.dark #dark-toggle:hover { color:rgba(237,227,216,.8); }