/* ============================================================
   Ane VFB — Frontend Styles
   Design: pergaminho elegante + ouro, tipografia refinada
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Variáveis ───────────────────────────────────────────── */
.ane-vfb-quiz {
    --vfb-cor-fundo:        #faf8f3;
    --vfb-cor-cartao:       #ffffff;
    --vfb-cor-borda:        #e8e2d4;
    --vfb-cor-ouro:         #b8860b;
    --vfb-cor-ouro-claro:   #f0e8cc;
    --vfb-cor-texto:        #1c1a14;
    --vfb-cor-texto-suave:  #7a7264;
    --vfb-cor-verdadeiro:   #1a6b3c;
    --vfb-cor-falso:        #8b1a1a;
    --vfb-cor-verdadeiro-bg:#f0fdf4;
    --vfb-cor-falso-bg:     #fef2f2;
    --vfb-raio:             14px;
    --vfb-sombra:           0 2px 20px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
    --vfb-fonte-titulo:     'Lora', Georgia, serif;
    --vfb-fonte-corpo:      'DM Sans', -apple-system, sans-serif;
    --vfb-transicao:        .22s ease;

    font-family:  var(--vfb-fonte-corpo);
    color:        var(--vfb-cor-texto);
    max-width:    620px;
    margin:       0 auto;
    padding:      0 4px;
    box-sizing:   border-box;
}

/* ── Telas ───────────────────────────────────────────────── */
.ane-vfb-tela {
    animation: vfbEntrada .35s ease both;
}

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

/* ──────────────────────────────────────────────────────────
   TELA DE INÍCIO
   ─────────────────────────────────────────────────────── */
.ane-vfb-tela-inicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 32px;
    background: var(--vfb-cor-fundo);
    border: 1px solid var(--vfb-cor-borda);
    border-radius: var(--vfb-raio);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Textura ornamental de fundo */
.ane-vfb-tela-inicio::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(184,134,11,.06) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(184,134,11,.06) 0%, transparent 50%);
    pointer-events: none;
}

.ane-vfb-inicio__ilustracao {
    position: relative;
    margin-bottom: 24px;
    filter: drop-shadow(0 4px 12px rgba(184,134,11,.15));
}

.ane-vfb-inicio__titulo {
    font-family: var(--vfb-fonte-titulo);
    font-size: 28px;
    font-weight: 600;
    color: var(--vfb-cor-texto);
    margin: 0 0 10px;
    line-height: 1.25;
    position: relative;
}

.ane-vfb-inicio__subtitulo {
    font-size: 15px;
    color: var(--vfb-cor-texto-suave);
    margin: 0 0 28px;
    line-height: 1.6;
    position: relative;
}

.ane-vfb-inicio__info-rapido {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--vfb-cor-ouro-claro);
    border: 1px solid rgba(184,134,11,.25);
    border-radius: 24px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--vfb-cor-ouro);
    margin-bottom: 24px;
    position: relative;
}

/* ──────────────────────────────────────────────────────────
   BOTÕES DO JOGO
   ─────────────────────────────────────────────────────── */
.ane-vfb-btn-jogo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 32px;
    border: none;
    border-radius: 50px;
    font-family: var(--vfb-fonte-corpo);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--vfb-transicao), box-shadow var(--vfb-transicao), background var(--vfb-transicao);
    position: relative;
}

.ane-vfb-btn-jogo--iniciar {
    background: var(--vfb-cor-texto);
    color: #fff;
    box-shadow: 0 4px 16px rgba(28,26,20,.25);
    letter-spacing: .02em;
}

.ane-vfb-btn-jogo--iniciar:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(28,26,20,.3);
}

.ane-vfb-btn-jogo--proximo {
    background: var(--vfb-cor-texto);
    color: #fff;
    padding: 11px 28px;
    font-size: 14px;
    border-radius: 8px;
    margin-top: 16px;
    width: 100%;
}

