/* --- FOND GLOBAL SOMBRE + HALOS COLORÉS --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,0,80,0.25), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(0,120,255,0.25), transparent 60%),
        url('https://www.transparenttextures.com/patterns/black-felt.png'),
        #000;
    background-size: cover;
    color: #f5f5f5;
}

/* --- TITRE --- */
#main h1 {
    text-align: center;
    color: white;
    font-size: 3rem;
    margin-top: 40px;
    text-shadow: 0 0 15px rgba(255,255,255,0.5);
}

/* --- CONTENEUR DES JEUX --- */
#jeux {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 50px;
}

/* --- STYLE COMMUN DES BOUTONS --- */
.jeu {
    width: 180px;
    height: 180px;
    border-radius: 20px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.8rem;
    font-weight: bold;

    background: #111;
    border: 2px solid #333;

    box-shadow: 0 0 10px rgba(255,255,255,0.1);
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

/* Reflet glissant (désactivé pour #jeu4 plus bas) */
.jeu::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
}

.jeu:hover::after {
    left: 100%;
}

/* Halo animé */
.jeu::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    animation: halo 3s infinite ease-in-out;
}

@keyframes halo {
    0% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.3); opacity: 0.6; }
    100% { transform: scale(1); opacity: 0.3; }
}

/* --- STYLES SPÉCIFIQUES PAR JEU --- */

/* 421 → Rouge / Gold / Néon */
#jeu1 {
    background: linear-gradient(180deg, #ff0000, #7a0000);
    border: 3px solid gold;
    color: white;
    text-shadow: 0 0 10px yellow;
    box-shadow: 0 0 20px gold;
}

/* Blackjack → Noir / Vert / Sobre */
#jeu2 {
    background: linear-gradient(180deg, #0a0a0a, #003300);
    border: 2px solid #00aa55;
    color: #00ff88;
    text-shadow: 0 0 5px #00ff88;
}

/* Roulette → Rouge / Noir / Métallique */
#jeu3 {
    background: linear-gradient(180deg, #111, #440000);
    border: 2px solid #aa0000;
    color: #ff4444;
    text-shadow: 0 0 5px #ff4444;
}

/* Dés → Bleu / Violet / Néon */
#jeu4 {
    background: linear-gradient(180deg, #0a0033, #220066);
    border: 2px solid #6600ff;
    color: #aa88ff;
    text-shadow: 0 0 8px #aa88ff;
}

/* Effet verre / reflet propre pour TOUS les boutons */
.jeu {
    position: relative;
    overflow: hidden;
}

.jeu::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
}

.jeu:hover::after {
    left: 100%;
}