/*
 * Chrome shared by every artifact: the page column, the status line, the
 * buttons, the score and record rows. Anything specific to one board lives in
 * that artifact's own stylesheet.
 */

.game {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 5vw, 2.5rem);
}

.game__intro h1 {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Scores ----------------------------------------------------------------- */

.scores {
  display: flex;
  gap: clamp(1.5rem, 5vw, 2.5rem);
}

.score {
  text-align: center;
}

.score dt {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.score dd {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.score--small dd {
  font-size: 1.125rem;
}

/* Status ----------------------------------------------------------------- */

.status {
  /* Full width above the controls, and reserved so a result shifts nothing. */
  grid-column: 1 / -1;
  min-height: 1.6em;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}

.status--solved {
  color: var(--ink);
  font-weight: 500;
}

/* Buttons ---------------------------------------------------------------- */

.button {
  font: inherit;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease),
    transform 0.12s var(--ease),
    opacity 0.2s var(--ease);
}

.button--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.button:hover:not(:disabled) {
  border-color: var(--ink-faint);
  background: #fff;
  color: var(--ink);
}

.button--primary:hover:not(:disabled) {
  background: #2b3038;
  border-color: #2b3038;
  color: var(--paper);
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

.button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Quiet enough to stay out of the way, still a full-sized target. */
.button--quiet {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  background: none;
  border-color: transparent;
  min-width: 6.5rem;
}

.button--quiet:hover:not(:disabled) {
  background: none;
  border-color: var(--line);
}

.button--quiet.is-armed,
.button.is-armed {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The next round is the only thing left to do once a round is over. */
.game.is-solved .button--primary,
.game.is-over .button--primary {
  box-shadow: 0 0 0 4px rgba(59, 110, 165, 0.14);
}

/* Record ----------------------------------------------------------------- */

.record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem clamp(1rem, 4vw, 2rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.record__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem clamp(1.25rem, 5vw, 2.5rem);
}

.hint {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

@media (hover: none) and (pointer: coarse) {
  /* Nothing to press a key with. */
  .hint--keyboard {
    display: none;
  }
}