/* Sandbox / analysis page: setup panel, board, and engine panel. */
.sandbox-page { width: min(100% - 2rem, 80rem); margin-inline: auto; padding-block: 1rem; }

.sandbox-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) auto minmax(15rem, 1fr);
  grid-template-areas: "setup board engine";
  gap: 1.25rem;
  align-items: start;
}
.sandbox-setup { grid-area: setup; }
.sandbox-board { grid-area: board; min-width: 0; }
.sandbox-engine { grid-area: engine; }

.sandbox-panel {
  padding: 1rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.sandbox-panel h1, .sandbox-panel h2 { margin: 0 0 0.75rem; }
.sandbox-panel h1 { font-size: 1.25rem; }
.sandbox-panel h2 { font-size: 1rem; }
.sandbox-panel + .sandbox-panel { margin-top: 1rem; }
.sandbox-panel .muted { color: #666; }

.sandbox-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1rem; }
.sandbox-tabs button { padding: 0.5rem; font: inherit; font-size: 0.875rem; background: white; border: 1px solid #ccc; cursor: pointer; }
.sandbox-tabs button[aria-selected="true"] { font-weight: bold; background: #e6e6e6; }

.sandbox-field { margin-bottom: 0.75rem; }
.sandbox-field label { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: bold; }
.sandbox-field select, .sandbox-field input { width: 100%; padding: 0.5rem; font: inherit; }
.sandbox-field input { font-family: ui-monospace, monospace; font-size: 0.75rem; }

.sandbox-button { width: 100%; margin-bottom: 0.5rem; padding: 0.5rem; font: inherit; background: #eee; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.sandbox-button:hover:not(:disabled) { background: #e0e0e0; }
.sandbox-button:disabled { color: #999; cursor: default; }
.sandbox-error { min-height: 1.2em; margin: 0.25rem 0; color: #a31515; font-size: 0.875rem; }

.tool-move { margin-bottom: 0.5rem; }
.tool-button[aria-pressed="true"] { outline: 3px solid #2459a6; outline-offset: -3px; }
.piece-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-bottom: 0.5rem; background: #b58863; padding: 2px; }
.piece-palette button { aspect-ratio: 1 / 1; padding: 0; font-size: 1.6rem; background: #f0d9b5; border: 0; cursor: pointer; }

.sandbox-status { min-height: 1.4em; margin: 0 0 0.5rem; font-weight: bold; }
.sandbox-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.sandbox-nav button { min-width: 2.75rem; width: auto; margin: 0; padding: 0.5rem 0.75rem; }

.engine-toggle { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.engine-evaluation { min-height: 3em; margin: 0 0 0.75rem; padding: 0.5rem; background: #f5f5f5; border-radius: 4px; font-size: 0.875rem; }
.best-moves { margin: 0; padding-left: 1.5rem; font-size: 0.875rem; }
.best-moves li { padding: 0.15rem 0; }
.best-moves li span { display: inline-block; min-width: 4rem; }

.move-list { display: grid; grid-template-columns: auto 1fr 1fr; gap: 0.125rem 0.25rem; align-items: center; max-height: 20rem; overflow-y: auto; font-size: 0.875rem; }
.move-list .muted { grid-column: 1 / -1; margin: 0; }
.move-number { color: #666; }
.move-button { padding: 0.2rem 0.35rem; font: inherit; text-align: left; background: none; border: 0; border-radius: 3px; cursor: pointer; }
.move-button:hover { background: #eee; }
.move-button[aria-current] { font-weight: bold; background: #dbe7f7; }
/* A position with Black to move starts in the Black column. */
.move-button-black-first { grid-column: 3; }

@media (max-width: 75rem) {
  .sandbox-layout {
    grid-template-columns: auto minmax(15rem, 1fr);
    grid-template-areas:
      "board engine"
      "setup engine";
  }
}

/* Phones and small tablets: board first, then its analysis, then the setup tools. */
@media (max-width: 56rem) {
  .sandbox-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "board" "engine" "setup";
  }
  .sandbox-board { justify-self: center; }
}