.rating-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.rating-filter input[type="number"] {
  width: 6rem;
}

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

.trainer__prompt {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.trainer__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  min-height: 2.5rem;
}

.trainer__move,
.trainer__show-refutation,
.trainer__hint,
.trainer__show-solution,
.trainer__skip-refutation,
.trainer__next-exercise,
.trainer__next {
  min-width: 5rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid #788590;
  border-radius: 0.4rem;
  background: #fff;
  color: #17212b;
  cursor: pointer;
  font-size: 1rem;
}

.trainer__move {
  font-family: monospace;
}

.trainer__move:hover,
.trainer__move:focus-visible {
  border-color: #2860a5;
}

.trainer[data-state="revealed"] .trainer__move.is-good {
  background: #ddf5e3;
  border-color: #2d8a48;
}

.trainer[data-state="revealed"] .trainer__move.is-blunder {
  background: #fde4e3;
  border-color: #b93939;
}

.trainer__move.is-selected {
  outline: 3px solid #263d5a;
  outline-offset: 2px;
}

.trainer__move:disabled,
.trainer__hint:disabled,
.trainer__show-solution:disabled {
  cursor: default;
}

.trainer__hint:disabled,
.trainer__show-solution:disabled {
  opacity: 0.6;
}

.trainer__show-refutation,
.trainer__hint,
.trainer__next {
  background: #263d5a;
  border-color: #263d5a;
  color: #fff;
}

.trainer__show-refutation:hover,
.trainer__show-refutation:focus-visible,
.trainer__hint:not(:disabled):hover,
.trainer__hint:focus-visible,
.trainer__next:hover,
.trainer__next:focus-visible {
  background: #36577c;
  border-color: #36577c;
}

.trainer__show-solution:not(:disabled):hover,
.trainer__show-solution:focus-visible,
.trainer__skip-refutation:hover,
.trainer__skip-refutation:focus-visible,
.trainer__next-exercise:hover,
.trainer__next-exercise:focus-visible {
  border-color: #2860a5;
}

.trainer__summary {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  max-width: 36rem;
  text-align: center;
}

.trainer__summary p {
  margin: 0;
}

.trainer__summary-result {
  font-weight: 700;
}

.trainer__summary-evals {
  font-family: monospace;
  font-size: 1.1rem;
}

.trainer__summary-meta {
  display: grid;
  gap: 0.25rem;
}

.trainer__summary-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.trainer__next {
  display: inline-block;
  text-decoration: none;
}

.trainer__message {
  margin: 0;
  min-height: 3em; /* two lines reserved, so the controls do not jump when a message appears or wraps */
  text-align: center;
}

/* One column (phones, narrow windows): the board leaves room for the message and the controls below it.
   The subtracted rem value sums header, rating filter, prompt, the reserved message lines, two rows of
   controls (the revealed stage on a phone) and page padding. It keeps the message and the main action
   on screen; the second row (secondary actions) and the finished summary may need scrolling on a short
   phone viewport. */
.trainer .board {
  --board-size: min(90vw, 560px, max(16rem, calc(100svh - 23rem)));
}

/* Wider single column: the revealed buttons fit in one row, so less height is reserved. */
@media (min-width: 40rem) {
  .trainer .board {
    --board-size: min(560px, max(16rem, calc(100svh - 20rem)));
  }
}

/* Wide screens: board on the left, prompt/message/controls/summary beside it, so the feedback stays on
   screen on a 13" laptop (viewport ~757 px) without shrinking the board. */
@media (min-width: 55rem) {
  .trainer {
    display: grid;
    grid-template-columns: auto minmax(16rem, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: 0.75rem 1.5rem;
  }

  .trainer .board {
    grid-column: 1;
    grid-row: 1 / span 3;
    /* header + rating filter + page padding; the prompt is no longer above the board */
    --board-size: min(560px, max(16rem, calc(100svh - 10rem)));
  }

  .trainer__prompt,
  .trainer__message,
  .trainer__controls {
    grid-column: 2;
  }

  .trainer__message {
    text-align: left;
  }

  .trainer__controls {
    justify-content: flex-start;
  }

  .trainer__summary {
    justify-items: start;
    text-align: left;
  }

  .trainer__summary-links {
    justify-content: flex-start;
  }
}

.empty-state pre {
  overflow-x: auto;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #d0d7de;
}