/* Open Secret — the game's own world, carried across all three site themes.
 *
 * Scoped to `.page-open-secret` so nothing here can leak into the rest of the site,
 * the same containment WordCrew uses with `.page-play`.
 *
 * THREE FILES, AND THE ORDER IS THE CASCADE: base, screens, chrome. This was
 * one 744-line stylesheet — split at the section comments it already carried,
 * every boundary checked to sit at brace depth zero, and the three proved to
 * join back into exactly the bytes the single file held. open-secret/index.html lists
 * them in that sequence and AFTER the site's seven, because the game overrides
 * the site palette rather than replacing it.
 *
 *   base      the three theme palettes, the stage, the atoms
 *   screens   S01 home, S02/S04 setup, S03/S05 lobby, the round
 *   chrome    the instruction line, the intro, the theme control, arriving by
 *             a link, the toast, and the spacing rules under all of it
 *
 * THE PALETTE COMES FROM THE SCREEN FLOW, with two deliberate departures, both
 * forced rather than chosen:
 *
 * 1. FONTS. The handoff specifies Staatliches, Space Grotesk and Courier Prime.
 *    All three are Google Fonts, and this site makes no external request of any
 *    kind — the privacy policy promises it and the CSP enforces it. So the
 *    nearest self-hosted equivalents stand in: Chakra Petch for the stencilled
 *    display caps, Exo 2 for body, Share Tech Mono for the typewriter voice the
 *    case-file look depends on.
 *
 * 2. THE OUTSIDER RED. The handoff's #D14B3F measures 4.22:1 on its own background
 *    and 3.74:1 on a panel — under AA, on the colour used to tell somebody they
 *    are the Outsider. It is lifted to #F0796A (6.74 / 5.98), and the button built
 *    from it takes DARK ink rather than white, which is the same trick
 *    WordCrew's mid-tone tiles use. Every ratio in this file was computed, not
 *    estimated.
 *
 * The third theme is the interesting one. The handoff already drew Outsider's light
 * palette without meaning to: the document itself is a manila case file —
 * cream paper, typewriter ink, olive-drab, oxide-red stamp. Daylight is that,
 * which is why it looks deliberate rather than like a dark theme with the
 * lights turned on.
 */

/* ---------------- DAYLIGHT — the case file itself ----------------
   Measured on --bg: ink 12.22, muted 5.46, signal 4.76, outsider 5.41, ok 5.07.
   The accent is ochre rather than the handoff's amber because amber on cream
   cannot reach 4.5, and the oxide red is kept for the Outsider so the two never
   compete for the same meaning. */
.page-open-secret {
  --bg: #efe7d5;          /* manila */
  --panel: #f8f2e3;       /* the lighter sheet */
  --raised: #fffcf3;
  --ink: #2a2620;         /* typewriter */
  --muted: #5e5d44;       /* olive-drab */
  --rule: #cfc4a9;
  --signal: #8a5b12;      /* ochre — actions, timers */
  --signal-soft: #b98a3a;
  --outsider: #a8322a;         /* oxide stamp */
  --ok: #3f6b34;
  --on-signal: #fff8ec;   /* 5.55 on --signal */
  --on-outsider: #fff8ec;      /* 6.31 on --outsider */

  --shadow-1: 0 2px 0 rgba(42, 38, 32, 0.10);
  --shadow-card: 4px 4px 0 rgba(42, 38, 32, 0.12);

  /* The site's shared components read these, so header, footer, dialogs and
     form controls belong to the same world rather than sitting on top of it. */
  --paper: var(--panel);
  --surface: var(--panel);
  --bright: var(--ink);
  --bdr: var(--rule);
  --bdr2: var(--rule);
  --edge: var(--rule);
  --accent: var(--signal);
  --accent-ink: var(--signal);
  --accent-2: var(--signal);
  --accent-2-ink: var(--signal);
  --field-bg: var(--raised);
  --field-fg: var(--ink);
  --field-ph: var(--muted);
  --field-bdr: var(--rule);
  --field-bdr-hover: var(--signal);
  --field-bdr-focus: var(--signal);
  --field-shadow: none;
  --field-ring: 0 0 0 3px color-mix(in srgb, var(--signal) 28%, transparent);
  --btn-bg: var(--signal);
  --btn-fg: var(--on-signal);

  --font-display: "Chakra Petch", "Orbitron", sans-serif;
  --font-body: "Exo 2", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, monospace;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  transition: background 0.35s ease;
  color-scheme: light;
}

