.filled-item {
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  background-color: #fff;
  font-weight: 700;
  font-size: 40px;
  color: #0c0c0c;

  border: 1px solid #233a92;
}

.to-select {
  width: 51px;
  border-radius: 8.6px;
  cursor: pointer;
  border: none;
}

.error > span::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #b02626;
  box-shadow: 0px 0px 8.5px 0px #b02626;
  pointer-events: none;
  box-sizing: border-box;
}

.success > span::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #59b026;
  box-shadow: 0px 0px 8.5px 0px #59b026;
  pointer-events: none;
  box-sizing: border-box;
}

.highlight > span::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #ffd700e6;
  box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.6);
  box-sizing: border-box;
  pointer-events: none;
  box-sizing: border-box;
  animation: glow-pulse 1.2s ease-in-out infinite;
  z-index: 99;
}

@keyframes glow-pulse {
  0% {
    box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 12px 4px #ffd700e6;
  }
  100% {
    box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.4);
  }
}

@media (max-width: 768px) {
  .filled-item {
    font-size: 32px;
  }
  .error,
  .success {
    border: 1px;
  }
}

@media (max-width: 580px) {
  .filled-item {
    font-size: 20px;
  }
}