.quiz-25[data-state="complete"] .quiz-25--button,
.quiz-25[data-state="complete"] .quiz-25--bingo button,
.quiz-25--bingo button,
.quiz-25[data-state="ing"] .quiz-25--group .quiz-25--button{
  pointer-events: none;
}
.quiz-25[data-state="ing"] .quiz-25--group .quiz-25--button{
  filter: grayscale(1);
  opacity: .3;
}
.quiz-25 .quiz-25--bingo button {
  pointer-events: none;
}
.quiz-25[data-state="ing"] .quiz-25--bingo button {
  pointer-events: visible;
}
.quiz-25 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rem;
  width: 60rem;
  margin: 7rem auto 3rem;
}
.quiz-25--bingo button {
  position: relative;
}
.quiz-25--bingo button > span {
  position: relative;
  z-index: 1;
}
.quiz-25--bingo button[data-selected="true"]::after{
  opacity: 1;
}
.quiz-25--bingo button::after{
  content:"";
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  background: url(./images/check.svg) no-repeat 50% 50% / 5.6rem;
  z-index: 0;
  opacity: 0;
  transition: opacity 300ms ease;
}
[data-state="bingo"] .bingo {
  display: block;
}
[data-state="x"] .wrong {
  display: block;
}
.bingo{
  position: absolute;
  top: 8rem;
  left: 5rem;
  width: 17.8rem;
  z-index: 3;
  display: none;
}
.bingo img{width: 100%;}
.wrong{
  position: absolute;
  top: 8.8rem;
  left: 6.8rem;
  width: 13.6rem;
  z-index: 3;
  display: none;
}
.wrong img{width: 100%;}
/* .quiz-25--bingo button.on::after{
  content:"";
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  background: url(./images/bingo.svg) no-repeat 50% 50% / 5.6rem;
} */
.quiz-25--group2 {
  position: relative;
  display: flex;
  width: 28.4rem;
  height: 27rem;
  background: url(./images/img2.svg) no-repeat 50% 50% / 28.4rem;
  padding: 5.2rem 1.1rem 1.6rem 1.5rem;
}
.quiz-25--bingo {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
.quiz-25--bingo button {
  width: 33.33%;
  /* aspect-ratio: 1/1; */
  /* border: .1rem solid #000; */
  margin: -.1rem 0 0 -.1rem;
}
.quiz-25--group{
  position: relative;
  height: 6rem;
  flex: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
  /* height: 28rem; */
  gap: 3rem;
}
.quiz-25--card {
  position: relative;
  background: url(./images/img1.svg) no-repeat 50% 100% / 8.9rem;
  width: 10.2rem;
  min-height: 21rem;
  flex: 1;
}
.quiz-25--card-item {
  width: 10.2rem;
  height: 10.3rem;
  background: url(./images/card.svg) no-repeat 50% 50% / 10.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}
[data-state="ing"] .quiz-25--card-item {
  animation-name: cardShow;
  animation-duration: 300ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.51, 0.98, 0.6, 1.28);
}
@keyframes cardShow {
  0% {transform: scale(0.4) translate(0, 16rem);}
  100% {transform: scale(1) translate(0, 0);}
}
.quiz-25--button {
  width: 10rem;
  height: 4rem;
  background-color: #0880DB;
  color: #fff;
  border-radius: .6rem;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.quiz-25--button:hover,
.quiz-25--button:focus{
  background-color: #0061AB;
  transition: all 200ms;
}

[data-mode="complete"] [data-result-answer="X"] {
  border:0 !important;
  background-color: transparent !important;
  color: inherit !important;
}
.page-result--state {display: none !important;}
.complete .quiz-25--button{pointer-events: none;}

.page-act--content{
  display: flex;
  flex-direction: column;
  gap:2.2rem;
  align-items: flex-start;
}


/* 

.quiz-25--bingo button::before{
  content: attr(data-answer);
  position: absolute;
  top:0;
  left:0;
}
.quiz-25--card-item::before{
  content: attr(data-answer-id);
  position: absolute;
  top:0;
  left:0;
} */