.simon-wrap{
  width:100%;
  display:grid;
  gap:18px;
}

.simon-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  background:#fffa85;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 12px;
}

.simon-settings,
.simon-stats{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.simon-settings label{
  font-weight:900;
  text-transform:uppercase;
  font-size:.82rem;
}

.simon-settings select{
  border:2px solid var(--line);
  border-radius:10px;
  background:white;
  color:var(--line);
  padding:8px 10px;
  font-weight:900;
}

.simon-btn{
  border:2px solid var(--line);
  border-radius:12px;
  background:#ffd32a;
  color:var(--line);
  box-shadow:3px 3px 0 var(--line);
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
  font-size:.86rem;
}

.simon-btn.primary{
  background:#2ed573;
}

.simon-btn.danger{
  background:#ff4757;
  color:white;
}

.simon-pill{
  background:white;
  border:2px solid var(--line);
  border-radius:10px;
  box-shadow:3px 3px 0 var(--line);
  padding:7px 10px;
  font-weight:900;
  font-size:.86rem;
}

.simon-message{
  min-height:48px;
  text-align:center;
  font-size:.98rem;
  font-weight:900;
  color:#111;
  background:#ff9ff3;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.simon-stage{
  display:flex;
  justify-content:center;
  align-items:center;
}

.simon-board{
  width:min(84vw,520px);
  aspect-ratio:1 / 1;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:16px;
  position:relative;
  background:#111;
  border:5px solid var(--line);
  border-radius:50%;
  box-shadow:9px 9px 0 var(--line);
  padding:18px;
}

.simon-pad{
  border:4px solid #111;
  cursor:pointer;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.18);
  transition:filter .12s ease, transform .12s ease;
}

.simon-pad:disabled{
  cursor:not-allowed;
  filter:grayscale(.4);
}

.simon-pad.green{
  background:#2ed573;
  border-radius:100% 16px 16px 16px;
}

.simon-pad.red{
  background:#ff4757;
  border-radius:16px 100% 16px 16px;
}

.simon-pad.yellow{
  background:#ffd32a;
  border-radius:16px 16px 16px 100%;
}

.simon-pad.blue{
  background:#0984e3;
  border-radius:16px 16px 100% 16px;
}

.simon-pad.active{
  filter:brightness(1.65);
  transform:scale(.97);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.35),
    0 0 28px rgba(255,255,255,.85);
}

.simon-pad.error{
  background:#111 !important;
  animation:simonError .16s linear 0s 5;
}

.simon-center{
  position:absolute;
  inset:50%;
  width:150px;
  height:150px;
  transform:translate(-50%,-50%);
  background:#fff8e7;
  border:5px solid var(--line);
  border-radius:50%;
  box-shadow:6px 6px 0 var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  z-index:5;
}

.simon-center strong{
  font-size:1.65rem;
  font-weight:900;
  text-transform:uppercase;
}

.simon-center span{
  font-size:.9rem;
  font-weight:900;
}

@keyframes simonError{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-4px)}
  100%{transform:translateX(0)}
}

.game-frame{
  padding:14px !important;
}

@media(max-width:560px){
  .simon-board{
    gap:10px;
    padding:12px;
  }

  .simon-center{
    width:118px;
    height:118px;
  }

  .simon-center strong{
    font-size:1.25rem;
  }
}