/* ═══════════════════════════════════════════════════════════════
   FDC Gamificação — Trilha Gamificada com Desbloqueio Progressivo
   Herda 100% a paleta do cliente via as CSS Vars já definidas em
   fdc-painel.css (--ia-primary, --ia-primary-h, --ia-primary-lt,
   --ia-accent...). Nunca usa hex fixo no tema principal dos
   componentes — só nos estados neutros de erro/sucesso, que já
   têm suas próprias vars (--ia-red, --ia-green...).
   ═══════════════════════════════════════════════════════════════ */

#fdc-app .fdc-gam-wrap {
    margin: 28px 0 8px;
    padding: 18px 16px 20px;
    border-radius: calc(var(--ia-radius) + 4px);
    border: 1.5px solid color-mix(in srgb, var(--ia-primary) 30%, var(--ia-border));
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ia-primary) 10%, transparent), transparent 60%),
        var(--ia-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px color-mix(in srgb, var(--ia-primary) 8%, transparent);
    position: relative;
    overflow: hidden;
    animation: fdc-gam-in .3s ease;
}

@keyframes fdc-gam-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

#fdc-app .fdc-gam-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 800; letter-spacing: .4px;
    color: var(--ia-primary-h);
    background: color-mix(in srgb, var(--ia-primary) 14%, var(--ia-surface));
    border: 1px solid color-mix(in srgb, var(--ia-primary) 30%, transparent);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 14px;
}

#fdc-app .fdc-gam-body { display: flex; flex-direction: column; gap: 12px; }
#fdc-app .fdc-gam-loading { color: var(--ia-muted); font-size: 14px; }

/* ── Elemento tátil base (cards/botões clicáveis dos 10 modelos) ── */
#fdc-app .fdc-gam-tap {
    min-height: 48px;
    border-radius: var(--ia-radius);
    border: 2px solid var(--ia-border);
    background: var(--ia-surface);
    color: var(--ia-text);
    font-family: var(--ia-font);
    font-weight: 700;
    font-size: 14.5px;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--ia-border) 100%, #000 6%);
    transition: transform .12s cubic-bezier(.4,0,.2,1), box-shadow .12s cubic-bezier(.4,0,.2,1), border-color .2s, background .2s;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
}
#fdc-app .fdc-gam-tap:hover {
    border-color: color-mix(in srgb, var(--ia-primary) 50%, var(--ia-border));
}
#fdc-app .fdc-gam-tap:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ia-border) 100%, #000 6%);
}
#fdc-app .fdc-gam-tap.is-selecionado {
    border-color: var(--ia-primary);
    background: var(--ia-primary-lt);
    color: var(--ia-primary-h);
    box-shadow: 0 3px 0 var(--ia-primary), 0 0 0 4px color-mix(in srgb, var(--ia-primary) 16%, transparent);
}
#fdc-app .fdc-gam-tap.is-correto {
    border-color: var(--ia-green);
    background: var(--ia-green-lt);
    animation: fdc-gam-pulso .5s ease;
}
#fdc-app .fdc-gam-tap.is-revisar {
    border-color: var(--ia-yellow);
    background: var(--ia-yellow-lt);
}

@keyframes fdc-gam-pulso {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ia-green) 45%, transparent); }
    70%  { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Botão de ação genérico dentro do bloco (confirmar/enviar) ── */
#fdc-app .fdc-gam-btn-acao {
    min-height: 48px;
    align-self: flex-start;
    border: none; border-radius: var(--ia-radius);
    background: var(--ia-primary); color: #fff;
    font-family: var(--ia-font); font-weight: 800; font-size: 14.5px;
    padding: 12px 22px; cursor: pointer;
    box-shadow: 0 3px 0 var(--ia-primary-h);
    transition: transform .12s, box-shadow .12s, opacity .2s;
}
#fdc-app .fdc-gam-btn-acao:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ia-primary-h); }
#fdc-app .fdc-gam-btn-acao:disabled { opacity: .45; cursor: not-allowed; }

/* ── Tipo 1: Duelo de Cartões ─────────────────────────────────── */
#fdc-app .fdc-gam-duelo { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 480px) { #fdc-app .fdc-gam-duelo { grid-template-columns: 1fr 1fr; } }
#fdc-app .fdc-gam-duelo .fdc-gam-tap { flex-direction: column; align-items: flex-start; min-height: 78px; justify-content: center; }
#fdc-app .fdc-gam-duelo-vs {
    display: none;
}
@media (min-width: 480px) {
    #fdc-app .fdc-gam-duelo-vs {
        display: flex; align-items: center; justify-content: center;
        font-weight: 900; color: var(--ia-accent); font-size: 13px;
    }
}

