/* SQ_GAME_FEEDBACK_CSS_1_1_101
   Strong result feedback: chosen wrong answer red, correct answer green,
   and a green winner-frame pulse around the question card. */

#answers button.sq-answer-correct-1100,
.answers button.sq-answer-correct-1100,
#answers button.correct {
  position: relative;
  border: 2px solid #42ee93 !important;
  background: linear-gradient(180deg, rgba(41,176,101,.34), rgba(18,92,57,.30)) !important;
  box-shadow: 0 0 0 1px rgba(66,238,147,.35), 0 0 20px rgba(66,238,147,.58) !important;
  color: #f5fff9 !important;
}

#answers button.sq-answer-correct-1100::after {
  content: "\2713";
  margin-left: auto;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #42ee93;
  color: #06170d;
  font-weight: 1000;
  font-size: 16px;
  box-shadow: 0 0 14px rgba(66,238,147,.65);
}

#answers button.selected.sq-answer-wrong-1100,
.answers button.selected.sq-answer-wrong-1100,
#answers button.selected.wrong {
  position: relative;
  border: 2px solid #ff5368 !important;
  background: linear-gradient(180deg, rgba(210,48,70,.38), rgba(100,20,34,.34)) !important;
  box-shadow: 0 0 0 1px rgba(255,83,104,.32), 0 0 20px rgba(255,83,104,.55) !important;
  color: #fff8f9 !important;
}

#answers button.selected.sq-answer-wrong-1100::after {
  content: "\2715";
  margin-left: auto;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ff5368;
  color: #fff;
  font-weight: 1000;
  font-size: 15px;
  box-shadow: 0 0 14px rgba(255,83,104,.60);
}

.center-question.sq-player-win-159 {
  border: 2px solid rgba(66,238,147,.92) !important;
  animation: sqWinnerFrame1100 .38s ease-in-out 0s 6 alternate !important;
}

#answers button.sq-win-flash-159,
#answers button.sq-answer-correct-1100.sq-win-flash-159 {
  animation: sqWinnerAnswer1100 .34s ease-in-out 0s 6 alternate !important;
}

@keyframes sqWinnerFrame1100 {
  from { box-shadow: 0 0 0 1px rgba(66,238,147,.25), 0 12px 36px rgba(0,0,0,.35); }
  to { box-shadow: 0 0 0 3px rgba(66,238,147,.92), 0 0 34px rgba(66,238,147,.88), 0 0 64px rgba(66,238,147,.42); }
}
@keyframes sqWinnerAnswer1100 {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.04); filter: brightness(1.45) saturate(1.25); }
}

@media (max-width: 1200px) and (orientation: landscape) {
  #answers button.sq-answer-correct-1100::after,
  #answers button.selected.sq-answer-wrong-1100::after {
    width: 21px;
    height: 21px;
    font-size: 13px;
  }
}