.simon-wrap{
  max-width:520px;
}

.simon-board{
  position:relative;
  width:300px;
  height:300px;
  margin:40px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:12px;
}

.pad{
  cursor:pointer;
  background:rgba(255,255,255,0.04);
  border:2px solid rgba(255,255,255,0.1);
  transition:background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.pad:active{transform:scale(0.97);}

.pad[data-color="cyan"]{
  border-radius:100% 14px 14px 14px;
  border-color:rgba(63,242,255,0.35);
  background:rgba(63,242,255,0.08);
}
.pad[data-color="magenta"]{
  border-radius:14px 100% 14px 14px;
  border-color:rgba(192,77,255,0.35);
  background:rgba(192,77,255,0.08);
}
.pad[data-color="warn"]{
  border-radius:14px 14px 14px 100%;
  border-color:rgba(255,210,63,0.35);
  background:rgba(255,210,63,0.08);
}
.pad[data-color="success"]{
  border-radius:14px 14px 100% 14px;
  border-color:rgba(77,255,160,0.35);
  background:rgba(77,255,160,0.08);
}

.pad[data-color="cyan"].lit{background:var(--cyan);box-shadow:0 0 44px rgba(63,242,255,0.9);border-color:var(--cyan);}
.pad[data-color="magenta"].lit{background:var(--magenta);box-shadow:0 0 44px rgba(192,77,255,0.9);border-color:var(--magenta);}
.pad[data-color="warn"].lit{background:var(--warn);box-shadow:0 0 44px rgba(255,210,63,0.9);border-color:var(--warn);}
.pad[data-color="success"].lit{background:var(--success);box-shadow:0 0 44px rgba(77,255,160,0.9);border-color:var(--success);}

.pad.disabled{cursor:not-allowed;}

.simon-center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:104px;
  height:104px;
  border-radius:50%;
  background:#050813;
  border:2px solid rgba(63,242,255,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--cyan);
  cursor:pointer;
  z-index:5;
  box-shadow:0 0 22px rgba(63,242,255,0.3);
  transition:box-shadow .2s ease;
  padding:6px;
}
.simon-center:hover{box-shadow:0 0 32px rgba(63,242,255,0.5);}

.restart-btn{
  display:none;
  margin:34px auto 0;
}
.restart-btn.show{display:inline-flex;}

@media (max-width:420px){
  .simon-board{width:260px;height:260px;}
  .simon-center{width:88px;height:88px;font-size:11px;}
}