.ane-vfb-btn-jogo--proximo:hover { background: #2d2b22; }

.ane-vfb-btn-jogo--reiniciar {
    background: transparent;
    color: var(--vfb-cor-texto);
    border: 2px solid var(--vfb-cor-borda);
    padding: 11px 28px;
    font-size: 14px;
    border-radius: 8px;
}

.ane-vfb-btn-jogo--reiniciar:hover {
    background: var(--vfb-cor-fundo);
    border-color: var(--vfb-cor-ouro);
}

.ane-vfb-btn-jogo--ranking {
    background: var(--vfb-cor-ouro);
    color: #fff;
    padding: 10px 22px;
    font-size: 13.5px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ane-vfb-btn-jogo--ranking:hover {
    background: #9a7109;
}

/* ──────────────────────────────────────────────────────────
   TELA DE JOGO — Status
   ─────────────────────────────────────────────────────── */
.ane-vfb-status {
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
    background: var(--vfb-cor-fundo);
    border: 1px solid var(--vfb-cor-borda);
    border-radius: 12px;
    padding: 2px;
    overflow: hidden;
}

.ane-vfb-status__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    border-radius: 10px;
    transition: background var(--vfb-transicao);
}

.ane-vfb-status__item--pontos {
    background: rgba(184,134,11,.06);
}

.ane-vfb-status__item--tempo {
    background: rgba(139,26,26,.06);
}

.ane-vfb-status__label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vfb-cor-texto-suave);
    margin-bottom: 2px;
}

.ane-vfb-status__valor {
    font-size: 17px;
    font-weight: 600;
    color: var(--vfb-cor-texto);
    font-feature-settings: "tnum";
}

/* ── Barra de progresso ──────────────────────────────────── */
.ane-vfb-progresso {
    height: 4px;
    background: var(--vfb-cor-ouro-claro);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 18px;
}

.ane-vfb-progresso__barra {
    height: 100%;
    background: var(--vfb-cor-ouro);
    border-radius: 4px;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ── Card da Pergunta ────────────────────────────────────── */
.ane-vfb-pergunta-card {
    background: #fff;
    border: 1px solid var(--vfb-cor-borda);
    border-radius: var(--vfb-raio);
    padding: 28px;
    margin-bottom: 16px;
    box-shadow: var(--vfb-sombra);
    position: relative;
    overflow: hidden;
    min-height: 120px;
}

/* Ornamento de borda superior */
.ane-vfb-pergunta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vfb-cor-ouro) 0%, rgba(184,134,11,.3) 100%);
    border-radius: 3px 3px 0 0;
}

.ane-vfb-pergunta-card__numero {
    font-family: var(--vfb-fonte-titulo);
    font-size: 13px;
    font-weight: 500;
    color: var(--vfb-cor-ouro);
    letter-spacing: .04em;
    margin-bottom: 14px;
}

.ane-vfb-pergunta-card__texto {
    font-family: var(--vfb-fonte-titulo);
    font-size: 20px;
    line-height: 1.55;
    color: var(--vfb-cor-texto);
    margin: 0;
    font-weight: 500;
}

/* ── Timer Ring (modo rápido) ────────────────────────────── */
.ane-vfb-timer-ring {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
}

.ane-vfb-timer-ring__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ane-vfb-timer-ring__fundo {
    fill: none;
    stroke: var(--vfb-cor-ouro-claro);
    stroke-width: 3;
}

.ane-vfb-timer-ring__arco {
    fill: none;
    stroke: var(--vfb-cor-ouro);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .95s linear, stroke .3s;
}

.ane-vfb-timer-ring__arco--urgente {
    stroke: var(--vfb-cor-falso);
}

.ane-vfb-timer-ring__numero {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--vfb-cor-texto);
}

/* ── Botões de Resposta ──────────────────────────────────── */
.ane-vfb-botoes-resposta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 0;
}

