.mod-simon .simon-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.mod-simon .simon-pad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  width: 140px;
  height: 140px;
  padding: 8px;
  border-radius: 10px;
  background: var(--panel-dark, #1b1b1b);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
  transform: rotate(45deg);
}

.mod-simon .simon-btn {
  border: 2px solid rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  filter: brightness(0.45) saturate(0.8);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.35), inset 0 3px 5px rgba(255, 255, 255, 0.2);
  transition: filter 60ms linear, box-shadow 60ms linear;
  touch-action: manipulation;
}

.mod-simon .simon-btn:focus-visible {
  outline: 3px solid var(--c-white, #f2f2f2);
  outline-offset: 2px;
}

.mod-simon .simon-btn.is-lit,
.mod-simon .simon-btn.is-pressed {
  filter: brightness(1.25) saturate(1.1);
  box-shadow: 0 0 16px currentColor, inset 0 0 10px rgba(255, 255, 255, 0.5);
}

.mod-simon .simon-red { background: var(--c-red, #d0281f); color: var(--c-red, #d0281f); }
.mod-simon .simon-blue { background: var(--c-blue, #1f5fd1); color: var(--c-blue, #1f5fd1); }
.mod-simon .simon-green { background: var(--c-green, #2bd14a); color: var(--c-green, #2bd14a); }
.mod-simon .simon-yellow { background: var(--c-yellow, #f5d000); color: var(--c-yellow, #f5d000); }