/* ==========================================================================
   boards_mobile.css — plateaux de cartes repensés pour tenir à l'écran
   --------------------------------------------------------------------------
   Constat : le plateau du Président mesurait 1 230 px pour 774 px disponibles.
   Les adversaires étaient empilés verticalement (153 px), la main s'enroulait
   sur quatre lignes (392 px) et un bloc de variantes occupait 129 px.

   Principe retenu, identique aux trois jeux de cartes :
     en-tête de manche   compact
     adversaires         une seule bande horizontale
     table               prend l'espace restant
     ma main             une seule ligne, défilement horizontal si besoin
     actions             barre flottante basse, compacte

   Chaque jeu garde son plateau et ses couleurs : on redistribue l'espace,
   on ne dénature rien.
   ========================================================================== */

/* ==========================================================================
   PRÉSIDENT
   ========================================================================== */
body.in-game .president-game {
    min-height: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px 0 !important;
    overflow: hidden;
}

/* --- En-tête de manche : une seule ligne, lisible mais serré --- */
body.in-game .president-game > .game-header {
    flex: 0 0 auto;
    padding: 8px 10px;
    gap: 10px;
    border-radius: 14px;
}

body.in-game .president-game .round-info {
    font-size: 0.8rem;
    gap: 2px;
}

body.in-game .president-game .president-scores {
    font-size: 0.75rem;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

/* --- Adversaires : bande horizontale, plus d'empilement vertical --- */
body.in-game .other-players-area {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    padding: 2px 2px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.in-game .other-players-area::-webkit-scrollbar {
    display: none;
}

body.in-game .other-player {
    /* Photo en haut, prenom DESSOUS, puis le nombre de cartes : c'est la
       lecture demandee, et le prenom reste visible a trois joueurs.
       Chaque jeton prend une part egale de la largeur (flex: 1 1 0). */
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 6px 6px 7px;
    border-radius: 12px;
    text-align: center;
    /* Plafond de hauteur : quoi qu'ajoute le jeu dans le jeton (dos de cartes,
       role, animation), il ne prend jamais plus de 76 px de haut. */
    max-height: 76px;
    overflow: hidden;
}

body.in-game .other-player .player-avatar {
    width: 30px;
    height: 30px;
    font-size: 15px;
    border-width: 2px;
    flex: 0 0 auto;
}

body.in-game .other-player .player-name,
body.in-game .other-player .opponent-name {
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    order: 2;
}

body.in-game .other-player .card-count {
    font-size: 0.68rem;
    opacity: 0.85;
    order: 3;
}

/* Les dos de cartes empiles faisaient grimper le jeton a 129 px. Le compteur
   dit la meme chose en une ligne : on les retire sur petit ecran. */
body.in-game .other-player .player-cards-back,
body.in-game .other-player .opponent-cards,
body.in-game .other-player .other-cards {
    display: none !important;
}

body.in-game .other-player .spinner-hourglass {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 12px;
}

body.in-game .other-player {
    position: relative;
}

body.in-game .other-player .player-avatar-container {
    order: 1;
}

/* Les dos de cartes adverses : une pile fine, pas une rangée haute */
body.in-game .other-player .opponent-cards,
body.in-game .other-player .other-cards {
    display: flex;
    gap: 0;
    height: auto;
}

body.in-game .other-player .card-back,
body.in-game .other-player .opponent-cards .cardv {
    width: 16px !important;
    height: 24px !important;
    margin-left: -10px;
    border-radius: 3px;
}

body.in-game .other-player .card-back:first-child,
body.in-game .other-player .opponent-cards .cardv:first-child {
    margin-left: 0;
}

/* --- Table de jeu : elle prend ce qui reste --- */
body.in-game .president-game .play-area {
    flex: 1 1 auto;
    min-height: 64px;
    padding: 10px;
    border-radius: 16px;
    justify-content: center;
}

body.in-game .president-game .empty-pile {
    height: 64px;
    font-size: 0.8rem;
}

/* --- Ma main : une seule ligne, défilement horizontal si besoin --- */
body.in-game .president-game .my-hand-area {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 16px;
}

body.in-game .president-game .hand-label {
    font-size: 0.72rem;
    margin-bottom: 2px;
}

body.in-game .cards-hand {
    /* Une carte selectionnee remonte de 16 px : le conteneur defile
       horizontalement, donc son debordement vertical est rogne. Cette marge
       haute lui laisse la place exacte. */
    padding-top: 26px;
    padding-bottom: 2px;
    display: flex;
    flex-wrap: nowrap;
    /* « safe center » : la main reste centree quand elle tient, mais s'aligne
       a gauche quand elle deborde. Sans cela, une main de 18 cartes se centrait
       en debordant des DEUX cotes : la premiere carte sortait de l'ecran
       (x negatif) et devenait incliquable. */
    justify-content: flex-start;
    padding-inline: 2px;
    align-items: flex-end;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-height: 0;
}

body.in-game .cards-hand::-webkit-scrollbar {
    display: none;
}

@supports (justify-content: safe center) {
    body.in-game .cards-hand {
        justify-content: safe center;
    }
}

body.in-game .cards-hand .cardv {
    --card-w: clamp(46px, 13vw, 62px);
}

/* Levee adoucie : 25 px sortaient du cadre, 16 px restent dedans. */
body.in-game .hand-card.selected {
    transform: translateY(-16px) !important;
}

body.in-game .hand-card:hover {
    transform: translateY(-10px) !important;
}

/* --- Blocs décoratifs : ils ne doivent pas coûter de la hauteur --- */
body.in-game .president-game .variants-block,
body.in-game .president-game .action-area {
    display: none;
}

/* --- Boutons d'action : barre pleine largeur, ancree en bas ---
   Le President place sa barre dans #president-fixed-footer, qui porte un
   `transform` : un ancetre transforme CAPTURE ses descendants en position
   fixed. La barre se retrouvait donc large de 240 px au lieu de tout l'ecran.
   On neutralise le portail, puis on ancre la barre sur la fenetre. */
body.in-game #president-fixed-footer {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
}

/* president.css impose `#president-fixed-footer .fixed-footer { position:
   relative !important }`. Un selecteur par identifiant ne se bat qu'avec un
   selecteur encore plus specifique ET !important : c'est celui-ci. */
html body.in-game #president-fixed-footer .fixed-footer.action-buttons,
html body.in-game #president-fixed-footer .fixed-footer,
html body.in-game .action-buttons,
html body.in-game .action-buttons.fixed-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    z-index: 950 !important;
}

