.blunder-hunt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.blunder-hunt__prompt {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}

/* One column (phones, narrow windows): the board leaves room for the prompt and the scrolling buttons.
   The subtracted rem value sums header, rating filter, prompt, the button row and page padding. */
.blunder-hunt .board {
  --board-size: min(90vw, 560px, max(16rem, calc(100svh - 23rem)));
}

@media (min-width: 40rem) {
  .blunder-hunt .board {
    --board-size: min(560px, max(16rem, calc(100svh - 20rem)));
  }
}

.blunder-hunt__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: var(--board-size, 100%);
  min-width: 0;
}

.blunder-hunt__nav {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.blunder-hunt__nav button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 2px solid #788590;
  border-radius: 0.4rem;
  background: #fff;
  color: #17212b;
  cursor: pointer;
  font-size: 1rem;
}

.blunder-hunt__nav button:not(:disabled):hover,
.blunder-hunt__nav button:focus-visible {
  border-color: #2860a5;
}

.blunder-hunt__nav button:disabled {
  cursor: default;
  opacity: 0.5;
}

.move-list {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-content: start;
  width: 100%;
  max-height: 11rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-family: monospace;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 0.4rem;
}

.move-list__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

.move-list__number {
  padding: 0.15rem 0.5rem;
  color: #57606a;
}

.move-list__move,
.move-list__placeholder {
  padding: 0.15rem 0.5rem;
  text-align: left;
}

.move-list__move {
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: #1f2328;
  cursor: pointer;
  font: inherit;
}

.move-list__move:hover,
.move-list__move:focus-visible {
  background: #eaeef2;
}

.move-list__move.is-own {
  font-weight: 700;
}

.move-list__move.is-current {
  background: #263d5a;
  color: #fff;
}

.move-list__placeholder {
  color: #57606a;
}

.blunder-hunt__message {
  margin: 0;
  min-height: 1.5em;
  text-align: center;
}

.blunder-hunt__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Wide screens: board on the left, buttons and the move list beside it. */
@media (min-width: 55rem) {
  .blunder-hunt {
    display: grid;
    grid-template-columns: auto minmax(16rem, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0.75rem 1.5rem;
  }

  .blunder-hunt__prompt {
    grid-column: 1 / -1;
    text-align: left;
  }

  .blunder-hunt .board {
    grid-column: 1;
    grid-row: 2;
    /* header + rating filter + prompt + page padding */
    --board-size: min(560px, max(16rem, calc(100svh - 14rem)));
  }

  .blunder-hunt__side {
    grid-column: 2;
    grid-row: 2;
    align-items: stretch;
    width: auto;
  }

  .blunder-hunt__nav,
  .blunder-hunt__controls {
    justify-content: flex-start;
  }

  .blunder-hunt__message {
    text-align: left;
  }

  .move-list {
    max-height: calc(var(--board-size) - 6rem);
  }
}

.move-list__move.is-checked {
  color: #57606a;
}

.move-list__move.is-current.is-checked {
  color: #fff;
}

.move-list__move.is-blunder {
  background: #fde7e7;
  color: #b3261e;
}

.move-list__move.is-current.is-blunder {
  background: #b3261e;
  color: #fff;
}

.move-list__mark {
  margin-left: 0.25rem;
  font-size: 0.8em;
}

.move-list__move.is-checked .move-list__mark {
  color: #1a7f37;
}

.move-list__move.is-current .move-list__mark {
  color: inherit;
}

.blunder-hunt__controls button {
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 2px solid #788590;
  border-radius: 0.4rem;
  background: #fff;
  color: #17212b;
  cursor: pointer;
  font: inherit;
  white-space: normal;
}

.blunder-hunt__controls button:not(:disabled):hover,
.blunder-hunt__controls button:focus-visible {
  border-color: #2860a5;
}

.blunder-hunt__controls button:disabled {
  cursor: default;
  opacity: 0.5;
}

.blunder-hunt__controls kbd {
  margin-left: 0.25rem;
  padding: 0 0.3rem;
  border: 1px solid #d0d7de;
  border-radius: 0.25rem;
  font-size: 0.8em;
}

.blunder-hunt__resolved {
  display: flex;
  flex-wrap: wrap;
  justify-content: inherit;
  gap: 0.75rem;
}

.blunder-hunt__resolved[hidden],
.blunder-hunt__pick[hidden] {
  display: none;
}

.blunder-hunt[data-state=refuting] .move-list {
  opacity: 0.5;
  pointer-events: none;
}

.blunder-hunt__refuting {
  display: flex;
  flex-wrap: wrap;
  justify-content: inherit;
  gap: 0.75rem;
}

.blunder-hunt__refuting[hidden] {
  display: none;
}

.blunder-hunt__link-button,
.blunder-hunt__next {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 2px solid #788590;
  border-radius: 0.4rem;
  color: #17212b;
  text-decoration: none;
}

.blunder-hunt__next {
  justify-self: start;
  width: fit-content;
  background: #2860a5;
  border-color: #2860a5;
  color: #fff;
}

.blunder-hunt__link-button:hover,
.blunder-hunt__link-button:focus-visible {
  border-color: #2860a5;
}

.blunder-hunt__summary {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.blunder-hunt__summary p {
  margin: 0;
}

.blunder-hunt__summary-result {
  font-weight: 600;
}

.blunder-hunt__losses-label {
  color: #57606a;
  font-size: 0.85em;
}

.blunder-hunt__losses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.1rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
}

.blunder-hunt__loss-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.blunder-hunt__loss-row.is-blunder {
  color: #b3261e;
  font-weight: 600;
}

.blunder-hunt__summary-meta {
  font-size: 0.9em;
}

.blunder-hunt__summary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.blunder-hunt__save-error {
  margin: 0.5rem 0;
  color: #b3261e;
}