.simon-board {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  aspect-ratio: 1;
  max-width: 460px;
  margin: 0 auto 16px;
  padding: 16px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 32px;
  box-shadow: 0 0 72px 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.simon-pad {
  border: 4px solid var(--bg);
  cursor: pointer;
  transition: filter 0.1s, transform 0.1s;
}

.simon-pad:active { transform: scale(0.98); }

.simon-pad[data-key="red"] {
  background: #b53737;
  border-radius: 200px 16px 16px 16px;
}
.simon-pad[data-key="blue"] {
  background: #2c5fb0;
  border-radius: 16px 200px 16px 16px;
}
.simon-pad[data-key="yellow"] {
  background: #c79a26;
  border-radius: 16px 16px 16px 200px;
}
.simon-pad[data-key="green"] {
  background: #2f9657;
  border-radius: 16px 16px 200px 16px;
}

.simon-pad.lit { filter: brightness(2.2) saturate(1.3); }
.simon-pad:disabled { cursor: not-allowed; opacity: 0.85; }

.simon-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32%;
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  border: 4px solid var(--bg);
  pointer-events: none;
}