/* Detective Sneaky, shared theme tokens
   Imported by the franchise hub, per-case discuss pages, and each case game.
   Palette: manila + ink + redaction red + corkboard.
   Edit ONLY here, never duplicate these values. */

:root {
  --c-bg: #1a1814;
  --c-paper: #ede1c8;
  --c-paper-edge: #d4c39c;
  --c-ink: #1c1a17;
  --c-ink-soft: #4a443a;
  --c-accent: #b13a2e;       /* redaction red */
  --c-stamp: #5b1e16;
  --c-tape: #f3e2a4cc;
  --c-cork: #8a5a32;
  --c-cork-dark: #5e3c1f;
  --font-body: "Special Elite", "Courier New", "Consolas", monospace;
  --font-display: "Crimson Pro", Georgia, "Times New Roman", serif;
  --shadow-paper: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* Chrome bar stays pinned to the top of the viewport on scroll.
   Applies to every DS PHP page that loads this theme (hub, discuss, podcast,
   journalist, instructions, terms). The static game index.html has its own
   chrome layout. Added 2026-05-21. */
#mm-chrome {
  position: -webkit-sticky;  /* iOS Safari requires the prefix for sticky */
  position: sticky;
  top: 0;
  z-index: 100;
  /* will-change hints the compositor to promote this to its own layer, which
     helps iOS Safari keep the bar pinned smoothly during momentum scroll. */
  will-change: transform;
}

/* Mobile chrome: tighten gap + font + padding so the nav fits without crowding.
   Uses body-prefixed selector to win over per-page CSS without !important.
   Added 2026-05-21. */
@media (max-width: 600px) {
  body #mm-chrome {
    gap: 6px;
    padding: 0 8px;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }
  body #mm-chrome .mm-link {
    padding: 2px 3px;
  }
  body #mm-chrome .mm-sep {
    margin: 0;
  }
  /* On the smallest screens (iPhone width), the ‹ Melting-Mindz back link is
     the least essential — collapse to just the arrow + first letter or hide.
     Keeping it visible but the rest of the chrome gets priority. */
  body #mm-chrome .mm-premium-badge {
    font-size: 0.58rem;
    padding: 2px 6px 1px;
    letter-spacing: 0.14em;
  }
}

/* Premium badge — shown beside the detective's name in the chrome bar on
   every DS surface (case games, discuss pages, franchise hub, instructions,
   terms). Single source of truth lives here so styling stays consistent. */
.mm-premium-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px 2px;
  background: var(--c-accent);
  color: var(--c-paper);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  vertical-align: middle;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}