/* ============================================================
 * Connect the Thoughts — shared "theme of the day" intro card + banner.
 *
 * CANONICAL SOURCE. Edit only here (connectthethoughts/shared/), then run
 *   node scripts/sync-shared.mjs
 * to vend copies into each game repo. `--check` flags drift.
 *
 * Two pieces, both driven by the shared ArcadeDaily theme picker:
 *   1. The once-per-day reveal card (a .modal .theme-reveal-card overlay).
 *   2. The persistent one-line banner (#daily-theme) shown above the board in
 *      Daily mode.
 * Chrome (.modal-backdrop / .modal / .modal-close-x / .btn) comes from the
 * already-shared chrome.css + arcade-components.css.
 * ============================================================ */

/* "Today's theme" reveal card (Daily, once per day). */
.theme-reveal-card { text-align: center; }
.theme-reveal-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.35rem;
}
.theme-reveal-name {
  font-size: 1.6rem;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--accent);
}
.theme-reveal-rule { font-size: 1.02rem; margin: 0 0 0.5rem; }
.theme-reveal-quip {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--fg-muted);
  margin: 0 0 1rem;
}
.theme-reveal-actions { display: flex; gap: 8px; margin-top: 12px; }
.theme-reveal-actions .btn { flex: 1; }

/* Theme-of-the-day banner (Daily mode) — one compact line above the board. */
.daily-theme {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 4px 0;
}
.daily-theme[hidden] { display: none; }
.daily-theme-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.daily-theme-blurb {
  font-size: 12px;
  color: var(--fg-subtle);
  min-width: 0;
}

/* Hide the banner while the on-screen keyboard is up (kb-safe app shell). */
html.kb-open #daily-theme { display: none !important; }