main-website/poker-paf/old/game.css

:root {
    --poker-green: #1a5e33;
    --poker-border: #3e2723;
    --gold: #d4af37;
    --dark-bg: #0a0a0a;
    --panel-bg: #1a1a1a;
    --white: #ffffff;
}

body {
    background-color: var(--dark-bg);
    color: var(--white);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.game-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 1. Barre de stats */
.stats-bar {
    background: rgba(0,0,0,0.8);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--poker-border);
}

.stat-item {
    font-size: 1.2rem;
    color: var(--gold);
}

.btn-back {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 5px 10px;
    border: 1px solid var(--poker-border);
    border-radius: 4px;
}

/* 2. Table de jeu */
.table-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 60px; /* Espace pour les noms des joueurs */
}

.poker-table {
    width: 800px;
    height: 400px;
    background-color: var(--poker-green);
    border: 15px solid var(--poker-border);
    border-radius: 200px;
    position: relative;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.5);
}

.pot-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.total-pot {
    font-size: 3rem;
    font-weight: bold;
    color: var(--white);
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

.current-bet-display {
    font-size: 1.2rem;
    opacity: 0.8;
}

/* 3. Positionnement des joueurs (8 slots) */
.player-slot {
    position: absolute;
    width: 140px;
    z-index: 5;
}

.player-info {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 8px;
    text-align: center;
    position: relative;
}

.player-info.active {
    box-shadow: 0 0 25px var(--gold);
    transform: scale(1.1);
    border-color: #fff;
}

.player-name {
    display: block;
    font-weight: bold;
    color: var(--gold);
    font-size: 0.9rem;
}

.player-money {
    font-size: 1.1rem;
    font-weight: bold;
}

/* Coordonnées autour de l'ovale */
.slot-0 { top: -60px; left: 50%; transform: translateX(-50%); } 
.slot-1 { top: 0%; right: -110px; }
.slot-2 { top: 50%; right: -150px; transform: translateY(-50%); }
.slot-3 { bottom: 0%; right: -110px; }
.slot-4 { bottom: -60px; left: 50%; transform: translateX(-50%); } 
.slot-5 { bottom: 0%; left: -110px; }
.slot-6 { top: 50%; left: -150px; transform: translateY(-50%); }
.slot-7 { top: 0%; left: -110px; }

/* 4. Panneau d'action */
.action-panel {
    background: var(--panel-bg);
    border-top: 4px solid var(--gold);
    padding: 20px;
    text-align: center;
}

.turn-info {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn {
    padding: 15px 30px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.2s;
    min-width: 120px;
}

.btn-fold { background: #444; color: white; }
.btn-call { background: var(--poker-green); color: white; border: 1px solid var(--gold); }
.btn-raise { background: #1e88e5; color: white; }
.btn-allin { 
    background: linear-gradient(45deg, #d4af37, #f9e27d); 
    color: #3e2723;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.btn:hover {
    transform: translateY(-5px);
    filter: brightness(1.2);
}

/* --- Styles pour le bloc Augmenter --- */
.raise-group {
    display: flex;
    align-items: stretch; /* Pour que l'input et le bouton aient la même hauteur */
    margin: 0 10px;
}

#raise-amount {
    width: 100px;
    padding: 10px;
    border: 2px solid var(--gold);
    border-right: none; /* On retire la bordure droite pour coller au bouton */
    border-radius: 8px 0 0 8px; /* Arrondi seulement à gauche */
    background: #222;
    color: white;
    font-weight: bold;
    outline: none;
}

.btn-validate {
    padding: 10px 15px;
    background: var(--gold);
    color: var(--poker-border);
    border: 2px solid var(--gold);
    border-radius: 0 8px 8px 0; /* Arrondi seulement à droite */
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.2s;
}

.btn-validate:hover {
    background: #f9e27d;
    filter: brightness(1.1);
}

/* Suppression des flèches par défaut de l'input number pour un look plus propre */
#raise-amount::-webkit-inner-spin-button, 
#raise-amount::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

.guide-overlay {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--gold);
    padding: 20px;
    border-radius: 15px;
    z-index: 1000;
    text-align: center;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
    min-width: 300px;
}

.guide-content h2 {
    margin: 0 0 15px 0;
    color: white;
    font-size: 1.5rem;
}

#guide-btn {
    background: var(--gold);
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}

.dealer-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    background: linear-gradient(45deg, #ffd700, #b8860b);
    color: #000;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    border: 2px solid #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    z-index: 20;
}

/* On peut aussi ajouter un effet d'ombre sur le joueur qui commence */
.player-info.is-dealer {
    border-color: #ffd700;
}

.btn-next-round {
    margin-top: 15px;
    padding: 10px 20px;
    background: var(--gold);
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: 0.3s;
    z-index: 10;
}

.btn-next-round:hover {
    transform: scale(1.1);
    background: #fff;
    z-index: 10;
}

button.btn-back {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: background 0.3s, color 0.3s;
}

.player-bet {
    font-size: 0.9rem;
    color: rgb(141, 141, 141);
    margin-top: 5px;
}





/* --- Mode Mobile (pour les petits écrans) --- */
/* --- ADAPTATION MOBILE --- */
@media (max-width: 900px) {
    
    /* 1. On permet au corps de défiler si besoin, mais on réduit les espaces */
    body {
        height: auto;
        overflow-y: auto;
    }

    /* 2. Barre de stats plus compacte */
    .stats-bar {
        padding: 10px;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .stat-item {
        font-size: 1rem;
    }

    /* 3. LA TABLE : On la réduit pour qu'elle tienne en largeur */
    .table-container {
        padding: 40px 10px; /* Moins d'espace autour */
        min-height: 450px;
    }

    .poker-table {
        width: 100%;       /* Elle prend toute la largeur dispo */
        max-width: 350px;  /* Mais pas trop non plus */
        height: 300px;
        border-width: 8px;
        border-radius: 100px; /* Plus arrondie pour le format portrait */
    }

    .total-pot {
        font-size: 1.8rem;
    }

    /* 4. POSITION DES JOUEURS : On resserre tout */
    .player-slot {
        width: 100px; /* Joueurs plus petits sur mobile */
    }

    .player-name { font-size: 0.7rem; }
    .player-money { font-size: 0.9rem; }
    .player-bet { font-size: 0.7rem; }

    /* Ajustement des positions pour que ça ne sorte pas de l'écran */
    .slot-0 { top: -45px; }
    .slot-1 { right: -20px; top: 10%; }
    .slot-2 { right: -40px; }
    .slot-3 { right: -20px; bottom: 10%; }
    .slot-4 { bottom: -45px; }
    .slot-5 { left: -20px; bottom: 10%; }
    .slot-6 { left: -40px; }
    .slot-7 { left: -20px; top: 10%; }

    /* 5. PANNEAU D'ACTION : On empile les boutons */
    .action-panel {
        padding: 15px 10px;
        position: sticky;
        bottom: 0;
        z-index: 100;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 colonnes de boutons */
        gap: 10px;
    }

    .btn {
        padding: 12px 5px;
        min-width: 0;   /* On laisse la grille gérer la largeur */
        font-size: 0.8rem;
    }

    /* Le groupe de relance prend toute la largeur sur une ligne de la grille */
    .raise-group {
        grid-column: span 2; 
        margin: 0;
        justify-content: center;
    }

    #raise-amount {
        flex-grow: 1;
    }

    .btn-allin {
        grid-column: span 2; /* Le tapis prend toute la largeur pour bien le voir */
    }

    /* 6. Guide de bienvenue */
    .guide-overlay {
        width: 90%;
        box-sizing: border-box;
    }
}

/* Optionnel : Pour les très petits écrans (iPhone SE, etc.) */
@media (max-width: 380px) {
    .poker-table {
        height: 250px;
    }
    .player-slot {
        width: 85px;
    }
}

@media (max-width: 600px) {
    .win-panel {
        padding: 20px;
        width: 95%;
    }
    .win-panel h2 {
        font-size: 1.3rem;
    }
}