.ane-vfb-btn-resposta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 16px;
    border-radius: var(--vfb-raio);
    border: 2px solid transparent;
    cursor: pointer;
    font-family: var(--vfb-fonte-corpo);
    font-weight: 600;
    transition: all var(--vfb-transicao);
    position: relative;
    overflow: hidden;
}

.ane-vfb-btn-resposta__icone {
    font-size: 28px;
    line-height: 1;
    font-style: normal;
}

.ane-vfb-btn-resposta__texto {
    font-size: 15px;
    letter-spacing: .01em;
}

.ane-vfb-btn-resposta--verdadeiro {
    background: var(--vfb-cor-verdadeiro-bg);
    border-color: #c6f6d5;
    color: var(--vfb-cor-verdadeiro);
}

.ane-vfb-btn-resposta--verdadeiro:hover:not(:disabled) {
    background: #dcfce7;
    border-color: var(--vfb-cor-verdadeiro);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26,107,60,.15);
}

.ane-vfb-btn-resposta--falso {
    background: var(--vfb-cor-falso-bg);
    border-color: #fecaca;
    color: var(--vfb-cor-falso);
}

.ane-vfb-btn-resposta--falso:hover:not(:disabled) {
    background: #fee2e2;
    border-color: var(--vfb-cor-falso);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139,26,26,.15);
}

.ane-vfb-btn-resposta:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.ane-vfb-btn-resposta--selecionado-correto {
    background: #dcfce7 !important;
    border-color: var(--vfb-cor-verdadeiro) !important;
    color: var(--vfb-cor-verdadeiro) !important;
    transform: none !important;
}

.ane-vfb-btn-resposta--selecionado-errado {
    background: #fee2e2 !important;
    border-color: var(--vfb-cor-falso) !important;
    color: var(--vfb-cor-falso) !important;
    transform: none !important;
}

/* ── Feedback ────────────────────────────────────────────── */
.ane-vfb-feedback {
    background: var(--vfb-cor-fundo);
    border: 1px solid var(--vfb-cor-borda);
    border-radius: var(--vfb-raio);
    padding: 20px 24px;
    margin-top: 14px;
    animation: vfbEntrada .25s ease both;
}

.ane-vfb-feedback__resultado {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ane-vfb-feedback__resultado--correto { color: var(--vfb-cor-verdadeiro); }
.ane-vfb-feedback__resultado--errado  { color: var(--vfb-cor-falso); }

.ane-vfb-feedback__explicacao {
    font-size: 14px;
    line-height: 1.65;
    color: var(--vfb-cor-texto-suave);
    margin-bottom: 6px;
    font-family: var(--vfb-fonte-titulo);
    font-style: italic;
}

.ane-vfb-feedback__referencia {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vfb-cor-ouro);
    font-family: var(--vfb-fonte-corpo);
    font-style: normal;
}

.ane-vfb-feedback__referencia::before {
    content: '📖';
    font-size: 14px;
}

/* ── Animação de pontos ──────────────────────────────────── */
@keyframes vfbPontoFlutuando {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-40px); }
}

.ane-vfb-ponto-float {
    position: fixed;
    font-size: 18px;
    font-weight: 700;
    color: var(--vfb-cor-ouro);
    pointer-events: none;
    animation: vfbPontoFlutuando .9s ease forwards;
    z-index: 9999;
}

/* ──────────────────────────────────────────────────────────
   TELA DE RESULTADO
   ─────────────────────────────────────────────────────── */
.ane-vfb-tela-resultado {
    background: var(--vfb-cor-fundo);
    border: 1px solid var(--vfb-cor-borda);
    border-radius: var(--vfb-raio);
    padding: 44px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ane-vfb-tela-resultado::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 0%, rgba(184,134,11,.08) 0%, transparent 60%);
    pointer-events: none;
}

