/* ============================================================
   Flashcard — padrão visual oficial @destruindoflashcards
   (adaptado do template Anki: frente/verso, efeitos e responsividade)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

.fc-stage { font-family: 'Inter', 'Segoe UI', sans-serif; color: #FFFFFF; text-align: left; padding: 6px 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-x: hidden; }
.card-container {
  width: 100%; max-width: 650px; background: #1a1a1a;
  border-top: 3px solid var(--tema); border-left: 3px solid var(--tema);
  border-right: 8px solid var(--tema); border-bottom: 12px solid var(--tema);
  border-radius: 35px; padding: 45px 35px; box-sizing: border-box;
  box-shadow: 0 0 22px rgba(var(--tema-rgb), 0.28), inset 0 0 20px rgba(0,0,0,0.8);
  position: relative; overflow: hidden; margin: 20px auto;
  animation: neonPulse 6s ease-in-out infinite;
}
.watermark-assinatura { position: absolute; bottom: 15px; right: 25px; font-size: 15px; font-weight: 900; opacity: 0.35; color: #FFF; letter-spacing: 2px; z-index: 0; text-transform: uppercase; }
.header-unificado { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; flex-wrap: nowrap; position: relative; padding-bottom: 12px; z-index: 2; overflow: hidden; }
.header-unificado::after { content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--tema) 0%, transparent 100%); }
.artigo-inline { font-size: clamp(14px, 4vw, 24px); font-weight: 950; color: var(--tema) !important; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.keyword-inline { font-size: clamp(14px, 4vw, 24px); font-weight: 950; color: #FFFFFF !important; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.label-julgue { font-size: 15px; font-weight: 950; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 15px; display: block; position: relative; padding-bottom: 5px; }
.label-julgue::after { content: ""; display: block; height: 2px; width: 60%; background: linear-gradient(90deg, var(--tema) 0%, transparent 100%); margin-top: 5px; }
.julgue-branco { color: #FFFFFF; }
.julgue-tema { color: var(--tema); text-shadow: 0 0 10px rgba(var(--tema-rgb), 0.5); }

.box-conteudo, .dica-ouro-box {
  background: #2e2e2e; border: 2px solid var(--tema); border-radius: 20px; padding: 25px; margin: 25px 0;
  box-shadow: 10px 15px 30px rgba(0,0,0,0.95), 0 0 25px rgba(var(--tema-rgb), 0.35);
  transform: perspective(1000px) translateZ(10px); position: relative; z-index: 10;
}
.box-estrutura { background: transparent; border: none; padding: 0; box-shadow: none; transform: none; margin: 30px 0; position: relative; z-index: 10; }
.label-sessao-hibrida { color: #FFFFFF !important; font-weight: 950; text-transform: uppercase; letter-spacing: 1.5px; font-size: 18px; margin-bottom: 6px; display: block; width: 100%; }
.label-sessao-hibrida::after { content: ""; display: block; height: 2px; width: 100%; background: linear-gradient(90deg, var(--tema) 0%, transparent 100%); margin-top: 8px; margin-bottom: 18px; }
.neon-label { color: var(--tema) !important; }
.text-principal { font-size: 28px; line-height: 1.5; color: #FFFFFF !important; font-weight: 400; word-wrap: break-word; }
.text-didatico { font-size: 22px; line-height: 1.6; color: #E0E0E0 !important; }
.lista-item { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 25px; list-style: none; padding: 0; }
.label-container { display: flex; align-items: center; margin-bottom: 8px; }
.explicacao-texto { padding-left: 22px; word-wrap: break-word; width: 100%; box-sizing: border-box; }

/* destaques (máx. 3 palavras por card) na cor do campo */
.lista-item.porque b   { color: #00c893; font-weight: 900; }
.lista-item.lei b      { color: #ff007f; font-weight: 900; }
.lista-item.exemplo b  { color: #ffaa00; font-weight: 900; }
.lista-item.pegad b    { color: #b85c8a; font-weight: 900; }
.dica-ouro-box b       { color: var(--tema); font-weight: 900; }

.gabarito-linha-unica { text-align: center; margin: 25px 0; font-size: 42px; font-weight: 950; z-index: 10; position: relative; }
.gab-label { color: #FFFFFF !important; }
.gab-val { color: var(--tema) !important; text-shadow: 0 0 25px rgba(var(--tema-rgb), 0.6); }

/* z-index baixo o bastante para nunca ficar por cima do menu lateral (z-index 50) nem do fundo escurecido no celular (22/09/2026) */
.badge-lei { background: var(--tema); color: #000; font-weight: 950; text-transform: uppercase; padding: 8px 28px; border-radius: 25px; font-size: 16px; letter-spacing: 2px; margin-top: -20px; margin-bottom: 20px; display: inline-block; box-shadow: 0 0 25px var(--tema); position: relative; z-index: 10; }

.botoes-container { display: flex; gap: 15px; margin-top: 30px; justify-content: center; align-items: center; z-index: 10; position: relative; }
.btn-certo, .btn-errado {
  flex: 1; padding: 22px 5px; border-radius: 20px; font-size: 34px; font-weight: 950; letter-spacing: 2px; cursor: pointer; text-transform: uppercase; color: #000; border: none; background: var(--tema);
  box-shadow: 0 10px 0 rgba(0,0,0,0.9), 0 15px 40px rgba(var(--tema-rgb), 0.6), inset 0 2px 3px rgba(255,255,255,0.4);
  -webkit-tap-highlight-color: transparent; transition: all 0.1s; position: relative; font-family: inherit;
}
.btn-certo:active, .btn-errado:active { transform: translateY(6px); box-shadow: 0 4px 0 rgba(0,0,0,0.9), 0 5px 20px rgba(var(--tema-rgb), 0.5) !important; }

/* Partículas, confete e tremor */
.particle { position: fixed; border-radius: 50%; pointer-events: none; z-index: 999999; }
@keyframes explodir { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } }
.confetti { position: fixed; pointer-events: none; z-index: 999999; }
@keyframes explodirConfete { 0% { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--tx), calc(var(--ty) + 400px)) scale(0.3) rotate(720deg); opacity: 0; } }
@keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
.shake-active { animation: shake 0.5s; animation-iteration-count: 3; }

.ponto-porque  { width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:12px;flex-shrink:0;background:#00c893;box-shadow:0 0 12px #00c893; }
.label-porque  { color:#00c893; font-weight:950; text-transform:uppercase; font-size:20px; text-shadow:0 0 8px #00c893; }
.ponto-lei     { width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:12px;flex-shrink:0;background:#ff007f;box-shadow:0 0 12px #ff007f; }
.label-lei     { color:#ff007f; font-weight:950; text-transform:uppercase; font-size:20px; text-shadow:0 0 8px #ff007f; }
.ponto-exemplo { width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:12px;flex-shrink:0;background:#ffaa00;box-shadow:0 0 12px #ffaa00; }
.label-exemplo { color:#ffaa00; font-weight:950; text-transform:uppercase; font-size:18px; text-shadow:0 0 8px #ffaa00; }
.ponto-pegad   { width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:12px;flex-shrink:0;background:#b85c8a;box-shadow:0 0 12px #b85c8a; }
.label-pegad   { color:#b85c8a; font-weight:950; text-transform:uppercase; font-size:18px; text-shadow:0 0 8px #b85c8a; }

/* Mensagem de acerto/erro */
.fc-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.5); z-index: 99999; backdrop-filter: blur(10px); border-radius: 20px; padding: 20px 25px; text-align: center; width: 85%; box-sizing: border-box; transition: transform .3s cubic-bezier(.175,.885,.32,1.275), opacity .4s; opacity: 0; }
.fc-msg.show { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.fc-msg.hit { background: rgba(5,25,15,0.95); border: 3px solid #00ff6a; box-shadow: 0 0 40px #00ff6a; }
.fc-msg.miss { background: rgba(25,5,5,0.95); border: 3px solid #ff0000; box-shadow: 0 0 40px #ff0000; }
.fc-msg div { font-weight: 950; font-size: clamp(20px,5vw,36px); }
.fc-msg.hit div { color: #00ff6a; text-shadow: 0 0 20px #00ff6a; }
.fc-msg.miss div { color: #ff3131; text-shadow: 0 0 20px #ff0000; }

/* ---------- Tamanho compacto dentro do app (frente e verso cabem na tela) ---------- */
.fc-stage { padding: 0 0 10px; }
.fc-stage .card-container { max-width: 580px; padding: 28px 24px 34px; border-radius: 26px; border-right-width: 6px; border-bottom-width: 9px; margin: 10px auto; }
.fc-stage .badge-lei { font-size: 12px; padding: 5px 16px; margin-top: -6px; margin-bottom: 12px; letter-spacing: 1.5px; }
.fc-stage .header-unificado { margin-bottom: 10px; padding-bottom: 8px; }
.fc-stage .artigo-inline, .fc-stage .keyword-inline { font-size: clamp(13px, 2.2vw, 17px); }
.fc-stage .box-conteudo, .fc-stage .dica-ouro-box { padding: 15px 18px; margin: 12px 0; border-radius: 16px; }
.fc-stage .label-julgue { font-size: 12px; margin-bottom: 8px; padding-bottom: 2px; }
.fc-stage .text-principal { font-size: clamp(16px, 2vw, 19px); line-height: 1.45; }
.fc-stage .text-didatico { font-size: clamp(14px, 1.7vw, 16px); line-height: 1.5; }
.fc-stage .gabarito-linha-unica { font-size: clamp(20px, 2.8vw, 26px); margin: 10px 0; }
.fc-stage .box-estrutura { margin: 14px 0 6px; }
.fc-stage .label-sessao-hibrida { font-size: 14px; }
.fc-stage .label-sessao-hibrida::after { margin-top: 6px; margin-bottom: 10px; }
.fc-stage .lista-item { margin-bottom: 10px; }
.fc-stage .label-container { margin-bottom: 3px; }
.fc-stage .label-porque, .fc-stage .label-lei { font-size: 14px; }
.fc-stage .label-exemplo, .fc-stage .label-pegad { font-size: 13px; }
.fc-stage .explicacao-texto { padding-left: 20px; }
.fc-stage .botoes-container { margin-top: 16px; gap: 12px; }
.fc-stage .btn-certo, .fc-stage .btn-errado { font-size: clamp(16px, 2.4vw, 21px); padding: 13px 6px; border-radius: 14px; box-shadow: 0 6px 0 rgba(0,0,0,.9), 0 10px 24px rgba(var(--tema-rgb), .5), inset 0 2px 3px rgba(255,255,255,.4); }
.fc-stage .watermark-assinatura { font-size: 10px; bottom: 8px; right: 16px; }
.fc-stage .fc-msg { padding: 14px 16px; }
.fc-stage .fc-msg div { font-size: clamp(15px, 2.6vw, 22px); }
@media (max-width: 600px) {
  .fc-stage .card-container { padding: 20px 14px 28px; border-radius: 20px; border-right-width: 5px; border-bottom-width: 7px; }
  .fc-stage .badge-lei { font-size: 10px; padding: 4px 10px; }
  .fc-stage .text-principal { font-size: 16px; }
  .fc-stage .text-didatico { font-size: 14px; }
  .fc-stage .box-conteudo, .fc-stage .dica-ouro-box { padding: 12px 13px; }
  .fc-stage .btn-certo, .fc-stage .btn-errado { font-size: 16px; padding: 12px 4px; }
  .fc-stage .explicacao-texto { padding-left: 14px; }
}
@media (max-height: 760px) and (min-width: 601px) {
  .fc-stage .card-container { padding: 22px 22px 28px; }
  .fc-stage .text-principal { font-size: 17px; }
}

/* Navegação do quiz abaixo do card */
.fc-nav { width: 100%; max-width: 650px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 auto; }

/* Atalhos de teclado (27/09/2026): legenda discreta, só em telas com mouse/teclado (some no celular) */
.fc-nav .fc-atalhos { flex: 1 1 auto; width: auto; max-width: none; margin: 0; align-self: center; }
.fc-atalhos { display: none; width: 100%; max-width: 650px; margin: 6px auto 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.4); }
.fc-atalhos b { color: rgba(255,255,255,.65); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .fc-atalhos { display: block; } }

@keyframes neonPulse {
  0% { box-shadow: 0 0 10px rgba(var(--tema-rgb), 0.16), 0 0 26px rgba(var(--tema-rgb), 0.10), 0 0 50px rgba(var(--tema-rgb), 0.06), inset 0 0 20px rgba(0,0,0,0.7); }
  50% { box-shadow: 0 0 14px rgba(var(--tema-rgb), 0.24), 0 0 34px rgba(var(--tema-rgb), 0.15), 0 0 66px rgba(var(--tema-rgb), 0.09), inset 0 0 22px rgba(0,0,0,0.7); }
  100% { box-shadow: 0 0 10px rgba(var(--tema-rgb), 0.16), 0 0 26px rgba(var(--tema-rgb), 0.10), 0 0 50px rgba(var(--tema-rgb), 0.06), inset 0 0 20px rgba(0,0,0,0.7); }
}

/* Celular */
@media (max-width: 600px) {
  .card-container { padding: 28px 18px 40px 18px; border-radius: 26px; }
  .header-unificado { flex-wrap: wrap; gap: 4px; }
  .artigo-inline, .keyword-inline { white-space: normal; }
  .badge-lei { margin-top: -12px; font-size: 11px; padding: 5px 12px; letter-spacing: 1px; }
  .text-principal { font-size: clamp(18px, 5vw, 24px); }
  .text-didatico { font-size: clamp(16px, 4.5vw, 20px); }
  .gabarito-linha-unica { font-size: clamp(24px, 6vw, 32px); }
  .botoes-container { flex-direction: row; gap: 10px; }
  .btn-certo, .btn-errado { flex: 1; font-size: clamp(16px, 4.5vw, 20px); padding: 13px 5px; border-radius: 16px; }
  .watermark-assinatura { bottom: 6px; right: 12px; font-size: 9px; opacity: 0.28; }
  .box-conteudo, .dica-ouro-box { padding: 18px; }
}
/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  .card-container { padding: 35px 25px 45px 25px; }
  .header-unificado { flex-wrap: wrap; gap: 6px; }
  .artigo-inline, .keyword-inline { white-space: normal; }
  .badge-lei { font-size: 14px; padding: 6px 18px; }
  .text-principal { font-size: clamp(22px, 3vw, 26px); }
  .text-didatico { font-size: clamp(18px, 2.8vw, 22px); }
  .gabarito-linha-unica { font-size: clamp(30px, 4vw, 38px); }
  .btn-certo, .btn-errado { font-size: clamp(20px, 3vw, 26px); padding: 16px 10px; }
  .watermark-assinatura { bottom: 10px; right: 18px; font-size: 11px; opacity: 0.3; }
}