/* Shared sub-mode label CSS (per HEADER_SPECS / MODE_TAXONOMY).
 *
 * The shared header's mode-row shows only the four standardized top-level
 * pills: Solo / Vs CPU / Group in Person / Remote Online. Pass & Play and
 * Multi-Device are sub-modes of Group in Person and never appear at the top
 * level — but until Multi-Device ships, every Group in Person pill implicitly
 * means Pass & Play, and that's not obvious to users.
 *
 * This file styles a small <span class="sub-mode-label"> placed alongside the
 * Group in Person pill. It appears below the active Group in Person pill (or
 * always, on static single-mode games like Celebrity / LCR) and stays hidden
 * when another top-level mode is active.
 *
 * Color: inherited + 65% opacity, so it works on both light and dark themes
 * without per-game overrides.
 *
 * Active-state detection: matches games using aria-pressed, .selected,
 * .active, or .is-active on the GiP pill. data-mode is usually "pass-play"
 * (per shared convention) but Tic Tac Toe uses data-mode="player" — both
 * supported. MASH uses .mash-mode-pill[data-mode="group"] — also supported.
 */

.sub-mode-label {
  display: none;
  width: 100%;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.65;
  margin-top: 1px;
  margin-left: 4px;
}

/* Use descendant :has() (no `>`) so the sub-label can live as a sibling of
   either the buttons (Four in a Row, Pig pattern) or the .mode-indicator
   wrapper (WordChain, BotorNot pattern). */
.mode-row:has(.mode-btn[data-mode="pass-play"][aria-pressed="true"]) .sub-mode-label,
.mode-row:has(.mode-btn[data-mode="pass-play"].selected) .sub-mode-label,
.mode-row:has(.mode-btn[data-mode="pass-play"].active) .sub-mode-label,
.mode-row:has(.mode-btn[data-mode="pass-play"].is-active) .sub-mode-label,
.mode-row:has(.mode-btn[data-mode="player"][aria-pressed="true"]) .sub-mode-label,
.mode-row:has(.mode-btn[data-mode="player"].active) .sub-mode-label,
.mode-row:has(.mash-mode-pill[data-mode="group"].is-active) .sub-mode-label,
/* Static-mode games (Celebrity, LCR): no .mode-btn anywhere — always show */
.mode-row:not(:has(.mode-btn)):not(:has(.mash-mode-pill)) .sub-mode-label {
  display: block;
}