/* ── Tipo 2: Accordion de Revelação Obrigatória ──────────────── */
#fdc-app .fdc-gam-acc-item { border: 2px solid var(--ia-border); border-radius: var(--ia-radius); overflow: hidden; }
#fdc-app .fdc-gam-acc-head {
    width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: var(--ia-surface); border: none; cursor: pointer;
    font-weight: 700; font-size: 14px; color: var(--ia-text); font-family: var(--ia-font);
}
#fdc-app .fdc-gam-acc-item.is-aberto .fdc-gam-acc-head { background: var(--ia-primary-lt); color: var(--ia-primary-h); }
#fdc-app .fdc-gam-acc-chevron { transition: transform .2s; }
#fdc-app .fdc-gam-acc-item.is-aberto .fdc-gam-acc-chevron { transform: rotate(180deg); }
#fdc-app .fdc-gam-acc-corpo { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0 14px; color: var(--ia-muted); font-size: 13.5px; }
#fdc-app .fdc-gam-acc-item.is-aberto .fdc-gam-acc-corpo { max-height: 200px; padding: 4px 14px 14px; }

/* ── Tipo 3: Check-in de Atenção ──────────────────────────────── */
#fdc-app .fdc-gam-checkin-opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
#fdc-app .fdc-gam-checkin-opcoes .fdc-gam-tap { flex: 1 1 140px; justify-content: center; }

/* ── Tipo 4: Slider de Percepção ─────────────────────────────── */
#fdc-app .fdc-gam-slider-wrap { padding: 6px 4px; }
#fdc-app .fdc-gam-slider-valor {
    font-size: 32px; font-weight: 900; color: var(--ia-primary); text-align: center; margin-bottom: 6px;
}
#fdc-app .fdc-gam-range {
    width: 100%; height: 10px; border-radius: 999px; appearance: none;
    background: linear-gradient(90deg, var(--ia-primary) var(--gam-pct,50%), var(--ia-border) var(--gam-pct,50%));
    outline: none; cursor: pointer;
}
#fdc-app .fdc-gam-range::-webkit-slider-thumb {
    appearance: none; width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 4px solid var(--ia-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer;
}
#fdc-app .fdc-gam-range::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 4px solid var(--ia-primary); cursor: pointer;
}

/* ── Tipo 5: Mito vs Fato (flip 3D) ───────────────────────────── */
#fdc-app .fdc-gam-flip-scene { perspective: 1000px; min-height: 120px; }
#fdc-app .fdc-gam-flip-card {
    position: relative; width: 100%; min-height: 120px; cursor: pointer;
    transform-style: preserve-3d; transition: transform .5s cubic-bezier(.4,0,.2,1);
}
#fdc-app .fdc-gam-flip-card.is-virado { transform: rotateY(180deg); }
#fdc-app .fdc-gam-flip-face {
    position: absolute; inset: 0; backface-visibility: hidden;
    border-radius: var(--ia-radius); border: 2px solid var(--ia-border);
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 16px; font-weight: 700; font-size: 14.5px; color: var(--ia-text);
    background: var(--ia-surface);
}
#fdc-app .fdc-gam-flip-face--verso { transform: rotateY(180deg); background: var(--ia-primary-lt); color: var(--ia-primary-h); }

/* ── Tipo 6: Checkbox de Confirmação Ativa ───────────────────── */
#fdc-app .fdc-gam-check-item {
    display: flex; align-items: center; gap: 10px; min-height: 48px;
    border: 2px solid var(--ia-border); border-radius: var(--ia-radius);
    padding: 10px 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ia-text);
    transition: border-color .2s, background .2s;
}
#fdc-app .fdc-gam-check-item.is-marcado { border-color: var(--ia-green); background: var(--ia-green-lt); }
#fdc-app .fdc-gam-check-item input { width: 20px; height: 20px; accent-color: var(--ia-primary); flex-shrink: 0; }

/* ── Tipo 7: Jogo da Memória ──────────────────────────────────── */
#fdc-app .fdc-gam-memoria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; }
#fdc-app .fdc-gam-memoria-card {
    aspect-ratio: 1; border-radius: var(--ia-radius-sm); border: 2px solid var(--ia-border);
    background: var(--ia-primary); display: flex; align-items: center; justify-content: center;
    font-size: 22px; cursor: pointer; user-select: none;
    transition: transform .2s, background .2s; box-shadow: 0 3px 0 var(--ia-primary-h);
}
#fdc-app .fdc-gam-memoria-card:active { transform: translateY(2px); box-shadow: none; }
#fdc-app .fdc-gam-memoria-card.is-virada { background: var(--ia-surface); border-color: var(--ia-accent); box-shadow: none; }
#fdc-app .fdc-gam-memoria-card.is-par { background: var(--ia-green-lt); border-color: var(--ia-green); }

