.mini-pick {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 700px) {
  .mini-pick {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mini-card {
  text-align: left;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: var(--shadow);
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.mini-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}

.mini-card:active {
  background: var(--bg-card);
}

.mini-result {
  margin-top: 1rem;
  padding: 1.15rem;
  border-radius: var(--radius);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  font-size: 0.9375rem;
  white-space: pre-line;
  box-shadow: var(--shadow);
}

.timer-hint {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}