/* Lobby — feuille de style — palette et polices cohérentes avec Le Labyrinthe */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Corps de page : dégradé parchemin chaud (même esprit que le Labyrinthe) */
body {
    font-family: 'Nunito', sans-serif;
    background:
        radial-gradient(ellipse at 15% 15%, rgba(180,130,60,.22) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(140,100,40,.18) 0%, transparent 50%),
        linear-gradient(155deg, #f7edd0 0%, #ebd89e 45%, #d8bf78 100%);
    background-attachment: fixed;
    color: #3a2500;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Grain parchemin subtil */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* ---- Conteneur principal ------------------------------------------------- */
.lobby-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 980px;
    padding: 48px 24px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* ---- En-tête -------------------------------------------------------------- */
.lobby-header {
    text-align: center;
}

.lobby-header h1 {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #5a2d00;
    text-shadow:
        2px 2px 0 rgba(255,220,100,.8),
        0 4px 16px rgba(100,50,0,.3);
    letter-spacing: .06em;
    line-height: 1.1;
    margin-bottom: 12px;
}

.lobby-header .accroche {
    font-size: clamp(.95rem, 2vw, 1.1rem);
    color: #7a5020;
    font-weight: 600;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ---- Grille des cartes de jeu -------------------------------------------- */
.jeux-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    width: 100%;
}

@media (max-width: 700px) {
    .jeux-grille {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

/* ---- Carte de jeu -------------------------------------------------------- */
.carte-jeu {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;

    background: linear-gradient(160deg, #fdf6e0 0%, #f5e5b0 60%, #eed888 100%);
    border: 2px solid #c8920a;
    border-radius: 20px;
    padding: 32px 24px 28px;
    box-shadow:
        0 6px 24px rgba(100,60,0,.18),
        0 2px 6px rgba(100,60,0,.10),
        inset 0 1px 0 rgba(255,255,255,.75);

    /* Transition pour l'effet hover */
    transition:
        transform .2s cubic-bezier(.22,.68,0,1.2),
        box-shadow .2s ease,
        border-color .2s ease;
}

.carte-jeu:hover {
    transform: translateY(-6px) scale(1.025);
    box-shadow:
        0 14px 40px rgba(100,60,0,.26),
        0 4px 10px rgba(100,60,0,.15),
        inset 0 1px 0 rgba(255,255,255,.8);
    border-color: #e09a10;
}

.carte-jeu:active {
    transform: translateY(-2px) scale(1.01);
}

/* Illustration emoji */
.carte-illustration {
    font-size: 3.6rem;
    line-height: 1;
    margin-bottom: 16px;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.2));
    transition: transform .2s ease;
}

.carte-jeu:hover .carte-illustration {
    transform: scale(1.08);
}

/* Titre de la carte */
.carte-jeu h2 {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 1.35rem;
    color: #5a2d00;
    letter-spacing: .04em;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0 rgba(255,220,100,.5);
}

/* Description */
.carte-description {
    font-size: .88rem;
    color: #7a5020;
    line-height: 1.55;
    font-weight: 600;
    flex: 1;
    margin-bottom: 20px;
}

/* Bouton "Jouer" */
.btn-jouer {
    display: inline-block;
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 1rem;
    background: linear-gradient(145deg, #e85c3a, #c0392b);
    color: #fff;
    border: 2px solid #8a1a0a;
    border-radius: 28px;
    padding: 9px 28px;
    box-shadow: 0 4px 12px rgba(180,50,20,.35), inset 0 1px 0 rgba(255,255,255,.22);
    letter-spacing: .04em;
    transition: transform .15s, box-shadow .15s, filter .15s;
    /* Le bouton hérite du curseur pointer de la carte-lien */
}

.carte-jeu:hover .btn-jouer {
    transform: scale(1.06);
    box-shadow: 0 7px 18px rgba(180,50,20,.45);
    filter: brightness(1.08);
}

/* ---- Pied de page -------------------------------------------------------- */
.lobby-footer {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    padding: 16px 24px 24px;
    font-size: .78rem;
    color: #a07838;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}