/* ── Tipo 8: Ordenação de Etapas ──────────────────────────────── */
#fdc-app .fdc-gam-ordem-item {
    display: flex; align-items: center; gap: 10px; min-height: 48px;
    border: 2px solid var(--ia-border); border-radius: var(--ia-radius);
    padding: 10px 12px; background: var(--ia-surface); font-size: 14px; font-weight: 600;
}
#fdc-app .fdc-gam-ordem-num {
    width: 26px; height: 26px; border-radius: 50%; background: var(--ia-primary-lt); color: var(--ia-primary-h);
    display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; flex-shrink: 0;
}
#fdc-app .fdc-gam-ordem-txt { flex: 1; }
#fdc-app .fdc-gam-ordem-setas { display: flex; flex-direction: column; gap: 2px; }
#fdc-app .fdc-gam-ordem-seta {
    width: 30px; height: 22px; border: none; border-radius: 5px; background: var(--ia-bg);
    color: var(--ia-muted); cursor: pointer; font-size: 11px;
}
#fdc-app .fdc-gam-ordem-seta:hover { background: var(--ia-primary-lt); color: var(--ia-primary-h); }
#fdc-app .fdc-gam-ordem-item.is-correta { border-color: var(--ia-green); background: var(--ia-green-lt); }

/* ── Tipo 9: Raspadinha Digital / Blur Reveal ────────────────── */
#fdc-app .fdc-gam-raspa-wrap {
    position: relative; border-radius: var(--ia-radius); overflow: hidden;
    border: 2px dashed color-mix(in srgb, var(--ia-primary) 50%, var(--ia-border));
    padding: 26px 16px; text-align: center; cursor: pointer; user-select: none;
    background: color-mix(in srgb, var(--ia-primary) 6%, var(--ia-surface));
}
#fdc-app .fdc-gam-raspa-txt {
    font-weight: 800; font-size: 15px; color: var(--ia-primary-h);
    filter: blur(8px); transition: filter .4s ease;
}
#fdc-app .fdc-gam-raspa-wrap.is-revelado .fdc-gam-raspa-txt { filter: blur(0); }
#fdc-app .fdc-gam-raspa-dica { margin-top: 8px; font-size: 12px; color: var(--ia-muted); }

/* ── Tipo 10: Termômetro / Medidor de Nível ──────────────────── */
#fdc-app .fdc-gam-termo { display: flex; gap: 6px; flex-wrap: wrap; }
#fdc-app .fdc-gam-termo .fdc-gam-tap { flex: 1 1 90px; flex-direction: column; gap: 4px; text-align: center; justify-content: center; min-height: 64px; font-size: 12.5px; }
#fdc-app .fdc-gam-termo-emoji { font-size: 20px; }

/* ── Estado de conclusão (comum a todos os tipos) ─────────────── */
#fdc-app .fdc-gam-concluido {
    text-align: center; padding: 22px 12px 6px;
    animation: fdc-gam-in .35s ease;
}
#fdc-app .fdc-gam-concluido-emoji { font-size: 40px; animation: fdc-gam-comemorar .6s ease; }
@keyframes fdc-gam-comemorar {
    0% { transform: scale(.4) rotate(-10deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}
#fdc-app .fdc-gam-concluido-texto { font-weight: 700; color: var(--ia-green); margin: 6px 0 16px; font-size: 14.5px; }
#fdc-app .fdc-gam-btn-avancar {
    min-height: 52px; width: 100%; max-width: 440px;
    border: none; border-radius: var(--ia-radius);
    background: linear-gradient(135deg, var(--ia-primary), var(--ia-accent));
    color: #fff; font-family: var(--ia-font); font-weight: 800; font-size: 14.5px;
    padding: 14px 18px; cursor: pointer;
    box-shadow: 0 4px 0 var(--ia-primary-h), 0 6px 18px color-mix(in srgb, var(--ia-primary) 35%, transparent);
    transition: transform .12s, box-shadow .12s;
}
#fdc-app .fdc-gam-btn-avancar:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ia-primary-h); }
#fdc-app .fdc-gam-btn-avancar--fim { background: linear-gradient(135deg, var(--ia-green), #22c55e); box-shadow: 0 4px 0 #16803a; }

/* ── Lista de tópicos: card bloqueado por gamificação ─────────
   Reaproveita a classe .fdc-topico-card--bloqueado já existente
   (mesmo visual de fosco/tracejado usado pelos módulos de liberação
   por dias); a única diferença visual é a tag, que aqui não mostra
   contagem de dias — ver patch em assets/js/fdc-painel.js. */
#fdc-app .fdc-topico-card--bloqueado[data-bloqueado-tipo="gamificado"] .fdc-modulo-exclusivo-tag {
    background: color-mix(in srgb, var(--ia-primary) 12%, var(--ia-surface));
    color: var(--ia-primary-h);
}