/**
 * Fun games — shared layer
 *
 * The Today strip every game page carries above its board. Per-game boards
 * (Sudoku, Wordle, Boggle) use their own `sud-` / `wrd-` / `bog-` prefixes;
 * this file only covers what all three share.
 *
 * Conventions match assets/css/app.css: `ccmg-` prefix, every colour from a
 * `--fw-*` token so light/dark theming is automatic. This codebase does not
 * define `--fw-surface` or `--fw-primary` tokens — the equivalents actually
 * shipped are `--fw-bg-card` (surface) and `--fw-brand-text` (primary/accent),
 * used here to match how `.is-active` states are coloured elsewhere in the app
 * (see app.css `.app-dd__item.is-active`).
 */

.ccmg-today {
  display: flex;
  align-items: center;
  gap: var(--fw-space-md);
  flex-wrap: wrap;
  padding: var(--fw-space-sm) var(--fw-space-md);
  margin-bottom: var(--fw-space-lg);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-card);
}

.ccmg-today__label {
  display: inline-flex;
  align-items: center;
  gap: var(--fw-space-xs);
  flex: 0 0 auto;
  color: var(--fw-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.ccmg-today__label i { color: var(--fw-brand-text); }

.ccmg-today__games {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fw-space-sm);
}

.ccmg-today__game {
  display: inline-flex;
  align-items: center;
  gap: var(--fw-space-xs);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-sm);
  color: var(--fw-text-muted);
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ccmg-today__game:hover { color: var(--fw-text); text-decoration: none; }

.ccmg-today__name { font-weight: 500; }

.ccmg-today__state {
  color: var(--fw-text-muted);
  font-variant-numeric: tabular-nums;
}

/* The current game's own entry in its own strip. */
.ccmg-today__game.is-current {
  border-color: var(--fw-brand-text);
  color: var(--fw-brand-text);
}
.ccmg-today__game.is-current .ccmg-today__state { color: var(--fw-brand-text); }

/* Played today — a stronger foreground than the muted default, not a colour
   change, so "done" reads as "filled in" rather than as a status/alert. */
.ccmg-today__game.is-done .ccmg-today__state { color: var(--fw-text); }

/* Not shipped yet. The games go live one at a time, so the strip renders a game
   that is not in the registry as a plain chip rather than a link — a dashed
   border and a dimmer fill say "coming" without pretending to be clickable.
   ccm_game_today_strip() emits a <span> here, not an <a>, so there is nothing
   to click even with a stylesheet missing. */
.ccmg-today__game.is-pending {
  border-style: dashed;
  opacity: 0.65;
  cursor: default;
}
.ccmg-today__game.is-pending:hover { color: var(--fw-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .ccmg-today__game { transition: none; }
}

@media (max-width: 640px) {
  .ccmg-today { flex-direction: column; align-items: stretch; }
  .ccmg-today__games { gap: var(--fw-space-xs); }
  .ccmg-today__game { flex: 1 1 auto; justify-content: space-between; }
}

/* --- The Today · Week · Month control ---------------------------------------
   Emitted by ccm_game_period_switch() in includes/games.php and driven by
   ccmGames.periodControl() in assets/js/games.js. Shared, like the strip above,
   because all five leaderboard panels carry the identical control.

   Nothing here sets a colour: the switch is `fw-tabs fw-tabs--segmented`, the
   same markup as every game's mode picker, so it takes frikwork's own chrome,
   its `.is-active` treatment and its :focus-visible ring untouched. The one
   exception is the coverage line — see below.

   Neither `hidden` state needs propping up here: assets/css/app.css carries a
   global `[hidden] { display: none !important }` precisely because the UA rule
   on its own loses to author `display` declarations like frikwork's
   `.fw-field { display: flex }`. */

.ccmg-period { margin-top: var(--fw-space-md); }

/* .fw-tabs--segmented is an inline-flex track that scrolls when it runs out of
   room — the same note every game's own -seg block carries. Three periods in a
   panel that is a single narrow column on a phone would become a scroll strip,
   so the track is re-laid as a full-width three-up grid and keeps its chrome. */
.ccmg-period__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow-x: visible;
  width: 100%;
}

/* .fw-help is --fw-text-muted, which is 3.75:1 on a card in the light theme.
   That is fine for the decorative help lines already on these pages; this line
   states how much of the window the figures above it actually cover, which is
   the one thing on an aggregate board a reader must not miss. --fw-text-2 is
   8.9:1 in light and 10.6:1 in dark on --fw-bg-card, so it clears AA in all
   four theme states. Scoped to this class — app.css and the frikwork token
   itself are left alone. */
.ccmg-period__note {
  display: block;
  margin-top: var(--fw-space-xs);
  color: var(--fw-text-2);
}