/* ============================================================
   Écran Carte — affichage question / réponse
   ============================================================ */
.ca-root{ padding: 18px 16px 28px; align-items: center; }

.ca-wrap{ position: relative; z-index: 2; width: 100%; max-width: 440px; }

.ca-category-tag{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 12px;
}
.ca-category-tag.savoirs{ background: var(--savoirs-bg); color: var(--savoirs-ink); }
.ca-category-tag.culture{ background: var(--culture-bg); color: var(--culture-ink); }
.ca-category-tag.sport{ background: var(--sport-bg); color: var(--sport-ink); }
.ca-category-tag.sante{ background: var(--sante-bg); color: var(--sante-ink); }
.ca-category-tag.clash{ background: var(--clash-bg); color: var(--clash-ink); }

.ca-card{
  border-radius: 22px; padding: 26px 22px; box-shadow: 0 20px 46px rgba(0,0,0,0.5);
  min-height: 220px; display: flex; flex-direction: column;
  transition: transform .2s ease;
}
.ca-card.savoirs{ background: linear-gradient(160deg, #f7f0dd, var(--savoirs-bg)); color: var(--savoirs-ink); }
.ca-card.culture{ background: linear-gradient(160deg, #6f4fb0, var(--culture-bg)); color: var(--culture-ink); }
.ca-card.sport{ background: linear-gradient(160deg, #3ba862, var(--sport-bg)); color: var(--sport-ink); }
.ca-card.sante{ background: linear-gradient(160deg, #38c2b3, var(--sante-bg)); color: var(--sante-ink); }
.ca-card.clash{ background: linear-gradient(160deg, #d85049, var(--clash-bg)); color: var(--clash-ink); }

.ca-level-badge{
  align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: rgba(0,0,0,0.16); margin-bottom: 10px;
}

.ca-question{ font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.4; flex: 1; }

.ca-answer-zone{ position: relative; z-index: 2; width: 100%; max-width: 440px; margin-top: 18px; }

.ca-choices{ display: flex; flex-direction: column; gap: 10px; }
.ca-choice-btn{
  padding: 14px 16px; border-radius: 14px; text-align: left; font-size: 14.5px; font-weight: 700;
  width: 100%;
}
.ca-choice-btn.correct{ outline: 3px solid #7fe07f; }
.ca-choice-btn.incorrect{ outline: 3px solid #ff8a80; }

.ca-open-row{ display: flex; gap: 8px; }
.ca-open-row .field-input{ flex: 1; }
.ca-mic-btn{
  width: 48px; height: 48px; flex: none; border-radius: 12px; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.ca-mic-btn.listening{ animation: ca-mic-pulse 1s ease-in-out infinite; }
@keyframes ca-mic-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(74,123,234,.6);} 50%{box-shadow:0 0 0 10px rgba(74,123,234,0);} }

.ca-manual-row{ display: flex; justify-content: center; margin-top: 10px; }
.ca-manual-btn{ font-size: 12px; padding: 8px 14px; background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; }

.ca-reveal{
  border-radius: 18px; padding: 18px 18px; margin-top: 4px;
  animation: ca-pop .18s ease;
}
@keyframes ca-pop{ from{ transform: scale(.96); opacity:0; } to{ transform: scale(1); opacity:1; } }
.ca-reveal.good{ background: rgba(127,224,127,0.14); border: 1px solid rgba(127,224,127,0.4); }
.ca-reveal.bad{ background: rgba(255,138,128,0.12); border: 1px solid rgba(255,138,128,0.35); }
.ca-reveal-title{ font-family: var(--font-display); font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.ca-reveal.good .ca-reveal-title{ color: #9be08a; }
.ca-reveal.bad .ca-reveal-title{ color: #ff9d94; }
.ca-reveal-answer{ font-size: 14.5px; line-height: 1.5; color: var(--ink); }

.ca-manual-choice{ display: flex; gap: 10px; margin-top: 12px; }
.ca-manual-choice .btn-solid{ flex: 1; padding: 10px; font-size: 13px; }

.ca-continue-row{ margin-top: 16px; }
.ca-continue-row .btn-solid{ width: 100%; padding: 15px; font-size: 15px; }

.ca-verdict-row{ display:flex; gap:10px; margin-top: 14px; }
.ca-verdict-row .btn-solid{ flex:1; padding: 13px; font-size: 14px; }

.ca-timer{ font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--gold-soft); text-align: center; margin-top: 8px; }