/* Button hints during play (#72 must 8; Game/HintBar.cs): bigger (--fs-hint, at least 24 px on a
   TV). The controls of the keys, the gamepads and the phones stay for the whole match (#860); the
   goal's line and the touch hint fade. The match puts classes on the page root: hint-used-touch
   once the touch controls were 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);
  /* As wide for the hints as before: the outer margins of the hints come on top (below). On a big
     screen the cards stand in a band above the hints however wide they are (hud-layout.css), so the
     bar keeps this width on a TV too: kept between the columns it wrapped into more rows, and a
     taller bar leaves the cards less room (#443's limit, which the band replaces). */
  max-width: calc(min(90vw, 60em) + 1.1em);
  /* The last row's margin is taken back, so a bar is exactly as tall as before (the HUD's insets,
     the camera's framing) while its rows lie as before. */
  margin-bottom: -0.25em;
  transition: opacity 0.8s ease;
}

/* Each input's hint is a block of its own on the line, 1.1em apart, rows 0.25em apart (a flex
   bar's gaps; app.css). */
.pg-hints .hint {
  display: inline-block;
  max-width: 100%;
  margin: 0 0.55em 0.25em;
  vertical-align: top;
  transition: opacity 0.5s ease;
}

/* At big text (or on a short screen) a key cap or a pad badge no taller than its row (as the
   coach's line), so a row of hints is one line of text high and the hints keep to the bottom (#428). */
:root:is([data-fit='narrow'], [data-fit-y='short']) .pg-hints kbd {
  padding-top: 0;
  padding-bottom: 0;
  line-height: calc(1.2 * var(--line-k));
  vertical-align: 0.05em;
}

:root:is([data-fit='narrow'], [data-fit-y='short']) .pg-hints .pb {
  min-width: calc(1.2em * var(--line-k));
  height: calc(1.2em * var(--line-k));
  vertical-align: 0.05em;
}

/* A turn's box (Game/HintBar.cs) takes no part in the layout but at big text (hud-layout.css). */
.pg-hints .hint-turn {
  display: contents;
}

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

/* 20 s in: the controls stay, a little quieter; the goal's line and the touch hint go. */
.hints-faded .pg-hints {
  opacity: 0.8;
}

.hints-faded .pg-hints :is([data-hint='general'], [data-hint='touch']),
.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 var(--shadow);
}

.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;
}

/* The touch hint is the only one: no room round it. */
html:has(#touch) .pg-hints {
  margin-bottom: 0;
}

html:has(#touch) .pg-hints .hint {
  margin: 0;
}