/* Simon: four quarter pads around a round hub. */
.simon { position: relative; width: min(100%, 440px); aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 10px; }
.simon-pad {
  border: 0; padding: 0; cursor: pointer; position: relative;
  opacity: .42; transition: opacity .12s, transform .12s; -webkit-tap-highlight-color: transparent;
}
.simon-pad.green { background: var(--green); border-radius: 100% 14px 14px 14px; }
.simon-pad.red { background: var(--red); border-radius: 14px 100% 14px 14px; }
.simon-pad.yellow { background: var(--yellow); border-radius: 14px 14px 14px 100%; }
.simon-pad.blue { background: var(--blue); border-radius: 14px 14px 100% 14px; }
.simon-pad:hover { opacity: .55; }
.simon-pad.lit { opacity: 1; transform: scale(.985); }
.simon.showing .simon-pad { cursor: default; }
.simon.over .simon-pad { opacity: .22; }
.simon-pad:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.simon-key { position: absolute; font-size: 13px; color: rgba(0, 0, 0, .45); font-weight: 500; }
.simon-pad.green .simon-key { right: 16px; bottom: 12px; }
.simon-pad.red .simon-key { left: 16px; bottom: 12px; }
.simon-pad.yellow .simon-key { right: 16px; top: 12px; }
.simon-pad.blue .simon-key { left: 16px; top: 12px; }
.simon-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--panel); border: 12px solid var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 8px;
}
.simon-msg { font-size: 15px; color: var(--dim); line-height: 1.25; }
@media (max-width: 640px) { .simon-hub { border-width: 8px; } .simon-msg { font-size: 13px; } .simon-hub .btn { padding: 7px 12px; font-size: 13px; } }