/* ========= Arquivo da Fé – Quiz (CSS completo) ========= */
/* Paleta fácil de customizar */
:root{
  --adf-bg: #ffffff;
  --adf-text: #2a2a2a;
  --adf-muted: #6b6b6b;

  --adf-card: #faf7f0;
  --adf-card-strong: #f4efe1;

  --adf-accent: #caa259;           /* dourado */
  --adf-accent-2: #b98c3c;         /* dourado forte */
  --adf-ring-track: #eeeeee;

  --adf-success: #2a5b3d;
  --adf-success-bg: #eef9f0;
  --adf-success-bd: #cfe9d6;

  --adf-error: #c44536;
  --adf-error-bg: #fff2f2;
  --adf-error-bd: #f6caca;

  --adf-shadow: 0 12px 30px rgba(0,0,0,.06);
  --adf-shadow-sm: 0 4px 14px rgba(0,0,0,.06);
}

/* ===== Container base ===== */
.adf-quiz-app,#adf-quiz-app{
  max-width: 780px;
  margin: 28px auto;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--adf-bg);
  color: var(--adf-text);
  box-shadow: var(--adf-shadow);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.adf-quiz-loading,.adf-done,.adf-error,.adf-premium,.adf-welcome{
  text-align:center; padding:28px;
}

/* ===== Header / status ===== */
.adf-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
}
.adf-stats{ display:flex; gap:16px; font-weight:700; }
.adf-heart{ color: var(--adf-error); }
.adf-corrects{ color: var(--adf-success); }

/* ===== Progress ring ===== */
.adf-ring{ position:relative; width:56px; height:56px }
.adf-ring-track,.adf-ring-fill{ position:absolute; inset:0; border-radius:50%; z-index:0 }
.adf-ring-track{ background:conic-gradient(var(--adf-ring-track) 0 100%); }
.adf-ring-fill{
  background:conic-gradient(var(--adf-accent) calc(var(--pct,0)*1%), var(--adf-ring-track) 0);
  transition: background .4s ease;
}
.adf-ring::after{
  content:""; position:absolute; inset:6px; background:#fff; border-radius:50%;
  box-shadow:inset 0 0 0 1px #eee; z-index:1;   /* < */
}
.adf-ring-label{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:800; font-size:.95rem; color:#2a2a2a; z-index:2; /* < aparece por cima */
  font-variant-numeric: tabular-nums;
}

/* ===== Prompt / thumb ===== */
.adf-thumb{ width:100%; max-height:220px; object-fit:cover; border-radius:12px; margin:8px 0; }
.adf-prompt{ font-size:1.25rem; line-height:1.55; margin:10px 0 16px; }

/* ===== Opções ===== */
.adf-options{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.adf-btn{
  cursor:pointer; border:none; border-radius:14px; padding:16px 18px; text-align:center;
  background: var(--adf-card);
  box-shadow: var(--adf-shadow-sm);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, filter .15s ease;
  font-weight:600;
}
.adf-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.adf-btn:active{ transform: translateY(0); }
.adf-btn:focus-visible{ outline: 2px solid var(--adf-accent); outline-offset: 3px; }
.adf-btn[disabled], .adf-disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.15); }

.adf-opt-img img{ max-width:100%; height:auto; border-radius:10px; }
.adf-opt-text{ font-size:1rem; }

