/* Button hints during play (#72 must 8; Game/HintBar.cs): bigger (--fs-hint, at least 24 px on a
   TV), and fading. The match puts classes on the page root: hint-used-<input> once that input
   was used the right way, hints-faded after 20 s, hints-paused while the pause dialog is up
   (then every hint shows again, over the dimmed game). */

.pg-hints {
  font-size: var(--fs-hint);
  max-width: min(90vw, 60em);
  transition: opacity 0.8s ease;
}

.pg-hints .hint {
  transition: opacity 0.5s ease;
}

.pg-hints .hint:empty {
  display: none;
}

.hints-faded .pg-hints {
  opacity: 0;
  pointer-events: none;
}

.hint-used-k1 .pg-hints [data-hint='k1'],
.hint-used-k2 .pg-hints [data-hint='k2'],
.hint-used-pad .pg-hints [data-hint='pad'],
.hint-used-phone .pg-hints [data-hint='phone'],
.hint-used-touch .pg-hints [data-hint='touch'] {
  /* Hidden, but keeping its room: the HUD bar must not change size mid-game (the board would move). */
  visibility: hidden;
  opacity: 0;
}

/* Paused: the hints sit above the dimmed game so they can be read. */
.hints-paused .pg-hints {
  z-index: 6;
  color: var(--ui-text);
  text-shadow: 0 0.06em 0.3em rgba(0, 0, 0, 0.6);
}

.reduced-motion .pg-hints,
.reduced-motion .pg-hints .hint {
  transition: none;
}

/* With the on-screen touch controls (touch.css) only the touch hint shows, under the top bar,
   clear of the stick and buttons; it fades like the others. */
html:has(#touch) .pg-hints {
  /* Under the phone HUD's bar and chip strip (hud-layout.css), or the round line elsewhere. */
  top: calc(var(--safe-top) + var(--bar-h, 3.4em) + var(--strip-h, 0px) + 6px);
  bottom: auto;
}

html:has(#touch) .pg-hints .hint:not([data-hint='touch']) {
  display: none;
}