body.in-game .action-buttons .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 46px;
    padding: 11px 12px !important;
    font-size: 1rem !important;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 10px !important;
    margin: 0 !important;
}

/* La main ne doit pas passer sous la barre d'action */
body.in-game .president-game {
    padding-bottom: 84px !important;
}

/* ==========================================================================
   PALACE — même logique d'espace
   ========================================================================== */
body.in-game .palace-game {
    /* Le plateau etait en position:fixed a top:60px : il recouvrait l'en-tete
       et depassait de la zone. Il est desormais borne a #view-game. */
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    z-index: 1;
    min-height: 0 !important;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px 0 !important;
    overflow: hidden;
}

body.in-game .palace-opponents {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

body.in-game .palace-opponents::-webkit-scrollbar {
    display: none;
}

body.in-game .palace-center {
    flex: 1 1 auto;
    min-height: 0;
}

body.in-game .palace-table {
    height: 100%;
}

/* Le journal du Palace etait rogne (12 px visibles sur 25) : il defile. */
body.in-game .palace-logs-container,
body.in-game #palace-logs-panel {
    max-height: 84px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   TRAÎTRES — même logique d'espace
   ========================================================================== */
body.in-game #traitres-board,
body.in-game .traitres-board {
    /* Idem Palace : fixed 100vw/100vh recouvrait l'en-tete du site. */
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1;
    touch-action: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 6px;
    padding: 8px 10px 0;
    box-sizing: border-box;
    overflow: hidden;
}

body.in-game .traitres-top-zone {
    flex: 0 0 auto;
}

body.in-game .traitres-players-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

body.in-game .traitres-players-row::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   TRÈS PETITS ÉCRANS
   ========================================================================== */
@media (max-height: 700px) {
    body.in-game .president-game,
    body.in-game .palace-game,
    body.in-game #traitres-board {
        gap: 5px;
    }

    body.in-game .president-game .play-area {
        min-height: 48px;
        padding: 6px;
    }

    body.in-game .cards-hand .cardv {
        --card-w: clamp(40px, 11vw, 52px);
    }
}