/* Recamán: the arcs, and the grid of numbers the walk skips. */

/* The arcs */

.arcs {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 8px;
  background: var(--paper);
  touch-action: manipulation;
}

.arc-controls {
  display: grid;
  /* A fixed label column, so the slider doesn't shift as the count gains digits. */
  grid-template-columns: 6.5em 1fr;
  align-items: center;
  gap: 12px 16px;
  margin: 16px 0 24px;
}

.arc-controls label {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.arc-keys {
  display: flex;
  grid-column: 1 / -1;
  gap: 10px;
}

.sound[aria-pressed='true'] {
  background: var(--key);
  color: var(--on-key);
  box-shadow: inset 0 -4px 0 color-mix(in srgb, #000 28%, transparent);
}

.machine .verdict {
  margin-top: 20px;
}

/* The grid of gaps */

.gaps-grid {
  display: block;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 50 / 40;
  border-radius: 6px;
  background: var(--paper);
  touch-action: manipulation;
  cursor: crosshair;
}

.legend .count {
  color: var(--ink);
  font-family: var(--print);
}

.legend .count:not(:empty)::before {
  content: '· ';
  color: var(--ink-soft);
}