/* Cover round: circle sizes, tool buttons, and the result that replaces both when the round ends. */

.circle-tray {
  min-height: 64px;
  margin: var(--space-1) 0 var(--space-3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.tray-item {
  display: grid;
  grid-template-rows: 40px auto;
  justify-items: center;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 500;
  transition: opacity 0.2s ease;
}

/* The tray circle uses its tone: pastel fill with a stroke in the same hue, like on the board. */
.tray-circle {
  width: calc(36px * var(--scale));
  height: calc(36px * var(--scale));
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

.tray-item.active {
  color: var(--ink);
}

.tray-item.active .tray-circle {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink);
}

.tray-item.used {
  opacity: 0.35;
}

.game-actions,
.result-actions {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.game-actions {
  grid-template-columns: 1fr 1.2fr 1fr;
}

.game-actions .soft-btn,
.result-actions button {
  min-height: 56px;
}

.status-button {
  pointer-events: none;
}

/* Result: same height as the tray above the board and the buttons below it, so nothing moves. */
.cover-result,
.result-actions {
  display: none;
}

.is-complete .circle-tray,
.is-complete .game-actions {
  display: none;
}

.is-complete .cover-result {
  min-height: 64px;
  margin: var(--space-1) 0 var(--space-3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  animation: result-in 0.25s ease;
}

.is-complete .result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  animation: result-in 0.25s ease;
}

.result-actions button {
  padding: 0 var(--space-2);
  white-space: nowrap;
}

@keyframes result-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.result-kicker {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
}

.result-kicker.success {
  color: var(--good-text);
}

.result-kicker.failure {
  color: var(--danger-text);
}

.result-value {
  display: block;
  font-size: var(--text-h1);
  line-height: 1.15;
}

@media (max-height: 760px) {
  .circle-tray,
  .is-complete .cover-result {
    min-height: 52px;
    margin: 0 0 var(--space-2);
  }

  .tray-item {
    grid-template-rows: 34px auto;
  }

  .tray-circle {
    width: calc(30px * var(--scale));
    height: calc(30px * var(--scale));
    min-width: 24px;
    min-height: 24px;
  }

  .result-value {
    font-size: var(--text-h2);
  }

  .game-actions,
  .result-actions {
    margin-top: var(--space-2);
  }

  .game-actions .soft-btn,
  .result-actions button {
    min-height: 48px;
  }
}

@media (max-height: 640px) {
  .game-actions .soft-btn,
  .result-actions button {
    min-height: 44px;
  }
}

@media (max-width: 350px) {
  .result-actions button {
    font-size: var(--text-small);
  }
}