:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.fc-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6c757d;
  display: block;
  margin-bottom: .6rem;
}

.fc-card-q {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 4px 20px rgba(11,37,69,.1);
  margin-bottom: .75rem;
  animation: cardIn 280ms var(--ease-out) both;
}

.fc-card-a {
  background: #0b2545;
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 4px 20px rgba(11,37,69,.2);
  margin-bottom: .75rem;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.fc-card-a.entering {
  animation: answerIn 220ms var(--ease-out) both;
}

@keyframes cardIn {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes answerIn {
  from { opacity: 0; transform: scale(0.97) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.btn-reveal {
  width: 100%;
  background: #e6f0ff;
  color: #0b2545;
  border: 2px dashed #b8d0f0;
  border-radius: 12px;
  padding: .75rem;
  font-size: .95rem;
  cursor: pointer;
  font-weight: 600;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
  margin-bottom: .75rem;
}
.btn-reveal:active { transform: scale(0.97); }
.btn-reveal.open { background: #0b2545; color: #ffd166; border: 2px solid #0b2545; }

@media (hover: hover) and (pointer: fine) {
  .btn-reveal:not(.open):hover { background: #cfe2ff; border-color: #0b2545; }
  .btn-reveal.open:hover { background: #13315c; }
}

.fc-choice {
  padding: .35rem 0;
  font-size: .9rem;
  color: #90b4d8;
  border-bottom: 1px solid rgba(255,255,255,.07);
  opacity: 0;
  animation: choiceIn 200ms var(--ease-out) both;
}
.fc-choice:last-child { border-bottom: none; }
.fc-choice.right { color: #ffd166; font-weight: 700; }

@keyframes choiceIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.btn-nav {
  flex: 1;
  background: #fff;
  border: 2px solid #dce8f5;
  border-radius: 10px;
  padding: .75rem;
  font-size: 1rem;
  cursor: pointer;
  color: #0b2545;
  font-weight: 600;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn-nav:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .btn-nav:hover { border-color: #0b2545; background: #f0f6ff; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-card-q, .fc-card-a, .fc-choice { animation: none; opacity: 1; transform: none; }
  .btn-reveal, .btn-nav { transition: none; }
}