/* ---------------- DEEP — the handoff's own night palette ----------------
   Measured on --bg: ink 15.72, muted 6.01, signal 10.07, outsider 6.74, ok 8.85.
   Button ink: 10.34 on signal, 6.68 on outsider. */
:root[data-theme="deep"] .page-open-secret,
:root[data-theme="midnight"] .page-open-secret {
  --bg: #101418;
  --panel: #1a2027;
  --raised: #242c35;
  --ink: #e9edf1;
  --muted: #8a94a0;
  --rule: #2c3540;
  --signal: #efb63f;
  --signal-soft: #8a6f2c;
  --outsider: #f0796a;
  --ok: #7bc47f;
  --on-signal: #141005;
  --on-outsider: #2b0906;

  --shadow-1: 0 2px 0 rgba(0, 0, 0, 0.30);
  --shadow-card: 0 10px 24px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

/* ---------------- MIDNIGHT — colder and further down ----------------
   Measured on --bg: ink 16.77, muted 6.41, signal 11.63, outsider 7.91, ok 10.46. */
:root[data-theme="midnight"] .page-open-secret {
  --bg: #07090c;
  --panel: #0f1318;
  --raised: #171d24;
  --ink: #e7ecf1;
  --muted: #8a939e;
  --rule: #232b34;
  --signal: #f2be4e;
  --signal-soft: #8e7233;
  --outsider: #f58275;
  --ok: #86cc8a;
  --on-signal: #12100a;
  --on-outsider: #2a0805;
}

/* ================= stage ================= */

.page-open-secret main { padding: 0 16px 56px; }

/* The cap exists for screens a thumb has to reach across. The lobby escapes
   it, the way WordCrew's does, because a roster and an invite box want the
   room. */
.os-stage {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.page-open-secret.is-lobby .os-stage { max-width: 940px; }

.os-titlebar { padding-top: 14px; }
.os-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.os-back {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 5px 10px;
}
.os-back:hover { color: var(--ink); border-color: var(--signal); }

.os-mark { text-align: center; }
/* Sized for ELEVEN characters, not three. The game was called Outsider and this was
   clamp(30px, 8vw, 44px) at 0.16em, which is ~290px of wordmark at the small
   end — wider than a 320px screen once the 16px page padding is taken off, so
   OPEN SECRET overflowed where OUTSIDER had room to spare. The tracking comes down
   with the size because letter-spacing is the part that scales badly with
   length: at 0.16em it adds a whole extra character's width every six. */
.os-mark h1 {
  font-family: var(--font-display);
  font-size: clamp(22px, 6.2vw, 34px);
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
}
/* Named os-* because site.css owns a global `.dot` — a carousel indicator,
   9px with an accent border. A bare `.dot` here inherited it and drew a ring
   around the full stop, and would have ringed every presence dot too. */
.os-mark h1 .os-dot { color: var(--outsider); }
.os-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 0;
}

/* ================= atoms ================= */

.os-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.os-lead { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }

.os-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--signal);
  color: var(--on-signal);
  cursor: pointer;
  width: 100%;
}
.os-btn:hover { filter: brightness(1.06); }
.os-btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.os-btn.ghost:hover { border-color: var(--signal); filter: none; }
.os-btn.danger { background: var(--outsider); color: var(--on-outsider); }
.os-btn.small { width: auto; padding: 9px 14px; font-size: 13px; }

.os-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-1);
}

.os-chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.os-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 5px 11px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.os-chip[aria-pressed="true"], .os-chip.on {
  color: var(--signal);
  border-color: var(--signal);
}
.os-chip.emoji { font-size: 18px; line-height: 1; padding: 6px 9px; }

.os-field { display: flex; flex-direction: column; gap: 6px; }
.os-field input {
  background: var(--field-bg);
  border: 1.5px solid var(--field-bdr);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--ink);
  font: inherit;
  font-size: 16px;   /* 16px or iOS zooms the page on focus */
  width: 100%;
}
.os-field input:focus-visible {
  outline: none;
  border-color: var(--field-bdr-focus);
  box-shadow: var(--field-ring);
}
.os-hint { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }