:root {
    --bar-bg: radial-gradient(1200px 500px at 20% -10%, #ff7ab6 0, transparent 70%),
    radial-gradient(1000px 500px at 100% 0, #7af3ff 0, transparent 70%),
    linear-gradient(160deg, #0b0e19, #1a0930);
    --glass: rgba(255,255,255,0.08);
    --neon: #ff4d9d;
}

body {
    background: var(--bar-bg) fixed no-repeat;
    min-height: 100vh;
}

.neon { text-shadow: 0 0 12px var(--neon), 0 0 24px var(--neon); color: #fff; }
.tagline { opacity: 0.9; }

.card, .glass, .step-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 1rem 1.2rem;
}

.step-card { text-align: center; }
.glass-top { font-size: 2rem; margin-bottom: .5rem; }

.chili {
    display: flex;
    flex-wrap: wrap;          /* retour à la ligne si ça ne tient pas */
    gap: .5rem;
    justify-content: center;
}

.chili-btn {
    display: inline-flex;      /* taille sur le contenu */
    align-items: center;
    justify-content: center;
    padding: .8rem 1rem;
    flex: 0 0 auto;            /* pas d’étirement, pas de rétrécissement forcé */
    white-space: nowrap;       /* le texte reste sur une ligne -> largeur = texte */
    max-width: 100%;
}

/* Option mobile : si un libellé est vraiment long, on autorise le retour à la ligne
   pour éviter le débordement, tout en gardant la largeur au plus confortable. */
@media (max-width: 420px) {
    .chili-btn {
        white-space: normal;     /* le texte peut revenir à la ligne si nécessaire */
        text-align: center;
    }
}


input[readonly] { background: rgba(255,255,255,0.15); }
progress { width: 100%; margin-top: 1rem; }

.choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.choices button, .when-btn {
    padding: 0.5rem 1rem;
}

/* Grille fluide pour le bonus pimenté */
.grid.grid-preset {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .6rem;
    align-items: stretch;
}

/* Boutons lisibles, largeur stable */
.grid.grid-preset .preset {
    box-sizing: border-box;
    width: 100%;
    padding: .9rem 1rem;
    line-height: 1.2;
    white-space: normal;     /* pas d'empilement lettre par lettre */
    word-break: keep-all;
    hyphens: none;
}

/* Mobile : 1 bouton par ligne */
@media (max-width: 480px) {
    .grid.grid-preset { grid-template-columns: 1fr; }
}