.simon-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(340px, 100%);
}

.simon-pad {
  aspect-ratio: 1;
  border: 2px solid rgba(17, 24, 39, 0.18);
  border-radius: var(--radius-lg);
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    box-shadow 120ms ease;
}

.simon-green { background: #16a34a; }
.simon-red { background: #dc2626; }
.simon-yellow { background: #f59e0b; }
.simon-blue { background: #2563eb; }

.simon-pad:hover,
.simon-pad:focus-visible {
  opacity: 0.75;
}

.simon-pad.is-lit {
  opacity: 1;
  transform: scale(1.03);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55), var(--shadow-md);
}

.simon-board.is-showing .simon-pad {
  cursor: default;
}