.ane-vfb-resultado__trofeu {
    font-size: 60px;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 12px rgba(184,134,11,.3));
    animation: vfbTrofeuEntrada .6s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes vfbTrofeuEntrada {
    from { opacity: 0; transform: scale(.5) rotate(-10deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

.ane-vfb-resultado__titulo {
    font-family: var(--vfb-fonte-titulo);
    font-size: 26px;
    font-weight: 600;
    color: var(--vfb-cor-texto);
    margin: 0 0 28px;
    position: relative;
}

.ane-vfb-resultado__stats {
    display: flex;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--vfb-cor-borda);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
    position: relative;
}

.ane-vfb-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
}

.ane-vfb-stat:not(:last-child) {
    border-right: 1px solid var(--vfb-cor-borda);
}

.ane-vfb-stat__valor {
    font-size: 30px;
    font-weight: 700;
    color: var(--vfb-cor-texto);
    line-height: 1;
    font-feature-settings: "tnum";
}

.ane-vfb-stat__label {
    font-size: 11.5px;
    color: var(--vfb-cor-texto-suave);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

.ane-vfb-resultado__mensagem {
    font-family: var(--vfb-fonte-titulo);
    font-size: 16px;
    font-style: italic;
    color: var(--vfb-cor-texto-suave);
    margin-bottom: 24px;
    line-height: 1.6;
    position: relative;
}

/* ── Formulário de ranking ───────────────────────────────── */
.ane-vfb-ranking-form {
    background: #fff;
    border: 1px solid var(--vfb-cor-borda);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
}

.ane-vfb-ranking-form__label {
    font-size: 13.5px;
    color: var(--vfb-cor-texto);
    font-weight: 500;
    margin: 0 0 12px;
}

.ane-vfb-ranking-form__linha {
    display: flex;
    gap: 8px;
}

.ane-vfb-ranking-form__input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--vfb-cor-borda);
    border-radius: 8px;
    font-family: var(--vfb-fonte-corpo);
    font-size: 14px;
    color: var(--vfb-cor-texto);
    background: var(--vfb-cor-fundo);
    transition: border-color var(--vfb-transicao);
}

.ane-vfb-ranking-form__input:focus {
    outline: none;
    border-color: var(--vfb-cor-ouro);
    box-shadow: 0 0 0 3px rgba(184,134,11,.1);
}

.ane-vfb-ranking-form__feedback {
    font-size: 13px;
    margin: 10px 0 0;
    min-height: 16px;
    color: var(--vfb-cor-verdadeiro);
    font-weight: 500;
}

.ane-vfb-ranking-form__feedback--erro {
    color: var(--vfb-cor-falso);
}

.ane-vfb-resultado__acoes {
    display: flex;
    justify-content: center;
    position: relative;
}

/* ── Aviso genérico ──────────────────────────────────────── */
.ane-vfb-aviso {
    padding: 16px 20px;
    background: var(--vfb-cor-fundo);
    border: 1px solid var(--vfb-cor-borda);
    border-radius: 10px;
    color: var(--vfb-cor-texto-suave);
    font-size: 14px;
    text-align: center;
}

/* ── Responsivo ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .ane-vfb-tela-inicio  { padding: 32px 20px; }
    .ane-vfb-tela-resultado { padding: 32px 20px; }
    .ane-vfb-inicio__titulo { font-size: 22px; }
    .ane-vfb-pergunta-card  { padding: 20px; }
    .ane-vfb-pergunta-card__texto { font-size: 17px; }
    .ane-vfb-botoes-resposta { grid-template-columns: 1fr; }
    .ane-vfb-btn-resposta { flex-direction: row; padding: 16px; }
    .ane-vfb-btn-resposta__icone { font-size: 22px; }
    .ane-vfb-status { flex-wrap: wrap; }
    .ane-vfb-status__item { min-width: 45%; }
    .ane-vfb-resultado__stats { flex-direction: column; }
    .ane-vfb-stat:not(:last-child) { border-right: none; border-bottom: 1px solid var(--vfb-cor-borda); }
    .ane-vfb-ranking-form__linha { flex-direction: column; }
}