/* Site topbar, for the games.
   ---------------------------------------------------------------
   The game pages don't load base.css: each one declares its own
   cream/dark palette on :root, which would otherwise repaint the
   shared header. So instead of forking the header, this file re-
   declares the site design tokens *scoped to the header itself*.
   /css/header.css is then used unmodified and the bar renders
   exactly as it does on every other page.

   .nav-dd-panel is scoped too because js/header.js appends the
   dropdown to <body>, outside .topbar, so it can't inherit.

   Load order on a game page:
     fonts.css -> header.css -> game-topbar.css -> inline <style>
   Everything here is scoped to the header, so the inline game
   styles that follow can't be affected by it. */

.topbar,
.nav-dd-panel {
  --paper:        #e6f5ee;
  --paper-white:  #f4faf6;
  --ink:          #1a3a2a;
  --ink-dim:      #4a6859;
  --ink-faint:    #8aa599;

  --riso-pink:        #ff7eb6;
  --riso-pink-deep:   #e3589c;
  --riso-green:       #2db876;
  --riso-green-deep:  #1a8a55;

  --line: rgba(26, 58, 42, 0.16);

  --font-display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
}

/* The handful of base.css normalisations the header depends on.
   Scoped, so the game's own content keeps its own rules. */
.topbar a,
.nav-dd-panel a { color: inherit; text-decoration: none; }
.topbar img,
.topbar svg { display: block; max-width: 100%; }

/* Dark mode: the site itself has no dark theme, but the games do, and a
   bright mint bar above a dark page reads as broken. Keep the identical
   layout and riso accents, restated on the games' dark paper. Both
   triggers are mirrored from the game pages: the explicit toggle wins,
   otherwise fall back to the OS preference. */
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .nav-dd-panel {
  --paper:        #172420;
  --paper-white:  #1e2e29;
  --ink:          #ede9da;
  --ink-dim:      #c6c8b9;
  --ink-faint:    #8a988e;

  --riso-pink:        #ff73ad;
  --riso-pink-deep:   #ff8fbe;
  --riso-green:       #43d69c;
  --riso-green-deep:  #6fe5b8;

  --line: rgba(237, 233, 218, 0.2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar,
  :root:not([data-theme="light"]) .nav-dd-panel {
    --paper:        #172420;
    --paper-white:  #1e2e29;
    --ink:          #ede9da;
    --ink-dim:      #c6c8b9;
    --ink-faint:    #8a988e;

    --riso-pink:        #ff73ad;
    --riso-pink-deep:   #ff8fbe;
    --riso-green:       #43d69c;
    --riso-green-deep:  #6fe5b8;

    --line: rgba(237, 233, 218, 0.2);
  }
}

/* The paper grain multiplies, which turns to mud on dark paper.
   Screen it back at low opacity instead, matching how the games
   handle their own grain layer. */
:root[data-theme="dark"] .topbar::after {
  mix-blend-mode: screen;
  opacity: 0.14;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar::after {
    mix-blend-mode: screen;
    opacity: 0.14;
  }
}

/* The games pin a floating theme toggle to the viewport; clear the
   sticky header so the two don't overlap.

   Qualified with :root deliberately. The game pages disagree about
   where their inline <style> sits relative to their <link>s - lineage
   puts it before, the rest after - so a bare .theme-toggle would win
   on some pages and lose on others. :root .theme-toggle outranks the
   games' own .theme-toggle rule on specificity, so source order stops
   mattering. */
:root .theme-toggle { top: 5.2rem; }
@media (max-width: 760px) { :root .theme-toggle { top: 4.6rem; } }
@media (max-width: 480px) { :root .theme-toggle { top: 5.4rem; } }
