/* ════════════════════════════════════════════════════════════════════
   Apparence « Écarlate / Violet » — apparence Pokémon par défaut.

   Inspiration : l'interface des jeux de 9ᵉ génération (surfaces claires,
   duo écarlate/violet, angles biseautés, dégradés doux, typographie ronde).
   Aucun logo, police propriétaire ou visuel officiel n'est reproduit :
   seuls des choix de couleurs, de formes et d'espacements sont repris.

   Portée : tout est scopé sous body.fq-skin--scarlet-violet — le style
   neutre de FlexQuiz reste intact si l'apparence est désactivée.
   ════════════════════════════════════════════════════════════════════ */

body.fq-skin--scarlet-violet {
    /* — Duo écarlate / violet — */
    --fq-primary:        #8A4FD0;   /* violet */
    --fq-primary-strong: #6C36AE;
    --fq-primary-soft:   #F3ECFC;
    --fq-primary-ink:    #FFFFFF;
    --fq-accent:         #E2503F;   /* écarlate */

    --fq-ink:            #241B33;
    --fq-ink-soft:       #6D6382;
    --fq-surface:        #FFFFFF;
    --fq-surface-2:      #F7F4FC;
    --fq-border:         #E4DCF2;

    --fq-header-from:    #E2503F;   /* écarlate → violet */
    --fq-header-to:      #7B44C4;
    --fq-header-ink:     #FFFFFF;
    --fq-header-accent:  #FFD98A;   /* ambre clair : lisible sur écarlate ET violet */

    --fq-success:        #2BAE76;
    --fq-success-soft:   #DEF7EC;
    --fq-success-ink:    #10603F;
    --fq-danger:         #E2503F;
    --fq-danger-soft:    #FDE9E6;
    --fq-danger-ink:     #8E2B1F;
    --fq-warning:        #EFA320;
    --fq-warning-soft:   #FDF3DE;
    --fq-info:           #3D8BD4;

    --fq-radius:         18px;
    --fq-radius-sm:      12px;
    --fq-shadow:         0 10px 34px rgba(80, 40, 140, 0.16);
    --fq-border-width:   2px;
    --fq-font:           "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
    --fq-font-display:   var(--fq-font);
    --fq-letter-spacing: 0.2px;
    --fq-transition:     0.25s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* ── En-tête : dégradé diagonal + biseau angulaire ─────────────────── */
body.fq-skin--scarlet-violet .fq-quiz-header {
    background: linear-gradient(115deg, var(--fq-header-from) 0%, var(--fq-header-to) 100%);
    position: relative;
    overflow: hidden;
    border-radius: var(--fq-radius) var(--fq-radius) 0 0;
}
body.fq-skin--scarlet-violet .fq-quiz-header::after {
    content: '';
    position: absolute;
    inset: auto -10% -60% 40%;
    height: 140%;
    background: rgba(255, 255, 255, 0.10);
    transform: skewX(-18deg);
    pointer-events: none;
}

/* ── Cartes et boutons : rondeur généreuse, élévation douce ────────── */
body.fq-skin--scarlet-violet .fq-quiz-wrapper,
body.fq-skin--scarlet-violet .fq-answer-option,
body.fq-skin--scarlet-violet .fq-theme-card,
body.fq-skin--scarlet-violet .fq-profile,
body.fq-skin--scarlet-violet .fq-leaderboard {
    letter-spacing: var(--fq-letter-spacing);
}

body.fq-skin--scarlet-violet .fq-answer-option {
    border-radius: var(--fq-radius-sm);
    transition: transform var(--fq-transition), box-shadow var(--fq-transition), border-color var(--fq-transition);
}
body.fq-skin--scarlet-violet .fq-answer-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(122, 68, 196, 0.16);
}

body.fq-skin--scarlet-violet .fq-btn-validate,
body.fq-skin--scarlet-violet .fq-btn-restart,
body.fq-skin--scarlet-violet .fq-btn-reload {
    background: linear-gradient(135deg, var(--fq-primary) 0%, var(--fq-primary-strong) 100%);
    border-radius: 999px;
    letter-spacing: 0.4px;
    box-shadow: 0 6px 16px rgba(108, 54, 174, 0.28);
}
body.fq-skin--scarlet-violet .fq-btn-validate:hover,
body.fq-skin--scarlet-violet .fq-btn-restart:hover,
body.fq-skin--scarlet-violet .fq-btn-reload:hover {
    background: linear-gradient(135deg, var(--fq-primary-strong) 0%, var(--fq-primary-strong) 100%);
    box-shadow: 0 8px 22px rgba(108, 54, 174, 0.36);
}

/* ── Jauge de progression bicolore ─────────────────────────────────── */
body.fq-skin--scarlet-violet .fq-progress-fill {
    background: linear-gradient(90deg, var(--fq-accent) 0%, var(--fq-primary) 100%);
}

/* ── Grille d'Answer Set : pastilles arrondies ─────────────────────── */
body.fq-skin--scarlet-violet .fq-answer-grid-item {
    border-radius: 14px;
    transition: transform var(--fq-transition);
}
body.fq-skin--scarlet-violet .fq-answer-grid-item:hover {
    transform: translateY(-3px) scale(1.03);
}