/* Chain-only styling. Everything shared with the daily comes from ../style.css,
   which is NOT edited here: the daily is live, and a chain page that restyled it
   would ship a change nobody asked for to the page that already has players. */

.dailylink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* THE `hidden` ATTRIBUTE DOES NOT BEAT A CLASS THAT SETS `display`.
   The browser's own `[hidden] { display: none }` is less specific than
   `.board { display: grid }`, so hiding the empty grid on a refused link left a
   full-width invisible square in the layout and pushed the explanation most of
   a phone screen below the fold. Visible only in a screenshot: every assertion
   about the refusal passed while the page looked broken. */
#board[hidden],
#keypad[hidden] {
  display: none;
}

/* What was checked before this board was drawn. It sits under the grid rather
   than above it because it is a guarantee, not an instruction: a player needs
   it when they are stuck and wondering whether the board is broken. */
.proof {
  max-width: var(--span);
  text-align: center;
  margin: 6px auto 0;
}

/* The next link is the whole mechanism, so it is a button rather than a line of
   text, and it comes before the share control: finishing hands you another
   board first and asks you to pass one on second. */
.nextlink {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

#nextNote {
  margin: 8px 0 14px;
}

/* The refusal state's way out. Immediately under the explanation, at ordinary
   reading size rather than fine print: it is the only control on a page with no
   board, and the person reading it arrived by following a link that did not
   work. `hidden` wins here because nothing sets `display` on it. */
.recovery {
  max-width: var(--span);
  margin: 10px auto 0;
  text-align: center;
  color: var(--dim);
  font-size: 0.92rem;
}

.recovery a {
  color: var(--accent);
}

footer a {
  color: var(--accent);
}
