/* ============================================================
   feedback.css — Estilos del sistema de feedback in-game
   ============================================================ */

/* ── Overlay de fondo ────────────────────────────────────── */
#fb-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: background 0.25s ease;
}

#fb-overlay.visible {
    background: rgba(0, 0, 0, 0.72);
    pointer-events: all;
}

/* ── Card principal ──────────────────────────────────────── */
#fb-card {
    background: #0d0b1e;
    border: 2px solid #2a2550;
    border-radius: 18px;
    padding: 36px 40px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    font-family: 'Segoe UI', Arial, sans-serif;
    position: relative;
    overflow: hidden;

    /* Estado inicial: oculto */
    transform: scale(0.7) translateY(40px);
    opacity: 0;
    transition:
        transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity   0.25s ease;
}

#fb-card.visible {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ── Glow decorativo ─────────────────────────────────────── */
#fb-glow {
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#fb-glow.visible {
    opacity: 1;
}

/* ── Ícono de resultado ──────────────────────────────────── */
#fb-result-icon {
    font-size: 54px;
    line-height: 1;
    margin-bottom: 12px;
    animation: fb-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes fb-pop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Label de resultado (¡Correcto! / Incorrecto) ────────── */
#fb-result-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

#fb-result-label.success { color: #4ade80; }
#fb-result-label.fail    { color: #f87171; }

/* ── Título ──────────────────────────────────────────────── */
#fb-title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 14px;
    line-height: 1.35;
}

/* ── Badge del Drive ─────────────────────────────────────── */
#fb-drive-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 6px 16px;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
}

#fb-drive-badge .fb-drive-emoji {
    font-size: 17px;
    line-height: 1;
}

/* ── Mensaje educativo ───────────────────────────────────── */
#fb-message {
    font-size: 17px;
    color: #c0b8e8;
    line-height: 1.75;
    margin-bottom: 20px;
}

/* ── Delta de puntos ─────────────────────────────────────── */
#fb-delta {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 22px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.fb-delta-status-pos { color: #FFD700; }
.fb-delta-status-neg { color: #f87171; }
.fb-delta-coins-pos  { color: #4ade80; }
.fb-delta-coins-neg  { color: #f87171; }

/* ── Botón continuar ─────────────────────────────────────── */
#fb-btn {
    background: linear-gradient(135deg, #4a3faa, #7b5fd4);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 12px 36px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, filter 0.15s ease;
}

#fb-btn:hover  { filter: brightness(1.18); }
#fb-btn:active { transform: scale(0.96); }

/* ── Borde de card según resultado ──────────────────────── */
#fb-card.success { border-color: rgba(74, 222, 128, 0.35); }
#fb-card.fail    { border-color: rgba(248, 113, 113, 0.35); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
    #fb-card      { padding: 28px 22px; }
    #fb-title     { font-size: 20px; }
    #fb-result-icon { font-size: 44px; }
    #fb-delta     { font-size: 17px; }
    #fb-btn       { padding: 11px 28px; font-size: 17px; }
}

/* ── Ajuste al design system ─────────────────────────────── */
#fb-card  { font-family: var(--font, 'Inter', sans-serif); }
#fb-title { font-family: var(--font, 'Inter', sans-serif); }
#fb-btn   { font-family: var(--font, 'Inter', sans-serif); background: linear-gradient(135deg, #4a3faa, #7b5fd4); }