/* ==========================================================
   QUIZ: ficha pautada, corrigida à caneta
   ========================================================== */

.ficha {
  position: relative;
  max-width: 32rem;
  padding: 1.6rem 1.3rem 1.5rem;
  background:
    linear-gradient(180deg, transparent 3.2rem, rgba(239, 154, 154, .9) 3.2rem calc(3.2rem + 2px), transparent calc(3.2rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0 calc(1.9rem - 1px), rgba(198, 219, 239, .8) calc(1.9rem - 1px) 1.9rem) 0 3.3rem,
    #fffefb;
  border-radius: 3px;
  box-shadow: var(--sombra-alta);
  transform: rotate(-.6deg);
  animation: ficha-entra .45s cubic-bezier(.3, .7, .3, 1) both;
}

@keyframes ficha-entra {
  from { opacity: 0; transform: translateX(24px) rotate(1.5deg); }
}

.ficha__contagem {
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: .85rem;
  color: var(--tinta-apagada);
  margin-bottom: 1.1rem;
}

.ficha__pergunta {
  font-size: clamp(1.3rem, 5.6vw, 1.6rem);
  line-height: 1.25;
  margin-bottom: 1.1rem;
}

.opcoes {
  display: grid;
  gap: .35rem;
  margin-bottom: 1rem;
}

.opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 2.9rem;
  padding: .45rem .7rem;
  border-radius: 6px;
  text-align: left;
  font-size: 1.06rem;
  color: var(--tinta);
  transition: background .2s ease;
}

.opcao:hover:not(:disabled) { background: rgba(255, 219, 230, .55); }
.opcao:disabled { cursor: default; }

.opcao__caixa {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--tinta-apagada);
  border-radius: 3px;
}

/* certa: circulada à caneta */
.opcao__circulo {
  position: absolute;
  inset: -4px -6px;
  width: calc(100% + 12px);
  height: calc(100% + 8px);
  color: var(--caneta);
  stroke-width: 1.7;
  pointer-events: none;
  opacity: 0;
}

.certa .opcao__circulo { opacity: 1; }
.certa .rabisco path { stroke-dashoffset: 0; transition-duration: .9s; }
.certa .opcao__caixa { border-color: var(--caneta); background: var(--caneta); box-shadow: inset 0 0 0 2px #fffefb; }

/* errada: riscada de batom */
.errada .opcao__texto {
  text-decoration: line-through;
  text-decoration-color: var(--batom);
  text-decoration-thickness: 2px;
  color: var(--tinta-apagada);
}

.errada .opcao__caixa { border-color: var(--batom); }

.quiz__comentario {
  min-height: 1.8em;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.quiz__comentario:empty { display: none; }

.ficha--resultado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
}

.ficha__nota {
  font-size: 1.05rem;
  --r: -6deg;
  margin-bottom: .8rem;
}

.ficha--resultado .corpo { margin-bottom: 1.2rem; }