/* ===== Ações / CTA ===== */
.adf-actions{ display:flex; gap:12px; justify-content:center; align-items:center; margin-top:14px; }
.adf-cta,.adf-start{
  cursor:pointer; border:none; border-radius:14px; padding:12px 18px; font-weight:800;
  background: linear-gradient(180deg,#efead0,#e6dbb5); color:#2a2a2a;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .06s ease, filter .15s ease;
}
.adf-cta:hover,.adf-start:hover{ transform:translateY(-1px); }
.adf-cta:focus-visible,.adf-start:focus-visible{ outline:2px solid var(--adf-accent); outline-offset:3px; }
.adf-next{ background: linear-gradient(180deg,var(--adf-accent),var(--adf-accent-2)); color:#fff; }

/* ===== Explicação ===== */
.adf-exp{ margin-top:16px; padding:14px; border-radius:14px; }
.adf-exp.ok{ background: var(--adf-success-bg); border:1px solid var(--adf-success-bd); }
.adf-exp.err{ background: var(--adf-error-bg);   border:1px solid var(--adf-error-bd); }
.adf-exp-title{ font-weight:800; margin-bottom:6px; }
.adf-exp-ref{ opacity:.8; margin-bottom:8px; }

/* ===== Toast ===== */
.adf-toast{
  position:fixed; left:50%; bottom:24px;
  transform:translateX(-50%) translateY(20px);
  background:#2a2a2a; color:#fff; padding:10px 14px; border-radius:10px;
  opacity:0; transition:all .2s; z-index:9999;
}
.adf-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Confete ===== */
.adf-confetti{
  position:absolute; left:50%; top:0; width:6px; height:10px;
  background:#d4b671; border-radius:2px; animation:adf-fall .9s ease forwards;
}


/* ---- OPÇÕES: contraste melhor e texto sempre legível ---- */
.adf-quiz-app .adf-btn{
  background:#f3e6c2;                 /* mais escuro */
  color:#2a2a2a !important;           /* força texto escuro */
  border:none; border-radius:14px; padding:16px 18px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  font-weight:700;
}
.adf-quiz-app .adf-btn:hover{ background:#edd39a }
.adf-quiz-app .adf-btn:active{ transform:translateY(0) }
.adf-quiz-app .adf-opt-text{ color:inherit !important; }

/* quando desabilitados (após responder), mantenha legível */
.adf-quiz-app .adf-btn[disabled], 
.adf-quiz-app .adf-disabled{
  opacity:.9; filter:none;            /* sem “apagar” demais */
  background:#eee2c3;
  cursor:not-allowed;
}

@keyframes adf-fall{
  from{ opacity:1; transform:translate(-50%,-50%) rotate(0) scale(1); }
  to  { opacity:0; transform:translate(calc(-50% + 80px), 120px) rotate(260deg) scale(.8); }
}

/* ===== Order (ordenar) ===== */
.adf-pool{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.adf-chip{
  background: var(--adf-card-strong);
  border-radius:10px; padding:8px 12px; border:none; cursor:pointer;
  box-shadow: var(--adf-shadow-sm); transition: transform .06s ease, box-shadow .2s ease;
}
.adf-chip:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.adf-order-out{ min-height:44px; border:1px dashed var(--adf-ring-track); border-radius:10px; padding:8px 12px; margin:8px 0; }
.adf-order-out li{ margin:4px 0; }

/* ===== Cloze (lacuna) ===== */
.adf-input{
  width: 100%; max-width: 520px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid #e5e2d6; background: #fff; font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
.adf-input:focus{ outline:2px solid var(--adf-accent); outline-offset:2px; }

/* ===== Estados vazios ===== */
.adf-empty{
  text-align:center; color: var(--adf-muted); background: #fff; border:1px dashed var(--adf-ring-track);
  padding:14px; border-radius:12px; margin-top:6px;
}

/* ===== Premium block ===== */
.adf-premium{
  text-align:center; background:#fff9ea; border:1px solid #f4e1b4; color:#7b5b1a;
  padding:18px; border-radius:14px;
}
.adf-premium h3{ margin:0 0 6px; }

/* Botão do cabeçalho: Reiniciar */
.adf-reset{
  border:none; border-radius:10px; padding:6px 10px; font-weight:700; cursor:pointer;
  background:#f1efe7; color:#444; box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .06s ease, background .2s ease;
  margin-right:6px;
}
.adf-reset:hover{ transform:translateY(-1px); background:#ebe6d7; }
.adf-reset:focus-visible{ outline:2px solid var(--adf-accent); outline-offset:2px; }

/* ===== Responsivo ===== */
@media (max-width: 640px){
  .adf-options{ grid-template-columns:1fr; }
  .adf-prompt{ font-size:1.1rem; }
  .adf-ring{ width:52px; height:52px; }
}